chore: init project

internal/vite-config/src/plugins/extra-app-config.ts

@@ -0,0 +1,97 @@
+import {
+  colors,
+  generatorContentHash,
+  readPackageJSON,
+} from '@vben/node-utils';
+import { type PluginOption } from 'vite';
+
+import { getEnvConfig } from '../utils/env';
+
+interface PluginOptions {
+  isBuild: boolean;
+  root: string;
+}
+
+const GLOBAL_CONFIG_FILE_NAME = '_app.config.js';
+const VBEN_ADMIN_PRO_APP_CONF = '_VBEN_ADMIN_PRO_APP_CONF_';
+
+/**
+ * 用于将配置文件抽离出来并注入到项目中
+ * @returns
+ */
+
+async function viteExtraAppConfigPlugin({
+  isBuild,
+  root,
+}: PluginOptions): Promise<PluginOption | undefined> {
+  let publicPath: string;
+  let source: string;
+
+  if (!isBuild) {
+    return;
+  }
+
+  const { version = '' } = await readPackageJSON(root);
+
+  return {
+    async configResolved(config) {
+      publicPath = config.base;
+      source = await getConfigSource();
+    },
+    async generateBundle() {
+      try {
+        this.emitFile({
+          fileName: GLOBAL_CONFIG_FILE_NAME,
+          source,
+          type: 'asset',
+        });
+
+        // eslint-disable-next-line no-console
+        console.log(colors.cyan(`✨configuration file is build successfully!`));
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(
+          colors.red(
+            `configuration file configuration file failed to package:\n${error}`,
+          ),
+        );
+      }
+    },
+    name: 'vite:extra-app-config',
+    async transformIndexHtml(html) {
+      publicPath = publicPath.endsWith('/') ? publicPath : `${publicPath}/`;
+      const hash = `v=${version}-${generatorContentHash(source, 8)}`;
+
+      const appConfigSrc = `${publicPath}${GLOBAL_CONFIG_FILE_NAME}?${hash}`;
+
+      return {
+        html,
+        tags: [
+          {
+            attrs: {
+              src: appConfigSrc,
+            },
+            tag: 'script',
+          },
+        ],
+      };
+    },
+  };
+}
+
+async function getConfigSource() {
+  const config = await getEnvConfig();
+  const windowVariable = `window.${VBEN_ADMIN_PRO_APP_CONF}`;
+  // 确保变量不会被修改
+  let source = `${windowVariable}=${JSON.stringify(config)};`;
+  source += `
+    Object.freeze(${windowVariable});
+    Object.defineProperty(window, "${VBEN_ADMIN_PRO_APP_CONF}", {
+      configurable: false,
+      writable: false,
+    });
+  `.replaceAll(/\s/g, '');
+  return source;
+}
+
+export { viteExtraAppConfigPlugin };

internal/vite-config/src/plugins/importmap.ts

