@modern-js/plugin-garfish 1.4.2 → 1.4.3

package/dist/types/runtime/useModuleApps.d.ts

@@ -1,4 +1,5 @@
 import garfish, { interfaces as GarfishInterfaces } from 'garfish';
+import React from 'react';
 export declare type Options = typeof garfish.options;
 export declare type ModuleInfo = GarfishInterfaces.AppInfo & {
   Component?: React.ComponentType | React.ElementType;
@@ -29,10 +30,9 @@ export declare type MicroComponentProps = {
   loadable?: LoadableConfig;
 };
 export declare type Config = Partial<Options> & ModernGarfishConfig;
-export declare function useModuleApps(): Record<string, import("react").ComponentType<any>>;
-export declare function useModuleApp(): import("react").FC<any>;
-export declare function useMicroApps(): {
-  MApp: import("react").FC<any>;
-  apps: ModulesInfo;
-  Components: Record<string, import("react").ComponentType<any>>;
-};
+export declare type UseModuleApps = { [index in 'apps' | string]: index extends 'apps' ? ModulesInfo : React.FC<any> } & {
+  readonly MApp: React.FC<any>;
+  readonly apps: ModulesInfo;
+};
+export declare function useModuleApps(): UseModuleApps;
+export declare function useModuleApp(): React.FC<any>;

package/dist/types/runtime/utils/Context.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ModulesInfo } from '../useModuleApps';
 export interface GarfishContextType {
   MApp: React.FC<any>;
-  apps: Record<string, React.ComponentType<any>>;
+  apps: Record<string, React.FC<any>>;
   appInfoList: ModulesInfo;
 }
 declare const GarfishContext: React.Context<GarfishContextType>;

package/dist/types/runtime/utils/apps.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import Garfish from 'garfish';
-import { Manifest, MicroComponentProps, ModulesInfo } from '../useModuleApps';
+import { Manifest, ModulesInfo } from '../useModuleApps';
 export interface AppMap {
-  [key: string]: React.ComponentType<MicroComponentProps>;
+  [key: string]: React.FC<any>;
 }
 export declare function generateApps(options: typeof Garfish.options, manifest?: Manifest): {
   apps: AppMap;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "1.4.2",
+  "version": "1.4.3",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/runtime/index.d.ts",
   "typesVersions": {
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7",
-    "@modern-js/utils": "^1.3.4",
+    "@modern-js/utils": "^1.3.5",
     "@types/debug": "^4.1.7",
     "@types/react-loadable": "^5.5.6",
     "debug": "^4.3.2",
@@ -55,10 +55,10 @@
     "react-loadable": "^5.5.0"
   },
   "devDependencies": {
-    "@modern-js/core": "^1.4.6",
+    "@modern-js/core": "^1.5.0",
     "@modern-js/plugin-router": "^1.2.5",
     "@modern-js/runtime-core": "^1.2.4",
-    "@modern-js/types": "^1.3.4",
+    "@modern-js/types": "^1.3.5",
     "@scripts/build": "0.0.0",
     "@scripts/jest-config": "0.0.0",
     "@testing-library/jest-dom": "^5.16.1",
@@ -79,7 +79,6 @@
     "webpack-chain": "^6.5.1"
   },
   "peerDependencies": {
-    "@modern-js/core": "^1.4.6",
     "@modern-js/plugin-router": "^1.2.5",
     "@modern-js/runtime-core": "^1.2.4"
   },

package/tests/__snapshots__/cli.test.tsx.snap

@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`plugin-garfish cli cli get runtime config 1`] = `
+Object {
+  "masterApp": Object {
+    "basename": "/test",
+  },
+}
+`;
+
+exports[`plugin-garfish cli cli get runtime features config 1`] = `
+Object {
+  "masterApp": Object {
+    "basename": "/test2",
+  },
+}
+`;
+
+exports[`plugin-garfish cli cli makeRender function 1`] = `
+Object {
+  "renderByProvider": true,
+  "routerConfig": Object {
+    "basename": "/test",
+    "historyOptions": Object {
+      "basename": "/test",
+    },
+  },
+}
+`;
+
+exports[`plugin-garfish cli cli set runtime config 1`] = `
+Object {
+  "masterApp": true,
+}
+`;
+
+exports[`plugin-garfish cli cli set runtime features config 1`] = `
+Object {
+  "features": Object {
+    "masterApp": true,
+  },
+}
+`;
+
+exports[`plugin-garfish cli webpack config close external and use js entry 1`] = `
+Object {
+  "devServer": Object {
+    "headers": Object {
+      "Access-Control-Allow-Origin": "*",
+    },
+  },
+  "externals": Object {
+    "react": "react",
+    "react-dom": "react-dom",
+  },
+  "optimization": Object {
+    "runtimeChunk": false,
+    "splitChunks": Object {
+      "chunks": "async",
+    },
+  },
+  "output": Object {
+    "filename": "index.js",
+    "libraryTarget": "umd",
+    "publicPath": "//localhost:8080/",
+  },
+}
+`;
+
+exports[`plugin-garfish cli webpack config default micro config 1`] = `
+Object {
+  "devServer": Object {
+    "headers": Object {
+      "Access-Control-Allow-Origin": "*",
+    },
+  },
+  "output": Object {
+    "libraryTarget": "umd",
+    "publicPath": "//localhost:8080/",
+  },
+}
+`;

