Enable ESLint on dummy apps (#530)

Part 3 of #489, needs #529 to be merged.

Closes #489.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **Chores**
- Upgraded dependencies and streamlined build configurations for
improved stability.
- Added new steps for installing Node modules and Ruby gems in the CI
workflow.
- **Refactor**
	- Simplified component interfaces and standardized code styles.
- Improved type safety and clarity in function parameters across various
components.
	- Modified promise handling and control flow for better readability.
	- Updated object property merging syntax for better clarity.
- **Style**
- Enhanced accessibility with explicit image alt texts, button type
definitions, and clearer label associations.
- **Tests**
- Refined test assertions for consistency and improved CI workflow for
more reliable validations.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alexey Romanov <[email protected]>

Author: alexeyr-ci2

.circleci/config.yml

@@ -52,6 +52,12 @@ aliases:
       bundle config set --local disable_checksum_validation true
       cd spec/dummy && bundle lock --add-platform 'x86_64-linux' && bundle _2.5.4_ check || bundle _2.5.4_ install --jobs=4 --retry=3
 
+  - &generate-dummy-app-packs
+    name: Generate file-system based entrypoints
+    command: |
+      cd spec/dummy
+      bundle exec rake react_on_rails:generate_packs
+
   # Install ruby gems unless existing set of gems is satisfying bundler.
   - &install-package-ruby-gems
     name: Install Ruby Gems for package
@@ -119,6 +125,15 @@ jobs:
       - restore_cache: *restore-package-gem-cache
       - restore_cache: *restore-dummy-app-node-modules-cache
       - run: *install-package-ruby-gems
+      - run: *install-package-node-modules
+      - run: *install-dummy-app-ruby-gems
+      - run: *install-dummy-app-node-modules
+      - run:
+          name: Install Node modules with Yarn for ExecJS dummy app
+          command: |
+            cd spec/execjs-compatible-dummy
+            yarn install --frozen-lockfile --no-progress --no-emoji
+      - run: *generate-dummy-app-packs
       - run: *lint-ruby
       - run: *lint-js
       - run: *format
@@ -200,9 +215,7 @@ jobs:
       - run: *install-package-node-modules
       - run: *install-dummy-app-node-modules
       - run: *install-dummy-app-ruby-gems
-      - run:
-          name: Generate file-system based entrypoints
-          command: cd spec/dummy && bundle exec rake react_on_rails:generate_packs
+      - run: *generate-dummy-app-packs
       - run:
           name: Build test bundles for dummy app
           command: cd spec/dummy && yarn run build:test

eslint.config.mjs

@@ -18,25 +18,22 @@ const compat = new FlatCompat({
 export default defineConfig([
   includeIgnoreFile(path.resolve(import.meta.dirname, '.gitignore')),
   globalIgnores([
-    '**/node_modules',
-    '**/coverage',
-    'gen-documentation/**/*',
+    'gen-documentation/',
     'spec/react_on_rails/dummy-for-generators',
-    'spec/dummy',
-    'spec/execjs-compatible-dummy',
+    // includes some generated code
+    'spec/dummy/client/app/packs/server-bundle.js',
     'packages/node-renderer/lib/',
     'packages/node-renderer/tests/fixtures',
-    'packages/node-renderer/webpack.config.js',
-    '**/node_modules/**/*',
-    '**/assets/webpack/**/*',
-    '**/generated/**/*',
+    '**/node_modules/',
+    '**/assets/webpack/',
+    '**/generated/',
     '**/app/assets/javascripts/application.js',
-    '**/coverage/**/*',
+    '**/coverage/',
     '**/cable.js',
-    '**/public/**/*',
-    '**/tmp/**/*',
-    '**/vendor',
-    '**/dist',
+    '**/public/',
+    '**/tmp/',
+    '**/vendor/',
+    '**/dist/',
     '**/.yalc/',
   ]),
   {
@@ -51,6 +48,10 @@ export default defineConfig([
       parserOptions: {
         // We have @babel/eslint-parser from eslint-config-shakacode, but don't use Babel in the main project
         requireConfigFile: false,
+
+        babelOptions: {
+          presets: ['@babel/preset-env', '@babel/preset-react'],
+        },
       },
     },
 
@@ -62,14 +63,15 @@ export default defineConfig([
       },
 
       'import/resolver': {
+        alias: [['Assets', './spec/dummy/client/app/assets']],
         node: true,
         typescript: true,
       },
     },
 
     rules: {
       'no-console': 'off',
-
+      'no-underscore-dangle': 'off',
       'no-void': [
         'error',
         {
@@ -94,6 +96,34 @@ export default defineConfig([
         },
       ],
       'no-mixed-operators': 'off',
+      'react/forbid-prop-types': 'off',
+      'react/function-component-definition': [
+        'error',
+        {
+          namedComponents: ['function-declaration', 'arrow-function'],
+          unnamedComponents: 'arrow-function',
+        },
+      ],
+      'react/jsx-filename-extension': [
+        'error',
+        {
+          extensions: ['.jsx', '.tsx'],
+        },
+      ],
+      'react/jsx-props-no-spreading': [
+        'error',
+        {
+          custom: 'ignore',
+        },
+      ],
+      'react/prop-types': 'off',
+      'react/static-property-placement': 'off',
+    },
+  },
+  {
+    files: ['spec/dummy/**/*', 'spec/execjs-compatible-dummy'],
+    languageOptions: {
+      globals: globals.browser,
     },
   },
   {
@@ -135,15 +165,9 @@ export default defineConfig([
     },
   },
   {
-    files: ['packages/node-renderer/tests/**'],
-
-    plugins: {
-      jest,
-    },
+    files: ['packages/node-renderer/tests/**', '**/*.test.{js,jsx,ts,tsx}'],
 
-    languageOptions: {
-      globals: globals.jest,
-    },
+    extends: [jest.configs['flat/recommended'], jest.configs['flat/style']],
 
     rules: {
       // Allows Jest mocks before import

package.json

@@ -47,10 +47,11 @@
     "lockfile": "^1.0.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/eslint-parser": "^7.24.1",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-typescript": "^7.24.1",
+    "@babel/core": "^7.26.10",
+    "@babel/eslint-parser": "^7.27.0",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.27.0",
     "@eslint/compat": "^1.2.8",
     "@honeybadger-io/js": "^6.10.1",
     "@sentry/node": "^7.120.0",
@@ -64,6 +65,7 @@
     "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-config-shakacode": "^19.0.0",
+    "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^4.3.2",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.11.0",

packages/node-renderer/tests/handleRenderRequest.test.ts

@@ -28,6 +28,7 @@ const renderResult = {
   data: JSON.stringify({ html: 'Dummy Object' }),
 };
 
+// eslint-disable-next-line jest/valid-title
 describe(testName, () => {
   beforeEach(async () => {
     await resetForTest(testName);

packages/node-renderer/tests/vm.test.ts

@@ -542,7 +542,7 @@ describe('buildVM and runInVM', () => {
         'typeof ReactOnRails !== "undefined" && ReactOnRails && typeof ReactOnRails.serverRenderReactComponent',
         serverBundlePath,
       );
-      expect(ReactOnRails).toEqual('function');
+      expect(ReactOnRails).toBe('function');
     });
 
     test("running multiple buildVM in parallel doesn't cause runInVM to return partial results", async () => {
@@ -559,9 +559,9 @@ describe('buildVM and runInVM', () => {
         runCodeInVM(),
         runCodeInVM(),
       ]);
-      expect(runCodeInVM1).toEqual('function');
-      expect(runCodeInVM2).toEqual('function');
-      expect(runCodeInVM3).toEqual('function');
+      expect(runCodeInVM1).toBe('function');
+      expect(runCodeInVM2).toBe('function');
+      expect(runCodeInVM3).toBe('function');
     });
   });
 });

packages/node-renderer/tests/worker.test.ts

@@ -57,10 +57,10 @@ describe('worker', () => {
       .end();
     expect(res.statusCode).toBe(200);
     expect(res.headers['cache-control']).toBe('public, max-age=31536000');
-    expect(res.payload).toEqual('{"html":"Dummy Object"}');
-    expect(fs.existsSync(vmBundlePath(testName))).toEqual(true);
-    expect(fs.existsSync(assetPath(testName))).toEqual(true);
-    expect(fs.existsSync(assetPathOther(testName))).toEqual(true);
+    expect(res.payload).toBe('{"html":"Dummy Object"}');
+    expect(fs.existsSync(vmBundlePath(testName))).toBe(true);
+    expect(fs.existsSync(assetPath(testName))).toBe(true);
+    expect(fs.existsSync(assetPathOther(testName))).toBe(true);
   });
 
   test(
@@ -138,7 +138,7 @@ describe('worker', () => {
         .end();
       expect(res.statusCode).toBe(200);
       expect(res.headers['cache-control']).toBe('public, max-age=31536000');
-      expect(res.payload).toEqual('{"html":"Dummy Object"}');
+      expect(res.payload).toBe('{"html":"Dummy Object"}');
     },
   );
 
@@ -163,7 +163,7 @@ describe('worker', () => {
         });
       expect(res.headers['cache-control']).toBe('public, max-age=31536000');
       expect(res.statusCode).toBe(200);
-      expect(res.payload).toEqual('{"html":"Dummy Object"}');
+      expect(res.payload).toBe('{"html":"Dummy Object"}');
     },
   );
 
@@ -222,7 +222,7 @@ describe('worker', () => {
     });
     const res = await app.inject().post(`/upload-assets`).payload(form.payload).headers(form.headers).end();
     expect(res.statusCode).toBe(200);
-    expect(fs.existsSync(assetPath(testName))).toEqual(true);
-    expect(fs.existsSync(assetPathOther(testName))).toEqual(true);
+    expect(fs.existsSync(assetPath(testName))).toBe(true);
+    expect(fs.existsSync(assetPathOther(testName))).toBe(true);
   });
 });

spec/dummy/babel.config.js

@@ -1,5 +1,6 @@
-module.exports = function (api) {
-  const defaultConfigFunc = require('shakapacker/package/babel/preset.js');
+const defaultConfigFunc = require('shakapacker/package/babel/preset.js');
+
+module.exports = (api) => {
   const resultConfig = defaultConfigFunc(api);
   const isProductionEnv = api.env('production');
   const side = api.caller((caller) => (caller && caller.ssr ? 'server' : 'client'));

spec/dummy/client/@types/global.d.ts

@@ -4,6 +4,6 @@ import type { SSRCache } from '@shakacode/use-ssr-computation.runtime/lib/ssrCac
 declare global {
   interface Window {
     __APOLLO_STATE__: NormalizedCacheObject;
-    __SSR_COMPUTATION_CACHE: SSRCache;
+    __SSR_COMPUTATION_CACHE?: SSRCache;
   }
 }

spec/dummy/client/app/actions/HelloWorldActions.jsx

@@ -1,6 +1,5 @@
 import * as actionTypes from '../constants/HelloWorldConstants';
 
-/* eslint-disable import/prefer-default-export */
 export function updateName(name) {
   return {
     type: actionTypes.HELLO_WORLD_NAME_UPDATE,

spec/dummy/client/app/components/ConsoleLogsInAsyncServer.jsx

@@ -7,16 +7,17 @@ const ConsoleLogsInAsyncServer = ({ requestId }) => (
       Request ID: <b>{requestId}</b>
     </p>
     <p>
-      Request ID should prefix all console logs logged on the server. You shouldn't see more than one request
-      ID in the console logs.
+      Request ID should prefix all console logs logged on the server. You shouldn&quot;t see more than one
+      request ID in the console logs.
     </p>
 
     <br />
 
     <div>
       <p>
         If <code>replayServerAsyncOperationLogs</code> is set to <code>true</code> (or not set at all because
-        it's the default value), you should see all logs either logged in sync or async server operations.
+        it&quot;s the default value), you should see all logs either logged in sync or async server
+        operations.
       </p>
 
       <p>So, you should see the following logs in the console:</p>