fix(modern-js-plugin): export kit namespace to prevent import react directly (#3731)

Author: 2heal1

.changeset/many-emus-shave.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/modern-js': patch
+---
+
+fix(modern-js-plugin): export kit namespace to prevent import react directly

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

@@ -3,10 +3,12 @@ import Button from 'antd/lib/button';
 import {
   registerRemotes,
   loadRemote,
-  createRemoteSSRComponent,
-} from '@modern-js/runtime/mf';
+  kit,
+} from '@module-federation/modern-js/runtime';
 import stuff from './stuff.module.css';
 
+const { createRemoteSSRComponent } = kit;
+
 registerRemotes([
   {
     name: 'dynamic_remote',

apps/modernjs-ssr/host/src/routes/all/page.tsx

@@ -1,5 +1,8 @@
 import React, { Suspense } from 'react';
-import { loadRemote, registerRemotes } from '@modern-js/runtime/mf';
+import {
+  loadRemote,
+  registerRemotes,
+} from '@module-federation/modern-js/runtime';
 
 registerRemotes([
   {

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

@@ -1,5 +1,8 @@
 import React from 'react';
-import { loadRemote, registerRemotes } from '@modern-js/runtime/mf';
+import {
+  loadRemote,
+  registerRemotes,
+} from '@module-federation/modern-js/runtime';
 
 registerRemotes([
   {

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

@@ -2,8 +2,10 @@ import React, { useState, Suspense } from 'react';
 import {
   loadRemote,
   registerRemotes,
-  createRemoteSSRComponent,
-} from '@modern-js/runtime/mf';
+  kit,
+} from '@module-federation/modern-js/runtime';
+
+const { createRemoteSSRComponent } = kit;
 
 registerRemotes([
   {

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

@@ -1,6 +1,9 @@
 import React, { useState, Suspense } from 'react';
 import Comp from 'remote/Image';
-import { registerRemotes, loadRemote } from '@modern-js/runtime/mf';
+import {
+  registerRemotes,
+  loadRemote,
+} from '@module-federation/modern-js/runtime';
 
 const NewRemoteCom = React.lazy(() =>
   loadRemote('remote/Image').then((m) => {

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

@@ -1,8 +1,10 @@
-import { createRemoteSSRComponent } from '@modern-js/runtime/mf';
+import { kit } from '@module-federation/modern-js/runtime';
 
 import Content from '../components/Content';
 import './index.css';
 
+const { createRemoteSSRComponent } = kit;
+
 const RemoteSSRComponent = createRemoteSSRComponent({
   loader: () => import('remote/Button'),
   loading: 'loading...',

apps/website-new/docs/en/guide/framework/modernjs.mdx

@@ -112,10 +112,11 @@ This function will also help inject the corresponding style tag/script while loa
 
 ```tsx
 import React, { FC, memo, useEffect } from 'react';
-import { registerRemotes, createRemoteSSRComponent } from '@modern-js/runtime/mf';
+import { registerRemotes, kit } from '@module-federation/modern-js/runtime';
 // The remote declared in the build plug-in can be imported directly at the top level
 import RemoteComp from 'remote/Image';
 
+const { createRemoteSSRComponent } = kit;
 
 const RemoteSSRComponent = createRemoteSSRComponent({
   // The remote declared in the build plug-in can also be loaded using this function: loader: () => import('remote/Image'),

apps/website-new/docs/en/practice/frameworks/modern/dynamic-remote.mdx

@@ -147,13 +147,15 @@ export const loader = async ({ request }: LoaderFunctionArgs): Promise<DataLoade
 Consume loader data and dynamically load the corresponding producer:
 
 ```tsx
-import { createRemoteSSRComponent, loadRemote, registerRemotes } from '@modern-js/runtime/mf';
+import { kit, loadRemote, registerRemotes } from '@module-federation/modern-js/runtime';
 // Use import type to get data loader types
 import type { DataLoaderRes } from './page.data';
 import { useLoaderData } from '@modern-js/runtime/router';
 
 import './index.css';
 
+const { createRemoteSSRComponent } = kit;
+
 const RemoteSSRComponent = createRemoteSSRComponent({
   loader: () => import('remote/Image'),
   loading: 'loading...',

apps/website-new/docs/en/practice/frameworks/modern/index.mdx

@@ -217,12 +217,6 @@ export default defineConfig({
 ```
 #### 3. Type hint
 
-Add `/// <reference types='@module-federation/modern-js/types' />` to the `modern-app-env.d.ts` file to get the runtime `@modern-js/runtime/mf` type support.
-
-```diff title='modern-app-env.d.ts'
-+ /// <reference types='@module-federation/modern-js/types' />
-```
-
 Add `paths` in `tsconfig.json` to get the producer's type:
 
 ```json
@@ -260,9 +254,11 @@ 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 { createRemoteSSRComponent } from '@modern-js/runtime/mf'
+import { kit } from '@module-federation/modern-js/runtime'
 import './index.css';
 
+const { createRemoteSSRComponent } = kit;
+
 const RemoteSSRComponent = createRemoteSSRComponent({
   loader: () => import('remote/Image'),
   loading: 'loading...',