@kengic/vue 0.21.4-beta.2 → 0.21.5-beta.0

package/dist/project/build/config/themeConfig.ts

@@ -0,0 +1,67 @@
+import { generate } from '@ant-design/colors';
+
+export const primaryColor = '#1890FF';
+
+export const darkMode = 'light';
+
+type Fn = (...arg: any) => any;
+
+type GenerateTheme = 'default' | 'dark';
+
+export interface GenerateColorsParams {
+    mixLighten: Fn;
+    mixDarken: Fn;
+    tinycolor: any;
+    color?: string;
+}
+
+export function generateAntColors(color: string, theme: GenerateTheme = 'default') {
+    return generate(color, {
+        theme,
+    });
+}
+
+export function getThemeColors(color?: string) {
+    const tc = color || primaryColor;
+    const lightColors = generateAntColors(tc);
+    const primary = lightColors[5];
+    const modeColors = generateAntColors(primary, 'dark');
+
+    return [...lightColors, ...modeColors];
+}
+
+export function generateColors({ color = primaryColor, mixLighten, mixDarken, tinycolor }: GenerateColorsParams) {
+    const arr = new Array(19).fill(0);
+    const lightens = arr.map((_t, i) => {
+        return mixLighten(color, i / 5);
+    });
+
+    const darkens = arr.map((_t, i) => {
+        return mixDarken(color, i / 5);
+    });
+
+    const alphaColors = arr.map((_t, i) => {
+        return tinycolor(color)
+            .setAlpha(i / 20)
+            .toRgbString();
+    });
+
+    const shortAlphaColors = alphaColors.map((item) => item.replace(/\s/g, '').replace(/0\./g, '.'));
+
+    const tinycolorLightens = arr
+        .map((_t, i) => {
+            return tinycolor(color)
+                .lighten(i * 5)
+                .toHexString();
+        })
+        .filter((item) => item !== '#ffffff');
+
+    const tinycolorDarkens = arr
+        .map((_t, i) => {
+            return tinycolor(color)
+                .darken(i * 5)
+                .toHexString();
+        })
+        .filter((item) => item !== '#000000');
+    return [...lightens, ...darkens, ...alphaColors, ...shortAlphaColors, ...tinycolorDarkens, ...tinycolorLightens].filter((item) => !item.includes('-'));
+}

package/dist/project/build/constant.ts

@@ -0,0 +1,6 @@
+/**
+ * The name of the configuration file entered in the production environment
+ */
+export const GLOB_CONFIG_FILE_NAME = '_app.config.js';
+
+export const OUTPUT_DIR = 'dist';

package/dist/project/build/generate/generateModifyVars.ts

@@ -0,0 +1,39 @@
+import { getThemeVariables } from 'ant-design-vue/dist/theme';
+import { resolve } from 'path';
+import { generateAntColors, primaryColor } from '../config/themeConfig';
+
+/**
+ * less global variable
+ */
+export function generateModifyVars(dark = false) {
+    const palettes = generateAntColors(primaryColor);
+    const primary = palettes[5];
+
+    const primaryColorObj: Record<string, string> = {};
+
+    for (let index = 0; index < 10; index++) {
+        primaryColorObj[`primary-${index + 1}`] = palettes[index];
+    }
+
+    const modifyVars = getThemeVariables({ dark });
+    return {
+        ...modifyVars,
+        // Used for global import to avoid the need to import each style file separately
+        // reference:  Avoid repeated references
+        hack: `${modifyVars.hack} @import (reference) "${resolve('src/design/config.less')}";`,
+        'primary-color': primary,
+        ...primaryColorObj,
+        'info-color': primary,
+        'processing-color': primary,
+        'success-color': '#55D187', //  Success color
+        'error-color': '#ED6F6F', //  False color
+        'warning-color': '#EFBD47', //   Warning color
+        //'border-color-base': '#EEEEEE',
+        'font-size-base': '14px', //  Main font size
+        'border-radius-base': '3px', //  Component/float fillet
+        'link-color': primary, //   Link color
+        'app-content-background': '#fafafa', //   Link color
+        'table-padding-vertical': '12px',
+        'table-padding-horizontal': '12px',
+    };
+}