@@ -0,0 +1,243 @@
+/**
+ * 参考 https://github.com/jspm/vite-plugin-jspm，调整为需要的功能
+ */
+import type { GeneratorOptions } from '@jspm/generator';
+import type { Plugin } from 'vite';
+
+import { Generator } from '@jspm/generator';
+import { load } from 'cheerio';
+import { minify } from 'html-minifier-terser';
+
+const DEFAULT_PROVIDER = 'jspm.io';
+
+type pluginOptions = {
+  debug?: boolean;
+  defaultProvider?: 'esm.sh' | 'jsdelivr' | 'jspm.io';
+  importmap?: Array<{ name: string; range?: string }>;
+} & GeneratorOptions;
+
+// async function getLatestVersionOfShims() {
+//   const result = await fetch('https://ga.jspm.io/npm:es-module-shims');
+//   const version = result.text();
+//   return version;
+// }
+
+async function getShimsUrl(provide: string) {
+  // const version = await getLatestVersionOfShims();
+  const version = '1.10.0';
+
+  const shimsSubpath = `dist/es-module-shims.js`;
+  const providerShimsMap: Record<string, string> = {
+    'esm.sh': `https://esm.sh/es-module-shims@${version}/${shimsSubpath}`,
+    // unpkg: `https://unpkg.com/es-module-shims@${version}/${shimsSubpath}`,
+    jsdelivr: `https://cdn.jsdelivr.net/npm/es-module-shims@${version}/${shimsSubpath}`,
+
+    // 下面两个CDN不稳定，暂时不用
+    'jspm.io': `https://ga.jspm.io/npm:es-module-shims@${version}/${shimsSubpath}`,
+  };
+
+  return providerShimsMap[provide] || providerShimsMap[DEFAULT_PROVIDER];
+}
+
+let generator: Generator;
+
+async function viteImportMapPlugin(
+  pluginOptions?: pluginOptions,
+): Promise<Plugin[]> {
+  const { importmap } = pluginOptions || {};
+
+  let isSSR = false;
+  let isBuild = false;
+  let installed = false;
+  let installError: Error | null = null;
+
+  const options: pluginOptions = Object.assign(
+    {},
+    {
+      debug: false,
+      defaultProvider: 'jspm.io',
+      env: ['production', 'browser', 'module'],
+      importmap: [],
+    },
+    pluginOptions,
+  );
+
+  generator = new Generator({
+    ...options,
+    baseUrl: process.cwd(),
+  });
+
+  if (options?.debug) {
+    (async () => {
+      for await (const { message, type } of generator.logStream()) {
+        // eslint-disable-next-line no-console
+        console.log(`${type}: ${message}`);
+      }
+    })();
+  }
+
+  const imports = options.inputMap?.imports ?? {};
+  const scopes = options.inputMap?.scopes ?? {};
+  const firstLayerKeys = Object.keys(scopes);
+  const inputMapScopes: string[] = [];
+  firstLayerKeys.forEach((key) => {
+    inputMapScopes.push(...Object.keys(scopes[key]));
+  });
+  const inputMapImports = Object.keys(imports);
+
+  const allDepNames: string[] = [
+    ...(importmap?.map((item) => item.name) || []),
+    ...inputMapImports,
+    ...inputMapScopes,
+  ];
+  const depNames = new Set<string>(allDepNames);
+
+  const installDeps = importmap?.map((item) => ({
+    range: item.range,
+    target: item.name,
+  }));
+
+  return [
+    {
+      async config(_, { command, isSsrBuild }) {
+        isBuild = command === 'build';
+        isSSR = !!isSsrBuild;
+      },
+      enforce: 'pre',
+      name: 'importmap:external',
+      resolveId(id) {
+        if (isSSR || !isBuild) {
+          return null;
+        }
+
+        if (!depNames.has(id)) {
+          return null;
+        }
+        return { external: true, id };
+      },
+    },
+    {
+      enforce: 'post',
+      name: 'importmap:install',
+      async resolveId() {
+        if (isSSR || !isBuild || installed) {
+          return null;
+        }
+        try {
+          installed = true;
+          await Promise.allSettled(
+            (installDeps || []).map((dep) => generator.install(dep)),
+          );
+        } catch (error: any) {
+          installError = error;
+          installed = false;
+        }
+        return null;
+      },
+    },
+    {
+      buildEnd() {
+        // 未生成importmap时，抛出错误，防止被turbo缓存
+        if (!installed && !isSSR) {
+          installError && console.error(installError);
+          throw new Error('importmap install failed.');
+        }
+      },
+      enforce: 'post',
+      name: 'importmap:html',
+      transformIndexHtml: {
+        async handler(html) {
+          if (isSSR || !isBuild) {
+            return html;
+          }
+
+          const importmapJson = generator.getMap();
+
+          if (!importmapJson) {
+            return html;
+          }
+
+          const esModuleShimsSrc = await getShimsUrl(
+            options.defaultProvider || DEFAULT_PROVIDER,
+          );
+
+          const resultHtml = await injectShimsToHtml(html, esModuleShimsSrc);
+          html = await minify(resultHtml || html, {
+            collapseWhitespace: true,
+            minifyCSS: true,
+            minifyJS: true,
+            removeComments: false,
+          });
+
+          return {
+            html,
+            tags: [
+              {
+                attrs: {
+                  type: 'importmap',
+                },
+                injectTo: 'head-prepend',
+                tag: 'script',
+                children: `${JSON.stringify(importmapJson)}`,
+              },
+            ],
+          };
+        },
+        order: 'post',
+      },
+    },
+  ];
+}
+
+async function injectShimsToHtml(html: string, esModuleShimUrl: string) {
+  const $ = load(html);
+
+  const $script = $(`script[type='module']`);
+
+  if (!$script) {
+    return;
+  }
+
+  const entry = $script.attr('src');
+
+  $script.removeAttr('type');
+  $script.removeAttr('crossorigin');
+  $script.removeAttr('src');
+  $script.html(`
+if (!HTMLScriptElement.supports || !HTMLScriptElement.supports('importmap')) {
+  self.importShim = function () {
+      const promise = new Promise((resolve, reject) => {
+          document.head.appendChild(
+              Object.assign(document.createElement('script'), {
+                  src: '${esModuleShimUrl}',
+                  crossorigin: 'anonymous',
+                  async: true,
+                  onload() {
+                      if (!importShim.$proxy) {
+                          resolve(importShim);
+                      } else {
+                          reject(new Error('No globalThis.importShim found:' + esModuleShimUrl));
+                      }
+                  },
+                  onerror(error) {
+                      reject(error);
+                  },
+              }),
+          );
+      });
+      importShim.$proxy = true;
+      return promise.then((importShim) => importShim(...arguments));
+  };
+}
+
+var modules = ['${entry}'];
+typeof importShim === 'function'
+  ? modules.forEach((moduleName) => importShim(moduleName))
+  : modules.forEach((moduleName) => import(moduleName));
+ `);
+  $('body').after($script);
+  $('head').remove(`script[type='module']`);
+  return $.html();
+}
+
+export { viteImportMapPlugin };

