Fix issues

alexeyr · alexeyr · commit 5b7af03b6330 · 2025-03-16T10:14:37.000Z
diff --git a/node_package/src/CallbackRegistry.ts b/node_package/src/CallbackRegistry.ts
@@ -14,11 +14,15 @@ type WaitingPromiseInfo<T> = {
 
 export default class CallbackRegistry<T> {
   private readonly registryType: string;
+
   private registeredItems = new Map<string, T>();
+
   private waitingPromises = new Map<string, WaitingPromiseInfo<T>>();
+
   private notUsedItems = new Set<string>();
 
   private timeoutEventsInitialized = false;
+
   private timedout = false;
 
   constructor(registryType: string) {
diff --git a/node_package/src/ClientSideRenderer.ts b/node_package/src/ClientSideRenderer.ts
@@ -1,3 +1,6 @@
+/* eslint-disable max-classes-per-file */
+/* eslint-disable react/no-deprecated -- while we need to support React 16 */
+
 import * as ReactDOM from 'react-dom';
 import type { ReactElement } from 'react';
 import type { RailsContext, RegisteredComponent, RenderFunction, Root } from './types';
@@ -40,8 +43,11 @@ 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';
+
   private root?: Root;
+
   private renderPromise?: Promise<void>;
 
   constructor(domIdOrElement: string | Element) {
@@ -166,6 +172,7 @@ You should return a React.Component always for the client side entry point.`);
 
 class StoreRenderer {
   private hydratePromise?: Promise<void>;
+
   private state: 'unmounted' | 'hydrating' | 'hydrated';
 
   constructor(storeDataElement: Element) {
diff --git a/node_package/src/ReactOnRails.node.ts b/node_package/src/ReactOnRails.node.ts
@@ -4,4 +4,5 @@ import streamServerRenderedReactComponent from './streamServerRenderedReactCompo
 ReactOnRails.streamServerRenderedReactComponent = streamServerRenderedReactComponent;
 
 export * from './ReactOnRails.full';
+// eslint-disable-next-line no-restricted-exports -- see https://github.com/eslint/eslint/issues/15617
 export { default } from './ReactOnRails.full';
diff --git a/node_package/src/reactHydrateOrRender.ts b/node_package/src/reactHydrateOrRender.ts
@@ -14,15 +14,16 @@ if (supportsRootApi) {
   // 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
+    // eslint-disable-next-line global-require,@typescript-eslint/no-require-imports
     reactDomClient = require('react-dom/client');
-  } catch (e) {
+  } 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;
   }
 }
 
+/* eslint-disable react/no-deprecated -- while we need to support React 16 */
 const reactHydrate: HydrateOrRenderType = supportsRootApi
   ? reactDomClient.hydrateRoot
   : (domNode, reactElement) => ReactDOM.hydrate(reactElement, domNode);
@@ -37,6 +38,7 @@ function reactRender(domNode: Element, reactElement: ReactElement): RenderReturn
   // eslint-disable-next-line react/no-render-return-value
   return ReactDOM.render(reactElement, domNode);
 }
+/* eslint-enable react/no-deprecated */
 
 export default function reactHydrateOrRender(
   domNode: Element,
diff --git a/node_package/tests/ReactOnRails.test.jsx b/node_package/tests/ReactOnRails.test.jsx
@@ -1,6 +1,5 @@
 /* eslint-disable react/prefer-es6-class */
 /* eslint-disable react/prefer-stateless-function */
-/* eslint-disable react/jsx-filename-extension */
 
 import { createStore } from 'redux';
 import * as React from 'react';
diff --git a/node_package/tests/renderFunction.test.jsx b/node_package/tests/renderFunction.test.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/prefer-es6-class */
 /* eslint-disable react/prefer-stateless-function */
-/* eslint-disable react/jsx-filename-extension */
+/* eslint-disable max-classes-per-file */
 
 import * as React from 'react';
 import * as createReactClass from 'create-react-class';
diff --git a/node_package/tests/streamServerRenderedReactComponent.test.jsx b/node_package/tests/streamServerRenderedReactComponent.test.jsx
@@ -8,13 +8,19 @@ import streamServerRenderedReactComponent from '../src/streamServerRenderedReact
 import ComponentRegistry from '../src/ComponentRegistry';
 
 const AsyncContent = async ({ throwAsyncError }) => {
-  await new Promise((resolve) => setTimeout(resolve, 0));
+  await new Promise((resolve) => {
+    setTimeout(resolve, 0);
+  });
   if (throwAsyncError) {
     throw new Error('Async Error');
   }
   return <div>Async Content</div>;
 };
 
+AsyncContent.propTypes = {
+  throwAsyncError: PropTypes.bool,
+};
+
 const TestComponentForStreaming = ({ throwSyncError, throwAsyncError }) => {
   if (throwSyncError) {
     throw new Error('Sync Error');
@@ -75,7 +81,9 @@ describe('streamServerRenderedReactComponent', () => {
 
   it('streamServerRenderedReactComponent streams the rendered component', async () => {
     const { renderResult, chunks } = setupStreamTest();
-    await new Promise((resolve) => renderResult.on('end', resolve));
+    await new Promise((resolve) => {
+      renderResult.on('end', resolve);
+    });
 
     expect(chunks).toHaveLength(2);
     expect(chunks[0].html).toContain('Header In The Shell');
@@ -92,7 +100,9 @@ describe('streamServerRenderedReactComponent', () => {
     const { renderResult, chunks } = setupStreamTest({ throwSyncError: true, throwJsErrors: true });
     const onError = jest.fn();
     renderResult.on('error', onError);
-    await new Promise((resolve) => renderResult.on('end', resolve));
+    await new Promise((resolve) => {
+      renderResult.on('end', resolve);
+    });
 
     expect(onError).toHaveBeenCalled();
     expect(chunks).toHaveLength(1);
@@ -106,7 +116,9 @@ describe('streamServerRenderedReactComponent', () => {
     const { renderResult, chunks } = setupStreamTest({ throwSyncError: true, throwJsErrors: false });
     const onError = jest.fn();
     renderResult.on('error', onError);
-    await new Promise((resolve) => renderResult.on('end', resolve));
+    await new Promise((resolve) => {
+      renderResult.on('end', resolve);
+    });
 
     expect(onError).not.toHaveBeenCalled();
     expect(chunks).toHaveLength(1);
@@ -120,7 +132,9 @@ describe('streamServerRenderedReactComponent', () => {
     const { renderResult, chunks } = setupStreamTest({ throwAsyncError: true, throwJsErrors: true });
     const onError = jest.fn();
     renderResult.on('error', onError);
-    await new Promise((resolve) => renderResult.on('end', resolve));
+    await new Promise((resolve) => {
+      renderResult.on('end', resolve);
+    });
 
     expect(onError).toHaveBeenCalled();
     expect(chunks).toHaveLength(2);
@@ -139,7 +153,9 @@ describe('streamServerRenderedReactComponent', () => {
     const { renderResult, chunks } = setupStreamTest({ throwAsyncError: true, throwJsErrors: false });
     const onError = jest.fn();
     renderResult.on('error', onError);
-    await new Promise((resolve) => renderResult.on('end', resolve));
+    await new Promise((resolve) => {
+      renderResult.on('end', resolve);
+    });
 
     expect(onError).not.toHaveBeenCalled();
     expect(chunks).toHaveLength(2);
diff --git a/spec/dummy/client/app/components/HelloWorldRedux.jsx b/spec/dummy/client/app/components/HelloWorldRedux.jsx
@@ -17,15 +17,16 @@ export default class HelloWorldRedux extends React.Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  setNameDomRef(nameDomNode) {
-    this.nameDomRef = nameDomNode;
-  }
-
   handleChange() {
     const name = this.nameDomRef.value;
+    // eslint-disable-next-line react/destructuring-assignment
     this.props.actions.updateName(name);
   }
 
+  setNameDomRef(nameDomNode) {
+    this.nameDomRef = nameDomNode;
+  }
+
   render() {
     const { data, railsContext } = this.props;
     const { name } = data;
diff --git a/spec/dummy/client/app/components/RailsContext.jsx b/spec/dummy/client/app/components/RailsContext.jsx
@@ -23,7 +23,7 @@ function renderContextRows(railsContext) {
   );
 }
 
-const RailsContext = (props) => (
+const RailsContext = ({ railsContext }) => (
   <table>
     <thead>
       <tr>
@@ -35,7 +35,7 @@ const RailsContext = (props) => (
         </th>
       </tr>
     </thead>
-    <tbody>{renderContextRows(props.railsContext)}</tbody>
+    <tbody>{renderContextRows(railsContext)}</tbody>
   </table>
 );
 
diff --git a/spec/dummy/client/app/reducers/HelloWorldReducer.jsx b/spec/dummy/client/app/reducers/HelloWorldReducer.jsx
@@ -8,7 +8,7 @@ const initialState = {
 // Why name function the same as the reducer?
 // https://github.com/gaearon/redux/issues/428#issuecomment-129223274
 // Naming the function will help with debugging!
-export default function helloWorldReducer(state = initialState, action) {
+export default function helloWorldReducer(state = initialState, action = undefined) {
   const { type, name } = action;
   switch (type) {
     case actionTypes.HELLO_WORLD_NAME_UPDATE:
diff --git a/spec/dummy/client/app/reducers/nullReducer.jsx b/spec/dummy/client/app/reducers/nullReducer.jsx
@@ -4,7 +4,6 @@ const initialState = {};
 // Why name function the same as the reducer?
 // https://github.com/gaearon/redux/issues/428#issuecomment-129223274
 // Naming the function will help with debugging!
-/* eslint-disable no-unused-vars */
-export default function railsContextReducer(state = initialState, action) {
+export default function railsContextReducer(state = initialState, _action = undefined) {
   return state;
 }
diff --git a/spec/dummy/client/app/startup/ContextFunctionReturnInvalidJSX.jsx b/spec/dummy/client/app/startup/ContextFunctionReturnInvalidJSX.jsx
@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import css from '../components/HelloWorld.module.scss';
 import RailsContext from '../components/RailsContext';
 
-const ContextFunctionReturnInvalidJSX = (props, railsContext) => (
+const ContextFunctionReturnInvalidJSX = ({ helloWorldData }, railsContext) => (
   <>
-    <h3 className={css.brightColor}>Hello, {props.helloWorldData.name}!</h3>
+    <h3 className={css.brightColor}>Hello, {helloWorldData.name}!</h3>
     <p>Rails Context :</p>
     <RailsContext {...{ railsContext }} />
   </>
diff --git a/spec/dummy/client/app/startup/HelloWorld.jsx b/spec/dummy/client/app/startup/HelloWorld.jsx
@@ -22,15 +22,15 @@ class HelloWorld extends React.Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  setNameDomRef(nameDomNode) {
-    this.nameDomRef = nameDomNode;
-  }
-
   handleChange() {
     const name = this.nameDomRef.value;
     this.setState({ name });
   }
 
+  setNameDomRef(nameDomNode) {
+    this.nameDomRef = nameDomNode;
+  }
+
   render() {
     console.log(
       'HelloWorld demonstrating a call to console.log in ' +
diff --git a/spec/dummy/client/app/startup/HelloWorldES5.jsx b/spec/dummy/client/app/startup/HelloWorldES5.jsx
@@ -12,6 +12,7 @@ const HelloWorldES5 = createReactClass({
   },
 
   getInitialState() {
+    // eslint-disable-next-line react/destructuring-assignment
     return this.props.helloWorldData;
   },
 
diff --git a/spec/dummy/client/app/startup/HelloWorldHooks.jsx b/spec/dummy/client/app/startup/HelloWorldHooks.jsx
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import css from '../components/HelloWorld.module.scss';
 
 // TODO: make more like the HelloWorld.jsx
-function HelloWorldHooks(props) {
-  const [name, setName] = useState(props.helloWorldData.name);
+function HelloWorldHooks({ helloWorldData }) {
+  const [name, setName] = useState(helloWorldData.name);
   return (
     <div>
       <h3 className={css.brightColor}>Hello, {name}!</h3>
diff --git a/spec/dummy/client/app/startup/HelloWorldProps.jsx b/spec/dummy/client/app/startup/HelloWorldProps.jsx
@@ -2,16 +2,16 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import css from '../components/HelloWorld.module.scss';
 
-function HelloWorldProps(props) {
-  console.log(`HelloWorldProps modification target prop value: ${props.modificationTarget}`);
+function HelloWorldProps({ helloWorldData, modificationTarget }) {
+  console.log(`HelloWorldProps modification target prop value: ${modificationTarget}`);
 
-  const [name, setName] = useState(props.helloWorldData.name);
+  const [name, setName] = useState(helloWorldData.name);
   // a trick to display a client-only prop value without creating a server/client conflict
   const [delayedValue, setDelayedValue] = useState(null);
 
   useEffect(() => {
-    setDelayedValue(props.modificationTarget);
-  }, []);
+    setDelayedValue(modificationTarget);
+  }, [modificationTarget]);
 
   return (
     <div>
diff --git a/spec/dummy/client/app/startup/HelloWorldRehydratable.jsx b/spec/dummy/client/app/startup/HelloWorldRehydratable.jsx
@@ -28,6 +28,11 @@ class HelloWorldRehydratable extends React.Component {
     document.removeEventListener('hydrate', this.forceClientHydration);
   }
 
+  handleChange() {
+    const name = this.nameDomRef.value;
+    this.setState({ name });
+  }
+
   setNameDomRef(nameDomNode) {
     this.nameDomRef = nameDomNode;
   }
@@ -50,11 +55,6 @@ class HelloWorldRehydratable extends React.Component {
     }
   }
 
-  handleChange() {
-    const name = this.nameDomRef.value;
-    this.setState({ name });
-  }
-
   render() {
     const { name } = this.state;
     const { railsContext } = this.props;
