chore: move playground to root

Author: hubert

mock-submodules/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@test/sub-modules",
+  "name": "@mock/submodules",
   "version": "0.1.3",
   "private": true,
   "license": "MIT",

mock-submodules/src/dymanicRouter/index.ts

@@ -1,4 +1,4 @@
-import { defineBootstrap, defineMount } from '@vue-async/module-loader/esm/sub';
+import { defineBootstrap, defineMount } from '@vue-async/module-loader/sub';
 // 模块的路由配置数组
 import routes from './router';
 import './assets/index.css';

mock-submodules/tsconfig.json

@@ -10,7 +10,7 @@
     "noImplicitAny": false,
     "jsx": "preserve",
     "paths": {
-      "@vue-async/module-loader/esm/*": ["../packages/module-loader/src/*"]
+      "@vue-async/module-loader/*": ["../packages/module-loader/src/*"]
     }
   },
   "include": ["src"]

mock-submodules/yarn.lock

@@ -592,6 +592,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mock/submodules@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "@mock/submodules@workspace:."
+  dependencies:
+    "@vitejs/plugin-vue": ^5.0.4
+    "@vitejs/plugin-vue-jsx": ^3.0.1
+    "@vue/eslint-config-prettier": ^6.0.0
+    "@vue/eslint-config-typescript": ^5.0.2
+    concurrently: ^8.2.2
+    core-js: ^3.6.4
+    eslint-plugin-vue: ^5.0.0
+    less: ^3.11.1
+    less-loader: ^5.0.0
+    lodash.merge: ^4.6.2
+    rimraf: ^5.0.7
+    stylus: ^0.54.5
+    stylus-loader: ^3.0.2
+    vite: ^5.1.6
+    vue: ^3.0.0
+    vue-demi: "*"
+  languageName: unknown
+  linkType: soft
+
 "@npmcli/agent@npm:^2.0.0":
   version: 2.2.2
   resolution: "@npmcli/agent@npm:2.2.2"
@@ -733,29 +756,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@test/sub-modules@workspace:.":
-  version: 0.0.0-use.local
-  resolution: "@test/sub-modules@workspace:."
-  dependencies:
-    "@vitejs/plugin-vue": ^5.0.4
-    "@vitejs/plugin-vue-jsx": ^3.0.1
-    "@vue/eslint-config-prettier": ^6.0.0
-    "@vue/eslint-config-typescript": ^5.0.2
-    concurrently: ^8.2.2
-    core-js: ^3.6.4
-    eslint-plugin-vue: ^5.0.0
-    less: ^3.11.1
-    less-loader: ^5.0.0
-    lodash.merge: ^4.6.2
-    rimraf: ^5.0.7
-    stylus: ^0.54.5
-    stylus-loader: ^3.0.2
-    vite: ^5.1.6
-    vue: ^3.0.0
-    vue-demi: "*"
-  languageName: unknown
-  linkType: soft
-
 "@types/estree@npm:1.0.5":
   version: 1.0.5
   resolution: "@types/estree@npm:1.0.5"

package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "serve:mock-data": "nodemon --delay 1 --watch mock-data/apis mock-data/server.js",
     "serve:mock-submodules": "cd mock-submodules && yarn serve",
-    "serve:mock": "concurrently --raw \"yarn serve:mock-data\" \"yarn serve:mock-submodules\" ",
+    "serve": "concurrently --raw \"yarn serve:mock-data\" \"yarn serve:mock-submodules\" \"nuxt dev playground -p 7001\"",
     "build": "lerna run build --sort --stream --scope='@vue-async/*'",
     "test": "jest --coverage --passWithNoTests",
     "prepublishOnly": "yarn install --mode=skip-build && yarn changelog && yarn build && yarn test",
@@ -102,6 +102,7 @@
   },
   "workspaces": {
     "packages": [
+      "playground",
       "packages/*"
     ]
   }

packages/module-loader/package.json

