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)"

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/ComponentRegistry.ts

@@ -8,7 +8,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 (registeredComponents.has(name)) {
         console.warn('Called register for component that is already registered', name);
       }

node_package/src/ReactOnRails.ts

@@ -66,8 +66,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);
@@ -103,7 +105,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;
 
@@ -119,9 +121,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)}`);
     }
   },
 
@@ -227,7 +227,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,
+    );
   },
 
   /**
@@ -252,7 +256,9 @@ ctx.ReactOnRails = {
    * @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',
+    );
   },
 
   /**
@@ -303,5 +309,5 @@ ctx.ReactOnRails.resetOptions();
 
 ClientStartup.clientStartup(ctx);
 
-export * from "./types";
+export * from './types';
 export default ctx.ReactOnRails;

node_package/src/StoreRegistry.ts

@@ -9,15 +9,17 @@ export default {
    * @param storeGenerators { name1: storeGenerator1, name2: storeGenerator2 }
    */
   register(storeGenerators: { [id: string]: StoreGenerator }): void {
-    Object.keys(storeGenerators).forEach(name => {
+    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}.`);
+        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);
@@ -39,8 +41,7 @@ export default {
     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}.
+      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.
@@ -50,8 +51,10 @@ This can happen if you are server rendering and either:
 
     if (throwIfMissing) {
       console.log('storeKeys', storeKeys);
-      throw new Error(`Could not find hydrated store with name '${name}'. ` +
-        `Hydrated store names include [${storeKeys}].`);
+      throw new Error(
+        `Could not find hydrated store with name '${name}'. ` +
+          `Hydrated store names include [${storeKeys}].`,
+      );
     }
 
     return undefined;
