react-on-rails 16.2.0-beta.9 → 16.2.0-rc.0

package/LICENSE.md

@@ -0,0 +1,83 @@
+# Licensing
+
+This repository contains code under two different licenses:
+
+- **Core**: MIT License (applies to most files)
+- **Pro**: React on Rails Pro License (applies to specific directories)
+
+## License Scope
+
+### MIT Licensed Code
+
+The following directories and all their contents are licensed under the **MIT License** (see full text below):
+
+- `react_on_rails/` (entire directory, including lib/, spec/, sig/)
+- `packages/react-on-rails/` (entire package)
+- All other directories in this repository not explicitly listed as Pro-licensed
+
+### Pro Licensed Code
+
+The following directories and all their contents are licensed under the **React on Rails Pro License**:
+
+- `packages/react-on-rails-pro/` (entire package)
+- `packages/react-on-rails-pro-node-renderer/` (entire package)
+- `react_on_rails_pro/` (entire directory)
+
+See [REACT-ON-RAILS-PRO-LICENSE.md](./REACT-ON-RAILS-PRO-LICENSE.md) for complete Pro license terms.
+
+**Important:** Pro-licensed code is included in this package but requires a valid React on Rails Pro subscription to use. Using Pro features without a valid license violates the React on Rails Pro License.
+
+---
+
+## MIT License
+
+This license applies to all MIT-licensed code as defined above.
+
+Copyright (c) 2017, 2018 Justin Gordon and ShakaCode  
+Copyright (c) 2015–2025 ShakaCode, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+---
+
+## Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+## React on Rails Pro License
+
+For Pro-licensed code (as defined in the "License Scope" section above), see:
+[REACT-ON-RAILS-PRO-LICENSE.md](./REACT-ON-RAILS-PRO-LICENSE.md)
+
+**Key Points:**
+
+- Pro features require a valid React on Rails Pro subscription for production use
+- Free use is permitted for educational, personal, and non-production purposes
+- Modifying MIT-licensed interface files is permitted under MIT terms
+- However, using those modifications to access Pro features without a valid license violates the Pro License
+
+### License Validation Mechanisms
+
+**License validation mechanisms** include but are not limited to:
+
+- Runtime checks for valid Pro subscriptions
+- Authentication systems in `react_on_rails/lib/react_on_rails/utils.rb` and Pro TypeScript modules
+- The `react_on_rails_pro?` method and `rorPro` field generation
+
+While MIT-licensed code may be modified under MIT terms, using such modifications to access Pro features without a valid license violates the React on Rails Pro License.

package/lib/ClientRenderer.js

