react-on-rails 16.1.0 → 16.2.0-beta.0

package/{node_package/lib → lib}/Authenticity.d.ts

@@ -1,3 +1,4 @@
 import type { AuthenticityHeaders } from './types/index.ts';
 export declare function authenticityToken(): string | null;
 export declare const authenticityHeaders: (otherHeaders?: Record<string, string>) => AuthenticityHeaders;
+//# sourceMappingURL=Authenticity.d.ts.map

package/{node_package/lib → lib}/Authenticity.js

@@ -9,3 +9,4 @@ export const authenticityHeaders = (otherHeaders = {}) => Object.assign(otherHea
     'X-CSRF-Token': authenticityToken(),
     'X-Requested-With': 'XMLHttpRequest',
 });
+//# sourceMappingURL=Authenticity.js.map

package/lib/ClientRenderer.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Render a single component by its DOM ID.
+ * This is the main entry point for rendering individual components.
+ * @public
+ */
+export declare function renderComponent(domId: string): void;
+/**
+ * Render all components on the page.
+ * Core package renders all components after page load.
+ */
+export declare function renderAllComponents(): void;
+/**
+ * Public API function that can be called to render a component after it has been loaded.
+ * This is the function that should be exported and used by the Rails integration.
+ * Returns a Promise for API compatibility with pro version.
+ */
+export declare function reactOnRailsComponentLoaded(domId: string): Promise<void>;
+//# sourceMappingURL=ClientRenderer.d.ts.map

package/lib/ClientRenderer.js

