@varlet/cli 3.0.0-alpha.1704352780759 → 3.0.0-alpha.1707916363117

package/README.md

@@ -16,7 +16,7 @@ The out-of-the-box `Vue3 component library` rapid prototyping tool provides a se
 - 💪  Support for `VSCode` extension development
 - 💪  Support `build svg to web fonts`
 - 💪  Support for `Typescript`
-- 💪  Support `Dark Mode`
+- 💪  Support `Various themes, including md2, md3, dark mode`
 - 🌍  Support `Internationalization`
 - 🚀  Based on `pnpm`
 
@@ -40,30 +40,35 @@ The default configuration can be viewed [varlet.default.config.ts](https://githu
 Also refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.mjs).
 
 | Parameter | Description | Type | Default |
-| -- | -------------- | -------- | ---------- |
+| --- | -------------- | -------- | ---------- |
 | `name` | The full name of the component library, which will be used as the package name | _string_ | `Varlet` |
-| `namespace` | Component library namespace, which will be used as a component prefix | _string_ | `var` |
+| `namespace` | Component library namespace, will be used as component prefix | _string_ | `var` |
 | `host` | Development server host | _number_ | `localhost` |
 | `port` | Development server port | _number_ | `8080` |
-| `title` | The title of the component library in the documentation | _string_ | `VARLET` |
-| `logo` | The logo of the component library in the documentation | _string_ | `-` |
-| `defaultLanguage` | Documentation default language | _string_ | `zh-CN` |
-| `useMobile` | Whether to show the preview of the right mobile phone | _boolean_ | `false` |
-| `lightTheme` | Light Mode Documentation Theme | _Record<string, any>_ | `-` |
-| `darkTheme` | Dark Mode Documentation Theme | _Record<string, any>_ | `-` |
-| `highlight` | Documentation snippet style related | _{ style: string }_ | `-` |
+| `title` | The title of the component library in the document | _string_ | `VARLET` |
+| `logo` | The logo of the component library in the document | _string_ | `-` |
+| `defaultLanguage` | Document default language | _string_ | `zh-CN` |
+| `defaultLightTheme` | The default light theme | _string_ | `md3LightTheme` |
+| `defaultDarkTheme` | The default dark theme | _string_ | `md3DarkTheme` |
+| `useMobile` | Whether to display the mobile phone preview on the right | _boolean_ | `false` |
+| `themeKey` | The key of the theme in local storage | _string_ | `VARLET_THEME` |
+| `lightTheme` | md2 light mode document theme | _Record<string, any>_ | `-` |
+| `darkTheme` | md2 dark mode document theme | _Record<string, any>_ | `-` |
+| `md3LightTheme` | md3 light mode document theme | _Record<string, any>_ | `-` |
+| `md3DarkTheme` | md3 dark mode document theme | _Record<string, any>_ | `-` |
+| `highlight` | Document code snippet style related | _{ style: string }_ | `-` |
 | `analysis` | Document statistics related | _{ baidu: string }_ | `-` |
