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.
Files changed (176) hide show
  1. package/dist/config/nextjs.cjs +86 -37
  2. package/dist/config/nextjs.cjs.map +1 -1
  3. package/dist/config/nextjs.js +86 -37
  4. package/dist/config/nextjs.js.map +1 -1
  5. package/dist/config/webpack.cjs +5 -1
  6. package/dist/config/webpack.cjs.map +1 -1
  7. package/dist/config/webpack.js +5 -1
  8. package/dist/config/webpack.js.map +1 -1
  9. package/dist/host/html.cjs +861 -617
  10. package/dist/host/html.cjs.map +1 -1
  11. package/dist/host/html.js +861 -617
  12. package/dist/host/html.js.map +1 -1
  13. package/dist/host/nextjs/app/client-only.cjs +700 -383
  14. package/dist/host/nextjs/app/client-only.cjs.map +1 -1
  15. package/dist/host/nextjs/app/client-only.js +674 -357
  16. package/dist/host/nextjs/app/client-only.js.map +1 -1
  17. package/dist/host/nextjs/app.cjs +34 -2
  18. package/dist/host/nextjs/app.cjs.map +1 -1
  19. package/dist/host/nextjs/app.js +35 -3
  20. package/dist/host/nextjs/app.js.map +1 -1
  21. package/dist/host/react.cjs +641 -352
  22. package/dist/host/react.cjs.map +1 -1
  23. package/dist/host/react.js +641 -352
  24. package/dist/host/react.js.map +1 -1
  25. package/dist/internal/config/webpack/apply-shared-modules.cjs +6 -4
  26. package/dist/internal/config/webpack/apply-shared-modules.cjs.map +1 -1
  27. package/dist/internal/config/webpack/apply-shared-modules.js +6 -4
  28. package/dist/internal/config/webpack/apply-shared-modules.js.map +1 -1
  29. package/dist/internal/config/webpack/next-client-pages-loader.cjs +6 -7
  30. package/dist/internal/config/webpack/next-client-pages-loader.cjs.map +1 -1
  31. package/dist/internal/config/webpack/next-client-pages-loader.js +6 -7
  32. package/dist/internal/config/webpack/next-client-pages-loader.js.map +1 -1
  33. package/dist/internal/host/nextjs/app-client.cjs +42 -27
  34. package/dist/internal/host/nextjs/app-client.cjs.map +1 -1
  35. package/dist/internal/host/nextjs/app-client.js +42 -27
  36. package/dist/internal/host/nextjs/app-client.js.map +1 -1
  37. package/dist/internal/host/nextjs/dom-flight.cjs +19 -39
  38. package/dist/internal/host/nextjs/dom-flight.cjs.map +1 -1
  39. package/dist/internal/host/nextjs/dom-flight.js +31 -39
  40. package/dist/internal/host/nextjs/dom-flight.js.map +1 -1
  41. package/dist/internal/host/nextjs/image-shared.cjs +39 -3
  42. package/dist/internal/host/nextjs/image-shared.cjs.map +1 -1
  43. package/dist/internal/host/nextjs/image-shared.d.ts +5 -10
  44. package/dist/internal/host/nextjs/image-shared.js +29 -3
  45. package/dist/internal/host/nextjs/image-shared.js.map +1 -1
  46. package/dist/internal/host/nextjs/remote-component-links.cjs +24 -13
  47. package/dist/internal/host/nextjs/remote-component-links.cjs.map +1 -1
  48. package/dist/internal/host/nextjs/remote-component-links.d.ts +3 -0
  49. package/dist/internal/host/nextjs/remote-component-links.js +24 -13
  50. package/dist/internal/host/nextjs/remote-component-links.js.map +1 -1
  51. package/dist/internal/host/server/fetch-remote-component.cjs +2 -1
  52. package/dist/internal/host/server/fetch-remote-component.cjs.map +1 -1
  53. package/dist/internal/host/server/fetch-remote-component.js +2 -1
  54. package/dist/internal/host/server/fetch-remote-component.js.map +1 -1
  55. package/dist/internal/host/shared/lifecycle.cjs +69 -0
  56. package/dist/internal/host/shared/lifecycle.cjs.map +1 -0
  57. package/dist/internal/host/shared/lifecycle.d.ts +34 -0
  58. package/dist/internal/host/shared/lifecycle.js +44 -0
  59. package/dist/internal/host/shared/lifecycle.js.map +1 -0
  60. package/dist/internal/host/shared/pipeline.cjs +222 -0
  61. package/dist/internal/host/shared/pipeline.cjs.map +1 -0
  62. package/dist/internal/host/shared/pipeline.d.ts +153 -0
  63. package/dist/internal/host/shared/pipeline.js +200 -0
  64. package/dist/internal/host/shared/pipeline.js.map +1 -0
  65. package/dist/internal/host/shared/polyfill.cjs +8 -7
  66. package/dist/internal/host/shared/polyfill.cjs.map +1 -1
  67. package/dist/internal/host/shared/polyfill.js +8 -7
  68. package/dist/internal/host/shared/polyfill.js.map +1 -1
  69. package/dist/internal/host/shared/shared-module-resolver.cjs +117 -0
  70. package/dist/internal/host/shared/shared-module-resolver.cjs.map +1 -0
  71. package/dist/internal/host/shared/shared-module-resolver.d.ts +64 -0
  72. package/dist/internal/host/shared/shared-module-resolver.js +78 -0
  73. package/dist/internal/host/shared/shared-module-resolver.js.map +1 -0
  74. package/dist/internal/remote/nextjs/next-internals.cjs +53 -0
  75. package/dist/internal/remote/nextjs/next-internals.cjs.map +1 -0
  76. package/dist/internal/remote/nextjs/next-internals.d.ts +42 -0
  77. package/dist/internal/remote/nextjs/next-internals.js +26 -0
  78. package/dist/internal/remote/nextjs/next-internals.js.map +1 -0
  79. package/dist/internal/runtime/html/apply-origin.cjs +11 -32
  80. package/dist/internal/runtime/html/apply-origin.cjs.map +1 -1
  81. package/dist/internal/runtime/html/apply-origin.js +11 -32
  82. package/dist/internal/runtime/html/apply-origin.js.map +1 -1
  83. package/dist/internal/runtime/html/html-spec.cjs +78 -0
  84. package/dist/internal/runtime/html/html-spec.cjs.map +1 -0
  85. package/dist/internal/runtime/html/html-spec.d.ts +23 -0
  86. package/dist/internal/runtime/html/html-spec.js +41 -0
  87. package/dist/internal/runtime/html/html-spec.js.map +1 -0
  88. package/dist/internal/runtime/html/parse-remote-html.cjs +15 -12
  89. package/dist/internal/runtime/html/parse-remote-html.cjs.map +1 -1
  90. package/dist/internal/runtime/html/parse-remote-html.js +29 -12
  91. package/dist/internal/runtime/html/parse-remote-html.js.map +1 -1
  92. package/dist/internal/runtime/html/rewrite-srcset.cjs +38 -0
  93. package/dist/internal/runtime/html/rewrite-srcset.cjs.map +1 -0
  94. package/dist/internal/runtime/html/rewrite-srcset.d.ts +12 -0
  95. package/dist/internal/runtime/html/rewrite-srcset.js +14 -0
  96. package/dist/internal/runtime/html/rewrite-srcset.js.map +1 -0
  97. package/dist/internal/runtime/loaders/component-loader.cjs +25 -44
  98. package/dist/internal/runtime/loaders/component-loader.cjs.map +1 -1
  99. package/dist/internal/runtime/loaders/component-loader.d.ts +3 -1
  100. package/dist/internal/runtime/loaders/component-loader.js +28 -44
  101. package/dist/internal/runtime/loaders/component-loader.js.map +1 -1
  102. package/dist/internal/runtime/loaders/static-loader.cjs +15 -21
  103. package/dist/internal/runtime/loaders/static-loader.cjs.map +1 -1
  104. package/dist/internal/runtime/loaders/static-loader.d.ts +3 -1
  105. package/dist/internal/runtime/loaders/static-loader.js +15 -21
  106. package/dist/internal/runtime/loaders/static-loader.js.map +1 -1
  107. package/dist/internal/runtime/namespace.cjs +82 -0
  108. package/dist/internal/runtime/namespace.cjs.map +1 -0
  109. package/dist/internal/runtime/namespace.d.ts +5 -0
  110. package/dist/internal/runtime/namespace.js +58 -0
  111. package/dist/internal/runtime/namespace.js.map +1 -0
  112. package/dist/internal/runtime/rsc-imports.cjs +86 -0
  113. package/dist/internal/runtime/rsc-imports.cjs.map +1 -0
  114. package/dist/internal/runtime/rsc-imports.d.ts +39 -0
  115. package/dist/internal/runtime/rsc-imports.js +50 -0
  116. package/dist/internal/runtime/rsc-imports.js.map +1 -0
  117. package/dist/internal/runtime/rsc-runtime.cjs +17 -0
  118. package/dist/internal/runtime/rsc-runtime.cjs.map +1 -0
  119. package/dist/internal/runtime/rsc-runtime.d.ts +37 -0
  120. package/dist/internal/runtime/rsc-runtime.js +1 -0
  121. package/dist/internal/runtime/rsc-runtime.js.map +1 -0
  122. package/dist/internal/runtime/rsc.cjs +23 -12
  123. package/dist/internal/runtime/rsc.cjs.map +1 -1
  124. package/dist/internal/runtime/rsc.d.ts +19 -2
  125. package/dist/internal/runtime/rsc.js +20 -11
  126. package/dist/internal/runtime/rsc.js.map +1 -1
  127. package/dist/internal/runtime/turbopack/chunk-loader.cjs +53 -35
  128. package/dist/internal/runtime/turbopack/chunk-loader.cjs.map +1 -1
  129. package/dist/internal/runtime/turbopack/chunk-loader.d.ts +1 -1
  130. package/dist/internal/runtime/turbopack/chunk-loader.js +53 -35
  131. package/dist/internal/runtime/turbopack/chunk-loader.js.map +1 -1
  132. package/dist/internal/runtime/turbopack/module.cjs +17 -4
  133. package/dist/internal/runtime/turbopack/module.cjs.map +1 -1
  134. package/dist/internal/runtime/turbopack/module.d.ts +23 -1
  135. package/dist/internal/runtime/turbopack/module.js +16 -4
  136. package/dist/internal/runtime/turbopack/module.js.map +1 -1
  137. package/dist/internal/runtime/turbopack/patterns.cjs +26 -10
  138. package/dist/internal/runtime/turbopack/patterns.cjs.map +1 -1
  139. package/dist/internal/runtime/turbopack/patterns.d.ts +44 -49
  140. package/dist/internal/runtime/turbopack/patterns.js +23 -7
  141. package/dist/internal/runtime/turbopack/patterns.js.map +1 -1
  142. package/dist/internal/runtime/turbopack/{webpack-runtime.cjs → remote-scope-setup.cjs} +35 -32
  143. package/dist/internal/runtime/turbopack/remote-scope-setup.cjs.map +1 -0
  144. package/dist/internal/runtime/turbopack/remote-scope-setup.d.ts +25 -0
  145. package/dist/internal/runtime/turbopack/{webpack-runtime.js → remote-scope-setup.js} +36 -19
  146. package/dist/internal/runtime/turbopack/remote-scope-setup.js.map +1 -0
  147. package/dist/internal/runtime/turbopack/remote-scope.cjs +4 -6
  148. package/dist/internal/runtime/turbopack/remote-scope.cjs.map +1 -1
  149. package/dist/internal/runtime/turbopack/remote-scope.d.ts +20 -1
  150. package/dist/internal/runtime/turbopack/remote-scope.js +4 -6
  151. package/dist/internal/runtime/turbopack/remote-scope.js.map +1 -1
  152. package/dist/internal/runtime/turbopack/shared-modules.cjs +21 -15
  153. package/dist/internal/runtime/turbopack/shared-modules.cjs.map +1 -1
  154. package/dist/internal/runtime/turbopack/shared-modules.d.ts +9 -2
  155. package/dist/internal/runtime/turbopack/shared-modules.js +24 -18
  156. package/dist/internal/runtime/turbopack/shared-modules.js.map +1 -1
  157. package/dist/internal/runtime/types.cjs.map +1 -1
  158. package/dist/internal/runtime/types.d.ts +5 -41
  159. package/dist/internal/utils/logger.cjs +1 -1
  160. package/dist/internal/utils/logger.cjs.map +1 -1
  161. package/dist/internal/utils/logger.d.ts +2 -2
  162. package/dist/internal/utils/logger.js +1 -1
  163. package/dist/internal/utils/logger.js.map +1 -1
  164. package/dist/remote/html.cjs +78 -22
  165. package/dist/remote/html.cjs.map +1 -1
  166. package/dist/remote/html.js +78 -22
  167. package/dist/remote/html.js.map +1 -1
  168. package/dist/remote/nextjs/app.cjs +14 -55
  169. package/dist/remote/nextjs/app.cjs.map +1 -1
  170. package/dist/remote/nextjs/app.js +24 -45
  171. package/dist/remote/nextjs/app.js.map +1 -1
  172. package/dist/types-59251814.d.ts +94 -0
  173. package/package.json +2 -2
  174. package/dist/internal/runtime/turbopack/webpack-runtime.cjs.map +0 -1
  175. package/dist/internal/runtime/turbopack/webpack-runtime.d.ts +0 -23
  176. package/dist/internal/runtime/turbopack/webpack-runtime.js.map +0 -1
