remote-components 0.0.4 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/html/host.cjs +84 -28
- package/dist/html/host.cjs.map +1 -1
- package/dist/html/host.js +84 -28
- package/dist/html/host.js.map +1 -1
- package/dist/next/client.cjs +738 -0
- package/dist/next/client.cjs.map +1 -0
- package/dist/next/client.d.ts +11 -0
- package/dist/next/client.js +704 -0
- package/dist/next/client.js.map +1 -0
- package/dist/next/remote/render-client.cjs +19 -2
- package/dist/next/remote/render-client.cjs.map +1 -1
- package/dist/next/remote/render-client.js +10 -3
- package/dist/next/remote/render-client.js.map +1 -1
- package/dist/next/remote/render-server.cjs +1 -2
- package/dist/next/remote/render-server.cjs.map +1 -1
- package/dist/next/remote/render-server.js +1 -2
- package/dist/next/remote/render-server.js.map +1 -1
- package/dist/next/{host → server}/app-client.cjs +19 -3
- package/dist/next/server/app-client.cjs.map +1 -0
- package/dist/next/{host → server}/app-client.d.ts +1 -1
- package/dist/next/{host → server}/app-client.js +9 -3
- package/dist/next/server/app-client.js.map +1 -0
- package/dist/next/server/app-server.cjs.map +1 -0
- package/dist/next/server/app-server.js.map +1 -0
- package/dist/next/server/pages-client.cjs.map +1 -0
- package/dist/next/server/pages-client.js.map +1 -0
- package/dist/next/server/pages-server.cjs.map +1 -0
- package/dist/next/server/pages-server.js.map +1 -0
- package/dist/shared/client/remote-component.cjs +27 -19
- package/dist/shared/client/remote-component.cjs.map +1 -1
- package/dist/shared/client/remote-component.d.ts +2 -2
- package/dist/shared/client/remote-component.js +27 -19
- package/dist/shared/client/remote-component.js.map +1 -1
- package/dist/shared/ssr/fetch-remote-component.cjs +3 -1
- package/dist/shared/ssr/fetch-remote-component.cjs.map +1 -1
- package/dist/shared/ssr/fetch-remote-component.js +3 -1
- package/dist/shared/ssr/fetch-remote-component.js.map +1 -1
- package/package.json +37 -9
- package/dist/next/host/app-client.cjs.map +0 -1
- package/dist/next/host/app-client.js.map +0 -1
- package/dist/next/host/app-server.cjs.map +0 -1
- package/dist/next/host/app-server.js.map +0 -1
- package/dist/next/host/pages-client.cjs.map +0 -1
- package/dist/next/host/pages-client.js.map +0 -1
- package/dist/next/host/pages-server.cjs.map +0 -1
- package/dist/next/host/pages-server.js.map +0 -1
- /package/dist/next/{host → server}/app-server.cjs +0 -0
- /package/dist/next/{host → server}/app-server.d.ts +0 -0
- /package/dist/next/{host → server}/app-server.js +0 -0
- /package/dist/next/{host → server}/pages-client.cjs +0 -0
- /package/dist/next/{host → server}/pages-client.d.ts +0 -0
- /package/dist/next/{host → server}/pages-client.js +0 -0
- /package/dist/next/{host → server}/pages-server.cjs +0 -0
- /package/dist/next/{host → server}/pages-server.d.ts +0 -0
- /package/dist/next/{host → server}/pages-server.js +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/shared/client/component-loader.ts","../../../src/shared/webpack/shared-modules.ts","../../../src/shared/webpack/next-client-pages-loader.ts","../../../src/shared/client/const.ts","../../../src/shared/client/webpack-adapter.ts","../../../src/shared/client/script-loader.ts","../../../src/shared/client/rsc.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport * as JSXDevRuntime from 'react/jsx-dev-runtime';\nimport * as JSXRuntime from 'react/jsx-runtime';\nimport { applySharedModules } from '../webpack/shared-modules';\nimport { nextClientPagesLoader } from '../webpack/next-client-pages-loader';\nimport { setupWebpackRuntime } from './webpack-adapter';\nimport { loadScripts } from './script-loader';\nimport { createRSCStream } from './rsc';\nimport type { RemoteComponentProps, LoaderResult } from './types';\n\n/**\n * Main loader function that orchestrates the component loading process\n */\nexport async function loadRemoteComponent({\n url,\n name,\n bundle,\n route = '/',\n runtime = 'webpack',\n data,\n nextData,\n scripts = [],\n shared = {},\n remoteShared = {},\n container,\n}: Pick<\n RemoteComponentProps,\n 'name' | 'bundle' | 'route' | 'runtime' | 'data' | 'nextData' | 'scripts'\n> & {\n url: URL;\n shared: Record<string, () => Promise<unknown>>;\n remoteShared: Record<string, string>;\n container?: HTMLHeadElement | ShadowRoot | null;\n}): Promise<LoaderResult> {\n try {\n // Load scripts if using webpack runtime\n if (runtime === 'webpack') {\n await loadScripts(scripts);\n }\n\n // Setup webpack runtime environment\n await setupWebpackRuntime(\n runtime,\n scripts,\n url,\n bundle,\n shared,\n remoteShared,\n );\n\n // Setup shared modules\n if (bundle) {\n const resolve = {\n '/react/index.js': React,\n '/react/jsx-dev-runtime.js': JSXDevRuntime,\n '/react/jsx-runtime.js': JSXRuntime,\n '/react-dom/index.js': ReactDOM,\n };\n applySharedModules(bundle, resolve);\n }\n\n // Load component based on data type\n if (data.length > 0) {\n return await loadRSCComponent(name, data);\n } else if (nextData) {\n return loadNextPagesComponent(bundle, route, nextData, name, container);\n }\n\n throw new Error(`No valid data provided for remote component ${name}`);\n } catch (error) {\n return {\n component: null,\n error: error instanceof Error ? error : new Error(String(error)),\n };\n }\n}\n\n/**\n * Loads RSC (React Server Components) based component\n */\nasync function loadRSCComponent(\n name: string,\n data: string[],\n): Promise<LoaderResult> {\n const { createFromReadableStream } = await import(\n 'next/dist/compiled/react-server-dom-webpack/client.browser'\n );\n\n const stream = createRSCStream(name, data);\n const component = createFromReadableStream(stream);\n\n return { component };\n}\n\n/**\n * Loads Next.js Pages Router based component\n */\nfunction loadNextPagesComponent(\n bundle: string,\n route: string,\n nextData: NonNullable<RemoteComponentProps['nextData']>,\n name: string,\n container?: HTMLHeadElement | ShadowRoot | null,\n): LoaderResult {\n const { Component, App } = nextClientPagesLoader(bundle, route, container);\n\n if (!Component) {\n throw new Error(\n `Remote component ${name} is trying to load the component for route ${route} but it is not available.`,\n );\n }\n\n // error tolerance when app component is not found\n const component = App\n ? React.createElement(App, { Component, ...nextData.props })\n : React.createElement(Component, nextData.props);\n\n return { component };\n}\n","// Webpack shared module patching\n// used in multiple remote component host types\n// multiple host types includes: HTML custom element for remote components and Next.js host application\n// we are using this shared function to patch a Webpack module map\n// to use shared modules between the host application and the remote component\nexport function applySharedModules(\n bundle: string,\n resolve: Record<string, unknown>,\n) {\n // make a typed reference to the global scope\n const self = globalThis as typeof globalThis & {\n // webpack remote module loading function scoped for each bundle\n __remote_webpack_require__?: Record<\n string,\n ((remoteId: string) => unknown) & {\n m?: Record<string | number, (module: { exports: unknown }) => void>;\n }\n >;\n // webpack module map for each bundle used in production builds\n __remote_webpack_module_map__?: Record<string, Record<string, number>>;\n } & Record<string, string[]>;\n\n // if we have the bundle\n if (self.__remote_webpack_require__?.[bundle]) {\n const modulePaths = Object.keys(\n self.__remote_webpack_module_map__?.[bundle] ??\n self.__remote_webpack_require__[bundle].m ??\n {},\n );\n // patch all modules in the bundle to use the shared modules\n for (const [key, value] of Object.entries(resolve)) {\n const ids = modulePaths.filter((p) => p.includes(key));\n for (let id of ids) {\n const webpackBundle = self.__remote_webpack_require__[bundle];\n if (webpackBundle.m) {\n // if we have a module map, we need to use the mapped id\n // this is required for production builds where the module ids are module id numbers\n if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {\n id = `${self.__remote_webpack_module_map__[bundle][id]}`;\n }\n // create a mock module which exports the shared module\n webpackBundle.m[id] = (module) => {\n module.exports = value;\n };\n }\n }\n }\n }\n}\n","// module loader for Next.js Pages Router\nexport function nextClientPagesLoader(\n bundle: string,\n route: string,\n styleContainer: HTMLHeadElement | ShadowRoot | null = document.head,\n) {\n // make a typed reference to the global scope\n const self = globalThis as typeof globalThis & {\n // webpack remote module loading function scoped for each bundle\n __remote_webpack_require__?: Record<\n string,\n ((remoteId: string | number) => unknown) & {\n c?: Record<\n string | number,\n { id: string; parents: string[]; children: string[] }\n >;\n m?: Record<string | number, (module: { exports: unknown }) => void>;\n type?: 'turbopack' | 'webpack';\n }\n >;\n // webpack module map for each bundle used in production builds\n __remote_webpack_module_map__?: Record<string, Record<string, number>>;\n // Next.js client pages loader reference storage\n __NEXT_P?: [\n (\n | [\n string,\n () => { default?: React.ComponentType<Record<string, unknown>> },\n ]\n | undefined\n ),\n (\n | [\n string,\n () => {\n default?: React.ComponentType<\n {\n Component: React.ComponentType<Record<string, unknown>>;\n } & Record<string, unknown>\n >;\n },\n ]\n | undefined\n ),\n (\n | [\n string,\n () => {\n default?: React.ComponentType<\n {\n Component: React.ComponentType<Record<string, unknown>>;\n } & Record<string, unknown>\n >;\n },\n ]\n | undefined\n ),\n ];\n };\n\n // temporarily remove the original Next.js CSS loader\n const nextCssOriginal = document.getElementById('__next_css__DO_NOT_USE__');\n if (nextCssOriginal) {\n nextCssOriginal.parentNode?.removeChild(nextCssOriginal);\n }\n\n // create a new Next.js CSS loader element\n const nextCss = document.createElement('noscript');\n nextCss.id = '__next_css__DO_NOT_USE__';\n const lastNode =\n document.head.childNodes[document.head.childNodes.length - 1];\n document.head.appendChild(nextCss);\n\n // find the page component loader chunk\n const componentLoaderChunk =\n Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(\n (key) =>\n key.includes('/webpack/loaders/next-client-pages-loader.js') &&\n key.includes(`page=${encodeURIComponent(route)}`),\n ) ??\n Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(\n (key) => key.includes('/next/dist/client/page-loader.js'),\n ) ??\n self.__remote_webpack_module_map__?.[bundle]?.[\n Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(\n (key) =>\n key.includes('/webpack/loaders/next-client-pages-loader.js') &&\n key.includes(`page=${encodeURIComponent(route)}`),\n ) ??\n Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(\n (key) => key.includes('/next/dist/client/page-loader.js'),\n ) ??\n ''\n ] ??\n -1;\n\n // find the app loader chunk\n const appLoaderChunk =\n Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(\n (key) =>\n key.includes('/webpack/loaders/next-client-pages-loader.js') &&\n key.includes(`page=%2F_app`),\n ) ??\n Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(\n (key) => key.includes('/next/dist/client/page-loader.js'),\n ) ??\n self.__remote_webpack_module_map__?.[bundle]?.[\n Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(\n (key) =>\n key.includes('/webpack/loaders/next-client-pages-loader.js') &&\n key.includes(`page=%2F_app`),\n ) ??\n Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(\n (key) => key.includes('/next/dist/client/page-loader.js'),\n ) ??\n ''\n ] ??\n -1;\n\n // if we didn't find the component loader or app loader, throw an error\n if (!(componentLoaderChunk && appLoaderChunk)) {\n throw new Error(\n `Next.js client pages loader not found in bundle \"${bundle}\"`,\n );\n }\n\n // temporarily store the original __NEXT_P reference\n // this is required to avoid conflicts with the Next.js client pages loader\n // which uses the same global variable to store the page components\n const __NEXT_P_ORIGINAL = self.__NEXT_P;\n const selfOriginal = self;\n delete selfOriginal.__NEXT_P;\n\n // load the component and app loader chunks\n self.__remote_webpack_require__?.[bundle]?.(\n self.__remote_webpack_require__[bundle].type !== 'turbopack'\n ? componentLoaderChunk\n : `[${bundle}] ${componentLoaderChunk}`,\n );\n if (\n typeof appLoaderChunk === 'string' ||\n (typeof appLoaderChunk === 'number' && appLoaderChunk !== -1)\n ) {\n self.__remote_webpack_require__?.[bundle]?.(\n self.__remote_webpack_require__[bundle].type !== 'turbopack'\n ? appLoaderChunk\n : `[${bundle}] ${appLoaderChunk}`,\n );\n }\n\n // if we have the __NEXT_P global variable, we can extract the component and app\n if (self.__NEXT_P) {\n const [, componentLoader] = self.__NEXT_P[0] ?? [\n undefined,\n () => ({ default: null }),\n ];\n const [, appLoader] = self.__NEXT_P[2] ?? [\n undefined,\n () => ({\n default: null,\n }),\n ];\n const { default: Component } = componentLoader();\n const { default: App } = appLoader();\n\n // load the CSS files from the remote bundle\n const cssRE = /\\.s?css$/;\n Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {})\n .filter((id) => cssRE.test(id))\n .forEach((id) => {\n self.__remote_webpack_require__?.[bundle]?.(id);\n });\n\n Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {})\n .filter((path) => cssRE.test(path))\n .forEach((path) => {\n const id = self.__remote_webpack_module_map__?.[bundle]?.[path];\n if (id) {\n self.__remote_webpack_require__?.[bundle]?.(id);\n }\n });\n\n // if the styleContainer is provided, we need to move the styles to it\n if (styleContainer) {\n let node = nextCss.previousSibling;\n while (node && node !== lastNode) {\n styleContainer.appendChild(node);\n node = nextCss.previousSibling;\n }\n }\n\n // restore the original __NEXT_P reference\n delete self.__NEXT_P;\n self.__NEXT_P = __NEXT_P_ORIGINAL;\n\n // restore the original Next.js CSS loader\n if (nextCssOriginal) {\n nextCssOriginal.parentNode?.appendChild(nextCssOriginal);\n }\n\n return { Component, App };\n }\n\n return { Component: null, App: null };\n}\n","export const DEFAULT_ROUTE = '/';\n\nexport const RUNTIME_WEBPACK = 'webpack';\nexport const RUNTIME_TURBOPACK = 'turbopack';\n\nexport const REMOTE_COMPONENT_REGEX =\n /(?<prefix>.*?)\\[(?<bundle>[^\\]]+)\\](?:%20| )(?<id>.+)/;\n\nexport function getBundleKey(bundle: string): string {\n return bundle.replace(/-/g, '_');\n}\n\nexport type Runtime = typeof RUNTIME_WEBPACK | typeof RUNTIME_TURBOPACK;\n","import type { GlobalScope } from './types';\nimport {\n type Runtime,\n RUNTIME_TURBOPACK,\n RUNTIME_WEBPACK,\n REMOTE_COMPONENT_REGEX,\n getBundleKey,\n} from './const';\n\n/**\n * Sets up webpack runtime environment for remote components\n */\nexport async function setupWebpackRuntime(\n runtime: Runtime,\n scripts: { src: string | null }[] = [],\n url: URL = new URL(location.href),\n bundle?: string,\n shared: Record<string, () => Promise<unknown>> = {},\n remoteShared: Record<string, string> = {},\n): Promise<void> {\n const self = globalThis as GlobalScope;\n self.__DISABLE_WEBPACK_EXEC__ = true;\n\n if (!self.__remote_bundle_url__) {\n // eslint-disable-next-line camelcase\n self.__remote_bundle_url__ = {};\n }\n self.__remote_bundle_url__[bundle ?? 'default'] = url;\n\n await initializeSharedModules(bundle ?? 'default', shared, remoteShared);\n if (\n typeof self.__webpack_require__ !== 'function' ||\n self.__webpack_require_type__ !== 'turbopack'\n ) {\n if (\n !self.__original_webpack_require__ &&\n !self.__original_webpack_chunk_load__\n ) {\n // eslint-disable-next-line camelcase\n self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;\n // eslint-disable-next-line camelcase\n self.__original_webpack_require__ = self.__webpack_require__;\n }\n\n self.__webpack_chunk_load__ = createChunkLoader(runtime);\n self.__webpack_require__ = createModuleRequire(runtime);\n // eslint-disable-next-line camelcase\n self.__webpack_require_type__ = runtime;\n\n if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {\n const remoteBundle = bundle ?? 'default';\n self.__remote_webpack_require__[remoteBundle] =\n self.__webpack_require__ as (remoteId: string | number) => unknown;\n self.__remote_webpack_require__[remoteBundle].type = 'turbopack';\n }\n }\n await Promise.all(\n scripts.map((script) => {\n if (script.src) {\n return self.__webpack_chunk_load__?.(script.src, bundle);\n }\n return Promise.resolve(undefined);\n }),\n );\n}\n\n/**\n * Creates chunk loader function for webpack runtime\n */\nfunction createChunkLoader(\n runtime: Runtime,\n): (chunkId: string) => Promise<unknown> | undefined {\n // eslint-disable-next-line camelcase\n return function __turbopack_chunk_load__(\n chunkId: string,\n scriptBundle?: string,\n ) {\n if (runtime === RUNTIME_WEBPACK) {\n // all scripts are already loaded for this remote\n return Promise.resolve(undefined);\n }\n const {\n bundle,\n id: path,\n prefix,\n } = REMOTE_COMPONENT_REGEX.exec(chunkId)?.groups ?? {\n bundle: scriptBundle ?? '',\n id: chunkId,\n };\n const self = globalThis as GlobalScope;\n const url = new URL(\n path\n ? `${prefix ?? ''}${path}`.replace(\n /(?<char>[^:])(?<double>\\/\\/)/g,\n '$1/',\n )\n : '/',\n self.__remote_bundle_url__?.[bundle ?? 'default'] ??\n new URL(location.origin),\n ).href;\n if (url.endsWith('.css')) {\n return;\n }\n return new Promise((resolve, reject) => {\n fetch(url)\n .then((res) => res.text())\n .then((code) => {\n if (code.includes('globalThis.TURBOPACK')) {\n return handleTurbopackChunk(code, bundle ?? '', url);\n }\n })\n .then(resolve)\n .catch(reject);\n });\n };\n}\n\n/**\n * Handles Turbopack chunk loading\n */\nasync function handleTurbopackChunk(\n code: string,\n bundle: string,\n url: string,\n): Promise<void> {\n // skip this chunk as it is not needed for remote components\n if (\n code.includes('/next/dist/client/app-next-turbopack.js') &&\n code.includes('importScripts(...self.TURBOPACK_NEXT_CHUNK_URLS')\n ) {\n // remove preload links for this chunk\n const preloadLinks = document.querySelectorAll(\n `link[rel=\"preload\"][href=\"${new URL(url).pathname}\"]`,\n );\n preloadLinks.forEach((preloadLink) => preloadLink.remove());\n return;\n }\n\n const self = globalThis as GlobalScope;\n const bundleKey = getBundleKey(bundle);\n\n // replace global variables with bundle-specific ones\n const transformedCode = code\n .replace(/globalThis\\.TURBOPACK/g, `globalThis.TURBOPACK_${bundleKey}`)\n .replace(\n /TURBOPACK_WORKER_LOCATION/g,\n `TURBOPACK_WORKER_LOCATION_${bundleKey}`,\n )\n .replace(\n /TURBOPACK_NEXT_CHUNK_URLS/g,\n `TURBOPACK_NEXT_CHUNK_URLS_${bundleKey}`,\n )\n .replace(\n /TURBOPACK_CHUNK_UPDATE_LISTENERS/g,\n `TURBOPACK_CHUNK_UPDATE_LISTENERS_${bundleKey}`,\n )\n .replace(/__next_require__/g, `__${bundleKey}_next_require__`)\n .replace(\n /\\/\\/# sourceMappingURL=(?<name>.+)(?<optional>\\._)?\\.js\\.map/g,\n `//# sourceMappingURL=${\n new URL(\n '.',\n new URL(\n url,\n self.__remote_bundle_url__?.[bundle] ?? new URL(location.origin),\n ),\n ).href\n }$1$2.js.map`,\n );\n\n // load the script dynamically using a Blob URL\n await new Promise<void>((scriptResolve, scriptReject) => {\n const blob = new Blob([transformedCode], {\n type: 'application/javascript; charset=UTF-8',\n });\n const scriptUrl = URL.createObjectURL(blob);\n const script = document.createElement('script');\n script.src = scriptUrl;\n script.async = true;\n script.onload = () => {\n URL.revokeObjectURL(scriptUrl);\n scriptResolve(undefined);\n };\n script.onerror = (error) => {\n URL.revokeObjectURL(scriptUrl);\n scriptReject(\n new Error(\n `Failed to load script: ${error instanceof Error ? error.message : String(error)}`,\n ),\n );\n };\n document.head.appendChild(script);\n });\n const chunkLists = self[`TURBOPACK_${bundleKey}_CHUNK_LISTS`] as\n | { chunks: string[] }[]\n | undefined;\n const loadChunkLists = [] as (Promise<unknown> | undefined)[];\n while (chunkLists?.length) {\n const { chunks } = chunkLists.shift() ?? { chunks: [] };\n if (chunks.length > 0) {\n chunks.forEach((id: string) => {\n const chunkLoadResult = self.__webpack_chunk_load__?.(\n `[${bundle}] ${url.slice(0, url.indexOf('/_next'))}/_next/${id}`,\n );\n if (chunkLoadResult) {\n loadChunkLists.push(chunkLoadResult);\n }\n });\n }\n }\n if (loadChunkLists.length > 0) {\n await Promise.all(loadChunkLists);\n }\n}\n\n/**\n * Creates module require function for webpack runtime\n */\nfunction createModuleRequire(runtime: Runtime): (id: string) => unknown {\n return (id: string) => {\n const self = globalThis as GlobalScope;\n const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)\n ?.groups ?? { bundle: 'default', id };\n try {\n if (runtime === RUNTIME_WEBPACK && bundle && moduleId) {\n return self.__remote_webpack_require__?.[bundle]?.(moduleId);\n }\n const sharedModule = getSharedModule(bundle ?? 'default', moduleId ?? id);\n if (sharedModule) {\n return sharedModule;\n }\n if (bundle && moduleId) {\n return handleTurbopackModule(bundle, moduleId, id);\n }\n throw new Error(`Module ${id} not found`);\n } catch {\n try {\n return self.__original_webpack_require__?.(id);\n } catch {\n throw new Error(\n `Module ${id} not found in remote component bundle ${bundle}`,\n );\n }\n }\n };\n}\n\nfunction initializeSharedModules(\n bundle: string,\n shared: Record<string, () => Promise<unknown>> = {},\n remoteShared: Record<string, string> = {},\n) {\n const self = globalThis as {\n __remote_shared_modules__?: Record<string, Record<string, unknown>>;\n __next_f?: unknown[];\n };\n // eslint-disable-next-line camelcase\n self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};\n\n if (!self.__remote_shared_modules__[bundle]) {\n self.__remote_shared_modules__[bundle] = {};\n }\n\n // ensure that the shared modules are initialized\n return Promise.all(\n Object.entries(remoteShared).map(async ([id, module]) => {\n if (self.__remote_shared_modules__?.[bundle]) {\n self.__remote_shared_modules__[bundle][\n id.replace('[app-ssr]', '[app-client]')\n ] = await (\n shared[module] ??\n (() =>\n Promise.resolve(\n new Proxy(\n {},\n {\n get(_, prop: string) {\n if (prop !== 'then') {\n // eslint-disable-next-line no-console\n console.warn(\n `Shared dependency \"${module}\" not found for \"${bundle}\" when trying to import \"${prop}\".`,\n );\n }\n },\n },\n ),\n ))\n )();\n }\n }),\n );\n}\n\n/**\n * Returns shared modules for common dependencies\n */\nfunction getSharedModule(bundle: string, id: string): unknown {\n const self = globalThis as {\n __remote_shared_modules__?: Record<string, unknown>;\n };\n\n for (const [key, value] of Object.entries(\n self.__remote_shared_modules__?.[bundle] ?? {},\n )) {\n if (id.includes(key)) {\n return value;\n }\n }\n return null;\n}\n\n/**\n * Handles Turbopack module resolution\n */\nfunction handleTurbopackModule(\n bundle: string,\n moduleId: string,\n id: string,\n): unknown {\n const self = globalThis as GlobalScope;\n const bundleKey = getBundleKey(bundle);\n const modules = (\n self[`TURBOPACK_${bundleKey}`] as\n | [unknown, Record<string, unknown>][]\n | undefined\n )?.find((mod: [unknown, Record<string, unknown>]) => moduleId in mod[1])?.[1];\n const moduleInit = modules?.[moduleId];\n if (typeof moduleInit !== 'function') {\n throw new Error(\n `Module ${id} not found in bundle ${bundle} with id ${moduleId}`,\n );\n }\n const exports = {} as Record<string, unknown>;\n moduleInit({\n // HMR not implemented for Remote Components\n k: {\n register() {\n // omit\n },\n registerExports() {\n // omit\n },\n signature() {\n return () => {\n // omit\n };\n },\n },\n s(m: Record<string, () => unknown>) {\n for (const [key, value] of Object.entries(m)) {\n exports[key] = value;\n }\n },\n i(iid: string) {\n return self.__webpack_require__?.(`[${bundle}] ${iid}`);\n },\n r(rid: string) {\n return self.__webpack_require__?.(`[${bundle}] ${rid}`);\n },\n m: {\n exports,\n },\n });\n for (const [key, value] of Object.entries(exports)) {\n if (typeof value === 'function') {\n exports[key] = value();\n }\n }\n return exports;\n}\n","/**\n * Loads external scripts for remote components\n */\nexport async function loadScripts(scripts: { src: string }[]): Promise<void> {\n await Promise.all(\n scripts.map((script) => {\n return new Promise<void>((resolve, reject) => {\n const newSrc = new URL(\n // remove the remote component bundle name identifier from the script src\n script.src.replace(/\\/_next\\/\\[.+\\] /, '/_next/'),\n location.origin,\n ).href;\n const newScript = document.createElement('script');\n newScript.onload = () => {\n resolve();\n };\n newScript.onerror = () => {\n reject(\n new Error(\n `Failed to load script ${script.src} for remote component`,\n ),\n );\n };\n newScript.src = newSrc;\n newScript.async = true;\n document.head.appendChild(newScript);\n });\n }),\n );\n}\n","/**\n * Fixes RSC payload to make it compatible with React JSX development runtime\n */\nexport function fixPayload(payload: unknown): void {\n if (Array.isArray(payload)) {\n // if the current node is a React element, we need to fix the payload\n if (payload[0] === '$') {\n // fix the props (children or other React elements)\n fixPayload(payload[3]);\n if (payload.length === 4) {\n // add placeholder for the missing debug info\n payload.push(null, null, 1);\n }\n } else {\n // we are in an array, continue with visiting each item\n for (const item of payload) {\n fixPayload(item);\n }\n }\n } else if (typeof payload === 'object' && payload !== null) {\n // we are in an object, continue with visiting each property\n for (const key in payload) {\n fixPayload((payload as Record<string, unknown>)[key]);\n }\n }\n}\n\n/**\n * Processes RSC flight data and creates a ReadableStream\n */\nexport function createRSCStream(\n name: string,\n data: string[],\n): ReadableStream<Uint8Array> {\n return new ReadableStream({\n type: 'bytes',\n start(controller) {\n const encoder = new TextEncoder();\n const self = globalThis as typeof globalThis & Record<string, string[]>;\n\n // when the remote component RSC scripts are not found or loaded\n // we need to load the RSC flight data parsing the chunks\n if (!self[name] && data.length > 0) {\n data.forEach((chunk) => {\n const lines = chunk.split('\\n');\n for (const line of lines) {\n const match = /\\.push\\(\"(?<rsc>.*)\"\\);$/.exec(line);\n if (match?.groups?.rsc) {\n self[name] = self[name] ?? [];\n self[name].push(JSON.parse(`\"${match.groups.rsc}\"`) as string);\n }\n }\n });\n }\n\n // get the RSC flight data from the global scope\n // the RSC flight data is stored in an array\n // fallback to an empty RSC payload if the data is not found\n const allChunks = (self[name] ?? [`0:[null]\\n`]).join('');\n\n // process each line in the RSC flight data\n allChunks.split('\\n').forEach((chunk) => {\n if (chunk.length > 0) {\n // parse the chunk to get the id, prefix and payload\n const { id, prefix, payload } =\n /(?<id>[0-9a-zA-Z]+):(?<prefix>[A-Z])?(?<payload>\\[.*\\])/.exec(\n chunk,\n )?.groups ?? {};\n\n if (payload) {\n // parse the payload to a JSON object\n const jsonPayload = JSON.parse(payload) as unknown[];\n // fix the payload to make it compatible with React JSX development runtime\n fixPayload(jsonPayload);\n // reconstruct the chunk to a string\n const reconstruct = `${id}:${prefix ?? ''}${JSON.stringify(jsonPayload)}`;\n // encode the chunk to a byte buffer\n controller.enqueue(encoder.encode(`${reconstruct}\\n`));\n } else {\n // add empty line before closing the stream\n controller.enqueue(encoder.encode(`${chunk}\\n`));\n }\n } else {\n // add empty line before closing the stream\n controller.enqueue(encoder.encode(`${chunk}\\n`));\n }\n });\n // close the stream when all chunks are enqueued\n controller.close();\n },\n });\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/shared/client/component-loader.ts","../../../src/shared/webpack/shared-modules.ts","../../../src/shared/webpack/next-client-pages-loader.ts","../../../src/shared/client/const.ts","../../../src/shared/client/webpack-adapter.ts","../../../src/shared/client/script-loader.ts","../../../src/shared/client/rsc.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport * as ReactDOMClient from 'react-dom/client';\nimport * as JSXDevRuntime from 'react/jsx-dev-runtime';\nimport * as JSXRuntime from 'react/jsx-runtime';\nimport { applySharedModules } from '../webpack/shared-modules';\nimport { nextClientPagesLoader } from '../webpack/next-client-pages-loader';\nimport { setupWebpackRuntime } from './webpack-adapter';\nimport { loadScripts } from './script-loader';\nimport { createRSCStream } from './rsc';\nimport type { RemoteComponentProps, LoaderResult, GlobalScope } from './types';\n\n/**\n * Main loader function that orchestrates the component loading process\n */\nexport async function loadRemoteComponent({\n url,\n name,\n bundle,\n route = '/',\n runtime = 'webpack',\n data,\n nextData,\n scripts = [],\n shared = Promise.resolve({}),\n remoteShared = {},\n container,\n}: Pick<\n RemoteComponentProps,\n 'name' | 'bundle' | 'route' | 'runtime' | 'data' | 'nextData' | 'scripts'\n> & {\n url: URL;\n shared: Promise<Record<string, () => Promise<unknown>>>;\n remoteShared: Record<string, string>;\n container?: HTMLHeadElement | ShadowRoot | null;\n}): Promise<LoaderResult> {\n try {\n // Load scripts if using webpack runtime\n if (runtime === 'webpack') {\n const self = globalThis as GlobalScope;\n self.__DISABLE_WEBPACK_EXEC__ = true;\n await loadScripts(scripts);\n }\n\n // Setup webpack runtime environment\n await setupWebpackRuntime(\n runtime,\n scripts,\n url,\n bundle,\n await shared,\n remoteShared,\n );\n\n // Setup shared modules\n if (bundle) {\n const resolve = {\n '/react/index.js': React,\n '/react/jsx-dev-runtime.js': JSXDevRuntime,\n '/react/jsx-runtime.js': JSXRuntime,\n '/react-dom/index.js': ReactDOM,\n '/react-dom/client.js': ReactDOMClient,\n };\n applySharedModules(bundle, resolve);\n }\n\n // Load component based on data type\n if (data.length > 0) {\n return await loadRSCComponent(name, data);\n } else if (nextData) {\n return loadNextPagesComponent(bundle, route, nextData, name, container);\n }\n\n return loadRSCComponent(name, [`0:[null]\\n`]); // Fallback to empty RSC payload\n } catch (error) {\n return {\n component: null,\n error: error instanceof Error ? error : new Error(String(error)),\n };\n }\n}\n\n/**\n * Loads RSC (React Server Components) based component\n */\nasync function loadRSCComponent(\n name: string,\n data: string[],\n): Promise<LoaderResult> {\n const { createFromReadableStream } = await import(\n 'next/dist/compiled/react-server-dom-webpack/client.browser'\n );\n\n const stream = createRSCStream(name, data);\n const component = createFromReadableStream(stream);\n\n return { component };\n}\n\n/**\n * Loads Next.js Pages Router based component\n */\nfunction loadNextPagesComponent(\n bundle: string,\n route: string,\n nextData: NonNullable<RemoteComponentProps['nextData']>,\n name: string,\n container?: HTMLHeadElement | ShadowRoot | null,\n): LoaderResult {\n const { Component, App } = nextClientPagesLoader(bundle, route, container);\n\n if (!Component) {\n throw new Error(\n `Remote component ${name} is trying to load the component for route ${route} but it is not available.`,\n );\n }\n\n // error tolerance when app component is not found\n const component = App\n ? React.createElement(App, { Component, ...nextData.props })\n : React.createElement(Component, nextData.props);\n\n return { component };\n}\n","// Webpack shared module patching\n// used in multiple remote component host types\n// multiple host types includes: HTML custom element for remote components and Next.js host application\n// we are using this shared function to patch a Webpack module map\n// to use shared modules between the host application and the remote component\nexport function applySharedModules(\n bundle: string,\n resolve: Record<string, unknown>,\n) {\n // make a typed reference to the global scope\n const self = globalThis as typeof globalThis & {\n // webpack remote module loading function scoped for each bundle\n __remote_webpack_require__?: Record<\n string,\n ((remoteId: string) => unknown) & {\n m?: Record<string | number, (module: { exports: unknown }) => void>;\n }\n >;\n // webpack module map for each bundle used in production builds\n __remote_webpack_module_map__?: Record<string, Record<string, number>>;\n } & Record<string, string[]>;\n\n // if we have the bundle\n if (self.__remote_webpack_require__?.[bundle]) {\n const modulePaths = Object.keys(\n self.__remote_webpack_module_map__?.[bundle] ??\n self.__remote_webpack_require__[bundle].m ??\n {},\n );\n // patch all modules in the bundle to use the shared modules\n for (const [key, value] of Object.entries(resolve)) {\n const ids = modulePaths.filter((p) => p.includes(key));\n for (let id of ids) {\n const webpackBundle = self.__remote_webpack_require__[bundle];\n if (webpackBundle.m) {\n // if we have a module map, we need to use the mapped id\n // this is required for production builds where the module ids are module id numbers\n if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {\n id = `${self.__remote_webpack_module_map__[bundle][id]}`;\n }\n // create a mock module which exports the shared module\n webpackBundle.m[id] = (module) => {\n module.exports = value;\n };\n }\n }\n }\n }\n}\n","// module loader for Next.js Pages Router\nexport function nextClientPagesLoader(\n bundle: string,\n route: string,\n styleContainer: HTMLHeadElement | ShadowRoot | null = document.head,\n) {\n // make a typed reference to the global scope\n const self = globalThis as typeof globalThis & {\n // webpack remote module loading function scoped for each bundle\n __remote_webpack_require__?: Record<\n string,\n ((remoteId: string | number) => unknown) & {\n c?: Record<\n string | number,\n { id: string; parents: string[]; children: string[] }\n >;\n m?: Record<string | number, (module: { exports: unknown }) => void>;\n type?: 'turbopack' | 'webpack';\n }\n >;\n // webpack module map for each bundle used in production builds\n __remote_webpack_module_map__?: Record<string, Record<string, number>>;\n // Next.js client pages loader reference storage\n __NEXT_P?: [\n (\n | [\n string,\n () => { default?: React.ComponentType<Record<string, unknown>> },\n ]\n | undefined\n ),\n (\n | [\n string,\n () => {\n default?: React.ComponentType<\n {\n Component: React.ComponentType<Record<string, unknown>>;\n } & Record<string, unknown>\n >;\n },\n ]\n | undefined\n ),\n (\n | [\n string,\n () => {\n default?: React.ComponentType<\n {\n Component: React.ComponentType<Record<string, unknown>>;\n } & Record<string, unknown>\n >;\n },\n ]\n | undefined\n ),\n ];\n };\n\n // temporarily remove the original Next.js CSS loader\n const nextCssOriginal = document.getElementById('__next_css__DO_NOT_USE__');\n if (nextCssOriginal) {\n nextCssOriginal.parentNode?.removeChild(nextCssOriginal);\n }\n\n // create a new Next.js CSS loader element\n const nextCss = document.createElement('noscript');\n nextCss.id = '__next_css__DO_NOT_USE__';\n const lastNode =\n document.head.childNodes[document.head.childNodes.length - 1];\n document.head.appendChild(nextCss);\n\n // find the page component loader chunk\n const componentLoaderChunk =\n Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(\n (key) =>\n key.includes('/webpack/loaders/next-client-pages-loader.js') &&\n key.includes(`page=${encodeURIComponent(route)}`),\n ) ??\n Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(\n (key) => key.includes('/next/dist/client/page-loader.js'),\n ) ??\n self.__remote_webpack_module_map__?.[bundle]?.[\n Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(\n (key) =>\n key.includes('/webpack/loaders/next-client-pages-loader.js') &&\n key.includes(`page=${encodeURIComponent(route)}`),\n ) ??\n Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(\n (key) => key.includes('/next/dist/client/page-loader.js'),\n ) ??\n ''\n ] ??\n -1;\n\n // find the app loader chunk\n const appLoaderChunk =\n Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(\n (key) =>\n key.includes('/webpack/loaders/next-client-pages-loader.js') &&\n key.includes(`page=%2F_app`),\n ) ??\n Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(\n (key) => key.includes('/next/dist/client/page-loader.js'),\n ) ??\n self.__remote_webpack_module_map__?.[bundle]?.[\n Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(\n (key) =>\n key.includes('/webpack/loaders/next-client-pages-loader.js') &&\n key.includes(`page=%2F_app`),\n ) ??\n Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(\n (key) => key.includes('/next/dist/client/page-loader.js'),\n ) ??\n ''\n ] ??\n -1;\n\n // if we didn't find the component loader or app loader, throw an error\n if (!(componentLoaderChunk && appLoaderChunk)) {\n throw new Error(\n `Next.js client pages loader not found in bundle \"${bundle}\"`,\n );\n }\n\n // temporarily store the original __NEXT_P reference\n // this is required to avoid conflicts with the Next.js client pages loader\n // which uses the same global variable to store the page components\n const __NEXT_P_ORIGINAL = self.__NEXT_P;\n const selfOriginal = self;\n delete selfOriginal.__NEXT_P;\n\n // load the component and app loader chunks\n self.__remote_webpack_require__?.[bundle]?.(\n self.__remote_webpack_require__[bundle].type !== 'turbopack'\n ? componentLoaderChunk\n : `[${bundle}] ${componentLoaderChunk}`,\n );\n if (\n typeof appLoaderChunk === 'string' ||\n (typeof appLoaderChunk === 'number' && appLoaderChunk !== -1)\n ) {\n self.__remote_webpack_require__?.[bundle]?.(\n self.__remote_webpack_require__[bundle].type !== 'turbopack'\n ? appLoaderChunk\n : `[${bundle}] ${appLoaderChunk}`,\n );\n }\n\n // if we have the __NEXT_P global variable, we can extract the component and app\n if (self.__NEXT_P) {\n const [, componentLoader] = self.__NEXT_P[0] ?? [\n undefined,\n () => ({ default: null }),\n ];\n const [, appLoader] = self.__NEXT_P[2] ?? [\n undefined,\n () => ({\n default: null,\n }),\n ];\n const { default: Component } = componentLoader();\n const { default: App } = appLoader();\n\n // load the CSS files from the remote bundle\n const cssRE = /\\.s?css$/;\n Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {})\n .filter((id) => cssRE.test(id))\n .forEach((id) => {\n self.__remote_webpack_require__?.[bundle]?.(id);\n });\n\n Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {})\n .filter((path) => cssRE.test(path))\n .forEach((path) => {\n const id = self.__remote_webpack_module_map__?.[bundle]?.[path];\n if (id) {\n self.__remote_webpack_require__?.[bundle]?.(id);\n }\n });\n\n // if the styleContainer is provided, we need to move the styles to it\n if (styleContainer) {\n let node = nextCss.previousSibling;\n while (node && node !== lastNode) {\n styleContainer.appendChild(node);\n node = nextCss.previousSibling;\n }\n }\n\n // restore the original __NEXT_P reference\n delete self.__NEXT_P;\n self.__NEXT_P = __NEXT_P_ORIGINAL;\n\n // restore the original Next.js CSS loader\n if (nextCssOriginal) {\n nextCssOriginal.parentNode?.appendChild(nextCssOriginal);\n }\n\n return { Component, App };\n }\n\n return { Component: null, App: null };\n}\n","export const DEFAULT_ROUTE = '/';\n\nexport const RUNTIME_WEBPACK = 'webpack';\nexport const RUNTIME_TURBOPACK = 'turbopack';\n\nexport const REMOTE_COMPONENT_REGEX =\n /(?<prefix>.*?)\\[(?<bundle>[^\\]]+)\\](?:%20| )(?<id>.+)/;\n\nexport function getBundleKey(bundle: string): string {\n return bundle.replace(/-/g, '_');\n}\n\nexport type Runtime = typeof RUNTIME_WEBPACK | typeof RUNTIME_TURBOPACK;\n","import type { GlobalScope } from './types';\nimport {\n type Runtime,\n RUNTIME_TURBOPACK,\n RUNTIME_WEBPACK,\n REMOTE_COMPONENT_REGEX,\n getBundleKey,\n} from './const';\n\n/**\n * Sets up webpack runtime environment for remote components\n */\nexport async function setupWebpackRuntime(\n runtime: Runtime,\n scripts: { src: string | null }[] = [],\n url: URL = new URL(location.href),\n bundle?: string,\n shared: Record<string, () => Promise<unknown>> = {},\n remoteShared: Record<string, string> = {},\n): Promise<void> {\n const self = globalThis as GlobalScope;\n\n if (!self.__remote_bundle_url__) {\n // eslint-disable-next-line camelcase\n self.__remote_bundle_url__ = {};\n }\n self.__remote_bundle_url__[bundle ?? 'default'] = url;\n\n await initializeSharedModules(bundle ?? 'default', shared, remoteShared);\n if (\n typeof self.__webpack_require__ !== 'function' ||\n self.__webpack_require_type__ !== 'turbopack'\n ) {\n if (\n !self.__original_webpack_require__ &&\n !self.__original_webpack_chunk_load__\n ) {\n // eslint-disable-next-line camelcase\n self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;\n // eslint-disable-next-line camelcase\n self.__original_webpack_require__ = self.__webpack_require__;\n }\n\n self.__webpack_chunk_load__ = createChunkLoader(runtime);\n self.__webpack_require__ = createModuleRequire(runtime);\n // eslint-disable-next-line camelcase\n self.__webpack_require_type__ = runtime;\n\n if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {\n const remoteBundle = bundle ?? 'default';\n self.__remote_webpack_require__[remoteBundle] =\n self.__webpack_require__ as (remoteId: string | number) => unknown;\n self.__remote_webpack_require__[remoteBundle].type = 'turbopack';\n }\n }\n if (runtime === RUNTIME_TURBOPACK) {\n await Promise.all(\n scripts.map((script) => {\n if (script.src) {\n return self.__webpack_chunk_load__?.(script.src, bundle);\n }\n return Promise.resolve(undefined);\n }),\n );\n }\n}\n\n/**\n * Creates chunk loader function for webpack runtime\n */\nfunction createChunkLoader(\n runtime: Runtime,\n): (chunkId: string) => Promise<unknown> | undefined {\n // eslint-disable-next-line camelcase\n return function __turbopack_chunk_load__(\n chunkId: string,\n scriptBundle?: string,\n ) {\n const self = globalThis as GlobalScope;\n const {\n bundle,\n id: path,\n prefix,\n } = REMOTE_COMPONENT_REGEX.exec(chunkId)?.groups ?? {\n bundle: scriptBundle ?? '',\n id: chunkId,\n };\n const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? 'default']\n ? self.__remote_webpack_require__[bundle ?? 'default']?.type || 'webpack'\n : runtime;\n if (remoteRuntime === RUNTIME_WEBPACK) {\n // all scripts are already loaded for this remote\n return Promise.resolve(undefined);\n }\n\n const url = new URL(\n path\n ? `${prefix ?? ''}${path}`.replace(\n /(?<char>[^:])(?<double>\\/\\/)/g,\n '$1/',\n )\n : '/',\n self.__remote_bundle_url__?.[bundle ?? 'default'] ??\n new URL(location.origin),\n ).href;\n if (url.endsWith('.css')) {\n return;\n }\n return new Promise((resolve, reject) => {\n fetch(url)\n .then((res) => res.text())\n .then((code) => {\n if (code.includes('globalThis.TURBOPACK')) {\n return handleTurbopackChunk(code, bundle ?? '', url);\n }\n })\n .then(resolve)\n .catch(reject);\n });\n };\n}\n\n/**\n * Handles Turbopack chunk loading\n */\nasync function handleTurbopackChunk(\n code: string,\n bundle: string,\n url: string,\n): Promise<void> {\n // skip this chunk as it is not needed for remote components\n if (\n code.includes('/next/dist/client/app-next-turbopack.js') &&\n code.includes('importScripts(...self.TURBOPACK_NEXT_CHUNK_URLS')\n ) {\n // remove preload links for this chunk\n const preloadLinks = document.querySelectorAll(\n `link[rel=\"preload\"][href=\"${new URL(url).pathname}\"]`,\n );\n preloadLinks.forEach((preloadLink) => preloadLink.remove());\n return;\n }\n\n const self = globalThis as GlobalScope;\n const bundleKey = getBundleKey(bundle);\n\n // replace global variables with bundle-specific ones\n const transformedCode = code\n .replace(/globalThis\\.TURBOPACK/g, `globalThis.TURBOPACK_${bundleKey}`)\n .replace(\n /TURBOPACK_WORKER_LOCATION/g,\n `TURBOPACK_WORKER_LOCATION_${bundleKey}`,\n )\n .replace(\n /TURBOPACK_NEXT_CHUNK_URLS/g,\n `TURBOPACK_NEXT_CHUNK_URLS_${bundleKey}`,\n )\n .replace(\n /TURBOPACK_CHUNK_UPDATE_LISTENERS/g,\n `TURBOPACK_CHUNK_UPDATE_LISTENERS_${bundleKey}`,\n )\n .replace(/__next_require__/g, `__${bundleKey}_next_require__`)\n .replace(\n /\\/\\/# sourceMappingURL=(?<name>.+)(?<optional>\\._)?\\.js\\.map/g,\n `//# sourceMappingURL=${\n new URL(\n '.',\n new URL(\n url,\n self.__remote_bundle_url__?.[bundle] ?? new URL(location.origin),\n ),\n ).href\n }$1$2.js.map`,\n );\n\n // load the script dynamically using a Blob URL\n await new Promise<void>((scriptResolve, scriptReject) => {\n const blob = new Blob([transformedCode], {\n type: 'application/javascript; charset=UTF-8',\n });\n const scriptUrl = URL.createObjectURL(blob);\n const script = document.createElement('script');\n script.src = scriptUrl;\n script.async = true;\n script.onload = () => {\n URL.revokeObjectURL(scriptUrl);\n scriptResolve(undefined);\n };\n script.onerror = (error) => {\n URL.revokeObjectURL(scriptUrl);\n scriptReject(\n new Error(\n `Failed to load script: ${error instanceof Error ? error.message : String(error)}`,\n ),\n );\n };\n document.head.appendChild(script);\n });\n const chunkLists = self[`TURBOPACK_${bundleKey}_CHUNK_LISTS`] as\n | { chunks: string[] }[]\n | undefined;\n const loadChunkLists = [] as (Promise<unknown> | undefined)[];\n while (chunkLists?.length) {\n const { chunks } = chunkLists.shift() ?? { chunks: [] };\n if (chunks.length > 0) {\n chunks.forEach((id: string) => {\n const chunkLoadResult = self.__webpack_chunk_load__?.(\n `[${bundle}] ${url.slice(0, url.indexOf('/_next'))}/_next/${id}`,\n );\n if (chunkLoadResult) {\n loadChunkLists.push(chunkLoadResult);\n }\n });\n }\n }\n if (loadChunkLists.length > 0) {\n await Promise.all(loadChunkLists);\n }\n}\n\n/**\n * Creates module require function for webpack runtime\n */\nfunction createModuleRequire(runtime: Runtime): (id: string) => unknown {\n return (id: string) => {\n const self = globalThis as GlobalScope;\n const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)\n ?.groups ?? { bundle: 'default', id };\n const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? 'default']\n ? self.__remote_webpack_require__[bundle ?? 'default']?.type || 'webpack'\n : runtime;\n try {\n if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {\n return self.__remote_webpack_require__?.[bundle]?.(moduleId);\n }\n const sharedModule = getSharedModule(bundle ?? 'default', moduleId ?? id);\n if (sharedModule) {\n return sharedModule;\n }\n if (bundle && moduleId) {\n return handleTurbopackModule(bundle, moduleId, id);\n }\n throw new Error(`Module ${id} not found`);\n } catch {\n try {\n return self.__original_webpack_require__?.(id);\n } catch {\n throw new Error(\n `Module ${id} not found in remote component bundle ${bundle}`,\n );\n }\n }\n };\n}\n\nfunction initializeSharedModules(\n bundle: string,\n shared: Record<string, () => Promise<unknown>> = {},\n remoteShared: Record<string, string> = {},\n) {\n const self = globalThis as {\n __remote_shared_modules__?: Record<string, Record<string, unknown>>;\n __next_f?: unknown[];\n };\n // eslint-disable-next-line camelcase\n self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};\n\n if (!self.__remote_shared_modules__[bundle]) {\n self.__remote_shared_modules__[bundle] = {};\n }\n\n // ensure that the shared modules are initialized\n return Promise.all(\n Object.entries(remoteShared).map(async ([id, module]) => {\n if (self.__remote_shared_modules__?.[bundle]) {\n self.__remote_shared_modules__[bundle][\n id.replace('[app-ssr]', '[app-client]')\n ] = await (\n shared[module] ??\n (() =>\n Promise.resolve(\n new Proxy(\n {},\n {\n get(_, prop: string) {\n if (prop !== 'then') {\n // eslint-disable-next-line no-console\n console.warn(\n `Shared dependency \"${module}\" not found for \"${bundle}\" when trying to import \"${prop}\".`,\n );\n }\n },\n },\n ),\n ))\n )();\n }\n }),\n );\n}\n\n/**\n * Returns shared modules for common dependencies\n */\nfunction getSharedModule(bundle: string, id: string): unknown {\n const self = globalThis as {\n __remote_shared_modules__?: Record<string, unknown>;\n };\n\n for (const [key, value] of Object.entries(\n self.__remote_shared_modules__?.[bundle] ?? {},\n )) {\n if (id.includes(key)) {\n return value;\n }\n }\n return null;\n}\n\n/**\n * Handles Turbopack module resolution\n */\nfunction handleTurbopackModule(\n bundle: string,\n moduleId: string,\n id: string,\n): unknown {\n const self = globalThis as GlobalScope;\n const bundleKey = getBundleKey(bundle);\n const modules = (\n self[`TURBOPACK_${bundleKey}`] as\n | [unknown, Record<string, unknown>][]\n | undefined\n )?.find((mod: [unknown, Record<string, unknown>]) => moduleId in mod[1])?.[1];\n const moduleInit = modules?.[moduleId];\n if (typeof moduleInit !== 'function') {\n throw new Error(\n `Module ${id} not found in bundle ${bundle} with id ${moduleId}`,\n );\n }\n const exports = {} as Record<string, unknown>;\n moduleInit({\n // HMR not implemented for Remote Components\n k: {\n register() {\n // omit\n },\n registerExports() {\n // omit\n },\n signature() {\n return () => {\n // omit\n };\n },\n },\n s(m: Record<string, () => unknown>) {\n for (const [key, value] of Object.entries(m)) {\n exports[key] = value;\n }\n },\n i(iid: string) {\n return self.__webpack_require__?.(`[${bundle}] ${iid}`);\n },\n r(rid: string) {\n return self.__webpack_require__?.(`[${bundle}] ${rid}`);\n },\n m: {\n exports,\n },\n });\n for (const [key, value] of Object.entries(exports)) {\n if (typeof value === 'function') {\n exports[key] = value();\n }\n }\n return exports;\n}\n","/**\n * Loads external scripts for remote components\n */\nexport async function loadScripts(scripts: { src: string }[]): Promise<void> {\n await Promise.all(\n scripts.map((script) => {\n return new Promise<void>((resolve, reject) => {\n const newSrc = new URL(\n // remove the remote component bundle name identifier from the script src\n script.src.replace(/\\/_next\\/\\[.+\\](?<whitespace>%20| )/, '/_next/'),\n location.origin,\n ).href;\n const newScript = document.createElement('script');\n newScript.onload = () => {\n resolve();\n };\n newScript.onerror = () => {\n reject(\n new Error(\n `Failed to load script ${script.src} for remote component`,\n ),\n );\n };\n newScript.src = newSrc;\n newScript.async = true;\n document.head.appendChild(newScript);\n });\n }),\n );\n}\n","/**\n * Fixes RSC payload to make it compatible with React JSX development runtime\n */\nexport function fixPayload(payload: unknown): void {\n if (Array.isArray(payload)) {\n // if the current node is a React element, we need to fix the payload\n if (payload[0] === '$') {\n // fix the props (children or other React elements)\n fixPayload(payload[3]);\n if (payload.length === 4) {\n // add placeholder for the missing debug info\n payload.push(null, null, 1);\n }\n } else {\n // we are in an array, continue with visiting each item\n for (const item of payload) {\n fixPayload(item);\n }\n }\n } else if (typeof payload === 'object' && payload !== null) {\n // we are in an object, continue with visiting each property\n for (const key in payload) {\n fixPayload((payload as Record<string, unknown>)[key]);\n }\n }\n}\n\n/**\n * Processes RSC flight data and creates a ReadableStream\n */\nexport function createRSCStream(\n name: string,\n data: string[],\n): ReadableStream<Uint8Array> {\n return new ReadableStream({\n type: 'bytes',\n start(controller) {\n const encoder = new TextEncoder();\n const self = globalThis as typeof globalThis & Record<string, string[]>;\n\n // when the remote component RSC scripts are not found or loaded\n // we need to load the RSC flight data parsing the chunks\n if (!self[name] && data.length > 0) {\n data.forEach((chunk) => {\n const lines = chunk.split('\\n');\n for (const line of lines) {\n const match = /\\.push\\(\"(?<rsc>.*)\"\\);$/.exec(line);\n if (match?.groups?.rsc) {\n self[name] = self[name] ?? [];\n self[name].push(JSON.parse(`\"${match.groups.rsc}\"`) as string);\n }\n }\n });\n }\n\n // get the RSC flight data from the global scope\n // the RSC flight data is stored in an array\n // fallback to an empty RSC payload if the data is not found\n const allChunks = (self[name] ?? [`0:[null]\\n`]).join('');\n\n // process each line in the RSC flight data\n allChunks.split('\\n').forEach((chunk) => {\n if (chunk.length > 0) {\n // parse the chunk to get the id, prefix and payload\n const { id, prefix, payload } =\n /(?<id>[0-9a-zA-Z]+):(?<prefix>[A-Z])?(?<payload>\\[.*\\])/.exec(\n chunk,\n )?.groups ?? {};\n\n if (payload) {\n // parse the payload to a JSON object\n const jsonPayload = JSON.parse(payload) as unknown[];\n // fix the payload to make it compatible with React JSX development runtime\n fixPayload(jsonPayload);\n // reconstruct the chunk to a string\n const reconstruct = `${id}:${prefix ?? ''}${JSON.stringify(jsonPayload)}`;\n // encode the chunk to a byte buffer\n controller.enqueue(encoder.encode(`${reconstruct}\\n`));\n } else {\n // add empty line before closing the stream\n controller.enqueue(encoder.encode(`${chunk}\\n`));\n }\n } else {\n // add empty line before closing the stream\n controller.enqueue(encoder.encode(`${chunk}\\n`));\n }\n });\n // close the stream when all chunks are enqueued\n controller.close();\n },\n });\n}\n"],"mappings":"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","names":[]}
|
|
@@ -87,7 +87,9 @@ async function fetchRemoteComponent(src, headers, createComponent = false) {
|
|
|
87
87
|
},
|
|
88
88
|
onScript(attrs) {
|
|
89
89
|
if (!scripts.find((it) => it.src === attrs.src)) {
|
|
90
|
-
scripts.push({
|
|
90
|
+
scripts.push({
|
|
91
|
+
src: new URL(attrs.src, new URL(url).origin).href
|
|
92
|
+
});
|
|
91
93
|
}
|
|
92
94
|
},
|
|
93
95
|
onLink(attrs) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/shared/ssr/fetch-remote-component.ts"],"sourcesContent":["import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack/client.edge';\nimport { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport type { RemoteComponentMetadata } from './types';\nimport { visit } from './dom-flight';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * Resolves the base URL that should be used to fetch the remote component.\n * This function must support local development, Vercel environments, and SSG\n * and dynamic rendering.\n */\nexport function getBaseUrl(reqHeaders: Headers): string {\n const host = reqHeaders.get('host');\n if (host) {\n return host.startsWith('localhost') ? `http://${host}` : `https://${host}`;\n }\n const forwardedHost = reqHeaders.get('x-forwarded-host');\n if (forwardedHost) {\n return `https://${forwardedHost}`;\n }\n if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {\n return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;\n }\n // TODO: Resolve the correct URL in local development when the proxy is not running.\n return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n\nexport async function fetchRemoteComponent(\n src: string | URL,\n headers: Headers,\n createComponent = false,\n) {\n const url = new URL(src, getBaseUrl(headers));\n\n const fetchInit = {\n method: 'GET',\n headers: {\n // pass all headers to the remote component\n ...Object.fromEntries(headers.entries()),\n Accept: 'text/html',\n // pass the public address of the remote component to the server used for module map mutation\n 'Vercel-Remote-Component-Url': url.href,\n },\n credentials: 'include',\n } as RequestInit;\n\n const res = await fetch(url, fetchInit);\n\n if (!res.ok) {\n throw new Error(\n `Failed to fetch remote component \"${url.href}\": ${res.status}`,\n );\n }\n\n // create a parser for the HTML response\n const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n if (!res.body) {\n throw new Error(`No response body for remote component \"${url.href}\"`);\n }\n\n const decoder = new TextDecoder();\n // read the response body as a stream and parse it using the parse5 fragment parser\n for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n parser.tokenizer.write(decoder.decode(chunk), false);\n }\n const fragment = parser.getFragment();\n\n let metadata: RemoteComponentMetadata = {\n bundle: CURRENT_ZONE ?? '__vercel_remote_component',\n route: '/',\n runtime: 'webpack',\n id: '__vercel_remote_component',\n };\n let remoteShared: Record<string, string> = {};\n const scripts: { src: string }[] = [];\n const links: Record<string, string | boolean>[] = [];\n const hydrationData: string[] = [];\n let nextData:\n | {\n props: { pageProps: Record<string, unknown> };\n buildId?: string;\n }\n | undefined;\n let html = '';\n // convert the parsed HTML fragment into an RSC flight data\n // and extract the metadata, scripts, links and remote component RSC flight data\n const rsc = visit(fragment, {\n url,\n onMetadata(_metadata) {\n metadata = _metadata;\n },\n onScript(attrs) {\n if (!scripts.find((it) => it.src === attrs.src)) {\n scripts.push({
|
|
1
|
+
{"version":3,"sources":["../../../src/shared/ssr/fetch-remote-component.ts"],"sourcesContent":["import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack/client.edge';\nimport { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport type { RemoteComponentMetadata } from './types';\nimport { visit } from './dom-flight';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * Resolves the base URL that should be used to fetch the remote component.\n * This function must support local development, Vercel environments, and SSG\n * and dynamic rendering.\n */\nexport function getBaseUrl(reqHeaders: Headers): string {\n const host = reqHeaders.get('host');\n if (host) {\n return host.startsWith('localhost') ? `http://${host}` : `https://${host}`;\n }\n const forwardedHost = reqHeaders.get('x-forwarded-host');\n if (forwardedHost) {\n return `https://${forwardedHost}`;\n }\n if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {\n return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;\n }\n // TODO: Resolve the correct URL in local development when the proxy is not running.\n return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n\nexport async function fetchRemoteComponent(\n src: string | URL,\n headers: Headers,\n createComponent = false,\n) {\n const url = new URL(src, getBaseUrl(headers));\n\n const fetchInit = {\n method: 'GET',\n headers: {\n // pass all headers to the remote component\n ...Object.fromEntries(headers.entries()),\n Accept: 'text/html',\n // pass the public address of the remote component to the server used for module map mutation\n 'Vercel-Remote-Component-Url': url.href,\n },\n credentials: 'include',\n } as RequestInit;\n\n const res = await fetch(url, fetchInit);\n\n if (!res.ok) {\n throw new Error(\n `Failed to fetch remote component \"${url.href}\": ${res.status}`,\n );\n }\n\n // create a parser for the HTML response\n const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n if (!res.body) {\n throw new Error(`No response body for remote component \"${url.href}\"`);\n }\n\n const decoder = new TextDecoder();\n // read the response body as a stream and parse it using the parse5 fragment parser\n for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n parser.tokenizer.write(decoder.decode(chunk), false);\n }\n const fragment = parser.getFragment();\n\n let metadata: RemoteComponentMetadata = {\n bundle: CURRENT_ZONE ?? '__vercel_remote_component',\n route: '/',\n runtime: 'webpack',\n id: '__vercel_remote_component',\n };\n let remoteShared: Record<string, string> = {};\n const scripts: { src: string }[] = [];\n const links: Record<string, string | boolean>[] = [];\n const hydrationData: string[] = [];\n let nextData:\n | {\n props: { pageProps: Record<string, unknown> };\n buildId?: string;\n }\n | undefined;\n let html = '';\n // convert the parsed HTML fragment into an RSC flight data\n // and extract the metadata, scripts, links and remote component RSC flight data\n const rsc = visit(fragment, {\n url,\n onMetadata(_metadata) {\n metadata = _metadata;\n },\n onScript(attrs) {\n if (!scripts.find((it) => it.src === attrs.src)) {\n scripts.push({\n src: new URL(attrs.src as string, new URL(url).origin).href,\n });\n }\n },\n onLink(attrs) {\n if (!links.find((it) => it.href === attrs.href && it.rel === attrs.rel)) {\n links.push(attrs);\n }\n },\n onRSC(chunk) {\n hydrationData.push(chunk);\n },\n onNextData(data) {\n nextData = data;\n\n // use the Next.js Pages Router props data to extract remote component metadata\n if (data.props.__REMOTE_COMPONENT__) {\n Object.assign(metadata, data.props.__REMOTE_COMPONENT__);\n // only a singleton remote component is supported per page when using the Next.js Pages Router\n metadata.id = '__next';\n metadata.route = data.page ?? '/';\n }\n },\n onHTML(_html) {\n if (!html.includes(_html)) {\n html += _html;\n }\n },\n onShared(_shared) {\n remoteShared = _shared;\n },\n });\n\n let component: React.ReactNode | undefined;\n\n // only create a React component if requested\n if (createComponent) {\n // RSC flight data for the static HTML in a single RSC line\n const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n\n // create a React tree from the RSC flight data\n component = await createFromReadableStream(\n new ReadableStream({\n type: 'bytes',\n start(controller) {\n const encoder = new TextEncoder();\n controller.enqueue(encoder.encode(componentRSC));\n controller.close();\n },\n }),\n {\n serverConsumerManifest: {\n moduleLoading: {\n prefix: url.origin,\n crossOrigin: true,\n },\n moduleMap: {},\n },\n },\n );\n }\n\n const name = metadata.id.replace(/_ssr$/, '');\n return {\n name,\n url,\n metadata,\n rsc,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n html,\n remoteShared,\n };\n}\n"],"mappings":"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","names":[]}
|
|
@@ -63,7 +63,9 @@ async function fetchRemoteComponent(src, headers, createComponent = false) {
|
|
|
63
63
|
},
|
|
64
64
|
onScript(attrs) {
|
|
65
65
|
if (!scripts.find((it) => it.src === attrs.src)) {
|
|
66
|
-
scripts.push({
|
|
66
|
+
scripts.push({
|
|
67
|
+
src: new URL(attrs.src, new URL(url).origin).href
|
|
68
|
+
});
|
|
67
69
|
}
|
|
68
70
|
},
|
|
69
71
|
onLink(attrs) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/shared/ssr/fetch-remote-component.ts"],"sourcesContent":["import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack/client.edge';\nimport { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport type { RemoteComponentMetadata } from './types';\nimport { visit } from './dom-flight';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * Resolves the base URL that should be used to fetch the remote component.\n * This function must support local development, Vercel environments, and SSG\n * and dynamic rendering.\n */\nexport function getBaseUrl(reqHeaders: Headers): string {\n const host = reqHeaders.get('host');\n if (host) {\n return host.startsWith('localhost') ? `http://${host}` : `https://${host}`;\n }\n const forwardedHost = reqHeaders.get('x-forwarded-host');\n if (forwardedHost) {\n return `https://${forwardedHost}`;\n }\n if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {\n return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;\n }\n // TODO: Resolve the correct URL in local development when the proxy is not running.\n return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n\nexport async function fetchRemoteComponent(\n src: string | URL,\n headers: Headers,\n createComponent = false,\n) {\n const url = new URL(src, getBaseUrl(headers));\n\n const fetchInit = {\n method: 'GET',\n headers: {\n // pass all headers to the remote component\n ...Object.fromEntries(headers.entries()),\n Accept: 'text/html',\n // pass the public address of the remote component to the server used for module map mutation\n 'Vercel-Remote-Component-Url': url.href,\n },\n credentials: 'include',\n } as RequestInit;\n\n const res = await fetch(url, fetchInit);\n\n if (!res.ok) {\n throw new Error(\n `Failed to fetch remote component \"${url.href}\": ${res.status}`,\n );\n }\n\n // create a parser for the HTML response\n const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n if (!res.body) {\n throw new Error(`No response body for remote component \"${url.href}\"`);\n }\n\n const decoder = new TextDecoder();\n // read the response body as a stream and parse it using the parse5 fragment parser\n for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n parser.tokenizer.write(decoder.decode(chunk), false);\n }\n const fragment = parser.getFragment();\n\n let metadata: RemoteComponentMetadata = {\n bundle: CURRENT_ZONE ?? '__vercel_remote_component',\n route: '/',\n runtime: 'webpack',\n id: '__vercel_remote_component',\n };\n let remoteShared: Record<string, string> = {};\n const scripts: { src: string }[] = [];\n const links: Record<string, string | boolean>[] = [];\n const hydrationData: string[] = [];\n let nextData:\n | {\n props: { pageProps: Record<string, unknown> };\n buildId?: string;\n }\n | undefined;\n let html = '';\n // convert the parsed HTML fragment into an RSC flight data\n // and extract the metadata, scripts, links and remote component RSC flight data\n const rsc = visit(fragment, {\n url,\n onMetadata(_metadata) {\n metadata = _metadata;\n },\n onScript(attrs) {\n if (!scripts.find((it) => it.src === attrs.src)) {\n scripts.push({
|
|
1
|
+
{"version":3,"sources":["../../../src/shared/ssr/fetch-remote-component.ts"],"sourcesContent":["import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack/client.edge';\nimport { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport type { RemoteComponentMetadata } from './types';\nimport { visit } from './dom-flight';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * Resolves the base URL that should be used to fetch the remote component.\n * This function must support local development, Vercel environments, and SSG\n * and dynamic rendering.\n */\nexport function getBaseUrl(reqHeaders: Headers): string {\n const host = reqHeaders.get('host');\n if (host) {\n return host.startsWith('localhost') ? `http://${host}` : `https://${host}`;\n }\n const forwardedHost = reqHeaders.get('x-forwarded-host');\n if (forwardedHost) {\n return `https://${forwardedHost}`;\n }\n if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {\n return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;\n }\n // TODO: Resolve the correct URL in local development when the proxy is not running.\n return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n\nexport async function fetchRemoteComponent(\n src: string | URL,\n headers: Headers,\n createComponent = false,\n) {\n const url = new URL(src, getBaseUrl(headers));\n\n const fetchInit = {\n method: 'GET',\n headers: {\n // pass all headers to the remote component\n ...Object.fromEntries(headers.entries()),\n Accept: 'text/html',\n // pass the public address of the remote component to the server used for module map mutation\n 'Vercel-Remote-Component-Url': url.href,\n },\n credentials: 'include',\n } as RequestInit;\n\n const res = await fetch(url, fetchInit);\n\n if (!res.ok) {\n throw new Error(\n `Failed to fetch remote component \"${url.href}\": ${res.status}`,\n );\n }\n\n // create a parser for the HTML response\n const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n if (!res.body) {\n throw new Error(`No response body for remote component \"${url.href}\"`);\n }\n\n const decoder = new TextDecoder();\n // read the response body as a stream and parse it using the parse5 fragment parser\n for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n parser.tokenizer.write(decoder.decode(chunk), false);\n }\n const fragment = parser.getFragment();\n\n let metadata: RemoteComponentMetadata = {\n bundle: CURRENT_ZONE ?? '__vercel_remote_component',\n route: '/',\n runtime: 'webpack',\n id: '__vercel_remote_component',\n };\n let remoteShared: Record<string, string> = {};\n const scripts: { src: string }[] = [];\n const links: Record<string, string | boolean>[] = [];\n const hydrationData: string[] = [];\n let nextData:\n | {\n props: { pageProps: Record<string, unknown> };\n buildId?: string;\n }\n | undefined;\n let html = '';\n // convert the parsed HTML fragment into an RSC flight data\n // and extract the metadata, scripts, links and remote component RSC flight data\n const rsc = visit(fragment, {\n url,\n onMetadata(_metadata) {\n metadata = _metadata;\n },\n onScript(attrs) {\n if (!scripts.find((it) => it.src === attrs.src)) {\n scripts.push({\n src: new URL(attrs.src as string, new URL(url).origin).href,\n });\n }\n },\n onLink(attrs) {\n if (!links.find((it) => it.href === attrs.href && it.rel === attrs.rel)) {\n links.push(attrs);\n }\n },\n onRSC(chunk) {\n hydrationData.push(chunk);\n },\n onNextData(data) {\n nextData = data;\n\n // use the Next.js Pages Router props data to extract remote component metadata\n if (data.props.__REMOTE_COMPONENT__) {\n Object.assign(metadata, data.props.__REMOTE_COMPONENT__);\n // only a singleton remote component is supported per page when using the Next.js Pages Router\n metadata.id = '__next';\n metadata.route = data.page ?? '/';\n }\n },\n onHTML(_html) {\n if (!html.includes(_html)) {\n html += _html;\n }\n },\n onShared(_shared) {\n remoteShared = _shared;\n },\n });\n\n let component: React.ReactNode | undefined;\n\n // only create a React component if requested\n if (createComponent) {\n // RSC flight data for the static HTML in a single RSC line\n const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n\n // create a React tree from the RSC flight data\n component = await createFromReadableStream(\n new ReadableStream({\n type: 'bytes',\n start(controller) {\n const encoder = new TextEncoder();\n controller.enqueue(encoder.encode(componentRSC));\n controller.close();\n },\n }),\n {\n serverConsumerManifest: {\n moduleLoading: {\n prefix: url.origin,\n crossOrigin: true,\n },\n moduleMap: {},\n },\n },\n );\n }\n\n const name = metadata.id.replace(/_ssr$/, '');\n return {\n name,\n url,\n metadata,\n rsc,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n html,\n remoteShared,\n };\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "remote-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Compose remote components at runtime between microfrontends applications.",
|
|
6
6
|
"keywords": [
|
|
@@ -25,17 +25,33 @@
|
|
|
25
25
|
"import": "./dist/next/remote/pages.js",
|
|
26
26
|
"require": "./dist/next/remote/pages.cjs"
|
|
27
27
|
},
|
|
28
|
+
"./next/client": {
|
|
29
|
+
"import": "./dist/next/client.js",
|
|
30
|
+
"require": "./dist/next/client.cjs"
|
|
31
|
+
},
|
|
32
|
+
"./next/server": {
|
|
33
|
+
"import": "./dist/next/server/app-server.js",
|
|
34
|
+
"require": "./dist/next/server/app-server.cjs"
|
|
35
|
+
},
|
|
28
36
|
"./next/host": {
|
|
29
|
-
"import": "./dist/next/
|
|
30
|
-
"require": "./dist/next/
|
|
37
|
+
"import": "./dist/next/server/app-server.js",
|
|
38
|
+
"require": "./dist/next/server/app-server.cjs"
|
|
39
|
+
},
|
|
40
|
+
"./next/server/pages": {
|
|
41
|
+
"import": "./dist/next/server/pages-server.js",
|
|
42
|
+
"require": "./dist/next/server/pages-server.cjs"
|
|
31
43
|
},
|
|
32
44
|
"./next/host/pages": {
|
|
33
|
-
"import": "./dist/next/
|
|
34
|
-
"require": "./dist/next/
|
|
45
|
+
"import": "./dist/next/server/pages-server.js",
|
|
46
|
+
"require": "./dist/next/server/pages-server.cjs"
|
|
47
|
+
},
|
|
48
|
+
"./next/server/pages/client": {
|
|
49
|
+
"import": "./dist/next/server/pages-client.js",
|
|
50
|
+
"require": "./dist/next/server/pages-client.cjs"
|
|
35
51
|
},
|
|
36
52
|
"./next/host/pages/client": {
|
|
37
|
-
"import": "./dist/next/
|
|
38
|
-
"require": "./dist/next/
|
|
53
|
+
"import": "./dist/next/server/pages-client.js",
|
|
54
|
+
"require": "./dist/next/server/pages-client.cjs"
|
|
39
55
|
},
|
|
40
56
|
"./next/config": {
|
|
41
57
|
"import": "./dist/next/config.js",
|
|
@@ -62,14 +78,26 @@
|
|
|
62
78
|
"next/pages": [
|
|
63
79
|
"./dist/next/remote/pages.d.ts"
|
|
64
80
|
],
|
|
81
|
+
"next/client": [
|
|
82
|
+
"./dist/next/client.d.ts"
|
|
83
|
+
],
|
|
84
|
+
"next/server": [
|
|
85
|
+
"./dist/next/server/app-server.d.ts"
|
|
86
|
+
],
|
|
65
87
|
"next/host": [
|
|
66
88
|
"./dist/next/host/app-server.d.ts"
|
|
67
89
|
],
|
|
90
|
+
"next/server/pages": [
|
|
91
|
+
"./dist/next/server/pages-server.d.ts"
|
|
92
|
+
],
|
|
68
93
|
"next/host/pages": [
|
|
69
|
-
"./dist/next/
|
|
94
|
+
"./dist/next/server/pages-server.d.ts"
|
|
95
|
+
],
|
|
96
|
+
"next/server/pages/client": [
|
|
97
|
+
"./dist/next/server/pages-client.d.ts"
|
|
70
98
|
],
|
|
71
99
|
"next/host/pages/client": [
|
|
72
|
-
"./dist/next/
|
|
100
|
+
"./dist/next/server/pages-client.d.ts"
|
|
73
101
|
],
|
|
74
102
|
"next/config": [
|
|
75
103
|
"./dist/next/config.d.ts"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/host/app-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, useLayoutEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { shared } from '@remote-component/shared/host';\nimport {\n loadRemoteComponent,\n DEFAULT_ROUTE,\n RUNTIME_WEBPACK,\n} from '../../shared/client/remote-component';\nimport type { RemoteComponentProps } from '../../shared/client/remote-component';\n\n// patch react/jsx-runtime to support the shadowrootmode attribute on template elements\ndeclare module 'react/jsx-runtime' {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n export namespace JSX {\n interface IntrinsicElements {\n template: {\n shadowrootmode?: 'open' | 'closed';\n children: React.ReactNode;\n };\n }\n }\n}\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n url,\n name,\n bundle,\n route = DEFAULT_ROUTE,\n runtime = RUNTIME_WEBPACK,\n data,\n nextData,\n scripts = [],\n links = [],\n remoteShared = {},\n isolate,\n children,\n}: RemoteComponentProps) {\n const [component, setComponent] = useState<React.ReactNode | Error>(null);\n\n // Handle errors by re-throwing them\n if (component instanceof Error) {\n throw component;\n }\n\n // determine whether to use children or loaded component\n const shouldUseChildren =\n (!component ||\n (component &&\n !nextData &&\n typeof (component as unknown as Promise<unknown>).then !==\n 'function')) &&\n // if the remote Next.js Pages Router application is in development mode\n // we don't use the provided static HTML\n // to mitigate layout shift when loading CSS using JavaScript on the client\n nextData?.buildId !== 'development';\n\n const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n\n useLayoutEffect(() => {\n if (isolate !== false && typeof document !== 'undefined' && !shadowRoot) {\n let shadowRootElement: ShadowRoot | null = null;\n const element = document.getElementById(`shadowroot_${name}`);\n shadowRootElement = element?.shadowRoot ?? null;\n\n if (!shadowRootElement && element) {\n // create a shadow root if it doesn't exist\n // this is a fallback for browsers that don't support declarative shadow DOM\n element.attachShadow({ mode: 'open' });\n shadowRootElement = element.shadowRoot;\n }\n\n if (shadowRootElement) {\n // remove all nodes from the shadow root except links\n shadowRootElement.querySelectorAll('*:not(link)').forEach((node) => {\n node.remove();\n });\n setShadowRoot(shadowRootElement);\n }\n }\n }, [name, isolate, shadowRoot, links, url]);\n\n useEffect(() => {\n let mounted = true;\n\n // if we have a component, we don't need to load it again\n if (!component && (isolate === false || shadowRoot)) {\n loadRemoteComponent({\n url: new URL(url, location.origin),\n name,\n bundle,\n route,\n runtime,\n data,\n nextData,\n scripts,\n shared,\n remoteShared,\n container: shadowRoot,\n })\n .then((result) => {\n if (mounted) {\n if (result.error) {\n setComponent(result.error);\n } else {\n setComponent(result.component);\n }\n }\n })\n .catch((error: Error) => {\n if (mounted) {\n setComponent(error);\n }\n });\n }\n\n return () => {\n mounted = false;\n };\n }, [\n url,\n component,\n name,\n bundle,\n route,\n runtime,\n scripts,\n data,\n nextData,\n remoteShared,\n children,\n links,\n isolate,\n shadowRoot,\n ]);\n\n let componentToRender = (\n <>{shouldUseChildren ? children : (component as React.ReactNode)}</>\n );\n let linksToRender: React.ReactNode[] | null = links.map((link) => (\n <link\n as={link.as as string}\n href={new URL(link.href as string, url || location.origin).href}\n key={`${link.href as string}_${link.rel}`}\n rel={link.rel as string}\n />\n ));\n\n if (isolate !== false) {\n componentToRender = (\n <div id={`shadowroot_${name}`}>\n {typeof document === 'undefined' ? (\n // eslint-disable-next-line react/no-unknown-property\n <template shadowrootmode=\"open\">\n {linksToRender}\n {componentToRender}\n </template>\n ) : null}\n {shadowRoot\n ? createPortal(\n shadowRoot.querySelectorAll('link').length !== links.length ? (\n <>\n {linksToRender}\n {componentToRender}\n </>\n ) : (\n componentToRender\n ),\n shadowRoot,\n )\n : null}\n </div>\n );\n linksToRender = null;\n }\n\n return (\n <>\n <script data-remote-component type=\"application/json\">\n {JSON.stringify({\n name,\n bundle,\n route,\n runtime,\n })}\n </script>\n {linksToRender}\n {componentToRender}\n {data.length > 0 ? (\n <script id={`${name}_rsc`}>{data.join('\\n')}</script>\n ) : null}\n {nextData ? (\n <script\n id={`${bundle}_${route.replace(/\\//g, '_')}${name}_next_data`}\n type=\"application/json\"\n >\n {JSON.stringify(nextData)}\n </script>\n ) : null}\n </>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/host/app-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, useLayoutEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { shared } from '@remote-component/shared/host';\nimport {\n loadRemoteComponent,\n DEFAULT_ROUTE,\n RUNTIME_WEBPACK,\n} from '../../shared/client/remote-component';\nimport type { RemoteComponentProps } from '../../shared/client/remote-component';\n\n// patch react/jsx-runtime to support the shadowrootmode attribute on template elements\ndeclare module 'react/jsx-runtime' {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n export namespace JSX {\n interface IntrinsicElements {\n template: {\n shadowrootmode?: 'open' | 'closed';\n children: React.ReactNode;\n };\n }\n }\n}\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n url,\n name,\n bundle,\n route = DEFAULT_ROUTE,\n runtime = RUNTIME_WEBPACK,\n data,\n nextData,\n scripts = [],\n links = [],\n remoteShared = {},\n isolate,\n children,\n}: RemoteComponentProps) {\n const [component, setComponent] = useState<React.ReactNode | Error>(null);\n\n // Handle errors by re-throwing them\n if (component instanceof Error) {\n throw component;\n }\n\n // determine whether to use children or loaded component\n const shouldUseChildren =\n (!component ||\n (component &&\n !nextData &&\n typeof (component as unknown as Promise<unknown>).then !==\n 'function')) &&\n // if the remote Next.js Pages Router application is in development mode\n // we don't use the provided static HTML\n // to mitigate layout shift when loading CSS using JavaScript on the client\n nextData?.buildId !== 'development';\n\n const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n\n useLayoutEffect(() => {\n if (isolate !== false && typeof document !== 'undefined' && !shadowRoot) {\n let shadowRootElement: ShadowRoot | null = null;\n const element = document.getElementById(`shadowroot_${name}`);\n shadowRootElement = element?.shadowRoot ?? null;\n\n if (!shadowRootElement && element) {\n // create a shadow root if it doesn't exist\n // this is a fallback for browsers that don't support declarative shadow DOM\n element.attachShadow({ mode: 'open' });\n shadowRootElement = element.shadowRoot;\n }\n\n if (shadowRootElement) {\n // remove all nodes from the shadow root except links\n shadowRootElement.querySelectorAll('*:not(link)').forEach((node) => {\n node.remove();\n });\n setShadowRoot(shadowRootElement);\n }\n }\n }, [name, isolate, shadowRoot, links, url]);\n\n useEffect(() => {\n let mounted = true;\n\n // if we have a component, we don't need to load it again\n if (!component && (isolate === false || shadowRoot)) {\n loadRemoteComponent({\n url: new URL(url, location.origin),\n name,\n bundle,\n route,\n runtime,\n data,\n nextData,\n scripts,\n shared,\n remoteShared,\n container: shadowRoot,\n })\n .then((result) => {\n if (mounted) {\n if (result.error) {\n setComponent(result.error);\n } else {\n setComponent(result.component);\n }\n }\n })\n .catch((error: Error) => {\n if (mounted) {\n setComponent(error);\n }\n });\n }\n\n return () => {\n mounted = false;\n };\n }, [\n url,\n component,\n name,\n bundle,\n route,\n runtime,\n scripts,\n data,\n nextData,\n remoteShared,\n children,\n links,\n isolate,\n shadowRoot,\n ]);\n\n let componentToRender = (\n <>{shouldUseChildren ? children : (component as React.ReactNode)}</>\n );\n let linksToRender: React.ReactNode[] | null = links.map((link) => (\n <link\n as={link.as as string}\n href={new URL(link.href as string, url || location.origin).href}\n key={`${link.href as string}_${link.rel}`}\n rel={link.rel as string}\n />\n ));\n\n if (isolate !== false) {\n componentToRender = (\n <div id={`shadowroot_${name}`}>\n {typeof document === 'undefined' ? (\n // eslint-disable-next-line react/no-unknown-property\n <template shadowrootmode=\"open\">\n {linksToRender}\n {componentToRender}\n </template>\n ) : null}\n {shadowRoot\n ? createPortal(\n shadowRoot.querySelectorAll('link').length !== links.length ? (\n <>\n {linksToRender}\n {componentToRender}\n </>\n ) : (\n componentToRender\n ),\n shadowRoot,\n )\n : null}\n </div>\n );\n linksToRender = null;\n }\n\n return (\n <>\n <script data-remote-component type=\"application/json\">\n {JSON.stringify({\n name,\n bundle,\n route,\n runtime,\n })}\n </script>\n {linksToRender}\n {componentToRender}\n {data.length > 0 ? (\n <script id={`${name}_rsc`}>{data.join('\\n')}</script>\n ) : null}\n {nextData ? (\n <script\n id={`${bundle}_${route.replace(/\\//g, '_')}${name}_next_data`}\n type=\"application/json\"\n >\n {JSON.stringify(nextData)}\n </script>\n ) : null}\n </>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/host/app-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { fetchRemoteComponent } from '../../shared/ssr/fetch-remote-component';\nimport { RemoteComponentClient } from './app-client';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * RemoteComponent is a Next.js component that fetches and renders a remote component.\n * It supports SSR and can isolate the remote component in a shadow DOM.\n *\n * @param src - The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from a remote application:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next/host';\n *\n * export default function MyPage() {\n * return (\n * <>\n * <h1>Welcome to My Page</h1>\n * <p>This page consumes a remote component from another application.</p>\n * <RemoteComponent src=\"/nextjs-app-remote/components/header\" />\n * </>\n * );\n * }\n * ```\n */\nexport async function RemoteComponent({\n src,\n isolate,\n}: {\n src: string | URL;\n isolate?: boolean;\n}) {\n // get the headers from the request\n const headerList = await headers();\n\n const {\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n remoteShared,\n url,\n } = await fetchRemoteComponent(src, headerList, true);\n\n // pass all remote component data to the SSR/client layer\n // render remote component static HTML as children\n // remote _ssr suffix from remote component id\n const name = metadata.id.replace(/_ssr$/, '');\n return (\n <RemoteComponentClient\n bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n data={hydrationData}\n isolate={isolate}\n links={links}\n name={name}\n nextData={nextData}\n remoteShared={remoteShared}\n route={metadata.route}\n runtime={metadata.runtime}\n scripts={scripts}\n url={url.href}\n >\n {component}\n </RemoteComponentClient>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0DI;AA1DJ,qBAAwB;AACxB,oCAAqC;AACrC,wBAAsC;AAEtC,MAAM,eAAe,QAAQ,IAAI;AA4BjC,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA;AACF,GAGG;AAED,QAAM,aAAa,UAAM,wBAAQ;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM,oDAAqB,KAAK,YAAY,IAAI;AAKpD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,KAAK,IAAI;AAAA,MAER;AAAA;AAAA,EACH;AAEJ;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/host/app-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { fetchRemoteComponent } from '../../shared/ssr/fetch-remote-component';\nimport { RemoteComponentClient } from './app-client';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * RemoteComponent is a Next.js component that fetches and renders a remote component.\n * It supports SSR and can isolate the remote component in a shadow DOM.\n *\n * @param src - The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from a remote application:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next/host';\n *\n * export default function MyPage() {\n * return (\n * <>\n * <h1>Welcome to My Page</h1>\n * <p>This page consumes a remote component from another application.</p>\n * <RemoteComponent src=\"/nextjs-app-remote/components/header\" />\n * </>\n * );\n * }\n * ```\n */\nexport async function RemoteComponent({\n src,\n isolate,\n}: {\n src: string | URL;\n isolate?: boolean;\n}) {\n // get the headers from the request\n const headerList = await headers();\n\n const {\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n remoteShared,\n url,\n } = await fetchRemoteComponent(src, headerList, true);\n\n // pass all remote component data to the SSR/client layer\n // render remote component static HTML as children\n // remote _ssr suffix from remote component id\n const name = metadata.id.replace(/_ssr$/, '');\n return (\n <RemoteComponentClient\n bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n data={hydrationData}\n isolate={isolate}\n links={links}\n name={name}\n nextData={nextData}\n remoteShared={remoteShared}\n route={metadata.route}\n runtime={metadata.runtime}\n scripts={scripts}\n url={url.href}\n >\n {component}\n </RemoteComponentClient>\n );\n}\n"],"mappings":"AA0DI;AA1DJ,SAAS,eAAe;AACxB,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAEtC,MAAM,eAAe,QAAQ,IAAI;AA4BjC,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA;AACF,GAGG;AAED,QAAM,aAAa,MAAM,QAAQ;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK,YAAY,IAAI;AAKpD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,KAAK,IAAI;AAAA,MAER;AAAA;AAAA,EACH;AAEJ;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/host/pages-client.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { shared } from '@remote-component/shared/host';\n\n// patch react/jsx-runtime to support the remote-component custom element\ndeclare module 'react/jsx-runtime' {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n export namespace JSX {\n interface IntrinsicElements {\n 'remote-component': {\n src?: string;\n children: React.ReactNode;\n };\n }\n }\n}\n\nexport interface RemoteComponentProps {\n src: string;\n children?: React.ReactNode;\n}\n\nexport function RemoteComponent({\n src,\n children,\n}: RemoteComponentProps): JSX.Element {\n useEffect(() => {\n const self = globalThis as typeof globalThis & {\n __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n };\n // eslint-disable-next-line camelcase\n self.__remote_component_shared__ = shared;\n import('remote-components/html');\n }, []);\n\n return <remote-component src={src}>{children}</remote-component>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCS;AAlCT,mBAA0B;AAC1B,kBAAuB;AAoBhB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AACF,GAAsC;AACpC,8BAAU,MAAM;AACd,UAAM,OAAO;AAIb,SAAK,8BAA8B;AACnC,WAAO,wBAAwB;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SAAO,4CAAC,sBAAiB,KAAW,UAAS;AAC/C;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/host/pages-client.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { shared } from '@remote-component/shared/host';\n\n// patch react/jsx-runtime to support the remote-component custom element\ndeclare module 'react/jsx-runtime' {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n export namespace JSX {\n interface IntrinsicElements {\n 'remote-component': {\n src?: string;\n children: React.ReactNode;\n };\n }\n }\n}\n\nexport interface RemoteComponentProps {\n src: string;\n children?: React.ReactNode;\n}\n\nexport function RemoteComponent({\n src,\n children,\n}: RemoteComponentProps): JSX.Element {\n useEffect(() => {\n const self = globalThis as typeof globalThis & {\n __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n };\n // eslint-disable-next-line camelcase\n self.__remote_component_shared__ = shared;\n import('remote-components/html');\n }, []);\n\n return <remote-component src={src}>{children}</remote-component>;\n}\n"],"mappings":"AAkCS;AAlCT,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AAoBhB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AACF,GAAsC;AACpC,YAAU,MAAM;AACd,UAAM,OAAO;AAIb,SAAK,8BAA8B;AACnC,WAAO,wBAAwB;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SAAO,oBAAC,sBAAiB,KAAW,UAAS;AAC/C;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/host/pages-server.tsx"],"sourcesContent":["import type { IncomingHttpHeaders } from 'node:http';\nimport { useEffect } from 'react';\nimport { shared } from '@remote-component/shared/host';\nimport { fetchRemoteComponent } from '../../shared/ssr/fetch-remote-component';\n\n// patch react/jsx-runtime to support the remote-component custom element\ndeclare module 'react/jsx-runtime' {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n export namespace JSX {\n interface IntrinsicElements {\n 'remote-component': {\n src?: string;\n children: React.ReactNode;\n };\n }\n }\n}\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n [REMOTE_COMPONENT_STORE]?: Map<string, string>;\n};\n\nfunction getKey({\n bundle,\n route,\n name,\n}: {\n bundle?: string;\n route?: string;\n name?: string;\n}): string {\n return `${bundle ?? '__next'}:${route ?? '/'}:${name ?? '__vercel_remote_component'}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, html: string): void {\n if (!self[REMOTE_COMPONENT_STORE]) {\n self[REMOTE_COMPONENT_STORE] = new Map();\n }\n self[REMOTE_COMPONENT_STORE].set(key, html);\n}\n\nfunction getComponent(key: string): string | undefined {\n const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n // remove the component from the store after retrieving it to prevent memory leaks\n // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n self[REMOTE_COMPONENT_STORE]?.delete(key);\n return component;\n}\n\nexport interface RemoteComponentProps {\n src: string;\n bundle?: string;\n route?: string;\n name?: string;\n [REMOTE_COMPONENT_KEY]?: string;\n children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps): JSX.Element {\n const remoteComponent =\n typeof document !== 'undefined'\n ? null\n : // retrieve the HTML from the global store\n getComponent(\n props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n );\n\n useEffect(() => {\n const clientSelf = globalThis as typeof globalThis & {\n __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n };\n // eslint-disable-next-line camelcase\n clientSelf.__remote_component_shared__ = shared;\n import('remote-components/html');\n }, []);\n\n if (!props[REMOTE_COMPONENT_KEY]) {\n return (\n <remote-component src={props.src}>{props.children}</remote-component>\n );\n }\n\n return (\n <remote-component src={props.src}>\n <div\n dangerouslySetInnerHTML={{ __html: remoteComponent ?? '' }}\n id=\"__REMOTE_COMPONENT__\"\n suppressHydrationWarning\n />\n </remote-component>\n );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n * const myRemoteComponent = await getRemoteComponentProps(\n * '/nextjs-app-remote/components/header',\n * req.headers,\n * );\n * return {\n * props: {\n * remoteComponents: {\n * myRemoteComponent,\n * },\n * },\n * };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n src: string,\n headers: IncomingHttpHeaders,\n): Promise<RemoteComponentProps> {\n if (typeof document !== 'undefined') {\n throw new Error(\n 'getRemoteComponentProps can only be used on the server side.',\n );\n }\n\n const {\n metadata: { bundle, route, runtime },\n name,\n html,\n nextData,\n } = await fetchRemoteComponent(\n src,\n headers instanceof Headers\n ? headers\n : // convert IncomingHttpHeaders to web standard Headers\n Object.entries(headers).reduce((acc, [key, value]) => {\n if (value) {\n if (Array.isArray(value)) {\n value.forEach((v) => acc.append(key, v));\n } else {\n acc.append(key, value);\n }\n }\n return acc;\n }, new Headers()),\n );\n\n const props = {\n src,\n bundle,\n name,\n route,\n runtime,\n };\n\n // do not render the HTML in development mode when remote is using Next.js Pages Router\n // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n if (nextData?.buildId === 'development') {\n return props;\n }\n\n const key = getKey(props);\n // store the HTML in a global store\n setComponent(key, html);\n\n return {\n ...props,\n // add remote component key to the props\n [REMOTE_COMPONENT_KEY]: key,\n };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0FM;AAzFN,mBAA0B;AAC1B,kBAAuB;AACvB,oCAAqC;AAgBrC,MAAM,yBAAyB,OAAO,wBAAwB;AAC9D,MAAM,uBAAuB;AAI7B,MAAM,OAAO;AAIb,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAIW;AACT,SAAO,GAAG,UAAU,YAAY,SAAS,OAAO,QAAQ,gCAAgC,OAAO,WAAW;AAC5G;AAEA,SAAS,aAAa,KAAa,MAAoB;AACrD,MAAI,CAAC,KAAK,sBAAsB,GAAG;AACjC,SAAK,sBAAsB,IAAI,oBAAI,IAAI;AAAA,EACzC;AACA,OAAK,sBAAsB,EAAE,IAAI,KAAK,IAAI;AAC5C;AAEA,SAAS,aAAa,KAAiC;AACrD,QAAM,YAAY,KAAK,sBAAsB,GAAG,IAAI,GAAG;AAGvD,OAAK,sBAAsB,GAAG,OAAO,GAAG;AACxC,SAAO;AACT;AAiBO,SAAS,gBAAgB,OAA0C;AACxE,QAAM,kBACJ,OAAO,aAAa,cAChB;AAAA;AAAA,IAEA;AAAA,MACE,MAAM,oBAAoB,KAAK;AAAA,IACjC;AAAA;AAEN,8BAAU,MAAM;AACd,UAAM,aAAa;AAInB,eAAW,8BAA8B;AACzC,WAAO,wBAAwB;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,MAAM,oBAAoB,GAAG;AAChC,WACE,4CAAC,sBAAiB,KAAK,MAAM,KAAM,gBAAM,UAAS;AAAA,EAEtD;AAEA,SACE,4CAAC,sBAAiB,KAAK,MAAM,KAC3B;AAAA,IAAC;AAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,mBAAmB,GAAG;AAAA,MACzD,IAAG;AAAA,MACH,0BAAwB;AAAA;AAAA,EAC1B,GACF;AAEJ;AA8BA,eAAsB,wBACpB,KACA,SAC+B;AAC/B,MAAI,OAAO,aAAa,aAAa;AACnC,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,UAAU,EAAE,QAAQ,OAAO,QAAQ;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM;AAAA,IACR;AAAA,IACA,mBAAmB,UACf;AAAA;AAAA,MAEA,OAAO,QAAQ,OAAO,EAAE,OAAO,CAAC,KAAK,CAACA,MAAK,KAAK,MAAM;AACpD,YAAI,OAAO;AACT,cAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,kBAAM,QAAQ,CAAC,MAAM,IAAI,OAAOA,MAAK,CAAC,CAAC;AAAA,UACzC,OAAO;AACL,gBAAI,OAAOA,MAAK,KAAK;AAAA,UACvB;AAAA,QACF;AACA,eAAO;AAAA,MACT,GAAG,IAAI,QAAQ,CAAC;AAAA;AAAA,EACtB;AAEA,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAIA,MAAI,UAAU,YAAY,eAAe;AACvC,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,OAAO,KAAK;AAExB,eAAa,KAAK,IAAI;AAEtB,SAAO;AAAA,IACL,GAAG;AAAA;AAAA,IAEH,CAAC,oBAAoB,GAAG;AAAA,EAC1B;AACF;","names":["key"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/host/pages-server.tsx"],"sourcesContent":["import type { IncomingHttpHeaders } from 'node:http';\nimport { useEffect } from 'react';\nimport { shared } from '@remote-component/shared/host';\nimport { fetchRemoteComponent } from '../../shared/ssr/fetch-remote-component';\n\n// patch react/jsx-runtime to support the remote-component custom element\ndeclare module 'react/jsx-runtime' {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n export namespace JSX {\n interface IntrinsicElements {\n 'remote-component': {\n src?: string;\n children: React.ReactNode;\n };\n }\n }\n}\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n [REMOTE_COMPONENT_STORE]?: Map<string, string>;\n};\n\nfunction getKey({\n bundle,\n route,\n name,\n}: {\n bundle?: string;\n route?: string;\n name?: string;\n}): string {\n return `${bundle ?? '__next'}:${route ?? '/'}:${name ?? '__vercel_remote_component'}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, html: string): void {\n if (!self[REMOTE_COMPONENT_STORE]) {\n self[REMOTE_COMPONENT_STORE] = new Map();\n }\n self[REMOTE_COMPONENT_STORE].set(key, html);\n}\n\nfunction getComponent(key: string): string | undefined {\n const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n // remove the component from the store after retrieving it to prevent memory leaks\n // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n self[REMOTE_COMPONENT_STORE]?.delete(key);\n return component;\n}\n\nexport interface RemoteComponentProps {\n src: string;\n bundle?: string;\n route?: string;\n name?: string;\n [REMOTE_COMPONENT_KEY]?: string;\n children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps): JSX.Element {\n const remoteComponent =\n typeof document !== 'undefined'\n ? null\n : // retrieve the HTML from the global store\n getComponent(\n props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n );\n\n useEffect(() => {\n const clientSelf = globalThis as typeof globalThis & {\n __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n };\n // eslint-disable-next-line camelcase\n clientSelf.__remote_component_shared__ = shared;\n import('remote-components/html');\n }, []);\n\n if (!props[REMOTE_COMPONENT_KEY]) {\n return (\n <remote-component src={props.src}>{props.children}</remote-component>\n );\n }\n\n return (\n <remote-component src={props.src}>\n <div\n dangerouslySetInnerHTML={{ __html: remoteComponent ?? '' }}\n id=\"__REMOTE_COMPONENT__\"\n suppressHydrationWarning\n />\n </remote-component>\n );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n * const myRemoteComponent = await getRemoteComponentProps(\n * '/nextjs-app-remote/components/header',\n * req.headers,\n * );\n * return {\n * props: {\n * remoteComponents: {\n * myRemoteComponent,\n * },\n * },\n * };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n src: string,\n headers: IncomingHttpHeaders,\n): Promise<RemoteComponentProps> {\n if (typeof document !== 'undefined') {\n throw new Error(\n 'getRemoteComponentProps can only be used on the server side.',\n );\n }\n\n const {\n metadata: { bundle, route, runtime },\n name,\n html,\n nextData,\n } = await fetchRemoteComponent(\n src,\n headers instanceof Headers\n ? headers\n : // convert IncomingHttpHeaders to web standard Headers\n Object.entries(headers).reduce((acc, [key, value]) => {\n if (value) {\n if (Array.isArray(value)) {\n value.forEach((v) => acc.append(key, v));\n } else {\n acc.append(key, value);\n }\n }\n return acc;\n }, new Headers()),\n );\n\n const props = {\n src,\n bundle,\n name,\n route,\n runtime,\n };\n\n // do not render the HTML in development mode when remote is using Next.js Pages Router\n // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n if (nextData?.buildId === 'development') {\n return props;\n }\n\n const key = getKey(props);\n // store the HTML in a global store\n setComponent(key, html);\n\n return {\n ...props,\n // add remote component key to the props\n [REMOTE_COMPONENT_KEY]: key,\n };\n}\n"],"mappings":"AA0FM;AAzFN,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,4BAA4B;AAgBrC,MAAM,yBAAyB,OAAO,wBAAwB;AAC9D,MAAM,uBAAuB;AAI7B,MAAM,OAAO;AAIb,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAIW;AACT,SAAO,GAAG,UAAU,YAAY,SAAS,OAAO,QAAQ,gCAAgC,OAAO,WAAW;AAC5G;AAEA,SAAS,aAAa,KAAa,MAAoB;AACrD,MAAI,CAAC,KAAK,sBAAsB,GAAG;AACjC,SAAK,sBAAsB,IAAI,oBAAI,IAAI;AAAA,EACzC;AACA,OAAK,sBAAsB,EAAE,IAAI,KAAK,IAAI;AAC5C;AAEA,SAAS,aAAa,KAAiC;AACrD,QAAM,YAAY,KAAK,sBAAsB,GAAG,IAAI,GAAG;AAGvD,OAAK,sBAAsB,GAAG,OAAO,GAAG;AACxC,SAAO;AACT;AAiBO,SAAS,gBAAgB,OAA0C;AACxE,QAAM,kBACJ,OAAO,aAAa,cAChB;AAAA;AAAA,IAEA;AAAA,MACE,MAAM,oBAAoB,KAAK;AAAA,IACjC;AAAA;AAEN,YAAU,MAAM;AACd,UAAM,aAAa;AAInB,eAAW,8BAA8B;AACzC,WAAO,wBAAwB;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,MAAM,oBAAoB,GAAG;AAChC,WACE,oBAAC,sBAAiB,KAAK,MAAM,KAAM,gBAAM,UAAS;AAAA,EAEtD;AAEA,SACE,oBAAC,sBAAiB,KAAK,MAAM,KAC3B;AAAA,IAAC;AAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,mBAAmB,GAAG;AAAA,MACzD,IAAG;AAAA,MACH,0BAAwB;AAAA;AAAA,EAC1B,GACF;AAEJ;AA8BA,eAAsB,wBACpB,KACA,SAC+B;AAC/B,MAAI,OAAO,aAAa,aAAa;AACnC,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,UAAU,EAAE,QAAQ,OAAO,QAAQ;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM;AAAA,IACR;AAAA,IACA,mBAAmB,UACf;AAAA;AAAA,MAEA,OAAO,QAAQ,OAAO,EAAE,OAAO,CAAC,KAAK,CAACA,MAAK,KAAK,MAAM;AACpD,YAAI,OAAO;AACT,cAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,kBAAM,QAAQ,CAAC,MAAM,IAAI,OAAOA,MAAK,CAAC,CAAC;AAAA,UACzC,OAAO;AACL,gBAAI,OAAOA,MAAK,KAAK;AAAA,UACvB;AAAA,QACF;AACA,eAAO;AAAA,MACT,GAAG,IAAI,QAAQ,CAAC;AAAA;AAAA,EACtB;AAEA,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAIA,MAAI,UAAU,YAAY,eAAe;AACvC,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,OAAO,KAAK;AAExB,eAAa,KAAK,IAAI;AAEtB,SAAO;AAAA,IACL,GAAG;AAAA;AAAA,IAEH,CAAC,oBAAoB,GAAG;AAAA,EAC1B;AACF;","names":["key"]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|