feat: upgrading react-ssr-with-vite project dependencies

templates/react-ssr-with-vite/.eslintrc

@@ -1,15 +1,3 @@
 {
-  "extends": "@eleven-labs/eslint-config-react",
-  "rules": {
-    "@typescript-eslint/strict-boolean-expressions": "off",
-    "@typescript-eslint/no-floating-promises": "off"
-  },
-  "overrides": [
-    {
-      "files": ["*.stories.tsx", "*.test.ts"],
-      "rules": {
-        "@typescript-eslint/consistent-type-assertions": "off"
-      }
-    }
-  ]
+  "extends": "@eleven-labs/eslint-config-react"
 }

templates/react-ssr-with-vite/.github/dependabot.yml

@@ -0,0 +1,9 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    labels:
+      - "RFR"
+      - "dependencies"

templates/react-ssr-with-vite/.github/workflows/tests-and-checks.yml

@@ -0,0 +1,33 @@
+name: Tests and Checks
+on:
+  pull_request:
+    paths:
+      - 'templates/react-ssr-with-vite/**'
+jobs:
+  checks:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v3
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Install modules
+        run: yarn --frozen-lockfile
+      - name: Run ESLint
+        run: yarn lint:es
+      - name: Run Compile TypeScript
+        run: yarn tsc
+      - name: Run Test
+        run: yarn test

templates/react-ssr-with-vite/.nvmrc

@@ -1 +1 @@
-v16
+v18

templates/react-ssr-with-vite/bin/build.ts

