Fix issues

Author: alexeyr

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

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

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';

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,

node_package/tests/ReactOnRails.test.js renamed to 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';

node_package/tests/renderFunction.test.js renamed to 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';

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

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;

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

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: