@varlet/cli 3.2.14 → 3.2.15-alpha.1718196322899

package/lib/client/index.js

@@ -2,7 +2,6 @@ import config from '@config';
 import AppType from './appType';
 import { Themes, StyleProvider } from '@varlet/ui';
 import { onMounted, onUnmounted } from 'vue';
-import { get } from 'lodash-es';
 export function getPCLocationInfo() {
     const [, language, path] = window.location.hash.split('/');
     const [menuName, hash = ''] = path?.split('#') ?? [];
@@ -18,9 +17,9 @@ function getHashSearch() {
     return new URLSearchParams(hashSearch);
 }
 export function getBrowserTheme() {
-    const themeKey = get(config, 'themeKey');
-    const defaultLightTheme = get(config, 'defaultLightTheme');
-    const defaultDarkTheme = get(config, 'defaultDarkTheme');
+    const themeKey = config?.themeKey;
+    const defaultLightTheme = config?.defaultLightTheme;
+    const defaultDarkTheme = config?.defaultDarkTheme;
     const storageTheme = window.localStorage.getItem(themeKey);
     if (!storageTheme) {
         const preferTheme = window.matchMedia?.('(prefers-color-scheme: dark)').matches
@@ -70,7 +69,7 @@ const themeMap = {
     md3DarkTheme: Themes.md3Dark,
 };
 export function setTheme(theme) {
-    const siteStyleVars = withSiteConfigNamespace(get(config, theme, {}));
+    const siteStyleVars = withSiteConfigNamespace(config[theme] || {});
     const styleVars = { ...siteStyleVars, ...(themeMap[theme] ?? {}) };
     StyleProvider(styleVars);
     setColorScheme(theme);
@@ -82,7 +81,7 @@ export function onThemeChange(cb) {
     });
 }
 export function getSiteStyleVars(theme) {
-    return withSiteConfigNamespace(get(config, theme, {}));
+    return withSiteConfigNamespace(config[theme] || {});
 }
 export function setColorScheme(theme) {
     document.documentElement.style.setProperty('color-scheme', theme.toLowerCase().includes('dark') ? 'dark' : 'light');

package/lib/node/commands/create.js

@@ -3,7 +3,6 @@ import fse from 'fs-extra';
 import logger from '../shared/logger.js';
 import { bigCamelize, camelize, kebabCase } from '@varlet/shared';
 import inquirer from 'inquirer';
-import { get } from 'lodash-es';
 import { resolve } from 'path';
 import { glob } from '../shared/fsUtils.js';
 import { getVarletConfig } from '../config/varlet.config.js';
@@ -25,7 +24,7 @@ async function renderTemplates(componentFolder, componentFolderName, renderData)
 }
 export async function create(options) {
     logger.title('\n📦📦 Create a component ! \n');
-    const namespace = get(await getVarletConfig(), 'namespace');
+    const { namespace } = await getVarletConfig();
     const renderData = {
         namespace,
         bigCamelizeNamespace: bigCamelize(namespace),

package/lib/node/commands/dev.js

@@ -6,7 +6,6 @@ import { ES_DIR, SRC, SRC_DIR, VARLET_CONFIG } from '../shared/constant.js';
 import { buildSiteEntry } from '../compiler/compileSiteEntry.js';
 import { getDevConfig } from '../config/vite.config.js';
 import { getVarletConfig } from '../config/varlet.config.js';
-import { get, merge } from 'lodash-es';
 import { resolve } from 'path';
 import { generateEsEntryTemplate, getScriptExtname } from '../compiler/compileScript.js';
 import { getPublicDirs } from '../shared/fsUtils.js';
@@ -15,7 +14,7 @@ const { ensureDirSync, pathExistsSync, readFileSync, outputFileSync, removeSync
 let server;
 let watcher;
 async function stub(varletConfig) {
-    const name = kebabCase(get(varletConfig, 'name'));
+    const name = kebabCase(varletConfig?.name || '');
     // keep esm and css file for playground
     const esmFile = resolve(ES_DIR, `${name}.esm.js`);
     const cssFile = resolve(ES_DIR, `style.css`);
@@ -44,7 +43,10 @@ async function startServer(options) {
     // build all config
     await buildSiteEntry(options.draft ?? false);
     const devConfig = getDevConfig(varletConfig);
-    const inlineConfig = merge(devConfig, options.force ? { optimizeDeps: { force: true } } : {});
+    const inlineConfig = {
+        ...devConfig,
+        ...(options.force ? { optimizeDeps: { force: true } } : {}),
+    };
     // create all instance
     server = await createServer(inlineConfig);
     await server.listen();

package/lib/node/commands/icons.js

@@ -4,7 +4,6 @@ import chokidar from 'chokidar';
 import logger from '../shared/logger.js';
 import { parse, resolve } from 'path';
 import { getVarletConfig } from '../config/varlet.config.js';
-import { get } from 'lodash-es';
 import { buildIcons, getIo } from '@varlet/icon-builder';
 import { ICONS_PNG_DIR_NAME } from '../shared/constant.js';
 const { removeSync, ensureDirSync, readdirSync } = fse;
@@ -46,11 +45,11 @@ async function buildPNG(io) {
     logger.success('build png success!');
 }
 export async function build(varletConfig, io) {
-    await Promise.all([buildPNG(io), buildIcons(get(varletConfig, 'icons'))]);
+    await Promise.all([buildPNG(io), buildIcons(varletConfig?.icons)]);
 }
 export async function icons({ watch = false } = {}) {
     const varletConfig = await getVarletConfig();
-    const io = getIo(get(varletConfig, 'icons'));
+    const io = getIo(varletConfig?.icons);
     const task = () => build(varletConfig, io);
     if (watch) {
         await build(varletConfig, io);

package/lib/node/compiler/compileModule.js

@@ -9,12 +9,11 @@ import { clearLessFiles, clearScssFiles, compileLess, compileScss } from './comp
 import { getBundleConfig } from '../config/vite.config.js';
 import { getVarletConfig } from '../config/varlet.config.js';
 import { generateReference } from './compileTypes.js';
-import { get } from 'lodash-es';
 import { kebabCase } from '@varlet/shared';
 const { copy, ensureFileSync, readdir, removeSync } = fse;
 export async function compileBundle() {
     const varletConfig = await getVarletConfig();
-    const name = kebabCase(get(varletConfig, 'name'));
+    const name = kebabCase(varletConfig?.name || '');
     const buildOptions = [
         {
             format: 'es',

package/lib/node/compiler/compileScript.js

@@ -5,7 +5,6 @@ import { getVersion, isDir, isJsx, isTsx, replaceExt } from '../shared/fsUtils.j
 import { extractStyleDependencies, IMPORT_CSS_RE, IMPORT_LESS_RE, IMPORT_SCSS_RE } from './compileStyle.js';
 import { resolve, relative, extname, dirname } from 'path';
 import { getVarletConfig } from '../config/varlet.config.js';
-import { get } from 'lodash-es';
 import fse from 'fs-extra';
 import esbuild from 'esbuild';
 const { writeFileSync, readdirSync, readFileSync, removeSync, writeFile, pathExistsSync } = fse;
@@ -119,7 +118,7 @@ export async function compileScriptByEsbuild(script) {
     const varletConfig = await getVarletConfig();
     const { code } = await esbuild.transform(script, {
         loader: 'ts',
-        target: get(varletConfig, 'esbuild.target'),
+        target: varletConfig?.esbuild?.target,
         format: 'esm',
     });
     return code;

package/lib/node/compiler/compileSiteEntry.js

@@ -3,7 +3,6 @@ import { slash } from '@varlet/shared';
 import { DOCS_DIR_NAME, EXAMPLE_DIR_NAME, LOCALE_DIR_NAME, ROOT_DOCS_DIR, ROOT_PAGES_DIR, SITE, SITE_DIR, SITE_MOBILE_ROUTES, SITE_PC_DIR, SITE_PC_ROUTES, SRC_DIR, } from '../shared/constant.js';
 import { glob, isDir, outputFileSyncOnChange } from '../shared/fsUtils.js';
 import { getVarletConfig } from '../config/varlet.config.js';
-import { get } from 'lodash-es';
 const { copy } = fse;
 const ROOT_DOCS_RE = /\/docs\/([-\w]+)\.([-\w]+)(?:.draft)?\.md/;
 const PAGE_LOCALE_RE = /\/pages\/([-\w]+)\/locale\/([-\w]+)\.ts/;
@@ -59,7 +58,7 @@ export async function findRootDocs(draftMode) {
     return filterDraftDocs(rootDocs, draftMode);
 }
 export async function findPageLocales() {
-    const defaultLanguage = get(await getVarletConfig(), 'defaultLanguage');
+    const { defaultLanguage } = await getVarletConfig();
     const userPages = await glob(`${ROOT_PAGES_DIR}/*`);
     const baseLocales = await glob(`${SITE}/pc/pages/**/${LOCALE_DIR_NAME}/*.ts`);
     const userLocales = await userPages.reduce(async (userLocales, page) => {

package/lib/node/compiler/compileStyle.js

@@ -1,6 +1,6 @@
 import fse from 'fs-extra';
 import less from 'less';
-import sass from 'node-sass';
+import * as sass from 'sass';
 import glob from 'glob';
 import { replaceExt, smartAppendFileSync } from '../shared/fsUtils.js';
 import { parse, resolve } from 'path';
@@ -60,7 +60,6 @@ export function compileScss(file) {
             return { file: path };
         },
     });
-    console.log(css.toString('utf8'));
     writeFileSync(replaceExt(file, '.css'), compressCss(css.toString('utf8')), 'utf-8');
 }
 export function clearLessFiles(dir) {

package/lib/node/compiler/compileStyleVars.js

@@ -3,7 +3,6 @@ import { SRC_DIR, TYPES_DIR } from '../shared/constant.js';
 import { resolve } from 'path';
 import { isDir, isMD } from '../shared/fsUtils.js';
 import { getVarletConfig } from '../config/varlet.config.js';
-import { get } from 'lodash-es';
 const { ensureDirSync, readdirSync, readFileSync, writeFileSync } = fse;
 export function compileMD(path, keys) {
     const content = readFileSync(path, 'utf-8');
@@ -24,7 +23,7 @@ export function compileDir(path, keys, defaultLanguage) {
 }
 export async function compileStyleVars() {
     ensureDirSync(TYPES_DIR);
-    const defaultLanguage = get(await getVarletConfig(), 'defaultLanguage');
+    const { defaultLanguage } = await getVarletConfig();
     const keys = new Set();
     compileDir(SRC_DIR, keys, defaultLanguage);
     const assistanceType = `type RemoveTwoDashes<T extends string> = T extends \`--$\{infer Rest}\` ? Rest : T

package/lib/node/compiler/compileTemplateHighlight.js

@@ -2,7 +2,6 @@ import fse from 'fs-extra';
 import { SRC_DIR, HL_DIR, HL_API_RE, HL_COMPONENT_NAME_RE, HL_EN_MD, HL_EN_TITLE_ATTRIBUTES_RE, HL_EN_TITLE_EVENTS_RE, HL_EN_TITLE_SLOTS_RE, HL_EN_WEB_TYPES_JSON, HL_ZH_MD, HL_ZH_TITLE_ATTRIBUTES_RE, HL_ZH_TITLE_EVENTS_RE, HL_ZH_TITLE_SLOTS_RE, HL_ZH_WEB_TYPES_JSON, } from '../shared/constant.js';
 import { resolve } from 'path';
 import { getCliVersion, isDir, isMD } from '../shared/fsUtils.js';
-import { get } from 'lodash-es';
 import { getVarletConfig } from '../config/varlet.config.js';
 const { ensureDir, readdirSync, readFileSync, writeFileSync } = fse;
 const TABLE_HEAD_RE = /\s*\|.*\|\s*\n\s*\|.*-+\s*\|\s*\n+/;
@@ -62,7 +61,7 @@ export function compileWebTypes(table, webTypes, componentName, varletConfig) {
         description: row[1],
     }));
     webTypes.contributions.html.tags.push({
-        name: `${get(varletConfig, 'namespace')}-${componentName}`,
+        name: `${varletConfig?.namespace}-${componentName}`,
         attributes,
         events,
         slots,
@@ -97,7 +96,7 @@ export function compileLanguageMD(varletConfig, options) {
         $schema: 'https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json',
         framework: 'vue',
         version: getCliVersion(),
-        name: get(varletConfig, 'title'),
+        name: varletConfig?.title,
         contributions: {
             html: {
                 tags: [],

package/lib/node/compiler/compileTypes.js

@@ -3,7 +3,6 @@ import { TYPES_DIR, UI_PACKAGE_JSON } from '../shared/constant.js';
 import { bigCamelize } from '@varlet/shared';
 import { resolve, relative } from 'path';
 import { getVarletConfig } from '../config/varlet.config.js';
-import { get } from 'lodash-es';
 import { compileStyleVars } from './compileStyleVars.js';
 const { ensureDir, writeFileSync, readdir, writeFile, readJSONSync } = fse;
 export function generateReference(moduleDir) {
@@ -14,17 +13,15 @@ export * from '${relative(moduleDir, TYPES_DIR)}'
 export async function compileTypes() {
     await ensureDir(TYPES_DIR);
     compileStyleVars();
-    const varletConfig = await getVarletConfig();
-    const namespace = get(varletConfig, 'namespace');
-    const directives = get(varletConfig, 'directives');
+    const { namespace = '', directives = '' } = await getVarletConfig();
     const { name: libraryName } = readJSONSync(UI_PACKAGE_JSON);
     const filenames = await readdir(TYPES_DIR);
-    const includeFilenames = filenames.filter((filename) => filename !== 'index.d.ts' && filename !== 'global.d.ts');
+    const includeFilenames = filenames.filter((filename) => !['index.d.ts', 'global.d.ts'].includes(filename));
     const exports = [];
     const componentDeclares = [];
     const directiveDeclares = [];
     includeFilenames.forEach((filename) => {
-        const folder = filename.slice(0, filename.indexOf('.d.ts'));
+        const folder = filename.replace('.d.ts', '');
         const name = bigCamelize(folder);
         exports.push(`export * from './${folder}'`);
         if (filename.startsWith(namespace)) {

package/lib/node/config/varlet.config.d.ts

@@ -172,5 +172,5 @@ export interface VarletConfig {
     directives?: string[];
 }
 export declare function defineConfig(config: VarletConfig): VarletConfig;
-export declare function mergeStrategy(value: any, srcValue: any, key: string): any[] | undefined;
+export declare function mergeStrategy(_: any, srcValue: any, key: any, _object: any, _source: any): any[] | undefined;
 export declare function getVarletConfig(emit?: boolean): Promise<Required<VarletConfig>>;

package/lib/node/config/varlet.config.js

@@ -1,14 +1,13 @@
 import fse from 'fs-extra';
-import { mergeWith } from 'lodash-es';
 import { VARLET_CONFIG, SITE_CONFIG } from '../shared/constant.js';
 import { outputFileSyncOnChange } from '../shared/fsUtils.js';
-import { isArray } from '@varlet/shared';
+import { isArray, mergeWith } from '@varlet/shared';
 import { pathToFileURL } from 'url';
 const { pathExistsSync, statSync } = fse;
 export function defineConfig(config) {
     return config;
 }
-export function mergeStrategy(value, srcValue, key) {
+export function mergeStrategy(_, srcValue, key, _object, _source) {
     const keys = ['features', 'members'];
     if (keys.includes(key) && isArray(srcValue)) {
         return srcValue;

package/lib/node/config/vite.config.js

@@ -1,6 +1,5 @@
 import { SRC_DIR, ES_DIR, SITE_CONFIG, SITE_DIR, SITE_MOBILE_ROUTES, SITE_OUTPUT_PATH, SITE_PC_ROUTES, SITE_PUBLIC_PATH, VITE_RESOLVE_EXTENSIONS, EXTENSION_ENTRY, } from '../shared/constant.js';
 import { markdown, html, inlineCss, copy } from '@varlet/vite-plugins';
-import { get } from 'lodash-es';
 import { resolve } from 'path';
 import vue from '@vitejs/plugin-vue';
 import jsx from '@vitejs/plugin-vue-jsx';
@@ -20,9 +19,7 @@ export function getHtmlInject(inject) {
     };
 }
 export function getDevConfig(varletConfig) {
-    const defaultLanguage = get(varletConfig, 'defaultLanguage');
-    const alias = get(varletConfig, 'alias', {});
-    const host = get(varletConfig, 'host');
+    const { defaultLanguage, alias = {}, host } = varletConfig;
     const resolveAlias = Object.entries(alias).reduce((resolveAlias, [key, value]) => {
         const isRelative = value.startsWith('.');
         resolveAlias[key] = isRelative ? resolve(SRC_DIR, value) : value;
@@ -40,9 +37,9 @@ export function getDevConfig(varletConfig) {
             },
         },
         server: {
-            port: get(varletConfig, 'port'),
+            port: varletConfig?.port,
             host: host === 'localhost' ? '0.0.0.0' : host,
-            proxy: get(varletConfig, 'proxy', {}),
+            proxy: varletConfig?.proxy || {},
         },
         publicDir: SITE_PUBLIC_PATH,
         plugins: [
@@ -50,20 +47,22 @@ export function getDevConfig(varletConfig) {
                 include: [/\.vue$/, /\.md$/],
             }),
             jsx(),
-            markdown({ style: get(varletConfig, 'highlight.style') }),
-            copy({ paths: get(varletConfig, 'copy', []) }),
+            markdown({ style: varletConfig?.highlight?.style }),
+            copy({ paths: varletConfig?.copy || [] }),
             html({
                 data: {
-                    logo: get(varletConfig, `logo`),
-                    baidu: get(varletConfig, `analysis.baidu`, ''),
-                    pcTitle: get(varletConfig, `pc.title['${defaultLanguage}']`),
-                    pcDescription: get(varletConfig, `pc.description['${defaultLanguage}']`),
-                    pcKeywords: get(varletConfig, `pc.keywords['${defaultLanguage}']`),
-                    pcHtmlInject: getHtmlInject(get(varletConfig, 'pc.htmlInject')),
-                    mobileTitle: get(varletConfig, `mobile.title['${defaultLanguage}']`),
-                    mobileDescription: get(varletConfig, `mobile.description['${defaultLanguage}']`),
-                    mobileKeywords: get(varletConfig, `mobile.keywords['${defaultLanguage}']`),
-                    mobileHtmlInject: getHtmlInject(get(varletConfig, 'mobile.htmlInject')),
+                    logo: varletConfig?.logo,
+                    baidu: varletConfig?.analysis?.baidu,
+                    pcTitle: varletConfig?.pc?.title ? varletConfig?.pc?.title[defaultLanguage] : '',
+                    pcDescription: varletConfig?.pc?.description ? varletConfig?.pc?.description[defaultLanguage] : '',
+                    pcKeywords: varletConfig?.pc?.keywords ? varletConfig?.pc?.keywords[defaultLanguage] : '',
+                    pcHtmlInject: getHtmlInject(varletConfig?.pc?.htmlInject || {}),
+                    mobileTitle: varletConfig?.mobile?.title ? varletConfig?.mobile?.title[defaultLanguage] : '',
+                    mobileDescription: varletConfig?.mobile?.description
+                        ? varletConfig?.mobile?.description[defaultLanguage]
+                        : '',
+                    mobileKeywords: varletConfig?.mobile?.keywords ? varletConfig?.mobile?.keywords[defaultLanguage] : '',
+                    mobileHtmlInject: getHtmlInject(varletConfig?.mobile?.htmlInject || {}),
                 },
             }),
         ],
@@ -90,9 +89,8 @@ export function getBuildConfig(varletConfig) {
 }
 export function getBundleConfig(varletConfig, buildOptions) {
     const plugins = [];
-    const name = get(varletConfig, 'name');
-    const external = get(varletConfig, 'bundle.external', []);
-    const globals = get(varletConfig, 'bundle.globals', {});
+    const name = varletConfig?.name;
+    const { external = [], globals = {} } = varletConfig?.bundle || {};
     const { fileName, output, format, emptyOutDir, removeEnv } = buildOptions;
     if (format === 'umd') {
         plugins.push(inlineCss({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "3.2.14",
+  "version": "3.2.15-alpha.1718196322899",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -34,38 +34,38 @@
     "url": "https://github.com/varletjs/varlet/issues"
   },
   "dependencies": {
-    "@varlet/release": "^0.2.5",
-    "@varlet/icon-builder": "0.2.14",
     "@babel/core": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
+    "@varlet/icon-builder": "0.2.14",
+    "@varlet/release": "^0.2.5",
     "@vitejs/plugin-vue": "5.0.4",
     "@vitejs/plugin-vue-jsx": "3.1.0",
     "@vue/babel-plugin-jsx": "1.2.1",
     "@vue/compiler-sfc": "3.4.21",
     "@vue/runtime-core": "3.4.21",
-    "vue": "3.4.21",
-    "vite": "5.0.10",
-    "esbuild": "0.19.3",
-    "vitest": "1.1.0",
     "chokidar": "^3.5.2",
     "commander": "^8.3.0",
     "ejs": "^3.1.8",
+    "esbuild": "0.19.3",
     "execa": "^5.0.0",
     "fs-extra": "^9.0.1",
     "glob": "^7.2.0",
     "hash-sum": "^2.0.0",
     "inquirer": "^9.1.4",
     "less": "^3.12.2",
-    "node-sass": "9.0.0",
     "lodash-es": "^4.17.21",
     "markdown-it": "^12.2.3",
     "nanospinner": "^1.1.0",
     "picocolors": "^1.0.0",
+    "sass": "^1.77.4",
     "semver": "^7.3.5",
     "sharp": "0.31.1",
     "typescript": "^5.1.5",
-    "@varlet/shared": "3.2.14",
-    "@varlet/vite-plugins": "3.2.14"
+    "vite": "5.0.10",
+    "vitest": "1.1.0",
+    "vue": "3.4.21",
+    "@varlet/vite-plugins": "3.2.15-alpha.1718196322899",
+    "@varlet/shared": "3.2.15-alpha.1718196322899"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -80,24 +80,23 @@
     "@types/semver": "^7.3.9",
     "@types/sharp": "0.31.1",
     "rimraf": "^5.0.1",
-    "@varlet/ui": "3.2.14",
-    "@varlet/icons": "3.2.14",
-    "@varlet/touch-emulator": "3.2.14"
+    "@varlet/ui": "3.2.15-alpha.1718196322899",
+    "@varlet/icons": "3.2.15-alpha.1718196322899",
+    "@varlet/touch-emulator": "3.2.15-alpha.1718196322899"
   },
   "peerDependencies": {
+    "@vitest/coverage-istanbul": "1.1.0",
     "@vue/runtime-core": "3.4.21",
     "@vue/test-utils": "2.4.1",
-    "@vitest/coverage-istanbul": "1.1.0",
-    "vitest": "1.1.0",
-    "jsdom": "22.1.0",
     "clipboard": "^2.0.6",
+    "jsdom": "22.1.0",
     "live-server": "^1.2.1",
     "lodash-es": "^4.17.21",
     "vue": "3.4.21",
     "vue-router": "4.2.0",
-    "@varlet/ui": "3.2.14",
-    "@varlet/icons": "3.2.14",
-    "@varlet/touch-emulator": "3.2.14"
+    "@varlet/ui": "3.2.15-alpha.1718196322899",
+    "@varlet/icons": "3.2.15-alpha.1718196322899",
+    "@varlet/touch-emulator": "3.2.15-alpha.1718196322899"
   },
   "scripts": {
     "dev": "tsc --watch",

package/site/mobile/App.vue

@@ -3,19 +3,27 @@
     <header>
       <var-app-bar class="app-bar" title-position="left" :title="bigCamelizeComponentName">
         <template #left>
-          <var-button v-if="showBackIcon" style="margin-right: 6px;" text round @click="back" color="transparent" text-color="#fff">
-            <var-icon name="chevron-left" class="arrow-left" style="margin-top: 1px"/>
+          <var-button
+            v-if="showBackIcon"
+            style="margin-right: 6px"
+            text
+            round
+            @click="back"
+            color="transparent"
+            text-color="#fff"
+          >
+            <var-icon name="chevron-left" class="arrow-left" style="margin-top: 1px" />
           </var-button>
           <var-button
             v-if="!showBackIcon && github"
-            style="margin-left: 2px; margin-right: 6px;"
+            style="margin-left: 2px; margin-right: 6px"
             text
             round
             color="transparent"
             text-color="#fff"
             @click="toGithub"
           >
-            <var-icon name="github" class="github" style="margin-top: 1px;"/>
+            <var-icon name="github" class="github" style="margin-top: 1px" />
           </var-button>
         </template>
         <template #right>
@@ -27,8 +35,8 @@
             text-color="#fff"
             @click.stop="showThemeMenu = true"
           >
-            <var-icon name="palette" :size="28" class="palette"/>
-            <var-icon name="chevron-down" class="arrow-down"/>
+            <var-icon name="palette" :size="28" class="palette" />
+            <var-icon name="chevron-down" class="arrow-down" />
           </var-button>
           <var-button
             v-if="languages"
@@ -38,14 +46,14 @@
             text-color="#fff"
             @click.stop="showMenu = true"
           >
-            <var-icon name="translate" class="i18n"/>
-            <var-icon name="chevron-down" class="arrow-down"/>
+            <var-icon name="translate" class="i18n" />
+            <var-icon name="chevron-down" class="arrow-down" />
           </var-button>
         </template>
       </var-app-bar>
     </header>
     <div class="router-view__block">
-      <router-view/>
+      <router-view />
     </div>
 
     <transition name="site-menu">
@@ -82,19 +90,11 @@
 
 <script lang="ts">
 import config from '@config'
-import { computed,  defineComponent, ref, watch, type Ref, type ComputedRef } from 'vue'
+import { computed, defineComponent, ref, watch, type Ref, type ComputedRef } from 'vue'
 import { useRoute } from 'vue-router'
-import {
-  getBrowserTheme,
-  watchLang,
-  watchTheme,
-  setTheme,
-  getMobileIndex,
-  type Theme,
-} from '@varlet/cli/client'
+import { getBrowserTheme, watchLang, watchTheme, setTheme, getMobileIndex, type Theme } from '@varlet/cli/client'
 import { removeEmpty, inIframe, isPhone } from '../utils'
 import { bigCamelize } from '@varlet/shared'
-import { get } from 'lodash-es'
 
 export default defineComponent({
   setup() {
@@ -104,18 +104,20 @@ export default defineComponent({
     const showMenu: Ref<boolean> = ref(false)
     const showThemeMenu: Ref<boolean> = ref(false)
     const language: Ref<string> = ref('')
-    const languages: Ref<Record<string, string>> = ref(get(config, 'mobile.header.i18n'))
-    const themes: Ref<Record<string, any>[]> = ref(get(config, 'mobile.header.themes'))
+    const languages: Ref<Record<string, string>> = ref(config?.mobile?.header?.i18n ?? {})
+    const themes: Ref<Record<string, any>[]> = ref(config?.mobile?.header?.themes ?? {})
     const nonEmptyLanguages: ComputedRef<Record<string, string>> = computed(() => removeEmpty(languages.value))
-    const redirect = get(config, 'mobile.redirect', '')
-    const github: Ref<string> = ref(get(config, 'mobile.header.github'))
-    const darkMode: Ref<string> = ref(get(config, 'mobile.header.darkMode'))
+    const redirect = config?.mobile?.redirect ?? ''
+    const github: Ref<string> = ref(config?.mobile?.header?.github ?? '')
+    const darkMode: Ref<string> = ref(config?.mobile?.header?.darkMode ?? '')
     const currentTheme = ref(getBrowserTheme())
 
     const changeLanguage = (lang: string) => {
       language.value = lang
       showMenu.value = false
-      window.location.href = `${getMobileIndex()}#${route.path}?language=${language.value}&replace=${route.query.replace}`
+      window.location.href = `${getMobileIndex()}#${route.path}?language=${language.value}&replace=${
+        route.query.replace
+      }`
 
       if (!isPhone() && inIframe()) {
         ;(window.top as any).scrollToMenu(redirect.slice(1))
@@ -157,7 +159,7 @@ export default defineComponent({
     const setCurrentTheme = (theme: Theme) => {
       currentTheme.value = theme
       setTheme(currentTheme.value)
-      window.localStorage.setItem(get(config, 'themeKey'), currentTheme.value)
+      window.localStorage.setItem(config?.themeKey, currentTheme.value)
     }
 
     const toggleTheme = (value: Theme) => {
@@ -216,7 +218,7 @@ body {
   min-height: 100vh;
   font-size: 16px;
   font-family: 'Roboto', sans-serif;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
   background: var(--site-config-color-mobile-body);
   color: var(--site-config-color-text);
   transition: background-color 0.25s, color 0.25s;

package/site/mobile/AppHome.vue

@@ -122,7 +122,7 @@ export default {
   padding: 10px 12px;
   font-size: 15px;
   cursor: pointer;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
   transition: all 0.3s;
   color: var(--site-config-color-text);
 

package/site/mobile/main.ts

@@ -4,14 +4,13 @@ import App from './App.vue'
 import Varlet from '@varlet/ui'
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
-import { get } from 'lodash-es'
 import { inIframe, isPhone } from '../utils'
 
 import '@varlet/touch-emulator'
 import '@varlet/ui/es/style'
 
-const redirect = get(config, 'mobile.redirect')
-const defaultLanguage = get(config, 'defaultLanguage')
+const redirect = config?.mobile?.redirect
+const defaultLanguage = config?.defaultLanguage
 
 redirect &&
   routes.push({
@@ -21,7 +20,7 @@ redirect &&
 
 routes.push({
   path: '/home',
-  component: () => import('./AppHome.vue')
+  component: () => import('./AppHome.vue'),
 })
 
 const router = createRouter({
@@ -57,7 +56,4 @@ router.beforeEach((to: any) => {
   }
 })
 
-createApp(App)
-  .use(router)
-  .use(Varlet)
-  .mount('#app')
+createApp(App).use(router).use(Varlet).mount('#app')

package/site/pc/App.vue

@@ -3,24 +3,25 @@ import config from '@config'
 import { defineComponent, onMounted, ref } from 'vue'
 import { getPCLocationInfo, getMobileIndex } from '@varlet/cli/client'
 import { isPhone } from '../utils'
-import { get } from 'lodash-es'
 
 export default defineComponent({
   setup() {
-    const useMobile = ref(get(config, 'useMobile'))
-    const defaultLanguage = get(config, 'defaultLanguage')
+    const useMobile = ref(config?.useMobile)
+    const defaultLanguage = config?.defaultLanguage
 
     const init = () => {
       const { language, menuName } = getPCLocationInfo()
 
       if (isPhone() && useMobile.value) {
-        window.location.href = `${getMobileIndex()}#/${menuName}?language=${language || defaultLanguage}&platform=mobile`
+        window.location.href = `${getMobileIndex()}#/${menuName}?language=${
+          language || defaultLanguage
+        }&platform=mobile`
         return
       }
     }
 
     onMounted(init)
-  }
+  },
 })
 </script>
 

package/site/pc/Layout.vue

@@ -7,15 +7,14 @@ import AppSidebar from './components/AppSidebar.vue'
 import { Context } from '@varlet/ui'
 import { nextTick, onMounted, ref, watch, type Ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { get } from 'lodash-es'
 import { getPCLocationInfo } from '@varlet/cli/client'
 import { MenuTypes, type Menu } from '../utils'
 import { type SiteContext } from '../types'
 
 const context = Context as SiteContext
-const menu: Ref<Menu[]> = ref(get(config, 'pc.menu', []))
-const useMobile = ref(get(config, 'useMobile'))
-const mobileRedirect = get(config, 'mobile.redirect')
+const menu: Ref<Menu[]> = ref(config?.pc?.menu ?? [])
+const useMobile = ref(config?.useMobile)
+const mobileRedirect = config?.mobile?.redirect
 const language: Ref<string> = ref('')
 const componentName: Ref<string | undefined> = ref()
 const menuName: Ref<string> = ref('')
@@ -89,8 +88,8 @@ watch(
     menuName.value = _menuName
     hash.value = _hash
     language.value = lang
-    useMobile.value = menu.value.find((item) => item.doc === _menuName)?.useMobile ?? get(config, 'useMobile')
-    document.title = get(config, 'pc.title')[lang] as string
+    useMobile.value = menu.value.find((item) => item.doc === _menuName)?.useMobile ?? config?.useMobile
+    document.title = config?.pc?.title[lang] as string
   },
   { immediate: true }
 )
@@ -199,7 +198,7 @@ watch(
 }
 
 .var-popup__content {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: transparent;
 }
 </style>
 

package/site/pc/components/AppAd.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import config from '@config'
-import { get } from 'lodash-es'
 import { ref } from 'vue'
 
 defineProps({
@@ -10,7 +9,7 @@ defineProps({
   },
 })
 
-const ad = ref(get(config, 'pc.ad'))
+const ad = ref(config?.pc?.ad)
 const storageKey = `varlet-site-ad-closed-${ad.value?.id}`
 const isClose = ref(localStorage.getItem(storageKey) == 'true')
 

package/site/pc/components/AppHeader.vue

@@ -116,7 +116,6 @@
 <script lang="ts">
 import config from '@config'
 import { ref, computed, defineComponent } from 'vue'
-import { get } from 'lodash-es'
 import { getBrowserTheme, getPCLocationInfo, Theme, watchTheme, setTheme } from '@varlet/cli/client'
 import { removeEmpty } from '../../utils'
 import { useRouter } from 'vue-router'
@@ -130,22 +129,22 @@ export default defineComponent({
     },
   },
   setup() {
-    const title: Ref<string> = ref(get(config, 'title'))
-    const logo: Ref<string> = ref(get(config, 'logo'))
-    const languages: Ref<Record<string, string>> = ref(get(config, 'pc.header.i18n'))
-    const currentVersion: Ref<string> = ref(get(config, 'pc.header.currentVersion'))
-    const versions = get(config, 'pc.header.versions')
+    const title: Ref<string> = ref(config?.title)
+    const logo: Ref<string> = ref(config?.pc?.logo)
+    const languages: Ref<Record<string, string>> = ref(config?.pc?.header?.i18n ?? {})
+    const currentVersion: Ref<string> = ref(config?.pc?.header?.currentVersion ?? '')
+    const versions = config?.pc?.header?.versions
     const isShowVersion: Ref<boolean> = ref(!!versions)
     const versionItems: Ref<Array<Record<string, any>>> = ref(
       (versions ?? []).find((i: any) => window.location.host.includes(i.name))?.items ?? versions?.[0]?.items ?? []
     )
-    const playground: Ref<string> = ref(get(config, 'pc.header.playground'))
-    const github: Ref<string> = ref(get(config, 'pc.header.github'))
-    const themes: Ref<Record<string, any>> = ref(get(config, 'pc.header.themes'))
-    const changelog: Ref<string> = ref(get(config, 'pc.header.changelog'))
-    const ai: Ref<string> = ref(get(config, 'pc.header.ai'))
-    const redirect = get(config, 'pc.redirect')
-    const darkMode: Ref<boolean> = ref(get(config, 'pc.header.darkMode'))
+    const playground: Ref<string> = ref(config?.pc?.header?.playground)
+    const github: Ref<string> = ref(config?.pc?.header?.github)
+    const themes: Ref<Record<string, any>> = ref(config?.pc?.header?.themes ?? {})
+    const changelog: Ref<string> = ref(config?.pc?.header?.changelog)
+    const ai: Ref<string> = ref(config?.pc?.header?.ai)
+    const redirect = config?.pc?.redirect ?? ''
+    const darkMode: Ref<boolean> = ref(config?.pc?.header?.darkMode ?? false)
     const currentTheme = ref(getBrowserTheme())
 
     const isOpenLanguageMenu: Ref<boolean> = ref(false)
@@ -168,7 +167,7 @@ export default defineComponent({
     const setCurrentTheme = (theme: Theme) => {
       currentTheme.value = theme
       setTheme(currentTheme.value)
-      window.localStorage.setItem(get(config, 'themeKey'), currentTheme.value)
+      window.localStorage.setItem(config?.themeKey, currentTheme.value)
     }
 
     const getThemeMessage = () => ({ action: 'theme-change', from: 'pc', data: currentTheme.value })

package/site/pc/components/code-example/CodeExample.vue

@@ -2,7 +2,7 @@
   <div class="var-site-code-example">
     <div class="var-site-code-example__toolbar">
       <var-button text round @click="toggle" v-if="fold && !disabledFold">
-        <var-icon name="xml" size="18"/>
+        <var-icon name="xml" size="18" />
       </var-button>
 
       <var-button
@@ -12,11 +12,11 @@
         round
         v-if="clipboard"
       >
-        <var-icon name="content-copy" size="18"/>
+        <var-icon name="content-copy" size="18" />
       </var-button>
 
       <var-button text round @click="toPlayground" v-if="playground">
-        <var-icon name="code-json" size="18"/>
+        <var-icon name="code-json" size="18" />
       </var-button>
     </div>
     <div
@@ -28,7 +28,7 @@
         height: height >= 0 ? `${height}px` : undefined,
       }"
     >
-      <slot/>
+      <slot />
     </div>
   </div>
 </template>
@@ -39,7 +39,6 @@ import Clipboard from 'clipboard'
 import { Context, Snackbar } from '@varlet/ui'
 import { defineComponent, nextTick, ref, onMounted, type Ref } from 'vue'
 import { doubleRaf } from '@varlet/shared'
-import { get } from 'lodash-es'
 import { getBrowserTheme, getPCLocationInfo } from '@varlet/cli/client'
 import { utoa } from '../../../utils'
 import { type SiteContext } from '../../../types'
@@ -54,17 +53,19 @@ export default defineComponent({
   props: {
     playgroundIgnore: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   setup(props) {
     const code: Ref<HTMLElement | null> = ref(null)
     const cid: Ref<number> = ref(clipId++)
-    const fold: Ref = ref(get(config, 'pc.fold'))
+    const fold: Ref = ref(config?.pc?.fold)
     const disabledFold: Ref<boolean> = ref(false)
-    const clipboard: Ref = ref(get(config, 'pc.clipboard', {}))
+    const clipboard: Ref = ref(config?.pc?.clipboard || {})
     const height: Ref<number> = ref(-1)
-    const playground: Ref<string | undefined> = ref(!props.playgroundIgnore ? get(config, 'pc.header.playground') : undefined)
+    const playground: Ref<string | undefined> = ref(
+      !props.playgroundIgnore ? config?.pc?.header?.playground : undefined
+    )
     let timer: any = null
 
     const toggle = async () => {
@@ -120,12 +121,12 @@ export default defineComponent({
       clipboard,
       playground,
       toggle,
-      toPlayground
+      toPlayground,
     }
-  }
+  },
 })
 </script>
 
 <style lang="less">
-@import "./codeExample";
+@import './codeExample';
 </style>

package/site/pc/main.ts

@@ -5,14 +5,13 @@ import Varlet, { Snackbar } from '@varlet/ui'
 import CodeExample from './components/code-example'
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
-import { get } from 'lodash-es'
 
 import '@varlet/ui/es/style'
 import '@varlet/touch-emulator'
 
-const defaultLanguage = get(config, 'defaultLanguage')
-const redirect = get(config, 'pc.redirect')
-const mobileRedirect = get(config, 'mobile.redirect')
+const defaultLanguage = config?.defaultLanguage
+const redirect = config?.pc?.redirect
+const mobileRedirect = config?.mobile?.redirect
 
 Snackbar.allowMultiple(true)
 
@@ -30,11 +29,11 @@ const router = createRouter({
       return {
         el: to.hash,
         behavior: 'smooth',
-        top: 100
-      };
+        top: 100,
+      }
     }
 
-    return { top: 0 };
+    return { top: 0 }
   },
 })
 
@@ -52,7 +51,6 @@ router.beforeEach((to: any, from: any) => {
   }
 })
 
-
 Object.defineProperty(window, 'onMobileRouteChange', {
   value: (path: string, language: string, replace: string, hash: string) => {
     if (path === mobileRedirect) {
@@ -61,7 +59,7 @@ Object.defineProperty(window, 'onMobileRouteChange', {
     }
 
     router.replace(`/${language}${path}${hash}`)
-  }
+  },
 })
 
 Object.defineProperty(window, 'scrollToMenu', {
@@ -71,7 +69,7 @@ Object.defineProperty(window, 'scrollToMenu', {
       const scroller = cell.parentNode as HTMLElement
       scroller.scrollTo({ top: cell.offsetTop - scroller.offsetHeight / 2 })
     })
-  }
+  },
 })
 
 createApp(App)

package/site/pc/pages/index/index.vue

@@ -2,7 +2,6 @@
 import config from '@config'
 import AppHeader from '../../components/AppHeader.vue'
 import AppAd from '../../components/AppAd.vue'
-import { get } from 'lodash-es'
 import { ref, watch, type Ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { getPCLocationInfo, watchTheme, onThemeChange, getBrowserTheme, setTheme, type Theme } from '@varlet/cli/client'
@@ -10,10 +9,10 @@ import { getPCLocationInfo, watchTheme, onThemeChange, getBrowserTheme, setTheme
 const route = useRoute()
 const router = useRouter()
 const currentTheme = ref(getBrowserTheme())
-const github = get(config, 'pc.header.github')
-const title: Ref<string> = ref(get(config, 'title'))
-const language: Ref<string> = ref(get(config, 'defaultLanguage'))
-const indexPage: Ref<Record<string, any>> = ref(get(config, 'pc.indexPage'))
+const github = config?.pc?.header?.github
+const title: Ref<string> = ref(config?.title)
+const language: Ref<string> = ref(config?.defaultLanguage)
+const indexPage: Ref<Record<string, any>> = ref(config?.pc?.indexPage)
 
 const getStar = () => {
   router.push(`/${language.value}/home`)
@@ -28,7 +27,7 @@ const getThemeMessage = () => ({ action: 'theme-change', from: 'pc', data: curre
 const setCurrentTheme = (theme: Theme) => {
   currentTheme.value = theme
   setTheme(currentTheme.value)
-  window.localStorage.setItem(get(config, 'themeKey'), currentTheme.value)
+  window.localStorage.setItem(config?.themeKey, currentTheme.value)
 }
 
 const setLocale = () => {
@@ -36,7 +35,7 @@ const setLocale = () => {
   if (!lang) return
 
   language.value = lang
-  document.title = get(config, 'pc.title')[lang] as string
+  document.title = config?.pc.title[lang] as string
 }
 
 const to = (url: string) => {

package/site/utils.ts

@@ -1,7 +1,3 @@
-import { get } from 'lodash-es'
-import { Themes } from '@varlet/ui'
-import { StyleProvider, type Theme, withSiteConfigNamespace, setColorScheme } from '@varlet/cli/client'
-
 export interface Menu {
   doc: string
   text: Record<string, string>

package/template/generators/base/package.json

@@ -52,7 +52,6 @@
     "eslint": "^8.43.0",
     "lint-staged": "^10.5.0",
     "live-server": "^1.2.1",
-    "lodash-es": "^4.17.21",
     "prettier": "^2.8.8",
     "simple-git-hooks": "^2.8.0",
     "typescript": "^5.1.5",