feat(cli): improve baselines

- i18next default languages & suspense
- tsconfig
- bump packages with vulns/issues
- add react-hooks eslint
- emotion css prop opt-in

examples/uikit-app-shell/package.json

@@ -20,7 +20,6 @@
     "react-router-dom": "^6.14.2"
   },
   "devDependencies": {
-    "@emotion/babel-plugin": "^11.10.6",
     "@hitachivantara/app-shell-vite-plugin": "latest",
     "@hitachivantara/uikit-uno-preset": "latest",
     "@types/react": "^18.0.28",

examples/uikit-app-shell/src/types/vite-env.d.ts

@@ -1,2 +1 @@
 /// <reference types="vite/client" />
-/// <reference types="@emotion/react/types/css-prop" />

examples/uikit-app-shell/tsconfig.json

@@ -16,7 +16,6 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "@emotion/react",
     "baseUrl": "src",
     "noImplicitAny": true,
     "noImplicitThis": true,

examples/uikit-app-shell/vite.config.ts

@@ -11,12 +11,7 @@ import { presetHv } from "@hitachivantara/uikit-uno-preset";
 
 export default defineConfig(({ mode }) => ({
   plugins: [
-    react({
-      jsxImportSource: "@emotion/react",
-      babel: {
-        plugins: ["@emotion/babel-plugin"],
-      },
-    }),
+    react(),
     tsconfigPaths(),
     unoCSS({
       mode: "per-module",

packages/cli/src/baselines/app-shell/vite/.eslintrc.json

@@ -1,4 +1,12 @@
 {
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
-  "parser": "@typescript-eslint/parser"
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error"
+  }
 }

packages/cli/src/baselines/app-shell/vite/_package.json

@@ -6,14 +6,13 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "check": "npm-run-all --parallel check:*",
+    "check": "npm run check:format && check:types && npm run check:lint",
     "check:types": "tsc --noEmit",
     "check:lint": "eslint --color --cache src",
     "check:format": "prettier --check .",
     "lint": "eslint --color --cache src --fix",
     "format": "prettier --write .",
-    "test": "vitest run --coverage --passWithNoTests",
-    "test:watch": "vitest watch"
+    "test": "vitest"
   },
   "dependencies": {
     "@emotion/css": "^11.10.6",
@@ -32,21 +31,19 @@
     "swr": "^2.2.0"
   },
   "devDependencies": {
-    "@emotion/babel-plugin": "^11.10.6",
     "@hitachivantara/app-shell-vite-plugin": "^1.0.0",
     "@hitachivantara/uikit-uno-preset": "^0.2.5",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^2.0.4",
     "eslint": "^8.39.0",
-    "happy-dom": "^14.3.9",
-    "npm-run-all": "^4.1.5",
+    "happy-dom": "^15.11.7",
     "prettier": "^3.1.1",
     "typescript": "^5.5.4",
     "unocss": "^0.58.3",

packages/cli/src/baselines/app-shell/vite/src/lib/i18n.ts

@@ -1,11 +1,11 @@
 import { useMemo } from "react";
-import i18next from "i18next";
-import Backend, { HttpBackendOptions } from "i18next-http-backend";
+import { createInstance } from "i18next";
+import Backend, { type HttpBackendOptions } from "i18next-http-backend";
 import LanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
 
 const initAppI18n = (baseUrl: string) => {
-  const i18n = i18next.createInstance();
+  const i18n = createInstance();
 
   const loadPath = `${baseUrl}locales/{{lng}}/{{ns}}.json`;
 
@@ -22,34 +22,25 @@ const initAppI18n = (baseUrl: string) => {
     // for all options read: https://www.i18next.com/overview/configuration-options
     .init<HttpBackendOptions>({
       fallbackLng: "en",
-      ns: [],
+      supportedLngs: ["en"],
       backend: {
         loadPath,
       },
       interpolation: {
         escapeValue: false, // not needed for react as it escapes by default
       },
-      react: {
-        useSuspense: false, // it was constantly loading the translation files
-      },
       load: "languageOnly",
     });
 
   return i18n;
 };
 
-const useI18nInstance = () => {
+export const useI18nInstance = () => {
   const moduleId = "@hv-apps/uikit-app";
   const i18n = useMemo(
-    () =>
-      // TS picks up the Node's version of `import.meta.resolve` definition instead of the browser's
-      // The browser's version of `import.meta.resolve` is defined in `src/types/import.meta.d.ts`
-      // and it returns a string, not a Promise
-      initAppI18n(import.meta.resolve?.(`${moduleId}/`) || ""),
+    () => initAppI18n(import.meta.resolve?.(`${moduleId}/`) || ""),
     [moduleId],
   );
 
   return i18n;
 };
-
-export default useI18nInstance;

packages/cli/src/baselines/app-shell/vite/src/providers/Provider.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from "react";
 import { I18nextProvider } from "react-i18next";
 
-import useI18nInstance from "../lib/i18n";
+import { useI18nInstance } from "../lib/i18n";
 
 const Provider = ({ children }: { children: React.ReactNode }) => {
   const i18n = useI18nInstance();

packages/cli/src/baselines/app-shell/vite/src/tests/setupTests.ts

@@ -1,6 +1,6 @@
+import type { TransProps } from "react-i18next";
+import type { ThirdPartyModule, TOptionsBase } from "i18next";
 import { vi } from "vitest";
-import { TOptionsBase, ThirdPartyModule } from "i18next";
-import { TransProps } from "react-i18next";
 
 import "@testing-library/jest-dom";
 

packages/cli/src/baselines/app-shell/vite/src/types/vite-env.d.ts

@@ -1,2 +1 @@
 /// <reference types="vite/client" />
-/// <reference types="@emotion/react/types/css-prop" />

packages/cli/src/baselines/app-shell/vite/tsconfig.json

@@ -1,27 +1,29 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
+    /* Base Options: */
+    "esModuleInterop": true,
     "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "strictNullChecks": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
+    "target": "ES2022",
+    "allowJs": true,
     "resolveJsonModule": true,
+    "moduleDetection": "force",
     "isolatedModules": true,
+    // "verbatimModuleSyntax": true,
+
+    /* Strictness */
+    "strict": true,
+    "noUncheckedIndexedAccess": false,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Bundling with vite */
+    "module": "preserve",
     "noEmit": true,
+
+    /* Others */
     "jsx": "react-jsx",
-    "jsxImportSource": "@emotion/react",
-    "baseUrl": "src",
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "lib": ["DOM", "DOM.Iterable", "ESNext"]
   },
   "include": ["src"],
   "references": [

packages/cli/src/baselines/vite/.eslintrc.json

@@ -1,4 +1,12 @@
 {
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
-  "parser": "@typescript-eslint/parser"
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error"
+  }
 }

packages/cli/src/baselines/vite/_package.json

@@ -6,14 +6,13 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "check": "npm-run-all --parallel check:*",
+    "check": "npm run check:format && check:types && npm run check:lint",
     "check:types": "tsc --noEmit",
     "check:lint": "eslint --color --cache src",
     "check:format": "prettier --check .",
     "lint": "eslint --color --cache src --fix",
     "format": "prettier --write .",
-    "test": "vitest run --coverage",
-    "test:watch": "vitest watch"
+    "test": "vitest"
   },
   "dependencies": {
     "@emotion/css": "^11.10.6",
@@ -33,20 +32,18 @@
     "tiny-cookie": "^2.4.1"
   },
   "devDependencies": {
-    "@emotion/babel-plugin": "^11.10.6",
     "@hitachivantara/uikit-uno-preset": "^0.2.5",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^2.0.4",
     "eslint": "^8.39.0",
-    "happy-dom": "^14.3.9",
-    "npm-run-all": "^4.1.5",
+    "happy-dom": "^15.11.7",
     "prettier": "^3.1.1",
     "typescript": "^5.5.4",
     "unocss": "^0.58.3",

packages/cli/src/baselines/vite/src/App.tsx

@@ -1,4 +1,3 @@
-import "lib/i18n";
 import { BrowserRouter as Router } from "react-router-dom";
 import { HvProvider } from "@hitachivantara/uikit-react-core";
 import { Container } from "./components/common/Container";
@@ -10,6 +9,8 @@ import navigation from "./lib/navigation";
 // @ts-expect-error TODO
 import Routes from "./lib/routes";
 
+import "./lib/i18n";
+
 import "virtual:uno.css";
 
 const App = () => (

packages/cli/src/baselines/vite/src/lib/i18n.ts

@@ -1,8 +1,10 @@
-import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { createInstance } from "i18next";
+import Backend, { type HttpBackendOptions } from "i18next-http-backend";
 import LanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
 
+const i18n = createInstance();
+
 i18n
   // load translation using xhr -> see /public/locales
   // learn more: https://github.com/i18next/i18next-xhr-backend
@@ -14,9 +16,9 @@ i18n
   .use(initReactI18next)
   // init i18next
   // for all options read: https://www.i18next.com/overview/configuration-options
-  .init({
+  .init<HttpBackendOptions>({
     fallbackLng: "en",
-    ns: [],
+    supportedLngs: ["en"],
     backend: {
       loadPath: "/locales/{{lng}}/{{ns}}.json",
     },

packages/cli/src/baselines/vite/src/tests/providers.tsx

@@ -1,9 +1,9 @@
-import { FC, ReactNode, Suspense } from "react";
+import { Suspense } from "react";
 import { HvProvider } from "@hitachivantara/uikit-react-core";
 import { SUSPENSE_LABEL } from "./mocks";
 
 /** Base Test Provider */
-export const TestProvider: FC<{ children: ReactNode }> = ({ children }) => {
+export const TestProvider = ({ children }: { children: React.ReactNode }) => {
   return (
     <Suspense fallback={SUSPENSE_LABEL}>
       <HvProvider>{children}</HvProvider>

packages/cli/src/baselines/vite/src/tests/setupTests.ts

@@ -1,6 +1,6 @@
+import type { TransProps } from "react-i18next";
+import type { ThirdPartyModule, TOptionsBase } from "i18next";
 import { vi } from "vitest";
-import { TOptionsBase, ThirdPartyModule } from "i18next";
-import { TransProps } from "react-i18next";
 
 import "@testing-library/jest-dom";
 

packages/cli/src/baselines/vite/src/vite-env.d.ts

@@ -1,2 +1 @@
 /// <reference types="vite/client" />
-/// <reference types="@emotion/react/types/css-prop" />

packages/cli/src/baselines/vite/tsconfig.json

@@ -1,27 +1,29 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
+    /* Base Options: */
+    "esModuleInterop": true,
     "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "strictNullChecks": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
+    "target": "ES2022",
+    "allowJs": true,
     "resolveJsonModule": true,
+    "moduleDetection": "force",
     "isolatedModules": true,
+    // "verbatimModuleSyntax": true,
+
+    /* Strictness */
+    "strict": true,
+    "noUncheckedIndexedAccess": false,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Bundling with vite */
+    "module": "preserve",
     "noEmit": true,
+
+    /* Others */
     "jsx": "react-jsx",
-    "jsxImportSource": "@emotion/react",
-    "baseUrl": "src",
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "lib": ["DOM", "DOM.Iterable", "ESNext"]
   },
   "include": ["src"],
   "references": [