From 694dead3115a535782b7dd3a3c2dc4eaa9f32d76 Mon Sep 17 00:00:00 2001 From: invalid w Date: Sun, 8 Oct 2023 18:09:59 +0800 Subject: [PATCH] Revert "refactor: use `unplugin-config` (#3106)" This reverts commit a712a8e5a088da59b32343eb23819ea9040830ef. --- internal/vite-config/package.json | 1 - internal/vite-config/src/plugins/appConfig.ts | 113 +++++++++++++++--- internal/vite-config/src/plugins/index.ts | 6 +- internal/vite-config/src/utils/hash.ts | 10 +- pnpm-lock.yaml | 54 --------- 5 files changed, 102 insertions(+), 82 deletions(-) diff --git a/internal/vite-config/package.json b/internal/vite-config/package.json index bd5f650e5..e3e1c377a 100644 --- a/internal/vite-config/package.json +++ b/internal/vite-config/package.json @@ -48,7 +48,6 @@ "rollup-plugin-visualizer": "^5.9.2", "sass": "^1.63.6", "unocss": "^0.53.4", - "unplugin-config": "^0.0.13", "vite-plugin-compression": "^0.5.1", "vite-plugin-dts": "^3.1.0", "vite-plugin-html": "^3.2.0", diff --git a/internal/vite-config/src/plugins/appConfig.ts b/internal/vite-config/src/plugins/appConfig.ts index d1b27abcf..7d5066236 100644 --- a/internal/vite-config/src/plugins/appConfig.ts +++ b/internal/vite-config/src/plugins/appConfig.ts @@ -1,21 +1,104 @@ -import GenerateConfig from 'unplugin-config/vite'; +import colors from 'picocolors'; +import { readPackageJSON } from 'pkg-types'; import { type PluginOption } from 'vite'; import { getEnvConfig } from '../utils/env'; -import { strToHex } from '../utils/hash'; +import { createContentHash } from '../utils/hash'; const GLOBAL_CONFIG_FILE_NAME = '_app.config.js'; -// This constant sets the output directory for the Vite package -const OUTPUT_DIR = 'dist'; -const config: any = getEnvConfig().then(); -const APP_NAME = strToHex(config?.VITE_GLOB_APP_TITLE ?? 'Vben Admin'); -export function createConfigPluginConfig(shouldGenerateConfig: boolean): PluginOption { - // https://github.com/kirklin/unplugin-config - return GenerateConfig({ - disabledConfig: !shouldGenerateConfig, - globConfigFileName: GLOBAL_CONFIG_FILE_NAME, - outputDir: OUTPUT_DIR, - appName: APP_NAME, - envConfigPrefix: 'VITE_GLOB_', - }); +const PLUGIN_NAME = 'app-config'; + +async function createAppConfigPlugin({ + root, + isBuild, +}: { + root: string; + isBuild: boolean; +}): Promise { + let publicPath: string; + let source: string; + if (!isBuild) { + return { + name: PLUGIN_NAME, + }; + } + const { version = '' } = await readPackageJSON(root); + + return { + name: PLUGIN_NAME, + async configResolved(_config) { + const appTitle = _config?.env?.VITE_GLOB_APP_TITLE ?? ''; + // appTitle = appTitle.replace(/\s/g, '_').replace(/-/g, '_'); + publicPath = _config.base; + source = await getConfigSource(appTitle); + }, + async transformIndexHtml(html) { + publicPath = publicPath.endsWith('/') ? publicPath : `${publicPath}/`; + + const appConfigSrc = `${ + publicPath || '/' + }${GLOBAL_CONFIG_FILE_NAME}?v=${version}-${createContentHash(source)}`; + + return { + html, + tags: [ + { + tag: 'script', + attrs: { + src: appConfigSrc, + }, + }, + ], + }; + }, + async generateBundle() { + try { + this.emitFile({ + type: 'asset', + fileName: GLOBAL_CONFIG_FILE_NAME, + source, + }); + + console.log(colors.cyan(`✨configuration file is build successfully!`)); + } catch (error) { + console.log( + colors.red('configuration file configuration file failed to package:\n' + error), + ); + } + }, + }; } + +/** + * Get the configuration file variable name + * @param env + */ +const getVariableName = (title: string) => { + function strToHex(str: string) { + const result: string[] = []; + for (let i = 0; i < str.length; ++i) { + const hex = str.charCodeAt(i).toString(16); + result.push(('000' + hex).slice(-4)); + } + return result.join('').toUpperCase(); + } + return `__PRODUCTION__${strToHex(title) || '__APP'}__CONF__`.toUpperCase().replace(/\s/g, ''); +}; + +async function getConfigSource(appTitle: string) { + const config = await getEnvConfig(); + const variableName = getVariableName(appTitle); + const windowVariable = `window.${variableName}`; + // Ensure that the variable will not be modified + let source = `${windowVariable}=${JSON.stringify(config)};`; + source += ` + Object.freeze(${windowVariable}); + Object.defineProperty(window, "${variableName}", { + configurable: false, + writable: false, + }); + `.replace(/\s/g, ''); + return source; +} + +export { createAppConfigPlugin }; diff --git a/internal/vite-config/src/plugins/index.ts b/internal/vite-config/src/plugins/index.ts index a65c0452b..b13fb399e 100644 --- a/internal/vite-config/src/plugins/index.ts +++ b/internal/vite-config/src/plugins/index.ts @@ -3,7 +3,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx'; import { type PluginOption } from 'vite'; import purgeIcons from 'vite-plugin-purge-icons'; -import { createConfigPluginConfig } from './appConfig'; +import { createAppConfigPlugin } from './appConfig'; import { configCompressPlugin } from './compress'; import { configHtmlPlugin } from './html'; import { configMockPlugin } from './mock'; @@ -18,10 +18,10 @@ interface Options { enableAnalyze?: boolean; } -async function createPlugins({ isBuild, enableMock, compress, enableAnalyze }: Options) { +async function createPlugins({ isBuild, root, enableMock, compress, enableAnalyze }: Options) { const vitePlugins: (PluginOption | PluginOption[])[] = [vue(), vueJsx()]; - const appConfigPlugin = await createConfigPluginConfig(isBuild); + const appConfigPlugin = await createAppConfigPlugin({ root, isBuild }); vitePlugins.push(appConfigPlugin); // vite-plugin-html diff --git a/internal/vite-config/src/utils/hash.ts b/internal/vite-config/src/utils/hash.ts index 0b5a7c976..83dc0fde7 100644 --- a/internal/vite-config/src/utils/hash.ts +++ b/internal/vite-config/src/utils/hash.ts @@ -4,13 +4,5 @@ function createContentHash(content: string, hashLSize = 12) { const hash = createHash('sha256').update(content); return hash.digest('hex').slice(0, hashLSize); } -function strToHex(str: string) { - const result: string[] = []; - for (let i = 0; i < str.length; ++i) { - const hex = str.charCodeAt(i).toString(16); - result.push(('000' + hex).slice(-4)); - } - return result.join('').toUpperCase(); -} -export { createContentHash, strToHex }; +export { createContentHash }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c882ff73f..d341f02a2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -434,9 +434,6 @@ importers: unocss: specifier: ^0.53.4 version: 0.53.4(postcss@8.4.24)(rollup@2.79.1)(vite@4.4.0) - unplugin-config: - specifier: ^0.0.13 - version: 0.0.13(rollup@2.79.1)(vite@4.4.0) vite-plugin-compression: specifier: ^0.5.1 version: 0.5.1(vite@4.4.0) @@ -1942,10 +1939,6 @@ packages: '@jridgewell/resolve-uri': 3.1.1 '@jridgewell/sourcemap-codec': 1.4.15 - /@kirklin/logger@0.0.2: - resolution: {integrity: sha512-CGZ9HGmHGTcGnU8CDQm7RR7hZgxLyRHTIFpS1FDCQkVaipdL/poq72ibpKqqQflomgKRCYV6GReP7ZXEZeDx1w==} - dev: true - /@logicflow/core@1.2.9: resolution: {integrity: sha512-3He1BXLYB+5bzgl28hZ24akLebPBGbnmNSvmKWZZdKn9jHVvqPbE3Yt3XEKzwTwSP92yPnGtkzx2FOOEgXa0iQ==} dependencies: @@ -11307,44 +11300,6 @@ packages: resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==} engines: {node: '>= 0.8'} - /unplugin-config@0.0.13(rollup@2.79.1)(vite@4.4.0): - resolution: {integrity: sha512-VZyYzjzhNgXl/K7XrJshHZ0unex0vMH98KFtBckqiGUhxhY0yavQjGsA5sOAQgkuiFEJ+ZwdOdaQPwhMlrEfbg==} - peerDependencies: - '@nuxt/kit': ^3 - '@nuxt/schema': ^3 - esbuild: '*' - rollup: ^3 - vite: '>=3' - webpack: ^4 || ^5 - peerDependenciesMeta: - '@nuxt/kit': - optional: true - '@nuxt/schema': - optional: true - esbuild: - optional: true - rollup: - optional: true - vite: - optional: true - webpack: - optional: true - dependencies: - '@kirklin/logger': 0.0.2 - rollup: 2.79.1 - unplugin: 1.5.0 - vite: 4.4.0(@types/node@20.4.0)(less@4.1.3)(sass@1.63.6) - dev: true - - /unplugin@1.5.0: - resolution: {integrity: sha512-9ZdRwbh/4gcm1JTOkp9lAkIDrtOyOxgHmY7cjuwI8L/2RTikMcVG25GsZwNAgRuap3iDw2jeq7eoqtAsz5rW3A==} - dependencies: - acorn: 8.10.0 - chokidar: 3.5.3 - webpack-sources: 3.2.3 - webpack-virtual-modules: 0.5.0 - dev: true - /unset-value@1.0.0: resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==} engines: {node: '>=0.10.0'} @@ -11835,15 +11790,6 @@ packages: engines: {node: '>=10.4'} dev: false - /webpack-sources@3.2.3: - resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==} - engines: {node: '>=10.13.0'} - dev: true - - /webpack-virtual-modules@0.5.0: - resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==} - dev: true - /whatwg-encoding@1.0.5: resolution: {integrity: sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==} dependencies: