@varlet/cli 2.0.6 → 2.1.0-alpha.1667210582672

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

@@ -0,0 +1,6 @@
+import { InlineConfig } from 'vite';
+import { VarletConfig } from './varlet.config';
+export declare function getDevConfig(varletConfig: Required<VarletConfig>): InlineConfig;
+export declare function getBuildConfig(varletConfig: Required<VarletConfig>): InlineConfig;
+export declare function getESMBundleConfig(varletConfig: Required<VarletConfig>): InlineConfig;
+export declare function getUMDConfig(varletConfig: Required<VarletConfig>): InlineConfig;

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

@@ -0,0 +1,144 @@
+import vue from '@vitejs/plugin-vue';
+import md from '@varlet/markdown-vite-plugin';
+import jsx from '@vitejs/plugin-vue-jsx';
+import fse from 'fs-extra';
+import { injectHtml } from 'vite-plugin-html';
+import { CWD, ES_DIR, LIB_DIR, SITE_CONFIG, SITE_DIR, SITE_MOBILE_ROUTES, SITE_OUTPUT_PATH, SITE_PC_ROUTES, SITE_PUBLIC_PATH, UMD_DIR, VITE_RESOLVE_EXTENSIONS, } from '../shared/constant.js';
+import { get } from 'lodash-es';
+import { kebabCase } from '@varlet/shared';
+import { resolve } from 'path';
+const { copyFileSync, pathExistsSync, readFileSync, removeSync, writeFileSync } = fse;
+export function getDevConfig(varletConfig) {
+    const defaultLanguage = get(varletConfig, 'defaultLanguage');
+    const host = get(varletConfig, 'host');
+    return {
+        root: SITE_DIR,
+        resolve: {
+            extensions: VITE_RESOLVE_EXTENSIONS,
+            alias: {
+                '@config': SITE_CONFIG,
+                '@pc-routes': SITE_PC_ROUTES,
+                '@mobile-routes': SITE_MOBILE_ROUTES,
+            },
+        },
+        server: {
+            port: get(varletConfig, 'port'),
+            host: host === 'localhost' ? '0.0.0.0' : host,
+        },
+        publicDir: SITE_PUBLIC_PATH,
+        plugins: [
+            vue({
+                include: [/\.vue$/, /\.md$/],
+            }),
+            md({ style: get(varletConfig, 'highlight.style') }),
+            jsx(),
+            injectHtml({
+                data: {
+                    pcTitle: get(varletConfig, `pc.title['${defaultLanguage}']`),
+                    mobileTitle: get(varletConfig, `mobile.title['${defaultLanguage}']`),
+                    logo: get(varletConfig, `logo`),
+                    baidu: get(varletConfig, `analysis.baidu`, ''),
+                },
+            }),
+        ],
+    };
+}
+export function getBuildConfig(varletConfig) {
+    const devConfig = getDevConfig(varletConfig);
+    return Object.assign(Object.assign({}, devConfig), { base: './', build: {
+            outDir: SITE_OUTPUT_PATH,
+            reportCompressedSize: false,
+            emptyOutDir: true,
+            cssTarget: 'chrome61',
+            rollupOptions: {
+                input: {
+                    main: resolve(SITE_DIR, 'index.html'),
+                    mobile: resolve(SITE_DIR, 'mobile.html'),
+                },
+            },
+        } });
+}
+function inlineCSS(fileName, dir) {
+    return {
+        name: 'varlet-inline-css-vite-plugin',
+        apply: 'build',
+        closeBundle() {
+            const cssFile = resolve(dir, 'style.css');
+            if (!pathExistsSync(cssFile)) {
+                return;
+            }
+            const jsFile = resolve(dir, fileName);
+            const cssCode = readFileSync(cssFile, 'utf-8');
+            const jsCode = readFileSync(jsFile, 'utf-8');
+            const injectCode = `;(function(){var style=document.createElement('style');style.type='text/css';\
+style.rel='stylesheet';style.appendChild(document.createTextNode(\`${cssCode.replace(/\\/g, '\\\\')}\`));\
+var head=document.querySelector('head');head.appendChild(style)})();`;
+            writeFileSync(jsFile, `${injectCode}${jsCode}`);
+            copyFileSync(cssFile, resolve(LIB_DIR, 'style.css'));
+            removeSync(cssFile);
+        },
+    };
+}
+function clear() {
+    return {
+        name: 'varlet-clear-vite-plugin',
+        apply: 'build',
+        closeBundle() {
+            removeSync(resolve(CWD, 'dist'));
+        },
+    };
+}
+export function getESMBundleConfig(varletConfig) {
+    const name = get(varletConfig, 'name');
+    const fileName = `${kebabCase(name)}.esm.js`;
+    return {
+        logLevel: 'silent',
+        build: {
+            emptyOutDir: true,
+            lib: {
+                name,
+                formats: ['es'],
+                fileName: () => fileName,
+                entry: resolve(ES_DIR, 'umdIndex.js'),
+            },
+            rollupOptions: {
+                external: ['vue'],
+                output: {
+                    dir: ES_DIR,
+                    exports: 'named',
+                    globals: {
+                        vue: 'Vue',
+                    },
+                },
+            },
+        },
+        plugins: [clear()],
+    };
+}
+export function getUMDConfig(varletConfig) {
+    const name = get(varletConfig, 'name');
+    const fileName = `${kebabCase(name)}.js`;
+    return {
+        logLevel: 'silent',
+        build: {
+            emptyOutDir: true,
+            lib: {
+                name,
+                formats: ['umd'],
+                fileName: () => fileName,
+                entry: resolve(ES_DIR, 'umdIndex.js'),
+            },
+            rollupOptions: {
+                external: ['vue'],
+                output: {
+                    dir: UMD_DIR,
+                    exports: 'named',
+                    globals: {
+                        vue: 'Vue',
+                    },
+                },
+            },
+        },
+        plugins: [inlineCSS(fileName, UMD_DIR), clear()],
+    };
+}

