betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

test preload

engine-in-web-worker
Jérémy Rialland 2023-09-18 18:13:20 +02:00
parent a76a6e4fb1
commit cce8aeea89
5 changed files with 115 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
site/source/components/App.tsx
View File

@ -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<Actions>
}
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 = (
<Provider basename={basename}>
<Redirections>
<Router />
</Redirections>
</Provider>
)
export default function Root({ basename, workerClient }: RootProps) {
return (
<StrictMode>
<button onClick={() => setPromiseSSR((v) => !v)}>
use is {promiseSSR ? 'enabled' : 'disabled'}
</button>
{promiseSSR ? <PromiseSSR>{elems}</PromiseSSR> : elems}
<Provider basename={basename} workerClient={workerClient}>
<Redirections>
<Router />
</Redirections>
</Provider>
</StrictMode>
)
}

85
site/source/components/Provider.tsx
View File

@ -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<Actions>(worker, {
initParams: [{ basename: 'mon-entreprise' }],
})
type SiteName = 'mon-entreprise' | 'infrance'
export const SiteNameContext = createContext<SiteName | null>(null)
export type ProviderProps = {
basename: SiteName
workerClient: WorkerEngineClient<Actions>
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({
<I18nextProvider i18n={i18next}>
<ReduxProvider store={store}>
<BrowserRouterProvider basename={basename}>
<Suspense fallback={<Loader />}>
<WorkerEngineProvider workerClient={workerClient}>
<SituationSynchronize>
<ErrorBoundary
fallback={(errorData) => (
// eslint-disable-next-line react/jsx-props-no-spreading
<ErrorFallback {...errorData} />
)}
>
<ClientOnly>
{!import.meta.env.SSR &&
'serviceWorker' in navigator && <ServiceWorker />}
</ClientOnly>
<IframeResizer />
<OverlayProvider>
<ThemeColorsProvider>
<DisableAnimationOnPrintProvider>
<SiteNameContext.Provider value={basename}>
{children}
</SiteNameContext.Provider>
</DisableAnimationOnPrintProvider>
</ThemeColorsProvider>
</OverlayProvider>
</ErrorBoundary>
</SituationSynchronize>
</WorkerEngineProvider>
</Suspense>
<ClientOnly>
{!import.meta.env.SSR && 'serviceWorker' in navigator && (
<ServiceWorker />
)}
</ClientOnly>
<IframeResizer />
<OverlayProvider>
<ThemeColorsProvider>
<DisableAnimationOnPrintProvider>
<SiteNameContext.Provider value={basename}>
<WorkerEngineProvider
workerClient={workerClient}
loading={null}
>
<SituationSynchronize>
<ErrorBoundary
fallback={(errorData) => (
// eslint-disable-next-line react/jsx-props-no-spreading
<ErrorFallback {...errorData} />
)}
>
{children}
</ErrorBoundary>
</SituationSynchronize>
</WorkerEngineProvider>
</SiteNameContext.Provider>
</DisableAnimationOnPrintProvider>
</ThemeColorsProvider>
</OverlayProvider>
</BrowserRouterProvider>
</ReduxProvider>
</I18nextProvider>

32
site/source/entries/entry-en.tsx
View File

@ -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<Actions>(worker, {
initParams: [{ basename }],
})
const AppEn = () => (
<I18nProvider locale="en-GB">
<App
basename="infrance"
<App basename={basename} workerClient={workerClient} />
{/* <App
basename=""
// TODO: translate worker
// rulesPreTransform={(rules) =>
// translateRules('en', ruleTranslations, rules)
// }
/>
/> */}
</I18nProvider>
)

33
site/source/entries/entry-fr.tsx
View File

@ -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<Actions>(worker, {
initParams: [{ basename }],
})
declare global {
interface Window {
PRERENDER?: boolean
@ -16,7 +46,7 @@ declare global {
const AppFr = () => {
return (
<I18nProvider locale="fr-FR">
<App basename="mon-entreprise" />
<App basename={basename} workerClient={workerClient} />
</I18nProvider>
)
}
@ -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, <AppFrWithProfiler />)
// root.render(<AppFrWithProfiler />)
console.log('>>> hydrateRoot DONE', root)
} else {
const root = createRoot(container)

4
site/source/entries/template.html
View File

@ -238,5 +238,9 @@
></script>
<script type="module" src="{{ entry }}"></script>
<script
type="module"
src="/source/worker/socialWorkerEngine.worker.ts"
></script>
</body>
</html>