React 18 support

browser_test/children_test.js

@@ -49,7 +49,7 @@ describe('Children', () => {
       return raf()
         .then(() => {
           assert.equal(div.textContent, '[{"value":"abc"}]')
-          el.innerHTML = '<span>I am overridding React</span>'
+          div.innerHTML = '<span>I am overridding React</span>'
           return raf()
         })
         .then(() => {

browser_test/index.html.template

@@ -52,8 +52,8 @@
     document.write("<script crossorigin src='https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.4/webcomponents-loader.js'></sc"+"ript>")
   }
   </script>
-  <script crossorigin src='https://cdn.jsdelivr.net/npm/react@16/umd/react.development.js'></script>
-  <script crossorigin src='https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.development.js'></script>
+  <script crossorigin src='https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js'></script>
+  <script crossorigin src='https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js'></script>
   <script src='./remount.es5.js'></script>
   <script>mocha.setup('bdd')</script>
   <script src='./test.js'></script>

browser_test/remount_test.js

@@ -223,28 +223,19 @@ describe('Remount', () => {
     })
   })
 
-  describe('Shadow DOM mode', () => {
-    // Skip this for now; only Chrome supports this.
-    // Polyfilled environments have no way of hiding it from .textContent.
-    it.skip('will not be seen by .textContent', () => {
+  // Shadow DOM isn't always available
+  const hasShadow =
+    Remount.getStrategy().name === 'CustomElements' &&
+    document.body.attachShadow
+
+  ;(hasShadow ? describe : describe.skip)('Shadow DOM mode', () => {
+    it('will not be seen by .textContent', () => {
       Remount.define({ 'x-grape': Greeter }, { shadow: true })
       div.innerHTML = `Grape: <x-grape></x-grape>`
 
       // It's "shadowed" so we can't see it
       assert(!div.textContent.match(/Hello/))
     })
-
-    // Shadow DOM isn't always available
-    const hasShadow =
-      Remount.getStrategy().name === 'CustomElements' &&
-      document.body.attachShadow
-    ;(hasShadow ? it : it.skip)('will be seen in .shadowRoot', () => {
-      Remount.define({ 'x-orange': Greeter }, { shadow: true })
-
-      div.innerHTML = `Orange: <x-orange></x-orange>`
-      const shadowHTML = document.querySelector('x-orange').shadowRoot.innerHTML
-      assert.match(shadowHTML, /Hello/)
-    })
   })
 
   describe('Removing', () => {

examples/basic.html

@@ -4,8 +4,8 @@
 <meta charset='utf-8'>
 <script crossorigin src='https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.4/custom-elements-es5-adapter.js'></script>
 <script crossorigin src='https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.4/webcomponents-loader.js'></script>
-<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 <script src='../dist/remount.umd.js'></script>
 <script>
 /* Example JS */

examples/custom-props.html

@@ -4,8 +4,8 @@
 <meta charset='utf-8'>
 <script crossorigin src='https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.4/custom-elements-es5-adapter.js'></script>
 <script crossorigin src='https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.4/webcomponents-loader.js'></script>
-<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 <script src='../dist/remount.umd.js'></script>
 <script>
 /* Example JS */

examples/es5.html

@@ -4,8 +4,8 @@
 <meta charset='utf-8'>
 <script crossorigin src='https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.4/custom-elements-es5-adapter.js'></script>
 <script crossorigin src='https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.4/webcomponents-loader.js'></script>
-<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 <script src='../dist/remount.legacy.js'></script>
 <script>
 /* Example JS */

examples/react-ception.html

@@ -4,8 +4,8 @@
 <meta charset='utf-8'>
 <script crossorigin src='https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.4/custom-elements-es5-adapter.js'></script>
 <script crossorigin src='https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.4/webcomponents-loader.js'></script>
-<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 <script src='../dist/remount.umd.js'></script>
 </head>
 <body>

package.json

@@ -7,23 +7,24 @@
     "url": "https://github.com/rstacruz/remount/issues"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.2.3",
-    "@babel/preset-react": "^7.0.0",
-    "@types/jest": "^24.0.5",
+    "@babel/core": "^7.19.1",
+    "@babel/preset-env": "^7.19.1",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/jest": "^29.0.3",
     "@types/puppeteer": "^1.12.1",
-    "@types/react": "^16.8.3",
-    "@types/react-dom": "^16.8.2",
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^29.0.3",
     "expect-puppeteer": "3.5.1",
     "gh-pages": "^2.0.1",
     "jest": "^23.6.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.15.3",
     "puppeteer": "^1.12.2",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "^1.1.2",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-babel-minify": "^7.0.0",
@@ -64,8 +65,8 @@
   "main": "dist/remount.es5.js",
   "module": "dist/remount.js",
   "peerDependencies": {
-    "react": ">= 15.0.0",
-    "react-dom": ">= 15.0.0"
+    "react": ">= 18.0.0",
+    "react-dom": ">= 18.0.0"
   },
   "repository": {
     "type": "git",
@@ -81,9 +82,5 @@
     "prepare": "run-s build",
     "test": "start-server-and-test watch http://127.0.0.1:10049/ jest",
     "watch": "env NODE_ENV=test-rollup rollup --config --watch"
-  },
-  "dependencies": {
-    "@babel/preset-typescript": "^7.3.3",
-    "react-shadow-dom-retarget-events": "^1.0.8"
   }
 }

rollup.config.js

@@ -20,13 +20,13 @@ const BABEL = babel({
 
 const DEFAULTS = {
   input: 'index.js',
-  external: ['react', 'react-dom', 'react-shadow-dom-retarget-events']
+  external: ['react', 'react-dom', 'react-dom/client']
 }
 
 const UMD = {
   format: 'umd',
   name: 'Remount',
-  globals: { react: 'React', 'react-dom': 'ReactDOM' }
+  globals: { react: 'React', 'react-dom/client': 'ReactDOM' }
 }
 
 const SERVE_PLUGINS = IS_WATCH
@@ -72,14 +72,12 @@ export default [
   // ES5
   {
     ...DEFAULTS,
-    external: ['react', 'react-dom'],
     plugins: [...PLUGINS, BABEL],
     output: { file: 'dist/remount.es5.js', ...UMD }
   },
 
   {
     ...DEFAULTS,
-    external: ['react', 'react-dom'],
     plugins: [...PLUGINS, BABEL, MINIFY],
     output: { file: 'dist/remount.es5.min.js', ...UMD }
   },

src/react.js

@@ -1,9 +1,12 @@
 // @ts-check
 /** @typedef { import('./types').ElementSpec } ElementSpec */
+/** @typedef { import('react-dom/client').Root } ReactDOMRoot */
 
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import retargetEvents from 'react-shadow-dom-retarget-events'
+import * as ReactDOM from 'react-dom/client'
+
+/** @type {Map<HTMLElement, ReactDOMRoot>} */
+const roots = new Map()
 
 /**
  * @param {ElementSpec} elSpec
@@ -13,7 +16,10 @@ import retargetEvents from 'react-shadow-dom-retarget-events'
  */
 
 export function mount(elSpec, mountPoint, props, element) {
-  return update(elSpec, mountPoint, props, element)
+  const reactElement = React.createElement(elSpec.component, props)
+  const root = ReactDOM.createRoot(mountPoint)
+  roots.set(mountPoint, root)
+  root.render(reactElement)
 }
 
 /**
@@ -27,12 +33,9 @@ export function mount(elSpec, mountPoint, props, element) {
  */
 
 export function update(elSpec, mountPoint, props, element) {
-  const { component } = elSpec
-  const reactElement = React.createElement(component, props)
-  ReactDOM.render(reactElement, mountPoint)
-  if (element) {
-    retargetEvents(element.shadowRoot)
-  }
+  const reactElement = React.createElement(elSpec.component, props)
+  const root = roots.get(mountPoint)
+  if (root) root.render(reactElement)
 }
 
 /**
@@ -44,5 +47,9 @@ export function update(elSpec, mountPoint, props, element) {
  */
 
 export function unmount(elSpec, mountPoint) {
-  ReactDOM.unmountComponentAtNode(mountPoint)
+  const root = roots.get(mountPoint)
+  if (!root) return
+
+  root.unmount()
+  roots.delete(mountPoint)
 }