internal/vite-config/src/plugins/index.ts

@@ -0,0 +1,211 @@
+import type { PluginOption } from 'vite';
+
+import { join } from 'node:path';
+
+import viteVueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
+import { getPackage } from '@vben/node-utils';
+import viteVue from '@vitejs/plugin-vue';
+import viteVueJsx from '@vitejs/plugin-vue-jsx';
+import { visualizer as viteVisualizerPlugin } from 'rollup-plugin-visualizer';
+import viteTurboConsolePlugin from 'unplugin-turbo-console/vite';
+import viteCompressPlugin from 'vite-plugin-compression';
+import viteDtsPlugin from 'vite-plugin-dts';
+import { createHtmlPlugin as viteHtmlPlugin } from 'vite-plugin-html';
+import { libInjectCss as viteLibInjectCss } from 'vite-plugin-lib-inject-css';
+import { viteMockServe as viteMockPlugin } from 'vite-plugin-mock';
+import viteVueDevTools from 'vite-plugin-vue-devtools';
+
+import { viteExtraAppConfigPlugin } from './extra-app-config';
+import { viteImportMapPlugin } from './importmap';
+import { viteInjectAppLoadingPlugin } from './inject-app-loading';
+
+import type {
+  AppcationPluginOptions,
+  CommonPluginOptions,
+  ConditionPlugin,
+  LibraryPluginOptions,
+} from '../typing';
+
+/**
+ * 获取条件成立的 vite 插件
+ * @param conditionPlugins
+ */
+async function getConditionEstablishedPlugins(
+  conditionPlugins: ConditionPlugin[],
+) {
+  const plugins: PluginOption[] = [];
+  for (const conditionPlugin of conditionPlugins) {
+    if (conditionPlugin.condition) {
+      const realPlugins = await conditionPlugin.plugins();
+      plugins.push(...realPlugins);
+    }
+  }
+  return plugins.flat();
+}
+
+/**
+ * 根据条件获取通用的vite插件
+ */
+async function getCommonConditionPlugins(
+  options: CommonPluginOptions,
+): Promise<ConditionPlugin[]> {
+  const { devtools, isBuild, visualizer } = options;
+  return [
+    {
+      condition: true,
+      plugins: () => [
+        viteVue({
+          script: {
+            defineModel: true,
+            // propsDestructure: true,
+          },
+        }),
+        viteVueJsx(),
+      ],
+    },
+    {
+      condition: !isBuild && devtools,
+      plugins: () => [viteVueDevTools()],
+    },
+    {
+      condition: isBuild && !!visualizer,
+      plugins: () => [<PluginOption>viteVisualizerPlugin({
+          filename: './node_modules/.cache/visualizer/stats.html',
+          gzipSize: true,
+          open: true,
+        })],
+    },
+  ];
+}
+
+/**
+ * 根据条件获取应用类型的vite插件
+ */
+async function getApplicationConditionPlugins(
+  options: AppcationPluginOptions,
+): Promise<PluginOption[]> {
+  // 单独取，否则commonOptions拿不到
+  const isBuild = options.isBuild;
+
+  const {
+    compress,
+    compressTypes,
+    extraAppConfig,
+
+    html,
+    i18n,
+    importmap,
+    importmapOptions,
+    injectAppLoading,
+    mock,
+    turboConsole,
+    ...commonOptions
+  } = options;
+
+  const commonPlugins = await getCommonConditionPlugins(commonOptions);
+
+  return await getConditionEstablishedPlugins([
+    ...commonPlugins,
+    {
+      condition: i18n,
+      plugins: async () => {
+        const pkg = await getPackage('@vben/locales');
+        const include = `${join(pkg?.dir ?? '', isBuild ? 'dist' : 'src', 'langs')}/*.yaml`;
+        return [
+          viteVueI18nPlugin({
+            compositionOnly: true,
+            fullInstall: true,
+            include,
+            runtimeOnly: true,
+          }),
+        ];
+      },
+    },
+    {
+      condition: injectAppLoading,
+      plugins: async () => [await viteInjectAppLoadingPlugin()],
+    },
+    {
+      condition: isBuild && !!compress,
+      plugins: () => {
+        const compressPlugins: PluginOption[] = [];
+        if (compressTypes?.includes('brotli')) {
+          compressPlugins.push(
+            viteCompressPlugin({ deleteOriginFile: false, ext: '.br' }),
+          );
+        }
+        if (compressTypes?.includes('gzip')) {
+          compressPlugins.push(
+            viteCompressPlugin({ deleteOriginFile: false, ext: '.gz' }),
+          );
+        }
+        return compressPlugins;
+      },
+    },
+    {
+      condition: !!html,
+      plugins: () => [viteHtmlPlugin({ minify: true })],
+    },
+
+    {
+      condition: isBuild && importmap,
+      plugins: () => {
+        return [viteImportMapPlugin(importmapOptions)];
+      },
+    },
+    {
+      condition: isBuild && extraAppConfig,
+      plugins: async () => [
+        await viteExtraAppConfigPlugin({ isBuild: true, root: process.cwd() }),
+      ],
+    },
+    {
+      condition: !isBuild && !!turboConsole,
+      plugins: () => [viteTurboConsolePlugin()],
+    },
+    {
+      condition: !!mock,
+      plugins: () => [
+        viteMockPlugin({
+          enable: true,
+          ignore: /^_/,
+          mockPath: 'mock',
+        }),
+      ],
+    },
+  ]);
+}
+
+/**
+ * 根据条件获取库类型的vite插件
+ */
+async function getLibraryConditionPlugins(
+  options: LibraryPluginOptions,
+): Promise<PluginOption[]> {
+  // 单独取，否则commonOptions拿不到
+  const isBuild = options.isBuild;
+  const { dts, injectLibCss, ...commonOptions } = options;
+  const commonPlugins = await getCommonConditionPlugins(commonOptions);
+  return await getConditionEstablishedPlugins([
+    ...commonPlugins,
+    {
+      condition: isBuild && !!dts,
+      plugins: () => [viteDtsPlugin({ logLevel: 'error' })],
+    },
+    {
+      condition: injectLibCss,
+      plugins: () => [viteLibInjectCss()],
+    },
+  ]);
+}
+
+export {
+  getApplicationConditionPlugins,
+  getLibraryConditionPlugins,
+  viteCompressPlugin,
+  viteDtsPlugin,
+  viteHtmlPlugin,
+  viteMockPlugin,
+  viteTurboConsolePlugin,
+  viteVisualizerPlugin,
+};

