@modern-js/plugin-garfish 1.4.5 → 1.4.8

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @modern-js/plugin-garfish
 
+## 1.4.8
+
+### Patch Changes
+
+- 36e702f8: fix(plugin-garfish): fix useModules component props type and cors config
+- 04ae5262: chore: bump @modern-js/utils to v1.4.1 in dependencies
+- 60f7d8bf: feat: add tests dir to npmignore
+- e4cec1ce: types: fix config hook type
+- d558d4b5: fix: should not import from @modern-js/utils
+- Updated dependencies [b8599d09]
+- Updated dependencies [6cffe99d]
+- Updated dependencies [04ae5262]
+- Updated dependencies [60f7d8bf]
+- Updated dependencies [3bf4f8b0]
+  - @modern-js/utils@1.5.0
+  - @modern-js/plugin-router@1.2.10
+  - @modern-js/runtime-core@1.4.2
+
+## 1.4.6
+
+### Patch Changes
+
+- 17d0cc46: feat: prebundle lodash to @modern-js/utils/lodash
+- Updated dependencies [485375ae]
+- Updated dependencies [77ff9754]
+- Updated dependencies [d2d1d6b2]
+- Updated dependencies [07a4887e]
+- Updated dependencies [ea2ae711]
+- Updated dependencies [17d0cc46]
+- Updated dependencies [d2d1d6b2]
+  - @modern-js/plugin-router@1.2.9
+  - @modern-js/runtime-core@1.4.1
+  - @modern-js/utils@1.4.0
+
 ## 1.4.5
 
 ### Patch Changes

package/dist/js/modern/cli/index.js

