WIP Fix typescript-eslint issues

Author: alexeyr

eslint.config.ts

@@ -134,25 +134,31 @@ const config = tsEslint.config([
   {
     files: ['**/*.ts', '**/*.tsx'],
 
-    extends: tsEslint.configs.recommended,
+    extends: tsEslint.configs.recommendedTypeChecked,
 
     languageOptions: {
       parserOptions: {
         projectService: {
           allowDefaultProject: ['eslint.config.ts', 'knip.ts'],
+          // Needed because `import * as ... from` instead of `import ... from` doesn't work in this file
+          // for some imports.
+          defaultProject: 'tsconfig.eslint.json',
         },
       },
     },
 
     rules: {
       '@typescript-eslint/no-namespace': 'off',
       '@typescript-eslint/no-shadow': 'error',
+      // Too many false positives
+      '@typescript-eslint/no-unnecessary-condition': 'off',
       '@typescript-eslint/no-unused-vars': [
         'error',
         {
           caughtErrorsIgnorePattern: '^_',
         },
       ],
+      '@typescript-eslint/restrict-template-expressions': 'off',
     },
   },
   // must be the last config in the array

node_package/src/ClientSideRenderer.ts

@@ -16,7 +16,7 @@ const REACT_ON_RAILS_STORE_ATTRIBUTE = 'data-js-react-on-rails-store';
 
 function delegateToRenderer(
   componentObj: RegisteredComponent,
-  props: Record<string, string>,
+  props: Record<string, unknown>,
   railsContext: RailsContext,
   domNodeId: string,
   trace: boolean,
@@ -81,7 +81,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) as Record<string, unknown>) : {};
     const trace = el.getAttribute('data-trace') === 'true';
 
     try {
@@ -183,15 +183,18 @@ 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) as Record<string, unknown>)
+        : {};
     this.hydratePromise = this.hydrate(context, railsContext, name, props);
   }
 
   private async hydrate(
     context: Context,
     railsContext: RailsContext,
     name: string,
-    props: Record<string, string>,
+    props: Record<string, unknown>,
   ) {
     const storeGenerator = await context.ReactOnRails.getOrWaitForStoreGenerator(name);
     if (this.state === 'unmounted') {

node_package/src/ComponentRegistry.ts

@@ -1,4 +1,4 @@
-import { type RegisteredComponent, type ReactComponentOrRenderFunction, type RenderFunction } from './types';
+import { type RegisteredComponent, type ReactComponentOrRenderFunction } from './types';
 import isRenderFunction from './isRenderFunction';
 import CallbackRegistry from './CallbackRegistry';
 
@@ -20,7 +20,7 @@ export default {
       }
 
       const renderFunction = isRenderFunction(component);
-      const isRenderer = renderFunction && (component as RenderFunction).length === 3;
+      const isRenderer = renderFunction && component.length === 3;
 
       componentRegistry.set(name, {
         name,

node_package/src/ReactOnRails.client.ts

@@ -25,13 +25,15 @@ if (ctx === undefined) {
 }
 
 if (ctx.ReactOnRails !== undefined) {
+  /* eslint-disable @typescript-eslint/no-base-to-string -- Window and Global both have useful toString() */
   throw new Error(`
     The ReactOnRails value exists in the ${ctx} scope, it may not be safe to overwrite it.
-    
+
     This could be caused by setting Webpack's optimization.runtimeChunk to "true" or "multiple," rather than "single." Check your Webpack configuration.
-    
+
     Read more at https://github.com/shakacode/react_on_rails/issues/1558.
   `);
+  /* eslint-enable @typescript-eslint/no-base-to-string */
 }
 
 const DEFAULT_OPTIONS = {

node_package/src/buildConsoleReplay.ts

@@ -37,6 +37,7 @@ export function consoleReplay(
           val = 'undefined';
         }
       } catch (e) {
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string -- if we here, JSON.stringify didn't work
         val = `${(e as Error).message}: ${arg}`;
       }
 

node_package/src/context.ts

@@ -53,7 +53,7 @@ export function getContextAndRailsContext(): { context: Context | null; railsCon
   }
 
   try {
-    currentRailsContext = JSON.parse(el.textContent);
+    currentRailsContext = JSON.parse(el.textContent) as RailsContext;
   } catch (e) {
     console.error('Error parsing Rails context:', e);
     return { context: null, railsContext: null };

node_package/src/isRenderFunction.ts

@@ -12,6 +12,7 @@ export default function isRenderFunction(
   component: ReactComponentOrRenderFunction,
 ): component is RenderFunction {
   // No for es5 or es6 React Component
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   if ((component as RenderFunction).prototype?.isReactComponent) {
     return false;
   }

node_package/src/loadReactClientManifest.ts

@@ -1,7 +1,8 @@
 import * as path from 'path';
 import * as fs from 'fs/promises';
 
-const loadedReactClientManifests = new Map<string, Record<string, unknown>>();
+type ClientManifest = Record<string, unknown>;
+const loadedReactClientManifests = new Map<string, ClientManifest>();
 
 export default async function loadReactClientManifest(reactClientManifestFileName: string) {
   // React client manifest is uploaded to node renderer as an asset.
@@ -11,7 +12,7 @@ export default async function loadReactClientManifest(reactClientManifestFileNam
   if (!loadedReactClientManifests.has(manifestPath)) {
     // TODO: convert to async
     try {
-      const manifest = JSON.parse(await fs.readFile(manifestPath, 'utf8'));
+      const manifest = JSON.parse(await fs.readFile(manifestPath, 'utf8')) as ClientManifest;
       loadedReactClientManifests.set(manifestPath, manifest);
     } catch (error) {
       throw new Error(`Failed to load React client manifest from ${manifestPath}: ${error}`);

node_package/src/reactHydrateOrRender.ts

@@ -7,19 +7,18 @@ type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => Ren
 
 // TODO: once React dependency is updated to >= 18, we can remove this and just
 // import ReactDOM from 'react-dom/client';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let reactDomClient: any;
+let reactDomClient: typeof import('react-dom/client');
 if (supportsRootApi) {
   // This will never throw an exception, but it's the way to tell Webpack the dependency is optional
   // https://github.com/webpack/webpack/issues/339#issuecomment-47739112
   // Unfortunately, it only converts the error to a warning.
   try {
     // eslint-disable-next-line global-require,@typescript-eslint/no-require-imports
-    reactDomClient = require('react-dom/client');
+    reactDomClient = require('react-dom/client') as typeof import('react-dom/client');
   } catch (_e) {
     // We should never get here, but if we do, we'll just use the default ReactDOM
     // and live with the warning.
-    reactDomClient = ReactDOM;
+    reactDomClient = ReactDOM as unknown as typeof import('react-dom/client');
   }
 }
 

node_package/src/streamServerRenderedReactComponent.ts

@@ -17,7 +17,7 @@ const stringToStream = (str: string): Readable => {
   return stream;
 };
 
-type BufferdEvent = {
+type BufferedEvent = {
   event: 'data' | 'error' | 'end';
   data: unknown;
 };
@@ -38,7 +38,7 @@ type BufferdEvent = {
  *   - emitError: A function to manually emit errors into the stream
  */
 const bufferStream = (stream: Readable) => {
-  const bufferedEvents: BufferdEvent[] = [];
+  const bufferedEvents: BufferedEvent[] = [];
   let startedReading = false;
 
   const listeners = (['data', 'error', 'end'] as const).map((event) => {
@@ -58,7 +58,7 @@ const bufferStream = (stream: Readable) => {
 
       // Remove initial listeners
       listeners.forEach(({ event, listener }) => stream.off(event, listener));
-      const handleEvent = ({ event, data }: BufferdEvent) => {
+      const handleEvent = ({ event, data }: BufferedEvent) => {
         if (event === 'data') {
           this.push(data);
         } else if (event === 'error') {
@@ -96,7 +96,8 @@ export const transformRenderStreamChunksToResultObject = (renderState: StreamRen
 
   const transformStream = new PassThrough({
     transform(chunk, _, callback) {
-      const htmlChunk = chunk.toString();
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+      const htmlChunk = chunk.toString() as string;
       const consoleReplayScript = buildConsoleReplay(consoleHistory, previouslyReplayedConsoleMessages);
       previouslyReplayedConsoleMessages = consoleHistory?.length || 0;