@modern-js/plugin-garfish 1.3.0 → 1.4.1

package/tests/cli.test.tsx

@@ -1,51 +1,221 @@
 import '@testing-library/jest-dom';
-import { PLUGIN_SCHEMAS } from '@modern-js/utils';
-import { makeProvider } from '../src/cli/utils';
-import GarfishPlugin, { initializer } from '../src/cli';
+import { manager, useAppContext } from '@modern-js/core';
+import WebpackChain from 'webpack-chain';
+import GarfishPlugin, { externals, resolvedConfig } 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,
-    default: jest.fn(() => 'mocked baz'),
-    useResolvedConfigContext: () => ({
+    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 = {
+      resolved: {
+        runtime: {
+          router: {
+            historyOptions: { basename }
+          },
+          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,
+      };
+    
+      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)).toMatchObject({
+      renderByProvider: true,
+      routerConfig: {
+        basename: '/test',
+        historyOptions: {
+          basename: '/test'
+        }
+      }
+    });
+  });
+
+  test('cli get runtime config', ()=>{
+    const runtimeConfig = getRuntimeConfig({
       runtime: {
         masterApp: {
-          manifest: {
-            componentKey: 'test-dynamic-key',
-          },
+          basename: '/test'
+        }
+      }
+    });
+    expect(runtimeConfig).toMatchObject({
+      masterApp: {
+        basename: '/test'
+      }
+    });
+  });
+
+  test('cli get runtime features config', ()=>{
+    const runtimeConfig = getRuntimeConfig({
+      runtime: {
+        masterApp: {
+          basename: '/test'
         },
-      },
+        features: {
+          masterApp: {
+            basename: '/test2'
+          }
+        }
+      }
+    });
+
+    expect(runtimeConfig).toMatchObject({
+      masterApp: {
+        basename: '/test2'
+      }
+    });
+  });
+
+  test('cli set runtime config', ()=>{
+    const runtimeConfig = {
+      runtime: {
+        masterApp: {
+          basename: '/test'
+        }
+      }
+    };
+
+    setRuntimeConfig(runtimeConfig, 'masterApp', true);
+
+    expect(runtimeConfig.runtime.masterApp).toBe(true);
+  });
+
+  test('cli set runtime features config', ()=>{
+    const runtimeConfig = {
+      runtime: {
+        features: {
+          masterApp: {
+            basename: '/test'
+          }
+        }
+      }
+    };
+
+    setRuntimeConfig(runtimeConfig, 'masterApp', true);
+
+    expect(runtimeConfig.runtime.features.masterApp).toBe(true);
+  });
+
+  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({
       deploy: {
-        microFrontend: 'dynamicComponentKey',
+        microFrontend: {
+          externalBasicLibrary: true,
+          enableHtmlEntry: false,
+        },
       },
-    }),
-  };
-});
+      server: {
+        port: '8080'
+      }
+    });
 
-describe('plugin-garfish cli', () => {
-  test('makeProvider', async () => {
-    const garfishExport = makeProvider('modernJSExportComponent');
-    expect(garfishExport).toMatchSnapshot();
-  });
+    config[0].tools.webpack({}, {
+      chain: webpackConfig,
+      webpack: jest.fn(),
+      env: 'development'
+    });
 
-  test('test modifyEntryExport', () => {
-    const lifeCycle: any = initializer({
-      validateSchema() {
-        return PLUGIN_SCHEMAS['@modern-js/plugin-garfish'];
+    const generateConfig = webpackConfig.toConfig();
+    expect(generateConfig).toMatchObject({
+      output: {
+        libraryTarget: 'umd',
+        publicPath: '//localhost:8080/',
+        filename: 'index.js'
       },
-      externals: { 'react-dom': 'react-dom', react: 'react' },
-      componentKey: 'test-dynamic-key',
-    })();
-    const { exportStatement } = lifeCycle.modifyEntryExport({
-      entrypoint: 'hello',
-      exportStatement: '',
-    });
-    expect(exportStatement).toMatchSnapshot();
-  });
+      externals,
+      optimization: { runtimeChunk: false, splitChunks: { chunks: 'async' } }
+    });
+  })
 
-  test('cli garfish plugin', () => {
-    expect(GarfishPlugin.name).toBe('@modern-js/plugin-garfish');
+  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({
+      deploy: {
+        microFrontend: true,
+      },
+      server: {
+        port: '8080'
+      }
+    });
+
+    config[0].tools.webpack({}, {
+      chain: webpackConfig,
+      webpack: jest.fn(),
+      env: 'development'
+    });
+
+    const generateConfig = webpackConfig.toConfig();
+    expect(generateConfig).toMatchObject({
+      output: {
+        libraryTarget: 'umd',
+        publicPath: '//localhost:8080/'
+      }
+    });
+    expect(generateConfig.externals).toBeUndefined();
+    expect(generateConfig.output.filename).toBeUndefined();
   });
 });

