react-magic-portal 1.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["container"],"sources":["../src/index.ts"],"sourcesContent":["import React, { useEffect, useState, useRef, useCallback } 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.ReactNode\n  onMount?: (anchor: Element, container: HTMLDivElement) => void\n  onUnmount?: (anchor: Element, container: HTMLDivElement) => void\n  ref?: React.Ref<HTMLDivElement | null>\n  key?: React.Key\n}\n\nconst MagicPortal = ({ anchor, position = 'append', children, onMount, onUnmount, ref, key }: MagicPortalProps) => {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const anchorRef = useRef<Element | null>(null)\n\n  const updateRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      if (ref) {\n        if (typeof ref === 'function') {\n          ref(element)\n        } else {\n          ref.current = element\n        }\n      }\n    },\n    [ref]\n  )\n\n  const createContainer = useCallback(\n    (anchorElement: Element): HTMLDivElement | null => {\n      const container = document.createElement('div')\n      container.style.display = 'contents'\n\n      const positionMap = {\n        before: 'beforebegin',\n        prepend: 'afterbegin',\n        append: 'beforeend',\n        after: 'afterend'\n      } as const\n\n      const result = anchorElement.insertAdjacentElement(positionMap[position], container)\n\n      return result as HTMLDivElement | null\n    },\n    [position]\n  )\n\n  const resolveAnchor = useCallback((): Element | null => {\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  }, [anchor])\n\n  const updateAnchor = useCallback(() => {\n    const newAnchor = resolveAnchor()\n\n    setContainer((prevContainer) => {\n      prevContainer?.remove()\n      anchorRef.current = newAnchor\n      const newContainer = newAnchor ? createContainer(newAnchor) : null\n      updateRef(newContainer)\n      return newContainer\n    })\n  }, [resolveAnchor, createContainer, updateRef])\n\n  useEffect(() => {\n    updateAnchor()\n\n    const observer = new MutationObserver((mutations) => {\n      const shouldUpdate = mutations.some((mutation) => {\n        const { addedNodes, removedNodes } = mutation\n\n        // Check if current anchor is removed\n        if (anchorRef.current && Array.from(removedNodes).includes(anchorRef.current)) {\n          return true\n        }\n\n        // Only check added nodes when anchor is a string selector\n        if (typeof anchor === 'string') {\n          return Array.from(addedNodes).some(\n            (node) => node.nodeType === Node.ELEMENT_NODE && node instanceof Element && node.matches?.(anchor)\n          )\n        }\n\n        return false\n      })\n\n      if (shouldUpdate) {\n        updateAnchor()\n      }\n    })\n\n    observer.observe(document.body, {\n      childList: true,\n      subtree: true\n    })\n\n    return () => observer.disconnect()\n  }, [updateAnchor, anchor])\n\n  useEffect(() => {\n    if (anchorRef.current && container) {\n      onMount?.(anchorRef.current, container)\n      return () => {\n        onUnmount?.(anchorRef.current!, container)\n      }\n    }\n  }, [container, onMount, onUnmount])\n\n  return container ? ReactDOM.createPortal(children, container, key) : null\n}\n\nMagicPortal.displayName = 'MagicPortal'\n\nexport default MagicPortal\n"],"mappings":"sGAaA,MAAM,GAAe,CAAE,SAAQ,WAAW,SAAU,WAAU,UAAS,YAAW,MAAK,SAA4B,CACjH,GAAM,CAAC,EAAW,GAAgB,EAAgC,KAAK,CACjE,EAAY,EAAuB,KAAK,CAExC,EAAY,EACf,GAAmC,CAC9B,IACE,OAAO,GAAQ,WACjB,EAAI,EAAQ,CAEZ,EAAI,QAAU,IAIpB,CAAC,EAAI,CACN,CAEK,EAAkB,EACrB,GAAkD,CACjD,IAAMA,EAAY,SAAS,cAAc,MAAM,CAY/C,MAXA,GAAU,MAAM,QAAU,WASX,EAAc,sBAPT,CAClB,OAAQ,cACR,QAAS,aACT,OAAQ,YACR,MAAO,WACR,CAE8D,GAAWA,EAAU,EAItF,CAAC,EAAS,CACX,CAEK,EAAgB,MAChB,OAAO,GAAW,SACb,SAAS,cAAc,EAAO,CAC5B,OAAO,GAAW,WACpB,GAAQ,CACN,GAAU,YAAa,EACzB,EAAO,QAEP,EAER,CAAC,EAAO,CAAC,CAEN,EAAe,MAAkB,CACrC,IAAM,EAAY,GAAe,CAEjC,EAAc,GAAkB,CAC9B,GAAe,QAAQ,CACvB,EAAU,QAAU,EACpB,IAAM,EAAe,EAAY,EAAgB,EAAU,CAAG,KAE9D,OADA,EAAU,EAAa,CAChB,GACP,EACD,CAAC,EAAe,EAAiB,EAAU,CAAC,CA8C/C,OA5CA,MAAgB,CACd,GAAc,CAEd,IAAM,EAAW,IAAI,iBAAkB,GAAc,CAC9B,EAAU,KAAM,GAAa,CAChD,GAAM,CAAE,aAAY,gBAAiB,EAcrC,OAXI,EAAU,SAAW,MAAM,KAAK,EAAa,CAAC,SAAS,EAAU,QAAQ,CACpE,GAIL,OAAO,GAAW,SACb,MAAM,KAAK,EAAW,CAAC,KAC3B,GAAS,EAAK,WAAa,KAAK,cAAgB,aAAgB,SAAW,EAAK,UAAU,EAAO,CACnG,CAGI,IACP,EAGA,GAAc,EAEhB,CAOF,OALA,EAAS,QAAQ,SAAS,KAAM,CAC9B,UAAW,GACX,QAAS,GACV,CAAC,KAEW,EAAS,YAAY,EACjC,CAAC,EAAc,EAAO,CAAC,CAE1B,MAAgB,CACd,GAAI,EAAU,SAAW,EAEvB,OADA,IAAU,EAAU,QAAS,EAAU,KAC1B,CACX,IAAY,EAAU,QAAU,EAAU,GAG7C,CAAC,EAAW,EAAS,EAAU,CAAC,CAE5B,EAAY,EAAS,aAAa,EAAU,EAAW,EAAI,CAAG,MAGvE,EAAY,YAAc,cAE1B,IAAA,EAAe"}

