remote-components 0.0.18 → 0.0.20

package/dist/html/host.cjs

@@ -152,186 +152,6 @@ 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(bundle, shared, remoteShared) {
-  const self = globalThis;
-  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 remoteBundle = match?.groups?.bundle;
-      const id = match?.groups?.id;
-      if (!(id && remoteBundle)) {
-        throw new Error(`Module not found: "${remoteId}"`);
-      }
-      if (typeof self.__remote_webpack_require__?.[remoteBundle] !== "function") {
-        throw new Error(`Remote component loading error "${remoteBundle}"`);
-      }
-      return self.__remote_webpack_require__[remoteBundle](id);
-    };
-    self.__webpack_chunk_load__ = () => {
-      return Promise.resolve([]);
-    };
-  }
-  const {
-    default: { createFromReadableStream }
-  } = await import("react-server-dom-webpack/client.browser");
-  async function preloadScripts(scripts, url, remoteBundle, _) {
-    await Promise.all(
-      scripts.map((script) => {
-        return new Promise((resolve2, reject) => {
-          const newScript = document.createElement("script");
-          newScript.onload = () => {
-            resolve2();
-          };
-          newScript.onerror = () => {
-            reject(
-              new Error(
-                `Failed to load script ${script.src} for remote component`
-              )
-            );
-          };
-          const scriptSrc = script.getAttribute("src") || script.getAttribute("data-src");
-          if (scriptSrc) {
-            newScript.src = new URL(
-              scriptSrc.replace(/\/_next\/\[(?:.+)\](?:%20| )/, "/_next/"),
-              url
-            ).href;
-          }
-          newScript.async = true;
-          document.body.appendChild(newScript);
-          script.parentElement?.removeChild(script);
-        });
-      })
-    );
-    const hostShared = {
-      ...sharedPolyfills(shared),
-      ...self.__remote_component_host_shared_modules__,
-      ...shared
-    };
-    const resolve = {
-      "/react/index.js": (await import("react")).default,
-      "/react/jsx-dev-runtime.js": (await import("react/jsx-dev-runtime")).default,
-      "/react/jsx-runtime.js": (await import("react/jsx-runtime")).default,
-      "/react-dom/index.js": (await import("react-dom")).default,
-      "/react-dom/client.js": (await import("react-dom/client")).default,
-      ...Object.entries(remoteShared ?? {}).reduce(
-        (acc, [key, value]) => {
-          if (typeof hostShared[value] !== "undefined") {
-            acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
-          }
-          return acc;
-        },
-        {}
-      )
-    };
-    await Promise.all(
-      Object.entries(resolve).map(async ([key, value]) => {
-        if (typeof value === "function") {
-          resolve[key] = await value();
-        }
-        return Promise.resolve(value);
-      })
-    );
-    applySharedModules(remoteBundle, resolve);
-  }
-  return {
-    self,
-    createFromReadableStream,
-    applySharedModules,
-    nextClientPagesLoader,
-    preloadScripts
-  };
-}
-var init_webpack = __esm({
-  "src/html/host/runtime/webpack.ts"() {
-    "use strict";
-    init_shared_modules();
-    init_next_client_pages_loader();
-    init_polyfill();
-  }
-});
-
 // src/shared/client/const.ts
 function getBundleKey(bundle) {
   return bundle.replace(/-/g, "_");
@@ -693,6 +513,186 @@ var init_webpack_adapter = __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(bundle, shared, remoteShared) {
+  const self = globalThis;
+  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 remoteBundle = match?.groups?.bundle;
+      const id = match?.groups?.id;
+      if (!(id && remoteBundle)) {
+        throw new Error(`Module not found: "${remoteId}"`);
+      }
+      if (typeof self.__remote_webpack_require__?.[remoteBundle] !== "function") {
+        throw new Error(`Remote component loading error "${remoteBundle}"`);
+      }
+      return self.__remote_webpack_require__[remoteBundle](id);
+    };
+    self.__webpack_chunk_load__ = () => {
+      return Promise.resolve([]);
+    };
+  }
+  const {
+    default: { createFromReadableStream }
+  } = await import("react-server-dom-webpack/client.browser");
+  async function preloadScripts(scripts, url, remoteBundle, _) {
+    await Promise.all(
+      scripts.map((script) => {
+        return new Promise((resolve2, reject) => {
+          const newScript = document.createElement("script");
+          newScript.onload = () => {
+            resolve2();
+          };
+          newScript.onerror = () => {
+            reject(
+              new Error(
+                `Failed to load script ${script.src} for remote component`
+              )
+            );
+          };
+          const scriptSrc = script.getAttribute("src") || script.getAttribute("data-src");
+          if (scriptSrc) {
+            newScript.src = new URL(
+              scriptSrc.replace(/\/_next\/\[(?:.+)\](?:%20| )/, "/_next/"),
+              url
+            ).href;
+          }
+          newScript.async = true;
+          document.body.appendChild(newScript);
+          script.parentElement?.removeChild(script);
+        });
+      })
+    );
+    const hostShared = {
+      ...sharedPolyfills(shared),
+      ...self.__remote_component_host_shared_modules__,
+      ...shared
+    };
+    const resolve = {
+      "/react/index.js": (await import("react")).default,
+      "/react/jsx-dev-runtime.js": (await import("react/jsx-dev-runtime")).default,
+      "/react/jsx-runtime.js": (await import("react/jsx-runtime")).default,
+      "/react-dom/index.js": (await import("react-dom")).default,
+      "/react-dom/client.js": (await import("react-dom/client")).default,
+      ...Object.entries(remoteShared ?? {}).reduce(
+        (acc, [key, value]) => {
+          if (typeof hostShared[value] !== "undefined") {
+            acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
+          }
+          return acc;
+        },
+        {}
+      )
+    };
+    await Promise.all(
+      Object.entries(resolve).map(async ([key, value]) => {
+        if (typeof value === "function") {
+          resolve[key] = await value();
+        }
+        return Promise.resolve(value);
+      })
+    );
+    applySharedModules(remoteBundle, resolve);
+  }
+  return {
+    self,
+    createFromReadableStream,
+    applySharedModules,
+    nextClientPagesLoader,
+    preloadScripts
+  };
+}
+var init_webpack = __esm({
+  "src/html/host/runtime/webpack.ts"() {
+    "use strict";
+    init_shared_modules();
+    init_next_client_pages_loader();
+    init_polyfill();
+  }
+});
+
 // src/html/host/runtime/turbopack.ts
 var turbopack_exports = {};
 __export(turbopack_exports, {
@@ -755,6 +755,16 @@ __export(host_exports, {
 module.exports = __toCommonJS(host_exports);
 var import_client = require("react-dom/client");
 
+// src/shared/client/component-loader.ts
+var React = __toESM(require("react"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+var ReactDOMClient = __toESM(require("react-dom/client"), 1);
+var JSXDevRuntime = __toESM(require("react/jsx-dev-runtime"), 1);
+var JSXRuntime = __toESM(require("react/jsx-runtime"), 1);
+init_shared_modules();
+init_next_client_pages_loader();
+init_webpack_adapter();
+
 // src/shared/client/rsc.ts
 var import_web_streams_polyfill = require("web-streams-polyfill");
 function fixPayload(payload) {
@@ -820,6 +830,10 @@ function createRSCStream(name, data) {
   });
 }
 
+// src/shared/client/remote-component.ts
+init_webpack_adapter();
+init_const();
+
 // src/html/host/runtime/index.ts
 async function getRuntime(type, url, bundle, shared, remoteShared) {
   if (typeof globalThis.process === "undefined") {