refactor(project): @vben/vite-connect is reconfigured to support synchronization

internal/vite-config/src/config/application.ts

@@ -7,10 +7,11 @@ import { defineConfig, loadEnv, mergeConfig } from 'vite';
 import { loadApplicationPlugins } from '../plugins';
 import { getCommonConfig } from './common';
 
-function defineApplicationConfig(options: DefineApplicationOptions = {}) {
+function defineApplicationConfig(userConfigPromise: DefineApplicationOptions) {
   return defineConfig(async (config) => {
+    const options = await userConfigPromise?.(config);
     const { command, mode } = config;
-    const { application = {}, vite = {} } = options;
+    const { application = {}, vite = {} } = options || {};
     const root = process.cwd();
     const isBuild = command === 'build';
     const env = loadEnv(mode, root);
@@ -30,9 +31,7 @@ function defineApplicationConfig(options: DefineApplicationOptions = {}) {
       mode,
       pwa: true,
       turboConsole: false,
-      ...(typeof application === 'function'
-        ? await application(config)
-        : application),
+      ...application,
     });
 
     const applicationConfig: UserConfig = {
@@ -69,10 +68,7 @@ function defineApplicationConfig(options: DefineApplicationOptions = {}) {
       await getCommonConfig(),
       applicationConfig,
     );
-    return mergeConfig(
-      mergedConfig,
-      typeof vite === 'function' ? await vite(config) : vite,
-    );
+    return mergeConfig(mergedConfig, vite);
   });
 }
 

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

@@ -9,9 +9,10 @@ import { defineLibraryConfig } from './library';
 export * from './application';
 export * from './library';
 
-function defineConfig(options: DefineConfig = {}) {
-  const { type = 'auto', ...defineOptions } = options;
-
+function defineConfig(
+  userConfigPromise?: DefineConfig,
+  type: 'application' | 'auto' | 'library' = 'auto',
+) {
   let projectType = type;
 
   // 根据包是否存在 index.html,自动判断类型
@@ -22,10 +23,10 @@ function defineConfig(options: DefineConfig = {}) {
 
   switch (projectType) {
     case 'application': {
-      return defineApplicationConfig(defineOptions);
+      return defineApplicationConfig(userConfigPromise);
     }
     case 'library': {
-      return defineLibraryConfig(defineOptions);
+      return defineLibraryConfig(userConfigPromise);
     }
     default: {
       throw new Error(`Unsupported project type: ${projectType}`);

internal/vite-config/src/config/library.ts

@@ -1,4 +1,4 @@
-import type { UserConfig } from 'vite';
+import type { ConfigEnv, UserConfig } from 'vite';
 
 import type { DefineLibraryOptions } from '../typing';
 
@@ -9,11 +9,12 @@ import { defineConfig, mergeConfig } from 'vite';
 import { loadLibraryPlugins } from '../plugins';
 import { getCommonConfig } from './common';
 
-function defineLibraryConfig(options: DefineLibraryOptions = {}) {
-  return defineConfig(async (config) => {
+function defineLibraryConfig(userConfigPromise: DefineLibraryOptions) {
+  return defineConfig(async (config: ConfigEnv) => {
+    const options = await userConfigPromise?.(config);
     const { command, mode } = config;
     const root = process.cwd();
-    const { library = {}, vite = {} } = options;
+    const { library = {}, vite = {} } = options || {};
     const isBuild = command === 'build';
 
     const plugins = await loadLibraryPlugins({
@@ -22,7 +23,7 @@ function defineLibraryConfig(options: DefineLibraryOptions = {}) {
       injectMetadata: true,
       isBuild,
       mode,
-      ...(typeof library === 'function' ? await library(config) : library),
+      ...library,
     });
 
     const { dependencies = {}, peerDependencies = {} } =
@@ -52,10 +53,7 @@ function defineLibraryConfig(options: DefineLibraryOptions = {}) {
     };
     const commonConfig = await getCommonConfig();
     const mergedConfig = mergeConfig(commonConfig, packageConfig);
-    return mergeConfig(
-      mergedConfig,
-      typeof vite === 'function' ? await vite(config) : vite,
-    );
+    return mergeConfig(mergedConfig, vite);
   });
 }
 

internal/vite-config/src/index.ts

@@ -1,3 +1,4 @@
 export * from './config';
+export * from './options';
 export * from './plugins';
 export { loadAndConvertEnv } from './utils/env';

internal/vite-config/src/options.ts

@@ -0,0 +1,42 @@
+import type { Options as PwaPluginOptions } from 'vite-plugin-pwa';
+
+import type { ImportmapPluginOptions } from './typing';
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+const getDefaultPwaOptions = (name: string): Partial<PwaPluginOptions> => ({
+  manifest: {
+    description:
+      'Vben Admin Pro is a modern admin dashboard template based on Vue 3. ',
+    icons: [
+      {
+        sizes: '192x192',
+        src: 'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.3/source/pwa-icon-192.png',
+        type: 'image/png',
+      },
+      {
+        sizes: '512x512',
+        src: 'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.3/source/pwa-icon-512.png',
+        type: 'image/png',
+      },
+    ],
+    name: `${name}o${isDevelopment ? ' dev' : ''}`,
+    short_name: `${name}${isDevelopment ? ' dev' : ''}`,
+  },
+});
+
+const defaultImportmapOptions: ImportmapPluginOptions = {
+  // 通过 Importmap CDN 方式引入,
+  // 目前只有esm.sh源兼容性好一点，jspm.io对于 esm 入口要求高
+  defaultProvider: 'esm.sh',
+  importmap: [
+    { name: 'vue' },
+    { name: 'pinia' },
+    { name: 'vue-router' },
+    { name: 'vue-i18n' },
+    { name: 'dayjs' },
+    { name: 'vue-demi' },
+  ],
+};
+
+export { defaultImportmapOptions, getDefaultPwaOptions };

internal/vite-config/src/plugins/inject-metadata.ts

@@ -44,7 +44,7 @@ async function resolveMonorepoDependencies() {
 async function viteMetadataPlugin(
   root = process.cwd(),
 ): Promise<PluginOption | undefined> {
-  const { author, description, homepage, license, repository, version } =
+  const { author, description, homepage, license, version } =
     await readPackageJSON(root);
 
   const buildTime = dateUtil().format('YYYY-MM-DD HH:mm:ss');
@@ -53,8 +53,6 @@ async function viteMetadataPlugin(
     async config() {
       const { dependencies, devDependencies } =
         await resolveMonorepoDependencies();
-      const repositoryUrl =
-        typeof repository === 'object' ? repository.url : repository;
 
       const isAuthorObject = typeof author === 'object';
       const authorName = isAuthorObject ? author.name : author;
@@ -73,7 +71,6 @@ async function viteMetadataPlugin(
             devDependencies,
             homepage,
             license,
-            repositoryUrl,
             version,
           }),
         },

internal/vite-config/src/typing.ts

@@ -91,22 +91,17 @@ interface ApplicationOptions extends ApplicationPluginOptions {}
 
 interface LibraryOptions extends LibraryPluginOptions {}
 
-interface DefineApplicationOptions {
-  application?:
-    | ((config: ConfigEnv) => Promise<ApplicationOptions>)
-    | ApplicationOptions;
-  vite?: ((config: ConfigEnv) => Promise<UserConfig>) | UserConfig;
-}
+type DefineApplicationOptions = (config?: ConfigEnv) => Promise<{
+  application?: ApplicationOptions;
+  vite?: UserConfig;
+}>;
 
-interface DefineLibraryOptions {
-  library?: ((config: ConfigEnv) => Promise<LibraryOptions>) | LibraryOptions;
-  vite?: ((config: ConfigEnv) => Promise<UserConfig>) | UserConfig;
-}
+type DefineLibraryOptions = (config?: ConfigEnv) => Promise<{
+  library?: LibraryOptions;
+  vite?: UserConfig;
+}>;
 
-type DefineConfig = {
-  type?: 'application' | 'auto' | 'library';
-} & DefineApplicationOptions &
-  DefineLibraryOptions;
+type DefineConfig = DefineApplicationOptions | DefineLibraryOptions;
 
 export type {
   ApplicationPluginOptions,

internal/vite-config/src/utils/env.ts

@@ -54,7 +54,9 @@ async function loadEnv<T = Record<string, string>>(
 async function loadAndConvertEnv(
   match = 'VITE_',
   confFiles = getConfFiles(),
-): Promise<Partial<ApplicationPluginOptions>> {
+): Promise<
+  { appTitle: string; port: number } & Partial<ApplicationPluginOptions>
+> {
   const envConfig = await loadEnv(match, confFiles);
   const visualizer = envConfig.visualizer || '';
   const pwa = envConfig.pwa || '';
@@ -63,8 +65,10 @@ async function loadAndConvertEnv(
     .split(',')
     .filter((item) => ['brotli', 'gzip'].includes(item));
   return {
+    appTitle: envConfig?.VITE_GLOB_APP_TITLE ?? 'Vben Admin Pro',
     compress: !!compress,
     compressTypes: compressTypes as ('brotli' | 'gzip')[],
+    port: Number(envConfig.VITE_PORT) || 5173,
     pwa: !!pwa,
     visualizer: !!visualizer,
   };