@@ -0,0 +1,155 @@
+import ComponentRegistry from "./ComponentRegistry.js";
+import StoreRegistry from "./StoreRegistry.js";
+import createReactOutput from "./createReactOutput.js";
+import reactHydrateOrRender from "./reactHydrateOrRender.js";
+import { getRailsContext } from "./context.js";
+import { isServerRenderHash } from "./isServerRenderResult.js";
+import { onPageUnloaded } from "./pageLifecycle.js";
+import { supportsRootApi, unmountComponentAtNode } from "./reactApis.cjs";
+const REACT_ON_RAILS_STORE_ATTRIBUTE = 'data-js-react-on-rails-store';
+// Track all rendered roots for cleanup
+const renderedRoots = new Map();
+function initializeStore(el, railsContext) {
+    const name = el.getAttribute(REACT_ON_RAILS_STORE_ATTRIBUTE) || '';
+    const props = el.textContent !== null ? JSON.parse(el.textContent) : {};
+    const storeGenerator = StoreRegistry.getStoreGenerator(name);
+    const store = storeGenerator(props, railsContext);
+    StoreRegistry.setStore(name, store);
+}
+function forEachStore(railsContext) {
+    const els = document.querySelectorAll(`[${REACT_ON_RAILS_STORE_ATTRIBUTE}]`);
+    for (let i = 0; i < els.length; i += 1) {
+        initializeStore(els[i], railsContext);
+    }
+}
+function domNodeIdForEl(el) {
+    return el.getAttribute('data-dom-id') || '';
+}
+function delegateToRenderer(componentObj, props, railsContext, domNodeId, trace) {
+    const { name, component, isRenderer } = componentObj;
+    if (isRenderer) {
+        if (trace) {
+            console.log(`\
+DELEGATING TO RENDERER ${name} for dom node with id: ${domNodeId} with props, railsContext:`, props, railsContext);
+        }
+        // Call the renderer function with the expected signature
+        component(props, railsContext, domNodeId);
+        return true;
+    }
+    return false;
+}
+/**
+ * Used for client rendering by ReactOnRails. Either calls ReactDOM.hydrate, ReactDOM.render, or
+ * delegates to a renderer registered by the user.
+ */
+function renderElement(el, railsContext) {
+    // This must match lib/react_on_rails/helper.rb
+    const name = el.getAttribute('data-component-name') || '';
+    const domNodeId = domNodeIdForEl(el);
+    const props = el.textContent !== null ? JSON.parse(el.textContent) : {};
+    const trace = el.getAttribute('data-trace') === 'true';
+    try {
+        const domNode = document.getElementById(domNodeId);
+        if (domNode) {
+            const componentObj = ComponentRegistry.get(name);
+            if (delegateToRenderer(componentObj, props, railsContext, domNodeId, trace)) {
+                return;
+            }
+            // Hydrate if available and was server rendered
+            const shouldHydrate = !!domNode.innerHTML;
+            const reactElementOrRouterResult = createReactOutput({
+                componentObj,
+                props,
+                domNodeId,
+                trace,
+                railsContext,
+                shouldHydrate,
+            });
+            if (isServerRenderHash(reactElementOrRouterResult)) {
+                throw new Error(`\
+You returned a server side type of react-router error: ${JSON.stringify(reactElementOrRouterResult)}
+You should return a React.Component always for the client side entry point.`);
+            }
+            else {
+                const root = reactHydrateOrRender(domNode, reactElementOrRouterResult, shouldHydrate);
+                // Track the root for cleanup
+                renderedRoots.set(domNodeId, { root, domNode });
+            }
+        }
+    }
+    catch (e) {
+        const error = e;
+        console.error(error.message);
+        error.message = `ReactOnRails encountered an error while rendering component: ${name}. See above error message.`;
+        throw error;
+    }
+}
+/**
+ * Render a single component by its DOM ID.
+ * This is the main entry point for rendering individual components.
+ * @public
+ */
+export function renderComponent(domId) {
+    const railsContext = getRailsContext();
+    // If no react on rails context
+    if (!railsContext)
+        return;
+    // Initialize stores first
+    forEachStore(railsContext);
+    // Find the element with the matching data-dom-id
+    const el = document.querySelector(`[data-dom-id="${domId}"]`);
+    if (!el)
+        return;
+    renderElement(el, railsContext);
+}
+/**
+ * Render all components on the page.
+ * Core package renders all components after page load.
+ */
+export function renderAllComponents() {
+    const railsContext = getRailsContext();
+    if (!railsContext)
+        return;
+    // Initialize all stores first
+    forEachStore(railsContext);
+    // Render all components
+    const componentElements = document.querySelectorAll('.js-react-on-rails-component');
+    for (let i = 0; i < componentElements.length; i += 1) {
+        renderElement(componentElements[i], railsContext);
+    }
+}
+/**
+ * Public API function that can be called to render a component after it has been loaded.
+ * This is the function that should be exported and used by the Rails integration.
+ * Returns a Promise for API compatibility with pro version.
+ */
+export function reactOnRailsComponentLoaded(domId) {
+    renderComponent(domId);
+    return Promise.resolve();
+}
+/**
+ * Unmount all rendered React components and clear roots.
+ * This should be called on page unload to prevent memory leaks.
+ */
+function unmountAllComponents() {
+    renderedRoots.forEach(({ root, domNode }) => {
+        try {
+            if (supportsRootApi && root && typeof root === 'object' && 'unmount' in root) {
+                // React 18+ Root API
+                root.unmount();
+            }
+            else {
+                // React 16-17 legacy API
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                unmountComponentAtNode(domNode);
+            }
+        }
+        catch (error) {
+            console.error('Error unmounting component:', error);
+        }
+    });
+    renderedRoots.clear();
+}
+// Register cleanup on page unload
+onPageUnloaded(unmountAllComponents);
+//# sourceMappingURL=ClientRenderer.js.map

package/lib/ComponentRegistry.d.ts

@@ -0,0 +1,31 @@
+import type { RegisteredComponent, ReactComponentOrRenderFunction } from './types/index.ts';
+declare const _default: {
+    /**
+     * @param components { component1: component1, component2: component2, etc. }
+     */
+    register(components: Record<string, ReactComponentOrRenderFunction>): void;
+    /**
+     * @param name
+     * @returns { name, component, renderFunction, isRenderer }
+     */
+    get(name: string): RegisteredComponent;
+    /**
+     * Get a Map containing all registered components. Useful for debugging.
+     * @returns Map where key is the component name and values are the
+     * { name, component, renderFunction, isRenderer}
+     */
+    components(): Map<string, RegisteredComponent>;
+    /**
+     * Pro-only method that waits for component registration
+     * @param _name Component name to wait for
+     * @throws Always throws error indicating pro package is required
+     */
+    getOrWaitForComponent(_name: string): never;
+    /**
+     * Clear all registered components (for testing purposes)
+     * @private
+     */
+    clear(): void;
+};
+export default _default;
+//# sourceMappingURL=ComponentRegistry.d.ts.map

package/lib/ComponentRegistry.js

