remote-components 0.1.2 → 0.2.1

package/dist/{next/remote/pages-router.d.ts → remote/nextjs/pages.d.ts}

@@ -1,4 +1,4 @@
-interface RemoteComponentMetadata {
+interface ExposeRemoteComponentProps {
     __REMOTE_COMPONENT__: {
         bundle: string | undefined;
         runtime: 'turbopack' | 'webpack';
@@ -19,9 +19,9 @@ interface RemoteComponentMetadata {
  *
  * ```
  * import {
- *   getRemoteComponentMetadata,
- *   type RemoteComponentMetadata,
- * } from 'remote-components/next/pages';
+ *   getExposeRemoteComponentProps,
+ *   type ExposeRemoteComponentProps,
+ * } from 'remote-components/remote/nextjs/pages';
  * import App from 'next/app';
  * import type { AppContext, AppInitialProps, AppProps } from 'next/app';
  *
@@ -31,12 +31,12 @@ interface RemoteComponentMetadata {
  *
  * MyApp.getInitialProps = async (
  *   context: AppContext,
- * ): Promise<RemoteComponentMetadata & AppInitialProps> => {
+ * ): Promise<ExposeRemoteComponentProps & AppInitialProps> => {
  *   const ctx = await App.getInitialProps(context);
- *   return { ...ctx, ...getRemoteComponentMetadata() };
+ *   return { ...ctx, ...getExposeRemoteComponentProps() };
  * };
  * ```
  */
-declare function getRemoteComponentMetadata(): RemoteComponentMetadata;
+declare function getExposeRemoteComponentProps(): ExposeRemoteComponentProps;
 
-export { RemoteComponentMetadata, getRemoteComponentMetadata };
+export { ExposeRemoteComponentProps, getExposeRemoteComponentProps };

package/dist/{next/remote/pages-router.js → remote/nextjs/pages.js}

@@ -1,6 +1,6 @@
-import { shared } from "remote-components/shared/remote/pages";
+import { shared } from "#remote-components/remote/defaults/pages";
 const PROJECT_ID = process.env.REMOTE_COMPONENTS_PROJECT_ID || process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION || process.env.VERCEL_PROJECT_ID;
-function getRemoteComponentMetadata() {
+function getExposeRemoteComponentProps() {
   return {
     __REMOTE_COMPONENT__: {
       bundle: PROJECT_ID,
@@ -10,6 +10,6 @@ function getRemoteComponentMetadata() {
   };
 }
 export {
-  getRemoteComponentMetadata
+  getExposeRemoteComponentProps
 };
-//# sourceMappingURL=pages-router.js.map
+//# sourceMappingURL=pages.js.map

package/dist/remote/nextjs/pages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/remote/nextjs/pages.ts"],"sourcesContent":["import { shared } from '#remote-components/remote/defaults/pages';\n\nconst PROJECT_ID =\n  process.env.REMOTE_COMPONENTS_PROJECT_ID ||\n  process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION ||\n  process.env.VERCEL_PROJECT_ID;\n\nexport interface ExposeRemoteComponentProps {\n  __REMOTE_COMPONENT__: {\n    bundle: string | undefined;\n    runtime: 'turbopack' | 'webpack';\n    shared?: Record<string, string>;\n  };\n}\n\n/**\n * Returns the metadata for the remote component.\n * This metadata is used to identify the remote component and its bundle.\n *\n * Extend your Next.js Pages Router page props with this metadata to ensure proper remote component loading.\n *\n * @returns The metadata for the remote component.\n *\n * @example\n *\n * Create a custom App component in your Next.js application to include the remote component metadata:\n *\n * ```\n * import {\n *   getExposeRemoteComponentProps,\n *   type ExposeRemoteComponentProps,\n * } from 'remote-components/remote/nextjs/pages';\n * import App from 'next/app';\n * import type { AppContext, AppInitialProps, AppProps } from 'next/app';\n *\n * export default function MyApp({ Component, pageProps }: AppProps) {\n *   return <Component {...pageProps} />;\n * }\n *\n * MyApp.getInitialProps = async (\n *   context: AppContext,\n * ): Promise<ExposeRemoteComponentProps & AppInitialProps> => {\n *   const ctx = await App.getInitialProps(context);\n *   return { ...ctx, ...getExposeRemoteComponentProps() };\n * };\n * ```\n */\nexport function getExposeRemoteComponentProps(): ExposeRemoteComponentProps {\n  return {\n    __REMOTE_COMPONENT__: {\n      bundle: PROJECT_ID,\n      runtime: process.env.TURBOPACK ? 'turbopack' : 'webpack',\n      shared,\n    },\n  };\n}\n"],"mappings":"AAAA,SAAS,cAAc;AAEvB,MAAM,aACJ,QAAQ,IAAI,gCACZ,QAAQ,IAAI,uCACZ,QAAQ,IAAI;AA0CP,SAAS,gCAA4D;AAC1E,SAAO;AAAA,IACL,sBAAsB;AAAA,MACpB,QAAQ;AAAA,MACR,SAAS,QAAQ,IAAI,YAAY,cAAc;AAAA,MAC/C;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/server-handoff-8c89b856.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { ScriptDescriptor, LinkDescriptor } from './internal/host/shared/asset-descriptors.js';
+import { ShadowDomConfig } from './internal/host/shared/config.js';
+import { RemoteComponentMetadata } from './internal/runtime/metadata.js';
+
+/**
+ * The subset of the remote component fetch response that the client-side
+ * loader needs to hydrate or mount a remote component.
+ *
+ * Both {@link ConsumeServerData} and {@link ConsumeLoaderProps}
+ * compose this interface — it is the shared base for the RSC→client handoff
+ * and the loader function arguments.
+ */
+interface ConsumeLoaderPayload {
+    name: string;
+    bundle: string;
+    route?: string;
+    runtime?: RemoteComponentMetadata['runtime'];
+    data: string[];
+    nextData?: {
+        props: {
+            pageProps: Record<string, unknown>;
+        };
+        buildId?: string;
+    } | null;
+    scripts?: ScriptDescriptor[];
+    remoteShared?: Record<string, string>;
+}
+/**
+ * Internal RSC→client handoff type for embedding a remote component.
+ *
+ * Combines the loader payload with Shadow DOM config and fields that are
+ * only needed by the renderer (links, type) and host (src, serverUrl, children).
+ * Produced by the server component, consumed by the client renderer.
+ */
+interface ConsumeServerData extends ConsumeLoaderPayload, ShadowDomConfig {
+    /** The src provided to the `<ConsumeRemoteComponent>` component, resolved to a string. */
+    src: string;
+    /** The src converted to a URL string. For relative URLs, the VERCEL_URL is used as the origin. */
+    serverUrl: string;
+    links?: LinkDescriptor[];
+    type?: RemoteComponentMetadata['type'];
+    children: React.ReactNode;
+}
+
+export { ConsumeServerData as C, ConsumeLoaderPayload as a };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remote-components",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "private": false,
   "description": "Compose remote components at runtime between microfrontends applications.",
   "keywords": [
@@ -29,183 +29,152 @@
     }
   },
   "exports": {
-    "./html/host": {
-      "import": "./dist/html/host.js",
-      "require": "./dist/html/host.cjs",
-      "default": "./dist/html/host.js"
-    },
-    "./html/remote": {
-      "import": "./dist/html/remote.js",
-      "require": "./dist/html/remote.cjs",
-      "default": "./dist/html/remote.js"
-    },
-    "./next/config": {
-      "import": "./dist/next/config.js",
-      "require": "./dist/next/config.cjs",
-      "default": "./dist/next/config.js"
-    },
-    "./next/middleware": {
-      "import": "./dist/next/proxy.js",
-      "require": "./dist/next/proxy.cjs",
-      "default": "./dist/next/proxy.js"
-    },
-    "./next/proxy": {
-      "import": "./dist/next/proxy.js",
-      "require": "./dist/next/proxy.cjs",
-      "default": "./dist/next/proxy.js"
-    },
-    "./next/host": {
-      "import": "./dist/next/host/app-router-server.js",
-      "require": "./dist/next/host/app-router-server.cjs",
-      "default": "./dist/next/host/app-router-server.js"
-    },
-    "./next/host/client": {
-      "import": "./dist/next/host/client/index.js",
-      "require": "./dist/next/host/client/index.cjs",
-      "default": "./dist/next/host/client/index.js"
-    },
-    "./next/host/pages-router": {
-      "import": "./dist/next/host/pages-router-server.js",
-      "require": "./dist/next/host/pages-router-server.cjs",
-      "default": "./dist/next/host/pages-router-server.js"
-    },
-    "./next/host/pages-router/client": {
-      "import": "./dist/next/host/pages-router-client.js",
-      "require": "./dist/next/host/pages-router-client.cjs",
-      "default": "./dist/next/host/pages-router-client.js"
-    },
-    "./next/remote": {
-      "import": "./dist/next/remote/server.js",
-      "require": "./dist/next/remote/server.cjs",
-      "default": "./dist/next/remote/server.js"
-    },
-    "./next/remote/pages-router": {
-      "import": "./dist/next/remote/pages-router.js",
-      "require": "./dist/next/remote/pages-router.cjs",
-      "default": "./dist/next/remote/pages-router.js"
-    },
-    "./next": {
-      "react-server": {
-        "import": "./dist/next/index.js",
-        "require": "./dist/next/index.cjs",
-        "default": "./dist/next/index.js"
-      },
-      "default": {
-        "import": "./dist/next/host/client/index.js",
-        "require": "./dist/next/host/client/index.cjs",
-        "default": "./dist/next/host/client/index.js"
-      }
-    },
-    "./react": {
-      "import": "./dist/react/index.js",
-      "require": "./dist/react/index.cjs",
-      "default": "./dist/react/index.js"
-    },
-    "./ssr": {
-      "import": "./dist/internal/shared/ssr/fetch-remote-component.js",
-      "require": "./dist/internal/shared/ssr/fetch-remote-component.cjs",
-      "default": "./dist/internal/shared/ssr/fetch-remote-component.js"
-    },
-    "./shared/remote/app": {
-      "import": "./dist/shared/remote/app.js",
-      "require": "./dist/shared/remote/app.cjs",
-      "default": "./dist/shared/remote/app.js"
-    },
-    "./shared/remote/pages": {
-      "import": "./dist/shared/remote/pages.js",
-      "require": "./dist/shared/remote/pages.cjs",
-      "default": "./dist/shared/remote/pages.js"
-    },
-    "./shared/remote/wrapper": {
-      "import": "./dist/shared/remote/wrapper.js",
-      "require": "./dist/shared/remote/wrapper.cjs",
-      "default": "./dist/shared/remote/wrapper.js"
-    },
-    "./shared/host/app": {
-      "import": "./dist/shared/host/app.js",
-      "require": "./dist/shared/host/app.cjs",
-      "default": "./dist/shared/host/app.js"
-    },
-    "./shared/host/pages": {
-      "import": "./dist/shared/host/pages.js",
-      "require": "./dist/shared/host/pages.cjs",
-      "default": "./dist/shared/host/pages.js"
-    },
-    "./shared/host/proxy": {
-      "import": "./dist/shared/host/proxy.js",
-      "require": "./dist/shared/host/proxy.cjs",
-      "default": "./dist/shared/host/proxy.js"
-    },
-    "./webpack": {
-      "import": "./dist/webpack.js",
-      "require": "./dist/webpack.cjs",
-      "default": "./dist/webpack.js"
+    "./host/nextjs/app": {
+      "import": "./dist/host/nextjs/app.js",
+      "require": "./dist/host/nextjs/app.cjs",
+      "default": "./dist/host/nextjs/app.js"
+    },
+    "./host/nextjs/app/client-only": {
+      "import": "./dist/host/nextjs/app/client-only.js",
+      "require": "./dist/host/nextjs/app/client-only.cjs",
+      "default": "./dist/host/nextjs/app/client-only.js"
+    },
+    "./host/nextjs/pages": {
+      "import": "./dist/host/nextjs/pages.js",
+      "require": "./dist/host/nextjs/pages.cjs",
+      "default": "./dist/host/nextjs/pages.js"
+    },
+    "./host/nextjs/pages/client-only": {
+      "import": "./dist/host/nextjs/pages/client-only.js",
+      "require": "./dist/host/nextjs/pages/client-only.cjs",
+      "default": "./dist/host/nextjs/pages/client-only.js"
+    },
+    "./host/react": {
+      "import": "./dist/host/react.js",
+      "require": "./dist/host/react.cjs",
+      "default": "./dist/host/react.js"
+    },
+    "./host/html": {
+      "import": "./dist/host/html.js",
+      "require": "./dist/host/html.cjs",
+      "default": "./dist/host/html.js"
+    },
+    "./remote/nextjs/app": {
+      "import": "./dist/remote/nextjs/app.js",
+      "require": "./dist/remote/nextjs/app.cjs",
+      "default": "./dist/remote/nextjs/app.js"
+    },
+    "./remote/nextjs/pages": {
+      "import": "./dist/remote/nextjs/pages.js",
+      "require": "./dist/remote/nextjs/pages.cjs",
+      "default": "./dist/remote/nextjs/pages.js"
+    },
+    "./remote/html": {
+      "import": "./dist/remote/html.js",
+      "require": "./dist/remote/html.cjs",
+      "default": "./dist/remote/html.js"
+    },
+    "./config/nextjs": {
+      "import": "./dist/config/nextjs.js",
+      "require": "./dist/config/nextjs.cjs",
+      "default": "./dist/config/nextjs.js"
+    },
+    "./config/webpack": {
+      "import": "./dist/config/webpack.js",
+      "require": "./dist/config/webpack.cjs",
+      "default": "./dist/config/webpack.js"
+    },
+    "./host/proxy": {
+      "import": "./dist/host/proxy.js",
+      "require": "./dist/host/proxy.cjs",
+      "default": "./dist/host/proxy.js"
+    },
+    "./host/proxy/client": {
+      "import": "./dist/host/proxy/client.js",
+      "require": "./dist/host/proxy/client.cjs",
+      "default": "./dist/host/proxy/client.js"
+    },
+    "./host/react/context": {
+      "import": "./dist/internal/host/react/context.js",
+      "require": "./dist/internal/host/react/context.cjs",
+      "default": "./dist/internal/host/react/context.js"
+    },
+    "./remote/middleware": {
+      "import": "./dist/remote/middleware.js",
+      "require": "./dist/remote/middleware.cjs",
+      "default": "./dist/remote/middleware.js"
+    },
+    "./host/server": {
+      "import": "./dist/internal/host/server/fetch-remote-component.js",
+      "require": "./dist/internal/host/server/fetch-remote-component.cjs",
+      "default": "./dist/internal/host/server/fetch-remote-component.js"
+    },
+    "./host/proxy/protected-fetch": {
+      "import": "./dist/host/proxy/protected-fetch.js",
+      "require": "./dist/host/proxy/protected-fetch.cjs",
+      "default": "./dist/host/proxy/protected-fetch.js"
+    },
+    "./remote/defaults/wrapper": {
+      "import": "./dist/remote/defaults/wrapper.js",
+      "require": "./dist/remote/defaults/wrapper.cjs",
+      "default": "./dist/remote/defaults/wrapper.js"
     }
   },
   "typesVersions": {
     "*": {
-      "html/host": [
-        "./dist/html/host.d.ts"
-      ],
-      "html/remote": [
-        "./dist/html/remote.d.ts"
-      ],
-      "next/config": [
-        "./dist/next/config.d.ts"
-      ],
-      "next/middleware": [
-        "./dist/next/proxy.d.ts"
+      "host/nextjs/app": [
+        "./dist/host/nextjs/app.d.ts"
       ],
-      "next/proxy": [
-        "./dist/next/proxy.d.ts"
+      "host/nextjs/app/client-only": [
+        "./dist/host/nextjs/app/client-only.d.ts"
       ],
-      "next/host": [
-        "./dist/next/host/app-router-server.d.ts"
+      "host/nextjs/pages": [
+        "./dist/host/nextjs/pages.d.ts"
       ],
-      "next/host/client": [
-        "./dist/next/host/client/index.d.ts"
+      "host/nextjs/pages/client-only": [
+        "./dist/host/nextjs/pages/client-only.d.ts"
       ],
-      "next/host/pages-router": [
-        "./dist/next/host/pages-router-server.d.ts"
+      "host/react": [
+        "./dist/host/react.d.ts"
       ],
-      "next/host/pages-router/client": [
-        "./dist/next/host/pages-router-client.d.ts"
+      "host/html": [
+        "./dist/host/html.d.ts"
       ],
-      "next/remote": [
-        "./dist/next/remote/server.d.ts"
+      "remote/nextjs/app": [
+        "./dist/remote/nextjs/app.d.ts"
       ],
-      "next/remote/pages-router": [
-        "./dist/next/remote/pages-router.d.ts"
+      "remote/nextjs/pages": [
+        "./dist/remote/nextjs/pages.d.ts"
       ],
-      "next": [
-        "./dist/next/index.d.ts"
+      "remote/html": [
+        "./dist/remote/html.d.ts"
       ],
-      "react": [
-        "./dist/react/index.d.ts"
+      "config/nextjs": [
+        "./dist/config/nextjs.d.ts"
       ],
-      "./ssr": [
-        "./dist/internal/shared/ssr/fetch-remote-component.d.ts"
+      "config/webpack": [
+        "./dist/config/webpack.d.ts"
       ],
-      "shared/remote/app": [
-        "./dist/shared/remote/app.d.ts"
+      "host/proxy": [
+        "./dist/host/proxy.d.ts"
       ],
-      "shared/remote/pages": [
-        "./dist/shared/remote/pages.d.ts"
+      "host/proxy/client": [
+        "./dist/host/proxy/client.d.ts"
       ],
-      "shared/remote/wrapper": [
-        "./dist/shared/remote/wrapper.d.ts"
+      "host/react/context": [
+        "./dist/internal/host/react/context.d.ts"
       ],
-      "shared/host/app": [
-        "./dist/shared/host/app.d.ts"
+      "remote/middleware": [
+        "./dist/remote/middleware.d.ts"
       ],
-      "shared/host/pages": [
-        "./dist/shared/host/pages.d.ts"
+      "host/server": [
+        "./dist/internal/host/server/fetch-remote-component.d.ts"
       ],
-      "shared/host/proxy": [
-        "./dist/shared/host/proxy.d.ts"
+      "host/proxy/protected-fetch": [
+        "./dist/host/proxy/protected-fetch.d.ts"
       ],
-      "webpack": [
-        "./dist/webpack.d.ts"
+      "remote/defaults/wrapper": [
+        "./dist/remote/defaults/wrapper.d.ts"
       ]
     }
   },