build: init migration to vite

- update react to 18 - migrate to vite
InseeFr · Dec 12, 2023 · 9e1af37 · 9e1af37
1 parent 41f2323
commit 9e1af37
Show file tree

Hide file tree

Showing 6 changed files with 595 additions and 42 deletions.
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
@@ -35,6 +35,7 @@ rules:
   react/prefer-stateless-function: 0
   react/no-children-prop: 0
   react/forbid-prop-types: 0
+  react/react-in-jsx-scope: 0
   react/no-unescaped-entities: 0
   prettier/prettier:
     [

diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,12 +24,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <script src="%PUBLIC_URL%/env-config.js"></script>
+    <script src="/env-config.js"></script>
     <title>Pogues</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/package.json b/package.json
@@ -55,11 +55,11 @@
     "monaco-editor": "^0.26.1",
     "oidc-client": "^1.11.5",
     "prop-types": "15.7.2",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-csv-reader": "^3.1.2",
     "react-dnd": "2.6.0",
     "react-dnd-html5-backend": "2.6.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-loader-spinner": "^4.0.0",
     "react-modal": "3.14.3",
     "react-monaco-editor": "^0.44.0",
@@ -80,6 +80,7 @@
     "vtl-2-0-antlr-tools-ts": "^0.1.8"
   },
   "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
     "bootstrap-sass": "3.4.1",
     "concurrently": "6.2.1",
     "cross-env": "^7.0.3",
@@ -103,16 +104,17 @@
     "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
     "restify": "8.5.1",
-    "shx": "^0.3.3"
+    "shx": "^0.3.3",
+    "vite": "^5.0.8"
   },
   "scripts": {
     "test": "react-scripts test --coverage -i",
     "testw": "react-scripts test --watch",
-    "start": "react-scripts start",
+    "start": "vite",
     "start-insee": "cross-env REACT_APP_INSEE=true react-scripts start",
     "dev:server": "concurrently \"npm run server\" \"npm run start\"",
     "server": "node ./fake-server/server.js",
-    "build": "npm run generate-entrypoint && react-scripts --max-old-space-size=4096 build",
+    "build": "npm run generate-entrypoint && vite build",
     "build-insee": "cross-env REACT_APP_INSEE=true react-scripts build",
     "lint": "eslint ./src -f table || true",
     "lint:fix": "eslint ./src -f table --fix || true",

diff --git a/src/index.js → src/index.jsx b/src/index.js → src/index.jsx
@@ -1,23 +1,24 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { BrowserRouter } from 'react-router-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import configureStore from 'store/configure-store';
 import { AuthProvider } from './auth';
+import Router from './router';
 import { getInit } from './utils/remote-api';
-import configureStore from 'store/configure-store';
-import Router from 'router';
+
+const container = document.getElementById('root');
 
 const renderApp = (Component, init) => {
   const store = configureStore(init);
-  ReactDOM.render(
+  const root = createRoot(container);
+  root.render(
     <Provider store={store}>
       <AuthProvider store={store}>
         <BrowserRouter>
           <Component />
         </BrowserRouter>
       </AuthProvider>
     </Provider>,
-    document.getElementById('root'),
   );
 };
 

diff --git a/src/router.jsx b/src/router.jsx
@@ -1,15 +1,14 @@
-import React from 'react';
-import { Route, Redirect, useLocation, Switch } from 'react-router-dom';
+import { Redirect, Route, Switch, useLocation } from 'react-router-dom';
 
-import { App } from 'layout/app';
-import { PageHome } from 'layout/page-home';
-import { PageSearchQuestionnaire } from 'layout/page-search-questionnaire';
-import { PageQuestionnaire } from 'layout/page-questionnaire';
-import { QuestionnaireComposition } from 'layout/questionnaire-composition';
-import { QuestionnaireTcmComposition } from 'layout/questionnaire-tcm-composition';
-import { QuestionnaireMerge } from 'layout/questionnaire-merge';
-import { DuplicateVariables } from 'layout/duplicate-variables';
 import { secure } from 'auth';
+import { App } from './layout/app';
+import { DuplicateVariables } from './layout/duplicate-variables';
+import { PageHome } from './layout/page-home';
+import { PageQuestionnaire } from './layout/page-questionnaire';
+import { PageSearchQuestionnaire } from './layout/page-search-questionnaire';
+import { QuestionnaireComposition } from './layout/questionnaire-composition';
+import { QuestionnaireMerge } from './layout/questionnaire-merge';
+import { QuestionnaireTcmComposition } from './layout/questionnaire-tcm-composition';
 
 function Router() {
   const { pathname } = useLocation();