package/packages/component/eslint.config.ts

@@ -0,0 +1,25 @@
+import globals from 'globals'
+import pluginJs from '@eslint/js'
+import { defineConfig } from 'eslint/config'
+import tseslint from 'typescript-eslint'
+import prettierPlugin from 'eslint-plugin-prettier/recommended'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default defineConfig([
+  { files: ['**/*.{js,mjs,cjs,ts}'] },
+  {
+    languageOptions: {
+      globals: { ...globals.browser, ...globals.node },
+      parserOptions: { project: './tsconfig.json', tsconfigRootDir: import.meta.dirname }
+    }
+  },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  prettierPlugin,
+  reactHooks.configs['recommended-latest'],
+  reactRefresh.configs.vite,
+  {
+    ignores: ['**/dist/*']
+  }
+])

package/packages/component/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "react-magic-portal",
+  "version": "1.0.0",
+  "description": "React Portal with dynamic mounting support",
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "dev": "tsdown src/index.ts --dts --format esm --sourcemap --watch",
+    "build": "tsdown src/index.ts --dts --format esm --sourcemap --minify --clean",
+    "lint": "eslint --fix --cache",
+    "check": "tsc --noEmit"
+  },
+  "keywords": [
+    "react",
+    "portal",
+    "dynamic",
+    "browser-extension",
+    "content-script",
+    "dom",
+    "mutation-observer",
+    "inject",
+    "mount",
+    "anchor",
+    "reactdom",
+    "createportal",
+    "spa",
+    "single-page-application",
+    "web-extension",
+    "chrome-extension",
+    "firefox-extension",
+    "dynamic-content",
+    "dom-manipulation",
+    "typescript"
+  ],
+  "author": "molvqingtai",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/molvqingtai/react-magic-portal.git"
+  },
+  "bugs": {
+    "url": "https://github.com/molvqingtai/react-magic-portal/issues"
+  },
+  "homepage": "https://github.com/molvqingtai/react-magic-portal#readme",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "eslint": "^9.36.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.21",
+    "globals": "^16.4.0",
+    "prettier": "^3.6.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tsdown": "^0.15.4",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.44.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/component/src/index.ts

