enhance linting rules and consolidate linaria dependencies

Author: jancajthaml

.prettierignore

@@ -1,2 +1,2 @@
 dll
-coverage
+reports

bootstrap/src/component/Entrypoint.jsx

@@ -13,7 +13,7 @@ const Yank = () => {
   throw error;
 };
 
-const Sink = (props) => {
+const Sink = () => {
   const { children, entrypoint } = useContext(Hatch);
 
   return <Module name={entrypoint}>{children}</Module>;

bootstrap/src/component/Main.jsx

@@ -22,7 +22,7 @@ const FullyInitializedGate = (props) => {
 };
 
 const Main = (props) => {
-  const [_, setErrorState] = useState();
+  const [_errorState, setErrorState] = useState();
   const [storeReady, markStoreReady] = useState(false);
 
   const manualInit = useCallback(() => {

bootstrap/src/component/__tests__/Entrypoint.test.jsx

@@ -1,7 +1,6 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
-import { FormattedMessage } from "react-intl";
 import { Routes, Route, Link } from "react-router-dom";
 import configureStore from "redux-mock-store";
 
@@ -13,7 +12,7 @@ const initialState = {
   runtime: {
     entrypoint: null,
   },
-  shared: {},
+  env: {},
 };
 
 const mockStore = configureStore([]);
@@ -24,7 +23,7 @@ class ErrorBoundary extends React.Component {
     this.state = false;
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError(_error) {
     return true;
   }
 
@@ -43,11 +42,11 @@ const BrokenComponent = () => {
 
 describe("<Entrypoint />", () => {
   beforeEach(() => {
-    window.history.pushState(null, document.title, "/");
+    top.history.pushState(null, document.title, "/");
   });
 
   afterEach(() => {
-    window.history.pushState(null, document.title, "/");
+    top.history.pushState(null, document.title, "/");
   });
 
   it("entrypoint missing", () => {
@@ -98,7 +97,7 @@ describe("<Entrypoint />", () => {
       await userEvent.click(screen.getByText("Navigate"));
 
       await waitFor(() => {
-        expect(window.location.pathname).toBe("/404");
+        expect(top.location.pathname).toBe("/404");
         expect(screen.getByTestId("RouteNoMatch")).toBeInTheDocument();
       });
 
@@ -107,7 +106,7 @@ describe("<Entrypoint />", () => {
       await userEvent.click(screen.getByText("Navigate"));
 
       await waitFor(() => {
-        expect(window.location.pathname).toBe("/grand/parent/child");
+        expect(top.location.pathname).toBe("/grand/parent/child");
         expect(screen.getByTestId("RouteMatchLeft")).toBeInTheDocument();
       });
 
@@ -116,7 +115,7 @@ describe("<Entrypoint />", () => {
       await userEvent.click(screen.getByText("Navigate"));
 
       await waitFor(() => {
-        expect(window.location.pathname).toBe("/sibling");
+        expect(top.location.pathname).toBe("/sibling");
         expect(screen.getByTestId("RouteMatchRight")).toBeInTheDocument();
       });
     });

bootstrap/src/component/__tests__/Globalisation.test.jsx

@@ -22,7 +22,7 @@ class ErrorBoundary extends React.Component {
     this.state = false;
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError(_error) {
     return true;
   }
 

bootstrap/src/component/__tests__/Main.test.jsx

@@ -1,6 +1,4 @@
-/* global DEFAULT_LOCALE */
-
-import { render, screen, waitFor, act } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import React from "react";
 import configureStore from "redux-mock-store";
 
@@ -60,7 +58,7 @@ class ErrorBoundary extends React.Component {
     this.state = false;
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError(_error) {
     return true;
   }
 

bootstrap/src/saga/__tests__/bootstrap.test.js

@@ -34,10 +34,6 @@ describe("context", () => {
 
   describe("runRefresher", () => {
     it("single run", async () => {
-      const ctx = {
-        entrypoint: "my-entrypoint",
-        available: [],
-      };
       const action = {
         type: constants.INIT,
         payload: {},
@@ -56,10 +52,6 @@ describe("context", () => {
     });
 
     it("continuous polling delay", async () => {
-      const ctx = {
-        entrypoint: "my-entrypoint",
-        available: [],
-      };
       const action = {
         type: constants.INIT,
         payload: {
@@ -90,10 +82,6 @@ describe("context", () => {
     });
 
     it("continuous polling interupt", async () => {
-      const ctx = {
-        entrypoint: "my-entrypoint",
-        available: [],
-      };
       const action = {
         type: constants.INIT,
         payload: {

bootstrap/src/saga/bootstrap.js

@@ -1,4 +1,4 @@
-import { call, put, takeLatest, take, race, delay } from "redux-saga/effects";
+import { put, takeLatest, take, race, delay } from "redux-saga/effects";
 
 import { constants } from "@lastui/rocker/platform";
 
@@ -16,7 +16,7 @@ export function* runRefresher(action) {
     yield put({ type: constants.FETCH_CONTEXT });
     let waiting = interval > 0;
     while (waiting) {
-      const { refresh, timeout } = yield race({
+      const { _refresh, timeout } = yield race({
         refresh: take(constants.REFRESH),
         timeout: delay(interval),
       });

bootstrap/src/selector/index.js

@@ -9,7 +9,7 @@ const memoizedMessages = new Proxy(
     descriptor: { configurable: true, enumerable: true },
   },
   {
-    getOwnPropertyDescriptor(ref, key) {
+    getOwnPropertyDescriptor(ref, _key) {
       return ref.descriptor;
     },
     get(ref, key) {

bootstrap/src/store/__test__/index.test.js

@@ -39,7 +39,7 @@ describe("store", () => {
     expect(spy).toHaveBeenCalledWith(action);
   });
 
-  it("contains window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ in NODE_ENV=development", async () => {
+  it("contains __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ in NODE_ENV=development", async () => {
     global.BUILD_ID = "xxx";
     top.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ = jest.fn();
     top.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__.mockReturnValue(() => {});

bootstrap/src/store/index.js

@@ -1,7 +1,7 @@
 /* global BUILD_ID */
 
 import { applyMiddleware, compose, createStore, combineReducers } from "redux";
-import { all, fork } from "redux-saga/effects";
+import { all } from "redux-saga/effects";
 
 import {
   setStore,

cli/commands/build.js

@@ -4,15 +4,15 @@ exports.describe = "bundle package";
 
 exports.builder = {};
 
-exports.handler = async function (options, cleanupHooks) {
+exports.handler = async function (options, _cleanupHooks) {
   const path = await import("node:path");
   const packageName = path.basename(process.env.INIT_CWD);
   const { setup, getStack } = await import("../helpers/webpack.mjs");
 
   const callback = await setup(options);
   const { configs, webpack } = await getStack(options, packageName);
 
-  await new Promise((resolve, reject) => {
+  await new Promise((resolve, _reject) => {
     webpack(configs).run((err, stats) => {
       callback(err, stats);
       resolve();

cli/commands/lint.js

@@ -4,7 +4,7 @@ exports.describe = "lint sources";
 
 exports.builder = {};
 
-exports.handler = async function (options, cleanupHooks) {
+exports.handler = async function (options, _cleanupHooks) {
   const { run: runLintStream } = await import("../helpers/lint-stream.mjs");
 
   await runLintStream(options);

cli/commands/test.js

@@ -4,7 +4,7 @@ exports.describe = "run unit tests";
 
 exports.builder = {};
 
-exports.handler = async function (options, cleanupHooks) {
+exports.handler = async function (options, _cleanupHooks) {
   const { run: runJest } = await import("../helpers/jest.mjs");
 
   await runJest(options);

cli/helpers/eslint.mjs

@@ -16,14 +16,28 @@ export const config = {
     allowImportExportEverywhere: false,
     ecmaFeatures: {
       globalReturn: false,
+      jsx: true,
     },
     requireConfigFile: false,
     babelOptions: babelConfig.env.development,
   },
-  plugins: ["import"],
+  plugins: ["import", "react"],
   rules: {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
     "no-debugger": "error",
     "no-undef": "error",
+    "no-unused-vars": [
+      "error",
+      {
+        vars: "all",
+        varsIgnorePattern: "^_",
+        argsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+        ignoreRestSiblings: true,
+      },
+    ],
+    "no-unused-expressions": "error",
     eqeqeq: ["error", "always"],
     "import/first": "error",
     "import/consistent-type-specifier-style": ["warn", "prefer-top-level"],

cli/helpers/lint-stream.mjs

@@ -82,11 +82,16 @@ export async function run(options) {
         for (const issue of info.issues) {
           if (issue.severity > 1) {
             process.exitCode = 1;
-            console.log(colors.red("✖"), colors.red(info.filePath), colors.bold.red(issue.message), colors.dim(duration));
+            console.log(
+              colors.red("✖"),
+              colors.red(`${info.filePath}:${issue.line ?? 1}:${issue.column ? issue.column - 1 : 0}`),
+              colors.bold.red(issue.message),
+              colors.dim(duration),
+            );
           } else if (!options.quiet) {
             console.log(
               colors.yellow("!"),
-              colors.yellow(info.filePath),
+              colors.yellow(`${info.filePath}:${issue.line ?? 1}:${issue.column ? issue.column - 1 : 0}`),
               colors.bold.yellow(issue.message),
               colors.dim(duration),
             );

cli/index.js

@@ -58,6 +58,7 @@ function envelope(command) {
   };
 }
 
+/* eslint-disable no-unused-expressions */
 require("yargs")
   .parserConfiguration({
     "unknown-options-as-args": true,