WIP: chore(react): export createRemoteComponent and related utils

.changeset/breezy-lemons-grin.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/bridge-react': patch
+---
+
+feat(bridge-react): export createLazyCompoent api

.changeset/curly-insects-wonder.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/modern-js': patch
+---
+
+refactor(modern-js-plugin): add subpath react to export createLazyCompoent and wrapNoSSR apis

.changeset/curly-pillows-give.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/bridge-vue3': minor
+---
+
+refactor(vue3-bridge): rename createRemoteComponent as createRemoteAppComponent

.changeset/hip-hornets-exercise.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/bridge-react': minor
+---
+
+refactor(bridge-react): rename createRemoteComponent as createRemoteAppComponent

.changeset/tender-rocks-leave.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/modern-js': minor
+---
+
+refactor(modern-js-plugin): deprecate createRemoteComponent and createRemoteSSRComponent

.github/workflows/build-and-test.yml

@@ -56,7 +56,7 @@ jobs:
         run: nproc
 
       - name: Warm Nx Cache
-        run: npx nx run-many --targets=build --projects=tag:type:pkg --parallel=4
+        run: npx nx run-many --targets=build --projects=tag:type:pkg --parallel=4 --skip-nx-cache
 
       - name: Run Build for All
         run: npx nx run-many --targets=build --projects=tag:type:pkg --parallel=4 --skip-nx-cache

.github/workflows/devtools.yml

@@ -38,7 +38,7 @@ jobs:
         run: pnpm install
 
       - name: Run Affected Build
-        run: npx nx run-many --targets=build --projects=tag:type:pkg
+        run: npx nx run-many --targets=build --projects=tag:type:pkg --skip-nx-cache
 
       - name: Configuration xvfb
         shell: bash

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

@@ -1,8 +1,7 @@
-import { kit, ERROR_TYPE } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js/runtime';
+import { ERROR_TYPE } from '@module-federation/modern-js/react';
 