package/lib/node/index.d.ts

@@ -0,0 +1 @@
+export { defineConfig } from './config/varlet.config.js';

package/lib/node/index.js

@@ -0,0 +1 @@
+export { defineConfig } from './config/varlet.config.js';

package/lib/{shared → node/shared}/constant.d.ts

@@ -1,3 +1,4 @@
+export declare const dirname: string;
 export declare const CWD: string;
 export declare const VARLET_CONFIG: string;
 export declare const SRC_DIR: string;
@@ -39,5 +40,3 @@ export declare const HL_TAGS_JSON: string;
 export declare const HL_ATTRIBUTES_JSON: string;
 export declare const HL_WEB_TYPES_JSON: string;
 export declare const JEST_CONFIG: string;
-export declare const JEST_MEDIA_MOCK: string;
-export declare const JEST_STYLE_MOCK: string;

package/lib/node/shared/constant.js

@@ -0,0 +1,47 @@
+import { resolve } from 'path';
+import { getDirname } from './fsUtils.js';
+export const dirname = getDirname(import.meta.url);
+export const CWD = process.cwd();
+export const VARLET_CONFIG = resolve(CWD, 'varlet.config.mjs');
+export const SRC_DIR = resolve(CWD, 'src');
+export const ES_DIR = resolve(CWD, 'es');
+export const LIB_DIR = resolve(CWD, 'lib');
+export const UMD_DIR = resolve(CWD, 'umd');
+export const TYPES_DIR = resolve(CWD, 'types');
+export const ROOT_DOCS_DIR = resolve(CWD, 'docs');
+export const ROOT_PAGES_DIR = resolve(CWD, 'pages');
+export const ESLINT_EXTENSIONS = ['.vue', '.ts', '.js', '.mjs', '.tsx', '.jsx'];
+export const VITE_RESOLVE_EXTENSIONS = ['.vue', '.tsx', '.ts', '.jsx', '.js', '.less', '.css'];
+export const SCRIPTS_EXTENSIONS = ['.tsx', '.ts', '.jsx', '.js'];
+export const PUBLIC_DIR_INDEXES = ['index.vue', 'index.tsx', 'index.ts', 'index.jsx', 'index.js'];
+export const STYLE_DIR_NAME = 'style';
+export const EXAMPLE_DIR_NAME = 'example';
+export const LOCALE_DIR_NAME = 'locale';
+export const DOCS_DIR_NAME = 'docs';
+export const DIR_INDEX = 'index.vue';
+export const TESTS_DIR_NAME = '__tests__';
+export const GENERATORS_DIR = resolve(dirname, '../../../template/generators');
+export const UI_PACKAGE_JSON = resolve(CWD, 'package.json');
+export const CLI_PACKAGE_JSON = resolve(dirname, '../../../package.json');
+// site
+export const SITE = resolve(dirname, '../../../site');
+export const SITE_OUTPUT_PATH = resolve(CWD, 'site');
+export const SITE_PUBLIC_PATH = resolve(CWD, 'public');
+export const SITE_DIR = resolve(CWD, '.varlet/site');
+export const SITE_PC_DIR = resolve(CWD, '.varlet/site/pc');
+export const SITE_PC_ROUTES = resolve(CWD, '.varlet/pc.routes.ts');
+export const SITE_MOBILE_ROUTES = resolve(CWD, '.varlet/mobile.routes.ts');
+export const SITE_CONFIG = resolve(CWD, '.varlet/site.config.json');
+// template highlight
+export const HL_COMPONENT_NAME_RE = /.*(\/|\\)(.+)(\/|\\)docs(\/|\\)/;
+export const HL_API_RE = /##\s*API\n+/;
+export const HL_TITLE_ATTRIBUTES_RE = /###\s*属性\s*\n+/;
+export const HL_TITLE_EVENTS_RE = /###\s*事件\s*\n+/;
+export const HL_TITLE_SLOTS_RE = /###\s*插槽\s*\n+/;
+export const HL_MD = 'zh-CN.md';
+export const HL_DIR = resolve(CWD, 'highlight');
+export const HL_TAGS_JSON = resolve(HL_DIR, 'tags.json');
+export const HL_ATTRIBUTES_JSON = resolve(HL_DIR, 'attributes.json');
+export const HL_WEB_TYPES_JSON = resolve(HL_DIR, 'web-types.json');
+// jest
+export const JEST_CONFIG = resolve(dirname, '../../../cjs/jest.config.cjs');

