@umijs/preset-vue 4.0.0-rc.13

package/README.md

@@ -0,0 +1,3 @@
+# @umijs/preset-vue
+
+See our website [umijs](https://umijs.org) for more information.

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const TEMPLATES_DIR: string;

package/dist/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEMPLATES_DIR = void 0;
+const path_1 = require("path");
+exports.TEMPLATES_DIR = (0, path_1.join)(__dirname, '../templates');

package/dist/features/config/assetRules.d.ts

@@ -0,0 +1,8 @@
+import Config from '@umijs/bundler-webpack/compiled/webpack-5-chain';
+import { IApi } from 'umi';
+interface IOpts {
+    config: Config;
+    api: IApi;
+}
+export declare function addAssetRules({ config, api }: IOpts): Promise<void>;
+export {};

package/dist/features/config/assetRules.js

@@ -0,0 +1,49 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addAssetRules = void 0;
+function addAssetRules({ config, api }) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // bundler-webpack 本身自带的静态资源会触发 vue-loader currently does not support vue rules with oneOf. 需要禁用掉
+        config.module.rules.delete('asset');
+        const { userConfig } = api;
+        const inlineLimit = parseInt(userConfig.inlineLimit || '10000', 10);
+        const staticPathPrefix = api.config.staticPathPrefix !== undefined
+            ? api.config.staticPathPrefix
+            : 'static/';
+        config.module
+            .rule('avif')
+            .test(/\.avif$/)
+            .type('asset')
+            .mimetype('image/avif')
+            .parser({
+            dataUrlCondition: {
+                maxSize: inlineLimit,
+            },
+        })
+            .generator({
+            filename: `${staticPathPrefix}[name].[hash:8].[ext]`,
+        });
+        config.module
+            .rule('image')
+            .test(/\.(bmp|gif|jpg|jpeg|png)$/)
+            .type('asset')
+            .parser({
+            dataUrlCondition: {
+                maxSize: inlineLimit,
+            },
+        })
+            .generator({
+            filename: `${staticPathPrefix}[name].[hash:8].[ext]`,
+        });
+    });
+}
+exports.addAssetRules = addAssetRules;

package/dist/features/config/config.d.ts

@@ -0,0 +1,3 @@
+import Config from '@umijs/bundler-webpack/compiled/webpack-5-chain';
+import { IApi } from 'umi';
+export declare function getConfig(config: Config, api: IApi): void;

package/dist/features/config/config.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConfig = void 0;
+const pluginWebpack5_js_1 = __importDefault(require("vue-loader/dist/pluginWebpack5.js"));
+const assetRules_1 = require("./assetRules");
+function getConfig(config, api) {
+    config.module.noParse(/^(vue|vue-router|vuex|vuex-router-sync)$/);
+    // https://github.com/webpack/webpack/issues/14532#issuecomment-947525539
+    config.output.set('hashFunction', 'xxhash64');
+    // https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
+    config.module
+        .rule('esm')
+        .test(/\.m?jsx?$/)
+        .resolve.set('fullySpecified', false);
+    config.resolve.extensions.merge(['.vue']).end();
+    config.module
+        .rule('vue')
+        .test(/\.vue$/)
+        .use('vue-loader')
+        .loader(require.resolve('vue-loader'))
+        .options({
+        babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy'],
+    });
+    config.plugin('vue-loader-plugin').use(pluginWebpack5_js_1.default);
+    // https://github.com/vuejs/vue-loader/issues/1435#issuecomment-869074949
+    config.module
+        .rule('vue-style')
+        .test(/\.vue$/)
+        .resourceQuery(/type=style/)
+        .sideEffects(true);
+    // 兼容 element-ui plus
+    config.module
+        .rule('fix-element-ui-plus')
+        .test(/\.mjs$/)
+        .include.add(/node_modules/)
+        .end()
+        .type('javascript/auto')
+        .resolve.fullySpecified(false);
+    // asset
+    (0, assetRules_1.addAssetRules)({ api, config });
+}
+exports.getConfig = getConfig;

package/dist/features/default.d.ts

@@ -0,0 +1,3 @@
+import type { IApi } from 'umi';
+declare const _default: (api: IApi) => void;
+export default _default;

