remote-components 0.0.16 → 0.0.18

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,58 +612,78 @@ function handleTurbopackModule(bundle, moduleId, id) {
       `Module ${id} not found in bundle ${bundle} with id ${moduleId}`
     );
   }
-  moduleInit({
-    // HMR not implemented for Remote Components
-    k: {
-      register() {
-      },
-      registerExports() {
+  self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
+  if (!self.__remote_components_turbopack_global__) {
+    self.__remote_components_turbopack_global__ = {};
+  }
+  if (!self.__remote_components_turbopack_global__[bundle]) {
+    self.__remote_components_turbopack_global__[bundle] = {};
+  }
+  moduleInit(
+    {
+      // HMR not implemented for Remote Components
+      k: {
+        register() {
+        },
+        registerExports() {
+        },
+        signature() {
+          return () => {
+          };
+        }
       },
-      signature() {
-        return () => {
-        };
-      }
-    },
-    s(m) {
-      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;
+      s(m) {
+        let mod = m;
+        if (Array.isArray(m)) {
+          mod = {};
+          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;
+                }
+              }
+            }
           }
         }
-      }
-      for (const [key, value] of Object.entries(mod)) {
-        exports[key] = value;
-        exportNames.add(key);
-      }
-    },
-    i(iid) {
-      const { exportSource, exportName } = /\s+<export (?<exportSource>.*?) as (?<exportName>.*?)>$/.exec(iid)?.groups ?? {};
-      const normalizedId = iid.replace(/\s+<export(?<specifier>.*)>$/, "");
-      const mod = self.__webpack_require__?.(
-        `[${bundle}] ${normalizedId}`
-      );
-      if (exportSource && exportName) {
-        mod[exportName] = mod[exportSource];
-      }
-      return mod;
-    },
-    r(rid) {
-      return self.__webpack_require__?.(`[${bundle}] ${rid}`);
+        for (const [key, value] of Object.entries(mod)) {
+          exports[key] = value;
+          exportNames.add(key);
+        }
+      },
+      i(iid) {
+        const { exportSource, exportName } = /\s+<export (?<exportSource>.*?) as (?<exportName>.*?)>$/.exec(iid)?.groups ?? {};
+        const normalizedId = iid.replace(/\s+<export(?<specifier>.*)>$/, "");
+        const mod = self.__webpack_require__?.(
+          `[${bundle}] ${normalizedId}`
+        );
+        if (exportSource && exportName && typeof mod[exportSource] !== "undefined" && typeof mod[exportName] === "undefined") {
+          mod[exportName] = mod[exportSource];
+        }
+        return mod;
+      },
+      r(rid) {
+        return self.__webpack_require__?.(`[${bundle}] ${rid}`);
+      },
+      v(value) {
+        exports.default = value;
+      },
+      g: self.__remote_components_turbopack_global__[bundle],
+      m: moduleExports,
+      e: exports
     },
-    m: moduleExports,
-    e: exports
-  });
+    moduleExports,
+    exports
+  );
   for (const name of exportNames) {
     if (typeof exports[name] === "function") {
       exports[name] = exports[name]();
     }
   }
-  self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
   return moduleExports.exports;
 }
 var init_webpack_adapter = __esm({
@@ -602,12 +700,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 +725,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 +743,7 @@ var init_turbopack = __esm({
     init_shared_modules();
     init_next_client_pages_loader();
     init_webpack_adapter();
+    init_polyfill();
   }
 });
 
@@ -728,7 +829,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 +838,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() {
@@ -783,8 +884,13 @@ if (typeof HTMLElement !== "undefined") {
       }
       let url = null;
       let html = this.innerHTML;
-      if (!remoteComponentChild && src) {
+      if (src) {
         url = new URL(src, window.location.href);
+        if (url.hash) {
+          this.name = url.hash.slice(1);
+        }
+      }
+      if (!remoteComponentChild && url) {
         const fetchInit = {
           method: "GET",
           headers: {
@@ -923,7 +1029,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 +1042,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) {