how-do-it - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

index.js

@@ -1,2 +0,1 @@
-// export { HowDoitContext } from './src/Context'
 export { HowDoitProvider } from './src/Provider'

package.json

 {
   "name": "how-do-it",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Crea popup para describir tu aplicacion",
@@ -5,0 +5,0 @@ "main": "index.js",

src/Provider.js

@@ -21,2 +21,29 @@ import  React, { useEffect, useState, useRef } from "react"
 
+    const renderButtons = (item, index) => {
+        const btn = document.querySelector(`[data-howdoit-button="${index}"]`)
+        if( !btn ) {
+            const marker = item.dataset.howdoitMarker || '?'
+            const markerHover = item.dataset.howdoitMarkerHover || '?'
+            const button = document.createElement('button')
+            button.dataset.howdoitButton = index
+            button.innerHTML = marker
+            button.addEventListener('mouseover', (event)=>{
+                button.innerHTML = markerHover
+            })
+            button.addEventListener('mouseout', (event)=>{
+                button.innerHTML = marker
+            })
+            button.addEventListener('click', (event)=>{
+                event.stopPropagation()
+                const { howdoit } = event.target.parentElement.dataset
+                if( howdoit ) {
+                    setCurrent(howdoit)
+                    ref.current.style.display = 'block'
+                    setTimeout(()=>setShow( () =>  true),100)
+                }
+            })
+            item.appendChild(button)
+        }
+    }
+
     useEffect(()=>{
@@ -57,29 +84,9 @@ if( !show ) {
     useEffect(()=>{
-        const all = document.querySelectorAll('[data-howdoit]')
-        all.forEach((item, index)=>{
-            const btn = document.querySelector(`[data-howdoit-button="${index}"]`)
-            if( !btn ) {
-                const marker = item.dataset.howdoitMarker || '?'
-                const markerHover = item.dataset.howdoitMarkerHover || '?'
-                const button = document.createElement('button')
-                button.dataset.howdoitButton = index
-                button.innerHTML = marker
-                button.addEventListener('mouseover', (event)=>{
-                    button.innerHTML = markerHover
-                })
-                button.addEventListener('mouseout', (event)=>{
-                    button.innerHTML = marker
-                })
-                button.addEventListener('click', (event)=>{
-                    event.stopPropagation()
-                    const { howdoit } = event.target.parentElement.dataset
-                    if( howdoit ) {
-                        setCurrent(howdoit)
-                        ref.current.style.display = 'block'
-                        setTimeout(()=>setShow( () =>  true),100)
-                    }
-                })
-                item.appendChild(button)
-            }
+        const observer = new MutationObserver(() => {
+            const all = document.querySelectorAll('[data-howdoit]')
+            all.forEach(renderButtons)
         })
+        observer.observe(document.body, { childList: true, subtree: true })
+
+        return () => observer.disconnect()
     },[])
@@ -86,0 +93,0 @@

No alert changes

Improved metrics

Total package byte prevSize

6991

increased by1.25%

Lines of code

149

increased by2.76%

No dependency changes