refactor: adjust extend api

Author: 2heal1

apps/modern-component-data-fetch/host/src/routes/basic/page.tsx

@@ -1,11 +1,7 @@
 import { getInstance } from '@module-federation/modern-js/runtime';
-import {
-  createLazyComponent,
-  ERROR_TYPE,
-} from '@module-federation/modern-js/react';
+import { ERROR_TYPE } from '@module-federation/modern-js/react';
 
-const Basic = createLazyComponent({
-  instance: getInstance(),
+const Basic = getInstance()!.createLazyComponent({
   loader: () => {
     return import('remote/BasicComponent');
   },

apps/modern-component-data-fetch/host/src/routes/client-downgrade/page.tsx

@@ -1,8 +1,6 @@
 import { getInstance } from '@module-federation/modern-js/runtime';
-import { createLazyComponent } from '@module-federation/modern-js/react';
 
-const ClientDowngrade = createLazyComponent({
-  instance: getInstance(),
+const ClientDowngrade = getInstance()!.createLazyComponent({
   loader: () => {
     return import('remote/ClientDowngrade');
   },

apps/modern-component-data-fetch/host/src/routes/csr/page.tsx

@@ -1,11 +1,7 @@
 import { getInstance } from '@module-federation/modern-js/runtime';
-import {
-  createLazyComponent,
-  wrapNoSSR,
-} from '@module-federation/modern-js/react';
+import { NoSSR } from '@modern-js/runtime/ssr';
 
-const CsrWithFetchDataFromServerComponent = wrapNoSSR(createLazyComponent)({
-  instance: getInstance(),
+const CsrWithFetchDataFromServerComponent = getInstance()!.createLazyComponent({
   loader: () => {
     return import('provider-csr');
   },
@@ -26,7 +22,9 @@ const Index = (): JSX.Element => {
       <h1>
         The component will be render in csr but <i>fetch data from server</i>
       </h1>
-      <CsrWithFetchDataFromServerComponent />
+      <NoSSR>
+        <CsrWithFetchDataFromServerComponent />
+      </NoSSR>
     </div>
   );
 };

apps/modern-component-data-fetch/host/src/routes/layout.tsx

@@ -2,17 +2,16 @@ import React from 'react';
 import { Outlet, useNavigate, useLocation } from '@modern-js/runtime/router';
 import { Layout, Menu } from 'antd';
 import { getInstance } from '@module-federation/modern-js/runtime';
-import { prefetch } from '@module-federation/modern-js/react';
+import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
 
+getInstance()!.registerPlugins([lazyLoadComponentPlugin()]);
 console.log('layout');
-prefetch({
+getInstance()!.prefetch({
   id: 'remote/BasicComponent',
-  instance: getInstance(),
 });
 
-prefetch({
+getInstance()!.prefetch({
   id: 'provider-csr',
-  instance: getInstance(),
 });
 
 const { Header, Content } = Layout;

apps/modern-component-data-fetch/host/src/routes/server-downgrade/page.tsx

@@ -1,8 +1,6 @@
 import { getInstance } from '@module-federation/modern-js/runtime';
-import { createLazyComponent } from '@module-federation/modern-js/react';
 
-const ServerDowngrade = createLazyComponent({
-  instance: getInstance(),
+const ServerDowngrade = getInstance()!.createLazyComponent({
   loader: () => {
     return import('remote/ServerDowngrade');
   },

apps/modernjs-ssr/dynamic-nested-remote/src/components/Content.tsx

@@ -5,18 +5,19 @@ import {
   registerRemotes,
   loadRemote,
 } from '@module-federation/modern-js/runtime';
-import { createLazyComponent } from '@module-federation/modern-js/react';
+import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
 import stuff from './stuff.module.css';
 
+getInstance()!.registerPlugins([lazyLoadComponentPlugin()]);
+
 registerRemotes([
   {
     name: 'dynamic_remote',
     entry: 'http://localhost:3053/mf-manifest.json',
   },
 ]);
 
-const RemoteSSRComponent = createLazyComponent({
-  instance: getInstance(),
+const RemoteSSRComponent = getInstance()!.createLazyComponent({
   loader: () => loadRemote('dynamic_remote'),
   loading: 'loading...',
   fallback: ({ error }) => {

apps/modernjs-ssr/host/src/routes/dynamic-remote/page.tsx

@@ -4,7 +4,6 @@ import {
   loadRemote,
   registerRemotes,
 } from '@module-federation/modern-js/runtime';
-import { createLazyComponent } from '@module-federation/modern-js/react';
 
 registerRemotes([
   {
@@ -13,8 +12,7 @@ registerRemotes([
   },
 ]);
 
-const RemoteSSRComponent = createLazyComponent({
-  instance: getInstance(),
+const RemoteSSRComponent = getInstance()!.createLazyComponent({
   loader: () => loadRemote('dynamic_remote'),
   loading: 'loading...',
   fallback: ({ error }) => {

apps/modernjs-ssr/host/src/routes/layout.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Outlet, useNavigate } from '@modern-js/runtime/router';
 import { Layout, Menu } from 'antd';
-
+import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
+import { getInstance } from '@module-federation/modern-js/runtime';
 const { Header, Content } = Layout;
 
+getInstance()!.registerPlugins([lazyLoadComponentPlugin()]);
 const App: React.FC = () => {
   const navi = useNavigate();
 

apps/modernjs-ssr/nested-remote/src/routes/page.tsx

@@ -1,11 +1,12 @@
 import { getInstance } from '@module-federation/modern-js/runtime';
-import { createLazyComponent } from '@module-federation/modern-js/react';
+import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
 
 import Content from '../components/Content';
 import './index.css';
 
-const RemoteSSRComponent = createLazyComponent({
-  instance: getInstance(),
+getInstance()!.registerPlugins([lazyLoadComponentPlugin()]);
+
+const RemoteSSRComponent = getInstance()!.createLazyComponent({
   loader: () => import('remote/Button'),
   loading: 'loading...',
   export: 'Button',

packages/bridge/bridge-react/package.json

@@ -50,11 +50,6 @@
       "import": "./dist/router-v6.es.js",
       "require": "./dist/router-v6.cjs.js"
     },
-    "./data-fetch-runtime-plugin": {
-      "types": "./dist/data-fetch-runtime-plugin.d.ts",
-      "import": "./dist/data-fetch-runtime-plugin.es.js",
-      "require": "./dist/data-fetch-runtime-plugin.cjs.js"
-    },
     "./lazy-utils": {
       "types": "./dist/lazy-utils.d.ts",
       "import": "./dist/lazy-utils.es.js",
@@ -70,15 +65,20 @@
       "import": "./dist/data-fetch-server-middleware.es.js",
       "require": "./dist/data-fetch-server-middleware.cjs.js"
     },
+    "./lazy-load-component-plugin": {
+      "types": "./dist/lazy-load-component-plugin.d.ts",
+      "import": "./dist/lazy-load-component-plugin.es.js",
+      "require": "./dist/lazy-load-component-plugin.cjs.js"
+    },
     "./*": "./*"
   },
   "typesVersions": {
     "*": {
       ".": [
         "./dist/types/index.d.ts"
       ],
-      "data-fetch-runtime-plugin": [
-        "./dist/lazy-utils.d.ts"
+      "lazy-load-component-plugin": [
+        "./dist/lazy-load-component-plugin.d.ts"
       ],
       "lazy-utils": [
         "./dist/lazy-utils.d.ts"