Clean up some TypeScript problems

node_package/src/Authenticity.ts

@@ -3,7 +3,7 @@ import type { AuthenticityHeaders } from './types/index';
 export default {
  authenticityToken(): string | null {
  const token = document.querySelector('meta[name="csrf-token"]');
- if (token && (token instanceof window.HTMLMetaElement)) {
+ if (token instanceof HTMLMetaElement) {
  return token.content;
  }
  return null;

node_package/src/ComponentRegistry.ts

@@ -1,7 +1,7 @@
 import type { RegisteredComponent, ReactComponentOrRenderFunction, RenderFunction } from './types/index';
 import isRenderFunction from './isRenderFunction';
 
-const registeredComponents = new Map();
+const registeredComponents = new Map<string, RegisteredComponent>();
 
 export default {
  /**
@@ -35,8 +35,9 @@ export default {
  * @returns { name, component, isRenderFunction, isRenderer }
  */
  get(name: string): RegisteredComponent {
- if (registeredComponents.has(name)) {
- return registeredComponents.get(name);
+ const registeredComponent = registeredComponents.get(name);
+ if (registeredComponent !== undefined) {
+ return registeredComponent;
  }
 
  const keys = Array.from(registeredComponents.keys()).join(', ');

node_package/src/StoreRegistry.ts

@@ -3,8 +3,8 @@ import type { StoreGenerator } from './types';
 /* eslint-disable @typescript-eslint/no-explicit-any */
 type Store = any;
 
-const registeredStoreGenerators = new Map();
-const hydratedStores = new Map();
+const registeredStoreGenerators = new Map<string, StoreGenerator>();
+const hydratedStores = new Map<string, Store>();
 
 export default {
  /**
@@ -66,8 +66,9 @@ This can happen if you are server rendering and either:
  * @returns storeCreator with given name
  */
  getStoreGenerator(name: string): StoreGenerator {
- if (registeredStoreGenerators.has(name)) {
- return registeredStoreGenerators.get(name);
+ const registeredStoreGenerator = registeredStoreGenerators.get(name);
+ if (registeredStoreGenerator) {
+ return registeredStoreGenerator;
  }
 
  const storeKeys = Array.from(registeredStoreGenerators.keys()).join(', ');

node_package/src/buildConsoleReplay.ts

@@ -1,8 +1,6 @@
 import RenderUtils from './RenderUtils';
 import scriptSanitizedVal from './scriptSanitizedVal';
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 declare global {
  interface Console {
  history?: {
@@ -13,24 +11,26 @@ declare global {
 
 export function consoleReplay(): string {
  // console.history is a global polyfill used in server rendering.
- // $FlowFixMe
  if (!(console.history instanceof Array)) {
  return '';
  }
 
  const lines = console.history.map(msg => {
  const stringifiedList = msg.arguments.map(arg => {
- let val;
+ let val: string | undefined;
  try {
- val = (typeof arg === 'string' || arg instanceof String) ? arg : JSON.stringify(arg);
+ // eslint-disable-next-line no-nested-ternary
+ val = typeof arg === 'string' ? arg :
+ arg instanceof String ? String(arg) :
+ JSON.stringify(arg);
  if (val === undefined) {
  val = 'undefined';
  }
- } catch (e: any) {
- val = `${e.message}: ${arg}`;
+ } catch (e) {
+ val = `${(e as Error).message}: ${arg}`;
  }
 
- return scriptSanitizedVal(val as string);
+ return scriptSanitizedVal(val);
  });
 
  return `console.${msg.level}.apply(console, ${JSON.stringify(stringifiedList)});`;

node_package/src/handleError.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import type { ErrorOptions } from './types/index';
 
-function handleRenderFunctionIssue(options: {e: Error; name?: string}): string {
+function handleRenderFunctionIssue(options: ErrorOptions): string {
  const { e, name } = options;
 
  let msg = '';

node_package/src/isRenderFunction.ts

@@ -8,11 +8,9 @@ import { ReactComponentOrRenderFunction, RenderFunction } from "./types/index";
  * @param component
  * @returns {boolean}
  */
-export default function isRenderFunction(component: ReactComponentOrRenderFunction): boolean {
+export default function isRenderFunction(component: ReactComponentOrRenderFunction): component is RenderFunction {
  // No for es5 or es6 React Component
- if (
- (component as RenderFunction).prototype &&
- (component as RenderFunction).prototype.isReactComponent) {
+ if ((component as RenderFunction).prototype?.isReactComponent) {
  return false;
  }
 
@@ -22,7 +20,7 @@ export default function isRenderFunction(component: ReactComponentOrRenderFuncti
 
  // If zero or one args, then we know that this is a regular function that will
  // return a React component
- if (component.length >= 2) {
+ if ((component as RenderFunction).length >= 2) {
  return true;
  }
 

node_package/src/serverRenderReactComponent.ts

@@ -3,11 +3,10 @@ import type { ReactElement } from 'react';
 
 import ComponentRegistry from './ComponentRegistry';
 import createReactOutput from './createReactOutput';
-import {isServerRenderHash, isPromise} from
- './isServerRenderResult';
+import { isPromise, isServerRenderHash } from './isServerRenderResult';
 import buildConsoleReplay from './buildConsoleReplay';
 import handleError from './handleError';
-import type { RenderParams, RenderResult, RenderingError } from './types/index';
+import type { RenderParams, RenderResult, RenderingError, ServerRenderResult } from './types';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
@@ -35,37 +34,37 @@ See https://github.com/shakacode/react_on_rails#renderer-functions`);
  });
 
  const processServerRenderHash = () => {
- // We let the client side handle any redirect
- // Set hasErrors in case we want to throw a Rails exception
- hasErrors = !!(reactRenderingResult as {routeError: Error}).routeError;
-
- if (hasErrors) {
- console.error(
- `React Router ERROR: ${JSON.stringify((reactRenderingResult as {routeError: Error}).routeError)}`,
- );
- }
+ // We let the client side handle any redirect
+ // Set hasErrors in case we want to throw a Rails exception
+ const { redirectLocation, routeError } = reactRenderingResult as ServerRenderResult;
+ hasErrors = !!routeError;
+
+ if (hasErrors) {
+ console.error(
+ `React Router ERROR: ${JSON.stringify(routeError)}`,
+ );
+ }
 
- if ((reactRenderingResult as {redirectLocation: {pathname: string; search: string}}).redirectLocation) {
- if (trace) {
- const { redirectLocation } = (reactRenderingResult as {redirectLocation: {pathname: string; search: string}});
- const redirectPath = redirectLocation.pathname + redirectLocation.search;
- console.log(`\
+ if (redirectLocation) {
+ if (trace) {
+ const redirectPath = redirectLocation.pathname + redirectLocation.search;
+ console.log(`\
  ROUTER REDIRECT: ${name} to dom node with id: ${domNodeId}, redirect to ${redirectPath}`,
- );
- }
- // For redirects on server rendering, we can't stop Rails from returning the same result.
- // Possibly, someday, we could have the rails server redirect.
- return '';
+ );
  }
- return (reactRenderingResult as { renderedHtml: string }).renderedHtml;
+ // For redirects on server rendering, we can't stop Rails from returning the same result.
+ // Possibly, someday, we could have the rails server redirect.
+ return '';
+ }
+ return (reactRenderingResult as ServerRenderResult).renderedHtml as string;
  };
 
  const processPromise = () => {
  if (!renderingReturnsPromises) {
- console.error('Your render function returned a Promise, which is only supported by a node renderer, not ExecJS.')
+ console.error('Your render function returned a Promise, which is only supported by a node renderer, not ExecJS.');
  }
  return reactRenderingResult;
- }
+ };
 
  const processReactElement = () => {
  try {
@@ -105,11 +104,11 @@ as a renderFunction and not a simple React Function Component.`);
  message: renderError.message,
  stack: renderError.stack,
  };
- }
+ };
 
- if(renderingReturnsPromises) {
+ if (renderingReturnsPromises) {
  const resolveRenderResult = async () => {
- let promiseResult;
+ let promiseResult: RenderResult;
 
  try {
  promiseResult = {
@@ -129,7 +128,7 @@ as a renderFunction and not a simple React Function Component.`);
  }),
  consoleReplayScript,
  hasErrors: true,
- }
+ };
  renderingError = e;
  }
 
@@ -143,11 +142,11 @@ as a renderFunction and not a simple React Function Component.`);
  return resolveRenderResult();
  }
 
- const result = {
- html: renderResult,
+ const result: RenderResult = {
+ html: renderResult as string,
  consoleReplayScript,
  hasErrors,
- } as RenderResult;
+ };
 
  if (renderingError) {
  addRenderingErrors(result, renderingError);

node_package/src/types/index.ts

@@ -46,7 +46,7 @@ interface RenderFunction {
  (props?: any, railsContext?: RailsContext, domNodeId?: string): RenderFunctionResult;
  // We allow specifying that the function is RenderFunction and not a React Function Component
  // by setting this property
- renderFunction?: boolean;
+ renderFunction?: true;
 }
 
 type ReactComponentOrRenderFunction = ReactComponent | RenderFunction;
@@ -87,22 +87,16 @@ export interface CreateParams extends Params {
  shouldHydrate?: boolean;
 }
 
-interface FileError extends Error {
- fileName: string;
- lineNumber: string;
-}
-
 export interface ErrorOptions {
- e: FileError;
+ // fileName and lineNumber are non-standard, but useful if present
+ // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/fileName
+ e: Error & { fileName?: string; lineNumber?: string };
  name?: string;
  jsCode?: string;
  serverSide: boolean;
 }
 
-export interface RenderingError {
- message: string;
- stack: string;
-}
+export type RenderingError = Pick<Error, 'message' | 'stack'>;
 
 export interface RenderResult {
  html: string | null;