internal/vite-config/src/plugins/inject-app-loading/README.md

@@ -0,0 +1,3 @@
+# inject-app-loading
+
+用于在应用加载时显示加载动画的插件。可自行选择加载动画的样式。

internal/vite-config/src/plugins/inject-app-loading/index.ts

@@ -0,0 +1,46 @@
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { fs } from '@vben/node-utils';
+import { type PluginOption } from 'vite';
+
+/**
+ * 用于生成将loading样式注入到项目中
+ * 为多app提供loading样式，无需在每个 app -> index.html单独引入
+ */
+async function viteInjectAppLoadingPlugin(): Promise<PluginOption | undefined> {
+  const loadingHtml = await getLoadingRawByHtmlTemplate();
+
+  if (!loadingHtml) {
+    return;
+  }
+
+  return {
+    enforce: 'pre',
+    name: 'vite:inject-app-loading',
+    transformIndexHtml: {
+      handler(html) {
+        const re = /<div\s*id\s*=\s*"app"\s*>(\s*)<\/div>/;
+        html = html.replace(re, `<div id="app">${loadingHtml}</div>`);
+        return html;
+      },
+      order: 'pre',
+    },
+  };
+}
+
+/**
+ * 用于获取loading的html模板
+ */
+async function getLoadingRawByHtmlTemplate() {
+  const __dirname = fileURLToPath(new URL('.', import.meta.url));
+  const loadingPath = join(__dirname, './loading.html');
+  if (!fs.existsSync(loadingPath)) {
+    return;
+  }
+
+  const htmlRaw = await fs.readFile(loadingPath, 'utf8');
+  return htmlRaw;
+}
+
+export { viteInjectAppLoadingPlugin };