package/tests/cli.test.tsx

@@ -1,87 +1,41 @@
 import '@testing-library/jest-dom';
-import { manager, useAppContext } from '@modern-js/core';
+import { manager } from '@modern-js/core';
 import WebpackChain from 'webpack-chain';
-import GarfishPlugin, { externals, resolvedConfig } from '../src/cli';
+import GarfishPlugin, { externals } from '../src/cli';
 import { getRuntimeConfig, makeRenderFunction, setRuntimeConfig } from '../src/cli/utils';
 
-const mock_config_context = {
-  context: {},
-  get() {
-    return this.context;
-  },
-  set(newContext: any) {
-    Object.assign(this.context, newContext);
-  },
-  recover(newContext: any) {
-    this.context = newContext;
-  }
-};
-
-jest.mock('@modern-js/core', () => {
-  const originalModule = jest.requireActual('@modern-js/core');
-  return {
-    __esModule: true,
-    ...originalModule,
-    useResolvedConfigContext: ()=>{
-      return mock_config_context.get();
-    }
-  };
-});
-
-
 describe('plugin-garfish cli', () => {
   test('cli garfish basename', async () => {
-    expect(GarfishPlugin.name).toBe('@modern-js/plugin-garfish');
-    const basename = '/test';
-    const resolveConfig = {
+    expect(GarfishPlugin().name).toBe('@modern-js/plugin-garfish');
+
+    const main = manager.clone().usePlugin(GarfishPlugin);
+    const runner = await main.init();
+    await runner.prepare();
+    const configHistoryOptions: any = await runner.resolvedConfig({
       resolved: {
         runtime: {
           router: {
-            historyOptions: { basename }
+            historyOptions: { basename: '/test' }
           },
           masterApp: {}
         },
       }
-    };
-    const config = await resolvedConfig(resolveConfig as any);
-    expect(config.resolved.runtime.masterApp.basename).toBe(basename);
-  });
-
-  test('cli makeRender function', ()=>{
-    const code = `
-      const router = (config)=> config;
-      const App = {};
-      const routerConfig = router({...App?.config?.router, ...App?.config?.features?.router});
-      const resultConfig = {
-        routerConfig,
-        renderByProvider: true,
-      };
+    } as any);
     
-      if (IS_BROWSER) {
-        resultConfig.renderByProvider = false;
-      }
-      return resultConfig;
-    `;
-    const generateNewRenderFn = new Function('appInfo', 'IS_BROWSER', '__GARFISH_EXPORTS__', makeRenderFunction(code));
-    
-    // render byGarfish but don't provider appInfo
-    expect(generateNewRenderFn(undefined, true, false)).toBe(null);
+    expect(configHistoryOptions.resolved.runtime.masterApp.basename).toBe('/test');
 
-    // run alone
-    expect(generateNewRenderFn(undefined, true)).toMatchObject({
-      renderByProvider: false
-    });
-
-    // render ByGarfish and provider appInfo
-    expect(generateNewRenderFn({ basename: '/test' }, true, true)).toMatchObject({
-      renderByProvider: true,
-      routerConfig: {
-        basename: '/test',
-        historyOptions: {
-          basename: '/test'
-        }
+    const configHistory: any = await runner.resolvedConfig({
+      resolved: {
+        runtime: {
+          router: {
+            basename: '/test2'
+          },
+          masterApp: {}
+        },
       }
-    });
+    } as any);
+    
+    expect(configHistory.resolved.runtime.masterApp.basename).toBe('/test2');
   });
 
   test('cli get runtime config', ()=>{
@@ -92,11 +46,7 @@ describe('plugin-garfish cli', () => {
         }
       }
     });
-    expect(runtimeConfig).toMatchObject({
-      masterApp: {
-        basename: '/test'
-      }
-    });
+    expect(runtimeConfig).toMatchSnapshot();
   });
 
   test('cli get runtime features config', ()=>{
@@ -113,11 +63,7 @@ describe('plugin-garfish cli', () => {
       }
     });
 
-    expect(runtimeConfig).toMatchObject({
-      masterApp: {
-        basename: '/test2'
-      }
-    });
+    expect(runtimeConfig).toMatchSnapshot();
   });
 
   test('cli set runtime config', ()=>{
@@ -131,7 +77,7 @@ describe('plugin-garfish cli', () => {
 
     setRuntimeConfig(runtimeConfig, 'masterApp', true);
 
-    expect(runtimeConfig.runtime.masterApp).toBe(true);
+    expect(runtimeConfig.runtime).toMatchSnapshot();
   });
 
   test('cli set runtime features config', ()=>{
@@ -147,16 +93,41 @@ describe('plugin-garfish cli', () => {
 
     setRuntimeConfig(runtimeConfig, 'masterApp', true);
 
-    expect(runtimeConfig.runtime.features.masterApp).toBe(true);
+    expect(runtimeConfig.runtime).toMatchSnapshot();
   });
 
+  test('cli makeRender function', ()=>{
+    const code = `
+      const router = (config)=> config;
+      const App = {};
+      const routerConfig = router({...App?.config?.router, ...App?.config?.features?.router});
+      const resultConfig = {
+        routerConfig,
+        renderByProvider: true,
+      };
+
+      if (IS_BROWSER) {
+        resultConfig.renderByProvider = false;
+      }
+      return resultConfig;
+    `;
+    const generateNewRenderFn = new Function('appInfo', 'IS_BROWSER', '__GARFISH_EXPORTS__', makeRenderFunction(code));
+
+    // render byGarfish but don't provider appInfo
+    expect(generateNewRenderFn(undefined, true, false)).toBe(null);
+
+    // run alone
+    expect(generateNewRenderFn(undefined, true)).toMatchObject({
+      renderByProvider: false
+    });
+
+    // render ByGarfish and provider appInfo
+    expect(generateNewRenderFn({ basename: '/test' }, true, true)).toMatchSnapshot();
+  });
+
+
   test('webpack config close external and use js entry', async ()=>{
-    const main = manager.clone().usePlugin(GarfishPlugin);
-    const runner = await main.init();
-    await runner.prepare();
-    const config: any = await runner.config();
-    const webpackConfig = new WebpackChain();
-    mock_config_context.recover({
+    const resolveConfig: any = {
       deploy: {
         microFrontend: {
           externalBasicLibrary: true,
@@ -164,9 +135,18 @@ describe('plugin-garfish cli', () => {
         },
       },
       server: {
-        port: '8080'
+        port: 8080
       }
-    });
+    };
+
+    const main = manager.clone({
+      useResolvedConfigContext: ()=>resolveConfig
+    }).usePlugin(GarfishPlugin);
+
+    const runner = await main.init();
+    await runner.prepare();
+    const config: any = await runner.config();
+    const webpackConfig = new WebpackChain();
 
     config[0].tools.webpack({}, {
       chain: webpackConfig,
@@ -175,6 +155,7 @@ describe('plugin-garfish cli', () => {
     });
 
     const generateConfig = webpackConfig.toConfig();
+    expect(generateConfig).toMatchSnapshot();
     expect(generateConfig).toMatchObject({
       output: {
         libraryTarget: 'umd',
@@ -187,20 +168,22 @@ describe('plugin-garfish cli', () => {
   })
 
   test('webpack config default micro config', async ()=>{
-    const main = manager.clone().usePlugin(GarfishPlugin);
-    const runner = await main.init();
-    await runner.prepare();
-    const config: any = await runner.config();
-    const webpackConfig = new WebpackChain();
-
-    mock_config_context.recover({
+    const resolveConfig: any = {
       deploy: {
         microFrontend: true,
       },
       server: {
         port: '8080'
       }
-    });
+    };
+
+    const main = manager.clone({
+      useResolvedConfigContext: ()=>resolveConfig
+    }).usePlugin(GarfishPlugin);
+    const runner = await main.init();
+    await runner.prepare();
+    const config: any = await runner.config();
+    const webpackConfig = new WebpackChain();
 
     config[0].tools.webpack({}, {
       chain: webpackConfig,
@@ -209,6 +192,7 @@ describe('plugin-garfish cli', () => {
     });
 
     const generateConfig = webpackConfig.toConfig();
+    expect(generateConfig).toMatchSnapshot();
     expect(generateConfig).toMatchObject({
       output: {
         libraryTarget: 'umd',

package/tests/hooks.test.tsx

@@ -4,7 +4,6 @@ import { createApp } from '@modern-js/runtime-core';
 import '@testing-library/jest-dom';
 
 import ModernGarfishPlugin, {
-  useMicroApps,
   useModuleApp,
   useModuleApps,
 } from '../src/runtime';
@@ -33,13 +32,8 @@ describe('plugin-garfish', () => {
     };
 
     const App = () => {
-      const { MApp, apps, Components } = useMicroApps();
-      const { Dashboard, TableList } = Components;
-      const NMApp = useModuleApp();
-      const NApps = useModuleApps();
+      const { MApp, apps, Dashboard, TableList } = useModuleApps();
 
-      expect(NMApp === MApp).toBeTruthy();
-      expect(Components === NApps).toBeTruthy();
 
       if (apps.length > 0) {
         expect(apps[0].name).toBe(tableListModuleInfo.name);

package/tests/index.test.tsx

@@ -12,8 +12,8 @@ import {
   useLocation,
   MemoryRouter,
 } from '@modern-js/plugin-router';
-import ModernGarfishPlugin from '../src/runtime';
-import { useMicroApps } from '../src';
+import ModernGarfishPlugin, { useModuleApp } from '../src/runtime';
+import { useModuleApps } from '../src';
 import {
   TABLE_LIST_ESCAPE_NODE,
   TABLE_LIST_HTML,
@@ -82,7 +82,7 @@ describe('plugin-garfish', () => {
   });
 
   // testing-library.com/docs/example-react-router/
-  test('legacyModule hooks Components', async () => {
+  test('useModuleApps hooks', async () => {
     const dashBoardModuleInfo = {
       name: 'Dashboard',
       entry: dashboardPath,
@@ -111,9 +111,7 @@ describe('plugin-garfish', () => {
     const App = () => {
       const HomeTitle = 'Micro home page';
       const Home = () => <div data-testid="home-title">{HomeTitle}</div>;
-      const {
-        Components: { Dashboard, TableList },
-      } = useMicroApps();
+      const { Dashboard, TableList } = useModuleApps();
 
       const LocationDisplay = () => {
         const location = useLocation();
@@ -200,7 +198,9 @@ describe('plugin-garfish', () => {
     };
 
     const App = () => {
-      const { MApp } = useMicroApps();
+      const { MApp } = useModuleApps();
+      const NMApp = useModuleApp();
+      expect(MApp).toBe(NMApp);
 
       return (
         <MemoryRouter>