Step 2: Create Simple MIT Registries for Core Package

✅ Checkpoint 2.1: Create simple ComponentRegistry
- Created packages/react-on-rails/src/ComponentRegistry.ts with Map-based storage
- Synchronous register() and get() methods, error for getOrWaitForComponent()
- Added comprehensive unit tests (12 test cases)

✅ Checkpoint 2.2: Create simple StoreRegistry
- Created packages/react-on-rails/src/StoreRegistry.ts with dual Map storage
- All synchronous methods: register(), getStore(), getStoreGenerator(), etc.
- Error throwing stubs for async methods (getOrWaitForStore, getOrWaitForStoreGenerator)
- Updated unit tests for core implementation

✅ Checkpoint 2.3: Create simple ClientRenderer
- Created packages/react-on-rails/src/ClientRenderer.ts with synchronous rendering
- Based on pre-force-load clientStartup.ts implementation
- Direct imports from core registries, renderComponent() and reactOnRailsComponentLoaded()
- Added unit tests for basic rendering functionality

All registries work independently without pro features and provide clear error
messages directing users to upgrade to React on Rails Pro for advanced functionality.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: AbanoubGhadban

docs/JS_PRO_PACKAGE_SEPARATION_PLAN.md

@@ -93,39 +93,39 @@ Based on commit `4dee1ff3cff5998a38cfa758dec041ece9986623` analysis:
 
 **Checkpoint 2.1**: Create simple ComponentRegistry
 
-- [ ] Create `packages/react-on-rails/src/ComponentRegistry.ts` with:
+- [x] Create `packages/react-on-rails/src/ComponentRegistry.ts` with:
   - Simple Map-based storage (`registeredComponents = new Map()`)
   - Synchronous `register(components)` method
   - Synchronous `get(name)` method with error on missing component
   - `components()` method returning Map
   - Error throwing stub for `getOrWaitForComponent()` with message: `'getOrWaitForComponent requires react-on-rails-pro package'`
-- [ ] Write unit tests in `packages/react-on-rails/tests/ComponentRegistry.test.js`
-- [ ] Verify basic functionality with tests
+- [x] Write unit tests in `packages/react-on-rails/tests/ComponentRegistry.test.js`
+- [x] Verify basic functionality with tests
 
 **Checkpoint 2.2**: Create simple StoreRegistry
 
-- [ ] Create `packages/react-on-rails/src/StoreRegistry.ts` with:
+- [x] Create `packages/react-on-rails/src/StoreRegistry.ts` with:
   - Simple Map-based storage for generators and hydrated stores
   - All existing synchronous methods: `register()`, `getStore()`, `getStoreGenerator()`, `setStore()`, `clearHydratedStores()`, `storeGenerators()`, `stores()`
   - Error throwing stubs for async methods: `getOrWaitForStore()`, `getOrWaitForStoreGenerator()`
-- [ ] Write unit tests in `packages/react-on-rails/tests/StoreRegistry.test.js`
-- [ ] Verify basic functionality with tests
+- [x] Write unit tests in `packages/react-on-rails/tests/StoreRegistry.test.js`
+- [x] Verify basic functionality with tests
 
 **Checkpoint 2.3**: Create simple ClientRenderer
 
-- [ ] Create `packages/react-on-rails/src/ClientRenderer.ts` with:
+- [x] Create `packages/react-on-rails/src/ClientRenderer.ts` with:
   - Simple synchronous rendering based on pre-force-load `clientStartup.ts` implementation
   - Direct imports of core registries: `import { get as getComponent } from './ComponentRegistry'`
   - Basic `renderComponent(domId: string)` function
   - Export `reactOnRailsComponentLoaded` function
-- [ ] Write unit tests for basic rendering
-- [ ] Test simple component rendering works
+- [x] Write unit tests for basic rendering
+- [x] Test simple component rendering works
 
 **Success Validation**:
 
-- [ ] All unit tests pass
-- [ ] Core registries work independently
-- [ ] Simple rendering works without pro features
+- [x] All unit tests pass
+- [x] Core registries work independently
+- [x] Simple rendering works without pro features
 
 ### Step 3: Update Core Package to Use New Registries
 

packages/react-on-rails/src/ClientRenderer.ts

@@ -0,0 +1,135 @@
+import type { ReactElement } from 'react';
+import type { RegisteredComponent, RailsContext } from './types/index.ts';
+import ComponentRegistry from './ComponentRegistry.ts';
+import StoreRegistry from './StoreRegistry.ts';
+import createReactOutput from './createReactOutput.ts';
+import reactHydrateOrRender from './reactHydrateOrRender.ts';
+import { getRailsContext } from './context.ts';
+import { isServerRenderHash } from './isServerRenderResult.ts';
+
+const REACT_ON_RAILS_STORE_ATTRIBUTE = 'data-js-react-on-rails-store';
+
+function initializeStore(el: Element, railsContext: RailsContext): void {
+  const name = el.getAttribute(REACT_ON_RAILS_STORE_ATTRIBUTE) || '';
+  const props = el.textContent !== null ? (JSON.parse(el.textContent) as Record<string, unknown>) : {};
+  const storeGenerator = StoreRegistry.getStoreGenerator(name);
+  const store = storeGenerator(props, railsContext);
+  StoreRegistry.setStore(name, store);
+}
+
+function forEachStore(railsContext: RailsContext): void {
+  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: Element): string {
+  return el.getAttribute('data-dom-id') || '';
+}
+
+function delegateToRenderer(
+  componentObj: RegisteredComponent,
+  props: Record<string, unknown>,
+  railsContext: RailsContext,
+  domNodeId: string,
+  trace: boolean,
+): boolean {
+  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 as (props: Record<string, unknown>, railsContext: RailsContext, domNodeId: string) => void)(
+      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: Element, railsContext: RailsContext): void {
+  // 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) as Record<string, unknown>) : {};
+  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 {
+        reactHydrateOrRender(domNode, reactElementOrRouterResult as ReactElement, shouldHydrate);
+      }
+    }
+  } catch (e: unknown) {
+    const error = e as Error;
+    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.
+ */
+export function renderComponent(domId: string): void {
+  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);
+}
+
+/**
+ * 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.
+ */
+export function reactOnRailsComponentLoaded(domId: string): void {
+  renderComponent(domId);
+}

packages/react-on-rails/src/ComponentRegistry.ts

@@ -0,0 +1,74 @@
+import type { RegisteredComponent, ReactComponentOrRenderFunction } from './types/index.ts';
+import isRenderFunction from './isRenderFunction.ts';
+
+const registeredComponents = new Map<string, RegisteredComponent>();
+
+export default {
+  /**
+   * @param components { component1: component1, component2: component2, etc. }
+   */
+  register(components: Record<string, ReactComponentOrRenderFunction>): void {
+    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: string): RegisteredComponent {
+    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(): Map<string, RegisteredComponent> {
+    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: string): never {
+    throw new Error('getOrWaitForComponent requires react-on-rails-pro package');
+  },
+
+  /**
+   * Clear all registered components (for testing purposes)
+   * @private
+   */
+  clear(): void {
+    registeredComponents.clear();
+  },
+};