MAJ Vite 2.9

CONTRIBUTING.md

@@ -191,12 +191,6 @@ yarn preview:mon-entreprise
 yarn preview:infrance
 ```
 
-### Worker en développement
-
-Nous utilisons [vite](https://vitejs.dev/) pour le serveur de développement et comme bundler. Aucun bundling n'est fait en développement, ce qui accélère considérablement le temps de rechargement de l'app à chaque modification. Pour cela, la syntaxe ESModule est utilisée partout, y compris dans les worker. Malheureusement, tous les navigateurs ne [supportent pas encore cette fonctionalité](https://caniuse.com/mdn-api_worker_worker_ecmascript_modules) (en particulier [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1247687)).
-
-Par conséquent, les workers ne fonctionnent pas en mode développement sous firefox. Ce n'est pas critique mais il faut le savoir.
-
 ### Tests
 
 Pour tester les règles, il est recommandé de:

site/.storybook/main.cjs

@@ -1,3 +1,4 @@
+// TODO: Move to ESModule
 const { loadConfigFromFile, mergeConfig } = require('vite')
 const reactPlugin = require('@vitejs/plugin-react')
 const path = require('path')
@@ -10,14 +11,13 @@ module.exports = {
 	addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
 	framework: '@storybook/react',
 	core: {
-		builder: 'storybook-builder-vite',
+		builder: '@storybook/builder-vite',
 	},
 	features: {
 		// Auto title not supported when not using storyStoreV7
 		// See https://github.com/eirslett/storybook-builder-vite/issues/201
 		storyStoreV7: true,
 	},
-
 	typescript: (config) => ({
 		...config,
 		reactDocgenTypescriptOptions: {
@@ -35,12 +35,10 @@ module.exports = {
 	async viteFinal(config, { configType }) {
 		const { config: userConfig } = await loadConfigFromFile(
 			path.resolve(__dirname, '../vite.config.ts')
-		)
+		) // Keep storybook plugins in storybookPlugins
 
-		// Keep storybook plugins in storybookPlugins
 		const storybookPlugins = config.plugins
 		config.plugins = []
-
 		const conf = mergeConfig(config, {
 			...userConfig,
 			base: configType === 'PRODUCTION' ? '/dev/storybook/' : userConfig.base,
@@ -51,14 +49,15 @@ module.exports = {
 						!(Array.isArray(plugin) && plugin[0].name === 'vite:react-babel')
 				),
 				reactPlugin({
-					babel: { plugins: ['babel-plugin-styled-components'] },
+					babel: {
+						plugins: ['babel-plugin-styled-components'],
+					},
 					// Copied from https://github.com/eirslett/storybook-builder-vite/blob/917d8868943ec5f58c9c2c6900e196637f0d05e3/packages/storybook-builder-vite/vite-config.ts#L95
 					// Do not treat story files as HMR boundaries, storybook itself needs to handle them.
 					exclude: [/\.stories\.([tj])sx?$/, /node_modules/],
 				}),
 			],
 		})
-
 		return conf
 	},
 

site/package.json

@@ -10,6 +10,7 @@
 	},
 	"type": "module",
 	"private": true,
+	"main": "./source/entry-fr.tsx",
 	"engines": {
 		"node": ">=12.16.1"
 	},
@@ -111,6 +112,7 @@
 		"@storybook/addon-essentials": "^6.5.0-alpha.49",
 		"@storybook/addon-interactions": "^6.5.0-alpha.49",
 		"@storybook/addon-links": "^6.5.0-alpha.49",
+		"@storybook/builder-vite": "^0.1.23",
 		"@storybook/react": "^6.5.0-alpha.49",
 		"@storybook/testing-library": "^0.0.9",
 		"@types/ramda": "^0.26.43",
@@ -135,11 +137,10 @@
 		"rimraf": "^3.0.2",
 		"rollup-plugin-toml": "^1.0.0",
 		"serve-static": "^1.14.2",
-		"storybook-builder-vite": "^0.1.22",
 		"ts-morph": "^13.0.3",
 		"ts-node": "^10.5.0",
 		"typescript": "^4.3.2",
-		"vite": "^2.8.6",
+		"vite": "^2.9.1",
 		"vite-plugin-shim-react-pdf": "^1.0.4",
 		"vitest": "^0.2.5",
 		"xml2js": "^0.4.23",

site/source/entry-server.tsx

@@ -2,8 +2,8 @@ import ReactDOMServer from 'react-dom/server'
 import { SSRProvider } from '@react-aria/ssr'
 import { StaticRouter } from 'react-router-dom'
 import i18next from './locales/i18n'
-import { AppFr } from './entry.fr'
-import { AppEn } from './entry.en'
+import { AppFr } from './entry-fr'
+import { AppEn } from './entry-en'
 import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
 import { FilledContext, HelmetProvider } from 'react-helmet-async'
 

site/source/template.html

@@ -189,13 +189,15 @@
 					document.documentElement,
 					...document.querySelectorAll('[data-js-color-element]'),
 				].forEach((element) => {
-					element.style.setProperty('--COLOR_HUE', iframeColor ? iframeColor[0] : '220deg')
+					element.style.setProperty(
+						'--COLOR_HUE',
+						iframeColor ? iframeColor[0] : '220deg'
+					)
 					element.style.setProperty(
 						'--COLOR_SATURATION',
 						iframeColor ? iframeColor[1] + '%' : '100%'
 					)
 				})
-
 			} catch (e) {
 				console.error(e)
 			}

site/vite.config.ts

@@ -71,7 +71,7 @@ export default defineConfig(({ command }) => ({
 			sites: {
 				'mon-entreprise': {
 					lang: 'fr',
-					entry: '/source/entry.fr.tsx',
+					entry: '/source/entry-fr.tsx',
 					title:
 						"mon-entreprise.urssaf.fr : L'assistant officiel du créateur d'entreprise",
 					description:
@@ -80,7 +80,7 @@ export default defineConfig(({ command }) => ({
 				},
 				infrance: {
 					lang: 'en',
-					entry: '/source/entry.en.tsx',
+					entry: '/source/entry-en.tsx',
 					title:
 						'My company in France: A step-by-step guide to start a business in France',
 					description:
@@ -106,6 +106,10 @@ export default defineConfig(({ command }) => ({
 		},
 	},
 	optimizeDeps: {
+		// TODO: for some reason (ViteJS bug?) we need to define a entry file in the
+		// "main" field of package.json. Ideally this shouldn't be required. It's
+		// not possible to write comments in package.json here it is.
+		entries: ['./source/entry-fr.tsx', './source/entry-en.tsx'],
 		exclude: ['publicodes-react', 'publicodes'],
 		// Optimize cjs deps from publicodes
 		include: ['publicodes > moo', 'publicodes > nearley', 'yaml'],