@@ -5,11 +5,11 @@ const build = async (): Promise<void> => {
   buildVite({
     build: {
       emptyOutDir: false,
-      ssr: true,
       outDir: 'dist',
       rollupOptions: {
         input: 'src/server.ts',
       },
+      ssr: true,
     },
   });
 

templates/react-ssr-with-vite/bin/dev.ts → templates/react-ssr-with-vite/bin/development.ts

@@ -1,10 +1,10 @@
 import { createServer as createViteServer } from 'vite';
 
-const dev = async (): Promise<void> => {
+const development = async (): Promise<void> => {
   const vite = await createViteServer({
     appType: 'custom',
   });
   await vite.ssrLoadModule('/src/server.ts');
 };
 
-dev();
+development();

templates/react-ssr-with-vite/bin/prerender.ts

@@ -2,15 +2,15 @@ import { createServer as createViteServer } from 'vite';
 
 const prerender = async (): Promise<void> => {
   const vite = await createViteServer({
-    server: { middlewareMode: true },
     appType: 'custom',
+    server: { middlewareMode: true },
   });
 
   try {
     const { generateHtmlFiles } = await vite.ssrLoadModule('/src/helpers/prerenderHelper.ts');
     generateHtmlFiles(process.cwd());
-  } catch (e) {
-    console.error(e);
+  } catch (error) {
+    console.error(error);
   } finally {
     vite.close();
   }

templates/react-ssr-with-vite/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "ts-node bin/build",
     "prerender": "ts-node bin/prerender",
-    "start:dev": "ts-node bin/dev",
+    "start:dev": "ts-node bin/development",
     "start:prod": "NODE_ENV=production node dist/server",
     "start:static": "npx serv --path dist/public",
     "lint:es": "eslint --ext .ts,.tsx src bin"
@@ -18,54 +18,44 @@
   "engines": {
     "npm": "please-use-yarn-instead",
     "yarn": ">= 1.2.0",
-    "node": ">= 16.0"
+    "node": ">= 18.0"
   },
+  "prettier": "@eleven-labs/prettier-config",
   "dependencies": {
-    "@eleven-labs/design-system": "^0.5.4",
-    "@remix-run/router": "^1.4.0",
-    "cross-fetch": "^3.1.5",
+    "@eleven-labs/design-system": "^0.6.2",
+    "@remix-run/router": "^1.9.0",
+    "cross-fetch": "^4.0.0",
     "express": "^4.18.2",
-    "hoofd": "^1.5.2",
-    "i18next": "^22.4.13",
-    "i18next-browser-languagedetector": "^7.0.1",
-    "i18next-http-middleware": "^3.3.0",
+    "hoofd": "^1.7.1",
+    "i18next": "^23.5.1",
+    "i18next-browser-languagedetector": "^7.1.0",
+    "i18next-http-middleware": "^3.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^12.2.0",
-    "react-router-dom": "^6.9.0",
+    "react-i18next": "^13.2.2",
+    "react-router-dom": "^6.16.0",
     "serve-static": "^1.15.0"
   },
   "devDependencies": {
-    "@eleven-labs/eslint-config-react": "0.1.1",
-    "@types/express": "^4.17.17",
+    "@eleven-labs/eslint-config-react": "^1.0.1",
+    "@eleven-labs/prettier-config": "^1.0.0",
+    "@types/express": "^4.17.19",
     "@types/i18next": "^13.0.0",
-    "@types/node": "^18.15.9",
-    "@types/react": "^18.0.29",
-    "@types/react-dom": "^18.0.11",
+    "@types/node": "^18.18.4",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
     "@types/react-i18next": "^8.1.0",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@vitejs/plugin-react": "^3.1.0",
-    "dotenv": "^16.0.3",
-    "eslint": "^8.0.1",
-    "eslint-config-prettier": "8.x",
-    "eslint-config-standard-with-typescript": "34.0.1",
-    "eslint-import-resolver-typescript": "3.*",
-    "eslint-plugin-autofix": "1.x",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jsx-a11y": "6.x",
-    "eslint-plugin-n": "^15.0.0",
-    "eslint-plugin-prettier": "4.x",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "4.x",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.0",
-    "prettier": "2.x",
-    "sass": "^1.60.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@vitejs/plugin-react-swc": "^3.4.0",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.51.0",
+    "lint-staged": "^14.0.1",
+    "prettier": "3.0.3",
+    "sass": "^1.69.3",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
-    "vite": "^4.2.1",
-    "vite-tsconfig-paths": "^4.0.7"
+    "vite": "^4.4.11",
+    "vite-tsconfig-paths": "^4.2.1"
   }
 }

templates/react-ssr-with-vite/src/config/i18n/i18n.config.ts

@@ -5,23 +5,23 @@ import translationsEn from '@/translations/messages.en.json';
 import translationsFr from '@/translations/messages.fr.json';
 
 export const i18nConfig: InitOptions = {
-  load: 'languageOnly',
-  preload: AUTHORIZED_LANGUAGES,
-  fallbackLng: DEFAULT_LANGUAGE,
-  resources: {
-    fr: { messages: translationsFr },
-    en: { messages: translationsEn },
-  },
-  returnEmptyString: false,
   defaultNS: 'messages',
+  detection: {
+    lookupFromPathIndex: 0,
+    order: ['path'],
+  },
+  fallbackLng: DEFAULT_LANGUAGE,
+  load: 'languageOnly',
   ns: 'messages',
+  preload: AUTHORIZED_LANGUAGES,
   react: {
     bindI18n: 'languageChanged',
     bindI18nStore: false,
     useSuspense: false,
   },
-  detection: {
-    order: ['path'],
-    lookupFromPathIndex: 0,
+  resources: {
+    en: { messages: translationsEn },
+    fr: { messages: translationsFr },
   },
+  returnEmptyString: false,
 };

templates/react-ssr-with-vite/src/config/router/routes.tsx

@@ -13,52 +13,54 @@ import {
 
 export const routes: RouteObject[] = [
   {
-    element: (
-      <LayoutTemplateContainer>
-        <Outlet />
-      </LayoutTemplateContainer>
-    ),
-    errorElement: (
-      <LayoutTemplateContainer>
-        <NotFoundPageContainer />
-      </LayoutTemplateContainer>
-    ),
     children: [
       {
-        path: PATHS.ROOT,
         element: <HomePageContainer />,
+        path: PATHS.ROOT,
       },
       {
-        path: '/:lang',
-        loader: ({ params }): Record<string, unknown> => {
-          if (!AUTHORIZED_LANGUAGES.includes(params.lang as string)) {
-            throw new Error('Lang not Found');
-          }
-          return {};
-        },
         children: [
           {
-            path: PATHS.HOME,
             element: <HomePageContainer />,
+            path: PATHS.HOME,
           },
           {
-            path: PATHS.POKEMON_LIST,
             element: <PokemonListPageContainer />,
-            loader: async (): Promise<{ pokemons: Array<{ name: string }> }> => {
-              const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=3&offset=0`).then(
-                async (res) => await res.json()
+            loader: async (): Promise<{
+              pokemons: Array<{ name: string }>;
+            }> => {
+              const { results } = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=3&offset=0`).then((response) =>
+                response.json()
               );
               return {
-                pokemons: response.results,
+                pokemons: results,
               };
             },
+            path: PATHS.POKEMON_LIST,
           },
         ],
+        loader: ({ params }): Record<string, unknown> => {
+          if (!AUTHORIZED_LANGUAGES.includes(params.lang as string)) {
+            throw new Error('Lang not Found');
+          }
+          return {};
+        },
+        path: '/:lang',
       },
       {
-        path: '*',
         element: <NotFoundPageContainer />,
+        path: '*',
       },
     ],
+    element: (
+      <LayoutTemplateContainer>
+        <Outlet />
+      </LayoutTemplateContainer>
+    ),
+    errorElement: (
+      <LayoutTemplateContainer>
+        <NotFoundPageContainer />
+      </LayoutTemplateContainer>
+    ),
   },
 ];

templates/react-ssr-with-vite/src/constants.ts

@@ -1,12 +1,16 @@
 import { getEnv } from '@/helpers/getEnvHelper';
 
-export const AUTHORIZED_LANGUAGES: string[] = ['fr', 'en'];
-export const DEFAULT_LANGUAGE: string = 'fr';
+export const LanguageEnum = {
+  EN: 'en',
+  FR: 'fr',
+};
+export const AUTHORIZED_LANGUAGES: string[] = Object.values(LanguageEnum);
+export const DEFAULT_LANGUAGE: string = LanguageEnum.FR;
 
 export const PATHS = {
-  ROOT: '/',
   HOME: '/:lang/',
   POKEMON_LIST: '/:lang/pokemon-list/',
+  ROOT: '/',
 };
 export const IS_DEV = getEnv<boolean>('DEV');
 export const IS_PROD = getEnv<boolean>('PROD');

templates/react-ssr-with-vite/src/containers/HomePageContainer/HomePageContainer.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+
 import { ButtonContainer } from '@/containers/ButtonContainer';
 import { HomePage } from '@/pages';
 
@@ -8,9 +9,9 @@ export const HomePageContainer: React.FC = () => {
 
   return (
     <HomePage
-      title={t('pages.home.title')}
-      description={t('pages.home.description')}
       buttonContainer={<ButtonContainer />}
+      description={t('pages.home.description')}
+      title={t('pages.home.title')}
     />
   );
 };