package/dist/project/build/generate/icon/index.ts

@@ -0,0 +1,66 @@
+import fs from 'fs-extra';
+import inquirer from 'inquirer';
+import path from 'path';
+
+async function generateIcon() {
+    const dir = path.resolve(process.cwd(), 'node_modules/@iconify/json');
+
+    const raw = await fs.readJSON(path.join(dir, 'collections.json'));
+
+    const collections = Object.entries(raw).map(([id, v]) => ({
+        ...(v as any),
+        id,
+    }));
+
+    const choices = collections.map((item) => ({ key: item.id, value: item.id, name: item.name }));
+
+    inquirer
+        .prompt([
+            {
+                type: 'list',
+                name: 'useType',
+                choices: [
+                    { key: 'local', value: 'local', name: 'Local' },
+                    { key: 'onLine', value: 'onLine', name: 'OnLine' },
+                ],
+                message: 'How to use icons?',
+            },
+            {
+                type: 'list',
+                name: 'iconSet',
+                choices: choices,
+                message: 'Select the icon set that needs to be generated?',
+            },
+            {
+                type: 'input',
+                name: 'output',
+                message: 'Select the icon set that needs to be generated?',
+                default: 'src/components/Icon/data',
+            },
+        ])
+        .then(async (answers) => {
+            const { iconSet, output, useType } = answers;
+            const outputDir = path.resolve(process.cwd(), output);
+            fs.ensureDir(outputDir);
+            const genCollections = collections.filter((item) => [iconSet].includes(item.id));
+            const prefixSet: string[] = [];
+            for (const info of genCollections) {
+                const data = await fs.readJSON(path.join(dir, 'json', `${info.id}.json`));
+                if (data) {
+                    const { prefix } = data;
+                    const isLocal = useType === 'local';
+                    const icons = Object.keys(data.icons).map((item) => `${isLocal ? prefix + ':' : ''}${item}`);
+
+                    await fs.writeFileSync(
+                        path.join(output, `icons.data.ts`),
+                        `export default ${isLocal ? JSON.stringify(icons) : JSON.stringify({ prefix, icons })}`,
+                    );
+                    prefixSet.push(prefix);
+                }
+            }
+            fs.emptyDir(path.join(process.cwd(), 'node_modules/.vite'));
+            console.log(`✨` + ' - Icon generated successfully:' + `[${prefixSet}]`);
+        });
+}
+
+generateIcon();

package/dist/project/build/getConfigFileName.ts

