feat: add remote component loader function

affects: @vue-async/module-loader

Author: aceHubert

.gitignore

@@ -1,24 +1,90 @@
-.DS_Store
-node_modules
-dist
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Editor directories and files
-.idea
-# .vscode
-.changelog
-.eslintcache
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

package.json

@@ -1,6 +1,7 @@
 {
   "name": "vue-async",
   "version": "0.1.0",
+  "description": "Vue Async",
   "private": true,
   "repository": {
     "type": "git",
@@ -56,7 +57,8 @@
     "prettier": "^2.0.5",
     "ts-jest": "^24.2.0",
     "typescript": "^3.7.2",
-    "util": "^0.12.1"
+    "util": "^0.12.1",
+    "vuepress": "^1.5.0"
   },
   "husky": {
     "hooks": {

packages/module-loader/src/ability/componentLoader.ts

@@ -0,0 +1,28 @@
+/**
+ * componentLoader
+ */
+
+import { Component as VueComponent } from 'vue';
+
+export default () => {
+  return function loader(componentName: string, url: string): Promise<VueComponent> {
+    return new Promise<VueComponent>((resolve, reject) => {
+      let component = (window as any)[componentName];
+      if (component) {
+        resolve(component);
+      } else {
+        const script = document.createElement('script');
+        script.src = url;
+        script.async = true;
+        script.onload = () => {
+          component = (window as any)[componentName];
+          resolve(component);
+        };
+        script.onerror = () => {
+          reject(new Error(`component "${componentName}" had a problem to load. ${url}`));
+        };
+        document.body.appendChild(script);
+      }
+    });
+  };
+};

packages/module-loader/src/install.ts

@@ -2,8 +2,9 @@ import _Vue from 'vue';
 import { Route, RawLocation } from 'vue-router';
 import dynamicComponent from './ability/dynamicComponent';
 import dynamicComponentState from './ability/dynamicComponent/storeModule';
-import eventBus from './ability/eventBus';
-import moduleLoader from './ability/moduleLoader';
+import createEventBus from './ability/eventBus';
+import createModuleLoader from './ability/moduleLoader';
+import createComponentLoader from './ability/componentLoader';
 import { UseOptions } from '../types';
 
 export default function install(Vue: typeof _Vue, options: UseOptions = {}) {
@@ -23,11 +24,15 @@ export default function install(Vue: typeof _Vue, options: UseOptions = {}) {
 
   Object.defineProperties(Vue.prototype, {
     $eventBus: {
-      value: eventBus(Vue),
+      value: createEventBus(Vue),
       writable: false,
     },
     $moduleLoader: {
-      value: moduleLoader(Vue, vm.status),
+      value: createModuleLoader(Vue, vm.status),
+      writable: false,
+    },
+    $componentLoader: {
+      value: createComponentLoader(),
       writable: false,
     },
   });
@@ -47,7 +52,11 @@ export default function install(Vue: typeof _Vue, options: UseOptions = {}) {
   // router
   // 解决动态路由404问题
   if (router) {
-    const resolveRoute = (to: Route, next: (to?: RawLocation | false | ((vm: _Vue) => void) | void) => void) => {
+    const resolveRoute = (
+      to: Route,
+      from: Route,
+      next: (to?: RawLocation | false | ((vm: _Vue) => void) | void) => void,
+    ) => {
       const fullPath = to.redirectedFrom || to.fullPath;
 
       const { resolved, location } = router.resolve(fullPath);
@@ -61,17 +70,17 @@ export default function install(Vue: typeof _Vue, options: UseOptions = {}) {
     };
 
     router.beforeEach((to, from, next) => {
-      if (!to.name || to.name === '404' || to.name === 'page-not-found') {
+      if (!to.name || to.name === '404' || to.name === 'page-not-found' || to.path === '*') {
         // 模块已经被加载完成, 但由于在其之前添加 beforeEach 阻止时间过长，vm.$watch还没开始监听
         if (vm.status.current) {
-          resolveRoute(to, next);
+          resolveRoute(to, from, next);
         }
         vm.$watch(
           () => vm.status.current,
           (newVal, oldVal) => {
             // false => true
             if (newVal && !oldVal) {
-              resolveRoute(to, next);
+              resolveRoute(to, from, next);
             }
           },
         );

packages/module-loader/types/vue.d.ts

@@ -2,12 +2,13 @@
  * Augment the typings of Vue.js
  */
 
-import Vue from 'vue';
+import Vue, { Component as VueComponent } from 'vue';
 import { Framework, ModuleLoader, Modules, DynamicComponent } from './module';
 
 declare module 'vue/types/vue' {
   interface Vue {
     $moduleLoader: (moduleData: Modules) => Promise<void>;
+    $componentLoader: (componentName: string, path: string) => Promise<VueComponent>;
     $moduleLoadManager: Framework;
     $dynamicComponent: {
       add: (component: DynamicComponent, position?: string) => void;