@@ -51,11 +51,48 @@ function renderElement(el, railsContext) {
     try {
         const domNode = document.getElementById(domNodeId);
         if (domNode) {
+            // Check if this component was already rendered by a previous call
+            // This prevents hydration errors when reactOnRailsPageLoaded() is called multiple times
+            // (e.g., for asynchronously loaded content)
+            const existing = renderedRoots.get(domNodeId);
+            if (existing) {
+                // Only skip if it's the exact same DOM node and it's still connected to the document.
+                // If the node was replaced (e.g., via innerHTML or Turbo), we need to unmount the old
+                // root and re-render to the new node to prevent memory leaks and ensure rendering works.
+                const sameNode = existing.domNode === domNode && existing.domNode.isConnected;
+                if (sameNode) {
+                    if (trace) {
+                        console.log(`Skipping already rendered component: ${name} (dom id: ${domNodeId})`);
+                    }
+                    return;
+                }
+                // DOM node was replaced (e.g., via async HTML injection) - clean up the old root
+                try {
+                    if (supportsRootApi &&
+                        existing.root &&
+                        typeof existing.root === 'object' &&
+                        'unmount' in existing.root) {
+                        existing.root.unmount();
+                    }
+                    else {
+                        unmountComponentAtNode(existing.domNode);
+                    }
+                }
+                catch (unmountError) {
+                    // Ignore unmount errors for replaced nodes
+                    if (trace) {
+                        console.log(`Error unmounting replaced component: ${name}`, unmountError);
+                    }
+                }
+                renderedRoots.delete(domNodeId);
+            }
             const componentObj = ComponentRegistry.get(name);
             if (delegateToRenderer(componentObj, props, railsContext, domNodeId, trace)) {
                 return;
             }
-            // Hydrate if available and was server rendered
+            // Hydrate if the DOM node has content (server-rendered HTML)
+            // Since we skip already-rendered components above, this check now correctly
+            // identifies only server-rendered content, not previously client-rendered content
             const shouldHydrate = !!domNode.innerHTML;
             const reactElementOrRouterResult = createReactOutput({
                 componentObj,
@@ -140,7 +177,6 @@ function unmountAllComponents() {
             }
             else {
                 // React 16-17 legacy API
-                // eslint-disable-next-line @typescript-eslint/no-deprecated
                 unmountComponentAtNode(domNode);
             }
         }

package/lib/RenderUtils.d.ts

@@ -1,2 +1,2 @@
-export declare function wrapInScriptTags(scriptId: string, scriptBody: string): string;
+export declare function wrapInScriptTags(scriptId: string, scriptBody: string, nonce?: string): string;
 //# sourceMappingURL=RenderUtils.d.ts.map

package/lib/RenderUtils.js

@@ -1,10 +1,14 @@
 // eslint-disable-next-line import/prefer-default-export -- only one export for now, but others may be added later
-export function wrapInScriptTags(scriptId, scriptBody) {
+export function wrapInScriptTags(scriptId, scriptBody, nonce) {
     if (!scriptBody) {
         return '';
     }
+    // Sanitize nonce to prevent attribute injection attacks
+    // CSP nonces should be base64 strings, so only allow alphanumeric, +, /, =, -, and _
+    const sanitizedNonce = nonce?.replace(/[^a-zA-Z0-9+/=_-]/g, '');
+    const nonceAttr = sanitizedNonce ? ` nonce="${sanitizedNonce}"` : '';
     return `
-<script id="${scriptId}">
+<script id="${scriptId}"${nonceAttr}>
 ${scriptBody}
 </script>`;
 }

package/lib/base/client.js

@@ -1,5 +1,5 @@
 import * as Authenticity from "../Authenticity.js";
-import buildConsoleReplay from "../buildConsoleReplay.js";
+import buildConsoleReplay, { consoleReplay } from "../buildConsoleReplay.js";
 import reactHydrateOrRender from "../reactHydrateOrRender.js";
 import createReactOutput from "../createReactOutput.js";
 const DEFAULT_OPTIONS = {
@@ -107,6 +107,9 @@ Fix: Use only react-on-rails OR react-on-rails-pro, not both.`);
         buildConsoleReplay() {
             return buildConsoleReplay();
         },
+        getConsoleReplayScript() {
+            return consoleReplay();
+        },
         resetOptions() {
             this.options = { ...DEFAULT_OPTIONS };
         },

package/lib/base/full.d.ts

@@ -8,8 +8,10 @@ export type ReactOnRailsFullSpecificFunctions = Pick<ReactOnRailsInternal, 'hand
 /**
  * Full object type that includes all base methods plus real SSR implementations.
  * Derived from ReactOnRailsInternal by picking base methods and SSR methods.
+ * Note: BaseClientObjectType already includes serverRenderReactComponent and handleError,
+ * so ReactOnRailsFullSpecificFunctions is a subset.
  * @public
  */
-export type BaseFullObjectType = Pick<ReactOnRailsInternal, keyof BaseClientObjectType | keyof ReactOnRailsFullSpecificFunctions>;
+export type BaseFullObjectType = Pick<ReactOnRailsInternal, keyof BaseClientObjectType>;
 export declare function createBaseFullObject(registries: Parameters<typeof createBaseClientObject>[0], currentObject?: BaseClientObjectType | null): BaseFullObjectType;
 //# sourceMappingURL=full.d.ts.map

package/lib/buildConsoleReplay.d.ts

@@ -6,7 +6,11 @@ declare global {
         }[];
     }
 }
-/** @internal Exported only for tests */
-export declare function consoleReplay(customConsoleHistory?: (typeof console)['history'] | undefined, numberOfMessagesToSkip?: number): string;
-export default function buildConsoleReplay(customConsoleHistory?: (typeof console)['history'] | undefined, numberOfMessagesToSkip?: number): string;
+/**
+ * Returns the console replay JavaScript code without wrapping it in script tags.
+ * This is useful when you want to wrap the code in script tags yourself (e.g., with a CSP nonce).
+ * @internal Exported for tests and for Ruby helper to wrap with nonce
+ */
+export declare function consoleReplay(customConsoleHistory?: (typeof console)['history'], numberOfMessagesToSkip?: number): string;
+export default function buildConsoleReplay(customConsoleHistory?: (typeof console)['history'], numberOfMessagesToSkip?: number, nonce?: string): string;
 //# sourceMappingURL=buildConsoleReplay.d.ts.map

package/lib/buildConsoleReplay.js

@@ -1,6 +1,10 @@
 import { wrapInScriptTags } from "./RenderUtils.js";
 import scriptSanitizedVal from "./scriptSanitizedVal.js";
-/** @internal Exported only for tests */
+/**
+ * Returns the console replay JavaScript code without wrapping it in script tags.
+ * This is useful when you want to wrap the code in script tags yourself (e.g., with a CSP nonce).
+ * @internal Exported for tests and for Ruby helper to wrap with nonce
+ */
 export function consoleReplay(customConsoleHistory = undefined, numberOfMessagesToSkip = 0) {
     // console.history is a global polyfill used in server rendering.
     const consoleHistory = customConsoleHistory ?? console.history;
@@ -34,11 +38,11 @@ export function consoleReplay(customConsoleHistory = undefined, numberOfMessages
     });
     return lines.join('\n');
 }
-export default function buildConsoleReplay(customConsoleHistory = undefined, numberOfMessagesToSkip = 0) {
+export default function buildConsoleReplay(customConsoleHistory = undefined, numberOfMessagesToSkip = 0, nonce) {
     const consoleReplayJS = consoleReplay(customConsoleHistory, numberOfMessagesToSkip);
     if (consoleReplayJS.length === 0) {
         return '';
     }
-    return wrapInScriptTags('consoleReplayLog', consoleReplayJS);
+    return wrapInScriptTags('consoleReplayLog', consoleReplayJS, nonce);
 }
 //# sourceMappingURL=buildConsoleReplay.js.map

package/lib/reactApis.cjs

@@ -25,25 +25,38 @@ if (exports.supportsRootApi) {
         reactDomClient = ReactDOM;
     }
 }
-/* eslint-disable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion,react/no-deprecated --
- * while we need to support React 16
- */
+// Cast ReactDOM to include legacy APIs for React 16/17 compatibility
+// These methods exist at runtime but are removed from @types/react-dom@19
+const legacyReactDOM = ReactDOM;
+// Validate legacy APIs exist at runtime when needed (React < 18)
+if (!exports.supportsRootApi) {
+    if (typeof legacyReactDOM.hydrate !== 'function') {
+        throw new Error('React legacy hydrate API not available. Expected React 16/17.');
+    }
+    if (typeof legacyReactDOM.render !== 'function') {
+        throw new Error('React legacy render API not available. Expected React 16/17.');
+    }
+    if (typeof legacyReactDOM.unmountComponentAtNode !== 'function') {
+        throw new Error('React legacy unmountComponentAtNode API not available. Expected React 16/17.');
+    }
+}
+/* eslint-disable @typescript-eslint/no-non-null-assertion -- reactDomClient is always defined when supportsRootApi is true */
 exports.reactHydrate = exports.supportsRootApi
     ? reactDomClient.hydrateRoot
-    : (domNode, reactElement) => ReactDOM.hydrate(reactElement, domNode);
+    : (domNode, reactElement) => legacyReactDOM.hydrate(reactElement, domNode);
 function reactRender(domNode, reactElement) {
     if (exports.supportsRootApi) {
         const root = reactDomClient.createRoot(domNode);
         root.render(reactElement);
         return root;
     }
-    // eslint-disable-next-line react/no-render-return-value
-    return ReactDOM.render(reactElement, domNode);
+    return legacyReactDOM.render(reactElement, domNode);
 }
 exports.unmountComponentAtNode = exports.supportsRootApi
     ? // not used if we use root API
-        () => false
-    : ReactDOM.unmountComponentAtNode;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        (_container) => false
+    : (container) => legacyReactDOM.unmountComponentAtNode(container);
 const ensureReactUseAvailable = () => {
     if (!('use' in React) || typeof React.use !== 'function') {
         throw new Error('React.use is not defined. Please ensure you are using React 19 to use server components.');

package/lib/serverRenderReactComponent.js

@@ -2,7 +2,7 @@ import { isValidElement } from 'react';
 // ComponentRegistry is accessed via globalThis.ReactOnRails.getComponent for cross-bundle compatibility
 import createReactOutput from "./createReactOutput.js";
 import { isPromise, isServerRenderHash } from "./isServerRenderResult.js";
-import buildConsoleReplay from "./buildConsoleReplay.js";
+import { consoleReplay } from "./buildConsoleReplay.js";
 import handleError from "./handleError.js";
 import { renderToString } from "./ReactDOMServer.cjs";
 import { createResultObject, convertToError, validateComponent } from "./serverRenderUtils.js";
@@ -49,6 +49,7 @@ function processPromise(result, renderingReturnsPromises) {
         if (isValidElement(promiseResult)) {
             return processReactElement(promiseResult);
         }
+        // promiseResult is string | ServerRenderHashRenderedHtml (both are FinalHtmlResult)
         return promiseResult;
     });
 }
@@ -80,12 +81,12 @@ async function createPromiseResult(renderState, componentName, throwJsErrors) {
     const consoleHistory = console.history;
     try {
         const html = await renderState.result;
-        const consoleReplayScript = buildConsoleReplay(consoleHistory);
+        const consoleReplayScript = consoleReplay(consoleHistory);
         return createResultObject(html, consoleReplayScript, renderState);
     }
     catch (e) {
         const errorRenderState = handleRenderingError(e, { componentName, throwJsErrors });
-        const consoleReplayScript = buildConsoleReplay(consoleHistory);
+        const consoleReplayScript = consoleReplay(consoleHistory);
         return createResultObject(errorRenderState.result, consoleReplayScript, errorRenderState);
     }
 }
@@ -94,7 +95,7 @@ function createFinalResult(renderState, componentName, throwJsErrors) {
     if (isPromise(result)) {
         return createPromiseResult({ ...renderState, result }, componentName, throwJsErrors);
     }
-    const consoleReplayScript = buildConsoleReplay();
+    const consoleReplayScript = consoleReplay();
     return JSON.stringify(createResultObject(result, consoleReplayScript, renderState));
 }
 function serverRenderReactComponentInternal(options) {

package/lib/types/index.d.ts

@@ -68,8 +68,8 @@ interface ServerRenderResult {
     routeError?: Error;
     error?: Error;
 }
-type CreateReactOutputSyncResult = ServerRenderResult | ReactElement<unknown>;
-type CreateReactOutputAsyncResult = Promise<string | ServerRenderHashRenderedHtml | ReactElement<unknown>>;
+type CreateReactOutputSyncResult = ServerRenderResult | ReactElement;
+type CreateReactOutputAsyncResult = Promise<string | ServerRenderHashRenderedHtml | ReactElement>;
 type CreateReactOutputResult = CreateReactOutputSyncResult | CreateReactOutputAsyncResult;
 type RenderFunctionSyncResult = ReactComponent | ServerRenderResult;
 type RenderFunctionAsyncResult = Promise<string | ServerRenderHashRenderedHtml | ReactComponent>;
@@ -249,7 +249,7 @@ export interface ReactOnRailsInternal extends ReactOnRails {
      * @param key
      * @returns option value
      */
-    option<K extends keyof ReactOnRailsOptions>(key: K): ReactOnRailsOptions[K] | undefined;
+    option<K extends keyof ReactOnRailsOptions>(key: K): ReactOnRailsOptions[K];
     /**
      * Allows retrieval of the store generator by name. This is used internally by ReactOnRails after
      * a Rails form loads to prepare stores.
@@ -324,8 +324,14 @@ export interface ReactOnRailsInternal extends ReactOnRails {
     handleError(options: ErrorOptions): string | undefined;
     /**
      * Used by Rails server rendering to replay console messages.
+     * Returns the console replay script wrapped in script tags.
      */
     buildConsoleReplay(): string;
+    /**
+     * Returns the console replay JavaScript code without wrapping it in script tags.
+     * Useful when you need to add CSP nonce or other attributes to the script tag.
+     */
+    getConsoleReplayScript(): string;
     /**
      * Get a Map containing all registered components. Useful for debugging.
      */

package/package.json

@@ -1,21 +1,9 @@
 {
   "name": "react-on-rails",
-  "version": "16.2.0-beta.9",
+  "version": "16.2.0-rc.0",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "lib/ReactOnRails.full.js",
   "type": "module",
-  "scripts": {
-    "build": "yarn run clean && yarn run tsc",
-    "build-watch": "yarn run clean && yarn run tsc --watch",
-    "clean": "rm -rf ./lib",
-    "test": "jest tests",
-    "type-check": "yarn run tsc --noEmit --noErrorTruncation",
-    "prepack": "nps build.prepack",
-    "prepare": "nps build.prepack",
-    "prepublishOnly": "yarn run build",
-    "yalc:publish": "yalc publish",
-    "yalc": "yalc"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shakacode/react_on_rails.git"
@@ -28,7 +16,7 @@
     "on",
     "Rails"
   ],
-  "author": "justin.gordon@gmail.com",
+  "author": "justin@shakacode.com",
   "license": "SEE LICENSE IN LICENSE.md",
   "exports": {
     ".": {
@@ -60,13 +48,7 @@
   },
   "peerDependencies": {
     "react": ">= 16",
-    "react-dom": ">= 16",
-    "react-on-rails-rsc": "19.0.2"
-  },
-  "peerDependenciesMeta": {
-    "react-on-rails-rsc": {
-      "optional": true
-    }
+    "react-dom": ">= 16"
   },
   "files": [
     "lib/**/*.js",
@@ -77,5 +59,14 @@
   "bugs": {
     "url": "https://github.com/shakacode/react_on_rails/issues"
   },
-  "homepage": "https://github.com/shakacode/react_on_rails#readme"
-}
+  "homepage": "https://github.com/shakacode/react_on_rails#readme",
+  "scripts": {
+    "build": "pnpm run clean && tsc",
+    "build-watch": "pnpm run clean && tsc --watch",
+    "clean": "rm -rf ./lib",
+    "test": "jest tests",
+    "type-check": "tsc --noEmit --noErrorTruncation",
+    "yalc:publish": "yalc publish",
+    "yalc": "yalc"
+  }
+}