package/lib/{shared → node/shared}/fsUtils.d.ts

@@ -10,3 +10,4 @@ export declare const replaceExt: (file: string, ext: string) => string;
 export declare function smartAppendFileSync(file: string, code: string): void;
 export declare function outputFileSyncOnChange(path: string, code: string): void;
 export declare function glob(pattern: string): Promise<string[]>;
+export declare function getDirname(url: string): string;

package/lib/node/shared/fsUtils.js

@@ -0,0 +1,48 @@
+import globSync from 'glob';
+import fse from 'fs-extra';
+import { extname, resolve } from 'path';
+import { PUBLIC_DIR_INDEXES, SCRIPTS_EXTENSIONS, SRC_DIR } from './constant.js';
+import { fileURLToPath } from 'url';
+const { appendFileSync, ensureFileSync, lstatSync, outputFileSync, pathExistsSync, readdir, readFileSync } = fse;
+export async function getPublicDirs() {
+    const srcDir = await readdir(SRC_DIR);
+    return srcDir.filter((filename) => isPublicDir(resolve(SRC_DIR, filename)));
+}
+export const isMD = (file) => pathExistsSync(file) && extname(file) === '.md';
+export const isDir = (file) => pathExistsSync(file) && lstatSync(file).isDirectory();
+export const isSFC = (file) => pathExistsSync(file) && extname(file) === '.vue';
+export const isDTS = (file) => pathExistsSync(file) && file.endsWith('.d.ts');
+export const isScript = (file) => pathExistsSync(file) && SCRIPTS_EXTENSIONS.includes(extname(file));
+export const isLess = (file) => pathExistsSync(file) && extname(file) === '.less';
+export const isPublicDir = (dir) => PUBLIC_DIR_INDEXES.some((index) => pathExistsSync(resolve(dir, index)));
+export const replaceExt = (file, ext) => file.replace(extname(file), ext);
+export function smartAppendFileSync(file, code) {
+    if (pathExistsSync(file)) {
+        const content = readFileSync(file, 'utf-8');
+        if (!content.includes(code)) {
+            appendFileSync(file, code);
+        }
+    }
+}
+export function outputFileSyncOnChange(path, code) {
+    ensureFileSync(path);
+    const content = readFileSync(path, 'utf-8');
+    if (content !== code) {
+        outputFileSync(path, code);
+    }
+}
+export function glob(pattern) {
+    return new Promise((resolve, reject) => {
+        globSync(pattern, (err, files) => {
+            if (err) {
+                reject(err);
+            }
+            else {
+                resolve(files);
+            }
+        });
+    });
+}
+export function getDirname(url) {
+    return fileURLToPath(new URL('.', url));
+}

