2022-05-02 12:18:16 +02:00
|
|
|
/* global location */
|
|
|
|
import '../build/polyfills/polyfill-module'
|
|
|
|
// @ts-ignore react-dom/client exists when using React 18
|
|
|
|
import ReactDOMClient from 'react-dom/client'
|
2022-10-24 09:31:52 +02:00
|
|
|
import React, { use } from 'react'
|
2022-10-19 17:09:49 +02:00
|
|
|
import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack/client'
|
2022-05-02 12:18:16 +02:00
|
|
|
|
2022-10-09 17:08:51 +02:00
|
|
|
import { HeadManagerContext } from '../shared/lib/head-manager-context'
|
2022-10-22 09:56:48 +02:00
|
|
|
import { GlobalLayoutRouterContext } from '../shared/lib/app-router-context'
|
2022-09-19 10:16:53 +02:00
|
|
|
|
2022-05-02 12:18:16 +02:00
|
|
|
/// <reference types="react-dom/experimental" />
|
|
|
|
|
2022-07-10 19:18:48 +02:00
|
|
|
// Override chunk URL mapping in the webpack runtime
|
|
|
|
// https://github.com/webpack/webpack/blob/2738eebc7880835d88c727d364ad37f3ec557593/lib/RuntimeGlobals.js#L204
|
|
|
|
|
|
|
|
declare global {
|
|
|
|
const __webpack_require__: any
|
|
|
|
}
|
|
|
|
|
|
|
|
// eslint-disable-next-line no-undef
|
|
|
|
const getChunkScriptFilename = __webpack_require__.u
|
|
|
|
const chunkFilenameMap: any = {}
|
|
|
|
|
|
|
|
// eslint-disable-next-line no-undef
|
|
|
|
__webpack_require__.u = (chunkId: any) => {
|
|
|
|
return chunkFilenameMap[chunkId] || getChunkScriptFilename(chunkId)
|
|
|
|
}
|
|
|
|
|
|
|
|
// Ignore the module ID transform in client.
|
|
|
|
// eslint-disable-next-line no-undef
|
|
|
|
// @ts-expect-error TODO: fix type
|
2022-12-07 17:34:56 +01:00
|
|
|
self.__next_require__ = (id: string) => {
|
|
|
|
const modId = id.replace(/\?.+$/, '')
|
|
|
|
return __webpack_require__(modId)
|
|
|
|
}
|
2022-07-10 19:18:48 +02:00
|
|
|
|
|
|
|
// eslint-disable-next-line no-undef
|
2022-07-11 17:23:21 +02:00
|
|
|
;(self as any).__next_chunk_load__ = (chunk: string) => {
|
2022-07-13 07:00:56 +02:00
|
|
|
if (!chunk) return Promise.resolve()
|
2022-07-10 19:18:48 +02:00
|
|
|
const [chunkId, chunkFileName] = chunk.split(':')
|
|
|
|
chunkFilenameMap[chunkId] = `static/chunks/${chunkFileName}.js`
|
|
|
|
|
|
|
|
// @ts-ignore
|
|
|
|
// eslint-disable-next-line no-undef
|
|
|
|
return __webpack_chunk_load__(chunkId)
|
|
|
|
}
|
|
|
|
|
2022-05-02 12:18:16 +02:00
|
|
|
const appElement: HTMLElement | Document | null = document
|
|
|
|
|
|
|
|
const getCacheKey = () => {
|
|
|
|
const { pathname, search } = location
|
|
|
|
return pathname + search
|
|
|
|
}
|
|
|
|
|
|
|
|
const encoder = new TextEncoder()
|
|
|
|
|
|
|
|
let initialServerDataBuffer: string[] | undefined = undefined
|
2022-05-26 12:37:49 +02:00
|
|
|
let initialServerDataWriter: ReadableStreamDefaultController | undefined =
|
|
|
|
undefined
|
2022-05-02 12:18:16 +02:00
|
|
|
let initialServerDataLoaded = false
|
|
|
|
let initialServerDataFlushed = false
|
|
|
|
|
2022-09-12 14:45:37 +02:00
|
|
|
function nextServerDataCallback(
|
|
|
|
seg: [isBootStrap: 0] | [isNotBootstrap: 1, responsePartial: string]
|
|
|
|
): void {
|
2022-05-02 12:18:16 +02:00
|
|
|
if (seg[0] === 0) {
|
|
|
|
initialServerDataBuffer = []
|
|
|
|
} else {
|
|
|
|
if (!initialServerDataBuffer)
|
|
|
|
throw new Error('Unexpected server data: missing bootstrap script.')
|
|
|
|
|
|
|
|
if (initialServerDataWriter) {
|
2022-09-12 14:45:37 +02:00
|
|
|
initialServerDataWriter.enqueue(encoder.encode(seg[1]))
|
2022-05-02 12:18:16 +02:00
|
|
|
} else {
|
2022-09-12 14:45:37 +02:00
|
|
|
initialServerDataBuffer.push(seg[1])
|
2022-05-02 12:18:16 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// There might be race conditions between `nextServerDataRegisterWriter` and
|
|
|
|
// `DOMContentLoaded`. The former will be called when React starts to hydrate
|
|
|
|
// the root, the latter will be called when the DOM is fully loaded.
|
|
|
|
// For streaming, the former is called first due to partial hydration.
|
|
|
|
// For non-streaming, the latter can be called first.
|
|
|
|
// Hence, we use two variables `initialServerDataLoaded` and
|
|
|
|
// `initialServerDataFlushed` to make sure the writer will be closed and
|
|
|
|
// `initialServerDataBuffer` will be cleared in the right time.
|
2022-05-26 12:37:49 +02:00
|
|
|
function nextServerDataRegisterWriter(ctr: ReadableStreamDefaultController) {
|
2022-05-02 12:18:16 +02:00
|
|
|
if (initialServerDataBuffer) {
|
|
|
|
initialServerDataBuffer.forEach((val) => {
|
2022-05-26 12:37:49 +02:00
|
|
|
ctr.enqueue(encoder.encode(val))
|
2022-05-02 12:18:16 +02:00
|
|
|
})
|
|
|
|
if (initialServerDataLoaded && !initialServerDataFlushed) {
|
2022-05-26 12:37:49 +02:00
|
|
|
ctr.close()
|
2022-05-02 12:18:16 +02:00
|
|
|
initialServerDataFlushed = true
|
|
|
|
initialServerDataBuffer = undefined
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-05-26 12:37:49 +02:00
|
|
|
initialServerDataWriter = ctr
|
2022-05-02 12:18:16 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// When `DOMContentLoaded`, we can close all pending writers to finish hydration.
|
|
|
|
const DOMContentLoaded = function () {
|
|
|
|
if (initialServerDataWriter && !initialServerDataFlushed) {
|
|
|
|
initialServerDataWriter.close()
|
|
|
|
initialServerDataFlushed = true
|
|
|
|
initialServerDataBuffer = undefined
|
|
|
|
}
|
|
|
|
initialServerDataLoaded = true
|
|
|
|
}
|
|
|
|
// It's possible that the DOM is already loaded.
|
|
|
|
if (document.readyState === 'loading') {
|
|
|
|
document.addEventListener('DOMContentLoaded', DOMContentLoaded, false)
|
|
|
|
} else {
|
|
|
|
DOMContentLoaded()
|
|
|
|
}
|
|
|
|
|
2022-10-09 17:08:51 +02:00
|
|
|
const nextServerDataLoadingGlobal = ((self as any).__next_f =
|
|
|
|
(self as any).__next_f || [])
|
2022-05-02 12:18:16 +02:00
|
|
|
nextServerDataLoadingGlobal.forEach(nextServerDataCallback)
|
|
|
|
nextServerDataLoadingGlobal.push = nextServerDataCallback
|
|
|
|
|
|
|
|
function createResponseCache() {
|
|
|
|
return new Map<string, any>()
|
|
|
|
}
|
|
|
|
const rscCache = createResponseCache()
|
|
|
|
|
2022-09-19 14:17:20 +02:00
|
|
|
function useInitialServerResponse(cacheKey: string): Promise<JSX.Element> {
|
2022-07-13 01:43:44 +02:00
|
|
|
const response = rscCache.get(cacheKey)
|
|
|
|
if (response) return response
|
|
|
|
|
|
|
|
const readable = new ReadableStream({
|
|
|
|
start(controller) {
|
|
|
|
nextServerDataRegisterWriter(controller)
|
2022-07-11 17:23:21 +02:00
|
|
|
},
|
|
|
|
})
|
|
|
|
|
2022-07-21 14:38:04 +02:00
|
|
|
const newResponse = createFromReadableStream(readable)
|
2022-05-02 12:18:16 +02:00
|
|
|
|
2022-05-26 12:37:49 +02:00
|
|
|
rscCache.set(cacheKey, newResponse)
|
|
|
|
return newResponse
|
2022-05-02 12:18:16 +02:00
|
|
|
}
|
|
|
|
|
2022-09-19 14:17:20 +02:00
|
|
|
function ServerRoot({ cacheKey }: { cacheKey: string }): JSX.Element {
|
2022-05-02 12:18:16 +02:00
|
|
|
React.useEffect(() => {
|
|
|
|
rscCache.delete(cacheKey)
|
|
|
|
})
|
2022-07-21 14:38:04 +02:00
|
|
|
const response = useInitialServerResponse(cacheKey)
|
2022-09-15 21:28:12 +02:00
|
|
|
const root = use(response)
|
2022-05-02 12:18:16 +02:00
|
|
|
return root
|
|
|
|
}
|
|
|
|
|
2022-10-28 02:30:07 +02:00
|
|
|
const StrictModeIfEnabled = process.env.__NEXT_STRICT_MODE_APP
|
|
|
|
? React.StrictMode
|
|
|
|
: React.Fragment
|
|
|
|
|
2022-05-02 12:18:16 +02:00
|
|
|
function Root({ children }: React.PropsWithChildren<{}>): React.ReactElement {
|
2022-09-19 10:16:53 +02:00
|
|
|
React.useEffect(() => {
|
2022-10-31 18:50:35 +01:00
|
|
|
if (process.env.__NEXT_ANALYTICS_ID) {
|
|
|
|
require('./performance-relayer-app')()
|
|
|
|
}
|
2022-09-19 10:16:53 +02:00
|
|
|
}, [])
|
|
|
|
|
2022-05-02 12:18:16 +02:00
|
|
|
if (process.env.__NEXT_TEST_MODE) {
|
|
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
|
|
React.useEffect(() => {
|
|
|
|
window.__NEXT_HYDRATED = true
|
|
|
|
|
|
|
|
if (window.__NEXT_HYDRATED_CB) {
|
|
|
|
window.__NEXT_HYDRATED_CB()
|
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
}
|
|
|
|
|
|
|
|
return children as React.ReactElement
|
|
|
|
}
|
|
|
|
|
2022-09-19 14:17:20 +02:00
|
|
|
function RSCComponent(props: any): JSX.Element {
|
2022-05-02 12:18:16 +02:00
|
|
|
const cacheKey = getCacheKey()
|
2022-07-13 01:43:44 +02:00
|
|
|
return <ServerRoot {...props} cacheKey={cacheKey} />
|
2022-05-02 12:18:16 +02:00
|
|
|
}
|
|
|
|
|
2022-07-21 14:38:04 +02:00
|
|
|
export function hydrate() {
|
2022-10-14 22:55:09 +02:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
const rootLayoutMissingTagsError = (self as any)
|
|
|
|
.__next_root_layout_missing_tags_error
|
2022-10-25 09:53:13 +02:00
|
|
|
const HotReload: typeof import('./components/react-dev-overlay/hot-reloader-client').default =
|
|
|
|
require('./components/react-dev-overlay/hot-reloader-client')
|
|
|
|
.default as typeof import('./components/react-dev-overlay/hot-reloader-client').default
|
2022-10-14 22:55:09 +02:00
|
|
|
|
|
|
|
// Don't try to hydrate if root layout is missing required tags, render error instead
|
|
|
|
if (rootLayoutMissingTagsError) {
|
|
|
|
const reactRootElement = document.createElement('div')
|
|
|
|
document.body.appendChild(reactRootElement)
|
|
|
|
const reactRoot = (ReactDOMClient as any).createRoot(reactRootElement)
|
|
|
|
|
|
|
|
reactRoot.render(
|
2022-10-22 09:56:48 +02:00
|
|
|
<GlobalLayoutRouterContext.Provider
|
|
|
|
value={{
|
|
|
|
tree: rootLayoutMissingTagsError.tree,
|
|
|
|
changeByServerResponse: () => {},
|
|
|
|
focusAndScrollRef: {
|
|
|
|
apply: false,
|
2022-10-14 22:55:09 +02:00
|
|
|
},
|
|
|
|
}}
|
2022-10-22 09:56:48 +02:00
|
|
|
>
|
|
|
|
<HotReload
|
|
|
|
assetPrefix={rootLayoutMissingTagsError.assetPrefix}
|
|
|
|
// initialState={{
|
|
|
|
// rootLayoutMissingTagsError: {
|
|
|
|
// missingTags: rootLayoutMissingTagsError.missingTags,
|
|
|
|
// },
|
|
|
|
// }}
|
|
|
|
/>
|
|
|
|
</GlobalLayoutRouterContext.Provider>
|
2022-10-14 22:55:09 +02:00
|
|
|
)
|
|
|
|
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-09-09 14:44:12 +02:00
|
|
|
const reactEl = (
|
2022-10-28 02:30:07 +02:00
|
|
|
<StrictModeIfEnabled>
|
2022-10-09 17:08:51 +02:00
|
|
|
<HeadManagerContext.Provider
|
|
|
|
value={{
|
|
|
|
appDir: true,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Root>
|
|
|
|
<RSCComponent />
|
|
|
|
</Root>
|
|
|
|
</HeadManagerContext.Provider>
|
2022-10-28 02:30:07 +02:00
|
|
|
</StrictModeIfEnabled>
|
2022-09-09 14:44:12 +02:00
|
|
|
)
|
|
|
|
|
|
|
|
const isError = document.documentElement.id === '__next_error__'
|
|
|
|
const reactRoot = isError
|
|
|
|
? (ReactDOMClient as any).createRoot(appElement)
|
2022-09-24 20:10:40 +02:00
|
|
|
: (React as any).startTransition(() =>
|
|
|
|
(ReactDOMClient as any).hydrateRoot(appElement, reactEl)
|
|
|
|
)
|
2022-09-09 14:44:12 +02:00
|
|
|
if (isError) {
|
|
|
|
reactRoot.render(reactEl)
|
|
|
|
}
|
2022-05-02 12:18:16 +02:00
|
|
|
}
|