@@ -0,0 +1,123 @@
+import React, { useEffect, useState, useRef, useCallback } from 'react'
+import ReactDOM from 'react-dom'
+
+export interface MagicPortalProps {
+  anchor: string | (() => Element | null) | Element | React.RefObject<Element | null> | null
+  position?: 'append' | 'prepend' | 'before' | 'after'
+  children: React.ReactNode
+  onMount?: (anchor: Element, container: HTMLDivElement) => void
+  onUnmount?: (anchor: Element, container: HTMLDivElement) => void
+  ref?: React.Ref<HTMLDivElement | null>
+  key?: React.Key
+}
+
+const MagicPortal = ({ anchor, position = 'append', children, onMount, onUnmount, ref, key }: MagicPortalProps) => {
+  const [container, setContainer] = useState<HTMLDivElement | null>(null)
+  const anchorRef = useRef<Element | null>(null)
+
+  const updateRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (ref) {
+        if (typeof ref === 'function') {
+          ref(element)
+        } else {
+          ref.current = element
+        }
+      }
+    },
+    [ref]
+  )
+
+  const createContainer = useCallback(
+    (anchorElement: Element): HTMLDivElement | null => {
+      const container = document.createElement('div')
+      container.style.display = 'contents'
+
+      const positionMap = {
+        before: 'beforebegin',
+        prepend: 'afterbegin',
+        append: 'beforeend',
+        after: 'afterend'
+      } as const
+
+      const result = anchorElement.insertAdjacentElement(positionMap[position], container)
+
+      return result as HTMLDivElement | null
+    },
+    [position]
+  )
+
+  const resolveAnchor = useCallback((): Element | null => {
+    if (typeof anchor === 'string') {
+      return document.querySelector(anchor)
+    } else if (typeof anchor === 'function') {
+      return anchor()
+    } else if (anchor && 'current' in anchor) {
+      return anchor.current
+    } else {
+      return anchor
+    }
+  }, [anchor])
+
+  const updateAnchor = useCallback(() => {
+    const newAnchor = resolveAnchor()
+
+    setContainer((prevContainer) => {
+      prevContainer?.remove()
+      anchorRef.current = newAnchor
+      const newContainer = newAnchor ? createContainer(newAnchor) : null
+      updateRef(newContainer)
+      return newContainer
+    })
+  }, [resolveAnchor, createContainer, updateRef])
+
+  useEffect(() => {
+    updateAnchor()
+
+    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') {
+          return Array.from(addedNodes).some(
+            (node) => node.nodeType === Node.ELEMENT_NODE && node instanceof Element && node.matches?.(anchor)
+          )
+        }
+
+        return false
+      })
+
+      if (shouldUpdate) {
+        updateAnchor()
+      }
+    })
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    })
+
+    return () => observer.disconnect()
+  }, [updateAnchor, anchor])
+
+  useEffect(() => {
+    if (anchorRef.current && container) {
+      onMount?.(anchorRef.current, container)
+      return () => {
+        onUnmount?.(anchorRef.current!, container)
+      }
+    }
+  }, [container, onMount, onUnmount])
+
+  return container ? ReactDOM.createPortal(children, container, key) : null
+}
+
+MagicPortal.displayName = 'MagicPortal'
+
+export default MagicPortal

package/packages/component/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Build mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": false,
+    "moduleDetection": "force",
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "dist",
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "eslint.config.ts"]
+}

package/packages/example/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 120
+}

package/packages/example/README.md

@@ -0,0 +1,6 @@
+# Run
+
+```bash
+pnpm install
+pnpm dev
+```

package/packages/example/eslint.config.ts

@@ -0,0 +1,25 @@
+import globals from 'globals'
+import pluginJs from '@eslint/js'
+import { defineConfig } from 'eslint/config'
+import tseslint from 'typescript-eslint'
+import prettierPlugin from 'eslint-plugin-prettier/recommended'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default defineConfig([
+  { files: ['**/*.{js,mjs,cjs,ts}'] },
+  {
+    languageOptions: {
+      globals: { ...globals.browser, ...globals.node },
+      parserOptions: { project: './tsconfig.json', tsconfigRootDir: import.meta.dirname }
+    }
+  },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  prettierPlugin,
+  reactHooks.configs['recommended-latest'],
+  reactRefresh.configs.vite,
+  {
+    ignores: ['**/dist/*']
+  }
+])

package/packages/example/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/packages/example/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint --fix --cache",
+    "preview": "vite preview",
+    "check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-magic-portal": "workspace:*"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.3",
+    "eslint": "^9.36.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.21",
+    "globals": "^16.4.0",
+    "typescript": "~5.9.2",
+    "typescript-eslint": "^8.44.1",
+    "vite": "^7.1.7"
+  }
+}