internal/vite-config/src/plugins/inject-app-loading/loading-antd.html

@@ -0,0 +1,102 @@
+<style>
+  html {
+    /* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
+    line-height: 1.15;
+  }
+
+  .dark .loading {
+    background-color: #2c344a;
+  }
+
+  .dark .loading .title {
+    color: rgb(255 255 255 / 85%);
+  }
+
+  .loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: #f4f7f9;
+  }
+
+  .loading .dots {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 98px;
+  }
+
+  .loading .title {
+    margin-top: 36px;
+    font-size: 30px;
+    font-weight: 600;
+    color: rgb(0 0 0 / 85%);
+  }
+
+  .dot {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-block;
+    width: 48px;
+    height: 48px;
+    margin-top: 30px;
+    font-size: 32px;
+    transform: rotate(45deg);
+    animation: rotate-ani 1.2s infinite linear;
+  }
+
+  .dot i {
+    position: absolute;
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-color: #0065cc;
+    border-radius: 100%;
+    opacity: 0.3;
+    transform: scale(0.75);
+    transform-origin: 50% 50%;
+    animation: spin-move-ani 1s infinite linear alternate;
+  }
+
+  .dot i:nth-child(1) {
+    top: 0;
+    left: 0;
+  }
+
+  .dot i:nth-child(2) {
+    top: 0;
+    right: 0;
+    animation-delay: 0.4s;
+  }
+
+  .dot i:nth-child(3) {
+    right: 0;
+    bottom: 0;
+    animation-delay: 0.8s;
+  }
+
+  .dot i:nth-child(4) {
+    bottom: 0;
+    left: 0;
+    animation-delay: 1.2s;
+  }
+
+  @keyframes rotate-ani {
+    to {
+      transform: rotate(405deg);
+    }
+  }
+
+  @keyframes spin-move-ani {
+    to {
+      opacity: 1;
+    }
+  }
+</style>
+<div class="loading">
+  <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+  <div class="title"><%= VITE_GLOB_APP_TITLE %></div>
+</div>

internal/vite-config/src/plugins/inject-app-loading/loading.html

@@ -0,0 +1,102 @@
+<style>
+  html {
+    /* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
+    line-height: 1.15;
+  }
+
+  .loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: #f4f7f9;
+  }
+
+  .dark .loading {
+    background: #101827;
+  }
+
+  .title {
+    margin-top: 66px;
+    font-size: 30px;
+    font-weight: 600;
+    color: rgb(0 0 0 / 85%);
+  }
+
+  .dark .title {
+    color: #fff;
+  }
+
+  .loader {
+    position: relative;
+    width: 48px;
+    height: 48px;
+  }
+
+  .loader::before {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    width: 48px;
+    height: 5px;
+    content: '';
+    background: #0065cc50;
+    border-radius: 50%;
+    animation: shadow-ani 0.5s linear infinite;
+  }
+
+  .loader::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    content: '';
+    background: #0065cc;
+    border-radius: 4px;
+    animation: jump-ani 0.5s linear infinite;
+  }
+
+  @keyframes jump-ani {
+    15% {
+      border-bottom-right-radius: 3px;
+    }
+
+    25% {
+      transform: translateY(9px) rotate(22.5deg);
+    }
+
+    50% {
+      border-bottom-right-radius: 40px;
+      transform: translateY(18px) scale(1, 0.9) rotate(45deg);
+    }
+
+    75% {
+      transform: translateY(9px) rotate(67.5deg);
+    }
+
+    100% {
+      transform: translateY(0) rotate(90deg);
+    }
+  }
+
+  @keyframes shadow-ani {
+    0%,
+    100% {
+      transform: scale(1, 1);
+    }
+
+    50% {
+      transform: scale(1.2, 1);
+    }
+  }
+</style>
+<div class="loading">
+  <div class="loader"></div>
+  <div class="title"><%= VITE_GLOB_APP_TITLE %></div>
+</div>