package/dist/features/default.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = require("path");
+const resolveProjectDep_1 = require("../utils/resolveProjectDep");
+exports.default = (api) => {
+    api.describe({
+        key: 'preset-vue:default',
+    });
+    const vuePath = (0, resolveProjectDep_1.resolveProjectDep)({
+        pkg: api.pkg,
+        cwd: api.cwd,
+        dep: 'vue/dist/vue.esm-bundler.js',
+    }) || require.resolve('vue/dist/vue.esm-bundler.js');
+    const vueRuntimePath = (0, resolveProjectDep_1.resolveProjectDep)({
+        pkg: api.pkg,
+        cwd: api.cwd,
+        dep: 'vue/dist/vue.runtime.esm-bundler.js',
+    }) || require.resolve('vue/dist/vue.runtime.esm-bundler.js');
+    api.modifyDefaultConfig((config) => {
+        var _a;
+        config.alias = Object.assign(Object.assign({}, config.alias), { vue$: ((_a = api.userConfig.vue) === null || _a === void 0 ? void 0 : _a.runtimeCompiler) ? vuePath : vueRuntimePath, 'vue-router': (0, resolveProjectDep_1.resolveProjectDep)({
+                pkg: api.pkg,
+                cwd: api.cwd,
+                dep: 'vue-router',
+            }) || (0, path_1.dirname)(require.resolve('vue-router/package.json')) });
+        // feature flags https://link.vuejs.org/feature-flags.
+        config.define = Object.assign(Object.assign({}, config.define), { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false });
+        return config;
+    });
+    api.modifyConfig((memo) => {
+        // react 独有配置需要禁用
+        memo.fastRefresh = false;
+        return memo;
+    });
+    api.modifyRendererPath(() => (0, path_1.dirname)(require.resolve('@umijs/renderer-vue/package.json')));
+    // 增加运行时key
+    api.addRuntimePluginKey(() => [
+        'router',
+        'onRouterCreated',
+        'onAppCreated',
+        'onMounted',
+    ]);
+};

package/dist/features/tmpFiles/tmpFiles.d.ts

@@ -0,0 +1,3 @@
+import type { IApi } from 'umi';
+declare const _default: (api: IApi) => void;
+export default _default;

package/dist/features/tmpFiles/tmpFiles.js

@@ -0,0 +1,75 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = require("path");
+const plugin_utils_1 = require("umi/plugin-utils");
+const constants_1 = require("../../constants");
+exports.default = (api) => {
+    api.describe({
+        key: 'preset-vue:tmpFiles',
+    });
+    api.onGenerateFiles(() => __awaiter(void 0, void 0, void 0, function* () {
+        // useAppData.ts
+        const rendererPath = (0, plugin_utils_1.winPath)(yield api.applyPlugins({
+            key: 'modifyRendererPath',
+        }));
+        api.writeTmpFile({
+            noPluginDir: true,
+            path: 'plugin-vue/index.ts',
+            tplPath: (0, path_1.join)(constants_1.TEMPLATES_DIR, 'useAppData.tpl'),
+            context: {
+                rendererPath,
+            },
+        });
+    }));
+    api.register({
+        key: 'onGenerateFiles',
+        fn: () => __awaiter(void 0, void 0, void 0, function* () {
+            // history.ts
+            const rendererPath = (0, plugin_utils_1.winPath)(yield api.applyPlugins({
+                key: 'modifyRendererPath',
+            }));
+            api.writeTmpFile({
+                noPluginDir: true,
+                path: 'core/history.ts',
+                tplPath: (0, path_1.join)(constants_1.TEMPLATES_DIR, 'history.tpl'),
+                context: {
+                    rendererPath,
+                },
+            });
+            // EmptyRoutes.tsx
+            api.writeTmpFile({
+                noPluginDir: true,
+                path: 'core/EmptyRoute.tsx',
+                content: `
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  setup() {
+    return () => <router-view></router-view>;
+  },
+});
+        `,
+            });
+            // App.vue
+            api.writeTmpFile({
+                noPluginDir: true,
+                path: 'core/App.vue',
+                content: `
+<template>
+  <router-view></router-view>
+</template>
+        `,
+            });
+        }),
+        stage: Infinity,
+    });
+};

package/dist/features/webpack.d.ts

@@ -0,0 +1,3 @@
+import type { IApi } from 'umi';
+declare const _default: (api: IApi) => void;
+export default _default;

