@module-federation/modern-js 0.0.0-next-20240701075157 → 0.0.0-next-20240712032032

package/README.md

@@ -2,166 +2,4 @@
 
 This plugin provides Module Federation supporting functions for Modern.js
 
-## Supports
-
-- modern.js ^2.54.2
-- Server-Side Rendering
-
-We highly recommend referencing this application which takes advantage of the best capabilities:
-[module-federation example](https://github.com/module-federation/core/tree/feat/modernjs-ssr/apps/modernjs-ssr)
-
-## Quick Start
-
-### Installation
-
-You can install the plugin with the following commands:
-
-import { PackageManagerTabs } from '@theme';
-
-<PackageManagerTabs
-  command={{
-    npm: 'npm add @module-federation/modern-js --save',
-    yarn: 'yarn add @module-federation/modern-js --save',
-    pnpm: 'pnpm add @module-federation/modern-js --save',
-    bun: 'bun add @module-federation/modern-js --save',
-  }}
-/>
-
-### Apply Plugin
-
-Apply this plugin in `plugins` of `modern.config.ts`:
-
-```ts title="modern.config.ts"
-import { appTools, defineConfig } from '@modern-js/app-tools';
-import { moduleFederationPlugin } from '@module-federation/modern-js';
-
-export default defineConfig({
-  dev: {
-    port: 3005,
-  },
-  runtime: {
-    router: true,
-  },
-  // moduleFederationPlugin is a plug-in for modern.js, which can make certain modifications to the build/runtime
-  plugins: [appTools(), moduleFederationPlugin()],
-});
-```
-
-Then create the `module-federation.config.ts` file and write the required configuration:
-
-```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
-export default createModuleFederationConfig({
-  name: 'host',
-  remotes: {
-    remote: 'remote@http://localhost:3006/mf-manifest.json',
-  },
-  shared: {
-    react: { singleton: true },
-    'react-dom': { singleton: true },
-  },
-});
-```
-
-### Type support
-
-add `/// <reference types='@module-federation/modern-js/types' />` in `modern-app-env.d.ts` to get type support.
-
-```diff title='modern-app-env.d.ts'
-+ /// <reference types='@module-federation/modern-js/types' />
-```
-
-## Server-Side Rendering
-
-:::info
-For a better performance experience, Module Federation X Modern.js SSR only supports stream SSR.
-:::
-
-There is no difference between using Module Federation in SSR scenarios and CSR scenarios. Developers can just keep following the original development behavior.
-
-But for a better user experience, we provide supporting functions/components to help developers better use Module Federation.
-
-### createRemoteSSRComponent
-
-```ts
-declare function createRemoteSSRComponent(
-  props: CreateRemoteSSRComponentOptions
-): (props: ComponentType) => React.JSX.Element;
-
-type CreateRemoteSSRComponentOptions = {
-  loader: () => Promise<T>;
-  loading: React.ReactNode;
-  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-  export?: E;
-};
-
-type ComponentType = T[E] extends (...args: any) => any
-  ? Parameters<T[E]>[0] extends undefined
-    ? Record<string, never>
-    : Parameters<T[E]>[0]
-  : Record<string, never>;
-```
-
-This function will also help inject the corresponding style tag/script while loading the component. This behavior can help avoid the CSS flickering problem caused by streaming rendering and accelerate the PID (first screen interactive time).
-
-#### Example
-
-```tsx
-import React, { FC, memo, useEffect } from 'react';
-import { registerRemotes, createRemoteSSRComponent } from '@modern-js/runtime/mf';
-// The remote declared in the build plug-in can be imported directly at the top level
-import RemoteComp from 'remote/Image';
-
-
-const RemoteSSRComponent = createRemoteSSRComponent({
-  // The remote declared in the build plug-in can also be loaded using this function: loader: () => import('remote/Image'),
-  loader: () => loadRemote('dynamic_remote/Image'),
-  loading: <div>loading...</div>,
-  fallback: ({ error }) => {
-    if (error instanceof Error && error.message.includes('not exist')) {
-      return <div>fallback - not existed id</div>;
-    }
-    return <div>fallback</div>;
-  },
-});
-
-const Product: FC = () => {
-  registerRemotes([
-    {
-      name: 'dynamic_remote',
-      entry: 'http://localhost:3008/mf-manifest.json',
-    },
-  ]);
-
-  const fallback = (err: Error) => {
-    if (err.message.includes('does not exist in container')) {
-      return <div>404</div>;
-    }
-    throw err;
-  };
-
-  return <>
-    <RemoteSSRComponent />
-    <RemoteComp />
-  </>;
-};
-export default Product;
-```
-
-#### loading
-
-- Type:`React.ReactNode`
-- Required: Yes
-- Default value: `undefined`
-
-Set module loading status.
-
-#### fallback
-
-- Type:`((err: Error) => React.ReactElement)`
-- Required: Yes
-- Default value: `undefined`
-
-A fault-tolerant component that is rendered when the component fails to **load** or **render**.
-
-Note: This component only renders this fault-tolerant component on the client side when **rendering** fails.
+See [documentation](https://module-federation.io/guide/framework/modernjs.html) for more details .

package/dist/cjs/interfaces/bundler.js

@@ -0,0 +1,16 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var bundler_exports = {};
+module.exports = __toCommonJS(bundler_exports);

package/dist/types/cli/utils.d.ts

@@ -1,6 +1,7 @@
-import type { webpack, UserConfig, AppTools, Rspack } from '@modern-js/app-tools';
+import type { webpack, UserConfig, AppTools, Rspack, Bundler } from '@modern-js/app-tools';
 import { moduleFederationPlugin } from '@module-federation/sdk';
 import { PluginOptions } from '../types';
+import { BundlerConfig } from '../interfaces/bundler';
 export type ConfigType<T> = T extends 'webpack' ? webpack.Configuration : T extends 'rspack' ? Rspack.Configuration : never;
 export declare const getMFConfig: (userConfig: PluginOptions) => Promise<moduleFederationPlugin.ModuleFederationPluginOptions>;
 export declare const patchMFConfig: (mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions, isServer: boolean) => {
@@ -39,8 +40,8 @@ export declare function getTargetEnvConfig(mfConfig: moduleFederationPlugin.Modu
     dts?: boolean | moduleFederationPlugin.PluginDtsOptions;
     async?: boolean | moduleFederationPlugin.AsyncBoundaryOptions;
 };
-export declare function patchWebpackConfig<T>(options: {
-    bundlerConfig: ConfigType<T>;
+export declare function patchWebpackConfig<T extends Bundler>(options: {
+    bundlerConfig: BundlerConfig<T>;
     isServer: boolean;
     modernjsConfig: UserConfig<AppTools>;
     mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions;

package/dist/types/interfaces/bundler.d.ts

@@ -0,0 +1,15 @@
+import type { AppTools, Bundler } from '@modern-js/app-tools';
+type AppToolsUserConfig<T extends Bundler> = AppTools<T>['userConfig']['tools'];
+type ExcludeUndefined<T> = T extends undefined ? never : T;
+type ExtractObjectType<T> = T extends (...args: any[]) => any ? never : T;
+type OmitArrayConfiguration<T> = T extends Array<any> ? (T extends (infer U)[] ? U : T) : ExtractObjectType<T>;
+type WebpackConfigs = ExcludeUndefined<AppToolsUserConfig<'webpack'>> extends {
+    webpack?: infer U;
+} ? U : never;
+type ObjectWebpack = ExtractObjectType<OmitArrayConfiguration<WebpackConfigs>>;
+type RspackConfigs = ExcludeUndefined<AppToolsUserConfig<'rspack'>> extends {
+    rspack?: infer U;
+} ? U : never;
+type ObjectRspack = ExtractObjectType<OmitArrayConfiguration<RspackConfigs>>;
+export type BundlerConfig<T extends Bundler> = T extends 'rspack' ? ObjectRspack : ObjectWebpack;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/modern-js",
-  "version": "0.0.0-next-20240701075157",
+  "version": "0.0.0-next-20240712032032",
   "files": [
     "dist/",
     "types.d.ts",
@@ -43,27 +43,37 @@
   "license": "MIT",
   "dependencies": {
     "@swc/helpers": "0.5.3",
-    "@modern-js/utils": "^2.54.2",
-    "@modern-js/node-bundle-require": "^2.54.2",
+    "@modern-js/utils": "2.54.2",
+    "@modern-js/node-bundle-require": "2.54.2",
     "node-fetch": "~3.3.0",
     "react-error-boundary": "4.0.13",
     "hoist-non-react-statics": "3.3.2",
-    "@module-federation/sdk": "0.0.0-next-20240701075157",
-    "@module-federation/enhanced": "0.0.0-next-20240701075157",
-    "@module-federation/node": "0.0.0-next-20240701075157"
+    "@module-federation/sdk": "0.0.0-next-20240712032032",
+    "@module-federation/enhanced": "0.0.0-next-20240712032032",
+    "@module-federation/node": "0.0.0-next-20240712032032"
   },
   "devDependencies": {
     "@types/hoist-non-react-statics": "3.3.2",
-    "@modern-js/app-tools": "^2.54.2",
-    "@modern-js/core": "^2.54.2",
-    "@modern-js/runtime": "^2.54.2",
-    "@modern-js/module-tools": "^2.54.2",
-    "@modern-js/tsconfig": "^2.54.2",
-    "@module-federation/manifest": "0.0.0-next-20240701075157"
+    "@modern-js/app-tools": "^2.55.0",
+    "@modern-js/core": "^2.55.0",
+    "@modern-js/runtime": "^2.55.0",
+    "@modern-js/module-tools": "^2.55.0",
+    "@modern-js/tsconfig": "^2.55.0",
+    "@module-federation/manifest": "0.0.0-next-20240712032032"
   },
   "peerDependencies": {
     "react": ">=17",
-    "react-dom": ">=17"
+    "react-dom": ">=17",
+    "typescript": "^4.9.0 || ^5.0.0",
+    "vue-tsc": "^1.0.24"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    },
+    "vue-tsc": {
+      "optional": true
+    }
   },
   "scripts": {
     "build": "modern build"