remote-components 0.0.16 → 0.0.17

package/dist/html/host.cjs

@@ -152,27 +152,102 @@ var init_next_client_pages_loader = __esm({
   }
 });
 
+// src/shared/client/polyfill.tsx
+function sharedPolyfills(shared) {
+  const self = globalThis;
+  const polyfill = {
+    "next/dist/client/components/navigation": self.__remote_component_host_shared_modules__?.["next/navigation"] ?? shared?.["next/navigation"] ?? (() => Promise.resolve({
+      useRouter() {
+        return {
+          push: (routerUrl) => {
+            history.pushState({}, "", routerUrl);
+          },
+          replace: (routerUrl) => {
+            history.replaceState({}, "", routerUrl);
+          },
+          back: () => {
+            history.back();
+          }
+        };
+      },
+      useSearchParams() {
+        return new URLSearchParams(location.search);
+      },
+      __esModule: true
+    })),
+    "next/dist/client/app-dir/link": self.__remote_component_host_shared_modules__?.["next/link"] ?? shared?.["next/link"] ?? (() => Promise.resolve({
+      default: ({
+        children,
+        ...props
+      }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { ...props, href: props.href, suppressHydrationWarning: true, children: children ?? null }),
+      __esModule: true
+    })),
+    "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared?.["next/form"] ?? (() => Promise.resolve({
+      default: () => {
+        throw new Error("Next.js <Form> component not implemented");
+      },
+      __esModule: true
+    })),
+    "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? (() => Promise.resolve({
+      Image: (props) => (
+        // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            ...props,
+            src: props.src,
+            suppressHydrationWarning: true
+          }
+        )
+      ),
+      __esModule: true
+    })),
+    "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared?.["next/script"] ?? (() => Promise.resolve({
+      // TODO: implement <Script> component for non-Next.js host applications
+      // do not throw an error for now
+      default: () => null,
+      __esModule: true
+    }))
+  };
+  polyfill["next/link"] = polyfill["next/dist/client/app-dir/link"];
+  polyfill["next/form"] = polyfill["next/dist/client/app-dir/form"];
+  polyfill["next/image"] = polyfill["next/dist/client/image-component"];
+  polyfill["next/dist/api/image"] = polyfill["next/dist/client/image-component"];
+  polyfill["next/script"] = polyfill["next/dist/client/script"];
+  return polyfill;
+}
+var import_jsx_runtime;
+var init_polyfill = __esm({
+  "src/shared/client/polyfill.tsx"() {
+    "use strict";
+    import_jsx_runtime = require("react/jsx-runtime");
+  }
+});
+
 // src/html/host/runtime/webpack.ts
 var webpack_exports = {};
 __export(webpack_exports, {
   webpackRuntime: () => webpackRuntime
 });
