React-18 (#226)

* build: 🔧 update generate-code script and react 18 * build: 🔧 use module es2020 for tsconfig to allow experimental-specifier-resolution on generate-code script * fix: 🐛 change require path to import and manually assign __dirname and __filename variables * fix: 🐛 migrate html component from react 17 to 18 * fix: 🏷️ update generated props and code
brianzinn · Jun 28, 2022 · 51c6513 · 51c6513
1 parent fa73d41
commit 51c6513
Show file tree

Hide file tree

Showing 6 changed files with 347 additions and 34 deletions.
diff --git a/packages/react-babylonjs/package.json b/packages/react-babylonjs/package.json
@@ -40,7 +40,7 @@
     "build": "cross-env NODE_ENV=production rollup -c",
     "build:dev": "rollup -c",
     "start": "tsc-watch --onSuccess \"rollup -c\"",
-    "generate-code": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node -P tools/tsconfig.generate.json tools/generate-code.ts",
+    "generate-code": "cross-env NODE_OPTIONS=--max_old_space_size=4096 node --experimental-specifier-resolution=node --loader ts-node/esm tools/generate-code.ts",
     "unit-test": "cross-env TS_NODE_PROJECT=\"test/tsconfig.json\" mocha",
     "test": "npm run unit-test",
     "test:coverage": "c8 --reporter=lcov --reporter=text-summary npm run test"
@@ -53,8 +53,8 @@
     "@types/lodash.camelcase": "^4.3.6",
     "@types/mocha": "^9.1.0",
     "@types/node": "^14.14.10",
-    "@types/react": "^17.0.44",
-    "@types/react-dom": "^17.0.15",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
     "@types/react-reconciler": "^0.26.4",
     "@types/sinon": "^9.0.10",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
@@ -71,8 +71,8 @@
     "mocha": "^9.2.2",
     "prettier": "^2.6.1",
     "prettier-plugin-organize-imports": "^2.3.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.0.6",
     "rollup-plugin-terser": "^7.0.2",

diff --git a/packages/react-babylonjs/src/customComponents/Html.tsx b/packages/react-babylonjs/src/customComponents/Html.tsx
@@ -17,7 +17,8 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import { render, unmountComponentAtNode } from 'react-dom'
+// import {  unmountComponentAtNode } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { FiberAbstractMeshProps, FiberAbstractMeshPropsCtor } from '../generatedProps'
 import { useBeforeRender } from '../hooks/render'
 import { useScene } from '../hooks/scene'
@@ -223,7 +224,7 @@ const Html = forwardRef(
         }
         return () => {
           if (target) target.removeChild(el)
-          unmountComponentAtNode(el)
+          // unmountComponentAtNode(el) // react17
         }
       }
     }, [target, transform, scene, group])
@@ -260,27 +261,29 @@ const Html = forwardRef(
     )
 
     useLayoutEffect(() => {
+      const root = createRoot(el)
       if (transform) {
-        render(
+        root.render(
           <div id="html_babylon" ref={transformOuterRef} style={styles}>
             <div ref={transformInnerRef} style={transformInnerStyles}>
               <div ref={ref} className={className} style={style} children={children} />
             </div>
-          </div>,
-          el
+          </div>
         )
       } else {
-        render(
+        root.render(
           <div
             id="html_babylon"
             ref={ref}
             style={styles}
             className={className}
             children={children}
-          />,
-          el
+          />
         )
       }
+      return () => {
+        root.unmount()
+      }
     })
 
     const visible = useRef(true)