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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c8ba858d748c6f96a4537c328a9181cf4a16a4b73d951f5623993cf0c38f4998
-  data.tar.gz: 3c9516b00e4d060d1ab45b4cf57e8721dffdc9f683e8fd469f8960ce435b8b34
+  metadata.gz: b0c3195d86d0560cf12133385cef8ea31ab04781fef04127f548d8aa57586ef0
+  data.tar.gz: 7c733c62ce9dc6592afa462563ab8882aaf9a003e6aec95c403cfbeb1479ea3c
 SHA512:
-  metadata.gz: 52b8286cec7712a22c21fa99f7b06a3520e7e97f97afa1e655d90f44d45dd7c04470aaa37c1cf04ae4d01d6eb5facd1e42406ebe0a9571f9225f95d68c46a0c1
-  data.tar.gz: 69b40924f14cbef646d6b4081e24693482359b5140a860422c62bbae889095bc58e9cd2acf6255a538590012f2d3123b96f87bf81e67abde233f779fe6093d02
+  metadata.gz: 17d30edf163397119ab79c3119d43c44be8d8851b0b35a7025ca7002ea77a79c258f0d2ff92bbf01b1085e7b36fa8e131e8b724a12955aa84b6137da1def3aa4
+  data.tar.gz: e967f7206ba91fdd642addeae9f581277300d2ddc30df20d7eecf4588757ef063e14e0139dde49e8d0cdece71f835e0e55954cf2728a407398c35a53aa385d70

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    react-components-rails (1.0.0.beta2)
+    react-components-rails (1.0.0.beta3)
 
 GEM
   remote: https://rubygems.org/

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-components-rails",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "homepage": "https://github.com/renchap/react-components-rails",
   "repository": "renchap/react-components-rails",
   "author": {
@@ -8,13 +8,13 @@
     "email": "renchap@gmail.com"
   },
   "license": "MIT",
-  "type": "module",
   "source": "src/index.ts",
   "exports": {
-    "require": "./dist/index.cjs",
-    "default": "./dist/index.js"
+    "import": "./dist/index.mjs",
+    "require": "./dist/index.js",
+    "default": "./dist/index.mjs"
   },
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist/",
@@ -24,10 +24,7 @@
     "build": "tsup src/index.ts --dts --sourcemap --format esm --target es6 --minify && tsup src/index.ts --sourcemap --format cjs --target es5 --minify",
     "dev": "tsup watch"
   },