@@ -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.jsx)(import_react.Suspense, { fallback: children, children: remoteComponentClient });
81
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Suspense, { fallback: children, children: [
82
+ preloadHints,
83
+ remoteComponentClient
84
+ ] });
79
85
  }
80
- return remoteComponentClient;
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 // if there are children, render them inside the remote component\n return <Suspense fallback={children}>{remoteComponentClient}</Suspense>;\n }\n\n return remoteComponentClient;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0DI;AA1DJ,qBAAO;AACP,mBAAmC;AACnC,wBAA6C;AAC7C,oCAAqC;AA0BrC,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,MAAI,sBAAS,MAAM,QAAQ,IAAI,GAAG;AAEhC,WAAO,4CAAC,yBAAS,UAAU,UAAW,iCAAsB;AAAA,EAC9D;AAEA,SAAO;AACT;","names":[]}
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"]}
@@ -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__ */ jsx(Suspense, { fallback: children, children: remoteComponentClient });
58
+ return /* @__PURE__ */ jsxs(Suspense, { fallback: children, children: [
59
+ preloadHints,
60
+ remoteComponentClient
61
+ ] });
56
62
  }
57
- return remoteComponentClient;
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 // if there are children, render them inside the remote component\n return <Suspense fallback={children}>{remoteComponentClient}</Suspense>;\n }\n\n return remoteComponentClient;\n}\n"],"mappings":"AA0DI;AA1DJ,OAAO;AACP,SAAS,UAAU,gBAAgB;AACnC,SAAS,oCAAoC;AAC7C,SAAS,4BAA4B;AA0BrC,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,MAAI,SAAS,MAAM,QAAQ,IAAI,GAAG;AAEhC,WAAO,oBAAC,YAAS,UAAU,UAAW,iCAAsB;AAAA,EAC9D;AAEA,SAAO;AACT;","names":[]}
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":[]}