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

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.beta4"
   spec.authors = ["Renaud Chaput"]
   spec.email = ["renchap@gmail.com"]
 
@@ -15,7 +15,7 @@ Gem::Specification.new do |spec|
   spec.homepage = "https://github.com/renchap/webpacker-react"
 
   spec.files = `git ls-files -z`.split("\x0").reject do |f|
-    f.match(%r{^(test|spec|features)/})
+    f.match(%r{^(test|spec|features|pnpm-lock.yaml)/})
   end
   spec.bindir = "exe"
   spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
@@ -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 type ReactDOMClient from "react-dom/client"
+
 // import ujs from './ujs'
 
 const CLASS_ATTRIBUTE_NAME = "data-react-class"
@@ -11,46 +9,79 @@ const PROPS_ATTRIBUTE_NAME = "data-react-props"
 
 declare global {
   interface Window {
-    ReactComponentsRails: typeof ReactComponentsRails
+    ReactComponentsRails: ReactComponentsRails
   }
 }
 
-const ReactComponentsRails = {
-  registeredComponents: {} as { [name: string]: React.ComponentType },
+class ReactComponentsRails {
+  #registeredComponents = {} as { [name: string]: React.ComponentType }
+  #mountedRoots = [] as ReactDOMClient.Root[]
+  #ReactDOMClient = undefined as typeof ReactDOMClient | undefined | false
+
+  static getInstance() {
+    if (typeof window.ReactComponentsRails === "undefined") {
+      const instance = new ReactComponentsRails()
+      window.ReactComponentsRails = instance
+
+      // ujs.setup(this.mountComponents.bind(this), this.unmountComponents.bind(this))
+    }
+
+    return window.ReactComponentsRails
+  }
 
-  render(node: Element, component: React.ComponentType) {
+  private render(node: Element, component: React.ComponentType) {
     const propsJson = node.getAttribute(PROPS_ATTRIBUTE_NAME)
     const props = propsJson && JSON.parse(propsJson)
 
     const reactElement = React.createElement(component, props)
 
-    ReactDOM.render(reactElement, node)
-  },
+    if (this.#ReactDOMClient) {
+      const root = this.#ReactDOMClient.createRoot(node)
+      root.render(reactElement)
+      this.#mountedRoots.push(root)
+    } else {
+      ReactDOM.render(reactElement, node)
+    }
+  }
+
+  private registerComponents(components: {
+    [name: string]: React.ComponentType
+  }) {
+    const alreadyExisting: string[] = []
 
-  registerComponents(components: { [name: string]: React.Component }) {
-    const collisions = intersection(
-      keys(this.registeredComponents),
-      keys(components)
-    )
-    if (collisions.length > 0) {
+    Object.keys(components).forEach((key) => {
+      if (this.#registeredComponents[key]) alreadyExisting.push(key)
+      else {
+        const comp = components[key]
+        this.#registeredComponents[key] = comp
+      }
+    })
+
+    if (alreadyExisting.length > 0) {
       console.error(
-        `react-components-rails: can not register components. Following components are already registered: ${collisions}`
+        `react-components-rails: can not register components. Following components are already registered: ${alreadyExisting.join(
+          ", "
+        )}`
       )
     }
 
-    assign(this.registeredComponents, omit(components, collisions))
     return true
-  },
-
-  unmountComponents() {
-    const mounted = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`)
-    for (let i = 0; i < mounted.length; i += 1) {
-      ReactDOM.unmountComponentAtNode(mounted[i])
-    }
-  },
+  }
 
-  mountComponents() {
-    const { registeredComponents } = this
+  // Not used for now, useful for UJS
+  // private unmountComponents() {
+  //   if (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) {
+  //       ReactDOM.unmountComponentAtNode(mounted[i])
+  //     }
+  //   }
+  // }
+
+  private mountComponents() {
     const toMount = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`)
 
     for (let i = 0; i < toMount.length; i += 1) {
@@ -64,7 +95,7 @@ const ReactComponentsRails = {
         continue
       }
 
-      const component = registeredComponents[className]
+      const component = this.#registeredComponents[className]
 
       if (component) {
         if (node.innerHTML.length === 0) this.render(node, component)
@@ -74,17 +105,34 @@ const ReactComponentsRails = {
         )
       }
     }
-  },
+  }
 
   setup(components = {}) {
-    if (typeof window.ReactComponentsRails === "undefined") {
-      window.ReactComponentsRails = this
-      // ujs.setup(this.mountComponents.bind(this), this.unmountComponents.bind(this))
-    }
+    this.loadReactDOMClient().then(() => {
+      window.ReactComponentsRails.registerComponents(components)
+      window.ReactComponentsRails.mountComponents()
+    })
+  }
 
-    window.ReactComponentsRails.registerComponents(components)
-    window.ReactComponentsRails.mountComponents()
-  },
+  private loadReactDOMClient() {
+    return new Promise<void>((resolve) => {
+      if (this.#ReactDOMClient) resolve()
+
+      import("react-dom/client")
+        .then((i) => {
+          // with some bundlers, it can be imported as `.default`, while not with some others
+          this.#ReactDOMClient = i.default || i
+          resolve()
+        })
+        .catch(() => {
+          // if this fails, then we will fallback to the legacy API
+          this.#ReactDOMClient = false
+          resolve()
+        })
+    })
+  }
 }
 
-export default ReactComponentsRails
+const instance = ReactComponentsRails.getInstance()
+
+export default instance

data/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "exclude": ["dist/**/*"],
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
 
@@ -11,8 +12,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 +28,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 +73,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 +100,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.beta4
 platform: ruby
 authors:
 - Renaud Chaput
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2022-02-27 00:00:00.000000000 Z
+date: 2022-08-16 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