@@ -71,6 +71,11 @@ export default (({
             }
           },
           tools: {
+            devServer: {
+              headers: {
+                'Access-Control-Allow-Origin': '*'
+              }
+            },
             webpack: (webpackConfig, {
               chain,
               webpack,
@@ -82,9 +87,6 @@ export default (({
                 var _resolveOptions$serve, _resolveOptions$deplo2, _resolveOptions$deplo3;
 
                 chain.output.libraryTarget('umd');
-                chain.devServer.headers({
-                  'Access-Control-Allow-Origin': '*'
-                });
 
                 if (resolveOptions !== null && resolveOptions !== void 0 && (_resolveOptions$serve = resolveOptions.server) !== null && _resolveOptions$serve !== void 0 && _resolveOptions$serve.port) {
                   chain.output.publicPath(_env === 'development' ? `//localhost:${resolveOptions.server.port}/` : webpackConfig.output.publicPath);

package/dist/js/modern/runtime/utils/apps.js

@@ -37,6 +37,7 @@ function getAppInstance(options, appInfo, manifest) {
         appInstance: null,
         domId: generateSubAppContainerKey(appInfo)
       };
+      this.unregisterHistoryListener = void 0;
     }
 
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -114,7 +115,7 @@ function getAppInstance(options, appInfo, manifest) {
           await (appInstance === null || appInstance === void 0 ? void 0 : appInstance.mount());
         }
 
-        history === null || history === void 0 ? void 0 : history.listen(() => {
+        this.unregisterHistoryListener = history === null || history === void 0 ? void 0 : history.listen(() => {
           if (locationHref !== history.location.pathname) {
             locationHref = history.location.pathname;
             const popStateEvent = new PopStateEvent('popstate');
@@ -134,6 +135,7 @@ function getAppInstance(options, appInfo, manifest) {
       const {
         appInstance
       } = this.state;
+      this.unregisterHistoryListener();
 
       if (appInstance) {
         const {

package/dist/js/modern/util.js

@@ -1,3 +1,6 @@
+/**
+ * Tips: this package will be bundled and running in the browser, do not import from `@modern-js/utils`.
+ */
 import createDebug from 'debug';
 export const logger = createDebug('modern-js:plugin-garfish');
 export const SUBMODULE_APP_COMPONENT_KEY = 'SubModuleComponent';

package/dist/js/node/cli/index.js

@@ -86,6 +86,11 @@ var _default = ({
             }
           },
           tools: {
+            devServer: {
+              headers: {
+                'Access-Control-Allow-Origin': '*'
+              }
+            },
             webpack: (webpackConfig, {
               chain,
               webpack,
@@ -97,9 +102,6 @@ var _default = ({
                 var _resolveOptions$serve, _resolveOptions$deplo2, _resolveOptions$deplo3;
 
                 chain.output.libraryTarget('umd');
-                chain.devServer.headers({
-                  'Access-Control-Allow-Origin': '*'
-                });
 
                 if (resolveOptions !== null && resolveOptions !== void 0 && (_resolveOptions$serve = resolveOptions.server) !== null && _resolveOptions$serve !== void 0 && _resolveOptions$serve.port) {
                   chain.output.publicPath(_env === 'development' ? `//localhost:${resolveOptions.server.port}/` : webpackConfig.output.publicPath);

package/dist/js/node/runtime/utils/apps.js

@@ -43,6 +43,7 @@ function getAppInstance(options, appInfo, manifest) {
         appInstance: null,
         domId: (0, _util.generateSubAppContainerKey)(appInfo)
       };
+      this.unregisterHistoryListener = void 0;
     }
 
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -120,7 +121,7 @@ function getAppInstance(options, appInfo, manifest) {
           await (appInstance === null || appInstance === void 0 ? void 0 : appInstance.mount());
         }
 
-        history === null || history === void 0 ? void 0 : history.listen(() => {
+        this.unregisterHistoryListener = history === null || history === void 0 ? void 0 : history.listen(() => {
           if (locationHref !== history.location.pathname) {
             locationHref = history.location.pathname;
             const popStateEvent = new PopStateEvent('popstate');
@@ -140,6 +141,7 @@ function getAppInstance(options, appInfo, manifest) {
       const {
         appInstance
       } = this.state;
+      this.unregisterHistoryListener();
 
       if (appInstance) {
         const {

package/dist/js/node/util.js

@@ -11,6 +11,9 @@ var _debug = _interopRequireDefault(require("debug"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+/**
+ * Tips: this package will be bundled and running in the browser, do not import from `@modern-js/utils`.
+ */
 const logger = (0, _debug.default)('modern-js:plugin-garfish');
 exports.logger = logger;
 const SUBMODULE_APP_COMPONENT_KEY = 'SubModuleComponent';

package/dist/js/treeshaking/cli/index.js

@@ -94,6 +94,11 @@ export default (function () {
               }
             },
             tools: {
+              devServer: {
+                headers: {
+                  'Access-Control-Allow-Origin': '*'
+                }
+              },
               webpack: function webpack(webpackConfig, _ref3) {
                 var _resolveOptions$deplo, _resolveWebpackConfig;
 
@@ -106,9 +111,6 @@ export default (function () {
                   var _resolveOptions$serve, _resolveOptions$deplo2, _resolveOptions$deplo3;
 
                   chain.output.libraryTarget('umd');
-                  chain.devServer.headers({
-                    'Access-Control-Allow-Origin': '*'
-                  });
 
                   if (resolveOptions !== null && resolveOptions !== void 0 && (_resolveOptions$serve = resolveOptions.server) !== null && _resolveOptions$serve !== void 0 && _resolveOptions$serve.port) {
                     chain.output.publicPath(env === 'development' ? "//localhost:".concat(resolveOptions.server.port, "/") : webpackConfig.output.publicPath);

package/dist/js/treeshaking/runtime/utils/apps.js

@@ -76,6 +76,7 @@ function getAppInstance(options, appInfo, manifest) {
         appInstance: null,
         domId: generateSubAppContainerKey(appInfo)
       };
+      _this.unregisterHistoryListener = void 0;
       return _this;
     }
 
@@ -174,7 +175,7 @@ function getAppInstance(options, appInfo, manifest) {
                   return appInstance === null || appInstance === void 0 ? void 0 : appInstance.mount();
 
                 case 22:
-                  history === null || history === void 0 ? void 0 : history.listen(function () {
+                  this.unregisterHistoryListener = history === null || history === void 0 ? void 0 : history.listen(function () {
                     if (locationHref !== history.location.pathname) {
                       locationHref = history.location.pathname;
                       var popStateEvent = new PopStateEvent('popstate');
@@ -218,6 +219,7 @@ function getAppInstance(options, appInfo, manifest) {
               switch (_context2.prev = _context2.next) {
                 case 0:
                   appInstance = this.state.appInstance;
+                  this.unregisterHistoryListener();
 
                   if (appInstance) {
                     _appInfo = appInstance.appInfo;
@@ -231,7 +233,7 @@ function getAppInstance(options, appInfo, manifest) {
                     }
                   }
 
-                case 2:
+                case 3:
                 case "end":
                   return _context2.stop();
               }

package/dist/js/treeshaking/util.js

@@ -1,3 +1,6 @@
+/**
+ * Tips: this package will be bundled and running in the browser, do not import from `@modern-js/utils`.
+ */
 import createDebug from 'debug';
 export var logger = createDebug('modern-js:plugin-garfish');
 export var SUBMODULE_APP_COMPONENT_KEY = 'SubModuleComponent';

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

@@ -28,10 +28,11 @@ export declare type ModernGarfishConfig = {
 };
 export declare type MicroComponentProps = {
   loadable?: LoadableConfig;
+  [index: string]: any;
 };
 export declare type Config = Partial<Options> & ModernGarfishConfig;
-export declare type UseModuleApps = { [index in 'apps' | string]: index extends 'apps' ? ModulesInfo : React.FC<any> } & {
-  readonly MApp: React.FC<any>;
+export declare type UseModuleApps = { [index in 'apps' | string]: index extends 'apps' ? ModulesInfo : React.FC<MicroComponentProps> } & {
+  readonly MApp: React.FC<MicroComponentProps>;
   readonly apps: ModulesInfo;
 };
 export declare function useModuleApps(): UseModuleApps;

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

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

package/dist/types/util.d.ts

@@ -1,3 +1,6 @@
+/**
+ * Tips: this package will be bundled and running in the browser, do not import from `@modern-js/utils`.
+ */
 import createDebug from 'debug';
 import { ModuleInfo } from './runtime';
 export declare const logger: createDebug.Debugger;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "1.4.5",
+  "version": "1.4.8",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/runtime/index.d.ts",
   "typesVersions": {
@@ -50,20 +50,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7",
-    "@modern-js/utils": "^1.3.7",
+    "@modern-js/utils": "^1.5.0",
     "@types/debug": "^4.1.7",
     "@types/react-loadable": "^5.5.6",
     "debug": "^4.3.2",
     "garfish": "^1.3.3",
     "hoist-non-react-statics": "^3.3.2",
-    "lodash": "^4.17.21",
     "react-loadable": "^5.5.0"
   },
   "devDependencies": {
-    "@modern-js/core": "1.6.1",
-    "@modern-js/plugin-router": "^1.2.8",
-    "@modern-js/runtime-core": "1.4.0",
-    "@modern-js/types": "^1.3.6",
+    "@modern-js/core": "1.8.0",
+    "@modern-js/plugin-router": "^1.2.10",
+    "@modern-js/runtime-core": "1.4.2",
+    "@modern-js/types": "^1.5.0",
     "@scripts/build": "0.0.0",
     "@scripts/jest-config": "0.0.0",
     "@testing-library/jest-dom": "^5.16.1",
@@ -72,7 +71,6 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^26.0.24",
-    "@types/lodash": "^4.14.181",
     "@types/node": "^14",
     "@types/react": "^17",
     "@types/react-dom": "^17",
@@ -85,8 +83,8 @@
     "webpack-chain": "^6.5.1"
   },
   "peerDependencies": {
-    "@modern-js/plugin-router": "^1.2.8",
-    "@modern-js/runtime-core": "^1.4.0",
+    "@modern-js/plugin-router": "^1.2.10",
+    "@modern-js/runtime-core": "^1.4.2",
     "react": "^17"
   },
   "sideEffects": false,

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

@@ -1,89 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`plugin-garfish cli cli addRuntimeExports 1`] = `
-Array [
-  "export { default as garfish, default as masterApp } from '@modern-js/test/plugin-garfish'",
-  "export * from '@modern-js/test/plugin-garfish'",
-]
-`;
-
-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,239 +0,0 @@
-import '@testing-library/jest-dom';
-import { Hooks, manager, ToRunners } from '@modern-js/core';
-import WebpackChain from 'webpack-chain';
-import GarfishPlugin, { externals } from '../src/cli';
-import { getRuntimeConfig, makeRenderFunction, setRuntimeConfig } from '../src/cli/utils';
-
-const addExportList = [];
-jest.mock('@modern-js/utils', () => {
-  const originalModule = jest.requireActual('@modern-js/utils');
-  return {
-    __esModule: true,
-    ...originalModule,
-    createRuntimeExportsUtils: ()=>({
-      addExport: (val: any)=> {
-        addExportList.push(val);
-      },
-      getPath: ()=> 'test',
-    }),
-  }
-});
-
-describe('plugin-garfish cli', () => {
-  test('cli garfish basename', async () => {
-    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: '/test' }
-          },
-          masterApp: {}
-        },
-      }
-    } as any);
-
-    expect(configHistoryOptions.resolved.runtime.masterApp.basename).toBe('/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', ()=>{
-    const runtimeConfig = getRuntimeConfig({
-      runtime: {
-        masterApp: {
-          basename: '/test'
-        }
-      }
-    });
-    expect(runtimeConfig).toMatchSnapshot();
-  });
-
-  test('cli get runtime features config', ()=>{
-    const runtimeConfig = getRuntimeConfig({
-      runtime: {
-        masterApp: {
-          basename: '/test'
-        },
-        features: {
-          masterApp: {
-            basename: '/test2'
-          }
-        }
-      }
-    });
-
-    expect(runtimeConfig).toMatchSnapshot();
-  });
-
-  test('cli set runtime config', ()=>{
-    const runtimeConfig = {
-      runtime: {
-        masterApp: {
-          basename: '/test'
-        }
-      }
-    };
-
-    setRuntimeConfig(runtimeConfig, 'masterApp', true);
-
-    expect(runtimeConfig.runtime).toMatchSnapshot();
-  });
-
-  test('cli set runtime features config', ()=>{
-    const runtimeConfig = {
-      runtime: {
-        features: {
-          masterApp: {
-            basename: '/test'
-          }
-        }
-      }
-    };
-
-    setRuntimeConfig(runtimeConfig, 'masterApp', 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 resolveConfig: any = {
-      deploy: {
-        microFrontend: {
-          externalBasicLibrary: true,
-          enableHtmlEntry: false,
-        },
-      },
-      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,
-      webpack: jest.fn(),
-      env: 'development'
-    });
-
-    const generateConfig = webpackConfig.toConfig();
-    expect(generateConfig).toMatchSnapshot();
-    expect(generateConfig).toMatchObject({
-      output: {
-        libraryTarget: 'umd',
-        publicPath: '//localhost:8080/',
-        filename: 'index.js'
-      },
-      externals,
-      optimization: { runtimeChunk: false, splitChunks: { chunks: 'async' } }
-    });
-  })
-
-  test('webpack config default micro config', async ()=>{
-    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,
-      webpack: jest.fn(),
-      env: 'development'
-    });
-
-    const generateConfig = webpackConfig.toConfig();
-    expect(generateConfig).toMatchSnapshot();
-    expect(generateConfig).toMatchObject({
-      output: {
-        libraryTarget: 'umd',
-        publicPath: '//localhost:8080/'
-      }
-    });
-    expect(generateConfig.externals).toBeUndefined();
-    expect(generateConfig.output.filename).toBeUndefined();
-  });
-
-  test('cli addRuntimeExports', async ()=>{
-    const resolveConfig: any = {};
-    const mfPackagePath = '@modern-js/test/plugin-garfish';
-    const plugin = GarfishPlugin({
-      mfPackagePath,
-    });
-
-    const lifecycle = await plugin.setup({
-      useResolvedConfigContext: () => resolveConfig,
-      useAppContext: ()=>({
-        internalDirectory: 'test'
-      }),
-    } as any);
-    
-    lifecycle && lifecycle.config();
-    lifecycle && lifecycle.addRuntimeExports()
-    expect(addExportList).toMatchSnapshot();
-  });
-});

package/tests/hooks.test.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { createApp } from '@modern-js/runtime-core';
-import '@testing-library/jest-dom';
-
-import ModernGarfishPlugin, {
-  useModuleApp,
-  useModuleApps,
-} from '../src/runtime';
-
-global.React = React;
-
-const dashboardPath = 'http://garfish-mock.com/dashboard';
-const tableListPath = 'http://garfish-mock.com/table-list';
-
-describe('plugin-garfish', () => {
-  test('legacyModule hooks params', async () => {
-    const dashBoardModuleInfo = {
-      name: 'Dashboard',
-      entry: dashboardPath,
-    };
-    const tableListModuleInfo = {
-      name: 'TableList',
-      entry: tableListPath,
-    };
-
-    const microFrontendConfig = {
-      apps: [tableListModuleInfo, dashBoardModuleInfo],
-      LoadingComponent() {
-        return <div data-testid="loading-id">loading</div>;
-      },
-    };
-
-    const App = () => {
-      const { MApp, apps, Dashboard, TableList } = useModuleApps();
-
-
-      if (apps.length > 0) {
-        expect(apps[0].name).toBe(tableListModuleInfo.name);
-        expect(apps[0].entry).toBe(tableListModuleInfo.entry);
-        expect(apps[0].Component === TableList).toBeTruthy();
-
-        expect(apps[1].name).toBe(dashBoardModuleInfo.name);
-        expect(apps[1].entry).toBe(dashBoardModuleInfo.entry);
-        expect(apps[1].Component === Dashboard).toBeTruthy();
-      }
-
-      return <div></div>;
-    };
-
-    const AppWrapper = createApp({
-      plugins: [ModernGarfishPlugin(microFrontendConfig)],
-    })(App);
-
-    render(<AppWrapper />);
-  });
-});

package/tests/index.test.tsx

@@ -1,252 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { createApp } from '@modern-js/runtime-core';
-import fetchMock from 'jest-fetch-mock';
-import '@testing-library/jest-dom';
-// https://stackoverflow.com/questions/49034907/fetch-mock-does-not-mock-my-fetch
-import {
-  Link,
-  Route,
-  Switch,
-  useLocation,
-  MemoryRouter,
-} from '@modern-js/plugin-router';
-import ModernGarfishPlugin, { useModuleApp } from '../src/runtime';
-import { useModuleApps } from '../src';
-import {
-  TABLE_LIST_ESCAPE_NODE,
-  TABLE_LIST_HTML,
-  TABLE_LIST_ROOT_NODE,
-} from './resource/table';
-import {
-  DASHBOARD_ESCAPE_NODE,
-  DASHBOARD_HTML,
-  DASHBOARD_ROOT_NODE,
-} from './resource/dashboard';
-import {
-  USER_INFO_ESCAPE_NODE,
-  USER_INFO_HTML,
-  USER_INFO_ROOT_NODE,
-} from './resource/userInfo';
-
-global.React = React;
-global.fetch = fetchMock;
-
-function waitFor(delay = 200) {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve(false);
-    }, delay);
-  });
-}
-
-const dashboardPath = 'http://garfish-mock.com/dashboard';
-const tableListPath = 'http://garfish-mock.com/table-list';
-const userInfoPath = 'http://garfish-mock.com/user-info';
-
-describe('plugin-garfish', () => {
-  beforeEach(() => {
-    // https://www.npmjs.com/package/jest-fetch-mock
-    fetchMock.mockIf(/^https?:\/\/garfish-mock.com.*$/, req => {
-      if (req.url.endsWith('/dashboard')) {
-        return Promise.resolve({
-          body: DASHBOARD_HTML,
-          headers: {
-            'Content-Type': 'text/html',
-          },
-        });
-      } else if (req.url.endsWith('/table-list')) {
-        return Promise.resolve({
-          body: TABLE_LIST_HTML,
-          headers: {
-            'Content-Type': 'text/html',
-          },
-        });
-      } else if (req.url.endsWith('/user-info')) {
-        return Promise.resolve({
-          body: USER_INFO_HTML,
-          headers: {
-            'Content-Type': 'text/html',
-          },
-        });
-      } else {
-        return Promise.resolve({
-          status: 404,
-          body: 'Not Found',
-        });
-      }
-    });
-
-    fetchMock.doMock();
-  });
-
-  // testing-library.com/docs/example-react-router/
-  test('useModuleApps hooks', async () => {
-    const dashBoardModuleInfo = {
-      name: 'Dashboard',
-      entry: dashboardPath,
-    };
-    const tableListModuleInfo = {
-      name: 'TableList',
-      entry: tableListPath,
-    };
-    const userInfo = {
-      name: 'UserInfo',
-      activeWhen: '/user-info',
-      entry: userInfoPath,
-    };
-
-    const microFrontendConfig = {
-      apps: [tableListModuleInfo, dashBoardModuleInfo, userInfo],
-      manifest: {
-        loadable: {
-          loading: ()=> {
-            return <div data-testid="loading-id">loading</div>;
-          }
-        },
-      },
-    };
-
-    const App = () => {
-      const HomeTitle = 'Micro home page';
-      const Home = () => <div data-testid="home-title">{HomeTitle}</div>;
-      const { Dashboard, TableList } = useModuleApps();
-
-      const LocationDisplay = () => {
-        const location = useLocation();
-        return <div data-testid="location-display">{location.pathname}</div>;
-      };
-
-      return (
-        <MemoryRouter>
-          <div id="app">
-            <Link to="/">home</Link>
-            <Link data-testid="dashboard-link" to="/dashboard">
-              dashboard
-            </Link>
-            <Link data-testid="table-list-link" to="/table-list">
-              table-list
-            </Link>
-            <Link data-testid="user-info-link" to="/user-info">
-              user-info
-            </Link>
-            <Switch>
-              <Route exact={true} path="/">
-                <Home />
-              </Route>
-              <Route path="/dashboard">
-                <Dashboard />
-              </Route>
-              <Route path="/table-list">
-                <TableList />
-              </Route>
-              <LocationDisplay />
-            </Switch>
-          </div>
-        </MemoryRouter>
-      );
-    };
-
-    const AppWrapper = createApp({
-      plugins: [ModernGarfishPlugin(microFrontendConfig)],
-    })(App);
-
-    const { unmount } = render(<AppWrapper />);
-    expect(screen.getByTestId('home-title')).toBeInTheDocument();
-    const leftClick = { button: 0 };
-    userEvent.click(screen.getByTestId('dashboard-link'), leftClick);
-    // expect(await screen.findByText('loading')).toBeInTheDocument();
-    expect(
-      await screen.findByText(DASHBOARD_ROOT_NODE.text),
-    ).toBeInTheDocument();
-    expect(
-      await screen.findByText(DASHBOARD_ESCAPE_NODE.text),
-    ).toBeInTheDocument();
-
-    userEvent.click(screen.getByTestId('table-list-link'), leftClick);
-    expect(screen.queryByText(DASHBOARD_ROOT_NODE.text)).toBeNull();
-    expect(screen.queryByText(DASHBOARD_ESCAPE_NODE.text)).toBeNull();
-    // expect(await screen.findByText('loading')).toBeInTheDocument();
-    expect(
-      await screen.findByText(TABLE_LIST_ROOT_NODE.text),
-    ).toBeInTheDocument();
-    expect(
-      await screen.findByText(TABLE_LIST_ESCAPE_NODE.text),
-    ).toBeInTheDocument();
-
-    unmount();
-  });
-
-  test('legacyModule hooks MApp', async () => {
-    const userInfo = {
-      name: 'UserInfo',
-      activeWhen: '/user-info',
-      entry: userInfoPath,
-    };
-    const tableList2 = {
-      name: 'tablist2',
-      activeWhen: '/table-list',
-      entry: tableListPath,
-    };
-
-    const microFrontendConfig = {
-      apps: [userInfo, tableList2],
-      LoadingComponent() {
-        return <div data-testid="loading-id">loading</div>;
-      },
-    };
-
-    const App = () => {
-      const { MApp } = useModuleApps();
-      const NMApp = useModuleApp();
-      expect(MApp).toBe(NMApp);
-
-      return (
-        <MemoryRouter>
-          <div id="app">
-            <Link to="/">home</Link>
-            <Link data-testid="dashboard-link" to="/dashboard">
-              dashboard
-            </Link>
-            <Link data-testid="table-list-link" to="/table-list">
-              table-list
-            </Link>
-            <Link data-testid="user-info-link" to="/user-info">
-              user-info
-            </Link>
-            <MApp />
-          </div>
-        </MemoryRouter>
-      );
-    };
-
-    const AppWrapper = createApp({
-      plugins: [ModernGarfishPlugin(microFrontendConfig)],
-    })(App);
-
-    const { unmount } = render(<AppWrapper />);
-
-    history.pushState(null, '', '/user-info');
-    expect(
-      await screen.findByText(USER_INFO_ROOT_NODE.text),
-    ).toBeInTheDocument();
-    expect(
-      await screen.findByText(USER_INFO_ESCAPE_NODE.text),
-    ).toBeInTheDocument();
-
-    history.pushState(null, '', '/table-list');
-    await waitFor();
-    expect(screen.queryByText(USER_INFO_ROOT_NODE.text)).toBeNull();
-    expect(screen.queryByText(USER_INFO_ESCAPE_NODE.text)).toBeNull();
-
-    expect(
-      await screen.findByText(TABLE_LIST_ROOT_NODE.text),
-    ).toBeInTheDocument();
-    expect(
-      await screen.findByText(TABLE_LIST_ESCAPE_NODE.text),
-    ).toBeInTheDocument();
-
-    unmount();
-  });
-});

package/tests/resource/dashboard.ts

@@ -1,44 +0,0 @@
-export const DASHBOARD_ROOT_NODE = {
-  text: 'dashboard content',
-  id: 'dashboard-id',
-};
-export const DASHBOARD_ESCAPE_NODE = {
-  text: 'dashboard-escape text',
-  id: 'dashboard-escape-id',
-};
-
-export const DASHBOARD_HTML = `
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <title>dashboard app</title>
-    </head>
-    <body>
-      <h1>dashboard</h1>
-      <div id="root"></div>
-      <script>
-        if (typeof __GARFISH_EXPORTS__ !=='undefined') {
-          __GARFISH_EXPORTS__.provider = ()=>{
-            return {
-              render ({ dom , basename }) {
-                let newContent = document.createElement('div');
-                newContent.innerHTML = "${DASHBOARD_ROOT_NODE.text}";
-                newContent.setAttribute('id','${DASHBOARD_ROOT_NODE.id}')
-                dom.querySelector('#root').appendChild(newContent);
-
-                let escapeNode = document.createElement('div');
-                escapeNode.innerHTML = "${DASHBOARD_ESCAPE_NODE.text}";
-                escapeNode.setAttribute('id',"${DASHBOARD_ESCAPE_NODE.id}")
-                document.body.appendChild(escapeNode);
-              },
-              destroy ({ dom , basename }){
-                document.body.removeChild(document.querySelector("#${DASHBOARD_ESCAPE_NODE.id}"));
-                dom.querySelector('#root').removeChild(dom.querySelector("#${DASHBOARD_ROOT_NODE.id}"));
-              }
-            }
-          }
-        }
-      </script>
-    </body>
-  </html>
-`;

package/tests/resource/table.ts

@@ -1,43 +0,0 @@
-export const TABLE_LIST_ROOT_NODE = {
-  text: 'table-list content',
-  id: 'table-list-id',
-};
-export const TABLE_LIST_ESCAPE_NODE = {
-  text: 'table-list escape text',
-  id: 'table-list-escape-id',
-};
-export const TABLE_LIST_HTML = `
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <title>table-list app</title>
-    </head>
-    <body>
-      <h1>table-list</h1>
-      <div id="root"></div>
-      <script>
-        if (typeof __GARFISH_EXPORTS__ !=='undefined') {
-          __GARFISH_EXPORTS__.provider = ()=>{
-            return {
-              render ({ dom , basename }) {
-                let newContent = document.createElement('div');
-                newContent.innerHTML = "${TABLE_LIST_ROOT_NODE.text}";
-                newContent.setAttribute('id','${TABLE_LIST_ROOT_NODE.id}')
-                dom.querySelector('#root').appendChild(newContent);
-
-                let escapeNode = document.createElement('div');
-                escapeNode.innerHTML = "${TABLE_LIST_ESCAPE_NODE.text}";
-                escapeNode.setAttribute('id',"${TABLE_LIST_ESCAPE_NODE.id}")
-                document.body.appendChild(escapeNode);
-              },
-              destroy ({ dom , basename }){
-                document.body.removeChild(document.querySelector("#${TABLE_LIST_ESCAPE_NODE.id}"));
-                dom.querySelector('#root').removeChild(dom.querySelector("#${TABLE_LIST_ROOT_NODE.id}"));
-              }
-            }
-          }
-        }
-      </script>
-    </body>
-  </html>
-`;

package/tests/resource/userInfo.ts

@@ -1,44 +0,0 @@
-export const USER_INFO_ROOT_NODE = {
-  text: 'userInfo content',
-  id: 'userInfo-id',
-};
-export const USER_INFO_ESCAPE_NODE = {
-  text: 'userInfo-escape text',
-  id: 'userInfo-escape-id',
-};
-
-export const USER_INFO_HTML = `
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <title>userInfo app</title>
-    </head>
-    <body>
-      <h1>userInfo</h1>
-      <div id="root"></div>
-      <script>
-        if (typeof __GARFISH_EXPORTS__ !=='undefined') {
-          __GARFISH_EXPORTS__.provider = ()=>{
-            return {
-              render ({ dom , basename }) {
-                let newContent = document.createElement('div');
-                newContent.innerHTML = "${USER_INFO_ROOT_NODE.text}";
-                newContent.setAttribute('id','${USER_INFO_ROOT_NODE.id}')
-                dom.querySelector('#root').appendChild(newContent);
-
-                let escapeNode = document.createElement('div');
-                escapeNode.innerHTML = "${USER_INFO_ESCAPE_NODE.text}";
-                escapeNode.setAttribute('id',"${USER_INFO_ESCAPE_NODE.id}")
-                document.body.appendChild(escapeNode);
-              },
-              destroy ({ dom , basename }){
-                document.body.removeChild(document.querySelector("#${USER_INFO_ESCAPE_NODE.id}"));
-                dom.querySelector('#root').removeChild(dom.querySelector("#${USER_INFO_ROOT_NODE.id}"));
-              }
-            }
-          }
-        }
-      </script>
-    </body>
-  </html>
-`;