@@ -0,0 +1,7 @@
+/**
+ * Get the configuration file variable name
+ * @param env
+ */
+export const getConfigFileName = (env: Record<string, any>) => {
+    return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`.toUpperCase().replace(/\s/g, '');
+};

package/dist/project/build/index.ts

@@ -0,0 +1,9 @@
+export * from './config/themeConfig';
+export * from './generate/generateModifyVars';
+export * from './script/buildConf';
+export * from './vite/plugin/index';
+export * from './vite/plugin/index';
+export * from './vite/proxy';
+export * from './constant';
+export * from './getConfigFileName';
+export * from './utils';

package/dist/project/build/script/buildConf.ts

@@ -0,0 +1,45 @@
+/**
+ * Generate additional configuration files when used for packaging. The file can be configured with some global variables, so that it can be changed directly externally without repackaging
+ */
+import fs, { writeFileSync } from 'fs-extra';
+import colors from 'picocolors';
+import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant';
+import { getConfigFileName } from '../getConfigFileName';
+
+import { getEnvConfig, getRootPath } from '../utils';
+
+interface CreateConfigParams {
+    configName: string;
+    config: any;
+    configFileName?: string;
+}
+
+function createConfig(params: CreateConfigParams) {
+    const { configName, config, configFileName } = params;
+    try {
+        const windowConf = `window.${configName}`;
+        // Ensure that the variable will not be modified
+        let configStr = `${windowConf}=${JSON.stringify(config)};`;
+        configStr += `
+      Object.freeze(${windowConf});
+      Object.defineProperty(window, "${configName}", {
+        configurable: false,
+        writable: false,
+      });
+    `.replace(/\s/g, '');
+
+        fs.mkdirp(getRootPath(OUTPUT_DIR));
+        writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr);
+
+        console.log(colors.cyan(`✨`) + ` - configuration file is build successfully:`);
+        console.log(colors.gray(OUTPUT_DIR + '/' + colors.green(configFileName)) + '\n');
+    } catch (error) {
+        console.log(colors.red('configuration file configuration file failed to package:\n' + error));
+    }
+}
+
+export function runBuildConfig() {
+    const config = getEnvConfig();
+    const configFileName = getConfigFileName(config);
+    createConfig({ config, configName: configFileName, configFileName: GLOB_CONFIG_FILE_NAME });
+}

package/dist/project/build/script/postBuild.ts

@@ -0,0 +1,21 @@
+// #!/usr/bin/env node
+
+import colors from 'picocolors';
+import { runBuildConfig } from './buildConf';
+
+export const runBuild = async () => {
+    try {
+        const argvList = process.argv.splice(2);
+
+        // Generate configuration file
+        if (!argvList.includes('disabled-config')) {
+            runBuildConfig();
+        }
+
+        console.log(`✨` + ' - build successfully!');
+    } catch (error) {
+        console.log(colors.red('vite build error:\n' + error));
+        process.exit(1);
+    }
+};
+runBuild();

package/dist/project/build/utils.ts

@@ -0,0 +1,92 @@
+import dotenv from 'dotenv';
+import fs from 'fs';
+import path from 'path';
+
+export function isDevFn(mode: string): boolean {
+    return mode === 'development';
+}
+
+export function isProdFn(mode: string): boolean {
+    return mode === 'production';
+}
+
+/**
+ * Whether to generate package preview
+ */
+export function isReportMode(): boolean {
+    return process.env.REPORT === 'true';
+}
+
+// Read all environment variable configuration files to process.env
+export function wrapperEnv(envConf: Recordable): ViteEnv {
+    const ret: any = {};
+
+    for (const envName of Object.keys(envConf)) {
+        let realName = envConf[envName].replace(/\\n/g, '\n');
+        realName = realName === 'true' ? true : realName === 'false' ? false : realName;
+
+        if (envName === 'VITE_PORT') {
+            realName = Number(realName);
+        }
+        if (envName === 'VITE_PROXY' && realName) {
+            try {
+                realName = JSON.parse(realName.replace(/'/g, '"'));
+            } catch (error) {
+                realName = '';
+            }
+        }
+        ret[envName] = realName;
+        if (typeof realName === 'string') {
+            process.env[envName] = realName;
+        } else if (typeof realName === 'object') {
+            process.env[envName] = JSON.stringify(realName);
+        }
+    }
+    return ret;
+}
+
+/**
+ * 获取当前环境下生效的配置文件名
+ */
+function getConfFiles() {
+    const script = process.env.npm_lifecycle_script;
+    const reg = new RegExp('--mode ([a-z_\\d]+)');
+    const result = reg.exec(script as string) as any;
+    if (result) {
+        const mode = result[1] as string;
+        return ['.env', `.env.${mode}`];
+    }
+    return ['.env', '.env.production'];
+}
+
+/**
+ * Get the environment variables starting with the specified prefix
+ * @param match prefix
+ * @param confFiles ext
+ */
+export function getEnvConfig(match = 'VITE_GLOB_', confFiles = getConfFiles()) {
+    let envConfig = {};
+    confFiles.forEach((item) => {
+        try {
+            const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item)));
+            envConfig = { ...envConfig, ...env };
+        } catch (e) {
+            console.error(`Error in parsing ${item}`, e);
+        }
+    });
+    const reg = new RegExp(`^(${match})`);
+    Object.keys(envConfig).forEach((key) => {
+        if (!reg.test(key)) {
+            Reflect.deleteProperty(envConfig, key);
+        }
+    });
+    return envConfig;
+}
+
+/**
+ * Get user root directory
+ * @param dir file path
+ */
+export function getRootPath(...dir: string[]) {
+    return path.resolve(process.cwd(), ...dir);
+}

package/dist/project/build/vite/plugin/compress.ts

@@ -0,0 +1,32 @@
+/**
+ * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
+ * https://github.com/anncwb/vite-plugin-compression
+ */
+import type { PluginOption } from 'vite';
+import compressPlugin from 'vite-plugin-compression';
+
+export function configCompressPlugin(compress: 'gzip' | 'brotli' | 'none', deleteOriginFile = false): PluginOption | PluginOption[] {
+    const compressList = compress.split(',');
+
+    const plugins: PluginOption[] = [];
+
+    if (compressList.includes('gzip')) {
+        plugins.push(
+            compressPlugin({
+                ext: '.gz',
+                deleteOriginFile,
+            }),
+        );
+    }
+
+    if (compressList.includes('brotli')) {
+        plugins.push(
+            compressPlugin({
+                ext: '.br',
+                algorithm: 'brotliCompress',
+                deleteOriginFile,
+            }),
+        );
+    }
+    return plugins;
+}

package/dist/project/build/vite/plugin/html.ts

@@ -0,0 +1,39 @@
+/**
+ * Plugin to minimize and use ejs template syntax in index.html.
+ * https://github.com/anncwb/vite-plugin-html
+ */
+import type { PluginOption } from 'vite';
+import { createHtmlPlugin } from 'vite-plugin-html';
+import { GLOB_CONFIG_FILE_NAME } from '../../constant';
+
+export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
+    const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
+
+    const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
+
+    const getAppConfigSrc = () => {
+        return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${new Date().getTime()}`;
+    };
+
+    const htmlPlugin: PluginOption[] = createHtmlPlugin({
+        minify: isBuild,
+        inject: {
+            // Inject data into ejs template
+            data: {
+                title: VITE_GLOB_APP_TITLE,
+            },
+            // Embed the generated app.config.js file
+            tags: isBuild
+                ? [
+                      {
+                          tag: 'script',
+                          attrs: {
+                              src: getAppConfigSrc(),
+                          },
+                      },
+                  ]
+                : [],
+        },
+    });
+    return htmlPlugin;
+}

