chore: pass instance instead of runtime

2heal1 · 2heal1 · commit 7f67062fe05b · 2025-06-24T15:51:52.000+08:00
diff --git a/apps/modern-component-data-fetch/host/src/routes/basic/page.tsx b/apps/modern-component-data-fetch/host/src/routes/basic/page.tsx
@@ -1,9 +1,11 @@
+import { getInstance } from '@module-federation/modern-js/runtime';
 import {
   createLazyComponent,
   ERROR_TYPE,
 } from '@module-federation/modern-js/react';
 
 const Basic = createLazyComponent({
+  instance: getInstance(),
   loader: () => {
     return import('remote/BasicComponent');
   },
diff --git a/apps/modern-component-data-fetch/host/src/routes/client-downgrade/page.tsx b/apps/modern-component-data-fetch/host/src/routes/client-downgrade/page.tsx
@@ -1,6 +1,8 @@
+import { getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent } from '@module-federation/modern-js/react';
 
 const ClientDowngrade = createLazyComponent({
+  instance: getInstance(),
   loader: () => {
     return import('remote/ClientDowngrade');
   },
diff --git a/apps/modern-component-data-fetch/host/src/routes/csr/page.tsx b/apps/modern-component-data-fetch/host/src/routes/csr/page.tsx
@@ -1,9 +1,11 @@
+import { getInstance } from '@module-federation/modern-js/runtime';
 import {
   createLazyComponent,
   wrapNoSSR,
 } from '@module-federation/modern-js/react';
 
 const CsrWithFetchDataFromServerComponent = wrapNoSSR(createLazyComponent)({
+  instance: getInstance(),
   loader: () => {
     return import('provider-csr');
   },
diff --git a/apps/modern-component-data-fetch/host/src/routes/server-downgrade/page.tsx b/apps/modern-component-data-fetch/host/src/routes/server-downgrade/page.tsx
@@ -1,6 +1,8 @@
+import { getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent } from '@module-federation/modern-js/react';
 
 const ServerDowngrade = createLazyComponent({
+  instance: getInstance(),
   loader: () => {
     return import('remote/ServerDowngrade');
   },
diff --git a/apps/modernjs-ssr/dynamic-nested-remote/src/components/Content.tsx b/apps/modernjs-ssr/dynamic-nested-remote/src/components/Content.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Button from 'antd/lib/button';
 import {
+  getInstance,
   registerRemotes,
   loadRemote,
 } from '@module-federation/modern-js/runtime';
@@ -15,6 +16,7 @@ registerRemotes([
 ]);
 
 const RemoteSSRComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => loadRemote('dynamic_remote'),
   loading: 'loading...',
   fallback: ({ error }) => {
diff --git a/apps/modernjs-ssr/host/src/routes/dynamic-remote/page.tsx b/apps/modernjs-ssr/host/src/routes/dynamic-remote/page.tsx
@@ -1,5 +1,6 @@
 import React, { useState, Suspense } from 'react';
 import {
+  getInstance,
   loadRemote,
   registerRemotes,
 } from '@module-federation/modern-js/runtime';
@@ -13,6 +14,7 @@ registerRemotes([
 ]);
 
 const RemoteSSRComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => loadRemote('dynamic_remote'),
   loading: 'loading...',
   fallback: ({ error }) => {
diff --git a/apps/modernjs-ssr/nested-remote/src/routes/page.tsx b/apps/modernjs-ssr/nested-remote/src/routes/page.tsx
@@ -1,9 +1,11 @@
+import { getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent } from '@module-federation/modern-js/react';
 
 import Content from '../components/Content';
 import './index.css';
 
 const RemoteSSRComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => import('remote/Button'),
   loading: 'loading...',
   export: 'Button',
diff --git a/apps/website-new/docs/en/guide/framework/modernjs.mdx b/apps/website-new/docs/en/guide/framework/modernjs.mdx
@@ -194,9 +194,11 @@ export default Index;
 In the consumer, we need to use `createLazyComponent` to load the remote component and fetch data.
 
 ```tsx
+import { getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent, ERROR_TYPE } from '@module-federation/modern-js/react';
 
 const List = createLazyComponent({
+  instance: getInstance(),
   loader: () => {
     return import('remote/List');
   },
@@ -302,7 +304,7 @@ In addition to exporting [MF Runtime](../basic/runtime), `@module-federation/mod
 To prevent conflicts with Shared modules, you need to import them as follows:
 
 ```ts
-import { loadRemote } from '@module-federation/modern-js/runtime';
+import { loadRemote, getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent, wrapNoSSR } from '@module-federation/modern-js/react';
 ```
 
@@ -317,6 +319,7 @@ declare function createLazyComponent(
 ): (props: ComponentType) => React.JSX.Element;
 
 type CreateLazyComponentOptions<T, E extends keyof T> = {
+  instance: ReturnType<typeof getInstance>;
   loader: () => Promise<T>;
   loading: React.ReactNode;
   fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
@@ -351,9 +354,11 @@ This function supports loading components and also provides the following capabi
 
 ```tsx
 import React, { FC, memo, useEffect } from 'react';
+import { getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent, ERROR_TYPE } from '@module-federation/modern-js/react';
 
 const LazyComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => import('remote/Image'),
   loading: <div>loading...</div>,
   fallback: ({error,errorType,dataFetchMapKey}) => {
@@ -431,9 +436,11 @@ Wraps a component so that it does not render in SSR scenarios.
 Usage example:
 
 ```tsx
+import { getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent, wrapNoSSR } from '@module-federation/modern-js/react';
 
 const LazyComponent = wrapNoSSR(createLazyComponent)({
+  instance: getInstance(),
   loader: () => {
     return import('remote/Content');
   },
diff --git a/apps/website-new/docs/en/practice/frameworks/modern/dynamic-remote.mdx b/apps/website-new/docs/en/practice/frameworks/modern/dynamic-remote.mdx
@@ -147,7 +147,7 @@ export const loader = async ({ request }: LoaderFunctionArgs): Promise<DataLoade
 Consume loader data and dynamically load the corresponding producer:
 
 ```tsx
-import { loadRemote, registerRemotes } from '@module-federation/modern-js/runtime';
+import { loadRemote, registerRemotes, getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent } from '@module-federation/modern-js/react';
 // Use import type to get data loader types
 import type { DataLoaderRes } from './page.data';
@@ -156,6 +156,7 @@ import { useLoaderData } from '@modern-js/runtime/router';
 import './index.css';
 
 const RemoteSSRComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => import('remote/Image'),
   loading: 'loading...',
   export: 'default',
@@ -176,6 +177,7 @@ const Index = () => {
   const DynamicRemoteSSRComponents = dataLoader.providerList.map(item => {
     const { id } = item;
     const Com = createLazyComponent({
+      instance: getInstance(),
       loader: () => loadRemote(id),
       loading: 'loading...',
       fallback: ({ error }) => {
diff --git a/apps/website-new/docs/en/practice/frameworks/modern/index.mdx b/apps/website-new/docs/en/practice/frameworks/modern/index.mdx
@@ -254,10 +254,12 @@ This is because the producer's style files cannot be injected into the correspon
 This issue can be solved by using the [createremotessrcomponent](../../../guide/framework/modernjs#createremotessrcomponent) provided by `@module-federation/modern-js`.
 
 ```tsx title='page.tsx'
+import { getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent } from '@module-federation/modern-js/react'
 import './index.css';
 
 const RemoteSSRComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => import('remote/Image'),
   loading: 'loading...',
   export: 'default',
diff --git a/apps/website-new/docs/zh/guide/framework/modernjs.mdx b/apps/website-new/docs/zh/guide/framework/modernjs.mdx
@@ -195,9 +195,11 @@ export default Index;
 在消费者中，我们需要通过 `createLazyComponent` 来加载远程组件，并获取数据。
 
 ```tsx
+import { getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent, ERROR_TYPE } from '@module-federation/modern-js/react';
 
 const List = createLazyComponent({
+  instance: getInstance(),
   loader: () => {
     return import('remote/List');
   },
@@ -304,7 +306,7 @@ export async function loader({ params }) {
 为防止与 Shared 冲突，需要通过下列方式引用。
 
 ```ts
-import { loadRemote } from '@module-federation/modern-js/runtime';
+import { loadRemote, getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent, wrapNoSSR } from '@module-federation/modern-js/react';
 ```
 
@@ -319,6 +321,7 @@ declare function createLazyComponent(
 ): (props: ComponentType) => React.JSX.Element;
 
 type CreateLazyComponentOptions<T, E extends keyof T> = {
+  instance: ReturnType<typeof getInstance>;
   loader: () => Promise<T>;
   loading: React.ReactNode;
   fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
@@ -353,9 +356,11 @@ type ErrorInfo = {
 
 ```tsx
 import React, { FC, memo, useEffect } from 'react';
+import { getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent, ERROR_TYPE } from '@module-federation/modern-js/react';
 
 const LazyComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => import('remote/Image'),
   loading: <div>loading...</div>,
   fallback: ({error,errorType,dataFetchMapKey}) => {
@@ -433,9 +438,11 @@ declare function wrapNoSSR<T, E extends keyof T>(
 使用示例：
 
 ```tsx
+import { getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent, wrapNoSSR } from '@module-federation/modern-js/runtime';
 
 const LazyComponent = wrapNoSSR(createLazyComponent)({
+  instance: getInstance(),
   loader: () => {
     return import('remote/Content');
   },
diff --git a/apps/website-new/docs/zh/practice/frameworks/modern/dynamic-remote.mdx b/apps/website-new/docs/zh/practice/frameworks/modern/dynamic-remote.mdx
@@ -144,7 +144,7 @@ export const loader = async ({ request }: LoaderFunctionArgs): Promise<DataLoade
 消费 loader 数据，并动态加载对应的生产者：
 
 ```tsx
-import { loadRemote, registerRemotes } from '@module-federation/modern-js/runtime';
+import { loadRemote, registerRemotes, getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent } from '@module-federation/modern-js/react';
 // 使用 import type ，仅获取类型
 import type { DataLoaderRes } from './page.data';
@@ -153,6 +153,7 @@ import { useLoaderData } from '@modern-js/runtime/router';
 import './index.css';
 
 const RemoteSSRComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => import('remote/Image'),
   loading: 'loading...',
   export: 'default',
@@ -173,6 +174,7 @@ const Index = () => {
   const DynamicRemoteSSRComponents = dataLoader.providerList.map(item => {
     const { id } = item;
     const Com = createLazyComponent({
+      instance: getInstance(),
       loader: () => loadRemote(id),
       loading: 'loading...',
       fallback: ({ error }) => {
diff --git a/apps/website-new/docs/zh/practice/frameworks/modern/index.mdx b/apps/website-new/docs/zh/practice/frameworks/modern/index.mdx
@@ -257,10 +257,12 @@ export default Index;
 修改消费者引用生产者处的代码（`src/routes/page.tsx`）：
 
 ```tsx title='page.tsx'
+import { getInstance } from '@module-federation/modern-js/runtime';
 import { createLazyComponent } from '@module-federation/modern-js/react'
 import './index.css';
 
 const RemoteSSRComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => import('remote/Image'),
   loading: 'loading...',
   export: 'default',
diff --git a/packages/bridge/bridge-react/src/lazy/createLazyComponent.tsx b/packages/bridge/bridge-react/src/lazy/createLazyComponent.tsx
@@ -20,23 +20,23 @@ import {
 
 import type { ErrorInfo } from './AwaitDataFetch';
 import type { DataFetchParams, NoSSRRemoteInfo } from './types';
-import type { FederationHost } from '@module-federation/runtime';
+import type { FederationHost, getInstance } from '@module-federation/runtime';
 
 export type IProps = {
   id: string;
+  instance: ReturnType<typeof getInstance>;
   injectScript?: boolean;
   injectLink?: boolean;
-  runtime: typeof import('@module-federation/runtime');
 };
 
 export type CreateLazyComponentOptions<T, E extends keyof T> = {
   loader: () => Promise<T>;
+  instance: ReturnType<typeof getInstance>;
   loading: React.ReactNode;
   fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
   export?: E;
   dataFetchParams?: DataFetchParams;
   noSSR?: boolean;
-  runtime: typeof import('@module-federation/runtime');
 };
 
 type ReactKey = { key?: React.Key | null };
@@ -89,7 +89,7 @@ export function collectSSRAssets(options: IProps) {
   } = typeof options === 'string' ? { id: options } : options;
   const links: React.ReactNode[] = [];
   const scripts: React.ReactNode[] = [];
-  const instance = options.runtime.getInstance();
+  const instance = options.instance;
   if (!instance || (!injectLink && !injectScript)) {
     return [...scripts, ...links];
   }
@@ -192,10 +192,10 @@ function getServerNeedRemoteInfo(
 export function createLazyComponent<T, E extends keyof T>(
   options: CreateLazyComponentOptions<T, E>,
 ) {
-  const { runtime } = options;
-  if (!runtime?.getInstance) {
+  const { instance } = options;
+  if (!instance) {
     throw new Error(
-      'runtime is required if used in "@module-federation/bridge-react"!',
+      'instance is required if used in "@module-federation/bridge-react"!',
     );
   }
   type ComponentType = T[E] extends (...args: any) => any
@@ -219,7 +219,6 @@ export function createLazyComponent<T, E extends keyof T>(
   const getData = async (noSSR?: boolean) => {
     let loadedRemoteInfo: ReturnType<typeof getLoadedRemoteInfos>;
     let moduleId: string;
-    const instance = runtime.getInstance();
     try {
       const m = await callLoader();
       moduleId = m && m[Symbol.for('mf_module_id')];
@@ -271,7 +270,6 @@ export function createLazyComponent<T, E extends keyof T>(
   const LazyComponent = React.lazy(async () => {
     const m = await callLoader();
     const moduleId = m && m[Symbol.for('mf_module_id')];
-    const instance = runtime.getInstance()!;
     const loadedRemoteInfo = getLoadedRemoteInfos(moduleId, instance);
     loadedRemoteInfo?.snapshot;
     const dataFetchMapKey = loadedRemoteInfo
@@ -289,7 +287,7 @@ export function createLazyComponent<T, E extends keyof T>(
 
     const assets = collectSSRAssets({
       id: moduleId,
-      runtime,
+      instance,
     });
 
     const Com = m[exportName] as React.FC<ComponentType>;
diff --git a/packages/modernjs/src/react/index.ts b/packages/modernjs/src/react/index.ts
@@ -1,46 +1,8 @@
-import * as mfRuntime from '@module-federation/enhanced/runtime';
-// eslint-disable-next-line @nx/enforce-module-boundaries
-import {
+export {
   ERROR_TYPE,
-  createLazyComponent as rawCreateLazyComponent,
-  collectSSRAssets as rawCollectSsrAssets,
+  createLazyComponent,
+  collectSSRAssets,
+  wrapNoSSR,
 } from '@module-federation/bridge-react';
 
-import type {
-  CollectSSRAssetsOptions,
-  CreateLazyComponentOptions,
-} from '@module-federation/bridge-react';
-
-export { ERROR_TYPE };
-
-type NewCreateLazyComponentOptions<T, E extends keyof T> = Omit<
-  CreateLazyComponentOptions<T, E>,
-  'runtime'
->;
-type NewCreateLazyComponent = <T, E extends keyof T>(
-  options: NewCreateLazyComponentOptions<T, E>,
-) => ReturnType<typeof rawCreateLazyComponent<T, E>>;
-
-export const createLazyComponent: NewCreateLazyComponent = (options) => {
-  return rawCreateLazyComponent({ ...options, runtime: mfRuntime });
-};
-
-export const collectSSRAssets: (
-  options: Omit<CollectSSRAssetsOptions, 'runtime'>,
-) => ReturnType<typeof rawCollectSsrAssets> = (
-  options: Omit<CollectSSRAssetsOptions, 'runtime'>,
-) => {
-  return rawCollectSsrAssets({ ...options, runtime: mfRuntime });
-};
-
-export function wrapNoSSR<T, E extends keyof T>(
-  createLazyComponentFn: typeof createLazyComponent<T, E>,
-): (
-  options: Omit<NewCreateLazyComponentOptions<T, E>, 'noSSR'>,
-) => ReturnType<typeof createLazyComponent<T, E>> {
-  return (options: Omit<NewCreateLazyComponentOptions<T, E>, 'noSSR'>) => {
-    return createLazyComponentFn({ ...options, noSSR: true });
-  };
-}
-
 export type { DataFetchParams } from '@module-federation/bridge-react';
