remote-components 0.3.4 → 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/host/html.cjs +471 -413
- package/dist/host/html.cjs.map +1 -1
- package/dist/host/html.js +471 -413
- package/dist/host/html.js.map +1 -1
- package/dist/host/nextjs/app/client-only.cjs +245 -131
- package/dist/host/nextjs/app/client-only.cjs.map +1 -1
- package/dist/host/nextjs/app/client-only.js +245 -131
- 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 +245 -131
- package/dist/host/react.cjs.map +1 -1
- package/dist/host/react.js +245 -131
- package/dist/host/react.js.map +1 -1
- package/dist/internal/host/nextjs/app-client.cjs +38 -24
- package/dist/internal/host/nextjs/app-client.cjs.map +1 -1
- package/dist/internal/host/nextjs/app-client.js +38 -24
- package/dist/internal/host/nextjs/app-client.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/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/runtime/turbopack/patterns.cjs +1 -1
- package/dist/internal/runtime/turbopack/patterns.cjs.map +1 -1
- package/dist/internal/runtime/turbopack/patterns.js +1 -1
- package/dist/internal/runtime/turbopack/patterns.js.map +1 -1
- package/dist/internal/runtime/turbopack/remote-scope-setup.cjs.map +1 -1
- package/dist/internal/runtime/turbopack/remote-scope-setup.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/host/nextjs/remote-component-links.tsx"],"sourcesContent":["import { getClientSrc } from '#internal/host/server/get-client-src';\nimport { attrToProp } from '#internal/utils';\n\ninterface RemoteComponentLinksProps {\n links: Record<string, string | boolean | undefined>[];\n url: URL;\n serverUrl: string;\n bundle: string;\n isolate: boolean | undefined;\n reset: boolean | undefined;\n isDevelopment: boolean;\n}\n\n/**\n * Renders stylesheet and other link elements for remote components.\n *\n * For shadow DOM (isolate !== false):\n * - Renders links inline (they go into the shadow root)\n * - Adds preload hints to <head> for early fetching\n *\n * For non-shadow DOM (isolate === false):\n * - Uses React's `precedence` prop to hoist stylesheets to <head>\n * - This blocks rendering until CSS loads, preventing layout shift\n */\nexport function RemoteComponentLinks({\n links,\n url,\n serverUrl,\n bundle,\n isolate,\n reset,\n isDevelopment,\n}: RemoteComponentLinksProps) {\n const useShadowDom = isolate !== false;\n const showResetStyles = !isDevelopment && useShadowDom && reset;\n\n return (\n <>\n {showResetStyles ? (\n <style data-remote-components-reset=\"\">{`:host { all: initial; }`}</style>\n ) : null}\n {links.map((link) => {\n const isStylesheet = link.rel === 'stylesheet' && link.href;\n return (\n <RenderLink\n key={JSON.stringify(link)}\n link={link}\n url={url}\n serverUrl={serverUrl}\n data-wait={isStylesheet ? '' : undefined}\n // For non-shadow DOM, use precedence to hoist stylesheets to <head>\n precedence={!useShadowDom && isStylesheet ? bundle : undefined}\n />\n );\n })}\n {useShadowDom\n ? links\n .filter((link) => link.rel === 'stylesheet')\n .map((link) => (\n <RenderLink\n
|
|
1
|
+
{"version":3,"sources":["../../../../src/host/nextjs/remote-component-links.tsx"],"sourcesContent":["import { preload as reactDomPreload } from 'react-dom';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport { attrToProp } from '#internal/utils';\n\ninterface RemoteComponentLinksProps {\n links: Record<string, string | boolean | undefined>[];\n url: URL;\n serverUrl: string;\n bundle: string;\n isolate: boolean | undefined;\n reset: boolean | undefined;\n isDevelopment: boolean;\n}\n\n/**\n * Renders stylesheet and other link elements for remote components.\n *\n * For shadow DOM (isolate !== false):\n * - Renders links inline (they go into the shadow root)\n * - Adds preload hints to <head> for early fetching\n *\n * For non-shadow DOM (isolate === false):\n * - Uses React's `precedence` prop to hoist stylesheets to <head>\n * - This blocks rendering until CSS loads, preventing layout shift\n *\n * Uses the React DOM `preload()` API when available for stylesheet preloads,\n * falling back to `<link rel=\"preload\">` elements.\n */\nexport function RemoteComponentLinks({\n links,\n url,\n serverUrl,\n bundle,\n isolate,\n reset,\n isDevelopment,\n}: RemoteComponentLinksProps) {\n const useShadowDom = isolate !== false;\n const showResetStyles = !isDevelopment && useShadowDom && reset;\n\n return (\n <>\n {showResetStyles ? (\n <style data-remote-components-reset=\"\">{`:host { all: initial; }`}</style>\n ) : null}\n {links.map((link) => {\n const isStylesheet = link.rel === 'stylesheet' && link.href;\n return (\n <RenderLink\n key={JSON.stringify(link)}\n link={link}\n url={url}\n serverUrl={serverUrl}\n data-wait={isStylesheet ? '' : undefined}\n // For non-shadow DOM, use precedence to hoist stylesheets to <head>\n precedence={!useShadowDom && isStylesheet ? bundle : undefined}\n />\n );\n })}\n {useShadowDom\n ? links\n .filter((link) => link.rel === 'stylesheet')\n .map((link) => {\n const href = getClientSrc(link.href, serverUrl);\n if (typeof reactDomPreload === 'function') {\n reactDomPreload(href, {\n as: 'style',\n fetchPriority: 'high',\n });\n return null;\n }\n return (\n <RenderLink\n key={`preload-${JSON.stringify(link)}`}\n link={link}\n serverUrl={serverUrl}\n url={url}\n as=\"style\"\n fetchPriority=\"high\"\n precedence={bundle}\n rel=\"preload\"\n />\n );\n })\n : null}\n </>\n );\n}\n\nfunction RenderLink({\n link,\n url,\n serverUrl,\n ...rest\n}: {\n link: Record<string, string | boolean | undefined>;\n url: URL;\n serverUrl: string;\n} & React.LinkHTMLAttributes<HTMLLinkElement>) {\n return (\n <link\n {...Object.entries(link).reduce<Record<string, string>>(\n (acc, [key, value]) => {\n if (\n key !== 'href' &&\n key !== 'precedence' &&\n typeof value === 'string'\n ) {\n acc[attrToProp[key] ?? key] = value;\n }\n return acc;\n },\n {},\n )}\n href={getClientSrc(link.href, serverUrl)}\n {...rest}\n />\n );\n}\n"],"mappings":"AAyCI,mBAEI,KAFJ;AAzCJ,SAAS,WAAW,uBAAuB;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AA0BpB,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,eAAe,YAAY;AACjC,QAAM,kBAAkB,CAAC,iBAAiB,gBAAgB;AAE1D,SACE,iCACG;AAAA,sBACC,oBAAC,WAAM,gCAA6B,IAAI,qCAA0B,IAChE;AAAA,IACH,MAAM,IAAI,CAAC,SAAS;AACnB,YAAM,eAAe,KAAK,QAAQ,gBAAgB,KAAK;AACvD,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UACA,aAAW,eAAe,KAAK;AAAA,UAE/B,YAAY,CAAC,gBAAgB,eAAe,SAAS;AAAA;AAAA,QANhD,KAAK,UAAU,IAAI;AAAA,MAO1B;AAAA,IAEJ,CAAC;AAAA,IACA,eACG,MACG,OAAO,CAAC,SAAS,KAAK,QAAQ,YAAY,EAC1C,IAAI,CAAC,SAAS;AACb,YAAM,OAAO,aAAa,KAAK,MAAM,SAAS;AAC9C,UAAI,OAAO,oBAAoB,YAAY;AACzC,wBAAgB,MAAM;AAAA,UACpB,IAAI;AAAA,UACJ,eAAe;AAAA,QACjB,CAAC;AACD,eAAO;AAAA,MACT;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UACA,IAAG;AAAA,UACH,eAAc;AAAA,UACd,YAAY;AAAA,UACZ,KAAI;AAAA;AAAA,QAPC,WAAW,KAAK,UAAU,IAAI;AAAA,MAQrC;AAAA,IAEJ,CAAC,IACH;AAAA,KACN;AAEJ;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAI+C;AAC7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,OAAO,QAAQ,IAAI,EAAE;AAAA,QACvB,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AACrB,cACE,QAAQ,UACR,QAAQ,gBACR,OAAO,UAAU,UACjB;AACA,gBAAI,WAAW,GAAG,KAAK,GAAG,IAAI;AAAA,UAChC;AACA,iBAAO;AAAA,QACT;AAAA,QACA,CAAC;AAAA,MACH;AAAA,MACA,MAAM,aAAa,KAAK,MAAM,SAAS;AAAA,MACtC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var lifecycle_exports = {};
|
|
20
|
+
__export(lifecycle_exports, {
|
|
21
|
+
makeEventEmitter: () => makeEventEmitter,
|
|
22
|
+
makeReactEmitter: () => makeReactEmitter
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(lifecycle_exports);
|
|
25
|
+
function makeReactEmitter(callbacks) {
|
|
26
|
+
return {
|
|
27
|
+
beforeLoad(src) {
|
|
28
|
+
callbacks.onBeforeLoad?.(src);
|
|
29
|
+
},
|
|
30
|
+
load(src) {
|
|
31
|
+
callbacks.onLoad?.(src);
|
|
32
|
+
},
|
|
33
|
+
error(error, _src) {
|
|
34
|
+
callbacks.onError?.(error);
|
|
35
|
+
},
|
|
36
|
+
change(info) {
|
|
37
|
+
callbacks.onChange?.(info);
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
function makeEventEmitter(element) {
|
|
42
|
+
function dispatch(type, detail) {
|
|
43
|
+
const event = new Event(type, { bubbles: true, composed: true });
|
|
44
|
+
if (detail) {
|
|
45
|
+
Object.assign(event, detail);
|
|
46
|
+
}
|
|
47
|
+
element.dispatchEvent(event);
|
|
48
|
+
}
|
|
49
|
+
return {
|
|
50
|
+
beforeLoad(src) {
|
|
51
|
+
dispatch("beforeload", { src });
|
|
52
|
+
},
|
|
53
|
+
load(src) {
|
|
54
|
+
dispatch("load", { src });
|
|
55
|
+
},
|
|
56
|
+
error(error, src) {
|
|
57
|
+
dispatch("error", src != null ? { error, src } : { error });
|
|
58
|
+
},
|
|
59
|
+
change(info) {
|
|
60
|
+
dispatch("change", info);
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
65
|
+
0 && (module.exports = {
|
|
66
|
+
makeEventEmitter,
|
|
67
|
+
makeReactEmitter
|
|
68
|
+
});
|
|
69
|
+
//# sourceMappingURL=lifecycle.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/host/shared/lifecycle.ts"],"sourcesContent":["import type { ChangeInfo, ConsumeLifecycleCallbacks } from './config';\n\n/**\n * Unified lifecycle event emitter used by the host loading pipeline.\n *\n * Hosts create an emitter that matches their eventing model — React hosts\n * wrap callback props via {@link makeReactEmitter}, while the HTML custom\n * element dispatches DOM events via {@link makeEventEmitter}. The pipeline\n * calls emitter methods at the appropriate phases without knowing which\n * host is driving the load.\n */\nexport interface LifecycleEmitter {\n beforeLoad(src: string | URL): void;\n load(src: string | URL): void;\n error(error: unknown, src?: string | URL): void;\n change(info: ChangeInfo): void;\n}\n\n/**\n * Wraps React-style callback props into a {@link LifecycleEmitter}.\n *\n * Missing callbacks are silently ignored — this is the normal case for\n * hosts that only subscribe to a subset of events.\n */\nexport function makeReactEmitter(\n callbacks: ConsumeLifecycleCallbacks,\n): LifecycleEmitter {\n return {\n beforeLoad(src) {\n callbacks.onBeforeLoad?.(src);\n },\n load(src) {\n callbacks.onLoad?.(src);\n },\n error(error, _src?) {\n callbacks.onError?.(error);\n },\n change(info) {\n callbacks.onChange?.(info);\n },\n };\n}\n\n/**\n * Wraps a DOM element into a {@link LifecycleEmitter} by dispatching\n * `CustomEvent`s with `bubbles: true` and `composed: true` (crosses\n * Shadow DOM boundaries).\n */\nexport function makeEventEmitter(element: HTMLElement): LifecycleEmitter {\n function dispatch(\n type: 'beforeload' | 'load' | 'error' | 'change',\n detail?: Record<string, unknown>,\n ) {\n const event = new Event(type, { bubbles: true, composed: true });\n if (detail) {\n Object.assign(event, detail);\n }\n element.dispatchEvent(event);\n }\n\n return {\n beforeLoad(src) {\n dispatch('beforeload', { src });\n },\n load(src) {\n dispatch('load', { src });\n },\n error(error, src?) {\n dispatch('error', src != null ? { error, src } : { error });\n },\n change(info) {\n dispatch('change', info as unknown as Record<string, unknown>);\n },\n };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBO,SAAS,iBACd,WACkB;AAClB,SAAO;AAAA,IACL,WAAW,KAAK;AACd,gBAAU,eAAe,GAAG;AAAA,IAC9B;AAAA,IACA,KAAK,KAAK;AACR,gBAAU,SAAS,GAAG;AAAA,IACxB;AAAA,IACA,MAAM,OAAO,MAAO;AAClB,gBAAU,UAAU,KAAK;AAAA,IAC3B;AAAA,IACA,OAAO,MAAM;AACX,gBAAU,WAAW,IAAI;AAAA,IAC3B;AAAA,EACF;AACF;AAOO,SAAS,iBAAiB,SAAwC;AACvE,WAAS,SACP,MACA,QACA;AACA,UAAM,QAAQ,IAAI,MAAM,MAAM,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AAC/D,QAAI,QAAQ;AACV,aAAO,OAAO,OAAO,MAAM;AAAA,IAC7B;AACA,YAAQ,cAAc,KAAK;AAAA,EAC7B;AAEA,SAAO;AAAA,IACL,WAAW,KAAK;AACd,eAAS,cAAc,EAAE,IAAI,CAAC;AAAA,IAChC;AAAA,IACA,KAAK,KAAK;AACR,eAAS,QAAQ,EAAE,IAAI,CAAC;AAAA,IAC1B;AAAA,IACA,MAAM,OAAO,KAAM;AACjB,eAAS,SAAS,OAAO,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,CAAC;AAAA,IAC5D;AAAA,IACA,OAAO,MAAM;AACX,eAAS,UAAU,IAA0C;AAAA,IAC/D;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { ChangeInfo, ConsumeLifecycleCallbacks } from './config.js';
|
|
2
|
+
import '../../runtime/url/resolve-client-url.js';
|
|
3
|
+
import './fetch-interceptors.js';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Unified lifecycle event emitter used by the host loading pipeline.
|
|
7
|
+
*
|
|
8
|
+
* Hosts create an emitter that matches their eventing model — React hosts
|
|
9
|
+
* wrap callback props via {@link makeReactEmitter}, while the HTML custom
|
|
10
|
+
* element dispatches DOM events via {@link makeEventEmitter}. The pipeline
|
|
11
|
+
* calls emitter methods at the appropriate phases without knowing which
|
|
12
|
+
* host is driving the load.
|
|
13
|
+
*/
|
|
14
|
+
interface LifecycleEmitter {
|
|
15
|
+
beforeLoad(src: string | URL): void;
|
|
16
|
+
load(src: string | URL): void;
|
|
17
|
+
error(error: unknown, src?: string | URL): void;
|
|
18
|
+
change(info: ChangeInfo): void;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Wraps React-style callback props into a {@link LifecycleEmitter}.
|
|
22
|
+
*
|
|
23
|
+
* Missing callbacks are silently ignored — this is the normal case for
|
|
24
|
+
* hosts that only subscribe to a subset of events.
|
|
25
|
+
*/
|
|
26
|
+
declare function makeReactEmitter(callbacks: ConsumeLifecycleCallbacks): LifecycleEmitter;
|
|
27
|
+
/**
|
|
28
|
+
* Wraps a DOM element into a {@link LifecycleEmitter} by dispatching
|
|
29
|
+
* `CustomEvent`s with `bubbles: true` and `composed: true` (crosses
|
|
30
|
+
* Shadow DOM boundaries).
|
|
31
|
+
*/
|
|
32
|
+
declare function makeEventEmitter(element: HTMLElement): LifecycleEmitter;
|
|
33
|
+
|
|
34
|
+
export { LifecycleEmitter, makeEventEmitter, makeReactEmitter };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
function makeReactEmitter(callbacks) {
|
|
2
|
+
return {
|
|
3
|
+
beforeLoad(src) {
|
|
4
|
+
callbacks.onBeforeLoad?.(src);
|
|
5
|
+
},
|
|
6
|
+
load(src) {
|
|
7
|
+
callbacks.onLoad?.(src);
|
|
8
|
+
},
|
|
9
|
+
error(error, _src) {
|
|
10
|
+
callbacks.onError?.(error);
|
|
11
|
+
},
|
|
12
|
+
change(info) {
|
|
13
|
+
callbacks.onChange?.(info);
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
function makeEventEmitter(element) {
|
|
18
|
+
function dispatch(type, detail) {
|
|
19
|
+
const event = new Event(type, { bubbles: true, composed: true });
|
|
20
|
+
if (detail) {
|
|
21
|
+
Object.assign(event, detail);
|
|
22
|
+
}
|
|
23
|
+
element.dispatchEvent(event);
|
|
24
|
+
}
|
|
25
|
+
return {
|
|
26
|
+
beforeLoad(src) {
|
|
27
|
+
dispatch("beforeload", { src });
|
|
28
|
+
},
|
|
29
|
+
load(src) {
|
|
30
|
+
dispatch("load", { src });
|
|
31
|
+
},
|
|
32
|
+
error(error, src) {
|
|
33
|
+
dispatch("error", src != null ? { error, src } : { error });
|
|
34
|
+
},
|
|
35
|
+
change(info) {
|
|
36
|
+
dispatch("change", info);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
export {
|
|
41
|
+
makeEventEmitter,
|
|
42
|
+
makeReactEmitter
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=lifecycle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/host/shared/lifecycle.ts"],"sourcesContent":["import type { ChangeInfo, ConsumeLifecycleCallbacks } from './config';\n\n/**\n * Unified lifecycle event emitter used by the host loading pipeline.\n *\n * Hosts create an emitter that matches their eventing model — React hosts\n * wrap callback props via {@link makeReactEmitter}, while the HTML custom\n * element dispatches DOM events via {@link makeEventEmitter}. The pipeline\n * calls emitter methods at the appropriate phases without knowing which\n * host is driving the load.\n */\nexport interface LifecycleEmitter {\n beforeLoad(src: string | URL): void;\n load(src: string | URL): void;\n error(error: unknown, src?: string | URL): void;\n change(info: ChangeInfo): void;\n}\n\n/**\n * Wraps React-style callback props into a {@link LifecycleEmitter}.\n *\n * Missing callbacks are silently ignored — this is the normal case for\n * hosts that only subscribe to a subset of events.\n */\nexport function makeReactEmitter(\n callbacks: ConsumeLifecycleCallbacks,\n): LifecycleEmitter {\n return {\n beforeLoad(src) {\n callbacks.onBeforeLoad?.(src);\n },\n load(src) {\n callbacks.onLoad?.(src);\n },\n error(error, _src?) {\n callbacks.onError?.(error);\n },\n change(info) {\n callbacks.onChange?.(info);\n },\n };\n}\n\n/**\n * Wraps a DOM element into a {@link LifecycleEmitter} by dispatching\n * `CustomEvent`s with `bubbles: true` and `composed: true` (crosses\n * Shadow DOM boundaries).\n */\nexport function makeEventEmitter(element: HTMLElement): LifecycleEmitter {\n function dispatch(\n type: 'beforeload' | 'load' | 'error' | 'change',\n detail?: Record<string, unknown>,\n ) {\n const event = new Event(type, { bubbles: true, composed: true });\n if (detail) {\n Object.assign(event, detail);\n }\n element.dispatchEvent(event);\n }\n\n return {\n beforeLoad(src) {\n dispatch('beforeload', { src });\n },\n load(src) {\n dispatch('load', { src });\n },\n error(error, src?) {\n dispatch('error', src != null ? { error, src } : { error });\n },\n change(info) {\n dispatch('change', info as unknown as Record<string, unknown>);\n },\n };\n}\n"],"mappings":"AAwBO,SAAS,iBACd,WACkB;AAClB,SAAO;AAAA,IACL,WAAW,KAAK;AACd,gBAAU,eAAe,GAAG;AAAA,IAC9B;AAAA,IACA,KAAK,KAAK;AACR,gBAAU,SAAS,GAAG;AAAA,IACxB;AAAA,IACA,MAAM,OAAO,MAAO;AAClB,gBAAU,UAAU,KAAK;AAAA,IAC3B;AAAA,IACA,OAAO,MAAM;AACX,gBAAU,WAAW,IAAI;AAAA,IAC3B;AAAA,EACF;AACF;AAOO,SAAS,iBAAiB,SAAwC;AACvE,WAAS,SACP,MACA,QACA;AACA,UAAM,QAAQ,IAAI,MAAM,MAAM,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AAC/D,QAAI,QAAQ;AACV,aAAO,OAAO,OAAO,MAAM;AAAA,IAC7B;AACA,YAAQ,cAAc,KAAK;AAAA,EAC7B;AAEA,SAAO;AAAA,IACL,WAAW,KAAK;AACd,eAAS,cAAc,EAAE,IAAI,CAAC;AAAA,IAChC;AAAA,IACA,KAAK,KAAK;AACR,eAAS,QAAQ,EAAE,IAAI,CAAC;AAAA,IAC1B;AAAA,IACA,MAAM,OAAO,KAAM;AACjB,eAAS,SAAS,OAAO,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,CAAC;AAAA,IAC5D;AAAA,IACA,OAAO,MAAM;AACX,eAAS,UAAU,IAA0C;AAAA,IAC/D;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var pipeline_exports = {};
|
|
20
|
+
__export(pipeline_exports, {
|
|
21
|
+
loadPrepared: () => loadPrepared,
|
|
22
|
+
preparePipeline: () => preparePipeline,
|
|
23
|
+
runPipeline: () => runPipeline,
|
|
24
|
+
runPipelineFromParsed: () => runPipelineFromParsed
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(pipeline_exports);
|
|
27
|
+
var import_shared_module_resolver = require("#internal/host/shared/shared-module-resolver");
|
|
28
|
+
var import_apply_origin = require("#internal/runtime/html/apply-origin");
|
|
29
|
+
var import_parse_remote_html = require("#internal/runtime/html/parse-remote-html");
|
|
30
|
+
var import_component_loader = require("#internal/runtime/loaders/component-loader");
|
|
31
|
+
var import_static_loader = require("#internal/runtime/loaders/static-loader");
|
|
32
|
+
var import_patterns = require("#internal/runtime/patterns");
|
|
33
|
+
var import_utils = require("#internal/utils");
|
|
34
|
+
var import_error = require("#internal/utils/error");
|
|
35
|
+
function preparePipeline(input) {
|
|
36
|
+
const parser = new DOMParser();
|
|
37
|
+
const doc = parser.parseFromString(input.html, "text/html");
|
|
38
|
+
const parsed = (0, import_parse_remote_html.parseRemoteComponentDocument)(doc, input.name, input.url);
|
|
39
|
+
const remoteShared = input.remoteShared ?? parsed.remoteShared;
|
|
40
|
+
if ("__remote_components_missing_shared__" in remoteShared) {
|
|
41
|
+
throw new import_error.RemoteComponentsError(
|
|
42
|
+
remoteShared.__remote_components_missing_shared__
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
(0, import_apply_origin.applyOriginToNodes)(doc, input.url, input.resolveClientUrl);
|
|
46
|
+
const scriptDescriptors = buildScriptDescriptors(parsed.scripts, input.url);
|
|
47
|
+
return { doc, parsed, scriptDescriptors };
|
|
48
|
+
}
|
|
49
|
+
async function loadPrepared(input) {
|
|
50
|
+
const { prepared, url, signal, resolveClientUrl, container, rscName } = input;
|
|
51
|
+
const { doc, parsed, scriptDescriptors } = prepared;
|
|
52
|
+
if (signal.aborted) {
|
|
53
|
+
return { status: "aborted" };
|
|
54
|
+
}
|
|
55
|
+
const userShared = await input.shared;
|
|
56
|
+
if (signal.aborted) {
|
|
57
|
+
return { status: "aborted" };
|
|
58
|
+
}
|
|
59
|
+
if (parsed.isRemoteComponent) {
|
|
60
|
+
return loadStaticPath({
|
|
61
|
+
parsed,
|
|
62
|
+
doc,
|
|
63
|
+
url,
|
|
64
|
+
resolveClientUrl
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
return loadDynamicPath({
|
|
68
|
+
parsed,
|
|
69
|
+
doc,
|
|
70
|
+
url,
|
|
71
|
+
scriptDescriptors,
|
|
72
|
+
shared: userShared,
|
|
73
|
+
resolveClientUrl,
|
|
74
|
+
container,
|
|
75
|
+
rscName
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
async function runPipeline(input) {
|
|
79
|
+
try {
|
|
80
|
+
const userShared = await input.shared;
|
|
81
|
+
if (input.signal.aborted) {
|
|
82
|
+
return { status: "aborted" };
|
|
83
|
+
}
|
|
84
|
+
const prepared = preparePipeline({
|
|
85
|
+
html: input.html,
|
|
86
|
+
name: input.name,
|
|
87
|
+
url: input.url,
|
|
88
|
+
shared: userShared,
|
|
89
|
+
resolveClientUrl: input.resolveClientUrl
|
|
90
|
+
});
|
|
91
|
+
return await loadPrepared({
|
|
92
|
+
prepared,
|
|
93
|
+
url: input.url,
|
|
94
|
+
signal: input.signal,
|
|
95
|
+
shared: userShared,
|
|
96
|
+
resolveClientUrl: input.resolveClientUrl,
|
|
97
|
+
container: input.container
|
|
98
|
+
});
|
|
99
|
+
} catch (error) {
|
|
100
|
+
return {
|
|
101
|
+
status: "error",
|
|
102
|
+
error: error instanceof Error ? error : new import_error.RemoteComponentsError(String(error))
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
async function runPipelineFromParsed(input) {
|
|
107
|
+
try {
|
|
108
|
+
if (input.signal.aborted) {
|
|
109
|
+
return { status: "aborted" };
|
|
110
|
+
}
|
|
111
|
+
const remoteShared = input.remoteShared ?? input.payload.remoteShared ?? {};
|
|
112
|
+
if ("__remote_components_missing_shared__" in remoteShared) {
|
|
113
|
+
throw new import_error.RemoteComponentsError(
|
|
114
|
+
remoteShared.__remote_components_missing_shared__
|
|
115
|
+
);
|
|
116
|
+
}
|
|
117
|
+
const result = await (0, import_component_loader.loadRemoteComponent)({
|
|
118
|
+
url: input.url,
|
|
119
|
+
name: input.name,
|
|
120
|
+
rscName: input.rscName,
|
|
121
|
+
bundle: input.payload.bundle,
|
|
122
|
+
route: input.payload.route,
|
|
123
|
+
runtime: input.payload.runtime,
|
|
124
|
+
data: input.payload.data,
|
|
125
|
+
nextData: input.payload.nextData,
|
|
126
|
+
scripts: input.payload.scripts,
|
|
127
|
+
shared: input.shared,
|
|
128
|
+
remoteShared,
|
|
129
|
+
container: input.container,
|
|
130
|
+
resolveClientUrl: input.resolveClientUrl
|
|
131
|
+
});
|
|
132
|
+
if (input.signal.aborted) {
|
|
133
|
+
return { status: "aborted" };
|
|
134
|
+
}
|
|
135
|
+
if (result.error) {
|
|
136
|
+
return { status: "error", error: result.error };
|
|
137
|
+
}
|
|
138
|
+
return { status: "loaded", component: result.component };
|
|
139
|
+
} catch (error) {
|
|
140
|
+
return {
|
|
141
|
+
status: "error",
|
|
142
|
+
error: error instanceof Error ? error : new import_error.RemoteComponentsError(String(error))
|
|
143
|
+
};
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
function buildScriptDescriptors(scripts, url) {
|
|
147
|
+
return scripts.map((script) => {
|
|
148
|
+
const scriptSrc = script.getAttribute("data-src") || script.getAttribute("src") || script.src;
|
|
149
|
+
const { prefix, id: path } = import_patterns.REMOTE_COMPONENT_REGEX.exec(scriptSrc)?.groups ?? {
|
|
150
|
+
prefix: void 0,
|
|
151
|
+
id: scriptSrc
|
|
152
|
+
};
|
|
153
|
+
return {
|
|
154
|
+
src: new URL((0, import_patterns.collapseDoubleSlashes)(`${prefix ?? ""}${path}`), url).href
|
|
155
|
+
};
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
async function loadStaticPath(input) {
|
|
159
|
+
const { parsed, doc, url, resolveClientUrl } = input;
|
|
160
|
+
const scripts = Array.from(
|
|
161
|
+
parsed.component.querySelectorAll("script")
|
|
162
|
+
);
|
|
163
|
+
const { mount, unmount } = await (0, import_static_loader.loadStaticRemoteComponent)(
|
|
164
|
+
scripts,
|
|
165
|
+
url,
|
|
166
|
+
resolveClientUrl
|
|
167
|
+
);
|
|
168
|
+
return {
|
|
169
|
+
status: "static",
|
|
170
|
+
mount,
|
|
171
|
+
unmount,
|
|
172
|
+
metadata: parsed.metadata,
|
|
173
|
+
parsed,
|
|
174
|
+
doc
|
|
175
|
+
};
|
|
176
|
+
}
|
|
177
|
+
async function loadDynamicPath(input) {
|
|
178
|
+
const {
|
|
179
|
+
parsed,
|
|
180
|
+
doc,
|
|
181
|
+
url,
|
|
182
|
+
scriptDescriptors,
|
|
183
|
+
shared,
|
|
184
|
+
resolveClientUrl,
|
|
185
|
+
container
|
|
186
|
+
} = input;
|
|
187
|
+
const rscName = input.rscName ?? (parsed.rsc ? `__remote_component_rsc_${(0, import_utils.escapeString)(url.href)}_${(0, import_utils.escapeString)(parsed.name)}` : void 0);
|
|
188
|
+
const rscData = parsed.rsc ? (parsed.rsc.textContent || "").split("\n").filter(Boolean) : [];
|
|
189
|
+
const result = await (0, import_component_loader.loadRemoteComponent)({
|
|
190
|
+
url,
|
|
191
|
+
name: parsed.name,
|
|
192
|
+
rscName,
|
|
193
|
+
bundle: parsed.metadata.bundle,
|
|
194
|
+
route: parsed.metadata.route,
|
|
195
|
+
runtime: parsed.metadata.runtime,
|
|
196
|
+
data: rscData,
|
|
197
|
+
nextData: parsed.nextData,
|
|
198
|
+
scripts: scriptDescriptors,
|
|
199
|
+
shared: (0, import_shared_module_resolver.buildHostShared)(shared, resolveClientUrl),
|
|
200
|
+
remoteShared: parsed.remoteShared,
|
|
201
|
+
container,
|
|
202
|
+
resolveClientUrl
|
|
203
|
+
});
|
|
204
|
+
if (result.error) {
|
|
205
|
+
return { status: "error", error: result.error };
|
|
206
|
+
}
|
|
207
|
+
return {
|
|
208
|
+
status: "loaded",
|
|
209
|
+
component: result.component,
|
|
210
|
+
metadata: parsed.metadata,
|
|
211
|
+
parsed,
|
|
212
|
+
doc
|
|
213
|
+
};
|
|
214
|
+
}
|
|
215
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
216
|
+
0 && (module.exports = {
|
|
217
|
+
loadPrepared,
|
|
218
|
+
preparePipeline,
|
|
219
|
+
runPipeline,
|
|
220
|
+
runPipelineFromParsed
|
|
221
|
+
});
|
|
222
|
+
//# sourceMappingURL=pipeline.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/host/shared/pipeline.ts"],"sourcesContent":["import type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport type { ScriptDescriptor } from '#internal/host/shared/asset-descriptors';\nimport type { ConsumeLoaderPayload } from '#internal/host/shared/server-handoff';\nimport { buildHostShared } from '#internal/host/shared/shared-module-resolver';\nimport { applyOriginToNodes } from '#internal/runtime/html/apply-origin';\nimport {\n type ParsedRemoteComponent,\n parseRemoteComponentDocument,\n} from '#internal/runtime/html/parse-remote-html';\nimport { loadRemoteComponent } from '#internal/runtime/loaders/component-loader';\nimport { loadStaticRemoteComponent } from '#internal/runtime/loaders/static-loader';\nimport type { RemoteComponentMetadata } from '#internal/runtime/metadata';\nimport {\n collapseDoubleSlashes,\n REMOTE_COMPONENT_REGEX,\n} from '#internal/runtime/patterns';\nimport type { MountOrUnmountFunction } from '#internal/runtime/types';\nimport { escapeString } from '#internal/utils';\nimport { RemoteComponentsError } from '#internal/utils/error';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype SharedModuleMap = Record<string, (bundle?: string) => Promise<unknown>>;\n\n/**\n * Input for {@link runPipeline} — the full post-fetch pipeline that starts\n * from raw HTML.\n */\nexport interface PipelineInput {\n /** Resolved URL of the remote component. */\n url: URL;\n /** Raw HTML string returned by the remote. */\n html: string;\n /** Component name hint (may be refined during parsing). */\n name: string;\n /** Abort signal — the pipeline checks this between async steps. */\n signal: AbortSignal;\n /** Host-provided shared module factories (resolved or promise). */\n shared: Promise<SharedModuleMap> | SharedModuleMap;\n /** URL rewriter for client-side asset URLs. */\n resolveClientUrl?: InternalResolveClientUrl;\n /** Shadow root or element to mount into (for script-based components). */\n container?: ShadowRoot | HTMLElement | null;\n}\n\n/**\n * Input for {@link runPipelineFromParsed} — the pipeline entry point for\n * hosts that receive pre-parsed SSR data (e.g. the App Router client).\n */\nexport interface ParsedPipelineInput {\n /** Resolved URL of the remote component. */\n url: URL;\n /** Component name. */\n name: string;\n /** Abort signal. */\n signal: AbortSignal;\n /** Pre-resolved loader payload from the server component. */\n payload: ConsumeLoaderPayload;\n /** Host-provided shared module factories (resolved or promise). */\n shared: Promise<SharedModuleMap> | SharedModuleMap;\n /** Remote-requested shared modules. */\n remoteShared?: Record<string, string>;\n /** URL rewriter for client-side asset URLs. */\n resolveClientUrl?: InternalResolveClientUrl;\n /** Shadow root or element to mount into. */\n container?: ShadowRoot | HTMLElement | null;\n /** Optional RSC name override (used by App Router for scoped RSC data). */\n rscName?: string;\n}\n\n/**\n * Successful dynamic component load — the component is a React element tree\n * ready to render.\n */\nexport interface PipelineLoaded {\n status: 'loaded';\n component: React.ReactNode;\n metadata: RemoteComponentMetadata;\n parsed: ParsedRemoteComponent;\n doc: Document;\n}\n\n/**\n * Successful static component load — mount/unmount functions are returned\n * for the host to call.\n */\nexport interface PipelineStatic {\n status: 'static';\n mount: Set<MountOrUnmountFunction>;\n unmount: Set<MountOrUnmountFunction>;\n metadata: RemoteComponentMetadata;\n parsed: ParsedRemoteComponent;\n doc: Document;\n}\n\n/** The load was aborted before it could complete. */\nexport interface PipelineAborted {\n status: 'aborted';\n}\n\n/** The load failed with an error. */\nexport interface PipelineError {\n status: 'error';\n error: Error;\n}\n\nexport type PipelineResult =\n | PipelineLoaded\n | PipelineStatic\n | PipelineAborted\n | PipelineError;\n\n/**\n * Intermediate result from {@link preparePipeline}. Hosts that need to run\n * framework-specific logic between parse and load (e.g. inline script\n * execution in the React host) use this to split the pipeline into two\n * phases.\n */\nexport interface PreparedPipeline {\n doc: Document;\n parsed: ParsedRemoteComponent;\n /** Script descriptors ready to pass to `loadRemoteComponent`. */\n scriptDescriptors: ScriptDescriptor[];\n}\n\n// ---------------------------------------------------------------------------\n// Pipeline phases\n// ---------------------------------------------------------------------------\n\n/**\n * Phase 1: Parse HTML, validate shared modules, and normalize URLs.\n *\n * This is the synchronous/cheap portion of the pipeline. Hosts that need to\n * inject logic between parse and load (e.g. executing inline scripts) call\n * this directly, then call {@link loadPrepared} when ready.\n */\nexport function preparePipeline(input: {\n html: string;\n name: string;\n url: URL;\n shared: SharedModuleMap;\n remoteShared?: Record<string, string>;\n resolveClientUrl?: InternalResolveClientUrl;\n}): PreparedPipeline {\n const parser = new DOMParser();\n const doc = parser.parseFromString(input.html, 'text/html');\n\n const parsed = parseRemoteComponentDocument(doc, input.name, input.url);\n\n // Validate shared modules — surface errors early before any script loading.\n // Only check *remote* shared modules here. The host-side marker\n // (`__remote_components_missing_shared__` in `input.shared`) is a callable\n // error signal that the host may intentionally leave in place when\n // `withRemoteComponentsConfig` is not used — blocking on it would break\n // framework-agnostic hosts that don't configure shared modules.\n const remoteShared = input.remoteShared ?? parsed.remoteShared;\n if ('__remote_components_missing_shared__' in remoteShared) {\n throw new RemoteComponentsError(\n remoteShared.__remote_components_missing_shared__,\n );\n }\n\n applyOriginToNodes(doc, input.url, input.resolveClientUrl);\n\n const scriptDescriptors = buildScriptDescriptors(parsed.scripts, input.url);\n\n return { doc, parsed, scriptDescriptors };\n}\n\n/**\n * Phase 2: Load the component from a prepared pipeline result.\n *\n * For dynamic components, delegates to `loadRemoteComponent`. For static\n * components (`isRemoteComponent`), delegates to `loadStaticRemoteComponent`.\n */\nexport async function loadPrepared(input: {\n prepared: PreparedPipeline;\n url: URL;\n signal: AbortSignal;\n shared: Promise<SharedModuleMap> | SharedModuleMap;\n resolveClientUrl?: InternalResolveClientUrl;\n container?: ShadowRoot | HTMLElement | null;\n rscName?: string;\n}): Promise<PipelineResult> {\n const { prepared, url, signal, resolveClientUrl, container, rscName } = input;\n const { doc, parsed, scriptDescriptors } = prepared;\n\n if (signal.aborted) {\n return { status: 'aborted' };\n }\n\n const userShared = await input.shared;\n if (signal.aborted) {\n return { status: 'aborted' };\n }\n\n if (parsed.isRemoteComponent) {\n return loadStaticPath({\n parsed,\n doc,\n url,\n resolveClientUrl,\n });\n }\n\n return loadDynamicPath({\n parsed,\n doc,\n url,\n scriptDescriptors,\n shared: userShared,\n resolveClientUrl,\n container,\n rscName,\n });\n}\n\n// ---------------------------------------------------------------------------\n// Full pipeline entry points\n// ---------------------------------------------------------------------------\n\n/**\n * Full post-fetch pipeline: parse → validate → normalize → load.\n *\n * Use this when starting from a raw HTML string (React host, HTML host).\n */\nexport async function runPipeline(\n input: PipelineInput,\n): Promise<PipelineResult> {\n try {\n const userShared = await input.shared;\n if (input.signal.aborted) {\n return { status: 'aborted' };\n }\n\n const prepared = preparePipeline({\n html: input.html,\n name: input.name,\n url: input.url,\n shared: userShared,\n resolveClientUrl: input.resolveClientUrl,\n });\n\n return await loadPrepared({\n prepared,\n url: input.url,\n signal: input.signal,\n shared: userShared,\n resolveClientUrl: input.resolveClientUrl,\n container: input.container,\n });\n } catch (error) {\n return {\n status: 'error',\n error:\n error instanceof Error\n ? error\n : new RemoteComponentsError(String(error)),\n };\n }\n}\n\n/**\n * Pipeline entry point for pre-parsed SSR data (App Router client).\n *\n * Skips HTML parsing and goes straight to `loadRemoteComponent` with the\n * pre-resolved payload from the server component.\n */\nexport async function runPipelineFromParsed(\n input: ParsedPipelineInput,\n): Promise<\n | { status: 'loaded'; component: React.ReactNode }\n | PipelineAborted\n | PipelineError\n> {\n try {\n if (input.signal.aborted) {\n return { status: 'aborted' };\n }\n\n const remoteShared = input.remoteShared ?? input.payload.remoteShared ?? {};\n\n if ('__remote_components_missing_shared__' in remoteShared) {\n throw new RemoteComponentsError(\n remoteShared.__remote_components_missing_shared__,\n );\n }\n\n const result = await loadRemoteComponent({\n url: input.url,\n name: input.name,\n rscName: input.rscName,\n bundle: input.payload.bundle,\n route: input.payload.route,\n runtime: input.payload.runtime,\n data: input.payload.data,\n nextData: input.payload.nextData,\n scripts: input.payload.scripts,\n shared: input.shared,\n remoteShared,\n container: input.container,\n resolveClientUrl: input.resolveClientUrl,\n });\n\n if (input.signal.aborted) {\n return { status: 'aborted' };\n }\n\n if (result.error) {\n return { status: 'error', error: result.error };\n }\n return { status: 'loaded', component: result.component };\n } catch (error) {\n return {\n status: 'error',\n error:\n error instanceof Error\n ? error\n : new RemoteComponentsError(String(error)),\n };\n }\n}\n\n// ---------------------------------------------------------------------------\n// Internal helpers\n// ---------------------------------------------------------------------------\n\n/**\n * Converts parsed `<script>` elements into the `ScriptDescriptor[]` format\n * expected by `loadRemoteComponent`. Handles the `[bundle] id` URL format\n * and collapses double slashes.\n */\nfunction buildScriptDescriptors(\n scripts: HTMLScriptElement[],\n url: URL,\n): ScriptDescriptor[] {\n return scripts.map((script) => {\n const scriptSrc =\n script.getAttribute('data-src') ||\n script.getAttribute('src') ||\n script.src;\n const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(scriptSrc)\n ?.groups ?? {\n prefix: undefined,\n id: scriptSrc,\n };\n return {\n src: new URL(collapseDoubleSlashes(`${prefix ?? ''}${path}`), url).href,\n };\n });\n}\n\nasync function loadStaticPath(input: {\n parsed: ParsedRemoteComponent;\n doc: Document;\n url: URL;\n resolveClientUrl?: InternalResolveClientUrl;\n}): Promise<PipelineStatic> {\n const { parsed, doc, url, resolveClientUrl } = input;\n const scripts = Array.from(\n parsed.component.querySelectorAll<HTMLScriptElement>('script'),\n );\n const { mount, unmount } = await loadStaticRemoteComponent(\n scripts,\n url,\n resolveClientUrl,\n );\n return {\n status: 'static',\n mount,\n unmount,\n metadata: parsed.metadata,\n parsed,\n doc,\n };\n}\n\nasync function loadDynamicPath(input: {\n parsed: ParsedRemoteComponent;\n doc: Document;\n url: URL;\n scriptDescriptors: ScriptDescriptor[];\n shared: SharedModuleMap;\n resolveClientUrl?: InternalResolveClientUrl;\n container?: ShadowRoot | HTMLElement | null;\n rscName?: string;\n}): Promise<PipelineLoaded | PipelineError> {\n const {\n parsed,\n doc,\n url,\n scriptDescriptors,\n shared,\n resolveClientUrl,\n container,\n } = input;\n\n const rscName =\n input.rscName ??\n (parsed.rsc\n ? `__remote_component_rsc_${escapeString(url.href)}_${escapeString(parsed.name)}`\n : undefined);\n\n const rscData = parsed.rsc\n ? (parsed.rsc.textContent || '').split('\\n').filter(Boolean)\n : [];\n\n const result = await loadRemoteComponent({\n url,\n name: parsed.name,\n rscName,\n bundle: parsed.metadata.bundle,\n route: parsed.metadata.route,\n runtime: parsed.metadata.runtime,\n data: rscData,\n nextData: parsed.nextData,\n scripts: scriptDescriptors,\n shared: buildHostShared(shared, resolveClientUrl),\n remoteShared: parsed.remoteShared,\n container,\n resolveClientUrl,\n });\n\n if (result.error) {\n return { status: 'error', error: result.error };\n }\n return {\n status: 'loaded',\n component: result.component,\n metadata: parsed.metadata,\n parsed,\n doc,\n };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oCAAgC;AAChC,0BAAmC;AACnC,+BAGO;AACP,8BAAoC;AACpC,2BAA0C;AAE1C,sBAGO;AAEP,mBAA6B;AAC7B,mBAAsC;AAwH/B,SAAS,gBAAgB,OAOX;AACnB,QAAM,SAAS,IAAI,UAAU;AAC7B,QAAM,MAAM,OAAO,gBAAgB,MAAM,MAAM,WAAW;AAE1D,QAAM,aAAS,uDAA6B,KAAK,MAAM,MAAM,MAAM,GAAG;AAQtE,QAAM,eAAe,MAAM,gBAAgB,OAAO;AAClD,MAAI,0CAA0C,cAAc;AAC1D,UAAM,IAAI;AAAA,MACR,aAAa;AAAA,IACf;AAAA,EACF;AAEA,8CAAmB,KAAK,MAAM,KAAK,MAAM,gBAAgB;AAEzD,QAAM,oBAAoB,uBAAuB,OAAO,SAAS,MAAM,GAAG;AAE1E,SAAO,EAAE,KAAK,QAAQ,kBAAkB;AAC1C;AAQA,eAAsB,aAAa,OAQP;AAC1B,QAAM,EAAE,UAAU,KAAK,QAAQ,kBAAkB,WAAW,QAAQ,IAAI;AACxE,QAAM,EAAE,KAAK,QAAQ,kBAAkB,IAAI;AAE3C,MAAI,OAAO,SAAS;AAClB,WAAO,EAAE,QAAQ,UAAU;AAAA,EAC7B;AAEA,QAAM,aAAa,MAAM,MAAM;AAC/B,MAAI,OAAO,SAAS;AAClB,WAAO,EAAE,QAAQ,UAAU;AAAA,EAC7B;AAEA,MAAI,OAAO,mBAAmB;AAC5B,WAAO,eAAe;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,gBAAgB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAWA,eAAsB,YACpB,OACyB;AACzB,MAAI;AACF,UAAM,aAAa,MAAM,MAAM;AAC/B,QAAI,MAAM,OAAO,SAAS;AACxB,aAAO,EAAE,QAAQ,UAAU;AAAA,IAC7B;AAEA,UAAM,WAAW,gBAAgB;AAAA,MAC/B,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,KAAK,MAAM;AAAA,MACX,QAAQ;AAAA,MACR,kBAAkB,MAAM;AAAA,IAC1B,CAAC;AAED,WAAO,MAAM,aAAa;AAAA,MACxB;AAAA,MACA,KAAK,MAAM;AAAA,MACX,QAAQ,MAAM;AAAA,MACd,QAAQ;AAAA,MACR,kBAAkB,MAAM;AAAA,MACxB,WAAW,MAAM;AAAA,IACnB,CAAC;AAAA,EACH,SAAS,OAAP;AACA,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,OACE,iBAAiB,QACb,QACA,IAAI,mCAAsB,OAAO,KAAK,CAAC;AAAA,IAC/C;AAAA,EACF;AACF;AAQA,eAAsB,sBACpB,OAKA;AACA,MAAI;AACF,QAAI,MAAM,OAAO,SAAS;AACxB,aAAO,EAAE,QAAQ,UAAU;AAAA,IAC7B;AAEA,UAAM,eAAe,MAAM,gBAAgB,MAAM,QAAQ,gBAAgB,CAAC;AAE1E,QAAI,0CAA0C,cAAc;AAC1D,YAAM,IAAI;AAAA,QACR,aAAa;AAAA,MACf;AAAA,IACF;AAEA,UAAM,SAAS,UAAM,6CAAoB;AAAA,MACvC,KAAK,MAAM;AAAA,MACX,MAAM,MAAM;AAAA,MACZ,SAAS,MAAM;AAAA,MACf,QAAQ,MAAM,QAAQ;AAAA,MACtB,OAAO,MAAM,QAAQ;AAAA,MACrB,SAAS,MAAM,QAAQ;AAAA,MACvB,MAAM,MAAM,QAAQ;AAAA,MACpB,UAAU,MAAM,QAAQ;AAAA,MACxB,SAAS,MAAM,QAAQ;AAAA,MACvB,QAAQ,MAAM;AAAA,MACd;AAAA,MACA,WAAW,MAAM;AAAA,MACjB,kBAAkB,MAAM;AAAA,IAC1B,CAAC;AAED,QAAI,MAAM,OAAO,SAAS;AACxB,aAAO,EAAE,QAAQ,UAAU;AAAA,IAC7B;AAEA,QAAI,OAAO,OAAO;AAChB,aAAO,EAAE,QAAQ,SAAS,OAAO,OAAO,MAAM;AAAA,IAChD;AACA,WAAO,EAAE,QAAQ,UAAU,WAAW,OAAO,UAAU;AAAA,EACzD,SAAS,OAAP;AACA,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,OACE,iBAAiB,QACb,QACA,IAAI,mCAAsB,OAAO,KAAK,CAAC;AAAA,IAC/C;AAAA,EACF;AACF;AAWA,SAAS,uBACP,SACA,KACoB;AACpB,SAAO,QAAQ,IAAI,CAAC,WAAW;AAC7B,UAAM,YACJ,OAAO,aAAa,UAAU,KAC9B,OAAO,aAAa,KAAK,KACzB,OAAO;AACT,UAAM,EAAE,QAAQ,IAAI,KAAK,IAAI,uCAAuB,KAAK,SAAS,GAC9D,UAAU;AAAA,MACZ,QAAQ;AAAA,MACR,IAAI;AAAA,IACN;AACA,WAAO;AAAA,MACL,KAAK,IAAI,QAAI,uCAAsB,GAAG,UAAU,KAAK,MAAM,GAAG,GAAG,EAAE;AAAA,IACrE;AAAA,EACF,CAAC;AACH;AAEA,eAAe,eAAe,OAKF;AAC1B,QAAM,EAAE,QAAQ,KAAK,KAAK,iBAAiB,IAAI;AAC/C,QAAM,UAAU,MAAM;AAAA,IACpB,OAAO,UAAU,iBAAoC,QAAQ;AAAA,EAC/D;AACA,QAAM,EAAE,OAAO,QAAQ,IAAI,UAAM;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,SAAO;AAAA,IACL,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB;AAAA,IACA;AAAA,EACF;AACF;AAEA,eAAe,gBAAgB,OASa;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,UACJ,MAAM,YACL,OAAO,MACJ,8BAA0B,2BAAa,IAAI,IAAI,SAAK,2BAAa,OAAO,IAAI,MAC5E;AAEN,QAAM,UAAU,OAAO,OAClB,OAAO,IAAI,eAAe,IAAI,MAAM,IAAI,EAAE,OAAO,OAAO,IACzD,CAAC;AAEL,QAAM,SAAS,UAAM,6CAAoB;AAAA,IACvC;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,IACA,QAAQ,OAAO,SAAS;AAAA,IACxB,OAAO,OAAO,SAAS;AAAA,IACvB,SAAS,OAAO,SAAS;AAAA,IACzB,MAAM;AAAA,IACN,UAAU,OAAO;AAAA,IACjB,SAAS;AAAA,IACT,YAAQ,+CAAgB,QAAQ,gBAAgB;AAAA,IAChD,cAAc,OAAO;AAAA,IACrB;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,OAAO,OAAO;AAChB,WAAO,EAAE,QAAQ,SAAS,OAAO,OAAO,MAAM;AAAA,EAChD;AACA,SAAO;AAAA,IACL,QAAQ;AAAA,IACR,WAAW,OAAO;AAAA,IAClB,UAAU,OAAO;AAAA,IACjB;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import { RemoteComponentMetadata } from '../../runtime/metadata.js';
|
|
2
|
+
import { ScriptDescriptor } from './asset-descriptors.js';
|
|
3
|
+
import { InternalResolveClientUrl } from '../../runtime/url/resolve-client-url.js';
|
|
4
|
+
import { a as ConsumeLoaderPayload } from '../../../server-handoff-ce13bebc.js';
|
|
5
|
+
import { ParsedRemoteComponent } from '../../runtime/html/parse-remote-html.js';
|
|
6
|
+
import { M as MountOrUnmountFunction } from '../../../types-59251814.js';
|
|
7
|
+
import 'react';
|
|
8
|
+
import './config.js';
|
|
9
|
+
import './fetch-interceptors.js';
|
|
10
|
+
import '../server/types.js';
|
|
11
|
+
import '../nextjs/dom-flight.js';
|
|
12
|
+
import 'parse5/dist/tree-adapters/default';
|
|
13
|
+
import '../../runtime/turbopack/remote-scope.js';
|
|
14
|
+
import '../../runtime/constants.js';
|
|
15
|
+
|
|
16
|
+
type SharedModuleMap = Record<string, (bundle?: string) => Promise<unknown>>;
|
|
17
|
+
/**
|
|
18
|
+
* Input for {@link runPipeline} — the full post-fetch pipeline that starts
|
|
19
|
+
* from raw HTML.
|
|
20
|
+
*/
|
|
21
|
+
interface PipelineInput {
|
|
22
|
+
/** Resolved URL of the remote component. */
|
|
23
|
+
url: URL;
|
|
24
|
+
/** Raw HTML string returned by the remote. */
|
|
25
|
+
html: string;
|
|
26
|
+
/** Component name hint (may be refined during parsing). */
|
|
27
|
+
name: string;
|
|
28
|
+
/** Abort signal — the pipeline checks this between async steps. */
|
|
29
|
+
signal: AbortSignal;
|
|
30
|
+
/** Host-provided shared module factories (resolved or promise). */
|
|
31
|
+
shared: Promise<SharedModuleMap> | SharedModuleMap;
|
|
32
|
+
/** URL rewriter for client-side asset URLs. */
|
|
33
|
+
resolveClientUrl?: InternalResolveClientUrl;
|
|
34
|
+
/** Shadow root or element to mount into (for script-based components). */
|
|
35
|
+
container?: ShadowRoot | HTMLElement | null;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Input for {@link runPipelineFromParsed} — the pipeline entry point for
|
|
39
|
+
* hosts that receive pre-parsed SSR data (e.g. the App Router client).
|
|
40
|
+
*/
|
|
41
|
+
interface ParsedPipelineInput {
|
|
42
|
+
/** Resolved URL of the remote component. */
|
|
43
|
+
url: URL;
|
|
44
|
+
/** Component name. */
|
|
45
|
+
name: string;
|
|
46
|
+
/** Abort signal. */
|
|
47
|
+
signal: AbortSignal;
|
|
48
|
+
/** Pre-resolved loader payload from the server component. */
|
|
49
|
+
payload: ConsumeLoaderPayload;
|
|
50
|
+
/** Host-provided shared module factories (resolved or promise). */
|
|
51
|
+
shared: Promise<SharedModuleMap> | SharedModuleMap;
|
|
52
|
+
/** Remote-requested shared modules. */
|
|
53
|
+
remoteShared?: Record<string, string>;
|
|
54
|
+
/** URL rewriter for client-side asset URLs. */
|
|
55
|
+
resolveClientUrl?: InternalResolveClientUrl;
|
|
56
|
+
/** Shadow root or element to mount into. */
|
|
57
|
+
container?: ShadowRoot | HTMLElement | null;
|
|
58
|
+
/** Optional RSC name override (used by App Router for scoped RSC data). */
|
|
59
|
+
rscName?: string;
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Successful dynamic component load — the component is a React element tree
|
|
63
|
+
* ready to render.
|
|
64
|
+
*/
|
|
65
|
+
interface PipelineLoaded {
|
|
66
|
+
status: 'loaded';
|
|
67
|
+
component: React.ReactNode;
|
|
68
|
+
metadata: RemoteComponentMetadata;
|
|
69
|
+
parsed: ParsedRemoteComponent;
|
|
70
|
+
doc: Document;
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* Successful static component load — mount/unmount functions are returned
|
|
74
|
+
* for the host to call.
|
|
75
|
+
*/
|
|
76
|
+
interface PipelineStatic {
|
|
77
|
+
status: 'static';
|
|
78
|
+
mount: Set<MountOrUnmountFunction>;
|
|
79
|
+
unmount: Set<MountOrUnmountFunction>;
|
|
80
|
+
metadata: RemoteComponentMetadata;
|
|
81
|
+
parsed: ParsedRemoteComponent;
|
|
82
|
+
doc: Document;
|
|
83
|
+
}
|
|
84
|
+
/** The load was aborted before it could complete. */
|
|
85
|
+
interface PipelineAborted {
|
|
86
|
+
status: 'aborted';
|
|
87
|
+
}
|
|
88
|
+
/** The load failed with an error. */
|
|
89
|
+
interface PipelineError {
|
|
90
|
+
status: 'error';
|
|
91
|
+
error: Error;
|
|
92
|
+
}
|
|
93
|
+
type PipelineResult = PipelineLoaded | PipelineStatic | PipelineAborted | PipelineError;
|
|
94
|
+
/**
|
|
95
|
+
* Intermediate result from {@link preparePipeline}. Hosts that need to run
|
|
96
|
+
* framework-specific logic between parse and load (e.g. inline script
|
|
97
|
+
* execution in the React host) use this to split the pipeline into two
|
|
98
|
+
* phases.
|
|
99
|
+
*/
|
|
100
|
+
interface PreparedPipeline {
|
|
101
|
+
doc: Document;
|
|
102
|
+
parsed: ParsedRemoteComponent;
|
|
103
|
+
/** Script descriptors ready to pass to `loadRemoteComponent`. */
|
|
104
|
+
scriptDescriptors: ScriptDescriptor[];
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
107
|
+
* Phase 1: Parse HTML, validate shared modules, and normalize URLs.
|
|
108
|
+
*
|
|
109
|
+
* This is the synchronous/cheap portion of the pipeline. Hosts that need to
|
|
110
|
+
* inject logic between parse and load (e.g. executing inline scripts) call
|
|
111
|
+
* this directly, then call {@link loadPrepared} when ready.
|
|
112
|
+
*/
|
|
113
|
+
declare function preparePipeline(input: {
|
|
114
|
+
html: string;
|
|
115
|
+
name: string;
|
|
116
|
+
url: URL;
|
|
117
|
+
shared: SharedModuleMap;
|
|
118
|
+
remoteShared?: Record<string, string>;
|
|
119
|
+
resolveClientUrl?: InternalResolveClientUrl;
|
|
120
|
+
}): PreparedPipeline;
|
|
121
|
+
/**
|
|
122
|
+
* Phase 2: Load the component from a prepared pipeline result.
|
|
123
|
+
*
|
|
124
|
+
* For dynamic components, delegates to `loadRemoteComponent`. For static
|
|
125
|
+
* components (`isRemoteComponent`), delegates to `loadStaticRemoteComponent`.
|
|
126
|
+
*/
|
|
127
|
+
declare function loadPrepared(input: {
|
|
128
|
+
prepared: PreparedPipeline;
|
|
129
|
+
url: URL;
|
|
130
|
+
signal: AbortSignal;
|
|
131
|
+
shared: Promise<SharedModuleMap> | SharedModuleMap;
|
|
132
|
+
resolveClientUrl?: InternalResolveClientUrl;
|
|
133
|
+
container?: ShadowRoot | HTMLElement | null;
|
|
134
|
+
rscName?: string;
|
|
135
|
+
}): Promise<PipelineResult>;
|
|
136
|
+
/**
|
|
137
|
+
* Full post-fetch pipeline: parse → validate → normalize → load.
|
|
138
|
+
*
|
|
139
|
+
* Use this when starting from a raw HTML string (React host, HTML host).
|
|
140
|
+
*/
|
|
141
|
+
declare function runPipeline(input: PipelineInput): Promise<PipelineResult>;
|
|
142
|
+
/**
|
|
143
|
+
* Pipeline entry point for pre-parsed SSR data (App Router client).
|
|
144
|
+
*
|
|
145
|
+
* Skips HTML parsing and goes straight to `loadRemoteComponent` with the
|
|
146
|
+
* pre-resolved payload from the server component.
|
|
147
|
+
*/
|
|
148
|
+
declare function runPipelineFromParsed(input: ParsedPipelineInput): Promise<{
|
|
149
|
+
status: 'loaded';
|
|
150
|
+
component: React.ReactNode;
|
|
151
|
+
} | PipelineAborted | PipelineError>;
|
|
152
|
+
|
|
153
|
+
export { ParsedPipelineInput, PipelineAborted, PipelineError, PipelineInput, PipelineLoaded, PipelineResult, PipelineStatic, PreparedPipeline, loadPrepared, preparePipeline, runPipeline, runPipelineFromParsed };
|