package/dist/project/build/vite/plugin/imagemin.ts

@@ -0,0 +1,34 @@
+// Image resource files used to compress the output of the production environment
+// https://github.com/anncwb/vite-plugin-imagemin
+import viteImagemin from 'vite-plugin-imagemin';
+
+export function configImageminPlugin() {
+    const plugin = viteImagemin({
+        gifsicle: {
+            optimizationLevel: 7,
+            interlaced: false,
+        },
+        optipng: {
+            optimizationLevel: 7,
+        },
+        mozjpeg: {
+            quality: 20,
+        },
+        pngquant: {
+            quality: [0.8, 0.9],
+            speed: 4,
+        },
+        svgo: {
+            plugins: [
+                {
+                    name: 'removeViewBox',
+                },
+                {
+                    name: 'removeEmptyAttrs',
+                    active: false,
+                },
+            ],
+        },
+    });
+    return plugin;
+}

package/dist/project/build/vite/plugin/index.ts

@@ -0,0 +1,80 @@
+import legacy from '@vitejs/plugin-legacy';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import { PluginOption } from 'vite';
+import VitePluginCertificate from 'vite-plugin-mkcert';
+import OptimizationPersist from 'vite-plugin-optimize-persist';
+import PkgConfig from 'vite-plugin-package-config';
+import purgeIcons from 'vite-plugin-purge-icons';
+import vueSetupExtend from 'vite-plugin-vue-setup-extend';
+import windiCSS from 'vite-plugin-windicss';
+import { configCompressPlugin } from './compress';
+import { configHtmlPlugin } from './html';
+import { configImageminPlugin } from './imagemin';
+import { configMockPlugin } from './mock';
+import { configPwaConfig } from './pwa';
+import { configStyleImportPlugin } from './styleImport';
+import { configSvgIconsPlugin } from './svgSprite';
+import { configThemePlugin } from './theme';
+import { configVisualizerConfig } from './visualizer';
+
+export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
+    const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
+
+    const vitePlugins: (PluginOption | PluginOption[])[] = [
+        // have to
+        vue(),
+        // have to
+        vueJsx(),
+        // support name
+        vueSetupExtend(),
+        // @ts-ignore
+        VitePluginCertificate({
+            source: 'coding',
+        }),
+    ];
+
+    // vite-plugin-windicss
+    vitePlugins.push(windiCSS());
+
+    // @vitejs/plugin-legacy
+    VITE_LEGACY && isBuild && vitePlugins.push(legacy());
+
+    // vite-plugin-html
+    vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
+
+    // vite-plugin-svg-icons
+    vitePlugins.push(configSvgIconsPlugin(isBuild));
+
+    // vite-plugin-mock
+    VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild));
+
+    // vite-plugin-purge-icons
+    vitePlugins.push(purgeIcons());
+
+    // vite-plugin-style-import
+    vitePlugins.push(configStyleImportPlugin(isBuild));
+
+    // rollup-plugin-visualizer
+    vitePlugins.push(configVisualizerConfig());
+
+    // vite-plugin-theme
+    vitePlugins.push(configThemePlugin(isBuild));
+
+    // The following plugins only work in the production environment
+    if (isBuild) {
+        // vite-plugin-imagemin
+        VITE_USE_IMAGEMIN && vitePlugins.push(configImageminPlugin());
+
+        // rollup-plugin-gzip
+        vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE));
+
+        // vite-plugin-pwa
+        vitePlugins.push(configPwaConfig(viteEnv));
+    }
+
+    //vite-plugin-theme【解决vite首次打开界面加载慢问题】
+    vitePlugins.push(PkgConfig());
+    vitePlugins.push(OptimizationPersist());
+    return vitePlugins;
+}