package/dist/features/webpack.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_1 = require("./config/config");
+exports.default = (api) => {
+    api.describe({
+        key: 'preset-vue:webpack',
+    });
+    api.chainWebpack((config) => {
+        (0, config_1.getConfig)(config, api);
+        return config;
+    });
+    api.modifyConfig((memo) => {
+        // 处理 mfsu 包含vue 模块的依赖处理
+        const enableMFSU = memo.mfsu !== false;
+        if (enableMFSU) {
+            memo.mfsu = Object.assign(Object.assign({}, (memo.mfsu || {})), { chainWebpack(config) {
+                    (0, config_1.getConfig)(config, api);
+                    return config;
+                } });
+        }
+        return memo;
+    });
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import type { IApi } from 'umi';
+import './requireHook';
+declare const _default: (api: IApi) => {
+    plugins: string[];
+};
+export default _default;

package/dist/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./requireHook");
+exports.default = (api) => {
+    api.describe({
+        key: 'vue',
+        config: {
+            schema(joi) {
+                return joi.object();
+            },
+        },
+        enableBy: api.EnableBy.config,
+    });
+    return {
+        plugins: [
+            require.resolve('./features/default'),
+            require.resolve('./features/webpack'),
+            require.resolve('./features/tmpFiles/tmpFiles'),
+        ],
+    };
+};

package/dist/requireHook.d.ts

@@ -0,0 +1,2 @@
+declare const hookPropertyMap: Map<string, string>;
+export { hookPropertyMap };

package/dist/requireHook.js

@@ -0,0 +1,37 @@
+"use strict";
+// MIT: copy from https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack/require-hook.ts
+// sync injects a hook for webpack and webpack/... requires to use the internal ncc webpack version
+// this is in order for userland plugins to attach to the same webpack instance as umi
+// the individual compiled modules are as defined for the compilation in bundles/webpack/packages/*
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hookPropertyMap = void 0;
+// TODO 之后走预打包处理
+// @ts-ignore
+const deepImports_json_1 = __importDefault(require("@umijs/bundler-webpack/compiled/webpack/deepImports.json"));
+const hookPropertyMap = new Map([
+    ['webpack', '@umijs/bundler-webpack/compiled/webpack'],
+    ['webpack/package', '@umijs/bundler-webpack/compiled/webpack/package'],
+    ['webpack/package.json', '@umijs/bundler-webpack/compiled/webpack/package'],
+    ['webpack/lib/webpack', '@umijs/bundler-webpack/compiled/webpack'],
+    ['webpack/lib/webpack.js', '@umijs/bundler-webpack/compiled/webpack'],
+    ['tapable', '@umijs/bundler-utils/compiled/tapable'],
+    ['vite', '@umijs/bundler-vite/compiled/vite'],
+]);
+exports.hookPropertyMap = hookPropertyMap;
+deepImports_json_1.default.forEach((item) => {
+    const name = item.split('/').pop();
+    hookPropertyMap.set(item, `@umijs/bundler-webpack/compiled/webpack/${name}`);
+    hookPropertyMap.set(`${item}.js`, `@umijs/bundler-webpack/compiled/webpack/${name}`);
+});
+const mod = require('module');
+const resolveFilename = mod._resolveFilename;
+mod._resolveFilename = function (request, parent, isMain, options) {
+    const hookResolved = hookPropertyMap.get(request);
+    if (hookResolved) {
+        request = hookResolved;
+    }
+    return resolveFilename.call(mod, request, parent, isMain, options);
+};

package/dist/utils/resolveProjectDep.d.ts

@@ -0,0 +1,5 @@
+export declare function resolveProjectDep(opts: {
+    pkg: any;
+    cwd: string;
+    dep: string;
+}): string | undefined;

package/dist/utils/resolveProjectDep.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveProjectDep = void 0;
+const path_1 = require("path");
+const plugin_utils_1 = require("umi/plugin-utils");
+function resolveProjectDep(opts) {
+    var _a, _b;
+    if (((_a = opts.pkg.dependencies) === null || _a === void 0 ? void 0 : _a[opts.dep]) ||
+        ((_b = opts.pkg.devDependencies) === null || _b === void 0 ? void 0 : _b[opts.dep])) {
+        return (0, path_1.dirname)(plugin_utils_1.resolve.sync(`${opts.dep}/package.json`, {
+            basedir: opts.cwd,
+        }));
+    }
+}
+exports.resolveProjectDep = resolveProjectDep;

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@umijs/preset-vue",
+  "version": "4.0.0-rc.13",
+  "description": "@umijs/preset-vue",
+  "homepage": "https://github.com/umijs/umi-next/tree/master/packages/preset-vue#readme",
+  "bugs": "https://github.com/umijs/umi-next/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umijs/umi-next"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "templates",
+    "compiled"
+  ],
+  "scripts": {
+    "build": "pnpm tsc",
+    "build:deps": "pnpm esno ../../scripts/bundleDeps.ts",
+    "dev": "pnpm build -- --watch"
+  },
+  "dependencies": {
+    "@umijs/renderer-vue": "4.0.0-rc.13",
+    "vue": "3.2.31",
+    "vue-loader": "17.0.0",
+    "vue-router": "4.0.12"
+  },
+  "devDependencies": {
+    "umi": "4.0.0-rc.13"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "chencheng <sorrycc@gmail.com> (https://github.com/sorrycc)"
+  ]
+}

package/templates/history.tpl

@@ -0,0 +1,15 @@
+import { createWebHashHistory, createMemoryHistory, createWebHistory, RouterHistory } from '{{{ rendererPath }}}';
+
+let history: RouterHistory;
+export function createHistory(opts: any) {
+  if (opts.type === 'hash') {
+    history = createWebHashHistory(opts.basename);
+  } else if (opts.type === 'memory') {
+    history = createMemoryHistory(opts.basename);
+  } else {
+    history = createWebHistory(opts.basename);
+  }
+  return history;
+}
+
+export { history };

package/templates/useAppData.tpl

@@ -0,0 +1,11 @@
+import { inject } from 'vue';
+import { AppContextKey } from '{{{ rendererPath }}}';
+
+export function useAppData() {
+  const state = inject(AppContextKey);
+  if (!state) {
+    throw new Error('AppContext is no provide');
+  }
+
+  return state;
+}