Feat/remove umd (#254)

* feat: 🎸 remove umd

✅ Closes: #240

CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+See [https://github.com/ice-lab/icestark/releases](https://github.com/ice-lab/icestark/releases) for what has changed in each version of icestark.
+
+## 2.2.0
+
+- [feat] no need to use `umd` anymore. Migrate to `loadScriptMode` or use `setLibraryName` in sub-application. ([#240](https://github.com/ice-lab/icestark/issues/240))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/stark",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Icestark is a JavaScript library for multiple projects, Ice workbench solution.",
   "scripts": {
     "install:deps": "rm -rf node_modules && rm -rf ./packages/*/node_modules && yarn install && lerna exec -- npm install",
@@ -48,6 +48,7 @@
   },
   "dependencies": {
     "@ice/sandbox": "^1.0.4",
+    "lodash.isempty": "^4.4.0",
     "lodash.isequal": "^4.5.0",
     "path-to-regexp": "^1.7.0",
     "url-parse": "^1.1.9"

packages/icestark-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/stark-app",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "icestark-app is a JavaScript library for icestark, used by sub-application.",
   "scripts": {
     "build": "rm -rf lib && tsc",

packages/icestark-app/src/index.ts

@@ -6,3 +6,4 @@ export { default as registerAppLeave } from './registerAppLeave';
 export { default as appHistory } from './appHistory';
 export { default as isInIcestark } from './isInIcestark';
 export { default as AppLink } from './AppLink';
+export { default as setLibraryName } from './setLibraryName';

packages/icestark-app/src/setLibraryName.ts

@@ -0,0 +1,11 @@
+import { setCache } from './cache';
+
+const setLibraryName = (library: string): void => {
+  if (!library) {
+    console.error('[@ice/stark-app] setLibraryName: params can not be empty!');
+    return;
+  };
+  setCache('library', library);
+};
+
+export default setLibraryName;

src/apps.ts

@@ -1,11 +1,12 @@
 import Sandbox, { SandboxContructor, SandboxProps } from '@ice/sandbox';
+import * as isEmpty from 'lodash.isempty';
 import { NOT_LOADED, NOT_MOUNTED, LOADING_ASSETS, UNMOUNTED, LOAD_ERROR, MOUNTED } from './util/constant';
 import { matchActivePath, MatchOptions, PathData, PathOptions } from './util/matchPath';
 import { createSandbox, getUrlAssets, getEntryAssets, appendAssets, loadAndAppendCssAssets, emptyAssets, Assets } from './util/handleAssets';
-import { getCache, setCache } from './util/cache';
-import { AppLifeCycleEnum } from './util/appLifeCycle';
-import { loadUmdModule } from './util/umdLoader';
+import { setCache } from './util/cache';
+import { loadBundle } from './util/loader';
 import { globalConfiguration, StartConfiguration } from './start';
+import { getLifecyleByLibrary, getLifecyleByRegister } from './util/getLifecycle';
 
 interface ActiveFn {
   (url: string): boolean;
@@ -31,7 +32,13 @@ export interface BaseConfig extends PathOptions {
   sandbox?: boolean | SandboxProps | SandboxContructor;
   entry?: string;
   entryContent?: string;
+  /**
+   * will be deprecated in future version, use `loadScriptMode` instead.
+   * @see loadScriptMode
+   * @deprecated
+   */
   umd?: boolean;
+  loadScriptMode?: 'fetch' | 'script';
   checkActive?: (url: string) => boolean;
   appAssets?: Assets;
   props?: object;
@@ -151,21 +158,30 @@ export async function loadAppModule(appConfig: AppConfig) {
   });
   updateAppConfig(appConfig.name, { appAssets, appSandbox });
 
-  cacheLoadMode(appConfig);
-
-  if (appConfig.umd) {
+  /*
+  * we support two ways to acquire javascript assets, `fetch` or `<script />` element.
+  * Whereas js assets may formated as `umd` or `self-executing js bundle`.
+  * `umd` is a deprecated field, which indicates "an umd javascript bundle, acquired by fetch".
+  */
+  if (appConfig.umd || appConfig.loadScriptMode === 'fetch') {
     await loadAndAppendCssAssets(appAssets);
-    lifecycle = await loadUmdModule(appAssets.jsList, appSandbox);
+    lifecycle = await loadBundle(appAssets.jsList, appSandbox);
   } else {
     await appendAssets(appAssets, appSandbox, fetch);
-    lifecycle = {
-      mount: getCache(AppLifeCycleEnum.AppEnter),
-      unmount: getCache(AppLifeCycleEnum.AppLeave),
-    };
-    setCache(AppLifeCycleEnum.AppEnter, null);
-    setCache(AppLifeCycleEnum.AppLeave, null);
+
+    lifecycle =
+      getLifecyleByLibrary() ||
+      getLifecyleByRegister() ||
+      {};
   }
+  if (isEmpty(lifecycle)) {
+    console.error('[@ice/stark] microapp should export mount/unmout or register registerAppEnter/registerAppLeave.');
+  }
+
   onFinishLoading(appConfig);
+
+  // clear appSandbox
+  appSandbox?.clear();
   return combineLifecyle(lifecycle, appConfig);
 }
 
@@ -208,15 +224,6 @@ export function getAppConfigForLoad (app: string | AppConfig, options?: AppLifec
   return getAppConfig(name);
 };
 
-// cache loadMode
-export function cacheLoadMode (app: AppConfig) {
-  const { umd, sandbox } = app;
-  // cache loadMode
-  // eslint-disable-next-line no-nested-ternary
-  const loadMode = umd ? 'umd' : ( sandbox ? 'sandbox' : 'script' );
-  setCache('loadMode', loadMode);
-}
-
 export async function createMicroApp(app: string | AppConfig, appLifecyle?: AppLifecylceOptions, configuration?: StartConfiguration) {
   const appConfig = getAppConfigForLoad(app, appLifecyle);
   const appName = appConfig && appConfig.name;

src/util/getLifecycle.ts

@@ -0,0 +1,36 @@
+import { ModuleLifeCycle } from '../apps';
+import { getCache, setCache } from './cache';
+import { AppLifeCycleEnum } from './appLifeCycle';
+
+export function getLifecyleByLibrary () {
+  const libraryName = getCache('library');
+  const moduleInfo = window[libraryName] as ModuleLifeCycle;
+
+  if (moduleInfo && moduleInfo.mount && moduleInfo.unmount) {
+    const lifecycle = moduleInfo;
+
+    delete window[libraryName];
+    setCache('library', null);
+
+    return lifecycle;
+  }
+  return null;
+}
+
+export function getLifecyleByRegister () {
+  const mount = getCache(AppLifeCycleEnum.AppEnter);
+  const unmount = getCache(AppLifeCycleEnum.AppLeave);
+
+  if (mount && unmount) {
+    const lifecycle = {
+      mount,
+      unmount,
+    };
+
+    setCache(AppLifeCycleEnum.AppEnter, null);
+    setCache(AppLifeCycleEnum.AppLeave, null);
+
+    return lifecycle;
+  }
+  return null;
+}

src/util/umdLoader.ts → src/util/loader.ts

@@ -1,14 +1,16 @@
 import Sandbox from '@ice/sandbox';
 import { getGlobalProp, noteGlobalProps } from './global';
 import { Asset, fetchScripts } from './handleAssets';
+import { getLifecyleByLibrary, getLifecyleByRegister } from './getLifecycle';
+import { ModuleLifeCycle } from '../apps';
 
 /**
- * load umd bundle
+ * load bundle
  *
  * @param {Asset[]} jsList
  * @param {Sandbox} [sandbox]
  */
-export function loadUmdModule(jsList: Asset[], sandbox?: Sandbox) {
+export function loadBundle(jsList: Asset[], sandbox?: Sandbox) {
   return fetchScripts(jsList)
     .then(scriptTexts => {
       const globalwindow = getGobalWindow(sandbox);
@@ -36,10 +38,15 @@ export function loadUmdModule(jsList: Asset[], sandbox?: Sandbox) {
         console.error(err);
       }
 
-      const moduleInfo = libraryExport ? globalwindow[libraryExport] : {};
-      if (globalwindow[libraryExport]) {
-        delete globalwindow[libraryExport];
+      let moduleInfo = getLifecyleByLibrary() || getLifecyleByRegister();
+      if (!moduleInfo) {
+        moduleInfo = (libraryExport ? globalwindow[libraryExport] : {}) as ModuleLifeCycle;
+
+        if (globalwindow[libraryExport]) {
+          delete globalwindow[libraryExport];
+        }
       }
+
       return moduleInfo;
     });
 }