-| `pc` | PC-side document structure configuration | _Record<string, any>_ | `-` |
-| `mobile` | Mobile side document structure configuration | _Record<string, any>_ | `-` |
-| `directives` | Directive folder names | _string[]_ | `[]` |
-| `copy` | Copy file options | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `-` |
-| `icons` | Font icon packaging related configuration | _[VarletConfigIcons](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
-| `esbuild` | Esbuild configuration | _[VarletConfigEsbuild](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
+| `pc` | PC side document structure configuration | _Record<string, any>_ | `-` |
+| `mobile` | Mobile document structure configuration | _Record<string, any>_ | `-` |
+| `directives` | Component library directive folder name | _string[]_ | `[]` |
+| `copy` | Copy file configuration | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `- ` |
+| `icons` | Font icon packaging related configurations | _[VarletConfigIcons](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts) _ | `-` |
+| `esbuild` | esbuild configuration | _[VarletConfigEsbuild](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | ` -` |
 
 #### Menu
 
-| 参数 | 说明 | 类型 | 默认值 |
-| -- | -------------- | -------- | ---------- |
+| Parameter | Description | Type | Default |
+| --- | -------------- | -------- | ---------- |
 | `doc` | The document page corresponds to the matching file name, required | _string_ | `-` |
 | `type` | The type of menu, when the type is `1`, it means the category menu, when the type is `2`, the doc field matches the component file under src, when the type is `3`, the doc field matches the md file under docs, required | _MenuTypes_ | `-` |
 | `text` | The text displayed in the menu, English display text can be configured when internationalization is set, required | _Record<string, string>_ | `-` |
@@ -138,6 +143,13 @@ varlet-cli preview
 varlet-cli compile
 ```
 
+#### Compile style vars types declaration file
+
+```shell
+# playground-ignore
+varlet-cli compile:style-vars
+```
+
 #### Run VSCode extension development environment
 
 ```shell

package/README.zh-CN.md

@@ -16,7 +16,7 @@
 - 💪  支持 `VSCode` 插件开发
 - 💪  支持 `字体图标打包`
 - 💪  支持 `Typescript`
-- 💪  支持 `暗黑模式`
+- 💪  支持 `多种主题, 包含 md2、md3、暗黑模式`
 - 🌍  支持 `国际化`
 - 🚀  基于 `pnpm`
 
@@ -48,9 +48,14 @@ varlet-cli gen
 | `title` | 文档中组件库的标题 | _string_ | `VARLET` |
 | `logo` | 文档中组件库的logo | _string_ | `-` |
 | `defaultLanguage` | 文档默认语言 | _string_ | `zh-CN` |
+| `defaultLightTheme` | 默认的亮色主题 | _string_ | `md3LightTheme` |
+| `defaultDarkTheme` | 默认的暗色主题 | _string_ | `md3DarkTheme` |
 | `useMobile` | 是否显示右侧手机预览 | _boolean_ | `false` |
-| `lightTheme` | 亮色模式文档主题 | _Record<string, any>_ | `-` |
-| `darkTheme` | 暗黑模式文档主题 | _Record<string, any>_ | `-` |
+| `themeKey` | 主题在本地存储中的 key | _string_ | `VARLET_THEME` |
+| `lightTheme` | md2 亮色模式文档主题 | _Record<string, any>_ | `-` |
+| `darkTheme` | md2 暗黑模式文档主题 | _Record<string, any>_ | `-` |
+| `md3LightTheme` | md3 亮色模式文档主题 | _Record<string, any>_ | `-` |
+| `md3DarkTheme` | md3 暗黑模式文档主题 | _Record<string, any>_ | `-` |
 | `highlight` | 文档代码片段样式相关 | _{ style: string }_ | `-` |
 | `analysis` | 文档统计相关 | _{ baidu: string }_ | `-` |
 | `pc` | pc 端文档结构配置 | _Record<string, any>_ | `-` |
@@ -58,7 +63,7 @@ varlet-cli gen
 | `directives` | 组件库指令文件夹名称 | _string[]_ | `[]` |
 | `copy` | 复制文件配置 | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `-` |
 | `icons` | 字体图标打包相关配置 | _[VarletConfigIcons](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
-| `esbuild` | Esbuild 配置 | _[VarletConfigEsbuild](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
+| `esbuild` | esbuild 配置 | _[VarletConfigEsbuild](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
 
 #### Menu
 
@@ -137,6 +142,13 @@ varlet-cli preview
 varlet-cli compile
 ```
 
+#### 构建样式变量类型声明文件
+
+```shell
+# playground-ignore
+varlet-cli compile:style-vars
+```
+
 #### 启动 VSCode 插件开发环境
 
 ```shell

package/lib/node/bin.js

@@ -68,6 +68,13 @@ program
     const { compile } = await import('./commands/compile.js');
     return compile();
 });
+program
+    .command('compile:style-vars')
+    .description('Compile varlet style vars')
+    .action(async () => {
+    const { styleVars } = await import('./commands/styleVars.js');
+    return styleVars();
+});
 program
     .command('lint')
     .description('Lint code')

package/lib/node/commands/icons.js

@@ -1,5 +1,6 @@
 import fse from 'fs-extra';
 import sharp from 'sharp';
+import slash from 'slash';
 import webfont from 'webfont';
 import logger from '../shared/logger.js';
 import { parse, resolve } from 'path';
@@ -42,7 +43,7 @@ async function buildPNG(entry, pngDir, svgFiles) {
 }
 function buildWebFont(name, entry) {
     return webfont.default({
-        files: `${entry}/*.svg`,
+        files: `${slash(entry)}/*.svg`,
         fontName: name,
         formats: ['ttf'],
         fontHeight: 512,

package/lib/node/commands/lint.js

@@ -14,7 +14,7 @@ export async function lint() {
             './src',
             './packages/varlet-cli/src',
             './packages/varlet-ui/src',
-            './packages/varlet-icons/lib',
+            './packages/varlet-shared/src',
             './packages/varlet-vite-plugins/src',
             './packages/varlet-use/src',
             './packages/varlet-touch-emulator',

package/lib/node/commands/styleVars.d.ts

@@ -0,0 +1 @@
+export declare function styleVars(): void;

package/lib/node/commands/styleVars.js

@@ -0,0 +1,6 @@
+import { compileStyleVars } from '../compiler/compileStyleVars.js';
+import logger from '../shared/logger.js';
+export function styleVars() {
+    compileStyleVars();
+    logger.success('style vars compilation success!');
+}

package/lib/node/compiler/compileSFC.js

@@ -1,11 +1,14 @@
 import fse from 'fs-extra';
 import hash from 'hash-sum';
 import { parse, resolve } from 'path';
-import { parse as parseSFC, compileTemplate, compileStyle, compileScript as compileScriptSFC } from '@vue/compiler-sfc';
+import { parse as parseSFC, compileTemplate, compileStyle, compileScript as compileScriptSFC, registerTS, } from '@vue/compiler-sfc';
 import { replaceExt, smartAppendFileSync } from '../shared/fsUtils.js';
+import { SRC_DIR, ES_DIR } from '../shared/constant.js';
 import { compileScript, getScriptExtname } from './compileScript.js';
+import ts from 'typescript';
 import { clearEmptyLine, compileLess, extractStyleDependencies, normalizeStyleDependency, STYLE_IMPORT_RE, } from './compileStyle.js';
-const { readFile, writeFileSync } = fse;
+const { readFile, existsSync, readFileSync, writeFileSync } = fse;
+registerTS(() => ts);
 const EXPORT = 'export default';
 const SFC = '__sfc__';
 const SFC_DECLARE = `const ${SFC} = `;
@@ -34,13 +37,20 @@ export function injectRender(script, render) {
 export async function compileSFC(sfc) {
     const sources = await readFile(sfc, 'utf-8');
     const id = hash(sources);
-    const { descriptor } = parseSFC(sources, { sourceMap: false });
+    const { descriptor } = parseSFC(sources, { filename: sfc, sourceMap: false });
     const { script, scriptSetup, template, styles } = descriptor;
     let scriptContent;
     let bindingMetadata;
     if (script || scriptSetup) {
         if (scriptSetup) {
-            const { content, bindings } = compileScriptSFC(descriptor, { id });
+            const { content, bindings } = compileScriptSFC(descriptor, {
+                id,
+                // issue https://github.com/varletjs/varlet/issues/1458
+                fs: {
+                    fileExists: (file) => existsSync(file.replace(ES_DIR, SRC_DIR)),
+                    readFile: (file) => readFileSync(file.replace(ES_DIR, SRC_DIR), 'utf-8'),
+                },
+            });
             scriptContent = content;
             bindingMetadata = bindings;
         }

package/lib/node/compiler/compileScript.js

@@ -113,9 +113,9 @@ export async function compileScript(script, file) {
         code = resolveDependence(file, code);
         code = extractStyleDependencies(file, code, IMPORT_CSS_RE);
         code = extractStyleDependencies(file, code, IMPORT_LESS_RE);
-        removeSync(file);
-        writeFileSync(replaceExt(file, getScriptExtname()), code, 'utf8');
     }
+    removeSync(file);
+    writeFileSync(replaceExt(file, getScriptExtname()), code, 'utf8');
 }
 export async function compileScriptFile(file) {
     const sources = readFileSync(file, 'utf-8');

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

@@ -418,13 +418,13 @@ export default defineConfig({
                 'zh-CN': '中文',
                 'en-US': 'English',
             },
-            currentVersion: 'Latest',
+            currentVersion: 'latest',
             versions: [
                 {
                     name: 'varlet.gitee.io',
                     items: [
                         {
-                            label: 'Latest',
+                            label: 'latest',
                             link: 'https://varlet.gitee.io/varlet-ui',
                         },
                         {
@@ -450,10 +450,6 @@ export default defineConfig({
             github: 'https://github.com/varletjs/varlet',
             changelog: 'https://github.com/varletjs/varlet/blob/main/CHANGELOG.md',
             playground: 'https://varlet.gitee.io/varlet-ui-playground',
-            /**
-             * @deprecated
-             */
-            darkMode: true,
             themes: [
                 { 'zh-CN': 'Md2 亮色', 'en-US': 'Md2 Light', value: 'lightTheme' },
                 { 'zh-CN': 'Md2 暗色', 'en-US': 'Md2 Dark', value: 'darkTheme' },
@@ -489,7 +485,7 @@ export default defineConfig({
             ],
         },
     },
-    themeKey: 'VARLET_THEME',
+    themeKey: 'VARLET_V3_THEME',
     defaultLightTheme: 'md3LightTheme',
     defaultDarkTheme: 'md3DarkTheme',
     lightTheme: {
@@ -600,8 +596,8 @@ export default defineConfig({
         'color-shadow': '#eee',
         'color-introduce-border': '#6750A4',
         'color-primary': '#6750A4',
-        'color-link': '#21005D',
-        'color-type': '#21005D',
+        'color-link': '#536525',
+        'color-type': '#536525',
         'color-loading-bar': '#6750A4',
         'color-side-bar': '#6750A4',
         'color-side-bar-active-background': '#E8DEF8',
@@ -646,8 +642,8 @@ export default defineConfig({
         'color-shadow': '#090909',
         'color-introduce-border': '#555',
         'color-primary': '#D0BCFF',
-        'color-link': '#EADDFF',
-        'color-type': '#EADDFF',
+        'color-link': '#BACF83',
+        'color-type': '#BACF83',
         'color-loading-bar': '#D0BCFF',
         'color-side-bar': '#D0BCFF',
         'color-side-bar-active-background': '#4A4458',

package/lib/node/index.d.ts

@@ -11,3 +11,4 @@ export * from './commands/preview.js';
 export * from './commands/vite.js';
 export * from './commands/extension.js';
 export * from './commands/checklist.js';
+export * from './commands/styleVars.js';

package/lib/node/index.js

@@ -11,3 +11,4 @@ export * from './commands/preview.js';
 export * from './commands/vite.js';
 export * from './commands/extension.js';
 export * from './commands/checklist.js';
+export * from './commands/styleVars.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "3.0.0-alpha.1704352780759",
+  "version": "3.0.0-alpha.1707916363117",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -34,15 +34,15 @@
     "url": "https://github.com/varletjs/varlet/issues"
   },
   "dependencies": {
-    "@varlet/release": "^0.1.2",
+    "@varlet/release": "^0.2.1",
     "@babel/core": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@vitejs/plugin-vue": "5.0.1",
+    "@vitejs/plugin-vue": "5.0.3",
     "@vitejs/plugin-vue-jsx": "3.1.0",
-    "@vue/babel-plugin-jsx": "1.1.5",
-    "@vue/compiler-sfc": "3.4.3",
-    "@vue/runtime-core": "3.4.3",
-    "vue": "3.4.3",
+    "@vue/babel-plugin-jsx": "1.2.1",
+    "@vue/compiler-sfc": "3.4.15",
+    "@vue/runtime-core": "3.4.15",
+    "vue": "3.4.15",
     "vite": "5.0.10",
     "esbuild": "0.19.3",
     "vitest": "1.1.0",
@@ -64,8 +64,8 @@
     "slash": "^3.0.0",
     "typescript": "^5.1.5",
     "webfont": "11.2.26",
-    "@varlet/shared": "3.0.0-alpha.1704352780759",
-    "@varlet/vite-plugins": "3.0.0-alpha.1704352780759"
+    "@varlet/shared": "3.0.0-alpha.1707916363117",
+    "@varlet/vite-plugins": "3.0.0-alpha.1707916363117"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -80,12 +80,12 @@
     "@types/semver": "^7.3.9",
     "@types/sharp": "0.31.1",
     "rimraf": "^5.0.1",
-    "@varlet/ui": "3.0.0-alpha.1704352780759",
-    "@varlet/icons": "3.0.0-alpha.1704352780759",
-    "@varlet/touch-emulator": "3.0.0-alpha.1704352780759"
+    "@varlet/icons": "3.0.0-alpha.1707916363117",
+    "@varlet/touch-emulator": "3.0.0-alpha.1707916363117",
+    "@varlet/ui": "3.0.0-alpha.1707916363117"
   },
   "peerDependencies": {
-    "@vue/runtime-core": "3.4.3",
+    "@vue/runtime-core": "3.4.15",
     "@vue/test-utils": "2.4.1",
     "@vitest/coverage-istanbul": "1.1.0",
     "vitest": "1.1.0",
@@ -93,11 +93,11 @@
     "clipboard": "^2.0.6",
     "live-server": "^1.2.1",
     "lodash-es": "^4.17.21",
-    "vue": "3.4.3",
+    "vue": "3.4.15",
     "vue-router": "4.2.0",
-    "@varlet/ui": "3.0.0-alpha.1704352780759",
-    "@varlet/icons": "3.0.0-alpha.1704352780759",
-    "@varlet/touch-emulator": "3.0.0-alpha.1704352780759"
+    "@varlet/icons": "3.0.0-alpha.1707916363117",
+    "@varlet/touch-emulator": "3.0.0-alpha.1707916363117",
+    "@varlet/ui": "3.0.0-alpha.1707916363117"
   },
   "scripts": {
     "dev": "tsc --watch",

package/site/mobile/App.vue

@@ -82,7 +82,7 @@
 
 <script lang="ts">
 import config from '@config'
-import { computed, ComputedRef, defineComponent, ref, Ref, watch } from 'vue'
+import { computed,  defineComponent, ref, watch, type Ref, type ComputedRef } from 'vue'
 import { useRoute } from 'vue-router'
 import {
   getBrowserTheme,