feat: moduleLoader error handle

affects: @vue-async/module-loader

$moduleLoader 格式变更和支持 Promise回调或success方法回调
异常处理自定义
模块名称自动查找

Author: aceHubert

package.json

@@ -44,7 +44,6 @@
     "@typescript-eslint/parser": "^2.12.0",
     "@zerollup/ts-transform-paths": "^1.7.18",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^24.9.0",
     "child_process": "^1.0.2",
     "commitizen": "^4.0.3",
     "concurrently": "^5.1.0",

packages/module-loader/dev/App.ts

@@ -19,6 +19,16 @@ export default Vue.extend({
         { staticStyle: { margin: '0 10px 5px', display: 'block' }, props: { to: { name: 'remote-component-b' } } },
         'Remote Component B as router component',
       ),
+      h(
+        'router-link',
+        { staticStyle: { margin: '0 10px 5px', display: 'block' }, props: { to: { name: 'wrong-component-name' } } },
+        'setted wrong component name',
+      ),
+      h(
+        'router-link',
+        { staticStyle: { margin: '0 10px 5px', display: 'block' }, props: { to: { name: 'wrong-component-entry' } } },
+        'setted wrong component entry',
+      ),
       h('router-view'),
     ]);
   },

packages/module-loader/dev/index.html

@@ -18,7 +18,7 @@
   <script src="//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/vuex@3.5.1/dist/vuex.min.js"></script>
-  <script src="/static/utils.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/@vue-async/utils@1.0.5/dist/utils.min.js"></script>
   <script src="/module-loader.js"></script>
 </body>
 

packages/module-loader/dev/main.ts

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+// import Vue from 'vue';
 import router, { addRoutes, lazyLoadView } from './router';
 import store from './store';
 import ModuleLoader from '@vue-async/module-loader';
@@ -28,21 +28,65 @@ addRoutes([
     name: 'remote-component-b',
     component: () => lazyLoadView(app.$componentLoader('componentB', '/static/componentB/componentB.umd.min.js')),
   },
+  {
+    path: 'wrong-component-name',
+    name: 'wrong-component-name',
+    component: () =>
+      lazyLoadView(app.$componentLoader('wrongComponentName', '/static/componentB/componentB.umd.min.js')),
+  },
+  {
+    path: 'wrong-component-entry',
+    name: 'wrong-component-entry',
+    component: () =>
+      lazyLoadView(app.$componentLoader('entry', 'http://www.xx.com/static/componentB/errorComponent.umd.min.js')),
+  },
 ]);
 
 app
-  .$moduleLoader({
-    dymanicRouter: '/static/dymanicRouter/dymanicRouter.umd.min.js',
-    // page 异步加载，样式限 page load 加载出来
-    // dymanicRouter: {
-    //   entry: '/static/dymanicRouter/dymanicRouter.umd.min.js',
-    //   css: ['/static/dymanicRouter/css/1.281753bd.css', '/static/dymanicRouter/css/2.2b65cb29.css'],
-    // },
-    dymanicComponent: {
-      entry: '/static/dymanicComponent/dymanicComponent.umd.min.js',
-      css: '/static/dymanicComponent/dymanicComponent.css',
+  .$moduleLoader(
+    [
+      {
+        dymanicRouter: '/static/dymanicRouter/dymanicRouter.umd.js',
+        // page 异步加载，样式限 page load 加载出来
+        // dymanicRouter: {
+        //   entry: '/static/dymanicRouter/dymanicRouter.umd.min.js',
+        //   css: ['/static/dymanicRouter/css/1.281753bd.css', '/static/dymanicRouter/css/2.2b65cb29.css'],
+        // },
+        dymanicComponent: {
+          entry: '/static/dymanicComponent/dymanicComponent.umd.min.js',
+          styles: '/static/dymanicComponent/dymanicComponent.css',
+        },
+      },
+      {
+        // 同名
+        moduleName: 'dymanicComponent',
+        entry: '/static/dymanicComponentCopy/dymanicComponent.umd.min.js',
+        styles: '/static/dymanicComponentCopy/dymanicComponent.css',
+      },
+      {
+        // 错误 module name (执行正常)
+        moduleName: 'wrongName',
+        entry: '/static/dymanicComponentCopy/dymanicComponent.umd.min.js',
+      },
+      {
+        // 错误 entry (执行 error)
+        moduleName: 'wrongEntry',
+        entry: 'http://www.xx.com/error.umd.min.js',
+      },
+      // fn
+      // (Vue: any) => {
+      //   console.log(Vue);
+      // },
+    ],
+    {
+      success: () => {
+        app.$mount('#app');
+      },
+      error(msg, module) {
+        console.warn(msg, module);
+      },
     },
-  })
+  )
   .then(() => {
-    app.$mount('#app');
+    // then won't exec when success is set in options
   });