@@ -0,0 +1,64 @@
+import isRenderFunction from "./isRenderFunction.js";
+const registeredComponents = new Map();
+export default {
+    /**
+     * @param components { component1: component1, component2: component2, etc. }
+     */
+    register(components) {
+        Object.keys(components).forEach((name) => {
+            if (registeredComponents.has(name)) {
+                console.warn('Called register for component that is already registered', name);
+            }
+            const component = components[name];
+            if (!component) {
+                throw new Error(`Called register with null component named ${name}`);
+            }
+            const renderFunction = isRenderFunction(component);
+            const isRenderer = renderFunction && component.length === 3;
+            registeredComponents.set(name, {
+                name,
+                component,
+                renderFunction,
+                isRenderer,
+            });
+        });
+    },
+    /**
+     * @param name
+     * @returns { name, component, renderFunction, isRenderer }
+     */
+    get(name) {
+        const registeredComponent = registeredComponents.get(name);
+        if (registeredComponent !== undefined) {
+            return registeredComponent;
+        }
+        const keys = Array.from(registeredComponents.keys()).join(', ');
+        throw new Error(`Could not find component registered with name ${name}. \
+Registered component names include [ ${keys} ]. Maybe you forgot to register the component?`);
+    },
+    /**
+     * Get a Map containing all registered components. Useful for debugging.
+     * @returns Map where key is the component name and values are the
+     * { name, component, renderFunction, isRenderer}
+     */
+    components() {
+        return registeredComponents;
+    },
+    /**
+     * Pro-only method that waits for component registration
+     * @param _name Component name to wait for
+     * @throws Always throws error indicating pro package is required
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getOrWaitForComponent(_name) {
+        throw new Error('getOrWaitForComponent requires react-on-rails-pro package');
+    },
+    /**
+     * Clear all registered components (for testing purposes)
+     * @private
+     */
+    clear() {
+        registeredComponents.clear();
+    },
+};
+//# sourceMappingURL=ComponentRegistry.js.map

package/{node_package/lib → lib}/ReactDOMServer.cjs

@@ -7,3 +7,4 @@ exports.renderToString = exports.renderToPipeableStream = void 0;
 var server_1 = require("react-dom/server");
 Object.defineProperty(exports, "renderToPipeableStream", { enumerable: true, get: function () { return server_1.renderToPipeableStream; } });
 Object.defineProperty(exports, "renderToString", { enumerable: true, get: function () { return server_1.renderToString; } });
+//# sourceMappingURL=ReactDOMServer.cjs.map

package/lib/ReactOnRails.client.d.ts

@@ -0,0 +1,4 @@
+declare const ReactOnRails: import("./types/index.ts").ReactOnRailsInternal;
+export * from './types/index.ts';
+export default ReactOnRails;
+//# sourceMappingURL=ReactOnRails.client.d.ts.map

package/lib/ReactOnRails.client.js

@@ -0,0 +1,7 @@
+import { createBaseClientObject } from "./base/client.js";
+import createReactOnRails from "./createReactOnRails.js";
+const currentGlobal = globalThis.ReactOnRails || null;
+const ReactOnRails = createReactOnRails(createBaseClientObject, currentGlobal);
+export * from "./types/index.js";
+export default ReactOnRails;
+//# sourceMappingURL=ReactOnRails.client.js.map

package/lib/ReactOnRails.full.d.ts

@@ -0,0 +1,4 @@
+declare const ReactOnRails: import("./types/index.ts").ReactOnRailsInternal;
+export * from './types/index.ts';
+export default ReactOnRails;
+//# sourceMappingURL=ReactOnRails.full.d.ts.map

package/lib/ReactOnRails.full.js

@@ -0,0 +1,7 @@
+import { createBaseFullObject } from "./base/full.js";
+import createReactOnRails from "./createReactOnRails.js";
+const currentGlobal = globalThis.ReactOnRails || null;
+const ReactOnRails = createReactOnRails(createBaseFullObject, currentGlobal);
+export * from "./types/index.js";
+export default ReactOnRails;
+//# sourceMappingURL=ReactOnRails.full.js.map

package/{node_package/lib → lib}/RenderUtils.d.ts

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

package/{node_package/lib → lib}/RenderUtils.js