@@ -47,7 +47,6 @@
     "types"
   ],
   "scripts": {
-    "serve": "nuxt dev playground -p 7001",
     "build": "run -T rimraf -rf lib esm dist && yarn build:version && yarn build:cjs && yarn build:esm && yarn build:umd",
     "build:version": "node -p \"'export const version: string = ' + JSON.stringify(require('./package.json').version) + ';'\" > src/version.ts",
     "build:cjs": "run -T tsc --project tsconfig.build.json",
@@ -72,8 +71,7 @@
     "warning": "^4.0.3"
   },
   "devDependencies": {
-    "@types/warning": "^3.0.0",
-    "nuxt": "^3.0.0"
+    "@types/warning": "^3.0.0"
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.0.0",

packages/module-loader/playground/pages/remote-component-page.vue

@@ -15,6 +15,9 @@ type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T
  */
 export function createLoader<Props extends Record<string, any> = any, Context = any>(
   options: {
+    /**
+     * global variables for the resolver
+     */
     globalVariables?: Record<string, any>;
   } & XOR<
     {

packages/module-loader/src/createLoader.ts

@@ -3,16 +3,16 @@ import { defineNuxtConfig } from 'nuxt/config';
 
 export default defineNuxtConfig({
   ssr: false,
+  srcDir: 'src/',
   app: {
     head: {
       script: [{ src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js-loading-overlay.min.js' }],
     },
   },
-  // plugins: [{ src: 'plugins/module-loader' }],
   build: {
     transpile: ['@vue-async/*'],
   },
   alias: {
-    '@vue-async/module-loader': fileURLToPath(new URL('../src', import.meta.url)),
+    '@vue-async/module-loader': fileURLToPath(new URL('../packages/module-loader/src', import.meta.url)),
   },
 });

packages/module-loader/playground/nuxt.config.ts renamed to playground/nuxt.config.ts

@@ -0,0 +1,12 @@
+{
+  "name": "@test/playground",
+  "version": "0.0.1",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "serve": "nuxt dev -p 7001"
+  },
+  "dependencies": {
+    "nuxt": "^3.0.0"
+  }
+}

playground/package.json

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage/>
+    </NuxtLayout>
+  </div>
+</template>

playground/src/app.vue

@@ -16,7 +16,7 @@
     </NuxtLink>
     <h3>设置错误entry（无法正常加载）：</h3>
     <NuxtLink style="margin: 0 10px 5px; display: block" :to="{ name: 'wrong-entry-remote-component' }">
-      setted wrong component entry
+      setted wrong component entry (show error component after 5s)
     </NuxtLink>
     <h3>vue-router 异步组件加载过程：</h3>
     <NuxtLink style="margin: 0 10px 5px; display: block" :to="{ name: 'lazy-loading-remote-component' }">

packages/module-loader/playground/global.d.ts renamed to playground/src/global.d.ts

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h3>这是使用 registerComponents 在页面动态加载远程组件。</h3>
+    <AsyncComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue-demi';
+import { registerComponents } from '@vue-async/module-loader';
+
+const useRemoteComponents = registerComponents({
+  componentA: {
+    src: 'http://localhost:7010/componentA/index.umd.js',
+    styles: 'http://localhost:7010/componentA/style.css',
+  },
+});
+
+const AsyncComponent = defineAsyncComponent(() => {
+  const remoteComponents = useRemoteComponents();
+  return remoteComponents.componentA();
+});
+</script>
+
+<style lang="less" scoped>
+h3 {
+  color: blue;
+}
+</style>

packages/module-loader/playground/layouts/default.vue renamed to playground/src/layouts/default.vue

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 import { defineNuxtPlugin } from 'nuxt/app';
 import { Router, RouteRecordRaw } from 'vue-router';
 import { createLoader, registerSubModules, registerComponents } from '@vue-async/module-loader';
-import { root, megreRoutes, lazyLoadView } from '../router/utils';
+import { lazyLoadView } from '../router/utils';
 
 // make Vue as global in Vue 3
 // @ts-ignore

packages/module-loader/playground/pages/index.vue renamed to playground/src/pages/index.vue

@@ -1,38 +1,4 @@
 import { defineComponent, defineAsyncComponent, h, AsyncComponentOptions, Component } from 'vue-demi';
-import { RouteRecordRaw } from 'vue-router';
-
-// 模块中路由配置没有根前缀，用于主程序自定义
-export function root(routes: RouteRecordRaw[]) {
-  return routes.map((route) => {
-    route.path = '/' + route.path;
-    return route;
-  });
-}
-
-// 合并路由（将新路由配置合并到老路由配置中）
-export const megreRoutes = (oldRoutes: RouteRecordRaw[], newRoutes: RouteRecordRaw[]) => {
-  newRoutes.forEach((current: RouteRecordRaw) => {
-    const matchRoute = oldRoutes.find(
-      (route: RouteRecordRaw) => (current.name && route.name === current.name) || route.path === current.path,
-    );
-    if (matchRoute) {
-      // 如果找到已在在的
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { children, name, ...restOptions } = current;
-      Object.assign(matchRoute, restOptions); // 合并路由参数
-
-      if (children) {
-        !matchRoute.children && (matchRoute.children = []);
-        megreRoutes(matchRoute.children, children);
-      }
-    } else {
-      // 插入到 path:'*'之前
-      const insertIndex = oldRoutes.findIndex((route: RouteRecordRaw) => route.path === '*');
-      // 如果没找到
-      oldRoutes.splice(insertIndex < 0 ? 0 : insertIndex, 0, current);
-    }
-  });
-};
 
 const LoadingComponent = defineComponent({
   render() {
@@ -53,7 +19,7 @@ export function lazyLoadView(
     loadingComponent = LoadingComponent,
     errorComponent = ErrorComponent,
     delay = 200,
-    timeout = 10000,
+    timeout = 5000,
     suspensible = false,
     onError,
   }: Omit<AsyncComponentOptions, 'loader'> = {},