remote-components 0.3.3 → 0.3.5
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/config/nextjs.cjs +86 -37
- package/dist/config/nextjs.cjs.map +1 -1
- package/dist/config/nextjs.js +86 -37
- package/dist/config/nextjs.js.map +1 -1
- package/dist/config/webpack.cjs +5 -1
- package/dist/config/webpack.cjs.map +1 -1
- package/dist/config/webpack.js +5 -1
- package/dist/config/webpack.js.map +1 -1
- package/dist/host/html.cjs +861 -617
- package/dist/host/html.cjs.map +1 -1
- package/dist/host/html.js +861 -617
- package/dist/host/html.js.map +1 -1
- package/dist/host/nextjs/app/client-only.cjs +700 -383
- package/dist/host/nextjs/app/client-only.cjs.map +1 -1
- package/dist/host/nextjs/app/client-only.js +674 -357
- package/dist/host/nextjs/app/client-only.js.map +1 -1
- package/dist/host/nextjs/app.cjs +34 -2
- package/dist/host/nextjs/app.cjs.map +1 -1
- package/dist/host/nextjs/app.js +35 -3
- package/dist/host/nextjs/app.js.map +1 -1
- package/dist/host/react.cjs +641 -352
- package/dist/host/react.cjs.map +1 -1
- package/dist/host/react.js +641 -352
- package/dist/host/react.js.map +1 -1
- package/dist/internal/config/webpack/apply-shared-modules.cjs +6 -4
- package/dist/internal/config/webpack/apply-shared-modules.cjs.map +1 -1
- package/dist/internal/config/webpack/apply-shared-modules.js +6 -4
- package/dist/internal/config/webpack/apply-shared-modules.js.map +1 -1
- package/dist/internal/config/webpack/next-client-pages-loader.cjs +6 -7
- package/dist/internal/config/webpack/next-client-pages-loader.cjs.map +1 -1
- package/dist/internal/config/webpack/next-client-pages-loader.js +6 -7
- package/dist/internal/config/webpack/next-client-pages-loader.js.map +1 -1
- package/dist/internal/host/nextjs/app-client.cjs +42 -27
- package/dist/internal/host/nextjs/app-client.cjs.map +1 -1
- package/dist/internal/host/nextjs/app-client.js +42 -27
- package/dist/internal/host/nextjs/app-client.js.map +1 -1
- package/dist/internal/host/nextjs/dom-flight.cjs +19 -39
- package/dist/internal/host/nextjs/dom-flight.cjs.map +1 -1
- package/dist/internal/host/nextjs/dom-flight.js +31 -39
- package/dist/internal/host/nextjs/dom-flight.js.map +1 -1
- package/dist/internal/host/nextjs/image-shared.cjs +39 -3
- package/dist/internal/host/nextjs/image-shared.cjs.map +1 -1
- package/dist/internal/host/nextjs/image-shared.d.ts +5 -10
- package/dist/internal/host/nextjs/image-shared.js +29 -3
- package/dist/internal/host/nextjs/image-shared.js.map +1 -1
- package/dist/internal/host/nextjs/remote-component-links.cjs +24 -13
- package/dist/internal/host/nextjs/remote-component-links.cjs.map +1 -1
- package/dist/internal/host/nextjs/remote-component-links.d.ts +3 -0
- package/dist/internal/host/nextjs/remote-component-links.js +24 -13
- package/dist/internal/host/nextjs/remote-component-links.js.map +1 -1
- package/dist/internal/host/server/fetch-remote-component.cjs +2 -1
- package/dist/internal/host/server/fetch-remote-component.cjs.map +1 -1
- package/dist/internal/host/server/fetch-remote-component.js +2 -1
- package/dist/internal/host/server/fetch-remote-component.js.map +1 -1
- package/dist/internal/host/shared/lifecycle.cjs +69 -0
- package/dist/internal/host/shared/lifecycle.cjs.map +1 -0
- package/dist/internal/host/shared/lifecycle.d.ts +34 -0
- package/dist/internal/host/shared/lifecycle.js +44 -0
- package/dist/internal/host/shared/lifecycle.js.map +1 -0
- package/dist/internal/host/shared/pipeline.cjs +222 -0
- package/dist/internal/host/shared/pipeline.cjs.map +1 -0
- package/dist/internal/host/shared/pipeline.d.ts +153 -0
- package/dist/internal/host/shared/pipeline.js +200 -0
- package/dist/internal/host/shared/pipeline.js.map +1 -0
- package/dist/internal/host/shared/polyfill.cjs +8 -7
- package/dist/internal/host/shared/polyfill.cjs.map +1 -1
- package/dist/internal/host/shared/polyfill.js +8 -7
- package/dist/internal/host/shared/polyfill.js.map +1 -1
- package/dist/internal/host/shared/shared-module-resolver.cjs +117 -0
- package/dist/internal/host/shared/shared-module-resolver.cjs.map +1 -0
- package/dist/internal/host/shared/shared-module-resolver.d.ts +64 -0
- package/dist/internal/host/shared/shared-module-resolver.js +78 -0
- package/dist/internal/host/shared/shared-module-resolver.js.map +1 -0
- package/dist/internal/remote/nextjs/next-internals.cjs +53 -0
- package/dist/internal/remote/nextjs/next-internals.cjs.map +1 -0
- package/dist/internal/remote/nextjs/next-internals.d.ts +42 -0
- package/dist/internal/remote/nextjs/next-internals.js +26 -0
- package/dist/internal/remote/nextjs/next-internals.js.map +1 -0
- package/dist/internal/runtime/html/apply-origin.cjs +11 -32
- package/dist/internal/runtime/html/apply-origin.cjs.map +1 -1
- package/dist/internal/runtime/html/apply-origin.js +11 -32
- package/dist/internal/runtime/html/apply-origin.js.map +1 -1
- package/dist/internal/runtime/html/html-spec.cjs +78 -0
- package/dist/internal/runtime/html/html-spec.cjs.map +1 -0
- package/dist/internal/runtime/html/html-spec.d.ts +23 -0
- package/dist/internal/runtime/html/html-spec.js +41 -0
- package/dist/internal/runtime/html/html-spec.js.map +1 -0
- package/dist/internal/runtime/html/parse-remote-html.cjs +15 -12
- package/dist/internal/runtime/html/parse-remote-html.cjs.map +1 -1
- package/dist/internal/runtime/html/parse-remote-html.js +29 -12
- package/dist/internal/runtime/html/parse-remote-html.js.map +1 -1
- package/dist/internal/runtime/html/rewrite-srcset.cjs +38 -0
- package/dist/internal/runtime/html/rewrite-srcset.cjs.map +1 -0
- package/dist/internal/runtime/html/rewrite-srcset.d.ts +12 -0
- package/dist/internal/runtime/html/rewrite-srcset.js +14 -0
- package/dist/internal/runtime/html/rewrite-srcset.js.map +1 -0
- package/dist/internal/runtime/loaders/component-loader.cjs +25 -44
- package/dist/internal/runtime/loaders/component-loader.cjs.map +1 -1
- package/dist/internal/runtime/loaders/component-loader.d.ts +3 -1
- package/dist/internal/runtime/loaders/component-loader.js +28 -44
- package/dist/internal/runtime/loaders/component-loader.js.map +1 -1
- package/dist/internal/runtime/loaders/static-loader.cjs +15 -21
- package/dist/internal/runtime/loaders/static-loader.cjs.map +1 -1
- package/dist/internal/runtime/loaders/static-loader.d.ts +3 -1
- package/dist/internal/runtime/loaders/static-loader.js +15 -21
- package/dist/internal/runtime/loaders/static-loader.js.map +1 -1
- package/dist/internal/runtime/namespace.cjs +82 -0
- package/dist/internal/runtime/namespace.cjs.map +1 -0
- package/dist/internal/runtime/namespace.d.ts +5 -0
- package/dist/internal/runtime/namespace.js +58 -0
- package/dist/internal/runtime/namespace.js.map +1 -0
- package/dist/internal/runtime/rsc-imports.cjs +86 -0
- package/dist/internal/runtime/rsc-imports.cjs.map +1 -0
- package/dist/internal/runtime/rsc-imports.d.ts +39 -0
- package/dist/internal/runtime/rsc-imports.js +50 -0
- package/dist/internal/runtime/rsc-imports.js.map +1 -0
- package/dist/internal/runtime/rsc-runtime.cjs +17 -0
- package/dist/internal/runtime/rsc-runtime.cjs.map +1 -0
- package/dist/internal/runtime/rsc-runtime.d.ts +37 -0
- package/dist/internal/runtime/rsc-runtime.js +1 -0
- package/dist/internal/runtime/rsc-runtime.js.map +1 -0
- package/dist/internal/runtime/rsc.cjs +23 -12
- package/dist/internal/runtime/rsc.cjs.map +1 -1
- package/dist/internal/runtime/rsc.d.ts +19 -2
- package/dist/internal/runtime/rsc.js +20 -11
- package/dist/internal/runtime/rsc.js.map +1 -1
- package/dist/internal/runtime/turbopack/chunk-loader.cjs +53 -35
- package/dist/internal/runtime/turbopack/chunk-loader.cjs.map +1 -1
- package/dist/internal/runtime/turbopack/chunk-loader.d.ts +1 -1
- package/dist/internal/runtime/turbopack/chunk-loader.js +53 -35
- package/dist/internal/runtime/turbopack/chunk-loader.js.map +1 -1
- package/dist/internal/runtime/turbopack/module.cjs +17 -4
- package/dist/internal/runtime/turbopack/module.cjs.map +1 -1
- package/dist/internal/runtime/turbopack/module.d.ts +23 -1
- package/dist/internal/runtime/turbopack/module.js +16 -4
- package/dist/internal/runtime/turbopack/module.js.map +1 -1
- package/dist/internal/runtime/turbopack/patterns.cjs +26 -10
- package/dist/internal/runtime/turbopack/patterns.cjs.map +1 -1
- package/dist/internal/runtime/turbopack/patterns.d.ts +44 -49
- package/dist/internal/runtime/turbopack/patterns.js +23 -7
- package/dist/internal/runtime/turbopack/patterns.js.map +1 -1
- package/dist/internal/runtime/turbopack/{webpack-runtime.cjs → remote-scope-setup.cjs} +35 -32
- package/dist/internal/runtime/turbopack/remote-scope-setup.cjs.map +1 -0
- package/dist/internal/runtime/turbopack/remote-scope-setup.d.ts +25 -0
- package/dist/internal/runtime/turbopack/{webpack-runtime.js → remote-scope-setup.js} +36 -19
- package/dist/internal/runtime/turbopack/remote-scope-setup.js.map +1 -0
- package/dist/internal/runtime/turbopack/remote-scope.cjs +4 -6
- package/dist/internal/runtime/turbopack/remote-scope.cjs.map +1 -1
- package/dist/internal/runtime/turbopack/remote-scope.d.ts +20 -1
- package/dist/internal/runtime/turbopack/remote-scope.js +4 -6
- package/dist/internal/runtime/turbopack/remote-scope.js.map +1 -1
- package/dist/internal/runtime/turbopack/shared-modules.cjs +21 -15
- package/dist/internal/runtime/turbopack/shared-modules.cjs.map +1 -1
- package/dist/internal/runtime/turbopack/shared-modules.d.ts +9 -2
- package/dist/internal/runtime/turbopack/shared-modules.js +24 -18
- package/dist/internal/runtime/turbopack/shared-modules.js.map +1 -1
- package/dist/internal/runtime/types.cjs.map +1 -1
- package/dist/internal/runtime/types.d.ts +5 -41
- package/dist/internal/utils/logger.cjs +1 -1
- package/dist/internal/utils/logger.cjs.map +1 -1
- package/dist/internal/utils/logger.d.ts +2 -2
- package/dist/internal/utils/logger.js +1 -1
- package/dist/internal/utils/logger.js.map +1 -1
- package/dist/remote/html.cjs +78 -22
- package/dist/remote/html.cjs.map +1 -1
- package/dist/remote/html.js +78 -22
- package/dist/remote/html.js.map +1 -1
- package/dist/remote/nextjs/app.cjs +14 -55
- package/dist/remote/nextjs/app.cjs.map +1 -1
- package/dist/remote/nextjs/app.js +24 -45
- package/dist/remote/nextjs/app.js.map +1 -1
- package/dist/types-59251814.d.ts +94 -0
- package/package.json +2 -2
- package/dist/internal/runtime/turbopack/webpack-runtime.cjs.map +0 -1
- package/dist/internal/runtime/turbopack/webpack-runtime.d.ts +0 -23
- package/dist/internal/runtime/turbopack/webpack-runtime.js.map +0 -1
package/dist/host/nextjs/app.cjs
CHANGED
|
@@ -24,8 +24,10 @@ module.exports = __toCommonJS(app_exports);
|
|
|
24
24
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
25
|
var import_wrapper = require("remote-components/remote/defaults/wrapper");
|
|
26
26
|
var import_react = require("react");
|
|
27
|
+
var import_react_dom = require("react-dom");
|
|
27
28
|
var import_app_client = require("#internal/host/nextjs/app-client");
|
|
28
29
|
var import_fetch_remote_component = require("#internal/host/server/fetch-remote-component");
|
|
30
|
+
var import_constants = require("#internal/runtime/constants");
|
|
29
31
|
async function ConsumeRemoteComponent({
|
|
30
32
|
src,
|
|
31
33
|
name: nameProp,
|
|
@@ -74,10 +76,40 @@ async function ConsumeRemoteComponent({
|
|
|
74
76
|
children: component
|
|
75
77
|
}
|
|
76
78
|
);
|
|
79
|
+
const preloadHints = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChunkPreloadHints, { scripts, runtime });
|
|
77
80
|
if (import_react.Children.count(children) > 0) {
|
|
78
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.
|
|
81
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Suspense, { fallback: children, children: [
|
|
82
|
+
preloadHints,
|
|
83
|
+
remoteComponentClient
|
|
84
|
+
] });
|
|
79
85
|
}
|
|
80
|
-
return
|
|
86
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
87
|
+
preloadHints,
|
|
88
|
+
remoteComponentClient
|
|
89
|
+
] });
|
|
90
|
+
}
|
|
91
|
+
function ChunkPreloadHints({
|
|
92
|
+
scripts,
|
|
93
|
+
runtime
|
|
94
|
+
}) {
|
|
95
|
+
const scriptsWithSrc = scripts.filter((script) => script.src);
|
|
96
|
+
const as = runtime === import_constants.RUNTIME_TURBOPACK ? "fetch" : "script";
|
|
97
|
+
if (typeof import_react_dom.preload === "function") {
|
|
98
|
+
for (const script of scriptsWithSrc) {
|
|
99
|
+
(0, import_react_dom.preload)(script.src, { as, crossOrigin: "anonymous" });
|
|
100
|
+
}
|
|
101
|
+
return null;
|
|
102
|
+
}
|
|
103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: scriptsWithSrc.map((script) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
104
|
+
"link",
|
|
105
|
+
{
|
|
106
|
+
rel: "preload",
|
|
107
|
+
href: script.src,
|
|
108
|
+
as,
|
|
109
|
+
crossOrigin: "anonymous"
|
|
110
|
+
},
|
|
111
|
+
script.src
|
|
112
|
+
)) });
|
|
81
113
|
}
|
|
82
114
|
// Annotate the CommonJS export names for ESM import in node:
|
|
83
115
|
0 && (module.exports = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/host/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { Children, Suspense } from 'react';\nimport { ConsumeRemoteComponentClient } from '#internal/host/nextjs/app-client';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeServerConfig } from '#internal/host/shared/config';\n\n/**\n * Props for the Next.js App Router remote component host (server component).\n */\nexport interface ConsumeRemoteComponentProps extends ConsumeServerConfig {\n /** The source URL of the remote component. Required for server rendering. */\n src: string | URL;\n /** Loading fallback content to display while the remote component is being fetched. */\n children?: React.ReactNode;\n}\n\n/**\n * Next.js App Router server component that fetches and renders a remote component.\n * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).\n *\n * @example\n * ```tsx\n * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';\n *\n * export default function MyPage() {\n * return <ConsumeRemoteComponent src=\"/nextjs-app-remote/components/header\" />;\n * }\n * ```\n */\nexport async function ConsumeRemoteComponent({\n src,\n name: nameProp,\n isolate,\n mode,\n reset,\n children,\n onRequest,\n onResponse,\n}: ConsumeRemoteComponentProps): Promise<React.ReactElement> {\n const {\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n remoteShared,\n serverUrl,\n } = await fetchRemoteComponent(src, {\n name: nameProp,\n rsc: true,\n appRouter: true,\n onRequest,\n onResponse,\n });\n\n const { name, bundle, route, runtime, type } = metadata;\n const remoteComponentClient = (\n <ConsumeRemoteComponentClient\n bundle={bundle}\n data={hydrationData}\n isolate={isolate}\n links={links}\n mode={mode}\n name={name}\n nextData={nextData}\n remoteShared={remoteShared}\n reset={reset}\n route={route}\n runtime={runtime}\n scripts={scripts}\n type={type}\n src={typeof src === 'string' ? src : src.href}\n serverUrl={serverUrl.href}\n >\n {component}\n </ConsumeRemoteComponentClient>\n );\n\n if (Children.count(children) > 0) {\n
|
|
1
|
+
{"version":3,"sources":["../../../src/host/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { Children, Suspense } from 'react';\nimport { preload as reactDomPreload } from 'react-dom';\nimport { ConsumeRemoteComponentClient } from '#internal/host/nextjs/app-client';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ScriptDescriptor } from '#internal/host/shared/asset-descriptors';\nimport type { ConsumeServerConfig } from '#internal/host/shared/config';\nimport { RUNTIME_TURBOPACK } from '#internal/runtime/constants';\n\n/**\n * Props for the Next.js App Router remote component host (server component).\n */\nexport interface ConsumeRemoteComponentProps extends ConsumeServerConfig {\n /** The source URL of the remote component. Required for server rendering. */\n src: string | URL;\n /** Loading fallback content to display while the remote component is being fetched. */\n children?: React.ReactNode;\n}\n\n/**\n * Next.js App Router server component that fetches and renders a remote component.\n * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).\n *\n * @example\n * ```tsx\n * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';\n *\n * export default function MyPage() {\n * return <ConsumeRemoteComponent src=\"/nextjs-app-remote/components/header\" />;\n * }\n * ```\n */\nexport async function ConsumeRemoteComponent({\n src,\n name: nameProp,\n isolate,\n mode,\n reset,\n children,\n onRequest,\n onResponse,\n}: ConsumeRemoteComponentProps): Promise<React.ReactElement> {\n const {\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n remoteShared,\n serverUrl,\n } = await fetchRemoteComponent(src, {\n name: nameProp,\n rsc: true,\n appRouter: true,\n onRequest,\n onResponse,\n });\n\n const { name, bundle, route, runtime, type } = metadata;\n const remoteComponentClient = (\n <ConsumeRemoteComponentClient\n bundle={bundle}\n data={hydrationData}\n isolate={isolate}\n links={links}\n mode={mode}\n name={name}\n nextData={nextData}\n remoteShared={remoteShared}\n reset={reset}\n route={route}\n runtime={runtime}\n scripts={scripts}\n type={type}\n src={typeof src === 'string' ? src : src.href}\n serverUrl={serverUrl.href}\n >\n {component}\n </ConsumeRemoteComponentClient>\n );\n\n const preloadHints = (\n <ChunkPreloadHints scripts={scripts} runtime={runtime} />\n );\n\n if (Children.count(children) > 0) {\n return (\n <Suspense fallback={children}>\n {preloadHints}\n {remoteComponentClient}\n </Suspense>\n );\n }\n\n return (\n <>\n {preloadHints}\n {remoteComponentClient}\n </>\n );\n}\n\n/**\n * Emits preload hints for chunk scripts so the browser starts fetching them\n * during HTML parsing, before any client JS executes. Uses the React DOM\n * `preload()` API when available, falling back to `<link rel=\"preload\">`.\n *\n * Preload hints use the direct asset URLs — if the client rewrites URLs\n * (e.g. through a proxy via `resolveClientUrl`), the preloads won't\n * cache-match but fail silently and cause no harm.\n */\nfunction ChunkPreloadHints({\n scripts,\n runtime,\n}: {\n scripts: ScriptDescriptor[];\n runtime: string | undefined;\n}) {\n const scriptsWithSrc = scripts.filter((script) => script.src);\n // Turbopack loads chunks via fetch() rather than <script> tags\n const as = runtime === RUNTIME_TURBOPACK ? 'fetch' : 'script';\n\n if (typeof reactDomPreload === 'function') {\n for (const script of scriptsWithSrc) {\n reactDomPreload(script.src, { as, crossOrigin: 'anonymous' });\n }\n return null;\n }\n\n return (\n <>\n {scriptsWithSrc.map((script) => (\n <link\n key={script.src}\n rel=\"preload\"\n href={script.src}\n as={as}\n crossOrigin=\"anonymous\"\n />\n ))}\n </>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6DI;AA7DJ,qBAAO;AACP,mBAAmC;AACnC,uBAA2C;AAC3C,wBAA6C;AAC7C,oCAAqC;AAGrC,uBAAkC;AAyBlC,eAAsB,uBAAuB;AAAA,EAC3C;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6D;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM,oDAAqB,KAAK;AAAA,IAClC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,MAAM,QAAQ,OAAO,SAAS,KAAK,IAAI;AAC/C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MACzC,WAAW,UAAU;AAAA,MAEpB;AAAA;AAAA,EACH;AAGF,QAAM,eACJ,4CAAC,qBAAkB,SAAkB,SAAkB;AAGzD,MAAI,sBAAS,MAAM,QAAQ,IAAI,GAAG;AAChC,WACE,6CAAC,yBAAS,UAAU,UACjB;AAAA;AAAA,MACA;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,4EACG;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAWA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,QAAM,iBAAiB,QAAQ,OAAO,CAAC,WAAW,OAAO,GAAG;AAE5D,QAAM,KAAK,YAAY,qCAAoB,UAAU;AAErD,MAAI,OAAO,iBAAAA,YAAoB,YAAY;AACzC,eAAW,UAAU,gBAAgB;AACnC,2BAAAA,SAAgB,OAAO,KAAK,EAAE,IAAI,aAAa,YAAY,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AAEA,SACE,2EACG,yBAAe,IAAI,CAAC,WACnB;AAAA,IAAC;AAAA;AAAA,MAEC,KAAI;AAAA,MACJ,MAAM,OAAO;AAAA,MACb;AAAA,MACA,aAAY;AAAA;AAAA,IAJP,OAAO;AAAA,EAKd,CACD,GACH;AAEJ;","names":["reactDomPreload"]}
|
package/dist/host/nextjs/app.js
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import "remote-components/remote/defaults/wrapper";
|
|
3
3
|
import { Children, Suspense } from "react";
|
|
4
|
+
import { preload as reactDomPreload } from "react-dom";
|
|
4
5
|
import { ConsumeRemoteComponentClient } from "#internal/host/nextjs/app-client";
|
|
5
6
|
import { fetchRemoteComponent } from "#internal/host/server/fetch-remote-component";
|
|
7
|
+
import { RUNTIME_TURBOPACK } from "#internal/runtime/constants";
|
|
6
8
|
async function ConsumeRemoteComponent({
|
|
7
9
|
src,
|
|
8
10
|
name: nameProp,
|
|
@@ -51,10 +53,40 @@ async function ConsumeRemoteComponent({
|
|
|
51
53
|
children: component
|
|
52
54
|
}
|
|
53
55
|
);
|
|
56
|
+
const preloadHints = /* @__PURE__ */ jsx(ChunkPreloadHints, { scripts, runtime });
|
|
54
57
|
if (Children.count(children) > 0) {
|
|
55
|
-
return /* @__PURE__ */
|
|
58
|
+
return /* @__PURE__ */ jsxs(Suspense, { fallback: children, children: [
|
|
59
|
+
preloadHints,
|
|
60
|
+
remoteComponentClient
|
|
61
|
+
] });
|
|
56
62
|
}
|
|
57
|
-
return
|
|
63
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
64
|
+
preloadHints,
|
|
65
|
+
remoteComponentClient
|
|
66
|
+
] });
|
|
67
|
+
}
|
|
68
|
+
function ChunkPreloadHints({
|
|
69
|
+
scripts,
|
|
70
|
+
runtime
|
|
71
|
+
}) {
|
|
72
|
+
const scriptsWithSrc = scripts.filter((script) => script.src);
|
|
73
|
+
const as = runtime === RUNTIME_TURBOPACK ? "fetch" : "script";
|
|
74
|
+
if (typeof reactDomPreload === "function") {
|
|
75
|
+
for (const script of scriptsWithSrc) {
|
|
76
|
+
reactDomPreload(script.src, { as, crossOrigin: "anonymous" });
|
|
77
|
+
}
|
|
78
|
+
return null;
|
|
79
|
+
}
|
|
80
|
+
return /* @__PURE__ */ jsx(Fragment, { children: scriptsWithSrc.map((script) => /* @__PURE__ */ jsx(
|
|
81
|
+
"link",
|
|
82
|
+
{
|
|
83
|
+
rel: "preload",
|
|
84
|
+
href: script.src,
|
|
85
|
+
as,
|
|
86
|
+
crossOrigin: "anonymous"
|
|
87
|
+
},
|
|
88
|
+
script.src
|
|
89
|
+
)) });
|
|
58
90
|
}
|
|
59
91
|
export {
|
|
60
92
|
ConsumeRemoteComponent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/host/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { Children, Suspense } from 'react';\nimport { ConsumeRemoteComponentClient } from '#internal/host/nextjs/app-client';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeServerConfig } from '#internal/host/shared/config';\n\n/**\n * Props for the Next.js App Router remote component host (server component).\n */\nexport interface ConsumeRemoteComponentProps extends ConsumeServerConfig {\n /** The source URL of the remote component. Required for server rendering. */\n src: string | URL;\n /** Loading fallback content to display while the remote component is being fetched. */\n children?: React.ReactNode;\n}\n\n/**\n * Next.js App Router server component that fetches and renders a remote component.\n * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).\n *\n * @example\n * ```tsx\n * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';\n *\n * export default function MyPage() {\n * return <ConsumeRemoteComponent src=\"/nextjs-app-remote/components/header\" />;\n * }\n * ```\n */\nexport async function ConsumeRemoteComponent({\n src,\n name: nameProp,\n isolate,\n mode,\n reset,\n children,\n onRequest,\n onResponse,\n}: ConsumeRemoteComponentProps): Promise<React.ReactElement> {\n const {\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n remoteShared,\n serverUrl,\n } = await fetchRemoteComponent(src, {\n name: nameProp,\n rsc: true,\n appRouter: true,\n onRequest,\n onResponse,\n });\n\n const { name, bundle, route, runtime, type } = metadata;\n const remoteComponentClient = (\n <ConsumeRemoteComponentClient\n bundle={bundle}\n data={hydrationData}\n isolate={isolate}\n links={links}\n mode={mode}\n name={name}\n nextData={nextData}\n remoteShared={remoteShared}\n reset={reset}\n route={route}\n runtime={runtime}\n scripts={scripts}\n type={type}\n src={typeof src === 'string' ? src : src.href}\n serverUrl={serverUrl.href}\n >\n {component}\n </ConsumeRemoteComponentClient>\n );\n\n if (Children.count(children) > 0) {\n
|
|
1
|
+
{"version":3,"sources":["../../../src/host/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { Children, Suspense } from 'react';\nimport { preload as reactDomPreload } from 'react-dom';\nimport { ConsumeRemoteComponentClient } from '#internal/host/nextjs/app-client';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ScriptDescriptor } from '#internal/host/shared/asset-descriptors';\nimport type { ConsumeServerConfig } from '#internal/host/shared/config';\nimport { RUNTIME_TURBOPACK } from '#internal/runtime/constants';\n\n/**\n * Props for the Next.js App Router remote component host (server component).\n */\nexport interface ConsumeRemoteComponentProps extends ConsumeServerConfig {\n /** The source URL of the remote component. Required for server rendering. */\n src: string | URL;\n /** Loading fallback content to display while the remote component is being fetched. */\n children?: React.ReactNode;\n}\n\n/**\n * Next.js App Router server component that fetches and renders a remote component.\n * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).\n *\n * @example\n * ```tsx\n * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';\n *\n * export default function MyPage() {\n * return <ConsumeRemoteComponent src=\"/nextjs-app-remote/components/header\" />;\n * }\n * ```\n */\nexport async function ConsumeRemoteComponent({\n src,\n name: nameProp,\n isolate,\n mode,\n reset,\n children,\n onRequest,\n onResponse,\n}: ConsumeRemoteComponentProps): Promise<React.ReactElement> {\n const {\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n remoteShared,\n serverUrl,\n } = await fetchRemoteComponent(src, {\n name: nameProp,\n rsc: true,\n appRouter: true,\n onRequest,\n onResponse,\n });\n\n const { name, bundle, route, runtime, type } = metadata;\n const remoteComponentClient = (\n <ConsumeRemoteComponentClient\n bundle={bundle}\n data={hydrationData}\n isolate={isolate}\n links={links}\n mode={mode}\n name={name}\n nextData={nextData}\n remoteShared={remoteShared}\n reset={reset}\n route={route}\n runtime={runtime}\n scripts={scripts}\n type={type}\n src={typeof src === 'string' ? src : src.href}\n serverUrl={serverUrl.href}\n >\n {component}\n </ConsumeRemoteComponentClient>\n );\n\n const preloadHints = (\n <ChunkPreloadHints scripts={scripts} runtime={runtime} />\n );\n\n if (Children.count(children) > 0) {\n return (\n <Suspense fallback={children}>\n {preloadHints}\n {remoteComponentClient}\n </Suspense>\n );\n }\n\n return (\n <>\n {preloadHints}\n {remoteComponentClient}\n </>\n );\n}\n\n/**\n * Emits preload hints for chunk scripts so the browser starts fetching them\n * during HTML parsing, before any client JS executes. Uses the React DOM\n * `preload()` API when available, falling back to `<link rel=\"preload\">`.\n *\n * Preload hints use the direct asset URLs — if the client rewrites URLs\n * (e.g. through a proxy via `resolveClientUrl`), the preloads won't\n * cache-match but fail silently and cause no harm.\n */\nfunction ChunkPreloadHints({\n scripts,\n runtime,\n}: {\n scripts: ScriptDescriptor[];\n runtime: string | undefined;\n}) {\n const scriptsWithSrc = scripts.filter((script) => script.src);\n // Turbopack loads chunks via fetch() rather than <script> tags\n const as = runtime === RUNTIME_TURBOPACK ? 'fetch' : 'script';\n\n if (typeof reactDomPreload === 'function') {\n for (const script of scriptsWithSrc) {\n reactDomPreload(script.src, { as, crossOrigin: 'anonymous' });\n }\n return null;\n }\n\n return (\n <>\n {scriptsWithSrc.map((script) => (\n <link\n key={script.src}\n rel=\"preload\"\n href={script.src}\n as={as}\n crossOrigin=\"anonymous\"\n />\n ))}\n </>\n );\n}\n"],"mappings":"AA6DI,SAmCA,UAnCA,KA2BE,YA3BF;AA7DJ,OAAO;AACP,SAAS,UAAU,gBAAgB;AACnC,SAAS,WAAW,uBAAuB;AAC3C,SAAS,oCAAoC;AAC7C,SAAS,4BAA4B;AAGrC,SAAS,yBAAyB;AAyBlC,eAAsB,uBAAuB;AAAA,EAC3C;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6D;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK;AAAA,IAClC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,MAAM,QAAQ,OAAO,SAAS,KAAK,IAAI;AAC/C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MACzC,WAAW,UAAU;AAAA,MAEpB;AAAA;AAAA,EACH;AAGF,QAAM,eACJ,oBAAC,qBAAkB,SAAkB,SAAkB;AAGzD,MAAI,SAAS,MAAM,QAAQ,IAAI,GAAG;AAChC,WACE,qBAAC,YAAS,UAAU,UACjB;AAAA;AAAA,MACA;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,iCACG;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAWA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,QAAM,iBAAiB,QAAQ,OAAO,CAAC,WAAW,OAAO,GAAG;AAE5D,QAAM,KAAK,YAAY,oBAAoB,UAAU;AAErD,MAAI,OAAO,oBAAoB,YAAY;AACzC,eAAW,UAAU,gBAAgB;AACnC,sBAAgB,OAAO,KAAK,EAAE,IAAI,aAAa,YAAY,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AAEA,SACE,gCACG,yBAAe,IAAI,CAAC,WACnB;AAAA,IAAC;AAAA;AAAA,MAEC,KAAI;AAAA,MACJ,MAAM,OAAO;AAAA,MACb;AAAA,MACA,aAAY;AAAA;AAAA,IAJP,OAAO;AAAA,EAKd,CACD,GACH;AAEJ;","names":[]}
|