react-magic-portal 1.1.4 → 1.1.5

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.1.5](https://github.com/molvqingtai/react-magic-portal/compare/v1.1.4...v1.1.5) (2025-09-26)
+
+
+### Performance Improvements
+
+* expand the anchor point mutation detection range ([110229f](https://github.com/molvqingtai/react-magic-portal/commit/110229f438cff2674625ab49438b9cb41eab76ee))
+
 ## [1.1.4](https://github.com/molvqingtai/react-magic-portal/compare/v1.1.3...v1.1.4) (2025-09-26)
 
 

package/README.md

@@ -257,21 +257,14 @@ const MyComponent = () => {
   return <div>My Component Content</div>
 }
 
-// Wrap the component in a DOM element
+// Wrap the component in a transparent DOM element
 <MagicPortal anchor="#target">
-  <div>
+  <div style={{ display: 'contents' }}>
     <MyComponent />
   </div>
 </MagicPortal>
 ```
 
-### Browser Extension Development Tips
-
-- **Test dynamic content scenarios** - Many web pages load content asynchronously
-- **Handle multiple SPA navigation** - Single Page Applications may recreate elements frequently
-- **Monitor for anchor disappearance** - Use `onUnmount` callback to handle cleanup
-- **Use specific selectors** - Avoid overly generic CSS selectors that might match unintended elements
-
 ## License
 
 MIT © [molvqingtai](https://github.com/molvqingtai)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-magic-portal",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "React Portal with dynamic mounting support",
   "main": "packages/component/dist/index.js",
   "type": "module",

package/packages/component/dist/index.js

@@ -1,2 +1,2 @@
-import e,{useCallback as t,useEffect as n,useLayoutEffect as r,useRef as i,useState as a}from"react";import o from"react-dom";const s=e=>{let t=Object.getOwnPropertyDescriptor(e.props,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning;return n?e.ref:(t=Object.getOwnPropertyDescriptor(e,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)},c=e=>typeof e==`string`?document.querySelector(e):typeof e==`function`?e():e&&`current`in e?e.current:e,l=(...e)=>t=>e.forEach(e=>{typeof e==`function`?e(t):e&&(e.current=t)}),u=({anchor:u,position:d=`append`,children:f,onMount:p,onUnmount:m,key:h})=>{let g=i(null),[_,v]=a(null),y=e.Children.map(f,t=>{if(!e.isValidElement(t))return null;let n=s(t);return e.cloneElement(t,{ref:l(n,e=>{e&&g.current?.insertAdjacentElement({before:`beforebegin`,prepend:`afterbegin`,append:`beforeend`,after:`afterend`}[d],e)})})}),b=t(()=>{g.current=c(u);let e=d===`prepend`||d===`append`?g.current:g.current?.parentElement??null;v(e)},[u,d]);return r(()=>{b();let e=new MutationObserver(e=>{e.some(e=>{let{addedNodes:t,removedNodes:n}=e;return!!(g.current&&Array.from(n).includes(g.current)||typeof u==`string`&&[...t].some(e=>e instanceof Element&&e.matches?.(u)))})&&b()});return e.observe(document.body,{childList:!0,subtree:!0}),()=>e.disconnect()},[b,u]),n(()=>{if(_&&g.current)return p?.(g.current,_),()=>{m?.(g.current,_)}},[p,m,_]),_&&o.createPortal(y,_,h)};u.displayName=`MagicPortal`;var d=u;export{d as default};
+import e,{useCallback as t,useEffect as n,useLayoutEffect as r,useRef as i,useState as a}from"react";import o from"react-dom";const s=e=>{let t=Object.getOwnPropertyDescriptor(e.props,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning;return n?e.ref:(t=Object.getOwnPropertyDescriptor(e,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)},c=e=>typeof e==`string`?document.querySelector(e):typeof e==`function`?e():e&&`current`in e?e.current:e,l=(...e)=>t=>e.forEach(e=>{typeof e==`function`?e(t):e&&(e.current=t)}),u=({anchor:u,position:d=`append`,children:f,onMount:p,onUnmount:m,key:h})=>{let g=i(null),[_,v]=a(null),y=e.Children.map(f,t=>{if(!e.isValidElement(t))return null;let n=s(t);return e.cloneElement(t,{ref:l(n,e=>{e&&g.current?.insertAdjacentElement({before:`beforebegin`,prepend:`afterbegin`,append:`beforeend`,after:`afterend`}[d],e)})})}),b=t(()=>{g.current=c(u),v(d===`prepend`||d===`append`?g.current:g.current?.parentElement??null)},[u,d]);return r(()=>{b();let e=new MutationObserver(e=>{!e.flatMap(({addedNodes:e,removedNodes:t})=>[...e,...t]).some(e=>_?.contains(e))&&b()});return e.observe(document.body,{childList:!0,subtree:!0}),()=>e.disconnect()},[b,u,_]),n(()=>{if(_&&g.current)return p?.(g.current,_),()=>{m?.(g.current,_)}},[p,m,_]),_&&o.createPortal(y,_,h)};u.displayName=`MagicPortal`;var d=u;export{d as default};
 //# sourceMappingURL=index.js.map

package/packages/component/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["container"],"sources":["../src/index.ts"],"sourcesContent":["import React, { useEffect, useState, useRef, useCallback, useLayoutEffect } from 'react'\nimport ReactDOM from 'react-dom'\n\nexport interface MagicPortalProps {\n  anchor: string | (() => Element | null) | Element | React.RefObject<Element | null> | null\n  position?: 'append' | 'prepend' | 'before' | 'after'\n  children?: React.ReactElement | React.ReactElement[]\n  onMount?: (anchor: Element, container: Element) => void\n  onUnmount?: (anchor: Element, container: Element) => void\n  key?: React.Key\n}\n\n/**\n * https://github.com/radix-ui/primitives/blob/36d954d3c1b41c96b1d2e875b93fc9362c8c09e6/packages/react/slot/src/slot.tsx#L166\n */\nconst getElementRef = (element: React.ReactElement) => {\n  // React <=18 in DEV\n  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get\n  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning\n  if (mayWarn) {\n    return (element as any).ref as React.Ref<Element>\n  }\n  // React 19 in DEV\n  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get\n  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning\n  if (mayWarn) {\n    return (element.props as { ref?: React.Ref<Element> }).ref\n  }\n\n  // Not DEV\n  return (element.props as { ref?: React.Ref<Element> }).ref || ((element as any).ref as React.Ref<Element>)\n}\n\nconst resolveAnchor = (anchor: MagicPortalProps['anchor']) => {\n  if (typeof anchor === 'string') {\n    return document.querySelector(anchor)\n  } else if (typeof anchor === 'function') {\n    return anchor()\n  } else if (anchor && 'current' in anchor) {\n    return anchor.current\n  } else {\n    return anchor\n  }\n}\n\nconst mergeRef = <T extends Element | null>(...refs: (React.Ref<T> | undefined)[]) => {\n  return (node: T) =>\n    refs.forEach((ref) => {\n      if (typeof ref === 'function') {\n        ref(node)\n      } else if (ref) {\n        ref.current = node\n      }\n    })\n}\n\nconst MagicPortal = ({ anchor, position = 'append', children, onMount, onUnmount, key }: MagicPortalProps) => {\n  const anchorRef = useRef<Element | null>(null)\n  const [container, setContainer] = useState<Element | null>(null)\n\n  const nodes = React.Children.map(children, (item) => {\n    if (!React.isValidElement(item)) {\n      return null\n    }\n    const originalRef = getElementRef(item)\n    return React.cloneElement(item as React.ReactElement<any>, {\n      ref: mergeRef(originalRef, (node) => {\n        const positionMap = {\n          before: 'beforebegin',\n          prepend: 'afterbegin',\n          append: 'beforeend',\n          after: 'afterend'\n        } as const\n        node && anchorRef.current?.insertAdjacentElement(positionMap[position], node)\n      })\n    })\n  })\n\n  const update = useCallback(() => {\n    anchorRef.current = resolveAnchor(anchor)\n    const container =\n      position === 'prepend' || position === 'append' ? anchorRef.current : (anchorRef.current?.parentElement ?? null)\n    setContainer(container)\n  }, [anchor, position])\n\n  useLayoutEffect(() => {\n    update()\n\n    const observer = new MutationObserver((mutations) => {\n      const shouldUpdate = mutations.some((mutation) => {\n        const { addedNodes, removedNodes } = mutation\n        // Check if current anchor is removed\n        if (anchorRef.current && Array.from(removedNodes).includes(anchorRef.current)) {\n          return true\n        }\n        // Only check added nodes when anchor is a string selector\n        if (\n          typeof anchor === 'string' &&\n          [...addedNodes].some((node) => node instanceof Element && node.matches?.(anchor))\n        ) {\n          return true\n        }\n        return false\n      })\n      shouldUpdate && update()\n    })\n\n    observer.observe(document.body, {\n      childList: true,\n      subtree: true\n    })\n\n    return () => observer.disconnect()\n  }, [update, anchor])\n\n  useEffect(() => {\n    if (container && anchorRef.current) {\n      onMount?.(anchorRef.current, container)\n      return () => {\n        onUnmount?.(anchorRef.current!, container)\n      }\n    }\n  }, [onMount, onUnmount, container])\n\n  return container && ReactDOM.createPortal(nodes, container, key)\n}\n\nMagicPortal.displayName = 'MagicPortal'\n\nexport default MagicPortal\n"],"mappings":"8HAeA,MAAM,EAAiB,GAAgC,CAErD,IAAI,EAAS,OAAO,yBAAyB,EAAQ,MAAO,MAAM,EAAE,IAChE,EAAU,GAAU,mBAAoB,GAAU,EAAO,eAY7D,OAXI,EACM,EAAgB,KAG1B,EAAS,OAAO,yBAAyB,EAAS,MAAM,EAAE,IAC1D,EAAU,GAAU,mBAAoB,GAAU,EAAO,eACrD,EACM,EAAQ,MAAuC,IAIjD,EAAQ,MAAuC,KAAS,EAAgB,MAG5E,EAAiB,GACjB,OAAO,GAAW,SACb,SAAS,cAAc,EAAO,CAC5B,OAAO,GAAW,WACpB,GAAQ,CACN,GAAU,YAAa,EACzB,EAAO,QAEP,EAIL,GAAsC,GAAG,IACrC,GACN,EAAK,QAAS,GAAQ,CAChB,OAAO,GAAQ,WACjB,EAAI,EAAK,CACA,IACT,EAAI,QAAU,IAEhB,CAGA,GAAe,CAAE,SAAQ,WAAW,SAAU,WAAU,UAAS,YAAW,SAA4B,CAC5G,IAAM,EAAY,EAAuB,KAAK,CACxC,CAAC,EAAW,GAAgB,EAAyB,KAAK,CAE1D,EAAQ,EAAM,SAAS,IAAI,EAAW,GAAS,CACnD,GAAI,CAAC,EAAM,eAAe,EAAK,CAC7B,OAAO,KAET,IAAM,EAAc,EAAc,EAAK,CACvC,OAAO,EAAM,aAAa,EAAiC,CACzD,IAAK,EAAS,EAAc,GAAS,CAOnC,GAAQ,EAAU,SAAS,sBANP,CAClB,OAAQ,cACR,QAAS,aACT,OAAQ,YACR,MAAO,WACR,CAC4D,GAAW,EAAK,EAC7E,CACH,CAAC,EACF,CAEI,EAAS,MAAkB,CAC/B,EAAU,QAAU,EAAc,EAAO,CACzC,IAAMA,EACJ,IAAa,WAAa,IAAa,SAAW,EAAU,QAAW,EAAU,SAAS,eAAiB,KAC7G,EAAaA,EAAU,EACtB,CAAC,EAAQ,EAAS,CAAC,CAyCtB,OAvCA,MAAsB,CACpB,GAAQ,CAER,IAAM,EAAW,IAAI,iBAAkB,GAAc,CAC9B,EAAU,KAAM,GAAa,CAChD,GAAM,CAAE,aAAY,gBAAiB,EAYrC,MANA,GAJI,EAAU,SAAW,MAAM,KAAK,EAAa,CAAC,SAAS,EAAU,QAAQ,EAK3E,OAAO,GAAW,UAClB,CAAC,GAAG,EAAW,CAAC,KAAM,GAAS,aAAgB,SAAW,EAAK,UAAU,EAAO,CAAC,GAKnF,EACc,GAAQ,EACxB,CAOF,OALA,EAAS,QAAQ,SAAS,KAAM,CAC9B,UAAW,GACX,QAAS,GACV,CAAC,KAEW,EAAS,YAAY,EACjC,CAAC,EAAQ,EAAO,CAAC,CAEpB,MAAgB,CACd,GAAI,GAAa,EAAU,QAEzB,OADA,IAAU,EAAU,QAAS,EAAU,KAC1B,CACX,IAAY,EAAU,QAAU,EAAU,GAG7C,CAAC,EAAS,EAAW,EAAU,CAAC,CAE5B,GAAa,EAAS,aAAa,EAAO,EAAW,EAAI,EAGlE,EAAY,YAAc,cAE1B,IAAA,EAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["import React, { useEffect, useState, useRef, useCallback, useLayoutEffect } from 'react'\nimport ReactDOM from 'react-dom'\n\nexport interface MagicPortalProps {\n  anchor: string | (() => Element | null) | Element | React.RefObject<Element | null> | null\n  position?: 'append' | 'prepend' | 'before' | 'after'\n  children?: React.ReactElement | React.ReactElement[]\n  onMount?: (anchor: Element, container: Element) => void\n  onUnmount?: (anchor: Element, container: Element) => void\n  key?: React.Key\n}\n\n/**\n * https://github.com/radix-ui/primitives/blob/36d954d3c1b41c96b1d2e875b93fc9362c8c09e6/packages/react/slot/src/slot.tsx#L166\n */\nconst getElementRef = (element: React.ReactElement) => {\n  // React <=18 in DEV\n  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get\n  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning\n  if (mayWarn) {\n    return (element as any).ref as React.Ref<Element>\n  }\n  // React 19 in DEV\n  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get\n  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning\n  if (mayWarn) {\n    return (element.props as { ref?: React.Ref<Element> }).ref\n  }\n\n  // Not DEV\n  return (element.props as { ref?: React.Ref<Element> }).ref || ((element as any).ref as React.Ref<Element>)\n}\n\nconst resolveAnchor = (anchor: MagicPortalProps['anchor']) => {\n  if (typeof anchor === 'string') {\n    return document.querySelector(anchor)\n  } else if (typeof anchor === 'function') {\n    return anchor()\n  } else if (anchor && 'current' in anchor) {\n    return anchor.current\n  } else {\n    return anchor\n  }\n}\n\nconst mergeRef = <T extends Element | null>(...refs: (React.Ref<T> | undefined)[]) => {\n  return (node: T) =>\n    refs.forEach((ref) => {\n      if (typeof ref === 'function') {\n        ref(node)\n      } else if (ref) {\n        ref.current = node\n      }\n    })\n}\n\nconst MagicPortal = ({ anchor, position = 'append', children, onMount, onUnmount, key }: MagicPortalProps) => {\n  const anchorRef = useRef<Element | null>(null)\n  const [container, setContainer] = useState<Element | null>(null)\n\n  const nodes = React.Children.map(children, (item) => {\n    if (!React.isValidElement(item)) {\n      return null\n    }\n    const originalRef = getElementRef(item)\n    return React.cloneElement(item as React.ReactElement<any>, {\n      ref: mergeRef(originalRef, (node) => {\n        const positionMap = {\n          before: 'beforebegin',\n          prepend: 'afterbegin',\n          append: 'beforeend',\n          after: 'afterend'\n        } as const\n        node && anchorRef.current?.insertAdjacentElement(positionMap[position], node)\n      })\n    })\n  })\n\n  const update = useCallback(() => {\n    anchorRef.current = resolveAnchor(anchor)\n    setContainer(\n      position === 'prepend' || position === 'append' ? anchorRef.current : (anchorRef.current?.parentElement ?? null)\n    )\n  }, [anchor, position])\n\n  useLayoutEffect(() => {\n    update()\n\n    const observer = new MutationObserver((mutations) => {\n      const isSelfMutation = mutations\n        .flatMap(({ addedNodes, removedNodes }) => [...addedNodes, ...removedNodes])\n        .some((node) => container?.contains(node))\n      !isSelfMutation && update()\n    })\n\n    observer.observe(document.body, {\n      childList: true,\n      subtree: true\n    })\n    return () => observer.disconnect()\n  }, [update, anchor, container])\n\n  useEffect(() => {\n    if (container && anchorRef.current) {\n      onMount?.(anchorRef.current, container)\n      return () => {\n        onUnmount?.(anchorRef.current!, container)\n      }\n    }\n  }, [onMount, onUnmount, container])\n\n  return container && ReactDOM.createPortal(nodes, container, key)\n}\n\nMagicPortal.displayName = 'MagicPortal'\n\nexport default MagicPortal\n"],"mappings":"8HAeA,MAAM,EAAiB,GAAgC,CAErD,IAAI,EAAS,OAAO,yBAAyB,EAAQ,MAAO,MAAM,EAAE,IAChE,EAAU,GAAU,mBAAoB,GAAU,EAAO,eAY7D,OAXI,EACM,EAAgB,KAG1B,EAAS,OAAO,yBAAyB,EAAS,MAAM,EAAE,IAC1D,EAAU,GAAU,mBAAoB,GAAU,EAAO,eACrD,EACM,EAAQ,MAAuC,IAIjD,EAAQ,MAAuC,KAAS,EAAgB,MAG5E,EAAiB,GACjB,OAAO,GAAW,SACb,SAAS,cAAc,EAAO,CAC5B,OAAO,GAAW,WACpB,GAAQ,CACN,GAAU,YAAa,EACzB,EAAO,QAEP,EAIL,GAAsC,GAAG,IACrC,GACN,EAAK,QAAS,GAAQ,CAChB,OAAO,GAAQ,WACjB,EAAI,EAAK,CACA,IACT,EAAI,QAAU,IAEhB,CAGA,GAAe,CAAE,SAAQ,WAAW,SAAU,WAAU,UAAS,YAAW,SAA4B,CAC5G,IAAM,EAAY,EAAuB,KAAK,CACxC,CAAC,EAAW,GAAgB,EAAyB,KAAK,CAE1D,EAAQ,EAAM,SAAS,IAAI,EAAW,GAAS,CACnD,GAAI,CAAC,EAAM,eAAe,EAAK,CAC7B,OAAO,KAET,IAAM,EAAc,EAAc,EAAK,CACvC,OAAO,EAAM,aAAa,EAAiC,CACzD,IAAK,EAAS,EAAc,GAAS,CAOnC,GAAQ,EAAU,SAAS,sBANP,CAClB,OAAQ,cACR,QAAS,aACT,OAAQ,YACR,MAAO,WACR,CAC4D,GAAW,EAAK,EAC7E,CACH,CAAC,EACF,CAEI,EAAS,MAAkB,CAC/B,EAAU,QAAU,EAAc,EAAO,CACzC,EACE,IAAa,WAAa,IAAa,SAAW,EAAU,QAAW,EAAU,SAAS,eAAiB,KAC5G,EACA,CAAC,EAAQ,EAAS,CAAC,CA4BtB,OA1BA,MAAsB,CACpB,GAAQ,CAER,IAAM,EAAW,IAAI,iBAAkB,GAAc,CAInD,CAHuB,EACpB,SAAS,CAAE,aAAY,kBAAmB,CAAC,GAAG,EAAY,GAAG,EAAa,CAAC,CAC3E,KAAM,GAAS,GAAW,SAAS,EAAK,CAAC,EACzB,GAAQ,EAC3B,CAMF,OAJA,EAAS,QAAQ,SAAS,KAAM,CAC9B,UAAW,GACX,QAAS,GACV,CAAC,KACW,EAAS,YAAY,EACjC,CAAC,EAAQ,EAAQ,EAAU,CAAC,CAE/B,MAAgB,CACd,GAAI,GAAa,EAAU,QAEzB,OADA,IAAU,EAAU,QAAS,EAAU,KAC1B,CACX,IAAY,EAAU,QAAU,EAAU,GAG7C,CAAC,EAAS,EAAW,EAAU,CAAC,CAE5B,GAAa,EAAS,aAAa,EAAO,EAAW,EAAI,EAGlE,EAAY,YAAc,cAE1B,IAAA,EAAe"}

package/packages/component/src/index.ts

@@ -78,40 +78,27 @@ const MagicPortal = ({ anchor, position = 'append', children, onMount, onUnmount
 
   const update = useCallback(() => {
     anchorRef.current = resolveAnchor(anchor)
-    const container =
+    setContainer(
       position === 'prepend' || position === 'append' ? anchorRef.current : (anchorRef.current?.parentElement ?? null)
-    setContainer(container)
+    )
   }, [anchor, position])
 
   useLayoutEffect(() => {
     update()
 
     const observer = new MutationObserver((mutations) => {
-      const shouldUpdate = mutations.some((mutation) => {
-        const { addedNodes, removedNodes } = mutation
-        // Check if current anchor is removed
-        if (anchorRef.current && Array.from(removedNodes).includes(anchorRef.current)) {
-          return true
-        }
-        // Only check added nodes when anchor is a string selector
-        if (
-          typeof anchor === 'string' &&
-          [...addedNodes].some((node) => node instanceof Element && node.matches?.(anchor))
-        ) {
-          return true
-        }
-        return false
-      })
-      shouldUpdate && update()
+      const isSelfMutation = mutations
+        .flatMap(({ addedNodes, removedNodes }) => [...addedNodes, ...removedNodes])
+        .some((node) => container?.contains(node))
+      !isSelfMutation && update()
     })
 
     observer.observe(document.body, {
       childList: true,
       subtree: true
     })
-
     return () => observer.disconnect()
-  }, [update, anchor])
+  }, [update, anchor, container])
 
   useEffect(() => {
     if (container && anchorRef.current) {