remote-components 0.4.9 → 0.4.10

package/dist/host/html.cjs

@@ -7,16 +7,16 @@
 
 
 
-var _chunkEZG36EB4cjs = require('../chunk-EZG36EB4.cjs');
-require('../chunk-VB64GQX7.cjs');
-require('../chunk-J42V6HSP.cjs');
-require('../chunk-6NAV4SCF.cjs');
+var _chunkHZP4FWPGcjs = require('../chunk-HZP4FWPG.cjs');
+require('../chunk-XWRB6CEA.cjs');
+require('../chunk-RZ224NSH.cjs');
+require('../chunk-PCHSF5LH.cjs');
 require('../chunk-3AX5WLZD.cjs');
 
 
 
 
-var _chunkSELGX4Y2cjs = require('../chunk-SELGX4Y2.cjs');
+var _chunk6PZEDIAKcjs = require('../chunk-6PZEDIAK.cjs');
 
 
 var _chunkZ2SLBFQLcjs = require('../chunk-Z2SLBFQL.cjs');
@@ -125,10 +125,10 @@ async function getRuntime(type, url, bundle, shared, remoteShared, resolveClient
     };
   }
   if (type === "webpack") {
-    const { webpackRuntime } = await Promise.resolve().then(() => _interopRequireWildcard(require("../webpack-VTSF2B2G.cjs")));
+    const { webpackRuntime } = await Promise.resolve().then(() => _interopRequireWildcard(require("../webpack-65BVWX2U.cjs")));
     return webpackRuntime(bundle, shared, remoteShared, resolveClientUrl);
   } else if (type === "turbopack") {
-    const { turbopackRuntime } = await Promise.resolve().then(() => _interopRequireWildcard(require("../turbopack-6BXAJGS5.cjs")));
+    const { turbopackRuntime } = await Promise.resolve().then(() => _interopRequireWildcard(require("../turbopack-UMJ7SLJL.cjs")));
     return turbopackRuntime(
       url,
       bundle,
@@ -149,15 +149,15 @@ async function getRuntime(type, url, bundle, shared, remoteShared, resolveClient
 var _jsxruntime = require('react/jsx-runtime');
 if (typeof HTMLElement !== "undefined") {
   class RemoteComponent extends HTMLElement {constructor(...args) { super(...args); RemoteComponent.prototype.__init.call(this);RemoteComponent.prototype.__init2.call(this);RemoteComponent.prototype.__init3.call(this);RemoteComponent.prototype.__init4.call(this);RemoteComponent.prototype.__init5.call(this);RemoteComponent.prototype.__init6.call(this);RemoteComponent.prototype.__init7.call(this); }
-    __init() {this.name = _chunkSELGX4Y2cjs.DEFAULT_COMPONENT_NAME}
-    __init2() {this.bundle = _chunkSELGX4Y2cjs.DEFAULT_BUNDLE_NAME}
+    __init() {this.name = _chunk6PZEDIAKcjs.DEFAULT_COMPONENT_NAME}
+    __init2() {this.bundle = _chunk6PZEDIAKcjs.DEFAULT_BUNDLE_NAME}
     
     __init3() {this.__next = null}
     __init4() {this.fouc = null}
-    __init5() {this.hostState = _chunkEZG36EB4cjs.createHostState.call(void 0, )}
+    __init5() {this.hostState = _chunkHZP4FWPGcjs.createHostState.call(void 0, )}
     __init6() {this.root = null}
     
-    __init7() {this.emitter = _chunkEZG36EB4cjs.makeEventEmitter.call(void 0, this)}
+    __init7() {this.emitter = _chunkHZP4FWPGcjs.makeEventEmitter.call(void 0, this)}
     
     
     
@@ -279,10 +279,10 @@ if (typeof HTMLElement !== "undefined") {
       let url = null;
       let html = this.innerHTML;
       if (src) {
-        url = _chunkEZG36EB4cjs.getClientOrServerUrl.call(void 0, src, window.location.href);
-        this.name = _chunkEZG36EB4cjs.resolveNameFromSrc.call(void 0, src, this.name);
+        url = _chunkHZP4FWPGcjs.getClientOrServerUrl.call(void 0, src, window.location.href);
+        this.name = _chunkHZP4FWPGcjs.resolveNameFromSrc.call(void 0, src, this.name);
       }
-      const resolveClientUrl = url ? _chunkEZG36EB4cjs.bindResolveClientUrl.call(void 0, this.resolveClientUrl, url.href) : void 0;
+      const resolveClientUrl = url ? _chunkHZP4FWPGcjs.bindResolveClientUrl.call(void 0, this.resolveClientUrl, url.href) : void 0;
       if (!remoteComponentChild && url) {
         const fetchInit = {
           credentials: this.credentials || "same-origin"
@@ -293,7 +293,7 @@ if (typeof HTMLElement !== "undefined") {
         );
         let res;
         try {
-          res = await _chunkEZG36EB4cjs.fetchWithHooks.call(void 0, resolvedUrl, fetchInit, {
+          res = await _chunkHZP4FWPGcjs.fetchWithHooks.call(void 0, resolvedUrl, fetchInit, {
             onRequest: this.onRequest,
             onResponse: this.onResponse,
             abortController: this.hostState.abortController
@@ -320,7 +320,7 @@ if (typeof HTMLElement !== "undefined") {
         }
       }
       const effectiveUrl = _nullishCoalesce(url, () => ( new URL(window.location.href)));
-      const { doc, parsed } = _chunkEZG36EB4cjs.preparePipeline.call(void 0, {
+      const { doc, parsed } = _chunkHZP4FWPGcjs.preparePipeline.call(void 0, {
         html,
         name: this.name,
         url: effectiveUrl,
@@ -553,9 +553,9 @@ if (typeof HTMLElement !== "undefined") {
       };
       if (rsc) {
         _optionalChain([rsc, 'access', _62 => _62.parentElement, 'optionalAccess', _63 => _63.removeChild, 'call', _64 => _64(rsc)]);
-        const rscName = `__remote_component_rsc_${_chunkSELGX4Y2cjs.escapeString.call(void 0, 
+        const rscName = `__remote_component_rsc_${_chunk6PZEDIAKcjs.escapeString.call(void 0, 
           url.href
-        )}_${_chunkSELGX4Y2cjs.escapeString.call(void 0, this.name)}`;
+        )}_${_chunk6PZEDIAKcjs.escapeString.call(void 0, this.name)}`;
         const rscClone = document.createElement("script");
         rscClone.id = `${rscName}_rsc`;
         rscClone.textContent = _nullishCoalesce(_optionalChain([rsc, 'access', _65 => _65.textContent, 'optionalAccess', _66 => _66.replace, 'call', _67 => _67(
@@ -568,7 +568,7 @@ if (typeof HTMLElement !== "undefined") {
           name,
           initial
         }) => {
-          const stream = _chunkEZG36EB4cjs.createRSCStream.call(void 0, 
+          const stream = _chunkHZP4FWPGcjs.createRSCStream.call(void 0, 
             rscName,
             _nullishCoalesce(self[rscName], () => ( [`0:[null]
 `]))

package/dist/host/html.js

@@ -7,16 +7,16 @@ import {
   makeEventEmitter,
   preparePipeline,
   resolveNameFromSrc
-} from "../chunk-4XWEMPKO.js";
-import "../chunk-ZJW3GQTP.js";
-import "../chunk-X6SKTJ5N.js";
-import "../chunk-JYGC7T6L.js";
+} from "../chunk-N6AJM72A.js";
+import "../chunk-M6ACTSVB.js";
+import "../chunk-GR5FN73U.js";
+import "../chunk-VFK4HGZT.js";
 import "../chunk-LEKG4YWI.js";
 import {
   DEFAULT_BUNDLE_NAME,
   DEFAULT_COMPONENT_NAME,
   escapeString
-} from "../chunk-6NUHDFSH.js";
+} from "../chunk-3PR3SWYZ.js";
 import {
   getNamespace
 } from "../chunk-D5GNZB6O.js";
@@ -125,10 +125,10 @@ async function getRuntime(type, url, bundle, shared, remoteShared, resolveClient
     };
   }
   if (type === "webpack") {
-    const { webpackRuntime } = await import("../webpack-ZYOBNVFE.js");
+    const { webpackRuntime } = await import("../webpack-4QYGIVE6.js");
     return webpackRuntime(bundle, shared, remoteShared, resolveClientUrl);
   } else if (type === "turbopack") {
-    const { turbopackRuntime } = await import("../turbopack-WAERWSWW.js");
+    const { turbopackRuntime } = await import("../turbopack-6BSS3SYN.js");
     return turbopackRuntime(
       url,
       bundle,

package/dist/host/nextjs/app/client-only.cjs

@@ -1,19 +1,19 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunkXPMI4K3Ucjs = require('../../../chunk-XPMI4K3U.cjs');
+var _chunkOSSMJQFEcjs = require('../../../chunk-OSSMJQFE.cjs');
 
 
-var _chunkEZG36EB4cjs = require('../../../chunk-EZG36EB4.cjs');
-require('../../../chunk-VB64GQX7.cjs');
-require('../../../chunk-J42V6HSP.cjs');
-require('../../../chunk-6NAV4SCF.cjs');
+var _chunkHZP4FWPGcjs = require('../../../chunk-HZP4FWPG.cjs');
+require('../../../chunk-XWRB6CEA.cjs');
+require('../../../chunk-RZ224NSH.cjs');
+require('../../../chunk-PCHSF5LH.cjs');
 require('../../../chunk-3AX5WLZD.cjs');
 require('../../../chunk-N3SQTOSE.cjs');
 
 
 
-var _chunkSELGX4Y2cjs = require('../../../chunk-SELGX4Y2.cjs');
+var _chunk6PZEDIAKcjs = require('../../../chunk-6PZEDIAK.cjs');
 require('../../../chunk-Z2SLBFQL.cjs');
 require('../../../chunk-5KTAEO52.cjs');
 
@@ -31,8 +31,8 @@ var _react = require('react');
 function resolveForBundle(unbound, bundle) {
   if (!unbound)
     return void 0;
-  const remoteSrc = _nullishCoalesce(_optionalChain([_chunkSELGX4Y2cjs.getScope.call(void 0, bundle), 'optionalAccess', _2 => _2.url, 'access', _3 => _3.href]), () => ( ""));
-  return _chunkEZG36EB4cjs.bindResolveClientUrl.call(void 0, unbound, remoteSrc);
+  const remoteSrc = _nullishCoalesce(_optionalChain([_chunk6PZEDIAKcjs.getScope.call(void 0, bundle), 'optionalAccess', _2 => _2.url, 'access', _3 => _3.href]), () => ( ""));
+  return _chunkHZP4FWPGcjs.bindResolveClientUrl.call(void 0, unbound, remoteSrc);
 }
 function createImageLoaderSharedEntries({
   bound,
@@ -41,13 +41,13 @@ function createImageLoaderSharedEntries({
   const loaderEntry = (bundle) => {
     const resolveClientUrl = _nullishCoalesce(bound, () => ( resolveForBundle(unbound, bundle)));
     return Promise.resolve({
-      default: _chunkSELGX4Y2cjs.createRemoteImageLoader.call(void 0, bundle, resolveClientUrl),
+      default: _chunk6PZEDIAKcjs.createRemoteImageLoader.call(void 0, bundle, resolveClientUrl),
       __esModule: true
     });
   };
   const imageEntry = async (bundle) => {
     const resolveClientUrl = _nullishCoalesce(bound, () => ( resolveForBundle(unbound, bundle)));
-    const rawLoader = _chunkSELGX4Y2cjs.createRemoteImageLoader.call(void 0, bundle, resolveClientUrl);
+    const rawLoader = _chunk6PZEDIAKcjs.createRemoteImageLoader.call(void 0, bundle, resolveClientUrl);
     const remoteLoader = Object.assign(
       (p) => rawLoader({ ...p, config: { path: "/_next/image" } }),
       { __next_img_default: true }
@@ -191,7 +191,7 @@ function ConsumeRemoteComponent2(props) {
     return _nullishCoalesce(props.children, () => ( null));
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkXPMI4K3Ucjs.ConsumeRemoteComponent,
+    _chunkOSSMJQFEcjs.ConsumeRemoteComponent,
     {
       ...props,
       shared: sharedModules(props.shared, props.resolveClientUrl)

package/dist/host/nextjs/app/client-only.js

@@ -1,19 +1,19 @@
 "use client";
 import {
   ConsumeRemoteComponent
-} from "../../../chunk-T6E2WPAB.js";
+} from "../../../chunk-RHRDUJ3K.js";
 import {
   bindResolveClientUrl
-} from "../../../chunk-4XWEMPKO.js";
-import "../../../chunk-ZJW3GQTP.js";
-import "../../../chunk-X6SKTJ5N.js";
-import "../../../chunk-JYGC7T6L.js";
+} from "../../../chunk-N6AJM72A.js";
+import "../../../chunk-M6ACTSVB.js";
+import "../../../chunk-GR5FN73U.js";
+import "../../../chunk-VFK4HGZT.js";
 import "../../../chunk-LEKG4YWI.js";
 import "../../../chunk-RHGEBXPL.js";
 import {
   createRemoteImageLoader,
   getScope
-} from "../../../chunk-6NUHDFSH.js";
+} from "../../../chunk-3PR3SWYZ.js";
 import "../../../chunk-D5GNZB6O.js";
 import "../../../chunk-STIJO4AG.js";
 import {

package/dist/host/nextjs/pages/client-only.cjs

@@ -34,6 +34,9 @@ module.exports = __toCommonJS(pages_client_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_pages = require("#remote-components/host/defaults/pages");
+function isPromiseLikeShared(value) {
+  return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
+}
 function ConsumeRemoteComponent({
   src,
   children,
@@ -43,27 +46,51 @@ function ConsumeRemoteComponent({
   onLoad,
   onRequest,
   onResponse,
-  resolveClientUrl
+  resolveClientUrl,
+  shared: sharedProp
 }) {
   const elementRef = (0, import_react.useRef)(null);
+  const onErrorRef = (0, import_react.useRef)(onError);
+  onErrorRef.current = onError;
   (0, import_react.useEffect)(() => {
+    let cancelled = false;
     const self = globalThis;
-    self.__remote_component_shared__ = import_pages.shared;
-    import("remote-components/html/host");
-  }, []);
+    const syncElement = async () => {
+      try {
+        const userShared = isPromiseLikeShared(sharedProp) ? await sharedProp : sharedProp;
+        if (cancelled)
+          return;
+        self.__remote_component_shared__ = {
+          ...import_pages.shared,
+          ...userShared
+        };
+        await import("remote-components/host/html");
+        if (cancelled)
+          return;
+        const element = elementRef.current;
+        if (!element)
+          return;
+        element.onRequest = onRequest;
+        element.onResponse = onResponse;
+        element.resolveClientUrl = resolveClientUrl;
+        if (element.getAttribute("src") !== src) {
+          element.setAttribute("src", src);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          onErrorRef.current?.(error);
+        }
+      }
+    };
+    void syncElement();
+    return () => {
+      cancelled = true;
+    };
+  }, [src, onRequest, onResponse, resolveClientUrl, sharedProp]);
   (0, import_react.useEffect)(() => {
     const element = elementRef.current;
     if (!element)
       return;
-    if (onRequest) {
-      element.onRequest = onRequest;
-    }
-    if (onResponse) {
-      element.onResponse = onResponse;
-    }
-    if (resolveClientUrl !== void 0) {
-      element.resolveClientUrl = resolveClientUrl;
-    }
     const handleBeforeLoad = (e) => {
       const customEvent = e;
       onBeforeLoad?.(customEvent.src ?? src);
@@ -103,17 +130,8 @@ function ConsumeRemoteComponent({
       if (onChange)
         element.removeEventListener("change", handleChange);
     };
-  }, [
-    src,
-    onBeforeLoad,
-    onChange,
-    onError,
-    onLoad,
-    onRequest,
-    onResponse,
-    resolveClientUrl
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("remote-component", { ref: elementRef, src, children });
+  }, [src, onBeforeLoad, onChange, onError, onLoad]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("remote-component", { ref: elementRef, children });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/host/nextjs/pages/client-only.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/nextjs/pages-client.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { shared } from '#remote-components/host/defaults/pages';\n\n// patch react/jsx-runtime to support the remote-component custom element\ndeclare module 'react/jsx-runtime' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      'remote-component': {\n        src?: string;\n        ref?: React.Ref<HTMLElement>;\n        children: React.ReactNode;\n      };\n    }\n  }\n}\n\n// Extend HTMLElement to include onRequest/onResponse/resolveClientUrl properties from the custom element\ninterface RemoteComponentElement extends HTMLElement {\n  onRequest?: OnRequestHook;\n  onResponse?: OnResponseHook;\n  resolveClientUrl?: ResolveClientUrl;\n}\n\n/**\n * Props for the Pages Router client-side remote component wrapper.\n *\n * Extends {@link ConsumeRemoteComponentConfig}. The `src` prop is required since\n * the client always needs a source URL to load from.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for client-side loading. */\n  src: string;\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\nexport function ConsumeRemoteComponent({\n  src,\n  children,\n  onBeforeLoad,\n  onChange,\n  onError,\n  onLoad,\n  onRequest,\n  onResponse,\n  resolveClientUrl,\n}: ConsumeRemoteComponentProps) {\n  const elementRef = useRef<RemoteComponentElement>(null);\n\n  useEffect(() => {\n    const self = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    self.__remote_component_shared__ = shared;\n    import('remote-components/html/host');\n  }, []);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n\n    // Set onRequest/onResponse/resolveClientUrl properties on the element before it loads\n    if (onRequest) {\n      element.onRequest = onRequest;\n    }\n    if (onResponse) {\n      element.onResponse = onResponse;\n    }\n    if (resolveClientUrl !== undefined) {\n      element.resolveClientUrl = resolveClientUrl;\n    }\n\n    // Set up event listeners for lifecycle hooks\n    const handleBeforeLoad = (e: Event) => {\n      const customEvent = e as CustomEvent & { src?: string };\n      onBeforeLoad?.(customEvent.src ?? src);\n    };\n    const handleLoad = (e: Event) => {\n      const customEvent = e as CustomEvent & { src?: string };\n      onLoad?.(customEvent.src ?? src);\n    };\n    const handleError = (e: Event) => {\n      const customEvent = e as CustomEvent & { error?: unknown };\n      onError?.(customEvent.error);\n    };\n    const handleChange = (e: Event) => {\n      const customEvent = e as CustomEvent & {\n        previousSrc?: string | null;\n        nextSrc?: string | null;\n        previousName?: string;\n        nextName?: string;\n      };\n      onChange?.({\n        previousSrc: customEvent.previousSrc ?? null,\n        nextSrc: customEvent.nextSrc ?? null,\n        previousName: customEvent.previousName,\n        nextName: customEvent.nextName,\n      });\n    };\n\n    if (onBeforeLoad) element.addEventListener('beforeload', handleBeforeLoad);\n    if (onLoad) element.addEventListener('load', handleLoad);\n    if (onError) element.addEventListener('error', handleError);\n    if (onChange) element.addEventListener('change', handleChange);\n\n    return () => {\n      if (onBeforeLoad)\n        element.removeEventListener('beforeload', handleBeforeLoad);\n      if (onLoad) element.removeEventListener('load', handleLoad);\n      if (onError) element.removeEventListener('error', handleError);\n      if (onChange) element.removeEventListener('change', handleChange);\n    };\n  }, [\n    src,\n    onBeforeLoad,\n    onChange,\n    onError,\n    onLoad,\n    onRequest,\n    onResponse,\n    resolveClientUrl,\n  ]);\n\n  return (\n    <remote-component ref={elementRef} src={src}>\n      {children}\n    </remote-component>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqII;AArIJ,mBAAkC;AAOlC,mBAAuB;AAqChB,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,iBAAa,qBAA+B,IAAI;AAEtD,8BAAU,MAAM;AACd,UAAM,OAAO;AAIb,SAAK,8BAA8B;AACnC,WAAO,6BAA6B;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC;AAAS;AAGd,QAAI,WAAW;AACb,cAAQ,YAAY;AAAA,IACtB;AACA,QAAI,YAAY;AACd,cAAQ,aAAa;AAAA,IACvB;AACA,QAAI,qBAAqB,QAAW;AAClC,cAAQ,mBAAmB;AAAA,IAC7B;AAGA,UAAM,mBAAmB,CAAC,MAAa;AACrC,YAAM,cAAc;AACpB,qBAAe,YAAY,OAAO,GAAG;AAAA,IACvC;AACA,UAAM,aAAa,CAAC,MAAa;AAC/B,YAAM,cAAc;AACpB,eAAS,YAAY,OAAO,GAAG;AAAA,IACjC;AACA,UAAM,cAAc,CAAC,MAAa;AAChC,YAAM,cAAc;AACpB,gBAAU,YAAY,KAAK;AAAA,IAC7B;AACA,UAAM,eAAe,CAAC,MAAa;AACjC,YAAM,cAAc;AAMpB,iBAAW;AAAA,QACT,aAAa,YAAY,eAAe;AAAA,QACxC,SAAS,YAAY,WAAW;AAAA,QAChC,cAAc,YAAY;AAAA,QAC1B,UAAU,YAAY;AAAA,MACxB,CAAC;AAAA,IACH;AAEA,QAAI;AAAc,cAAQ,iBAAiB,cAAc,gBAAgB;AACzE,QAAI;AAAQ,cAAQ,iBAAiB,QAAQ,UAAU;AACvD,QAAI;AAAS,cAAQ,iBAAiB,SAAS,WAAW;AAC1D,QAAI;AAAU,cAAQ,iBAAiB,UAAU,YAAY;AAE7D,WAAO,MAAM;AACX,UAAI;AACF,gBAAQ,oBAAoB,cAAc,gBAAgB;AAC5D,UAAI;AAAQ,gBAAQ,oBAAoB,QAAQ,UAAU;AAC1D,UAAI;AAAS,gBAAQ,oBAAoB,SAAS,WAAW;AAC7D,UAAI;AAAU,gBAAQ,oBAAoB,UAAU,YAAY;AAAA,IAClE;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,4CAAC,sBAAiB,KAAK,YAAY,KAChC,UACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/host/nextjs/pages-client.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport type { SharedModuleFactory } from '#internal/host/shared/shared-broker';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { shared } from '#remote-components/host/defaults/pages';\n\n// patch react/jsx-runtime to support the remote-component custom element\ndeclare module 'react/jsx-runtime' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      'remote-component': {\n        src?: string;\n        ref?: React.Ref<HTMLElement>;\n        children: React.ReactNode;\n      };\n    }\n  }\n}\n\n// Extend HTMLElement to include onRequest/onResponse/resolveClientUrl properties from the custom element\ninterface RemoteComponentElement extends HTMLElement {\n  onRequest?: OnRequestHook;\n  onResponse?: OnResponseHook;\n  resolveClientUrl?: ResolveClientUrl;\n}\n\ntype SharedModules = Record<string, SharedModuleFactory>;\n\nfunction isPromiseLikeShared(\n  value: ConsumeRemoteComponentProps['shared'],\n): value is Promise<SharedModules> {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'then' in value &&\n    typeof (value as Promise<SharedModules>).then === 'function'\n  );\n}\n\n/**\n * Props for the Pages Router client-side remote component wrapper.\n *\n * Extends {@link ConsumeRemoteComponentConfig}. The `src` prop is required since\n * the client always needs a source URL to load from.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for client-side loading. */\n  src: string;\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\nexport function ConsumeRemoteComponent({\n  src,\n  children,\n  onBeforeLoad,\n  onChange,\n  onError,\n  onLoad,\n  onRequest,\n  onResponse,\n  resolveClientUrl,\n  shared: sharedProp,\n}: ConsumeRemoteComponentProps) {\n  const elementRef = useRef<RemoteComponentElement>(null);\n  const onErrorRef = useRef(onError);\n  onErrorRef.current = onError;\n\n  useEffect(() => {\n    let cancelled = false;\n    const self = globalThis as typeof globalThis & {\n      __remote_component_shared__?: SharedModules;\n    };\n\n    const syncElement = async () => {\n      try {\n        const userShared = isPromiseLikeShared(sharedProp)\n          ? await sharedProp\n          : sharedProp;\n        if (cancelled) return;\n\n        // eslint-disable-next-line camelcase\n        self.__remote_component_shared__ = {\n          ...shared,\n          ...userShared,\n        };\n        await import('remote-components/host/html');\n        if (cancelled) return;\n\n        const element = elementRef.current;\n        if (!element) return;\n\n        // Assign instance properties before setting src; the custom element\n        // starts loading as soon as the src attribute changes.\n        element.onRequest = onRequest;\n        element.onResponse = onResponse;\n        element.resolveClientUrl = resolveClientUrl;\n\n        if (element.getAttribute('src') !== src) {\n          element.setAttribute('src', src);\n        }\n      } catch (error) {\n        if (!cancelled) {\n          onErrorRef.current?.(error);\n        }\n      }\n    };\n\n    void syncElement();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [src, onRequest, onResponse, resolveClientUrl, sharedProp]);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n\n    // Set up event listeners for lifecycle hooks\n    const handleBeforeLoad = (e: Event) => {\n      const customEvent = e as CustomEvent & { src?: string };\n      onBeforeLoad?.(customEvent.src ?? src);\n    };\n    const handleLoad = (e: Event) => {\n      const customEvent = e as CustomEvent & { src?: string };\n      onLoad?.(customEvent.src ?? src);\n    };\n    const handleError = (e: Event) => {\n      const customEvent = e as CustomEvent & { error?: unknown };\n      onError?.(customEvent.error);\n    };\n    const handleChange = (e: Event) => {\n      const customEvent = e as CustomEvent & {\n        previousSrc?: string | null;\n        nextSrc?: string | null;\n        previousName?: string;\n        nextName?: string;\n      };\n      onChange?.({\n        previousSrc: customEvent.previousSrc ?? null,\n        nextSrc: customEvent.nextSrc ?? null,\n        previousName: customEvent.previousName,\n        nextName: customEvent.nextName,\n      });\n    };\n\n    if (onBeforeLoad) element.addEventListener('beforeload', handleBeforeLoad);\n    if (onLoad) element.addEventListener('load', handleLoad);\n    if (onError) element.addEventListener('error', handleError);\n    if (onChange) element.addEventListener('change', handleChange);\n\n    return () => {\n      if (onBeforeLoad)\n        element.removeEventListener('beforeload', handleBeforeLoad);\n      if (onLoad) element.removeEventListener('load', handleLoad);\n      if (onError) element.removeEventListener('error', handleError);\n      if (onChange) element.removeEventListener('change', handleChange);\n    };\n  }, [src, onBeforeLoad, onChange, onError, onLoad]);\n\n  return <remote-component ref={elementRef}>{children}</remote-component>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuKS;AAvKT,mBAAkC;AAQlC,mBAAuB;AAyBvB,SAAS,oBACP,OACiC;AACjC,SACE,OAAO,UAAU,YACjB,UAAU,QACV,UAAU,SACV,OAAQ,MAAiC,SAAS;AAEtD;AAgBO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,GAAgC;AAC9B,QAAM,iBAAa,qBAA+B,IAAI;AACtD,QAAM,iBAAa,qBAAO,OAAO;AACjC,aAAW,UAAU;AAErB,8BAAU,MAAM;AACd,QAAI,YAAY;AAChB,UAAM,OAAO;AAIb,UAAM,cAAc,YAAY;AAC9B,UAAI;AACF,cAAM,aAAa,oBAAoB,UAAU,IAC7C,MAAM,aACN;AACJ,YAAI;AAAW;AAGf,aAAK,8BAA8B;AAAA,UACjC,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AACA,cAAM,OAAO,6BAA6B;AAC1C,YAAI;AAAW;AAEf,cAAM,UAAU,WAAW;AAC3B,YAAI,CAAC;AAAS;AAId,gBAAQ,YAAY;AACpB,gBAAQ,aAAa;AACrB,gBAAQ,mBAAmB;AAE3B,YAAI,QAAQ,aAAa,KAAK,MAAM,KAAK;AACvC,kBAAQ,aAAa,OAAO,GAAG;AAAA,QACjC;AAAA,MACF,SAAS,OAAP;AACA,YAAI,CAAC,WAAW;AACd,qBAAW,UAAU,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAEA,SAAK,YAAY;AAEjB,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,KAAK,WAAW,YAAY,kBAAkB,UAAU,CAAC;AAE7D,8BAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC;AAAS;AAGd,UAAM,mBAAmB,CAAC,MAAa;AACrC,YAAM,cAAc;AACpB,qBAAe,YAAY,OAAO,GAAG;AAAA,IACvC;AACA,UAAM,aAAa,CAAC,MAAa;AAC/B,YAAM,cAAc;AACpB,eAAS,YAAY,OAAO,GAAG;AAAA,IACjC;AACA,UAAM,cAAc,CAAC,MAAa;AAChC,YAAM,cAAc;AACpB,gBAAU,YAAY,KAAK;AAAA,IAC7B;AACA,UAAM,eAAe,CAAC,MAAa;AACjC,YAAM,cAAc;AAMpB,iBAAW;AAAA,QACT,aAAa,YAAY,eAAe;AAAA,QACxC,SAAS,YAAY,WAAW;AAAA,QAChC,cAAc,YAAY;AAAA,QAC1B,UAAU,YAAY;AAAA,MACxB,CAAC;AAAA,IACH;AAEA,QAAI;AAAc,cAAQ,iBAAiB,cAAc,gBAAgB;AACzE,QAAI;AAAQ,cAAQ,iBAAiB,QAAQ,UAAU;AACvD,QAAI;AAAS,cAAQ,iBAAiB,SAAS,WAAW;AAC1D,QAAI;AAAU,cAAQ,iBAAiB,UAAU,YAAY;AAE7D,WAAO,MAAM;AACX,UAAI;AACF,gBAAQ,oBAAoB,cAAc,gBAAgB;AAC5D,UAAI;AAAQ,gBAAQ,oBAAoB,QAAQ,UAAU;AAC1D,UAAI;AAAS,gBAAQ,oBAAoB,SAAS,WAAW;AAC7D,UAAI;AAAU,gBAAQ,oBAAoB,UAAU,YAAY;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,KAAK,cAAc,UAAU,SAAS,MAAM,CAAC;AAEjD,SAAO,4CAAC,sBAAiB,KAAK,YAAa,UAAS;AACtD;","names":[]}

package/dist/host/nextjs/pages/client-only.d.ts

@@ -26,6 +26,6 @@ interface ConsumeRemoteComponentProps extends ConsumeRemoteComponentConfig {
     /** Loading fallback content displayed while the remote component is being fetched. */
     children?: React.ReactNode;
 }
-declare function ConsumeRemoteComponent({ src, children, onBeforeLoad, onChange, onError, onLoad, onRequest, onResponse, resolveClientUrl, }: ConsumeRemoteComponentProps): react_jsx_runtime.JSX.Element;
+declare function ConsumeRemoteComponent({ src, children, onBeforeLoad, onChange, onError, onLoad, onRequest, onResponse, resolveClientUrl, shared: sharedProp, }: ConsumeRemoteComponentProps): react_jsx_runtime.JSX.Element;
 
 export { ConsumeRemoteComponent, ConsumeRemoteComponentProps };

package/dist/host/nextjs/pages/client-only.js

@@ -1,6 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { shared } from "#remote-components/host/defaults/pages";
+function isPromiseLikeShared(value) {
+  return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
+}
 function ConsumeRemoteComponent({
   src,
   children,
@@ -10,27 +13,51 @@ function ConsumeRemoteComponent({
   onLoad,
   onRequest,
   onResponse,
-  resolveClientUrl
+  resolveClientUrl,
+  shared: sharedProp
 }) {
   const elementRef = useRef(null);
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
   useEffect(() => {
+    let cancelled = false;
     const self = globalThis;
-    self.__remote_component_shared__ = shared;
-    import("remote-components/html/host");
-  }, []);
+    const syncElement = async () => {
+      try {
+        const userShared = isPromiseLikeShared(sharedProp) ? await sharedProp : sharedProp;
+        if (cancelled)
+          return;
+        self.__remote_component_shared__ = {
+          ...shared,
+          ...userShared
+        };
+        await import("remote-components/host/html");
+        if (cancelled)
+          return;
+        const element = elementRef.current;
+        if (!element)
+          return;
+        element.onRequest = onRequest;
+        element.onResponse = onResponse;
+        element.resolveClientUrl = resolveClientUrl;
+        if (element.getAttribute("src") !== src) {
+          element.setAttribute("src", src);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          onErrorRef.current?.(error);
+        }
+      }
+    };
+    void syncElement();
+    return () => {
+      cancelled = true;
+    };
+  }, [src, onRequest, onResponse, resolveClientUrl, sharedProp]);
   useEffect(() => {
     const element = elementRef.current;
     if (!element)
       return;
-    if (onRequest) {
-      element.onRequest = onRequest;
-    }
-    if (onResponse) {
-      element.onResponse = onResponse;
-    }
-    if (resolveClientUrl !== void 0) {
-      element.resolveClientUrl = resolveClientUrl;
-    }
     const handleBeforeLoad = (e) => {
       const customEvent = e;
       onBeforeLoad?.(customEvent.src ?? src);
@@ -70,17 +97,8 @@ function ConsumeRemoteComponent({
       if (onChange)
         element.removeEventListener("change", handleChange);
     };
-  }, [
-    src,
-    onBeforeLoad,
-    onChange,
-    onError,
-    onLoad,
-    onRequest,
-    onResponse,
-    resolveClientUrl
-  ]);
-  return /* @__PURE__ */ jsx("remote-component", { ref: elementRef, src, children });
+  }, [src, onBeforeLoad, onChange, onError, onLoad]);
+  return /* @__PURE__ */ jsx("remote-component", { ref: elementRef, children });
 }
 export {
   ConsumeRemoteComponent

package/dist/host/nextjs/pages/client-only.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/nextjs/pages-client.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { shared } from '#remote-components/host/defaults/pages';\n\n// patch react/jsx-runtime to support the remote-component custom element\ndeclare module 'react/jsx-runtime' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      'remote-component': {\n        src?: string;\n        ref?: React.Ref<HTMLElement>;\n        children: React.ReactNode;\n      };\n    }\n  }\n}\n\n// Extend HTMLElement to include onRequest/onResponse/resolveClientUrl properties from the custom element\ninterface RemoteComponentElement extends HTMLElement {\n  onRequest?: OnRequestHook;\n  onResponse?: OnResponseHook;\n  resolveClientUrl?: ResolveClientUrl;\n}\n\n/**\n * Props for the Pages Router client-side remote component wrapper.\n *\n * Extends {@link ConsumeRemoteComponentConfig}. The `src` prop is required since\n * the client always needs a source URL to load from.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for client-side loading. */\n  src: string;\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\nexport function ConsumeRemoteComponent({\n  src,\n  children,\n  onBeforeLoad,\n  onChange,\n  onError,\n  onLoad,\n  onRequest,\n  onResponse,\n  resolveClientUrl,\n}: ConsumeRemoteComponentProps) {\n  const elementRef = useRef<RemoteComponentElement>(null);\n\n  useEffect(() => {\n    const self = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    self.__remote_component_shared__ = shared;\n    import('remote-components/html/host');\n  }, []);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n\n    // Set onRequest/onResponse/resolveClientUrl properties on the element before it loads\n    if (onRequest) {\n      element.onRequest = onRequest;\n    }\n    if (onResponse) {\n      element.onResponse = onResponse;\n    }\n    if (resolveClientUrl !== undefined) {\n      element.resolveClientUrl = resolveClientUrl;\n    }\n\n    // Set up event listeners for lifecycle hooks\n    const handleBeforeLoad = (e: Event) => {\n      const customEvent = e as CustomEvent & { src?: string };\n      onBeforeLoad?.(customEvent.src ?? src);\n    };\n    const handleLoad = (e: Event) => {\n      const customEvent = e as CustomEvent & { src?: string };\n      onLoad?.(customEvent.src ?? src);\n    };\n    const handleError = (e: Event) => {\n      const customEvent = e as CustomEvent & { error?: unknown };\n      onError?.(customEvent.error);\n    };\n    const handleChange = (e: Event) => {\n      const customEvent = e as CustomEvent & {\n        previousSrc?: string | null;\n        nextSrc?: string | null;\n        previousName?: string;\n        nextName?: string;\n      };\n      onChange?.({\n        previousSrc: customEvent.previousSrc ?? null,\n        nextSrc: customEvent.nextSrc ?? null,\n        previousName: customEvent.previousName,\n        nextName: customEvent.nextName,\n      });\n    };\n\n    if (onBeforeLoad) element.addEventListener('beforeload', handleBeforeLoad);\n    if (onLoad) element.addEventListener('load', handleLoad);\n    if (onError) element.addEventListener('error', handleError);\n    if (onChange) element.addEventListener('change', handleChange);\n\n    return () => {\n      if (onBeforeLoad)\n        element.removeEventListener('beforeload', handleBeforeLoad);\n      if (onLoad) element.removeEventListener('load', handleLoad);\n      if (onError) element.removeEventListener('error', handleError);\n      if (onChange) element.removeEventListener('change', handleChange);\n    };\n  }, [\n    src,\n    onBeforeLoad,\n    onChange,\n    onError,\n    onLoad,\n    onRequest,\n    onResponse,\n    resolveClientUrl,\n  ]);\n\n  return (\n    <remote-component ref={elementRef} src={src}>\n      {children}\n    </remote-component>\n  );\n}\n"],"mappings":"AAqII;AArIJ,SAAS,WAAW,cAAc;AAOlC,SAAS,cAAc;AAqChB,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,aAAa,OAA+B,IAAI;AAEtD,YAAU,MAAM;AACd,UAAM,OAAO;AAIb,SAAK,8BAA8B;AACnC,WAAO,6BAA6B;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC;AAAS;AAGd,QAAI,WAAW;AACb,cAAQ,YAAY;AAAA,IACtB;AACA,QAAI,YAAY;AACd,cAAQ,aAAa;AAAA,IACvB;AACA,QAAI,qBAAqB,QAAW;AAClC,cAAQ,mBAAmB;AAAA,IAC7B;AAGA,UAAM,mBAAmB,CAAC,MAAa;AACrC,YAAM,cAAc;AACpB,qBAAe,YAAY,OAAO,GAAG;AAAA,IACvC;AACA,UAAM,aAAa,CAAC,MAAa;AAC/B,YAAM,cAAc;AACpB,eAAS,YAAY,OAAO,GAAG;AAAA,IACjC;AACA,UAAM,cAAc,CAAC,MAAa;AAChC,YAAM,cAAc;AACpB,gBAAU,YAAY,KAAK;AAAA,IAC7B;AACA,UAAM,eAAe,CAAC,MAAa;AACjC,YAAM,cAAc;AAMpB,iBAAW;AAAA,QACT,aAAa,YAAY,eAAe;AAAA,QACxC,SAAS,YAAY,WAAW;AAAA,QAChC,cAAc,YAAY;AAAA,QAC1B,UAAU,YAAY;AAAA,MACxB,CAAC;AAAA,IACH;AAEA,QAAI;AAAc,cAAQ,iBAAiB,cAAc,gBAAgB;AACzE,QAAI;AAAQ,cAAQ,iBAAiB,QAAQ,UAAU;AACvD,QAAI;AAAS,cAAQ,iBAAiB,SAAS,WAAW;AAC1D,QAAI;AAAU,cAAQ,iBAAiB,UAAU,YAAY;AAE7D,WAAO,MAAM;AACX,UAAI;AACF,gBAAQ,oBAAoB,cAAc,gBAAgB;AAC5D,UAAI;AAAQ,gBAAQ,oBAAoB,QAAQ,UAAU;AAC1D,UAAI;AAAS,gBAAQ,oBAAoB,SAAS,WAAW;AAC7D,UAAI;AAAU,gBAAQ,oBAAoB,UAAU,YAAY;AAAA,IAClE;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,oBAAC,sBAAiB,KAAK,YAAY,KAChC,UACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/host/nextjs/pages-client.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport type { SharedModuleFactory } from '#internal/host/shared/shared-broker';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { shared } from '#remote-components/host/defaults/pages';\n\n// patch react/jsx-runtime to support the remote-component custom element\ndeclare module 'react/jsx-runtime' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      'remote-component': {\n        src?: string;\n        ref?: React.Ref<HTMLElement>;\n        children: React.ReactNode;\n      };\n    }\n  }\n}\n\n// Extend HTMLElement to include onRequest/onResponse/resolveClientUrl properties from the custom element\ninterface RemoteComponentElement extends HTMLElement {\n  onRequest?: OnRequestHook;\n  onResponse?: OnResponseHook;\n  resolveClientUrl?: ResolveClientUrl;\n}\n\ntype SharedModules = Record<string, SharedModuleFactory>;\n\nfunction isPromiseLikeShared(\n  value: ConsumeRemoteComponentProps['shared'],\n): value is Promise<SharedModules> {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'then' in value &&\n    typeof (value as Promise<SharedModules>).then === 'function'\n  );\n}\n\n/**\n * Props for the Pages Router client-side remote component wrapper.\n *\n * Extends {@link ConsumeRemoteComponentConfig}. The `src` prop is required since\n * the client always needs a source URL to load from.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for client-side loading. */\n  src: string;\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\nexport function ConsumeRemoteComponent({\n  src,\n  children,\n  onBeforeLoad,\n  onChange,\n  onError,\n  onLoad,\n  onRequest,\n  onResponse,\n  resolveClientUrl,\n  shared: sharedProp,\n}: ConsumeRemoteComponentProps) {\n  const elementRef = useRef<RemoteComponentElement>(null);\n  const onErrorRef = useRef(onError);\n  onErrorRef.current = onError;\n\n  useEffect(() => {\n    let cancelled = false;\n    const self = globalThis as typeof globalThis & {\n      __remote_component_shared__?: SharedModules;\n    };\n\n    const syncElement = async () => {\n      try {\n        const userShared = isPromiseLikeShared(sharedProp)\n          ? await sharedProp\n          : sharedProp;\n        if (cancelled) return;\n\n        // eslint-disable-next-line camelcase\n        self.__remote_component_shared__ = {\n          ...shared,\n          ...userShared,\n        };\n        await import('remote-components/host/html');\n        if (cancelled) return;\n\n        const element = elementRef.current;\n        if (!element) return;\n\n        // Assign instance properties before setting src; the custom element\n        // starts loading as soon as the src attribute changes.\n        element.onRequest = onRequest;\n        element.onResponse = onResponse;\n        element.resolveClientUrl = resolveClientUrl;\n\n        if (element.getAttribute('src') !== src) {\n          element.setAttribute('src', src);\n        }\n      } catch (error) {\n        if (!cancelled) {\n          onErrorRef.current?.(error);\n        }\n      }\n    };\n\n    void syncElement();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [src, onRequest, onResponse, resolveClientUrl, sharedProp]);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n\n    // Set up event listeners for lifecycle hooks\n    const handleBeforeLoad = (e: Event) => {\n      const customEvent = e as CustomEvent & { src?: string };\n      onBeforeLoad?.(customEvent.src ?? src);\n    };\n    const handleLoad = (e: Event) => {\n      const customEvent = e as CustomEvent & { src?: string };\n      onLoad?.(customEvent.src ?? src);\n    };\n    const handleError = (e: Event) => {\n      const customEvent = e as CustomEvent & { error?: unknown };\n      onError?.(customEvent.error);\n    };\n    const handleChange = (e: Event) => {\n      const customEvent = e as CustomEvent & {\n        previousSrc?: string | null;\n        nextSrc?: string | null;\n        previousName?: string;\n        nextName?: string;\n      };\n      onChange?.({\n        previousSrc: customEvent.previousSrc ?? null,\n        nextSrc: customEvent.nextSrc ?? null,\n        previousName: customEvent.previousName,\n        nextName: customEvent.nextName,\n      });\n    };\n\n    if (onBeforeLoad) element.addEventListener('beforeload', handleBeforeLoad);\n    if (onLoad) element.addEventListener('load', handleLoad);\n    if (onError) element.addEventListener('error', handleError);\n    if (onChange) element.addEventListener('change', handleChange);\n\n    return () => {\n      if (onBeforeLoad)\n        element.removeEventListener('beforeload', handleBeforeLoad);\n      if (onLoad) element.removeEventListener('load', handleLoad);\n      if (onError) element.removeEventListener('error', handleError);\n      if (onChange) element.removeEventListener('change', handleChange);\n    };\n  }, [src, onBeforeLoad, onChange, onError, onLoad]);\n\n  return <remote-component ref={elementRef}>{children}</remote-component>;\n}\n"],"mappings":"AAuKS;AAvKT,SAAS,WAAW,cAAc;AAQlC,SAAS,cAAc;AAyBvB,SAAS,oBACP,OACiC;AACjC,SACE,OAAO,UAAU,YACjB,UAAU,QACV,UAAU,SACV,OAAQ,MAAiC,SAAS;AAEtD;AAgBO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,GAAgC;AAC9B,QAAM,aAAa,OAA+B,IAAI;AACtD,QAAM,aAAa,OAAO,OAAO;AACjC,aAAW,UAAU;AAErB,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,UAAM,OAAO;AAIb,UAAM,cAAc,YAAY;AAC9B,UAAI;AACF,cAAM,aAAa,oBAAoB,UAAU,IAC7C,MAAM,aACN;AACJ,YAAI;AAAW;AAGf,aAAK,8BAA8B;AAAA,UACjC,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AACA,cAAM,OAAO,6BAA6B;AAC1C,YAAI;AAAW;AAEf,cAAM,UAAU,WAAW;AAC3B,YAAI,CAAC;AAAS;AAId,gBAAQ,YAAY;AACpB,gBAAQ,aAAa;AACrB,gBAAQ,mBAAmB;AAE3B,YAAI,QAAQ,aAAa,KAAK,MAAM,KAAK;AACvC,kBAAQ,aAAa,OAAO,GAAG;AAAA,QACjC;AAAA,MACF,SAAS,OAAP;AACA,YAAI,CAAC,WAAW;AACd,qBAAW,UAAU,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAEA,SAAK,YAAY;AAEjB,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,KAAK,WAAW,YAAY,kBAAkB,UAAU,CAAC;AAE7D,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC;AAAS;AAGd,UAAM,mBAAmB,CAAC,MAAa;AACrC,YAAM,cAAc;AACpB,qBAAe,YAAY,OAAO,GAAG;AAAA,IACvC;AACA,UAAM,aAAa,CAAC,MAAa;AAC/B,YAAM,cAAc;AACpB,eAAS,YAAY,OAAO,GAAG;AAAA,IACjC;AACA,UAAM,cAAc,CAAC,MAAa;AAChC,YAAM,cAAc;AACpB,gBAAU,YAAY,KAAK;AAAA,IAC7B;AACA,UAAM,eAAe,CAAC,MAAa;AACjC,YAAM,cAAc;AAMpB,iBAAW;AAAA,QACT,aAAa,YAAY,eAAe;AAAA,QACxC,SAAS,YAAY,WAAW;AAAA,QAChC,cAAc,YAAY;AAAA,QAC1B,UAAU,YAAY;AAAA,MACxB,CAAC;AAAA,IACH;AAEA,QAAI;AAAc,cAAQ,iBAAiB,cAAc,gBAAgB;AACzE,QAAI;AAAQ,cAAQ,iBAAiB,QAAQ,UAAU;AACvD,QAAI;AAAS,cAAQ,iBAAiB,SAAS,WAAW;AAC1D,QAAI;AAAU,cAAQ,iBAAiB,UAAU,YAAY;AAE7D,WAAO,MAAM;AACX,UAAI;AACF,gBAAQ,oBAAoB,cAAc,gBAAgB;AAC5D,UAAI;AAAQ,gBAAQ,oBAAoB,QAAQ,UAAU;AAC1D,UAAI;AAAS,gBAAQ,oBAAoB,SAAS,WAAW;AAC7D,UAAI;AAAU,gBAAQ,oBAAoB,UAAU,YAAY;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,KAAK,cAAc,UAAU,SAAS,MAAM,CAAC;AAEjD,SAAO,oBAAC,sBAAiB,KAAK,YAAa,UAAS;AACtD;","names":[]}

package/dist/host/react.cjs

@@ -1,14 +1,14 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkXPMI4K3Ucjs = require('../chunk-XPMI4K3U.cjs');
-require('../chunk-EZG36EB4.cjs');
-require('../chunk-VB64GQX7.cjs');
-require('../chunk-J42V6HSP.cjs');
-require('../chunk-6NAV4SCF.cjs');
+var _chunkOSSMJQFEcjs = require('../chunk-OSSMJQFE.cjs');
+require('../chunk-HZP4FWPG.cjs');
+require('../chunk-XWRB6CEA.cjs');
+require('../chunk-RZ224NSH.cjs');
+require('../chunk-PCHSF5LH.cjs');
 require('../chunk-3AX5WLZD.cjs');
 require('../chunk-N3SQTOSE.cjs');
-require('../chunk-SELGX4Y2.cjs');
+require('../chunk-6PZEDIAK.cjs');
 require('../chunk-Z2SLBFQL.cjs');
 require('../chunk-5KTAEO52.cjs');
 require('../chunk-BBXVML3D.cjs');
@@ -18,5 +18,5 @@ require('../chunk-SHFJ5OQA.cjs');
 
 
 
-exports.ConsumeRemoteComponent = _chunkXPMI4K3Ucjs.ConsumeRemoteComponent; exports.useRemoteNavigate = _chunkXPMI4K3Ucjs.useRemoteNavigate;
+exports.ConsumeRemoteComponent = _chunkOSSMJQFEcjs.ConsumeRemoteComponent; exports.useRemoteNavigate = _chunkOSSMJQFEcjs.useRemoteNavigate;
 //# sourceMappingURL=react.cjs.map

package/dist/host/react.js

@@ -1,14 +1,14 @@
 import {
   ConsumeRemoteComponent,
   useRemoteNavigate
-} from "../chunk-T6E2WPAB.js";
-import "../chunk-4XWEMPKO.js";
-import "../chunk-ZJW3GQTP.js";
-import "../chunk-X6SKTJ5N.js";
-import "../chunk-JYGC7T6L.js";
+} from "../chunk-RHRDUJ3K.js";
+import "../chunk-N6AJM72A.js";
+import "../chunk-M6ACTSVB.js";
+import "../chunk-GR5FN73U.js";
+import "../chunk-VFK4HGZT.js";
 import "../chunk-LEKG4YWI.js";
 import "../chunk-RHGEBXPL.js";
-import "../chunk-6NUHDFSH.js";
+import "../chunk-3PR3SWYZ.js";
 import "../chunk-D5GNZB6O.js";
 import "../chunk-STIJO4AG.js";
 import "../chunk-ULXU6XWH.js";

package/dist/internal/host/shared/shared-module-resolver.cjs

@@ -70,7 +70,7 @@ function buildHostShared(userShared, resolveClientUrl, options) {
     ...self.__remote_component_host_shared_modules__,
     ...userShared
   };
-  if (options?.includeRemoteComponentShared) {
+  if (options?.includePagesClientSharedGlobal) {
     Object.assign(result, self.__remote_component_shared__);
   }
   return result;

package/dist/internal/host/shared/shared-module-resolver.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/shared/shared-module-resolver.ts"],"sourcesContent":["import type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport { sharedPolyfills } from '#internal/host/shared/polyfill';\nimport type { SharedModuleFactory } from '#internal/host/shared/shared-broker';\n\n/**\n * The core React packages that are always shared between host and remote.\n */\nexport const CORE_REACT_SHARED_KEYS = [\n  'react',\n  'react/jsx-dev-runtime',\n  'react/jsx-runtime',\n  'react-dom',\n  'react-dom/client',\n] as const;\n\n/**\n * Maps each core React package to its shared-module manifest ID.\n * These IDs are emitted into sharedManifest for the default React entries.\n * For example, `react` maps to `/react/index.js`.\n */\nexport const CORE_REACT_SHARED_MODULE_IDS: Record<string, string> = {\n  react: '/react/index.js',\n  'react/jsx-dev-runtime': '/react/jsx-dev-runtime.js',\n  'react/jsx-runtime': '/react/jsx-runtime.js',\n  'react-dom': '/react-dom/index.js',\n  'react-dom/client': '/react-dom/client.js',\n};\n\n/**\n * The vendorShared record used by the Next.js config to map React packages\n * to their shared-module ID string literals. Derived from\n * CORE_REACT_SHARED_MODULE_IDS but excludes `react-dom/client` to match the\n * existing config behavior.\n */\nexport const VENDOR_SHARED: Record<string, string> = Object.fromEntries(\n  Object.entries(CORE_REACT_SHARED_MODULE_IDS)\n    .filter(([key]) => key !== 'react-dom/client')\n    .map(([key, path]) => [key, `'${path}'`]),\n);\n\n/**\n * Builds the `coreShared` map for the Turbopack runtime's\n * `initializeSharedModules`. Each entry is an async factory that dynamically\n * imports the corresponding React package. User-provided shared modules\n * override core entries (e.g. to supply a pinned React version).\n */\nexport function buildCoreShared(\n  userShared?: Record<string, SharedModuleFactory>,\n): Record<string, SharedModuleFactory> {\n  return {\n    react: async () => (await import('react')).default,\n    'react-dom': async () => (await import('react-dom')).default,\n    'react/jsx-dev-runtime': async () =>\n      (await import('react/jsx-dev-runtime')).default,\n    'react/jsx-runtime': async () =>\n      (await import('react/jsx-runtime')).default,\n    'react-dom/client': async () => (await import('react-dom/client')).default,\n    ...userShared,\n  };\n}\n\ninterface HostSharedGlobals {\n  __remote_component_host_shared_modules__?: Record<\n    string,\n    SharedModuleFactory\n  >;\n  __remote_component_shared__?: Record<string, SharedModuleFactory>;\n}\n\n/**\n * Builds the merged host shared modules map with a consistent merge priority:\n *   1. Polyfills (lowest priority — fallback implementations)\n *   2. Global host shared modules (`__remote_component_host_shared_modules__`)\n *   3. User-provided shared modules (highest priority — explicit overrides)\n *\n * Some callers also include `__remote_component_shared__` (the pages router\n * global). Pass `includeRemoteComponentShared: true` to include it at the end.\n */\nexport function buildHostShared(\n  userShared?: Record<string, SharedModuleFactory>,\n  resolveClientUrl?: InternalResolveClientUrl,\n  options?: { includeRemoteComponentShared?: boolean },\n): Record<string, SharedModuleFactory> {\n  const self = globalThis as typeof globalThis & HostSharedGlobals;\n  const result: Record<string, SharedModuleFactory> = {\n    ...sharedPolyfills(userShared, resolveClientUrl),\n    ...self.__remote_component_host_shared_modules__,\n    ...userShared,\n  };\n  if (options?.includeRemoteComponentShared) {\n    Object.assign(result, self.__remote_component_shared__);\n  }\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,sBAAgC;AAMzB,MAAM,yBAAyB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAOO,MAAM,+BAAuD;AAAA,EAClE,OAAO;AAAA,EACP,yBAAyB;AAAA,EACzB,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,oBAAoB;AACtB;AAQO,MAAM,gBAAwC,OAAO;AAAA,EAC1D,OAAO,QAAQ,4BAA4B,EACxC,OAAO,CAAC,CAAC,GAAG,MAAM,QAAQ,kBAAkB,EAC5C,IAAI,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,IAAI,OAAO,CAAC;AAC5C;AAQO,SAAS,gBACd,YACqC;AACrC,SAAO;AAAA,IACL,OAAO,aAAa,MAAM,OAAO,OAAO,GAAG;AAAA,IAC3C,aAAa,aAAa,MAAM,OAAO,WAAW,GAAG;AAAA,IACrD,yBAAyB,aACtB,MAAM,OAAO,uBAAuB,GAAG;AAAA,IAC1C,qBAAqB,aAClB,MAAM,OAAO,mBAAmB,GAAG;AAAA,IACtC,oBAAoB,aAAa,MAAM,OAAO,kBAAkB,GAAG;AAAA,IACnE,GAAG;AAAA,EACL;AACF;AAmBO,SAAS,gBACd,YACA,kBACA,SACqC;AACrC,QAAM,OAAO;AACb,QAAM,SAA8C;AAAA,IAClD,OAAG,iCAAgB,YAAY,gBAAgB;AAAA,IAC/C,GAAG,KAAK;AAAA,IACR,GAAG;AAAA,EACL;AACA,MAAI,SAAS,8BAA8B;AACzC,WAAO,OAAO,QAAQ,KAAK,2BAA2B;AAAA,EACxD;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../src/host/shared/shared-module-resolver.ts"],"sourcesContent":["import type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport { sharedPolyfills } from '#internal/host/shared/polyfill';\nimport type { SharedModuleFactory } from '#internal/host/shared/shared-broker';\n\n/**\n * The core React packages that are always shared between host and remote.\n */\nexport const CORE_REACT_SHARED_KEYS = [\n  'react',\n  'react/jsx-dev-runtime',\n  'react/jsx-runtime',\n  'react-dom',\n  'react-dom/client',\n] as const;\n\n/**\n * Maps each core React package to its shared-module manifest ID.\n * These IDs are emitted into sharedManifest for the default React entries.\n * For example, `react` maps to `/react/index.js`.\n */\nexport const CORE_REACT_SHARED_MODULE_IDS: Record<string, string> = {\n  react: '/react/index.js',\n  'react/jsx-dev-runtime': '/react/jsx-dev-runtime.js',\n  'react/jsx-runtime': '/react/jsx-runtime.js',\n  'react-dom': '/react-dom/index.js',\n  'react-dom/client': '/react-dom/client.js',\n};\n\n/**\n * The vendorShared record used by the Next.js config to map React packages\n * to their shared-module ID string literals. Derived from\n * CORE_REACT_SHARED_MODULE_IDS but excludes `react-dom/client` to match the\n * existing config behavior.\n */\nexport const VENDOR_SHARED: Record<string, string> = Object.fromEntries(\n  Object.entries(CORE_REACT_SHARED_MODULE_IDS)\n    .filter(([key]) => key !== 'react-dom/client')\n    .map(([key, path]) => [key, `'${path}'`]),\n);\n\n/**\n * Builds the `coreShared` map for the Turbopack runtime's\n * `initializeSharedModules`. Each entry is an async factory that dynamically\n * imports the corresponding React package. User-provided shared modules\n * override core entries (e.g. to supply a pinned React version).\n */\nexport function buildCoreShared(\n  userShared?: Record<string, SharedModuleFactory>,\n): Record<string, SharedModuleFactory> {\n  return {\n    react: async () => (await import('react')).default,\n    'react-dom': async () => (await import('react-dom')).default,\n    'react/jsx-dev-runtime': async () =>\n      (await import('react/jsx-dev-runtime')).default,\n    'react/jsx-runtime': async () =>\n      (await import('react/jsx-runtime')).default,\n    'react-dom/client': async () => (await import('react-dom/client')).default,\n    ...userShared,\n  };\n}\n\ninterface HostSharedGlobals {\n  __remote_component_host_shared_modules__?: Record<\n    string,\n    SharedModuleFactory\n  >;\n  __remote_component_shared__?: Record<string, SharedModuleFactory>;\n}\n\n/**\n * Builds the merged host shared modules map with a consistent merge priority:\n *   1. Polyfills (lowest priority — fallback implementations)\n *   2. Global host shared modules (`__remote_component_host_shared_modules__`)\n *   3. User-provided shared modules (highest priority — explicit overrides)\n *\n * Some callers also include `__remote_component_shared__`, the Pages\n * client-only shared global. Pass `includePagesClientSharedGlobal: true` to\n * include it at the end.\n */\nexport function buildHostShared(\n  userShared?: Record<string, SharedModuleFactory>,\n  resolveClientUrl?: InternalResolveClientUrl,\n  options?: { includePagesClientSharedGlobal?: boolean },\n): Record<string, SharedModuleFactory> {\n  const self = globalThis as typeof globalThis & HostSharedGlobals;\n  const result: Record<string, SharedModuleFactory> = {\n    ...sharedPolyfills(userShared, resolveClientUrl),\n    ...self.__remote_component_host_shared_modules__,\n    ...userShared,\n  };\n  if (options?.includePagesClientSharedGlobal) {\n    Object.assign(result, self.__remote_component_shared__);\n  }\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,sBAAgC;AAMzB,MAAM,yBAAyB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAOO,MAAM,+BAAuD;AAAA,EAClE,OAAO;AAAA,EACP,yBAAyB;AAAA,EACzB,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,oBAAoB;AACtB;AAQO,MAAM,gBAAwC,OAAO;AAAA,EAC1D,OAAO,QAAQ,4BAA4B,EACxC,OAAO,CAAC,CAAC,GAAG,MAAM,QAAQ,kBAAkB,EAC5C,IAAI,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,IAAI,OAAO,CAAC;AAC5C;AAQO,SAAS,gBACd,YACqC;AACrC,SAAO;AAAA,IACL,OAAO,aAAa,MAAM,OAAO,OAAO,GAAG;AAAA,IAC3C,aAAa,aAAa,MAAM,OAAO,WAAW,GAAG;AAAA,IACrD,yBAAyB,aACtB,MAAM,OAAO,uBAAuB,GAAG;AAAA,IAC1C,qBAAqB,aAClB,MAAM,OAAO,mBAAmB,GAAG;AAAA,IACtC,oBAAoB,aAAa,MAAM,OAAO,kBAAkB,GAAG;AAAA,IACnE,GAAG;AAAA,EACL;AACF;AAoBO,SAAS,gBACd,YACA,kBACA,SACqC;AACrC,QAAM,OAAO;AACb,QAAM,SAA8C;AAAA,IAClD,OAAG,iCAAgB,YAAY,gBAAgB;AAAA,IAC/C,GAAG,KAAK;AAAA,IACR,GAAG;AAAA,EACL;AACA,MAAI,SAAS,gCAAgC;AAC3C,WAAO,OAAO,QAAQ,KAAK,2BAA2B;AAAA,EACxD;AACA,SAAO;AACT;","names":[]}

package/dist/internal/host/shared/shared-module-resolver.d.ts

@@ -32,11 +32,12 @@ declare function buildCoreShared(userShared?: Record<string, SharedModuleFactory
  *   2. Global host shared modules (`__remote_component_host_shared_modules__`)
  *   3. User-provided shared modules (highest priority — explicit overrides)
  *
- * Some callers also include `__remote_component_shared__` (the pages router
- * global). Pass `includeRemoteComponentShared: true` to include it at the end.
+ * Some callers also include `__remote_component_shared__`, the Pages
+ * client-only shared global. Pass `includePagesClientSharedGlobal: true` to
+ * include it at the end.
  */
 declare function buildHostShared(userShared?: Record<string, SharedModuleFactory>, resolveClientUrl?: InternalResolveClientUrl, options?: {
-    includeRemoteComponentShared?: boolean;
+    includePagesClientSharedGlobal?: boolean;
 }): Record<string, SharedModuleFactory>;
 
 export { CORE_REACT_SHARED_KEYS, CORE_REACT_SHARED_MODULE_IDS, VENDOR_SHARED, buildCoreShared, buildHostShared };

package/dist/internal/host/shared/shared-module-resolver.js

@@ -33,7 +33,7 @@ function buildHostShared(userShared, resolveClientUrl, options) {
     ...self.__remote_component_host_shared_modules__,
     ...userShared
   };
-  if (options?.includeRemoteComponentShared) {
+  if (options?.includePagesClientSharedGlobal) {
     Object.assign(result, self.__remote_component_shared__);
   }
   return result;