-const { createRemoteComponent } = kit;
-
-const Basic = createRemoteComponent({
+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 { kit } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js/runtime';
 
-const { createRemoteComponent } = kit;
-
-const ClientDowngrade = createRemoteComponent({
+const ClientDowngrade = getInstance()!.createLazyComponent({
   loader: () => {
     return import('remote/ClientDowngrade');
   },

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

@@ -1,9 +1,9 @@
-import { kit } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js/runtime';
 
-const { createRemoteComponent, wrapNoSSR } = kit;
-
-const CsrWithFetchDataFromServerComponent = wrapNoSSR(createRemoteComponent)({
+const CsrWithFetchDataFromServerComponent = getInstance()!.createLazyComponent({
+  noSSR: true,
   loader: () => {
+    console.log('calling');
     return import('provider-csr');
   },
   loading: 'loading...',

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

@@ -1,6 +1,18 @@
 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 { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
+
+getInstance()!.registerPlugins([lazyLoadComponentPlugin()]);
+console.log('layout');
+getInstance()!.prefetch({
+  id: 'remote/BasicComponent',
+});
+
+getInstance()!.prefetch({
+  id: 'provider-csr',
+});
 
 const { Header, Content } = Layout;
 

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

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

apps/modern-component-data-fetch/provider-csr/module-federation.config.ts

@@ -1,4 +1,4 @@
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';
 
 export default createModuleFederationConfig({
   name: 'provider_csr',

apps/modern-component-data-fetch/provider-csr/package.json

@@ -8,6 +8,7 @@
     "build:watch": "rslib build --watch"
   },
   "devDependencies": {
+    "@module-federation/bridge-react": "workspace:*",
     "@module-federation/enhanced": "workspace:*",
     "@module-federation/rsbuild-plugin": "workspace:*",
     "@module-federation/storybook-addon": "workspace:*",

apps/modern-component-data-fetch/provider-csr/src/index.data.ts

@@ -1,13 +1,15 @@
+import { cache } from '@module-federation/bridge-react';
 export type Data = {
   data: string;
 };
 
-export const fetchData = async (): Promise<Data> => {
+export const fetchData = cache(async (): Promise<Data> => {
+  console.log(`[ csr provider - server ] fetch data: ${new Date()}`);
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve({
         data: `[ csr provider - server ] fetched data: ${new Date()}`,
       });
     }, 1000);
   });
-};
+});

apps/modern-component-data-fetch/provider/src/components/BasicComponent/index.data.ts

@@ -1,13 +1,16 @@
+import { cache } from '@module-federation/modern-js/react';
+
 export type Data = {
   data: string;
 };
 
-export const fetchData = async (): Promise<Data> => {
+export const fetchData = cache(async (): Promise<Data> => {
+  console.log('provder-server called');
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve({
         data: `[ provider - server ] fetched data: ${new Date()}`,
       });
     }, 1000);
   });
-};
+});

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import Button from 'antd/lib/button';
 import {
+  getInstance,
   registerRemotes,
   loadRemote,
-  kit,
 } from '@module-federation/modern-js/runtime';
+import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
 import stuff from './stuff.module.css';
 
-const { createRemoteSSRComponent } = kit;
+getInstance()!.registerPlugins([lazyLoadComponentPlugin()]);
 
 registerRemotes([
   {
@@ -16,7 +17,7 @@ registerRemotes([
   },
 ]);
 
-const RemoteSSRComponent = createRemoteSSRComponent({
+const RemoteSSRComponent = getInstance()!.createLazyComponent({
   loader: () => loadRemote('dynamic_remote'),
   loading: 'loading...',
   fallback: ({ error }) => {

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

@@ -1,20 +1,18 @@
 import React, { useState, Suspense } from 'react';
 import {
+  getInstance,
   loadRemote,
   registerRemotes,
-  kit,
 } from '@module-federation/modern-js/runtime';
 
-const { createRemoteSSRComponent } = kit;
-
 registerRemotes([
   {
     name: 'dynamic_remote',
     entry: 'http://localhost:3053/mf-manifest.json',
   },
 ]);
 
-const RemoteSSRComponent = createRemoteSSRComponent({
+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 { kit } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js/runtime';
+import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
 
 import Content from '../components/Content';
 import './index.css';
 
-const { createRemoteSSRComponent } = kit;
+getInstance()!.registerPlugins([lazyLoadComponentPlugin()]);
 
-const RemoteSSRComponent = createRemoteSSRComponent({
+const RemoteSSRComponent = getInstance()!.createLazyComponent({
   loader: () => import('remote/Button'),
   loading: 'loading...',
   export: 'Button',

apps/router-demo/router-host-2000/src/App.tsx

@@ -7,7 +7,7 @@ import React, {
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { init, loadRemote } from '@module-federation/enhanced/runtime';
 import { RetryPlugin } from '@module-federation/retry-plugin';
-import { createRemoteComponent } from '@module-federation/bridge-react';
+import { createRemoteAppComponent } from '@module-federation/bridge-react';
 import Navigation from './navigation';
 import Detail from './pages/Detail';
 import Home from './pages/Home';
@@ -67,13 +67,13 @@ const FallbackErrorComp = (info: any) => {
 
 const FallbackComp = <div data-test-id="loading">loading...</div>;
 
-const Remote1App = createRemoteComponent({
+const Remote1App = createRemoteAppComponent({
   loader: () => loadRemote('remote1/export-app'),
   fallback: FallbackErrorComp,
   loading: FallbackComp,
 });
 
-const Remote5App = createRemoteComponent({
+const Remote5App = createRemoteAppComponent({
   loader: () => loadRemote('remote5/export-app'),
   fallback: FallbackErrorComp,
   loading: FallbackComp,
@@ -136,26 +136,26 @@ const Remote1AppWithErrorBoundary = React.forwardRef<any, any>((props, ref) => (
   </ErrorBoundary>
 ));
 
-const Remote2App = createRemoteComponent({
+const Remote2App = createRemoteAppComponent({
   loader: () => import('remote2/export-app'),
   export: 'provider',
   fallback: FallbackErrorComp,
   loading: FallbackComp,
 });
 
-const Remote3App = createRemoteComponent({
+const Remote3App = createRemoteAppComponent({
   loader: () => loadRemote('remote3/export-app'),
   fallback: FallbackErrorComp,
   loading: FallbackComp,
 });
 
-const RemoteRenderErrorApp = createRemoteComponent({
+const RemoteRenderErrorApp = createRemoteAppComponent({
   loader: () => loadRemote('remote-render-error/export-app'),
   fallback: FallbackErrorComp,
   loading: FallbackComp,
 }) as ForwardRefExoticComponent<unknown>;
 
-const RemoteResourceErrorApp = createRemoteComponent({
+const RemoteResourceErrorApp = createRemoteAppComponent({
   loader: () => loadRemote('remote-resource-error/export-app'),
   fallback: FallbackErrorComp,
   loading: FallbackComp,

apps/router-demo/router-host-2000/src/pages/Home.tsx

@@ -3,7 +3,7 @@ import { Space, Table, Tag } from 'antd';
 import type { TableProps } from 'antd';
 import type React from 'react';
 import { init, loadRemote } from '@module-federation/enhanced/runtime';
-import { createRemoteComponent } from '@module-federation/bridge-react';
+import { createRemoteAppComponent } from '@module-federation/bridge-react';
 
 interface DataType {
   key: string;
@@ -86,7 +86,7 @@ const data: DataType[] = [
   },
 ];
 
-const Remote1Button = createRemoteComponent<any, any>({
+const Remote1Button = createRemoteAppComponent<any, any>({
   loader: () => loadRemote('remote1/export-button'),
   // @ts-ignore
   fallback: null,

apps/router-demo/router-host-v5-2200/src/App.tsx

@@ -4,29 +4,29 @@ import './App.css';
 import Navigation from './navigation';
 import Home from './pages/Home';
 import { loadRemote } from '@module-federation/enhanced/runtime';
-import { createRemoteComponent } from '@module-federation/bridge-react';
+import { createRemoteAppComponent } from '@module-federation/bridge-react';
 
 const FallbackErrorComp = (info: any) => {
   return <div>{info?.error?.message}</div>;
 };
 
 const FallbackComp = <div>loading</div>;
 
-const Remote1App = createRemoteComponent({
+const Remote1App = createRemoteAppComponent({
   loader: () => loadRemote('remote1/export-app'),
   fallback: FallbackErrorComp,
   loading: FallbackComp,
 });
 
-const Remote2App = createRemoteComponent({
+const Remote2App = createRemoteAppComponent({
   // @ts-ignore
   loader: () => import('remote2/export-app'),
   export: 'provider',
   fallback: FallbackErrorComp,
   loading: FallbackComp,
 });
 
-const Remote3App = createRemoteComponent({
+const Remote3App = createRemoteAppComponent({
   loader: () => loadRemote('remote3/export-app'),
   fallback: FallbackErrorComp,
   loading: FallbackComp,

apps/router-demo/router-host-vue3-2100/src/router.ts

@@ -8,7 +8,7 @@ import Detail from '@/pages/Detail.vue';
 import { loadRemote, init } from '@module-federation/enhanced/runtime';
 import * as bridge from '@module-federation/bridge-vue3';
 
-const Remote2 = bridge.createRemoteComponent({
+const Remote2 = bridge.createRemoteAppComponent({
   loader: () => loadRemote('remote1/export-app'),
 });