@@ -8,3 +8,4 @@ export function wrapInScriptTags(scriptId, scriptBody) {
 ${scriptBody}
 </script>`;
 }
+//# sourceMappingURL=RenderUtils.js.map

package/lib/StoreRegistry.d.ts

@@ -0,0 +1,58 @@
+import type { Store, StoreGenerator } from './types/index.ts';
+declare const _default: {
+    /**
+     * Register a store generator, a function that takes props and returns a store.
+     * @param storeGenerators { name1: storeGenerator1, name2: storeGenerator2 }
+     */
+    register(storeGenerators: Record<string, StoreGenerator>): void;
+    /**
+     * Used by components to get the hydrated store which contains props.
+     * @param name
+     * @param throwIfMissing Defaults to true. Set to false to have this call return undefined if
+     *        there is no store with the given name.
+     * @returns Redux Store, possibly hydrated
+     */
+    getStore(name: string, throwIfMissing?: boolean): Store | undefined;
+    /**
+     * Internally used function to get the store creator that was passed to `register`.
+     * @param name
+     * @returns storeCreator with given name
+     */
+    getStoreGenerator(name: string): StoreGenerator;
+    /**
+     * Internally used function to set the hydrated store after a Rails page is loaded.
+     * @param name
+     * @param store (not the storeGenerator, but the hydrated store)
+     */
+    setStore(name: string, store: Store): void;
+    /**
+     * Internally used function to completely clear hydratedStores Map.
+     */
+    clearHydratedStores(): void;
+    /**
+     * Get a Map containing all registered store generators. Useful for debugging.
+     * @returns Map where key is the component name and values are the store generators.
+     */
+    storeGenerators(): Map<string, StoreGenerator>;
+    /**
+     * Get a Map containing all hydrated stores. Useful for debugging.
+     * @returns Map where key is the component name and values are the hydrated stores.
+     */
+    stores(): Map<string, Store>;
+    /**
+     * Get a store by name, or wait for it to be registered.
+     * This is a Pro-only feature that requires React on Rails Pro.
+     * @param name
+     * @throws Error indicating this is a Pro-only feature
+     */
+    getOrWaitForStore(name: string): never;
+    /**
+     * Get a store generator by name, or wait for it to be registered.
+     * This is a Pro-only feature that requires React on Rails Pro.
+     * @param name
+     * @throws Error indicating this is a Pro-only feature
+     */
+    getOrWaitForStoreGenerator(name: string): never;
+};
+export default _default;
+//# sourceMappingURL=StoreRegistry.d.ts.map

package/lib/StoreRegistry.js

@@ -0,0 +1,113 @@
+const registeredStoreGenerators = new Map();
+const hydratedStores = new Map();
+export default {
+    /**
+     * Register a store generator, a function that takes props and returns a store.
+     * @param storeGenerators { name1: storeGenerator1, name2: storeGenerator2 }
+     */
+    register(storeGenerators) {
+        Object.keys(storeGenerators).forEach((name) => {
+            if (registeredStoreGenerators.has(name)) {
+                console.warn('Called registerStore for store that is already registered', name);
+            }
+            const store = storeGenerators[name];
+            if (!store) {
+                throw new Error('Called ReactOnRails.registerStores with a null or undefined as a value ' +
+                    `for the store generator with key ${name}.`);
+            }
+            registeredStoreGenerators.set(name, store);
+        });
+    },
+    /**
+     * Used by components to get the hydrated store which contains props.
+     * @param name
+     * @param throwIfMissing Defaults to true. Set to false to have this call return undefined if
+     *        there is no store with the given name.
+     * @returns Redux Store, possibly hydrated
+     */
+    getStore(name, throwIfMissing = true) {
+        if (hydratedStores.has(name)) {
+            return hydratedStores.get(name);
+        }
+        const storeKeys = Array.from(hydratedStores.keys()).join(', ');
+        if (storeKeys.length === 0) {
+            const msg = `There are no stores hydrated and you are requesting the store ${name}.
+This can happen if you are server rendering and either:
+1. You do not call redux_store near the top of your controller action's view (not the layout)
+   and before any call to react_component.
+2. You do not render redux_store_hydration_data anywhere on your page.`;
+            throw new Error(msg);
+        }
+        if (throwIfMissing) {
+            console.log('storeKeys', storeKeys);
+            throw new Error(`Could not find hydrated store with name '${name}'. ` +
+                `Hydrated store names include [${storeKeys}].`);
+        }
+        return undefined;
+    },
+    /**
+     * Internally used function to get the store creator that was passed to `register`.
+     * @param name
+     * @returns storeCreator with given name
+     */
+    getStoreGenerator(name) {
+        const registeredStoreGenerator = registeredStoreGenerators.get(name);
+        if (registeredStoreGenerator) {
+            return registeredStoreGenerator;
+        }
+        const storeKeys = Array.from(registeredStoreGenerators.keys()).join(', ');
+        throw new Error(`Could not find store registered with name '${name}'. Registered store ` +
+            `names include [ ${storeKeys} ]. Maybe you forgot to register the store?`);
+    },
+    /**
+     * Internally used function to set the hydrated store after a Rails page is loaded.
+     * @param name
+     * @param store (not the storeGenerator, but the hydrated store)
+     */
+    setStore(name, store) {
+        hydratedStores.set(name, store);
+    },
+    /**
+     * Internally used function to completely clear hydratedStores Map.
+     */
+    clearHydratedStores() {
+        hydratedStores.clear();
+    },
+    /**
+     * Get a Map containing all registered store generators. Useful for debugging.
+     * @returns Map where key is the component name and values are the store generators.
+     */
+    storeGenerators() {
+        return registeredStoreGenerators;
+    },
+    /**
+     * Get a Map containing all hydrated stores. Useful for debugging.
+     * @returns Map where key is the component name and values are the hydrated stores.
+     */
+    stores() {
+        return hydratedStores;
+    },
+    /**
+     * Get a store by name, or wait for it to be registered.
+     * This is a Pro-only feature that requires React on Rails Pro.
+     * @param name
+     * @throws Error indicating this is a Pro-only feature
+     */
+    getOrWaitForStore(name) {
+        throw new Error(`getOrWaitForStore('${name}') is only available with React on Rails Pro. ` +
+            'Please upgrade to React on Rails Pro or use the synchronous getStore() method instead. ' +
+            'See https://www.shakacode.com/react-on-rails-pro/ for more information.');
+    },
+    /**
+     * Get a store generator by name, or wait for it to be registered.
+     * This is a Pro-only feature that requires React on Rails Pro.
+     * @param name
+     * @throws Error indicating this is a Pro-only feature
+     */
+    getOrWaitForStoreGenerator(name) {
+        throw new Error(`getOrWaitForStoreGenerator('${name}') is only available with React on Rails Pro. ` +
+            'Please upgrade to React on Rails Pro or use the synchronous getStoreGenerator() method instead. ' +
+            'See https://www.shakacode.com/react-on-rails-pro/ for more information.');
+    },
+};
+//# sourceMappingURL=StoreRegistry.js.map

package/lib/base/client.d.ts

@@ -0,0 +1,25 @@
+import type { RegisteredComponent, ReactComponentOrRenderFunction, Store, StoreGenerator, ReactOnRailsInternal } from '../types/index.ts';
+interface Registries {
+    ComponentRegistry: {
+        register: (components: Record<string, ReactComponentOrRenderFunction>) => void;
+        get: (name: string) => RegisteredComponent;
+        components: () => Map<string, RegisteredComponent>;
+    };
+    StoreRegistry: {
+        register: (storeGenerators: Record<string, StoreGenerator>) => void;
+        getStore: (name: string, throwIfMissing?: boolean) => Store | undefined;
+        getStoreGenerator: (name: string) => StoreGenerator;
+        setStore: (name: string, store: Store) => void;
+        clearHydratedStores: () => void;
+        storeGenerators: () => Map<string, StoreGenerator>;
+        stores: () => Map<string, Store>;
+    };
+}
+/**
+ * Base client object type that includes all core ReactOnRails methods except Pro-specific ones.
+ * Derived from ReactOnRailsInternal by omitting Pro-only methods.
+ */
+export type BaseClientObjectType = Omit<ReactOnRailsInternal, 'getOrWaitForComponent' | 'getOrWaitForStore' | 'getOrWaitForStoreGenerator' | 'reactOnRailsStoreLoaded' | 'streamServerRenderedReactComponent' | 'serverRenderRSCReactComponent'>;
+export declare function createBaseClientObject(registries: Registries, currentObject?: BaseClientObjectType | null): BaseClientObjectType;
+export {};
+//# sourceMappingURL=client.d.ts.map