package/lib/node/shared/logger.js

@@ -0,0 +1,18 @@
+import chalk from 'chalk';
+export default {
+    info(text) {
+        console.log(text);
+    },
+    success(text) {
+        console.log(chalk.hex('#00c48f')(text));
+    },
+    warning(text) {
+        console.log(chalk.hex('#ff9800')(text));
+    },
+    error(text) {
+        console.log(chalk.hex('#f44336')(text));
+    },
+    title(text) {
+        console.log(chalk.cyan(text));
+    },
+};

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@varlet/cli",
-  "version": "2.0.6",
+  "version": "2.1.0-alpha.1667210582672",
+  "type": "module",
   "description": "cli of varlet",
   "bin": {
-    "varlet-cli": "./lib/bin.js"
+    "varlet-cli": "./lib/node/bin.js"
   },
-  "main": "./lib/index.js",
-  "module": "./lib/index.js",
+  "main": "./lib/node/index.js",
+  "module": "./lib/node/index.js",
   "keywords": [
     "cli",
     "varlet"
@@ -15,13 +16,17 @@
   "license": "MIT",
   "files": [
     "lib",
+    "cjs",
+    "client.js",
+    "client.d.ts",
     "template",
     "site",
     "tsconfig.json",
-    "varlet.default.config.js",
-    "preset.js",
-    "CHANGELOG.md"
+    "preset.cjs"
   ],
+  "engines": {
+    "node": "^14.18.0 || >=16.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/varletjs/varlet.git"
@@ -34,8 +39,9 @@
     "@babel/helper-plugin-utils": "^7.14.5",
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
-    "@varlet/markdown-vite-plugin": "2.0.6",
-    "@varlet/shared": "2.0.6",
+    "@types/inquirer": "^9.0.2",
+    "@varlet/markdown-vite-plugin": "2.1.0-alpha.1667210582672",
+    "@varlet/shared": "2.1.0-alpha.1667210582672",
     "@vitejs/plugin-vue": "3.0.1",
     "@vitejs/plugin-vue-jsx": "2.0.0",
     "@vue/babel-plugin-jsx": "1.1.1",
@@ -51,10 +57,9 @@
     "fs-extra": "^9.0.1",
     "glob": "^7.2.0",
     "hash-sum": "^2.0.0",
-    "inquirer": "^8.1.2",
+    "inquirer": "^9.1.4",
     "jest": "^26.6.3",
     "less": "^3.12.2",
-    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "ora": "^5.4.0",
     "semver": "^7.3.5",
@@ -67,23 +72,20 @@
     "vue-jest": "^5.0.0-alpha.8"
   },
   "devDependencies": {
-    "@varlet/icons": "2.0.6",
-    "@varlet/touch-emulator": "2.0.6",
-    "@types/node": "^18.7.20",
     "@types/babel__core": "^7.1.12",
     "@types/ejs": "^3.1.1",
     "@types/fs-extra": "^9.0.2",
     "@types/glob": "^7.1.3",
     "@types/hash-sum": "^1.0.0",
-    "@types/inquirer": "8.1.2",
-    "@types/jest": "^26.0.15",
-    "@types/lodash": "^4.14.174",
     "@types/lodash-es": "^4.17.5",
-    "@types/semver": "^7.3.9"
+    "@types/node": "^18.7.20",
+    "@types/semver": "^7.3.9",
+    "@varlet/icons": "2.1.0-alpha.1667210582672",
+    "@varlet/touch-emulator": "2.1.0-alpha.1667210582672"
   },
   "peerDependencies": {
-    "@varlet/icons": "2.0.6",
-    "@varlet/touch-emulator": "2.0.6",
+    "@varlet/icons": "2.1.0-alpha.1667210582672",
+    "@varlet/touch-emulator": "2.1.0-alpha.1667210582672",
     "@vue/runtime-core": "3.2.16",
     "@vue/test-utils": "^2.0.2",
     "clipboard": "^2.0.6",

package/{preset.js → preset.cjs}

@@ -1,3 +1,3 @@
-const babelConfig = require('./lib/config/babel.config')
+const babelConfig = require('./cjs/babel.config.cjs')
 
 module.exports = (api, options) => babelConfig(api, options)

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

@@ -43,7 +43,8 @@ import config from '@config'
 import { defineComponent, nextTick, ref, onMounted } from 'vue'
 import { doubleRaf } from '../utils/elements'
 import { get } from 'lodash-es'
-import { getBrowserTheme, getPCLocationInfo, utoa } from '../../utils'
+import { getBrowserTheme, getPCLocationInfo } from '@varlet/cli/client'
+import { utoa } from '../../utils'
 import type { Ref } from 'vue'
 
 let clipId = 0

package/site/components/utils/components.ts

@@ -98,10 +98,7 @@ export function createNamespace(name: string) {
   }
 }
 
-export function call<F extends (...arg: any) => any, P extends Parameters<F>>(
-  fn?: F | null,
-  ...arg: P
-): ReturnType<F> | undefined {
+export function call<P extends any[], R>(fn?: ((...arg: P) => R) | null, ...arg: P): R | undefined {
   if (fn) return fn(...arg)
 }
 

package/site/components/utils/elements.ts

@@ -1,5 +1,5 @@
 import { isNumber, isString, toNumber, kebabCase } from '@varlet/shared'
-import type { StyleVars } from '../../utils'
+import type { StyleVars } from '@varlet/cli/client'
 
 export function getLeft(element: HTMLElement): number {
   const { left } = element.getBoundingClientRect()

package/site/mobile/App.vue

@@ -77,14 +77,11 @@ import { computed, ComputedRef, defineComponent, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import {
   getBrowserTheme,
-  inIframe,
-  isPhone,
-  removeEmpty,
-  setTheme,
-  Theme,
+  type Theme,
   watchLang,
   watchTheme
-} from '../utils'
+} from '@varlet/cli/client'
+import { removeEmpty, setTheme, inIframe, isPhone } from '../utils'
 import { bigCamelize } from '@varlet/shared'
 import { get } from 'lodash-es'
 
@@ -151,13 +148,13 @@ export default defineComponent({
     }
 
     const toggleTheme = () => {
-      setCurrentTheme(currentTheme.value === 'darkTheme' ? 'lightTheme' : 'darkTheme')
-      window.postMessage(getThemeMessage(), '*')
+        setCurrentTheme(currentTheme.value === 'darkTheme' ? 'lightTheme' : 'darkTheme')
+        window.postMessage(getThemeMessage(), '*')
 
-      if (!isPhone() && inIframe()) {
-        ;(window.top as any).postMessage(getThemeMessage(), '*')
+        if (!isPhone() && inIframe()) {
+          ;(window.top as any).postMessage(getThemeMessage(), '*')
+        }
       }
-    }
 
     ;(window as any).toggleTheme = toggleTheme
 
@@ -194,6 +191,7 @@ export default defineComponent({
 <style lang="less">
 * {
   -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
 }
 
 body {
@@ -208,6 +206,13 @@ body {
   transition: background-color 0.25s, color 0.25s;
 }
 
+header {
+  position: fixed;
+  z-index: 99;
+  width: 100%;
+  font-weight: bold;
+}
+
 ::-webkit-scrollbar {
   display: none;
   width: 0;
@@ -228,17 +233,6 @@ body {
   }
 }
 
-header {
-  position: fixed;
-  z-index: 99;
-  width: 100%;
-  font-weight: bold;
-}
-
-.app-bar {
-  background: var(--site-config-color-app-bar) !important;
-}
-
 .settings {
   position: fixed;
   z-index: 200;
@@ -251,10 +245,6 @@ header {
   padding: 55px 15px 15px;
 }
 
-* {
-  box-sizing: border-box;
-}
-
 .mobile-language-cell {
   color: var(--site-config-color-text) !important;
   background: var(--site-config-color-bar) !important;
@@ -289,4 +279,15 @@ header {
 .i18n-button {
   padding-right: 6px !important;
 }
+
+.app-type {
+  width: 100%;
+  padding: 15px 0;
+  color: var(--site-config-color-sub-text);
+  font-size: 14px;
+}
+
+.app-bar {
+  background: var(--site-config-color-app-bar) !important;
+}
 </style>

package/site/mobile/components/AppHome.vue

@@ -23,7 +23,8 @@
 import config from '@config'
 import { useRouter } from 'vue-router'
 import { reactive, ref } from 'vue'
-import { inIframe, isPhone, watchLang, watchPlatform } from '../../utils'
+import { watchLang, watchPlatform } from '@varlet/cli/client'
+import { inIframe, isPhone } from '../../utils'
 
 export default {
   name: 'AppHome',

package/site/pc/App.vue

@@ -2,7 +2,8 @@
 import config from '@config'
 import LogoAnimation from './components/LogoAnimation.vue'
 import { defineComponent, onMounted, ref } from 'vue'
-import { getPCLocationInfo, isPhone } from '../utils'
+import { getPCLocationInfo } from '@varlet/cli/client'
+import { isPhone } from '../utils'
 import { get } from 'lodash-es'
 
 export default defineComponent({

package/site/pc/Layout.vue

@@ -7,7 +7,8 @@ import context from '../components/context'
 import { nextTick, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { get } from 'lodash-es'
-import { getPCLocationInfo, MenuTypes, type Menu } from '../utils'
+import { getPCLocationInfo } from '@varlet/cli/client'
+import { MenuTypes, type Menu } from '../utils'
 import type { Ref } from 'vue'
 
 const menu: Ref<Menu[]> = ref(get(config, 'pc.menu', []))
@@ -127,8 +128,8 @@ watch(
     @click-overlay="confirmClose"
   >
     <div class="varlet-site-playground-container">
-      <iframe id="playground" class="varlet-site-playground-iframe" :src="context.playgroundURL"
-              frameborder="0"></iframe>
+      <iframe id="playground" class="varlet-site-playground-iframe" :src="context.playgroundURL" allow="clipboard-write">
+      </iframe>
     </div>
   </var-popup>
 </template>

package/site/pc/components/AppHeader.vue

@@ -1,10 +1,12 @@
 <script lang="ts">
 import config from '@config'
+import AnimationBox from './AnimationBox.vue'
 import { ref, computed, defineComponent } from 'vue'
 import { get } from 'lodash-es'
-import { getBrowserTheme, getPCLocationInfo, removeEmpty, setTheme, Theme, watchTheme } from '../../utils'
+import { getBrowserTheme, getPCLocationInfo, Theme, watchTheme } from '@varlet/cli/client'
+import { setTheme } from '../../utils'
+import { removeEmpty } from '../../utils'
 import { useRouter } from 'vue-router'
-import AnimationBox from './AnimationBox.vue'
 import type { Ref, ComputedRef } from 'vue'
 
 export default defineComponent({

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

@@ -2,11 +2,15 @@
 import AnimationBox from '../../components/AnimationBox.vue'
 import config from '@config'
 import { get } from 'lodash-es'
-import { ref, watch } from 'vue'
+import { ref, watch, type Ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { getBrowserTheme, setTheme, Theme } from '../../../utils'
-import { getPCLocationInfo, watchTheme } from '@varlet/cli/site/utils'
-import type { Ref } from 'vue'
+import {
+  getPCLocationInfo,
+  watchTheme,
+  getBrowserTheme,
+  type Theme
+} from '@varlet/cli/client'
+import { setTheme } from '../../../utils'
 
 const route = useRoute()
 const router = useRouter()

package/site/useProgress.ts

@@ -1,7 +1,8 @@
 import Progress from './components/progress'
 import config from '@config'
 import { reactive } from 'vue'
-import { getBrowserTheme, mountInstance, Theme, watchTheme } from './utils'
+import { getBrowserTheme, Theme, watchTheme } from '@varlet/cli/client'
+import { mountInstance } from './components/utils/components'
 import { get } from 'lodash-es'
 
 function getColor(theme?: Theme) {