From cce8aeea8967d296dad096836c891400ca31eb32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= Date: Mon, 18 Sep 2023 18:13:20 +0200 Subject: [PATCH] test preload --- site/source/components/App.tsx | 42 ++++---------- site/source/components/Provider.tsx | 85 +++++++++++++---------------- site/source/entries/entry-en.tsx | 32 ++++++++++- site/source/entries/entry-fr.tsx | 33 ++++++++++- site/source/entries/template.html | 4 ++ 5 files changed, 115 insertions(+), 81 deletions(-) diff --git a/site/source/components/App.tsx b/site/source/components/App.tsx index 17005b6e4..11d258084 100644 --- a/site/source/components/App.tsx +++ b/site/source/components/App.tsx @@ -1,3 +1,7 @@ +import { + createWorkerEngineClient, + WorkerEngineClient, +} from '@publicodes/worker' import { PromiseSSR, usePromise, @@ -39,12 +43,14 @@ import Simulateurs from '@/pages/simulateurs' import SimulateursEtAssistants from '@/pages/simulateurs-et-assistants' import Stats from '@/pages/statistiques/LazyStats' import { useSitePaths } from '@/sitePaths' +import { Actions } from '@/worker/socialWorkerEngine.worker' import Provider, { ProviderProps } from './Provider' import Redirections from './Redirections' type RootProps = { basename: ProviderProps['basename'] + workerClient: WorkerEngineClient } const TestWorkerEngineWrapper = () => ( @@ -280,38 +286,14 @@ const TestWorkerEngine = () => { ) } -export default function Root({ - basename, -}: // rulesPreTransform = (r) => r, -RootProps) { - // const situationVersion = useCreateWorkerEngine(basename) - // const engine = useMemo( - // () => engineFactory(rulesPreTransform(rules)), - - // // We need to keep [rules] in the dependency list for hot reload of the rules - // // in dev mode, even if ESLint think it is unnecessary since `rules` isn't - // // defined in the component scope. - // // - // // eslint-disable-next-line react-hooks/exhaustive-deps - // [rules] - // ) - - const [promiseSSR, setPromiseSSR] = useState(false) - - const elems = ( - - - - - - ) - +export default function Root({ basename, workerClient }: RootProps) { return ( - - {promiseSSR ? {elems} : elems} + + + + + ) } diff --git a/site/source/components/Provider.tsx b/site/source/components/Provider.tsx index 802e6720b..4251fdbee 100644 --- a/site/source/components/Provider.tsx +++ b/site/source/components/Provider.tsx @@ -1,5 +1,7 @@ -import NodeWorker from '@eshaz/web-worker' -import { createWorkerEngineClient } from '@publicodes/worker' +import { + createWorkerEngineClient, + WorkerEngineClient, +} from '@publicodes/worker' import { useWorkerEngine, WorkerEngineProvider } from '@publicodes/worker-react' import { OverlayProvider } from '@react-aria/overlays' import { ErrorBoundary } from '@sentry/react' @@ -16,7 +18,6 @@ import logo from '@/assets/images/logo-monentreprise.svg' import FeedbackForm from '@/components/Feedback/FeedbackForm' import { ThemeColorsProvider } from '@/components/utils/colors' import { DisableAnimationOnPrintProvider } from '@/components/utils/DisableAnimationContext' -import { Loader } from '@/design-system/icons/Loader' import { Container, Grid } from '@/design-system/layout' import DesignSystemThemeProvider from '@/design-system/root' import { H1, H4 } from '@/design-system/typography/heading' @@ -26,7 +27,6 @@ import { ClientOnly } from '@/hooks/useClientOnly' // import { workerClient } from '@/entries/entry-fr' import { EmbededContextProvider } from '@/hooks/useIsEmbedded' import { Actions } from '@/worker/socialWorkerEngine.worker' -import SocialeWorkerEngine from '@/worker/socialWorkerEngine.worker?worker' import { Message } from '../design-system' import * as safeLocalStorage from '../storage/safeLocalStorage' @@ -38,32 +38,19 @@ import { ServiceWorker } from './ServiceWorker' import { DarkModeProvider } from './utils/DarkModeContext' import { useSetupSafeSituation } from './utils/EngineContext' -console.time('start!') - -export const worker = import.meta.env.SSR - ? // Node doesn't support web worker :( upvote issue here: https://github.com/nodejs/node/issues/43583 - new NodeWorker( - new URL('./worker/socialWorkerEngine.worker.js', import.meta.url), - { type: 'module' } - ) - : new SocialeWorkerEngine() - -console.log('worker', worker) - -const workerClient = createWorkerEngineClient(worker, { - initParams: [{ basename: 'mon-entreprise' }], -}) - type SiteName = 'mon-entreprise' | 'infrance' export const SiteNameContext = createContext(null) export type ProviderProps = { basename: SiteName + workerClient: WorkerEngineClient children: ReactNode } const SituationSynchronize = ({ children }: { children: ReactNode }) => { + console.timeEnd('worker ready!') + const workerEngine = useWorkerEngine() useSetupSafeSituation(workerEngine) @@ -73,6 +60,7 @@ const SituationSynchronize = ({ children }: { children: ReactNode }) => { export default function Provider({ basename, + workerClient, children, }: ProviderProps): JSX.Element { return ( @@ -86,33 +74,36 @@ export default function Provider({ - }> - - - ( - // eslint-disable-next-line react/jsx-props-no-spreading - - )} - > - - {!import.meta.env.SSR && - 'serviceWorker' in navigator && } - - - - - - - {children} - - - - - - - - + + {!import.meta.env.SSR && 'serviceWorker' in navigator && ( + + )} + + + + + + + + + + ( + // eslint-disable-next-line react/jsx-props-no-spreading + + )} + > + {children} + + + + + + + diff --git a/site/source/entries/entry-en.tsx b/site/source/entries/entry-en.tsx index 172298bf6..d420238c6 100644 --- a/site/source/entries/entry-en.tsx +++ b/site/source/entries/entry-en.tsx @@ -1,7 +1,11 @@ +import NodeWorker from '@eshaz/web-worker' +import { createWorkerEngineClient } from '@publicodes/worker' import { I18nProvider } from '@react-aria/i18n' import { withProfiler } from '@sentry/react' import { createRoot, hydrateRoot } from 'react-dom/client' +import { Actions } from '@/worker/socialWorkerEngine.worker' + import App from '../components/App' import i18next from '../locales/i18n' // import ruleTranslations from '../locales/rules-en.yaml' @@ -10,15 +14,37 @@ import translations from '../locales/ui-en.yaml' import '../api/sentry' +const basename = 'infrance' + +console.time('worker ready!') + +export const worker = import.meta.env.SSR + ? // Node doesn't support web worker :( upvote issue here: https://github.com/nodejs/node/issues/43583 + new NodeWorker( + new URL('./worker/socialWorkerEngine.worker.js?nodejs', import.meta.url), + { type: 'module' } + ) + : new Worker( + new URL('@/worker/socialWorkerEngine.worker.js', import.meta.url), + { type: 'module', name: 'SocialeWorkerEngine' } + ) + +console.log('worker', worker) + +const workerClient = createWorkerEngineClient(worker, { + initParams: [{ basename }], +}) + const AppEn = () => ( - + {/* // translateRules('en', ruleTranslations, rules) // } - /> + /> */} ) diff --git a/site/source/entries/entry-fr.tsx b/site/source/entries/entry-fr.tsx index eebefa874..88eedcc05 100644 --- a/site/source/entries/entry-fr.tsx +++ b/site/source/entries/entry-fr.tsx @@ -1,12 +1,42 @@ +import NodeWorker from '@eshaz/web-worker' +import { createWorkerEngineClient } from '@publicodes/worker' import { I18nProvider } from '@react-aria/i18n' import { withProfiler } from '@sentry/react' import { createRoot, hydrateRoot } from 'react-dom/client' +import { Actions } from '@/worker/socialWorkerEngine.worker' + import App from '../components/App' import i18next from '../locales/i18n' import '../api/sentry' +const basename = 'mon-entreprise' + +console.log('import.meta.env.SSR', import.meta.env, IS_DEVELOPMENT) + +console.time('worker ready!') +// import.meta.env.DEV +// ? '../worker/socialWorkerEngine.worker.ts?nodejs' +// : + +export const worker = import.meta.env.SSR + ? // Node doesn't support web worker :( upvote issue here: https://github.com/nodejs/node/issues/43583 + new NodeWorker( + new URL('./worker/socialWorkerEngine.worker.js?nodejs', import.meta.url), + { type: 'module' } + ) + : new Worker( + new URL('@/worker/socialWorkerEngine.worker.js', import.meta.url), + { type: 'module', name: 'SocialeWorkerEngine' } + ) + +console.log('worker', worker) + +const workerClient = createWorkerEngineClient(worker, { + initParams: [{ basename }], +}) + declare global { interface Window { PRERENDER?: boolean @@ -16,7 +46,7 @@ declare global { const AppFr = () => { return ( - + ) } @@ -32,6 +62,7 @@ if (!import.meta.env.SSR) { if (window.PRERENDER) { container.innerHTML = container.innerHTML.trim() // Trim before hydrating to avoid mismatche error. const root = hydrateRoot(container, ) + // root.render() console.log('>>> hydrateRoot DONE', root) } else { const root = createRoot(container) diff --git a/site/source/entries/template.html b/site/source/entries/template.html index 794b78620..4f08c7038 100644 --- a/site/source/entries/template.html +++ b/site/source/entries/template.html @@ -238,5 +238,9 @@ > +