-async function webpackRuntime(shared, remoteShared) {
+async function webpackRuntime(bundle, shared, remoteShared) {
   const self = globalThis;
-  self.__DISABLE_WEBPACK_EXEC__ = true;
+  if (!self.__DISABLE_WEBPACK_EXEC__) {
+    self.__DISABLE_WEBPACK_EXEC__ = {};
+  }
+  self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
   if (typeof self.__webpack_require__ !== "function" && self.__webpack_require_type__ !== "turbopack") {
     self.__webpack_require__ = (remoteId) => {
       const re = /\[(?<bundle>[^\]]+)\] (?<id>.*)/;
       const match = re.exec(remoteId);
-      const bundle = match?.groups?.bundle;
+      const remoteBundle = match?.groups?.bundle;
       const id = match?.groups?.id;
-      if (!(id && bundle)) {
+      if (!(id && remoteBundle)) {
         throw new Error(`Module not found: "${remoteId}"`);
       }
-      if (typeof self.__remote_webpack_require__?.[bundle] !== "function") {
-        throw new Error(`Remote component loading error "${bundle}"`);
+      if (typeof self.__remote_webpack_require__?.[remoteBundle] !== "function") {
+        throw new Error(`Remote component loading error "${remoteBundle}"`);
       }
-      return self.__remote_webpack_require__[bundle](id);
+      return self.__remote_webpack_require__[remoteBundle](id);
     };
     self.__webpack_chunk_load__ = () => {
       return Promise.resolve([]);
@@ -181,7 +256,7 @@ async function webpackRuntime(shared, remoteShared) {
   const {
     default: { createFromReadableStream }
   } = await import("react-server-dom-webpack/client.browser");
-  async function preloadScripts(scripts, url, bundle, _) {
+  async function preloadScripts(scripts, url, remoteBundle, _) {
     await Promise.all(
       scripts.map((script) => {
         return new Promise((resolve2, reject) => {
@@ -210,6 +285,7 @@ async function webpackRuntime(shared, remoteShared) {
       })
     );
     const hostShared = {
+      ...sharedPolyfills(shared),
       ...self.__remote_component_host_shared_modules__,
       ...shared
     };
@@ -237,7 +313,7 @@ async function webpackRuntime(shared, remoteShared) {
         return Promise.resolve(value);
       })
     );
-    applySharedModules(bundle, resolve);
+    applySharedModules(remoteBundle, resolve);
   }
   return {
     self,
@@ -252,6 +328,7 @@ var init_webpack = __esm({
     "use strict";
     init_shared_modules();
     init_next_client_pages_loader();
+    init_polyfill();
   }
 });
 
@@ -396,6 +473,7 @@ async function handleTurbopackChunk(code, bundle, url) {
     script.onload = () => {
       URL.revokeObjectURL(scriptUrl);
       scriptResolve(void 0);
+      script.remove();
     };
     script.onerror = (error) => {
       URL.revokeObjectURL(scriptUrl);
@@ -404,6 +482,7 @@ async function handleTurbopackChunk(code, bundle, url) {
           `Failed to load script: ${error instanceof Error ? error.message : String(error)}`
         )
       );
+      script.remove();
     };
     document.head.appendChild(script);
   });
@@ -468,20 +547,11 @@ function initializeSharedModules(bundle, shared = {}, remoteShared = {}) {
   return Promise.all(
     Object.entries(remoteShared).map(async ([id, module2]) => {
       if (self.__remote_shared_modules__?.[bundle]) {
-        self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await (shared[module2] ?? (() => Promise.resolve(
-          new Proxy(
-            {},
-            {
-              get(_, prop) {
-                if (prop !== "then") {
-                  console.warn(
-                    `Shared dependency "${module2}" not found for "${bundle}" when trying to import "${prop}".`
-                  );
-                }
-              }
-            }
-          )
-        )))();
+        if (shared[module2]) {
+          self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await shared[module2]();
+        } else {
+          console.error(`Shared module "${module2}" not found for "${bundle}".`);
+        }
       }
     })
   );
@@ -504,9 +574,17 @@ function handleTurbopackModule(bundle, moduleId, id) {
   let moduleInit;
   for (const mod of modules ?? []) {
     if (typeof mod[1] === "string") {
-      const index = mod.indexOf(moduleId);
+      let index = mod.indexOf(moduleId);
+      if (index === -1) {
+        index = mod.findIndex(
+          (m) => typeof m === "string" && m.startsWith(moduleId)
+        );
+      }
       if (index !== -1) {
-        moduleInit = mod[index + 1];
+        while (typeof mod[index] !== "function" && index < mod.length) {
+          index++;
+        }
+        moduleInit = mod[index];
         break;
       }
     } else {
@@ -534,6 +612,7 @@ function handleTurbopackModule(bundle, moduleId, id) {
       `Module ${id} not found in bundle ${bundle} with id ${moduleId}`
     );
   }
+  self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
   moduleInit({
     // HMR not implemented for Remote Components
     k: {
@@ -550,11 +629,17 @@ function handleTurbopackModule(bundle, moduleId, id) {
       let mod = m;
       if (Array.isArray(m)) {
         mod = {};
-        for (let i = 0; i < m.length; i += 2) {
-          const key = m[i];
-          const value = m[i + 1];
-          if (typeof key === "string" && typeof value === "function") {
-            mod[key] = value;
+        const keys = [];
+        for (const current of m) {
+          if (typeof current === "string") {
+            keys.push(current);
+          } else if (typeof current === "function") {
+            while (keys.length > 0) {
+              const key = keys.shift();
+              if (key) {
+                mod[key] = current;
+              }
+            }
           }
         }
       }
@@ -569,7 +654,7 @@ function handleTurbopackModule(bundle, moduleId, id) {
       const mod = self.__webpack_require__?.(
         `[${bundle}] ${normalizedId}`
       );
-      if (exportSource && exportName) {
+      if (exportSource && exportName && typeof mod[exportSource] !== "undefined" && typeof mod[exportName] === "undefined") {
         mod[exportName] = mod[exportSource];
       }
       return mod;
@@ -577,6 +662,9 @@ function handleTurbopackModule(bundle, moduleId, id) {
     r(rid) {
       return self.__webpack_require__?.(`[${bundle}] ${rid}`);
     },
+    v(value) {
+      exports.default = value;
+    },
     m: moduleExports,
     e: exports
   });
@@ -585,7 +673,6 @@ function handleTurbopackModule(bundle, moduleId, id) {
       exports[name] = exports[name]();
     }
   }
-  self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
   return moduleExports.exports;
 }
 var init_webpack_adapter = __esm({
@@ -602,12 +689,18 @@ __export(turbopack_exports, {
 });
 async function turbopackRuntime(url, bundle, shared, remoteShared) {
   const self = globalThis;
+  const hostShared = {
+    ...sharedPolyfills(shared),
+    ...self.__remote_component_host_shared_modules__,
+    ...shared,
+    ...self.__remote_component_shared__
+  };
   await setupWebpackRuntime(
     "turbopack",
     [],
     url,
     bundle,
-    { ...shared, ...self.__remote_component_shared__ },
+    hostShared,
     remoteShared
   );
   const {
@@ -621,11 +714,7 @@ async function turbopackRuntime(url, bundle, shared, remoteShared) {
       })),
       url,
       bundle,
-      {
-        ...self.__remote_component_host_shared_modules__,
-        ...shared,
-        ...self.__remote_component_shared__
-      },
+      hostShared,
       remoteShared
     );
   }
@@ -643,6 +732,7 @@ var init_turbopack = __esm({
     init_shared_modules();
     init_next_client_pages_loader();
     init_webpack_adapter();
+    init_polyfill();
   }
 });
 
@@ -728,7 +818,7 @@ async function getRuntime(type, url, bundle, shared, remoteShared) {
   }
   if (type === "webpack") {
     const { webpackRuntime: webpackRuntime2 } = await Promise.resolve().then(() => (init_webpack(), webpack_exports));
-    return webpackRuntime2(shared, remoteShared);
+    return webpackRuntime2(bundle ?? "default", shared, remoteShared);
   } else if (type === "turbopack") {
     const { turbopackRuntime: turbopackRuntime2 } = await Promise.resolve().then(() => (init_turbopack(), turbopack_exports));
     return turbopackRuntime2(url, bundle, shared, remoteShared);
@@ -737,7 +827,7 @@ async function getRuntime(type, url, bundle, shared, remoteShared) {
 }
 
 // src/html/host/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 if (typeof HTMLElement !== "undefined") {
   class RemoteComponent extends HTMLElement {
     constructor() {
@@ -923,7 +1013,7 @@ if (typeof HTMLElement !== "undefined") {
           // hydrateRoot expects a document or element, but it works for the shadow DOM too
           // @ts-expect-error support for shadow DOM
           this.shadowRoot,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RemoteComponentFromReadableStream, { name: this.name })
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RemoteComponentFromReadableStream, { name: this.name })
         );
       } else if (nextData) {
         const { Component, App } = nextClientPagesLoader2(
@@ -936,7 +1026,7 @@ if (typeof HTMLElement !== "undefined") {
             // hydrateRoot expects a document or element, but it works for the shadow DOM too
             // @ts-expect-error support for shadow DOM
             this.shadowRoot,
-            App ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, { Component, ...nextData.props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...nextData.props })
+            App ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(App, { Component, ...nextData.props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...nextData.props })
           );
         }
         if (this.fouc) {