@modern-js/plugin-garfish 1.4.2 → 1.4.4-beta.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @modern-js/plugin-garfish
 
+## 1.4.3
+
+### Patch Changes
+
+- e27cefee: feat(plugin-garfish): compatible garfish hooks
+- a4dd12c9: feat(plugin-garfish): support automatic parameter transfer
+- Updated dependencies [5bf5868d]
+  - @modern-js/utils@1.3.5
+
 ## 1.4.2
 
 ### Patch Changes

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

@@ -6,257 +6,248 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import path from 'path';
 import { createRuntimeExportsUtils, PLUGIN_SCHEMAS } from '@modern-js/utils';
-import { createPlugin, useAppContext, useResolvedConfigContext } from '@modern-js/core';
 import { logger } from "../util";
 import { getRuntimeConfig, makeProvider, makeRenderFunction, setRuntimeConfig } from "./utils";
 export const externals = {
   'react-dom': 'react-dom',
   react: 'react'
 };
-export const resolvedConfig = async config => {
-  const {
-    resolved
-  } = config;
-  const {
-    masterApp,
-    router
-  } = getRuntimeConfig(resolved);
-  const nConfig = {
-    resolved: _objectSpread({}, resolved)
-  };
-
-  if (masterApp) {
-    var _router$historyOption;
-
-    // basename does not exist use router's basename
-    setRuntimeConfig(nConfig.resolved, 'masterApp', Object.assign(typeof masterApp === 'object' ? _objectSpread({}, masterApp) : {}, {
-      basename: (router === null || router === void 0 ? void 0 : (_router$historyOption = router.historyOptions) === null || _router$historyOption === void 0 ? void 0 : _router$historyOption.basename) || '/'
-    }));
-  }
-
-  logger(`resolvedConfig`, {
-    runtime: nConfig.resolved.runtime,
-    deploy: nConfig.resolved.deploy,
-    server: nConfig.resolved.server
-  });
-  return nConfig;
-};
-export const initializer = ( // eslint-disable-next-line @typescript-eslint/no-shadow
-{
-  resolvedConfig,
-  validateSchema
-}, {
+export default (({
   runtimePluginName: _runtimePluginName = '@modern-js/runtime/plugins',
-  defaultEnableHtmlEntry: _defaultEnableHtmlEntry = true,
-  defaultExternalBasicLibrary: _defaultExternalBasicLibrary = false
-}) => () => {
-  let pluginsExportsUtils;
-  let runtimeExportsUtils;
-  return {
-    validateSchema,
-    resolvedConfig,
-
-    config() {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const config = useAppContext();
-      pluginsExportsUtils = createRuntimeExportsUtils(config.internalDirectory, 'plugins');
-      runtimeExportsUtils = createRuntimeExportsUtils(config.internalDirectory, 'index');
-      return {
-        source: {
-          alias: {
-            '@modern-js/runtime/plugins': pluginsExportsUtils.getPath()
-          }
-        },
-        tools: {
-          webpack: (webpackConfig, {
-            chain,
-            webpack,
-            env: _env = process.env.NODE_ENV || 'development'
-          }) => {
-            var _resolveOptions$deplo, _resolveWebpackConfig;
+  mfPackagePath: _mfPackagePath = path.resolve(__dirname, '../../../../')
+} = {}) => ({
+  name: '@modern-js/plugin-garfish',
+  setup: ({
+    useAppContext,
+    useResolvedConfigContext
+  }) => {
+    let pluginsExportsUtils;
+    let runtimeExportsUtils;
+    return {
+      validateSchema() {
+        return PLUGIN_SCHEMAS['@modern-js/plugin-garfish'];
+      },
+
+      resolvedConfig: async config => {
+        const {
+          resolved
+        } = config;
+        const {
+          masterApp,
+          router
+        } = getRuntimeConfig(resolved);
+        const nConfig = {
+          resolved: _objectSpread({}, resolved)
+        };
 
-            // eslint-disable-next-line react-hooks/rules-of-hooks
-            const resolveOptions = useResolvedConfigContext();
+        if (masterApp) {
+          var _router$historyOption;
 
-            if (resolveOptions !== null && resolveOptions !== void 0 && (_resolveOptions$deplo = resolveOptions.deploy) !== null && _resolveOptions$deplo !== void 0 && _resolveOptions$deplo.microFrontend) {
-              var _resolveOptions$serve, _resolveOptions$deplo2, _resolveOptions$deplo3;
+          // basename does not exist use router's basename
+          setRuntimeConfig(nConfig.resolved, 'masterApp', Object.assign(typeof masterApp === 'object' ? _objectSpread({}, masterApp) : {}, {
+            basename: (router === null || router === void 0 ? void 0 : (_router$historyOption = router.historyOptions) === null || _router$historyOption === void 0 ? void 0 : _router$historyOption.basename) || (router === null || router === void 0 ? void 0 : router.basename) || '/'
+          }));
+        }
 
-              chain.output.libraryTarget('umd');
+        logger(`resolvedConfig`, {
+          runtime: nConfig.resolved.runtime,
+          deploy: nConfig.resolved.deploy,
+          server: nConfig.resolved.server
+        });
+        return nConfig;
+      },
 
-              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);
-              } // add comments avoid sourcemap abnormal
+      config() {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const config = useAppContext(); // eslint-disable-next-line react-hooks/rules-of-hooks
 
+        const resolveOptions = useResolvedConfigContext();
+        pluginsExportsUtils = createRuntimeExportsUtils(config.internalDirectory, 'plugins');
+        runtimeExportsUtils = createRuntimeExportsUtils(config.internalDirectory, 'index');
+        return {
+          source: {
+            alias: {
+              '@modern-js/runtime/plugins': pluginsExportsUtils.getPath()
+            }
+          },
+          tools: {
+            webpack: (webpackConfig, {
+              chain,
+              webpack,
+              env: _env = process.env.NODE_ENV || 'development'
+            }) => {
+              var _resolveOptions$deplo, _resolveWebpackConfig;
+
+              if (resolveOptions !== null && resolveOptions !== void 0 && (_resolveOptions$deplo = resolveOptions.deploy) !== null && _resolveOptions$deplo !== void 0 && _resolveOptions$deplo.microFrontend) {
+                var _resolveOptions$serve, _resolveOptions$deplo2, _resolveOptions$deplo3;
+
+                chain.output.libraryTarget('umd');
+                chain.devServer.headers({
+                  'Access-Control-Allow-Origin': '*'
+                });
 
-              if (webpack.BannerPlugin) {
-                chain.plugin('banner').use(webpack.BannerPlugin, [{
-                  banner: 'Micro front-end'
-                }]);
-              }
+                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);
+                } // add comments avoid sourcemap abnormal
 
-              const {
-                enableHtmlEntry = _defaultEnableHtmlEntry,
-                externalBasicLibrary = _defaultExternalBasicLibrary
-              } = typeof (resolveOptions === null || resolveOptions === void 0 ? void 0 : (_resolveOptions$deplo2 = resolveOptions.deploy) === null || _resolveOptions$deplo2 === void 0 ? void 0 : _resolveOptions$deplo2.microFrontend) === 'object' ? resolveOptions === null || resolveOptions === void 0 ? void 0 : (_resolveOptions$deplo3 = resolveOptions.deploy) === null || _resolveOptions$deplo3 === void 0 ? void 0 : _resolveOptions$deplo3.microFrontend : {}; // external
 
-              if (externalBasicLibrary) {
-                chain.externals(externals);
-              } // use html mode
+                if (webpack.BannerPlugin) {
+                  chain.plugin('banner').use(webpack.BannerPlugin, [{
+                    banner: 'Micro front-end'
+                  }]);
+                }
 
+                const {
+                  enableHtmlEntry = true,
+                  externalBasicLibrary = false
+                } = typeof (resolveOptions === null || resolveOptions === void 0 ? void 0 : (_resolveOptions$deplo2 = resolveOptions.deploy) === null || _resolveOptions$deplo2 === void 0 ? void 0 : _resolveOptions$deplo2.microFrontend) === 'object' ? resolveOptions === null || resolveOptions === void 0 ? void 0 : (_resolveOptions$deplo3 = resolveOptions.deploy) === null || _resolveOptions$deplo3 === void 0 ? void 0 : _resolveOptions$deplo3.microFrontend : {}; // external
 
-              if (!enableHtmlEntry) {
-                chain.output.filename('index.js');
-                chain.plugins.delete('html-main');
-                chain.optimization.runtimeChunk(false);
-                chain.optimization.splitChunks({
-                  chunks: 'async'
-                });
+                if (externalBasicLibrary) {
+                  chain.externals(externals);
+                } // use html mode
+
+
+                if (!enableHtmlEntry) {
+                  chain.output.filename('index.js');
+                  chain.plugins.delete('html-main');
+                  chain.optimization.runtimeChunk(false);
+                  chain.optimization.splitChunks({
+                    chunks: 'async'
+                  });
+                }
               }
-            }
 
-            const resolveWebpackConfig = chain.toConfig();
-            logger('webpackConfig', {
-              output: resolveWebpackConfig.output,
-              externals: resolveWebpackConfig.externals,
-              env: _env,
-              alias: (_resolveWebpackConfig = resolveWebpackConfig.resolve) === null || _resolveWebpackConfig === void 0 ? void 0 : _resolveWebpackConfig.alias
-            });
+              const resolveWebpackConfig = chain.toConfig();
+              logger('webpackConfig', {
+                output: resolveWebpackConfig.output,
+                externals: resolveWebpackConfig.externals,
+                env: _env,
+                alias: (_resolveWebpackConfig = resolveWebpackConfig.resolve) === null || _resolveWebpackConfig === void 0 ? void 0 : _resolveWebpackConfig.alias
+              });
+            }
           }
+        };
+      },
+
+      addRuntimeExports() {
+        const addExportStatement = `export { default as garfish, default as masterApp } from '${_mfPackagePath}'`;
+        logger('exportStatement', addExportStatement);
+        pluginsExportsUtils.addExport(addExportStatement);
+        runtimeExportsUtils.addExport(`export * from '${_mfPackagePath}'`);
+      },
+
+      modifyEntryImports({
+        entrypoint,
+        imports
+      }) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const config = useResolvedConfigContext();
+        const {
+          masterApp
+        } = getRuntimeConfig(config);
+
+        if (masterApp) {
+          imports.push({
+            value: _runtimePluginName,
+            specifiers: [{
+              imported: 'garfish'
+            }]
+          });
+          imports.push({
+            value: _runtimePluginName,
+            specifiers: [{
+              imported: 'masterApp'
+            }]
+          });
         }
-      };
-    },
-
-    addRuntimeExports() {
-      const mfPackage = path.resolve(__dirname, '../../../../');
-      const addExportStatement = `export { default as garfish, default as masterApp } from '${mfPackage}'`;
-      logger('exportStatement', addExportStatement);
-      pluginsExportsUtils.addExport(addExportStatement);
-      runtimeExportsUtils.addExport(`export * from '${mfPackage}'`);
-    },
-
-    modifyEntryImports({
-      entrypoint,
-      imports
-    }) {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const config = useResolvedConfigContext();
-      const {
-        masterApp
-      } = getRuntimeConfig(config);
-
-      if (masterApp) {
-        imports.push({
-          value: _runtimePluginName,
-          specifiers: [{
-            imported: 'garfish'
-          }]
-        });
+
         imports.push({
-          value: _runtimePluginName,
+          value: 'react-dom',
           specifiers: [{
-            imported: 'masterApp'
+            imported: 'unmountComponentAtNode'
+          }, {
+            imported: 'createPortal'
           }]
         });
-      }
-
-      imports.push({
-        value: 'react-dom',
-        specifiers: [{
-          imported: 'unmountComponentAtNode'
-        }, {
-          imported: 'createPortal'
-        }]
-      });
-      return {
-        imports,
-        entrypoint
-      };
-    },
-
-    modifyEntryRuntimePlugins({
-      entrypoint,
-      plugins
-    }) {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const config = useResolvedConfigContext();
-      const {
-        masterApp
-      } = getRuntimeConfig(config);
-
-      if (masterApp) {
-        logger('garfishPlugin options', masterApp);
-        plugins.push({
-          name: 'garfish',
-          args: 'masterApp',
-          options: masterApp === true ? JSON.stringify({}) : JSON.stringify(masterApp)
-        });
-      }
+        return {
+          imports,
+          entrypoint
+        };
+      },
 
-      return {
+      modifyEntryRuntimePlugins({
         entrypoint,
         plugins
-      };
-    },
-
-    modifyEntryRenderFunction({
-      entrypoint,
-      code
-    }) {
-      var _config$deploy;
-
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const config = useResolvedConfigContext();
+      }) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const config = useResolvedConfigContext();
+        const {
+          masterApp
+        } = getRuntimeConfig(config);
+
+        if (masterApp) {
+          logger('garfishPlugin options', masterApp);
+          plugins.push({
+            name: 'garfish',
+            args: 'masterApp',
+            options: masterApp === true ? JSON.stringify({}) : JSON.stringify(masterApp)
+          });
+        }
 
-      if (!(config !== null && config !== void 0 && (_config$deploy = config.deploy) !== null && _config$deploy !== void 0 && _config$deploy.microFrontend)) {
         return {
           entrypoint,
-          code
+          plugins
         };
-      }
+      },
 
-      const nCode = makeRenderFunction(code);
-      logger('makeRenderFunction', nCode);
-      return {
+      modifyEntryRenderFunction({
         entrypoint,
-        code: nCode
-      };
-    },
-
-    modifyEntryExport({
-      entrypoint,
-      exportStatement
-    }) {
-      var _config$deploy2;
-
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const config = useResolvedConfigContext();
-
-      if (config !== null && config !== void 0 && (_config$deploy2 = config.deploy) !== null && _config$deploy2 !== void 0 && _config$deploy2.microFrontend) {
-        const exportStatementCode = makeProvider();
-        logger('exportStatement', exportStatementCode);
+        code
+      }) {
+        var _config$deploy;
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const config = useResolvedConfigContext();
+
+        if (!(config !== null && config !== void 0 && (_config$deploy = config.deploy) !== null && _config$deploy !== void 0 && _config$deploy.microFrontend)) {
+          return {
+            entrypoint,
+            code
+          };
+        }
+
+        const nCode = makeRenderFunction(code);
+        logger('makeRenderFunction', nCode);
         return {
           entrypoint,
-          exportStatement: exportStatementCode
+          code: nCode
         };
-      }
+      },
 
-      return {
+      modifyEntryExport({
         entrypoint,
         exportStatement
-      };
-    }
+      }) {
+        var _config$deploy2;
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const config = useResolvedConfigContext();
+
+        if (config !== null && config !== void 0 && (_config$deploy2 = config.deploy) !== null && _config$deploy2 !== void 0 && _config$deploy2.microFrontend) {
+          const exportStatementCode = makeProvider();
+          logger('exportStatement', exportStatementCode);
+          return {
+            entrypoint,
+            exportStatement: exportStatementCode
+          };
+        }
 
-  };
-};
-export default createPlugin(initializer({
-  resolvedConfig,
+        return {
+          entrypoint,
+          exportStatement
+        };
+      }
 
-  validateSchema() {
-    return PLUGIN_SCHEMAS['@modern-js/plugin-garfish'];
+    };
   }
-
-}, {
-  runtimePluginName: '@modern-js/runtime/plugins'
-}), {
-  name: '@modern-js/plugin-garfish'
-});
+}));

