Format TypeScript

Author: alexeyr

.prettierrc

@@ -5,8 +5,8 @@ semi: true
 singleQuote: true
 trailingComma: all
 bracketSpacing: true
-jsxBracketSameLine: false
-parser: flow
+bracketSameLine: false
+parser: typescript
 
 overrides:
 - files: "*.@(css|scss)"

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    react_on_rails (14.2.0)
+    react_on_rails (15.0.0.alpha.2)
       addressable
       connection_pool
       execjs (~> 2.5)

knip.ts

@@ -15,9 +15,7 @@ const config: KnipConfig = {
       babel: {
         config: ['node_package/babel.config.js'],
       },
-      ignore: [
-        'node_package/tests/emptyForTesting.js',
-      ],
+      ignore: ['node_package/tests/emptyForTesting.js'],
       ignoreBinaries: [
         // Knip fails to detect it's declared in devDependencies
         'nps',

node_package/src/Authenticity.ts

@@ -9,7 +9,7 @@ export default {
     return null;
   },
 
-  authenticityHeaders(otherHeaders: {[id: string]: string} = {}): AuthenticityHeaders {
+  authenticityHeaders(otherHeaders: { [id: string]: string } = {}): AuthenticityHeaders {
     return Object.assign(otherHeaders, {
       'X-CSRF-Token': this.authenticityToken(),
       'X-Requested-With': 'XMLHttpRequest',

node_package/src/CallbackRegistry.ts

@@ -1,6 +1,6 @@
-import { ItemRegistrationCallback } from "./types";
-import { onPageLoaded, onPageUnloaded } from "./pageLifecycle";
-import { getContextAndRailsContext } from "./context";
+import { ItemRegistrationCallback } from './types';
+import { onPageLoaded, onPageUnloaded } from './pageLifecycle';
+import { getContextAndRailsContext } from './context';
 
 /**
  * Represents information about a registered item including its value,
@@ -36,7 +36,9 @@ export default class CallbackRegistry<T> {
         waitingPromiseInfo.reject(this.createNotFoundError(itemName));
       });
       this.notUsedItems.forEach((itemName) => {
-        console.warn(`Warning: ${this.registryType} '${itemName}' was registered but never used. This may indicate unused code that can be removed.`);
+        console.warn(
+          `Warning: ${this.registryType} '${itemName}' was registered but never used. This may indicate unused code that can be removed.`,
+        );
       });
     };
 
@@ -94,7 +96,7 @@ export default class CallbackRegistry<T> {
     this.initializeTimeoutEvents();
     try {
       return this.get(name);
-    } catch(error) {
+    } catch (error) {
       if (this.timedout) {
         throw error;
       }
@@ -119,8 +121,8 @@ export default class CallbackRegistry<T> {
     const keys = Array.from(this.registeredItems.keys()).join(', ');
     return new Error(
       `Could not find ${this.registryType} registered with name ${itemName}. ` +
-      `Registered ${this.registryType} names include [ ${keys} ]. ` +
-      `Maybe you forgot to register the ${this.registryType}?`
+        `Registered ${this.registryType} names include [ ${keys} ]. ` +
+        `Maybe you forgot to register the ${this.registryType}?`,
     );
   }
 }

node_package/src/ClientSideRenderer.ts

@@ -1,11 +1,6 @@
 import * as ReactDOM from 'react-dom';
 import type { ReactElement } from 'react';
-import type {
-  RailsContext,
-  RegisteredComponent,
-  RenderFunction,
-  Root,
-} from './types';
+import type { RailsContext, RegisteredComponent, RenderFunction, Root } from './types';
 
 import { getContextAndRailsContext, resetContextAndRailsContext, type Context } from './context';
 import createReactOutput from './createReactOutput';
@@ -27,9 +22,12 @@ function delegateToRenderer(
 
   if (isRenderer) {
     if (trace) {
-      console.log(`\
+      console.log(
+        `\
 DELEGATING TO RENDERER ${name} for dom node with id: ${domNodeId} with props, railsContext:`,
-        props, railsContext);
+        props,
+        railsContext,
+      );
     }
 
     (component as RenderFunction)(props, railsContext, domNodeId);
@@ -39,7 +37,8 @@ DELEGATING TO RENDERER ${name} for dom node with id: ${domNodeId} with props, ra
   return false;
 }
 
-const getDomId = (domIdOrElement: string | Element): string => typeof domIdOrElement === 'string' ? domIdOrElement : domIdOrElement.getAttribute('data-dom-id') || '';
+const getDomId = (domIdOrElement: string | Element): string =>
+  typeof domIdOrElement === 'string' ? domIdOrElement : domIdOrElement.getAttribute('data-dom-id') || '';
 class ComponentRenderer {
   private domNodeId: string;
   private state: 'unmounted' | 'rendering' | 'rendered';
@@ -50,22 +49,23 @@ class ComponentRenderer {
     const domId = getDomId(domIdOrElement);
     this.domNodeId = domId;
     this.state = 'rendering';
-    const el = typeof domIdOrElement === 'string' ? document.querySelector(`[data-dom-id=${domId}]`) : domIdOrElement;
+    const el =
+      typeof domIdOrElement === 'string' ? document.querySelector(`[data-dom-id=${domId}]`) : domIdOrElement;
     if (!el) return;
 
     const storeDependencies = el.getAttribute('data-store-dependencies');
-    const storeDependenciesArray = storeDependencies ? JSON.parse(storeDependencies) as string[] : [];
+    const storeDependenciesArray = storeDependencies ? (JSON.parse(storeDependencies) as string[]) : [];
 
     const { context, railsContext } = getContextAndRailsContext();
     if (!context || !railsContext) return;
 
     // Wait for all store dependencies to be loaded
     this.renderPromise = Promise.all(
-      storeDependenciesArray.map(storeName => context.ReactOnRails.getOrWaitForStore(storeName)),
+      storeDependenciesArray.map((storeName) => context.ReactOnRails.getOrWaitForStore(storeName)),
     ).then(() => {
-        if (this.state === 'unmounted') return Promise.resolve();
-        return this.render(el, context, railsContext);
-      });
+      if (this.state === 'unmounted') return Promise.resolve();
+      return this.render(el, context, railsContext);
+    });
   }
 
   /**
@@ -76,7 +76,7 @@ class ComponentRenderer {
     // This must match lib/react_on_rails/helper.rb
     const name = el.getAttribute('data-component-name') || '';
     const { domNodeId } = this;
-    const props = (el.textContent !== null) ? JSON.parse(el.textContent) : {};
+    const props = el.textContent !== null ? JSON.parse(el.textContent) : {};
     const trace = el.getAttribute('data-trace') === 'true';
 
     try {
@@ -109,7 +109,11 @@ class ComponentRenderer {
   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 rootOrElement = reactHydrateOrRender(domNode, reactElementOrRouterResult as ReactElement, shouldHydrate);
+          const rootOrElement = reactHydrateOrRender(
+            domNode,
+            reactElementOrRouterResult as ReactElement,
+            shouldHydrate,
+          );
           this.state = 'rendered';
           if (supportsRootApi) {
             this.root = rootOrElement as Root;
@@ -119,7 +123,7 @@ class ComponentRenderer {
     } catch (e: unknown) {
       const error = e instanceof Error ? e : new Error(e?.toString() ?? 'Unknown error');
       console.error(error.message);
-      error.message = `ReactOnRails encountered an error while rendering component: ${name}. See above error message.`
+      error.message = `ReactOnRails encountered an error while rendering component: ${name}. See above error message.`;
       throw error;
     }
   }
@@ -144,8 +148,11 @@ class ComponentRenderer {
         ReactDOM.unmountComponentAtNode(domNode);
       } catch (e: unknown) {
         const error = e instanceof Error ? e : new Error('Unknown error');
-        console.info(`Caught error calling unmountComponentAtNode: ${error.message} for domNode`,
-          domNode, error);
+        console.info(
+          `Caught error calling unmountComponentAtNode: ${error.message} for domNode`,
+          domNode,
+          error,
+        );
       }
     }
   }
@@ -170,11 +177,16 @@ class StoreRenderer {
     }
 
     const name = storeDataElement.getAttribute(REACT_ON_RAILS_STORE_ATTRIBUTE) || '';
-    const props = (storeDataElement.textContent !== null) ? JSON.parse(storeDataElement.textContent) : {};
+    const props = storeDataElement.textContent !== null ? JSON.parse(storeDataElement.textContent) : {};
     this.hydratePromise = this.hydrate(context, railsContext, name, props);
   }
 
-  private async hydrate(context: Context, railsContext: RailsContext, name: string, props: Record<string, string>) {
+  private async hydrate(
+    context: Context,
+    railsContext: RailsContext,
+    name: string,
+    props: Record<string, string>,
+  ) {
     const storeGenerator = await context.ReactOnRails.getOrWaitForStoreGenerator(name);
     if (this.state === 'unmounted') {
       return;
@@ -229,10 +241,16 @@ function unmountAllComponents(): void {
 const storeRenderers = new Map<string, StoreRenderer>();
 
 export async function hydrateStore(storeNameOrElement: string | Element) {
-  const storeName = typeof storeNameOrElement === 'string' ? storeNameOrElement : storeNameOrElement.getAttribute(REACT_ON_RAILS_STORE_ATTRIBUTE) || '';
+  const storeName =
+    typeof storeNameOrElement === 'string'
+      ? storeNameOrElement
+      : storeNameOrElement.getAttribute(REACT_ON_RAILS_STORE_ATTRIBUTE) || '';
   let storeRenderer = storeRenderers.get(storeName);
   if (!storeRenderer) {
-    const storeDataElement = typeof storeNameOrElement === 'string' ? document.querySelector(`[${REACT_ON_RAILS_STORE_ATTRIBUTE}="${storeNameOrElement}"]`) : storeNameOrElement;
+    const storeDataElement =
+      typeof storeNameOrElement === 'string'
+        ? document.querySelector(`[${REACT_ON_RAILS_STORE_ATTRIBUTE}="${storeNameOrElement}"]`)
+        : storeNameOrElement;
     if (!storeDataElement) {
       return;
     }

node_package/src/ComponentRegistry.ts

@@ -1,8 +1,4 @@
-import {
-  type RegisteredComponent,
-  type ReactComponentOrRenderFunction,
-  type RenderFunction,
-} from './types';
+import { type RegisteredComponent, type ReactComponentOrRenderFunction, type RenderFunction } from './types';
 import isRenderFunction from './isRenderFunction';
 import CallbackRegistry from './CallbackRegistry';
 
@@ -13,7 +9,7 @@ export default {
    * @param components { component1: component1, component2: component2, etc. }
    */
   register(components: { [id: string]: ReactComponentOrRenderFunction }): void {
-    Object.keys(components).forEach(name => {
+    Object.keys(components).forEach((name) => {
       if (componentRegistry.has(name)) {
         console.warn('Called register for component that is already registered', name);
       }

node_package/src/RSCClientRoot.ts

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import * as React from 'react';
 import * as ReactDOMClient from 'react-dom/client';
@@ -17,7 +17,7 @@ export type RSCClientRootProps = {
   componentName: string;
   rscPayloadGenerationUrlPath: string;
   componentProps?: unknown;
-}
+};
 
 const createFromFetch = async (fetchPromise: Promise<Response>) => {
   const response = await fetchPromise;
@@ -27,13 +27,13 @@ const createFromFetch = async (fetchPromise: Promise<Response>) => {
   }
   const transformedStream = transformRSCStreamAndReplayConsoleLogs(stream);
   return createFromReadableStream<React.ReactNode>(transformedStream);
-}
+};
 
 const fetchRSC = ({ componentName, rscPayloadGenerationUrlPath, componentProps }: RSCClientRootProps) => {
   const propsString = JSON.stringify(componentProps);
   const strippedUrlPath = rscPayloadGenerationUrlPath.replace(/^\/|\/$/g, '');
   return createFromFetch(fetch(`/${strippedUrlPath}/${componentName}?props=${propsString}`));
-}
+};
 
 /**
  * RSCClientRoot is a React component that handles client-side rendering of React Server Components (RSC).
@@ -48,12 +48,12 @@ const fetchRSC = ({ componentName, rscPayloadGenerationUrlPath, componentProps }
  * @requires React 19+
  * @requires react-on-rails-rsc
  */
-const RSCClientRoot: RenderFunction = async ({
-  componentName,
-  rscPayloadGenerationUrlPath,
-  componentProps,
-}: RSCClientRootProps, _railsContext?: RailsContext, domNodeId?: string) => {
-  const root = await fetchRSC({ componentName, rscPayloadGenerationUrlPath, componentProps })
+const RSCClientRoot: RenderFunction = async (
+  { componentName, rscPayloadGenerationUrlPath, componentProps }: RSCClientRootProps,
+  _railsContext?: RailsContext,
+  domNodeId?: string,
+) => {
+  const root = await fetchRSC({ componentName, rscPayloadGenerationUrlPath, componentProps });
   if (!domNodeId) {
     throw new Error('RSCClientRoot: No domNodeId provided');
   }
@@ -70,6 +70,6 @@ const RSCClientRoot: RenderFunction = async ({
   // However, the returned value of renderFunction is not used in ReactOnRails
   // TODO: fix this behavior
   return '';
-}
+};
 
 export default RSCClientRoot;

node_package/src/ReactOnRails.client.ts

@@ -62,8 +62,10 @@ ctx.ReactOnRails = {
    */
   registerStoreGenerators(storeGenerators: { [id: string]: StoreGenerator }): void {
     if (!storeGenerators) {
-      throw new Error('Called ReactOnRails.registerStoreGenerators with a null or undefined, rather than ' +
-        'an Object with keys being the store names and the values are the store generators.');
+      throw new Error(
+        'Called ReactOnRails.registerStoreGenerators with a null or undefined, rather than ' +
+          'an Object with keys being the store names and the values are the store generators.',
+      );
     }
 
     StoreRegistry.register(storeGenerators);
@@ -117,7 +119,7 @@ ctx.ReactOnRails = {
    * `traceTurbolinks: true|false Gives you debugging messages on Turbolinks events
    * `turbo: true|false Turbo (the follower of Turbolinks) events will be registered, if set to true.
    */
-  setOptions(newOptions: {traceTurbolinks?: boolean, turbo?: boolean }): void {
+  setOptions(newOptions: { traceTurbolinks?: boolean; turbo?: boolean }): void {
     if (typeof newOptions.traceTurbolinks !== 'undefined') {
       this.options.traceTurbolinks = newOptions.traceTurbolinks;
 
@@ -133,9 +135,7 @@ ctx.ReactOnRails = {
     }
 
     if (Object.keys(newOptions).length > 0) {
-      throw new Error(
-        `Invalid options passed to ReactOnRails.options: ${JSON.stringify(newOptions)}`,
-      );
+      throw new Error(`Invalid options passed to ReactOnRails.options: ${JSON.stringify(newOptions)}`);
     }
   },
 
@@ -245,7 +245,11 @@ ctx.ReactOnRails = {
     const componentObj = ComponentRegistry.get(name);
     const reactElement = createReactOutput({ componentObj, props, domNodeId });
 
-    return reactHydrateOrRender(document.getElementById(domNodeId) as Element, reactElement as ReactElement, hydrate);
+    return reactHydrateOrRender(
+      document.getElementById(domNodeId) as Element,
+      reactElement as ReactElement,
+      hydrate,
+    );
   },
 
   /**
@@ -271,15 +275,19 @@ ctx.ReactOnRails = {
    * @param options
    */
   serverRenderReactComponent(): null | string | Promise<RenderResult> {
-    throw new Error('serverRenderReactComponent is not available in "react-on-rails/client". Import "react-on-rails" server-side.');
+    throw new Error(
+      'serverRenderReactComponent is not available in "react-on-rails/client". Import "react-on-rails" server-side.',
+    );
   },
 
   /**
    * Used by server rendering by Rails
    * @param options
    */
   streamServerRenderedReactComponent() {
-    throw new Error('streamServerRenderedReactComponent is only supported when using a bundle built for Node.js environments');
+    throw new Error(
+      'streamServerRenderedReactComponent is only supported when using a bundle built for Node.js environments',
+    );
   },
 
   /**
@@ -294,7 +302,9 @@ ctx.ReactOnRails = {
    * @param options
    */
   handleError(): string | undefined {
-    throw new Error('handleError is not available in "react-on-rails/client". Import "react-on-rails" server-side.');
+    throw new Error(
+      'handleError is not available in "react-on-rails/client". Import "react-on-rails" server-side.',
+    );
   },
 
   /**
@@ -337,5 +347,5 @@ ctx.ReactOnRails.resetOptions();
 
 ClientStartup.clientStartup(ctx);
 
-export * from "./types";
+export * from './types';
 export default ctx.ReactOnRails;