-  "dependencies": {
-    "@types/lodash": "^4.14.182",
-    "lodash": "^4.17.21"
-  },
+  "dependencies": {},
   "peerDependencies": {
     "react": ">= 0.14",
     "react-dom": ">= 0.14"

data/pnpm-lock.yaml

@@ -2,20 +2,14 @@ lockfileVersion: 5.4
 
 specifiers:
   '@swc/core': ^1.2.231
-  '@types/lodash': ^4.14.182
   '@types/react': ^18.0.17
   '@types/react-dom': ^18.0.6
-  lodash: ^4.17.21
   prettier: ^2.7.1
   react: ^18.2.0
   react-dom: ^18.2.0
   tsup: ^6.2.2
   typescript: ^4.7.4
 
-dependencies:
-  '@types/lodash': 4.14.182
-  lodash: 4.17.21
-
 devDependencies:
   '@swc/core': 1.2.231
   '@types/react': 18.0.17
@@ -220,10 +214,6 @@ packages:
     dev: true
     optional: true
 
-  /@types/lodash/4.14.182:
-    resolution: {integrity: sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==}
-    dev: false
-
   /@types/prop-types/15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
     dev: true
@@ -733,10 +723,6 @@ packages:
     resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
     dev: true
 
-  /lodash/4.17.21:
-    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-    dev: false
-
   /loose-envify/1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true

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.beta2"
+  spec.version = "1.0.0.beta3"
   spec.authors = ["Renaud Chaput"]
   spec.email = ["renchap@gmail.com"]
 

data/src/index.ts

@@ -1,7 +1,7 @@
 import React from "react"
 import ReactDOM from "react-dom"
 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"
@@ -9,66 +9,86 @@ const PROPS_ATTRIBUTE_NAME = "data-react-props"
 
 declare global {
   interface Window {
-    ReactComponentsRails: typeof ReactComponentsRails
+    ReactComponentsRails: ReactComponentsRails
   }
 }
 
-const ReactComponentsRails = {
-  registeredComponents: {} as { [name: string]: React.ComponentType },
-  mountedRoots: [] as Root[],
-  ReactDOMClient: undefined as
+class ReactComponentsRails {
+  #registeredComponents = {} as { [name: string]: React.ComponentType }
+  #mountedRoots = [] as Root[]
+  #ReactDOMClient = undefined as
     | typeof ReactDOM
     | typeof ReactDOMClient
-    | undefined,
+    | undefined
+
+  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)
 
-    if (this.ReactDOMClient) {
-      if ("createRoot" in this.ReactDOMClient) {
-        const root = this.ReactDOMClient.createRoot(node)
+    if (this.#ReactDOMClient) {
+      if ("createRoot" in this.#ReactDOMClient) {
+        const root = this.#ReactDOMClient.createRoot(node)
         root.render(reactElement)
-        this.mountedRoots.push(root)
+        this.#mountedRoots.push(root)
       } else {
-        this.ReactDOMClient.render(reactElement, node)
+        this.#ReactDOMClient.render(reactElement, node)
       }
     }
-  },
-
-  registerComponents(components: { [name: string]: React.Component }) {
-    const collisions = intersection(
-      keys(this.registeredComponents),
-      keys(components)
-    )
-    if (collisions.length > 0) {
+  }
+
+  private registerComponents(components: {
+    [name: string]: React.ComponentType
+  }) {
+    const alreadyExisting: string[] = []
+
+    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() {
-    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])
-        }
-      }
-    }
-  },
+  }
 
-  mountComponents() {
-    const { registeredComponents } = this
+  // Not used for now, useful for UJS
+  // private unmountComponents() {
+  //   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])
+  //       }
+  //     }
+  //   }
+  // }
+
+  private mountComponents() {
     const toMount = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`)
 
     for (let i = 0; i < toMount.length; i += 1) {
@@ -82,7 +102,7 @@ const ReactComponentsRails = {
         continue
       }
 
-      const component = registeredComponents[className]
+      const component = this.#registeredComponents[className]
 
       if (component) {
         if (node.innerHTML.length === 0) this.render(node, component)
@@ -92,28 +112,31 @@ const ReactComponentsRails = {
         )
       }
     }
-  },
-
-  async setup(components = {}) {
-    await this.loadReactDOMClient()
-    if (typeof window.ReactComponentsRails === "undefined") {
-      window.ReactComponentsRails = this
-      // ujs.setup(this.mountComponents.bind(this), this.unmountComponents.bind(this))
-    }
-
-    window.ReactComponentsRails.registerComponents(components)
-    window.ReactComponentsRails.mountComponents()
-  },
+  }
 
-  async loadReactDOMClient() {
-    if (this.ReactDOMClient) return
+  setup(components = {}) {
+    this.loadReactDOMClient().then(() => {
+      window.ReactComponentsRails.registerComponents(components)
+      window.ReactComponentsRails.mountComponents()
+    })
+  }
 
-    try {
-      this.ReactDOMClient = await import("react-dom/client")
-    } catch (e) {
-      this.ReactDOMClient = ReactDOM
-    }
-  },
+  private loadReactDOMClient() {
+    return new Promise<void>((resolve) => {
+      if (this.#ReactDOMClient) resolve()
+
+      import("react-dom/client")
+        .then((i) => {
+          this.#ReactDOMClient = i
+          resolve()
+        })
+        .catch(() => {
+          this.#ReactDOMClient = ReactDOM
+        })
+    })
+  }
 }
 
-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 */
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react-components-rails
 version: !ruby/object:Gem::Version
-  version: 1.0.0.beta2
+  version: 1.0.0.beta3
 platform: ruby
 authors:
 - Renaud Chaput
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2022-08-15 00:00:00.000000000 Z
+date: 2022-08-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler