remote-components 0.0.4 → 0.0.5

package/dist/shared/ssr/fetch-remote-component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/shared/ssr/fetch-remote-component.ts"],"sourcesContent":["import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack/client.edge';\nimport { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport type { RemoteComponentMetadata } from './types';\nimport { visit } from './dom-flight';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * Resolves the base URL that should be used to fetch the remote component.\n * This function must support local development, Vercel environments, and SSG\n * and dynamic rendering.\n */\nexport function getBaseUrl(reqHeaders: Headers): string {\n  const host = reqHeaders.get('host');\n  if (host) {\n    return host.startsWith('localhost') ? `http://${host}` : `https://${host}`;\n  }\n  const forwardedHost = reqHeaders.get('x-forwarded-host');\n  if (forwardedHost) {\n    return `https://${forwardedHost}`;\n  }\n  if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {\n    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;\n  }\n  // TODO: Resolve the correct URL in local development when the proxy is not running.\n  return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n\nexport async function fetchRemoteComponent(\n  src: string | URL,\n  headers: Headers,\n  createComponent = false,\n) {\n  const url = new URL(src, getBaseUrl(headers));\n\n  const fetchInit = {\n    method: 'GET',\n    headers: {\n      // pass all headers to the remote component\n      ...Object.fromEntries(headers.entries()),\n      Accept: 'text/html',\n      // pass the public address of the remote component to the server used for module map mutation\n      'Vercel-Remote-Component-Url': url.href,\n    },\n    credentials: 'include',\n  } as RequestInit;\n\n  const res = await fetch(url, fetchInit);\n\n  if (!res.ok) {\n    throw new Error(\n      `Failed to fetch remote component \"${url.href}\": ${res.status}`,\n    );\n  }\n\n  // create a parser for the HTML response\n  const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n  if (!res.body) {\n    throw new Error(`No response body for remote component \"${url.href}\"`);\n  }\n\n  const decoder = new TextDecoder();\n  // read the response body as a stream and parse it using the parse5 fragment parser\n  for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n    parser.tokenizer.write(decoder.decode(chunk), false);\n  }\n  const fragment = parser.getFragment();\n\n  let metadata: RemoteComponentMetadata = {\n    bundle: CURRENT_ZONE ?? '__vercel_remote_component',\n    route: '/',\n    runtime: 'webpack',\n    id: '__vercel_remote_component',\n  };\n  let remoteShared: Record<string, string> = {};\n  const scripts: { src: string }[] = [];\n  const links: Record<string, string | boolean>[] = [];\n  const hydrationData: string[] = [];\n  let nextData:\n    | {\n        props: { pageProps: Record<string, unknown> };\n        buildId?: string;\n      }\n    | undefined;\n  let html = '';\n  // convert the parsed HTML fragment into an RSC flight data\n  // and extract the metadata, scripts, links and remote component RSC flight data\n  const rsc = visit(fragment, {\n    url,\n    onMetadata(_metadata) {\n      metadata = _metadata;\n    },\n    onScript(attrs) {\n      if (!scripts.find((it) => it.src === attrs.src)) {\n        scripts.push({ src: attrs.src as string });\n      }\n    },\n    onLink(attrs) {\n      if (!links.find((it) => it.href === attrs.href && it.rel === attrs.rel)) {\n        links.push(attrs);\n      }\n    },\n    onRSC(chunk) {\n      hydrationData.push(chunk);\n    },\n    onNextData(data) {\n      nextData = data;\n\n      // use the Next.js Pages Router props data to extract remote component metadata\n      if (data.props.__REMOTE_COMPONENT__) {\n        Object.assign(metadata, data.props.__REMOTE_COMPONENT__);\n        // only a singleton remote component is supported per page when using the Next.js Pages Router\n        metadata.id = '__next';\n        metadata.route = data.page ?? '/';\n      }\n    },\n    onHTML(_html) {\n      if (!html.includes(_html)) {\n        html += _html;\n      }\n    },\n    onShared(_shared) {\n      remoteShared = _shared;\n    },\n  });\n\n  let component: React.ReactNode | undefined;\n\n  // only create a React component if requested\n  if (createComponent) {\n    // RSC flight data for the static HTML in a single RSC line\n    const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n\n    // create a React tree from the RSC flight data\n    component = await createFromReadableStream(\n      new ReadableStream({\n        type: 'bytes',\n        start(controller) {\n          const encoder = new TextEncoder();\n          controller.enqueue(encoder.encode(componentRSC));\n          controller.close();\n        },\n      }),\n      {\n        serverConsumerManifest: {\n          moduleLoading: {\n            prefix: url.origin,\n            crossOrigin: true,\n          },\n          moduleMap: {},\n        },\n      },\n    );\n  }\n\n  const name = metadata.id.replace(/_ssr$/, '');\n  return {\n    name,\n    url,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared,\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/shared/ssr/fetch-remote-component.ts"],"sourcesContent":["import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack/client.edge';\nimport { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport type { RemoteComponentMetadata } from './types';\nimport { visit } from './dom-flight';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * Resolves the base URL that should be used to fetch the remote component.\n * This function must support local development, Vercel environments, and SSG\n * and dynamic rendering.\n */\nexport function getBaseUrl(reqHeaders: Headers): string {\n  const host = reqHeaders.get('host');\n  if (host) {\n    return host.startsWith('localhost') ? `http://${host}` : `https://${host}`;\n  }\n  const forwardedHost = reqHeaders.get('x-forwarded-host');\n  if (forwardedHost) {\n    return `https://${forwardedHost}`;\n  }\n  if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {\n    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;\n  }\n  // TODO: Resolve the correct URL in local development when the proxy is not running.\n  return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n\nexport async function fetchRemoteComponent(\n  src: string | URL,\n  headers: Headers,\n  createComponent = false,\n) {\n  const url = new URL(src, getBaseUrl(headers));\n\n  const fetchInit = {\n    method: 'GET',\n    headers: {\n      // pass all headers to the remote component\n      ...Object.fromEntries(headers.entries()),\n      Accept: 'text/html',\n      // pass the public address of the remote component to the server used for module map mutation\n      'Vercel-Remote-Component-Url': url.href,\n    },\n    credentials: 'include',\n  } as RequestInit;\n\n  const res = await fetch(url, fetchInit);\n\n  if (!res.ok) {\n    throw new Error(\n      `Failed to fetch remote component \"${url.href}\": ${res.status}`,\n    );\n  }\n\n  // create a parser for the HTML response\n  const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n  if (!res.body) {\n    throw new Error(`No response body for remote component \"${url.href}\"`);\n  }\n\n  const decoder = new TextDecoder();\n  // read the response body as a stream and parse it using the parse5 fragment parser\n  for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n    parser.tokenizer.write(decoder.decode(chunk), false);\n  }\n  const fragment = parser.getFragment();\n\n  let metadata: RemoteComponentMetadata = {\n    bundle: CURRENT_ZONE ?? '__vercel_remote_component',\n    route: '/',\n    runtime: 'webpack',\n    id: '__vercel_remote_component',\n  };\n  let remoteShared: Record<string, string> = {};\n  const scripts: { src: string }[] = [];\n  const links: Record<string, string | boolean>[] = [];\n  const hydrationData: string[] = [];\n  let nextData:\n    | {\n        props: { pageProps: Record<string, unknown> };\n        buildId?: string;\n      }\n    | undefined;\n  let html = '';\n  // convert the parsed HTML fragment into an RSC flight data\n  // and extract the metadata, scripts, links and remote component RSC flight data\n  const rsc = visit(fragment, {\n    url,\n    onMetadata(_metadata) {\n      metadata = _metadata;\n    },\n    onScript(attrs) {\n      if (!scripts.find((it) => it.src === attrs.src)) {\n        scripts.push({\n          src: new URL(attrs.src as string, new URL(url).origin).href,\n        });\n      }\n    },\n    onLink(attrs) {\n      if (!links.find((it) => it.href === attrs.href && it.rel === attrs.rel)) {\n        links.push(attrs);\n      }\n    },\n    onRSC(chunk) {\n      hydrationData.push(chunk);\n    },\n    onNextData(data) {\n      nextData = data;\n\n      // use the Next.js Pages Router props data to extract remote component metadata\n      if (data.props.__REMOTE_COMPONENT__) {\n        Object.assign(metadata, data.props.__REMOTE_COMPONENT__);\n        // only a singleton remote component is supported per page when using the Next.js Pages Router\n        metadata.id = '__next';\n        metadata.route = data.page ?? '/';\n      }\n    },\n    onHTML(_html) {\n      if (!html.includes(_html)) {\n        html += _html;\n      }\n    },\n    onShared(_shared) {\n      remoteShared = _shared;\n    },\n  });\n\n  let component: React.ReactNode | undefined;\n\n  // only create a React component if requested\n  if (createComponent) {\n    // RSC flight data for the static HTML in a single RSC line\n    const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n\n    // create a React tree from the RSC flight data\n    component = await createFromReadableStream(\n      new ReadableStream({\n        type: 'bytes',\n        start(controller) {\n          const encoder = new TextEncoder();\n          controller.enqueue(encoder.encode(componentRSC));\n          controller.close();\n        },\n      }),\n      {\n        serverConsumerManifest: {\n          moduleLoading: {\n            prefix: url.origin,\n            crossOrigin: true,\n          },\n          moduleMap: {},\n        },\n      },\n    );\n  }\n\n  const name = metadata.id.replace(/_ssr$/, '');\n  return {\n    name,\n    url,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared,\n  };\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remote-components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "private": false,
   "description": "Compose remote components at runtime between microfrontends applications.",
   "keywords": [