@@ -69,8 +72,10 @@ This can happen if you are server rendering and either:
     }
 
     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?`);
+    throw new Error(
+      `Could not find store registered with name '${name}'. Registered store ` +
+        `names include [ ${storeKeys} ]. Maybe you forgot to register the store?`,
+    );
   },
 
   /**

node_package/src/buildConsoleReplay.ts

@@ -4,22 +4,28 @@ import scriptSanitizedVal from './scriptSanitizedVal';
 declare global {
   interface Console {
     history?: {
-      arguments: Array<string | Record<string, string>>; level: "error" | "log" | "debug";
+      arguments: Array<string | Record<string, string>>;
+      level: 'error' | 'log' | 'debug';
     }[];
   }
 }
 
 /** @internal Exported only for tests */
-export function consoleReplay(customConsoleHistory: typeof console['history'] | undefined = undefined, numberOfMessagesToSkip: number = 0): string {
+// Mismatch between Prettier locally and in CI
+// prettier-ignore
+export function consoleReplay(
+  customConsoleHistory: typeof console['history'] | undefined = undefined,
+  numberOfMessagesToSkip: number = 0,
+): string {
   // console.history is a global polyfill used in server rendering.
   const consoleHistory = customConsoleHistory ?? console.history;
 
-  if (!(Array.isArray(consoleHistory))) {
+  if (!Array.isArray(consoleHistory)) {
     return '';
   }
 
-  const lines = consoleHistory.slice(numberOfMessagesToSkip).map(msg => {
-    const stringifiedList = msg.arguments.map(arg => {
+  const lines = consoleHistory.slice(numberOfMessagesToSkip).map((msg) => {
+    const stringifiedList = msg.arguments.map((arg) => {
       let val: string;
       try {
         if (typeof arg === 'string') {
@@ -45,6 +51,13 @@ export function consoleReplay(customConsoleHistory: typeof console['history'] |
   return lines.join('\n');
 }
 
-export default function buildConsoleReplay(customConsoleHistory: typeof console['history'] | undefined = undefined, numberOfMessagesToSkip: number = 0): string {
-  return RenderUtils.wrapInScriptTags('consoleReplayLog', consoleReplay(customConsoleHistory, numberOfMessagesToSkip));
+// prettier-ignore
+export default function buildConsoleReplay(
+  customConsoleHistory: typeof console['history'] | undefined = undefined,
+  numberOfMessagesToSkip: number = 0,
+): string {
+  return RenderUtils.wrapInScriptTags(
+    'consoleReplayLog',
+    consoleReplay(customConsoleHistory, numberOfMessagesToSkip),
+  );
 }

node_package/src/clientStartup.ts

@@ -65,7 +65,7 @@ function debugTurbolinks(...msg: string[]): void {
 }
 
 function turbolinksInstalled(): boolean {
-  return (typeof Turbolinks !== 'undefined');
+  return typeof Turbolinks !== 'undefined';
 }
 
 function turboInstalled() {
@@ -82,7 +82,7 @@ function reactOnRailsHtmlElements(): HTMLCollectionOf<Element> {
 
 function initializeStore(el: Element, context: Context, railsContext: RailsContext): void {
   const name = el.getAttribute(REACT_ON_RAILS_STORE_ATTRIBUTE) || '';
-  const props = (el.textContent !== null) ? JSON.parse(el.textContent) : {};
+  const props = el.textContent !== null ? JSON.parse(el.textContent) : {};
   const storeGenerator = context.ReactOnRails.getStoreGenerator(name);
   const store = storeGenerator(props, railsContext);
   context.ReactOnRails.setStore(name, store);
@@ -96,7 +96,7 @@ function forEachStore(context: Context, railsContext: RailsContext): void {
 }
 
 function turbolinksVersion5(): boolean {
-  return (typeof Turbolinks.controller !== 'undefined');
+  return typeof Turbolinks.controller !== 'undefined';
 }
 
 function turbolinksSupported(): boolean {
@@ -114,9 +114,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);
@@ -138,7 +141,7 @@ function render(el: Element, context: Context, 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) : {};
+  const props = el.textContent !== null ? JSON.parse(el.textContent) : {};
   const trace = el.getAttribute('data-trace') === 'true';
 
   try {
@@ -167,15 +170,19 @@ function render(el: Element, context: Context, railsContext: RailsContext): void
 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,
+        );
         if (supportsRootApi) {
           context.roots.push(rootOrElement as Root);
         }
       }
     }
   } catch (e: any) {
     console.error(e.message);
-    e.message = `ReactOnRails encountered an error while rendering component: ${name}. See above error message.`
+    e.message = `ReactOnRails encountered an error while rendering component: ${name}. See above error message.`;
     throw e;
   }
 }
@@ -196,7 +203,7 @@ function parseRailsContext(): RailsContext | null {
   }
 
   if (!el.textContent) {
-    throw new Error('The HTML element with ID \'js-react-on-rails-context\' has no textContent');
+    throw new Error("The HTML element with ID 'js-react-on-rails-context' has no textContent");
   }
 
   return JSON.parse(el.textContent);
@@ -246,8 +253,7 @@ function unmount(el: Element): void {
   try {
     ReactDOM.unmountComponentAtNode(domNode);
   } catch (e: any) {
-    console.info(`Caught error calling unmountComponentAtNode: ${e.message} for domNode`,
-      domNode, e);
+    console.info(`Caught error calling unmountComponentAtNode: ${e.message} for domNode`, domNode, e);
   }
 }
 
@@ -281,23 +287,19 @@ function renderInit(): void {
   }
 
   if (turboInstalled()) {
-    debugTurbolinks(
-      'USING TURBO: document added event listeners ' +
-      'turbo:before-render and turbo:render.');
+    debugTurbolinks('USING TURBO: document added event listeners turbo:before-render and turbo:render.');
     document.addEventListener('turbo:before-render', reactOnRailsPageUnloaded);
     document.addEventListener('turbo:render', reactOnRailsPageLoaded);
     reactOnRailsPageLoaded();
   } else if (turbolinksVersion5()) {
     debugTurbolinks(
-      'USING TURBOLINKS 5: document added event listeners ' +
-      'turbolinks:before-render and turbolinks:render.');
+      'USING TURBOLINKS 5: document added event listeners turbolinks:before-render and turbolinks:render.',
+    );
     document.addEventListener('turbolinks:before-render', reactOnRailsPageUnloaded);
     document.addEventListener('turbolinks:render', reactOnRailsPageLoaded);
     reactOnRailsPageLoaded();
   } else {
-    debugTurbolinks(
-      'USING TURBOLINKS 2: document added event listeners page:before-unload and ' +
-      'page:change.');
+    debugTurbolinks('USING TURBOLINKS 2: document added event listeners page:before-unload and page:change.');
     document.addEventListener('page:before-unload', reactOnRailsPageUnloaded);
     document.addEventListener('page:change', reactOnRailsPageLoaded);
   }
@@ -308,12 +310,12 @@ function isWindow(context: Context): context is Window {
 }
 
 function onPageReady(callback: () => void) {
-  if (document.readyState === "complete") {
+  if (document.readyState === 'complete') {
     callback();
   } else {
-    document.addEventListener("readystatechange", function onReadyStateChange() {
-        onPageReady(callback);
-        document.removeEventListener("readystatechange", onReadyStateChange);
+    document.addEventListener('readystatechange', function onReadyStateChange() {
+      onPageReady(callback);
+      document.removeEventListener('readystatechange', onReadyStateChange);
     });
   }
 }

node_package/src/context.ts

@@ -4,7 +4,5 @@ export type Context = Window | typeof globalThis;
  * Get the context, be it window or global
  */
 export default function context(this: void): Context | void {
-  return ((typeof window !== 'undefined') && window) ||
-    ((typeof global !== 'undefined') && global) ||
-    this;
+  return (typeof window !== 'undefined' && window) || (typeof global !== 'undefined' && global) || this;
 }