package/dist/project/build/vite/plugin/mock.ts

@@ -0,0 +1,19 @@
+/**
+ * Mock plugin for development and production.
+ * https://github.com/anncwb/vite-plugin-mock
+ */
+import { viteMockServe } from 'vite-plugin-mock';
+
+export function configMockPlugin(isBuild: boolean) {
+    return viteMockServe({
+        ignore: /^\_/,
+        mockPath: 'mock',
+        localEnabled: !isBuild,
+        prodEnabled: isBuild,
+        injectCode: `
+      import { setupProdMockServer } from '../mock/_createProductionServer';
+
+      setupProdMockServer();
+      `,
+    });
+}

package/dist/project/build/vite/plugin/pwa.ts

@@ -0,0 +1,33 @@
+/**
+ * Zero-config PWA for Vite
+ * https://github.com/antfu/vite-plugin-pwa
+ */
+import { VitePWA } from 'vite-plugin-pwa';
+
+export function configPwaConfig(env: ViteEnv) {
+    const { VITE_USE_PWA, VITE_GLOB_APP_TITLE, VITE_GLOB_APP_SHORT_NAME } = env;
+
+    if (VITE_USE_PWA) {
+        // vite-plugin-pwa
+        const pwaPlugin = VitePWA({
+            manifest: {
+                name: VITE_GLOB_APP_TITLE,
+                short_name: VITE_GLOB_APP_SHORT_NAME,
+                icons: [
+                    {
+                        src: './resource/img/pwa-192x192.png',
+                        sizes: '192x192',
+                        type: 'image/png',
+                    },
+                    {
+                        src: './resource/img/pwa-512x512.png',
+                        sizes: '512x512',
+                        type: 'image/png',
+                    },
+                ],
+            },
+        });
+        return pwaPlugin;
+    }
+    return [];
+}