package/dist/js/modern/cli/utils.js

@@ -1,11 +1,13 @@
 export const makeProvider = () => `
-export const provider = function ({basename, dom, ...props}) {
+export const provider = function ({basename, dom}) {
   return {
-    render({basename, dom}) {
-      console.log('App.config', App.config);
-      const SubApp = render({props, basename});
+    render({basename, dom, props}) {
+      const SubApp = render({ props, basename });
       const node = dom.querySelector('#' + MOUNT_ID) || dom;
-      bootstrap(SubApp, node);
+      const App = function () {
+        return React.createElement(SubApp, props)
+      };
+      bootstrap(App, node);
     },
     destroy({ dom }) {
       const node = dom.querySelector('#' + MOUNT_ID) || dom;
@@ -70,7 +72,7 @@ export function getRuntimeConfig(config) {
     return config === null || config === void 0 ? void 0 : (_config$runtime2 = config.runtime) === null || _config$runtime2 === void 0 ? void 0 : _config$runtime2.features;
   }
 
-  return config === null || config === void 0 ? void 0 : config.runtime;
+  return (config === null || config === void 0 ? void 0 : config.runtime) || {};
 } // support legacy config
 
 export function setRuntimeConfig(config, key, value) {

package/dist/js/modern/runtime/index.js

@@ -1,3 +1,3 @@
 export { default } from "./plugin";
-export { useModuleApps, useMicroApps, useModuleApp } from "./useModuleApps";
+export { useModuleApps, useModuleApp } from "./useModuleApps";
 export { default as Garfish } from 'garfish';

package/dist/js/modern/runtime/plugin.js

@@ -83,8 +83,7 @@ const GarfishPlugin = config => {
               return /*#__PURE__*/React.createElement('div');
             },
             apps: new Proxy({}, {
-              get(_target, _p) {
-                logger('apps init Component Render', _p);
+              get() {
                 return () => /*#__PURE__*/React.createElement('div');
               }
 

package/dist/js/modern/runtime/useModuleApps.js

@@ -1,12 +1,36 @@
-import { useContext } from 'react';
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React, { useContext } from 'react';
 import { logger } from "../util";
 import { GarfishContext } from "./utils/Context";
 export function useModuleApps() {
   const {
-    apps
+    apps,
+    MApp,
+    appInfoList
   } = useContext(GarfishContext);
-  logger('call useModuleApps', apps);
-  return apps;
+  logger('call useModuleApps', _objectSpread({
+    MApp,
+    apps: appInfoList
+  }, apps));
+  const Info = new Proxy(_objectSpread({
+    MApp,
+    apps: appInfoList
+  }, apps), {
+    get(target, p, receiver) {
+      if (typeof p === 'string' && p in target) {
+        return Reflect.get(target, p, receiver);
+      }
+
+      return () => /*#__PURE__*/React.createElement('div');
+    }
+
+  });
+  return Info;
 }
 export function useModuleApp() {
   const {
@@ -14,21 +38,4 @@ export function useModuleApp() {
   } = useContext(GarfishContext);
   logger('call useModuleApps', MApp);
   return MApp;
-}
-export function useMicroApps() {
-  const {
-    MApp,
-    appInfoList,
-    apps
-  } = useContext(GarfishContext);
-  logger('call useMicroApps', {
-    MApp,
-    apps: appInfoList,
-    Components: apps
-  });
-  return {
-    MApp,
-    apps: appInfoList,
-    Components: apps
-  };
 }