react-components-rails 1.0.0.beta1 → 1.0.0.beta2

data/react-components-rails.gemspec

@@ -6,7 +6,7 @@ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
 Gem::Specification.new do |spec|
   spec.name = "react-components-rails"
   spec.licenses = ["MIT"]
-  spec.version = "1.0.0.beta1"
+  spec.version = "1.0.0.beta2"
   spec.authors = ["Renaud Chaput"]
   spec.email = ["renchap@gmail.com"]
 
@@ -24,7 +24,7 @@ Gem::Specification.new do |spec|
   spec.required_ruby_version = ">= 2.7.0"
 
   spec.add_development_dependency "bundler", "~> 2.3"
-  spec.add_development_dependency "rake", "~> 13.0"
+  # spec.add_development_dependency "rake", "~> 12.0"
   # spec.add_development_dependency "minitest", "~> 5.0"
   # spec.add_development_dependency "capybara"
   # spec.add_development_dependency "selenium-webdriver"

data/src/index.ts

@@ -1,9 +1,7 @@
 import React from "react"
 import ReactDOM from "react-dom"
-import intersection from "lodash/intersection"
-import keys from "lodash/keys"
-import assign from "lodash/assign"
-import omit from "lodash/omit"
+import ReactDOMClient, { Root } from "react-dom/client"
+import { intersection, keys, assign, omit } from "lodash"
 // import ujs from './ujs'
 
 const CLASS_ATTRIBUTE_NAME = "data-react-class"
@@ -17,6 +15,11 @@ declare global {
 
 const ReactComponentsRails = {
   registeredComponents: {} as { [name: string]: React.ComponentType },
+  mountedRoots: [] as Root[],
+  ReactDOMClient: undefined as
+    | typeof ReactDOM
+    | typeof ReactDOMClient
+    | undefined,
 
   render(node: Element, component: React.ComponentType) {
     const propsJson = node.getAttribute(PROPS_ATTRIBUTE_NAME)
@@ -24,7 +27,15 @@ const ReactComponentsRails = {
 
     const reactElement = React.createElement(component, props)
 
-    ReactDOM.render(reactElement, node)
+    if (this.ReactDOMClient) {
+      if ("createRoot" in this.ReactDOMClient) {
+        const root = this.ReactDOMClient.createRoot(node)
+        root.render(reactElement)
+        this.mountedRoots.push(root)
+      } else {
+        this.ReactDOMClient.render(reactElement, node)
+      }
+    }
   },
 
   registerComponents(components: { [name: string]: React.Component }) {
@@ -43,9 +54,16 @@ const ReactComponentsRails = {
   },
 
   unmountComponents() {
-    const mounted = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`)
-    for (let i = 0; i < mounted.length; i += 1) {
-      ReactDOM.unmountComponentAtNode(mounted[i])
+    if (this.ReactDOMClient) {
+      if ("createRoot" in this.ReactDOMClient) {
+        this.mountedRoots.forEach((root) => root.unmount())
+        this.mountedRoots = []
+      } else {
+        const mounted = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`)
+        for (let i = 0; i < mounted.length; i += 1) {
+          this.ReactDOMClient.unmountComponentAtNode(mounted[i])
+        }
+      }
     }
   },
 
@@ -76,7 +94,8 @@ const ReactComponentsRails = {
     }
   },
 
-  setup(components = {}) {
+  async setup(components = {}) {
+    await this.loadReactDOMClient()
     if (typeof window.ReactComponentsRails === "undefined") {
       window.ReactComponentsRails = this
       // ujs.setup(this.mountComponents.bind(this), this.unmountComponents.bind(this))
@@ -85,6 +104,16 @@ const ReactComponentsRails = {
     window.ReactComponentsRails.registerComponents(components)
     window.ReactComponentsRails.mountComponents()
   },
+
+  async loadReactDOMClient() {
+    if (this.ReactDOMClient) return
+
+    try {
+      this.ReactDOMClient = await import("react-dom/client")
+    } catch (e) {
+      this.ReactDOMClient = ReactDOM
+    }
+  },
 }
 
 export default ReactComponentsRails

data/tsconfig.json

@@ -11,8 +11,11 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    "lib": ["DOM", "ES2016"],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "lib": [
+      "DOM",
+      "ES2016"
+    ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
@@ -24,8 +27,8 @@
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
-    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    "module": "CommonJS" /* Specify what module code is generated. */,
+    "rootDir": "./src" /* Specify the root folder within your source files. */,
     // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
@@ -69,12 +72,12 @@
     /* Interop Constraints */
     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 
     /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
     // "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
@@ -96,6 +99,6 @@
 
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react-components-rails
 version: !ruby/object:Gem::Version
-  version: 1.0.0.beta1
+  version: 1.0.0.beta2
 platform: ruby
 authors:
 - Renaud Chaput
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2022-02-27 00:00:00.000000000 Z
+date: 2022-08-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -24,20 +24,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2.3'
-- !ruby/object:Gem::Dependency
-  name: rake
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '13.0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '13.0'
 description:
 email:
 - renchap@gmail.com
@@ -56,12 +42,13 @@ files:
 - lib/component.rb
 - lib/helpers.rb
 - lib/railtie.rb
+- lib/react-components-rails.rb
 - package.json
+- pnpm-lock.yaml
 - react-components-rails.gemspec
 - src/index.ts
 - src/ujs.ts
 - tsconfig.json
-- yarn.lock
 homepage: https://github.com/renchap/webpacker-react
 licenses:
 - MIT