🐛 Babel dans les workers

J'ai eu un peu de mal à adapter la configuration Typescript pour le
typage de l'export des workers, mais passer par le paramètre "typeRoot"
du tsconfig semble changer les choses.

mon-entreprise/package.json

@@ -27,6 +27,7 @@
 		"@babel/preset-typescript": "^7.9.0",
 		"@types/cheerio": "^0.22.18",
 		"@types/js-yaml": "^3.12.2",
+		"@types/mocha": "^8.2.2",
 		"@types/react": "^17.0.0",
 		"@types/react-color": "^3.0.1",
 		"@types/react-dom": "^17.0.0",

mon-entreprise/source/components/SearchBar.tsx

@@ -1,13 +1,19 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { DottedName } from 'modele-social'
-import Worker from 'worker-loader!./SearchBar.worker.js' // TODO: importing a worker this way doesn't work with babel transpilation https://github.com/betagouv/mon-entreprise/issues/1554
 import RuleLink from './RuleLink'
 import './SearchBar.css'
 import { useEngine } from './utils/EngineContext'
 import { utils } from 'publicodes'
 
-const worker = new Worker()
+// TODO: We should use a normal import here
+// We use a dynamic import to work around a typing problem https://github.com/betagouv/mon-entreprise/pull/1616#issuecomment-858629506
+let worker: any
+;(async function () {
+	console.log('okok')
+	const Worker = ((await import('./SearchBar.worker.js')) as any).default
+	worker = new Worker()
+})()
 
 type SearchBarProps = {
 	showListByDefault?: boolean
@@ -91,7 +97,7 @@ export default function SearchBar({
 			rules: searchIndex,
 		})
 
-		worker.onmessage = ({ data: results }) => setResults(results)
+		worker.onmessage = ({ data: results }: any) => setResults(results)
 		return () => {
 			worker.onmessage = null
 		}

mon-entreprise/source/components/SearchBar.worker.js

@@ -1,6 +1,6 @@
 import Fuse from 'fuse.js'
 
-let searchWeights = [
+const searchWeights = [
 	{
 		name: 'espace',
 		weight: 0.6,

mon-entreprise/source/components/conversation/select/SelectTauxRisque.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import Worker from 'worker-loader!./SelectTauxRisque.worker.js'
+import Worker from './SelectTauxRisque.worker.js'
 const worker = new Worker()
 
 function SelectComponent({ onChange, onSubmit, options }) {

mon-entreprise/source/types/worker-loader.d.ts

@@ -1,7 +1,7 @@
-declare module 'worker-loader*' {
+declare module '*.worker.js' {
 	class WebpackWorker extends Worker {
 		constructor()
 	}
 
-	export = WebpackWorker
+	export default WebpackWorker
 }

mon-entreprise/tsconfig.json

@@ -19,8 +19,9 @@
 			"Selectors/*": ["selectors/*"],
 			"Types/*": ["types/*"]
 		},
+		"typeRoots": ["./types/", "./node_modules/@types"],
 		"noEmit": true,
 		"strict": true
 	},
-	"include": ["types", "source", "test/persistence.test.ts", "dev-server.js"]
+	"include": ["source", "test/persistence.test.ts", "dev-server.js"]
 }

mon-entreprise/webpack.common.js

@@ -50,6 +50,11 @@ module.exports.commonLoaders = ({ legacy = false } = {}) => {
 	}
 
 	return [
+		{
+			test: /\.worker\.(js|ts|tsx)$/,
+			use: [babelLoader, 'worker-loader'],
+			exclude: /node_modules|dist/,
+		},
 		{
 			test: /\.(js|ts|tsx)$/,
 			use: babelLoader,

yarn.lock

@@ -2367,6 +2367,11 @@
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-8.2.0.tgz#3eb56d13a1de1d347ecb1957c6860c911704bc44"
   integrity sha512-/Sge3BymXo4lKc31C8OINJgXLaw+7vL1/L1pGiBNpGrBiT8FQiaFpSYV0uhTaG4y78vcMBTMFsWaHDvuD+xGzQ==
 
+"@types/mocha@^8.2.2":
+  version "8.2.2"
+  resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-8.2.2.tgz#91daa226eb8c2ff261e6a8cbf8c7304641e095e0"
+  integrity sha512-Lwh0lzzqT5Pqh6z61P3c3P5nm6fzQK/MMHl9UKeneAeInVflBSz1O2EkX6gM6xfJd7FBXBY5purtLx7fUiZ7Hw==
+
 "@types/nearley@^2.11.1":
   version "2.11.1"
   resolved "https://registry.yarnpkg.com/@types/nearley/-/nearley-2.11.1.tgz#6ac3f57c00ca28071a1774ec72d2e45750f21420"