package/tests/hooks.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { createApp } from '@modern-js/runtime-core';
 import '@testing-library/jest-dom';
+
 import ModernGarfishPlugin, {
   useMicroApps,
   useModuleApp,

package/tests/index.test.tsx

@@ -12,7 +12,8 @@ import {
   useLocation,
   MemoryRouter,
 } from '@modern-js/plugin-router';
-import ModernGarfishPlugin, { useMicroApps } from '../src/runtime';
+import ModernGarfishPlugin from '../src/runtime';
+import { useMicroApps } from '../src';
 import {
   TABLE_LIST_ESCAPE_NODE,
   TABLE_LIST_HTML,
@@ -99,8 +100,10 @@ describe('plugin-garfish', () => {
     const microFrontendConfig = {
       apps: [tableListModuleInfo, dashBoardModuleInfo, userInfo],
       manifest: {
-        LoadingComponent() {
-          return <div data-testid="loading-id">loading</div>;
+        loadable: {
+          loading: ()=> {
+            return <div data-testid="loading-id">loading</div>;
+          }
         },
       },
     };

package/tsconfig.json

@@ -7,7 +7,8 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "paths": {},
-    "types": ["node", "jest","@types/jest"]
+    "types": ["node", "jest", "@types/jest"]
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["**/*.test.tsx"]
 }

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

@@ -1,71 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`plugin-garfish cli makeProvider 1`] = `
-"
-  export const provider = function ({basename, dom, ...props}) {
-    return {
-      render({basename, dom}) {
-        const SubApp = render(props, basename);
-        const node = dom.querySelector('#' + MOUNT_ID) || dom;
-
-        bootstrap(SubApp, node);
-      },
-      destroy({ dom }) {
-        const node = dom.querySelector('#' + MOUNT_ID) || dom;
-
-        if (node) {
-          unmountComponentAtNode(node);
-        }
-      },
-      SubModuleComponent: (props) => {
-        const SubApp = render(props, basename);
-
-        return createPortal(<SubApp />, dom.querySelector('#' + MOUNT_ID)  || dom);
-      },
-      modernJSExportComponent: () => {
-        const SubApp = render(props, basename);
-
-        return createPortal(<SubApp />, dom.querySelector('#' + MOUNT_ID)  || dom);
-      }
-    }
-  };
-  if (typeof __GARFISH_EXPORTS__ !== 'undefined') {
-    __GARFISH_EXPORTS__.provider = provider;
-  }
-"
-`;
-
-exports[`plugin-garfish cli test modifyEntryExport 1`] = `
-"
-  export const provider = function ({basename, dom, ...props}) {
-    return {
-      render({basename, dom}) {
-        const SubApp = render(props, basename);
-        const node = dom.querySelector('#' + MOUNT_ID) || dom;
-
-        bootstrap(SubApp, node);
-      },
-      destroy({ dom }) {
-        const node = dom.querySelector('#' + MOUNT_ID) || dom;
-
-        if (node) {
-          unmountComponentAtNode(node);
-        }
-      },
-      SubModuleComponent: (props) => {
-        const SubApp = render(props, basename);
-
-        return createPortal(<SubApp />, dom.querySelector('#' + MOUNT_ID)  || dom);
-      },
-      test-dynamic-key: () => {
-        const SubApp = render(props, basename);
-
-        return createPortal(<SubApp />, dom.querySelector('#' + MOUNT_ID)  || dom);
-      }
-    }
-  };
-  if (typeof __GARFISH_EXPORTS__ !== 'undefined') {
-    __GARFISH_EXPORTS__.provider = provider;
-  }
-"
-`;