@varlet/cli 2.0.5 → 2.1.0-alpha.1666877950844

package/lib/node/compiler/compileScript.js

@@ -0,0 +1,141 @@
+import fse from 'fs-extra';
+import { transformAsync } from '@babel/core';
+import { bigCamelize } from '@varlet/shared';
+import { replaceExt } from '../shared/fsUtils.js';
+import { extractStyleDependencies, IMPORT_CSS_RE, IMPORT_LESS_RE, REQUIRE_CSS_RE, REQUIRE_LESS_RE, } from './compileStyle.js';
+import { resolve } from 'path';
+import { get } from 'lodash-es';
+import { getVarletConfig } from '../config/varlet.config.js';
+const { writeFileSync, readFileSync, removeSync, writeFile } = fse;
+export const IMPORT_VUE_PATH_RE = /((?<!['"`])import\s+.+from\s+['"]\s*\.{1,2}\/.+)\.vue(\s*['"`]);?(?!\s*['"`])/g;
+export const IMPORT_TS_PATH_RE = /((?<!['"`])import\s+.+from\s+['"]\s*\.{1,2}\/.+)\.ts(\s*['"`]);?(?!\s*['"`])/g;
+export const IMPORT_JSX_PATH_RE = /((?<!['"`])import\s+.+from\s+['"]\s*\.{1,2}\/.+)\.jsx(\s*['"`]);?(?!\s*['"`])/g;
+export const IMPORT_TSX_PATH_RE = /((?<!['"`])import\s+.+from\s+['"]\s*\.{1,2}\/.+)\.tsx(\s*['"`]);?(?!\s*['"`])/g;
+export const REQUIRE_VUE_PATH_RE = /(?<!['"`]\s*)(require\s*\(\s*['"]\s*\.{1,2}\/.+)\.vue(\s*['"`]\))(?!\s*['"`])/g;
+export const REQUIRE_TS_PATH_RE = /(?<!['"`]\s*)(require\s*\(\s*['"]\s*\.{1,2}\/.+)\.ts(\s*['"`]\))(?!\s*['"`])/g;
+export const REQUIRE_JSX_PATH_RE = /(?<!['"`]\s*)(require\s*\(\s*['"]\s*\.{1,2}\/.+)\.jsx(\s*['"`]\))(?!\s*['"`])/g;
+export const REQUIRE_TSX_PATH_RE = /(?<!['"`]\s*)(require\s*\(\s*['"]\s*\.{1,2}\/.+)\.tsx(\s*['"`]\))(?!\s*['"`])/g;
+const scriptReplacer = (_, p1, p2) => `${p1}.js${p2}`;
+export const replaceVueExt = (script) => script.replace(IMPORT_VUE_PATH_RE, scriptReplacer).replace(REQUIRE_VUE_PATH_RE, scriptReplacer);
+export const replaceTSExt = (script) => script.replace(IMPORT_TS_PATH_RE, scriptReplacer).replace(REQUIRE_TS_PATH_RE, scriptReplacer);
+export const replaceJSXExt = (script) => script.replace(IMPORT_JSX_PATH_RE, scriptReplacer).replace(REQUIRE_JSX_PATH_RE, scriptReplacer);
+export const replaceTSXExt = (script) => script.replace(IMPORT_TSX_PATH_RE, scriptReplacer).replace(REQUIRE_TSX_PATH_RE, scriptReplacer);
+export const moduleCompatible = async (script) => {
+    const moduleCompatible = get(await getVarletConfig(), 'moduleCompatible', {});
+    Object.keys(moduleCompatible).forEach((esm) => {
+        const commonjs = moduleCompatible[esm];
+        script = script.replace(esm, commonjs);
+    });
+    return script;
+};
+export async function compileScript(script, file) {
+    const modules = process.env.BABEL_MODULE;
+    if (modules === 'commonjs') {
+        script = await moduleCompatible(script);
+    }
+    let { code } = (await transformAsync(script, {
+        filename: file,
+    }));
+    code = extractStyleDependencies(file, code, modules === 'commonjs' ? REQUIRE_CSS_RE : IMPORT_CSS_RE);
+    code = extractStyleDependencies(file, code, modules === 'commonjs' ? REQUIRE_LESS_RE : IMPORT_LESS_RE);
+    code = replaceVueExt(code);
+    code = replaceTSXExt(code);
+    code = replaceJSXExt(code);
+    code = replaceTSExt(code);
+    removeSync(file);
+    writeFileSync(replaceExt(file, '.js'), code, 'utf8');
+}
+export async function compileScriptFile(file) {
+    const sources = readFileSync(file, 'utf-8');
+    await compileScript(sources, file);
+}
+export async function compileESEntry(dir, publicDirs) {
+    const imports = [];
+    const plugins = [];
+    const constInternalComponents = [];
+    const cssImports = [];
+    const publicComponents = [];
+    publicDirs.forEach((dirname) => {
+        const publicComponent = bigCamelize(dirname);
+        publicComponents.push(publicComponent);
+        imports.push(`import ${publicComponent}, * as ${publicComponent}Module from './${dirname}'`);
+        constInternalComponents.push(`export const _${publicComponent}Component = ${publicComponent}Module._${publicComponent}Component || {}`);
+        plugins.push(`${publicComponent}.install && app.use(${publicComponent})`);
+        cssImports.push(`import './${dirname}/style'`);
+    });
+    const install = `
+function install(app) {
+  ${plugins.join('\n  ')}
+}
+`;
+    const indexTemplate = `\
+${imports.join('\n')}\n
+${constInternalComponents.join('\n')}\n
+${install}
+export {
+  install,
+  ${publicComponents.join(',\n  ')}
+}
+
+export default {
+  install,
+  ${publicComponents.join(',\n  ')}
+}
+`;
+    const styleTemplate = `\
+${cssImports.join('\n')}
+`;
+    const umdTemplate = `\
+${imports.join('\n')}\n
+${cssImports.join('\n')}\n
+${install}
+export {
+  install,
+  ${publicComponents.join(',\n  ')}
+}
+
+export default {
+  install,
+  ${publicComponents.join(',\n  ')}
+}
+`;
+    await Promise.all([
+        writeFile(resolve(dir, 'index.js'), indexTemplate, 'utf-8'),
+        writeFile(resolve(dir, 'umdIndex.js'), umdTemplate, 'utf-8'),
+        writeFile(resolve(dir, 'style.js'), styleTemplate, 'utf-8'),
+    ]);
+}
+export async function compileCommonJSEntry(dir, publicDirs) {
+    const requires = [];
+    const plugins = [];
+    const cssRequires = [];
+    const publicComponents = [];
+    publicDirs.forEach((dirname) => {
+        const publicComponent = bigCamelize(dirname);
+        publicComponents.push(publicComponent);
+        requires.push(`var ${publicComponent} = require('./${dirname}')['default']`);
+        plugins.push(`${publicComponent}.install && app.use(${publicComponent})`);
+        cssRequires.push(`require('./${dirname}/style')`);
+    });
+    const install = `
+function install(app) {
+  ${plugins.join('\n  ')}
+}
+`;
+    const indexTemplate = `\
+${requires.join('\n')}\n
+${install}
+
+module.exports = {
+  install,
+  ${publicComponents.join(',\n  ')}
+}
+`;
+    const styleTemplate = `\
+${cssRequires.join('\n')}
+`;
+    await Promise.all([
+        writeFile(resolve(dir, 'index.js'), indexTemplate, 'utf-8'),
+        writeFile(resolve(dir, 'style.js'), styleTemplate, 'utf-8'),
+    ]);
+}

package/lib/{compiler → node/compiler}/compileSiteEntry.d.ts

@@ -1,13 +1,13 @@
-export declare function getExampleRoutePath(examplePath: string): string;
-export declare function getComponentDocRoutePath(componentDocsPath: string): string;
-export declare function getRootDocRoutePath(rootDocsPath: string): string;
-export declare function getRootRoutePath(rootLocalePath: string): string;
-export declare function getRootFilePath(rootLocalePath: string): string;
-export declare function findExamples(): Promise<string[]>;
-export declare function findComponentDocs(): Promise<string[]>;
-export declare function findRootDocs(): Promise<string[]>;
-export declare function findRootLocales(): Promise<string[]>;
-export declare function buildMobileSiteRoutes(): Promise<void>;
-export declare function buildPcSiteRoutes(): Promise<void>;
-export declare function buildSiteSource(): Promise<void>;
-export declare function buildSiteEntry(): Promise<void>;
+export declare function getExampleRoutePath(examplePath: string): string;
+export declare function getComponentDocRoutePath(componentDocsPath: string): string;
+export declare function getRootDocRoutePath(rootDocsPath: string): string;
+export declare function getRootRoutePath(rootLocalePath: string): string;
+export declare function getRootFilePath(rootLocalePath: string): string;
+export declare function findExamples(): Promise<string[]>;
+export declare function findComponentDocs(): Promise<string[]>;
+export declare function findRootDocs(): Promise<string[]>;
+export declare function findRootLocales(): Promise<string[]>;
+export declare function buildMobileSiteRoutes(): Promise<void>;
+export declare function buildPcSiteRoutes(): Promise<void>;
+export declare function buildSiteSource(): Promise<void>;
+export declare function buildSiteEntry(): Promise<void>;

package/lib/node/compiler/compileSiteEntry.js

@@ -0,0 +1,128 @@
+import slash from 'slash';
+import fse from 'fs-extra';
+import { DOCS_DIR_NAME, DIR_INDEX, 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 EXAMPLE_COMPONENT_NAME_RE = /\/([-\w]+)\/example\/index.vue/;
+const COMPONENT_DOCS_RE = /\/([-\w]+)\/docs\/([-\w]+)\.md/;
+const ROOT_DOCS_RE = /\/docs\/([-\w]+)\.([-\w]+)\.md/;
+const ROOT_LOCALE_RE = /\/pages\/([-\w]+)\/locale\/([-\w]+)\.ts/;
+export function getExampleRoutePath(examplePath) {
+    var _a;
+    return '/' + ((_a = examplePath.match(EXAMPLE_COMPONENT_NAME_RE)) === null || _a === void 0 ? void 0 : _a[1]);
+}
+export function getComponentDocRoutePath(componentDocsPath) {
+    var _a;
+    const [, routePath, language] = (_a = componentDocsPath.match(COMPONENT_DOCS_RE)) !== null && _a !== void 0 ? _a : [];
+    return `/${language}/${routePath}`;
+}
+export function getRootDocRoutePath(rootDocsPath) {
+    var _a;
+    const [, routePath, language] = (_a = rootDocsPath.match(ROOT_DOCS_RE)) !== null && _a !== void 0 ? _a : [];
+    return `/${language}/${routePath}`;
+}
+export function getRootRoutePath(rootLocalePath) {
+    var _a;
+    const [, routePath, language] = (_a = rootLocalePath.match(ROOT_LOCALE_RE)) !== null && _a !== void 0 ? _a : [];
+    return `/${language}/${routePath}`;
+}
+export function getRootFilePath(rootLocalePath) {
+    return rootLocalePath.replace(/locale\/.+/, DIR_INDEX);
+}
+export function findExamples() {
+    return glob(`${SRC_DIR}/**/${EXAMPLE_DIR_NAME}/${DIR_INDEX}`);
+}
+export function findComponentDocs() {
+    return glob(`${SRC_DIR}/**/${DOCS_DIR_NAME}/*.md`);
+}
+export function findRootDocs() {
+    return glob(`${ROOT_DOCS_DIR}/*.md`);
+}
+export async function findRootLocales() {
+    const defaultLanguage = get(await getVarletConfig(), 'defaultLanguage');
+    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) => {
+        if (isDir(page)) {
+            const locales = await glob(`${page}/${LOCALE_DIR_NAME}/*.ts`);
+            if (!locales.length)
+                locales.push(`${page}/${LOCALE_DIR_NAME}/${defaultLanguage}.ts`);
+            (await userLocales).push(...locales);
+        }
+        return userLocales;
+    }, Promise.resolve([]));
+    // filter
+    const filterMap = new Map();
+    baseLocales.forEach((locale) => {
+        var _a;
+        const [, routePath, language] = (_a = locale.match(ROOT_LOCALE_RE)) !== null && _a !== void 0 ? _a : [];
+        filterMap.set(routePath + language, slash(`${SITE_PC_DIR}/pages/${routePath}/locale/${language}.ts`));
+    });
+    userLocales.forEach((locale) => {
+        var _a;
+        const [, routePath, language] = (_a = locale.match(ROOT_LOCALE_RE)) !== null && _a !== void 0 ? _a : [];
+        filterMap.set(routePath + language, locale);
+    });
+    return Promise.resolve(Array.from(filterMap.values()));
+}
+export async function buildMobileSiteRoutes() {
+    const examples = await findExamples();
+    const routes = examples.map((example) => `
+  {
+    path: '${getExampleRoutePath(example)}',
+    // @ts-ignore
+    component: () => import('${example}')
+  }`);
+    const source = `export default [\
+    ${routes.join(',')}
+]`;
+    await outputFileSyncOnChange(SITE_MOBILE_ROUTES, source);
+}
+export async function buildPcSiteRoutes() {
+    const [componentDocs, rootDocs, rootLocales] = await Promise.all([
+        findComponentDocs(),
+        findRootDocs(),
+        findRootLocales(),
+    ]);
+    const rootPagesRoutes = rootLocales.map((rootLocale) => `
+  {
+    path: '${getRootRoutePath(rootLocale)}',
+    // @ts-ignore
+    component: () => import('${getRootFilePath(rootLocale)}')
+  }\
+`);
+    const componentDocsRoutes = componentDocs.map((componentDoc) => `
+      {
+        path: '${getComponentDocRoutePath(componentDoc)}',
+        // @ts-ignore
+        component: () => import('${componentDoc}')
+      }`);
+    const rootDocsRoutes = rootDocs.map((rootDoc) => `
+      {
+        path: '${getRootDocRoutePath(rootDoc)}',
+        // @ts-ignore
+        component: () => import('${rootDoc}')
+      }`);
+    const layoutRoutes = `{
+    path: '/layout',
+    // @ts-ignore
+    component:()=> import('${slash(SITE_PC_DIR)}/Layout.vue'),
+    children: [
+      ${[...componentDocsRoutes, rootDocsRoutes].join(',')},
+    ]
+  }`;
+    const source = `export default [\
+  ${rootPagesRoutes.join(',')},
+  ${layoutRoutes}
+]`;
+    outputFileSyncOnChange(SITE_PC_ROUTES, source);
+}
+export async function buildSiteSource() {
+    return copy(SITE, SITE_DIR);
+}
+export async function buildSiteEntry() {
+    await getVarletConfig(true);
+    await Promise.all([buildMobileSiteRoutes(), buildPcSiteRoutes(), buildSiteSource()]);
+}

package/lib/{compiler → node/compiler}/compileStyle.d.ts

@@ -1,11 +1,11 @@
-export declare const EMPTY_SPACE_RE: RegExp;
-export declare const EMPTY_LINE_RE: RegExp;
-export declare const IMPORT_CSS_RE: RegExp;
-export declare const IMPORT_LESS_RE: RegExp;
-export declare const REQUIRE_CSS_RE: RegExp;
-export declare const REQUIRE_LESS_RE: RegExp;
-export declare const STYLE_IMPORT_RE: RegExp;
-export declare const clearEmptyLine: (s: string) => string;
-export declare function normalizeStyleDependency(styleImport: string, reg: RegExp): string;
-export declare function extractStyleDependencies(file: string, code: string, styleReg: RegExp): string;
-export declare function compileLess(file: string): Promise<void>;
+export declare const EMPTY_SPACE_RE: RegExp;
+export declare const EMPTY_LINE_RE: RegExp;
+export declare const IMPORT_CSS_RE: RegExp;
+export declare const IMPORT_LESS_RE: RegExp;
+export declare const REQUIRE_CSS_RE: RegExp;
+export declare const REQUIRE_LESS_RE: RegExp;
+export declare const STYLE_IMPORT_RE: RegExp;
+export declare const clearEmptyLine: (s: string) => string;
+export declare function normalizeStyleDependency(styleImport: string, reg: RegExp): string;
+export declare function extractStyleDependencies(file: string, code: string, styleReg: RegExp): string;
+export declare function compileLess(file: string): Promise<void>;

package/lib/node/compiler/compileStyle.js

@@ -0,0 +1,39 @@
+import fse from 'fs-extra';
+import less from 'less';
+import { replaceExt, smartAppendFileSync } from '../shared/fsUtils.js';
+import { parse, resolve } from 'path';
+const { render } = less;
+const { readFileSync, removeSync, writeFileSync } = fse;
+export const EMPTY_SPACE_RE = /[\s]+/g;
+export const EMPTY_LINE_RE = /[\n\r]*/g;
+export const IMPORT_CSS_RE = /(?<!['"`])import\s+['"](\.{1,2}\/.+\.css)['"]\s*;?(?!\s*['"`])/g;
+export const IMPORT_LESS_RE = /(?<!['"`])import\s+['"](\.{1,2}\/.+\.less)['"]\s*;?(?!\s*['"`])/g;
+export const REQUIRE_CSS_RE = /(?<!['"`])require\(\s*['"](\.{1,2}\/.+\.css)['"]\s*\);?(?!\s*['"`])/g;
+export const REQUIRE_LESS_RE = /(?<!['"`])require\(\s*['"](\.{1,2}\/.+\.less)['"]\s*\);?(?!\s*['"`])/g;
+export const STYLE_IMPORT_RE = /@import\s+['"](.+)['"]\s*;/g;
+export const clearEmptyLine = (s) => s.replace(EMPTY_LINE_RE, '').replace(EMPTY_SPACE_RE, ' ');
+export function normalizeStyleDependency(styleImport, reg) {
+    let relativePath = styleImport.replace(reg, '$1');
+    relativePath = relativePath.replace(/(\.less)|(\.css)/, '');
+    if (relativePath.startsWith('./')) {
+        return '.' + relativePath;
+    }
+    return '../' + relativePath;
+}
+export function extractStyleDependencies(file, code, styleReg) {
+    var _a;
+    const styleImports = (_a = code.match(styleReg)) !== null && _a !== void 0 ? _a : [];
+    const cssFile = resolve(parse(file).dir, './style/index.js');
+    const modules = process.env.BABEL_MODULE;
+    styleImports.forEach((styleImport) => {
+        const normalizedPath = normalizeStyleDependency(styleImport, styleReg);
+        smartAppendFileSync(cssFile, modules === 'commonjs' ? `require('${normalizedPath}.css')\n` : `import '${normalizedPath}.css'\n`);
+    });
+    return code.replace(styleReg, '');
+}
+export async function compileLess(file) {
+    const source = readFileSync(file, 'utf-8');
+    const { css } = await render(source, { filename: file });
+    removeSync(file);
+    writeFileSync(replaceExt(file, '.css'), clearEmptyLine(css), 'utf-8');
+}

package/lib/{compiler → node/compiler}/compileTemplateHighlight.d.ts

@@ -1,10 +1,10 @@
-export declare const replaceDot: (s: string) => string;
-export declare const replaceUnderline: (s: string) => string;
-export declare function parseTable(table: string): string[][];
-export declare function compileTable(md: string, titleRe: RegExp): string;
-export declare function compileTags(table: Record<string, any>, tags: Record<string, any>, componentName: string, varletConfig: Record<string, any>): void;
-export declare function compileAttributes(table: Record<string, any>, attributes: Record<string, any>, componentName: string, varletConfig: Record<string, any>): void;
-export declare function compileWebTypes(table: Record<string, any>, webTypes: Record<string, any>, componentName: string, varletConfig: Record<string, any>): void;
-export declare function compileMD(path: string, tags: Record<string, any>, attributes: Record<string, any>, webTypes: Record<string, any>, varletConfig: Record<string, any>): void;
-export declare function compileDir(path: string, tags: Record<string, any>, attributes: Record<string, any>, webTypes: Record<string, any>, varletConfig: Record<string, any>): void;
-export declare function compileTemplateHighlight(): Promise<void>;
+export declare const replaceDot: (s: string) => string;
+export declare const replaceUnderline: (s: string) => string;
+export declare function parseTable(table: string): string[][];
+export declare function compileTable(md: string, titleRe: RegExp): string;
+export declare function compileTags(table: Record<string, any>, tags: Record<string, any>, componentName: string, varletConfig: Record<string, any>): void;
+export declare function compileAttributes(table: Record<string, any>, attributes: Record<string, any>, componentName: string, varletConfig: Record<string, any>): void;
+export declare function compileWebTypes(table: Record<string, any>, webTypes: Record<string, any>, componentName: string, varletConfig: Record<string, any>): void;
+export declare function compileMD(path: string, tags: Record<string, any>, attributes: Record<string, any>, webTypes: Record<string, any>, varletConfig: Record<string, any>): void;
+export declare function compileDir(path: string, tags: Record<string, any>, attributes: Record<string, any>, webTypes: Record<string, any>, varletConfig: Record<string, any>): void;
+export declare function compileTemplateHighlight(): Promise<void>;

package/lib/node/compiler/compileTemplateHighlight.js

@@ -0,0 +1,133 @@
+import fse from 'fs-extra';
+import { SRC_DIR, HL_MD, HL_API_RE, HL_COMPONENT_NAME_RE, HL_TITLE_ATTRIBUTES_RE, HL_TITLE_EVENTS_RE, HL_TITLE_SLOTS_RE, HL_WEB_TYPES_JSON, HL_DIR, HL_TAGS_JSON, HL_ATTRIBUTES_JSON, CLI_PACKAGE_JSON, } from '../shared/constant.js';
+import { resolve } from 'path';
+import { isDir, isMD } from '../shared/fsUtils.js';
+import { get } from 'lodash-es';
+import { getVarletConfig } from '../config/varlet.config.js';
+const { ensureDir, readdirSync, readFileSync, readJSONSync, writeFile } = fse;
+const TABLE_HEAD_RE = /\s*\|.*\|\s*\n\s*\|.*---+\s*\|\s*\n+/;
+const TABLE_FOOT_RE = /(\|\s*$)|(\|\s*\n(?!\s*\|))/;
+export const replaceDot = (s) => s.replace(/`/g, '');
+export const replaceUnderline = (s) => s.replace(/_/g, '');
+export function parseTable(table) {
+    const rows = table.split('\n').filter(Boolean);
+    return rows.map((row) => {
+        const cols = row.split('|');
+        cols.shift();
+        cols.pop();
+        return cols.map((col) => col.replace(/__varlet_axis__/g, '|').trim());
+    });
+}
+export function compileTable(md, titleRe) {
+    const apiMatched = md.match(HL_API_RE);
+    if (!apiMatched) {
+        return '';
+    }
+    md = md.slice(apiMatched.index + apiMatched[0].length);
+    const titleMatched = md.match(titleRe);
+    if (!titleMatched) {
+        return '';
+    }
+    md = md.slice(titleMatched.index + titleMatched[0].length);
+    const tableHeadMatched = md.match(TABLE_HEAD_RE);
+    if (!tableHeadMatched) {
+        return '';
+    }
+    md = md.slice(tableHeadMatched.index + tableHeadMatched[0].length);
+    const tableFootMatched = md.match(TABLE_FOOT_RE);
+    if (!tableFootMatched) {
+        return '';
+    }
+    md = md.slice(0, tableFootMatched.index + tableFootMatched[0].length);
+    return md.replace(/\\\|/g, '__varlet_axis__').trim();
+}
+export function compileTags(table, tags, componentName, varletConfig) {
+    tags[`${get(varletConfig, 'namespace')}-${componentName}`] = {
+        attributes: table.attributesTable.map((row) => replaceDot(row[0])),
+    };
+}
+export function compileAttributes(table, attributes, componentName, varletConfig) {
+    table.attributesTable.forEach((row) => {
+        const attrNamespace = `${get(varletConfig, 'namespace')}-${componentName}/${replaceDot(row[0])}`;
+        attributes[attrNamespace] = {
+            type: replaceUnderline(row[2]),
+            description: `${row[1]} 默认值：${replaceDot(row[3])}`,
+        };
+    });
+}
+export function compileWebTypes(table, webTypes, componentName, varletConfig) {
+    const { attributesTable, eventsTable, slotsTable } = table;
+    const attributes = attributesTable.map((row) => ({
+        name: replaceDot(row[0]),
+        description: row[1],
+        default: replaceDot(row[3]),
+        value: {
+            type: replaceUnderline(row[2]),
+            kind: 'expression',
+        },
+    }));
+    const events = eventsTable.map((row) => ({
+        name: replaceDot(row[0]),
+        description: row[1],
+    }));
+    const slots = slotsTable.map((row) => ({
+        name: replaceDot(row[0]),
+        description: row[1],
+    }));
+    webTypes.contributions.html.tags.push({
+        name: `${get(varletConfig, 'namespace')}-${componentName}`,
+        attributes,
+        events,
+        slots,
+    });
+}
+export function compileMD(path, tags, attributes, webTypes, varletConfig) {
+    if (!path.endsWith(HL_MD)) {
+        return;
+    }
+    const md = readFileSync(path, 'utf-8');
+    const componentName = path.match(HL_COMPONENT_NAME_RE)[2];
+    const attributesTable = parseTable(compileTable(md, HL_TITLE_ATTRIBUTES_RE));
+    const eventsTable = parseTable(compileTable(md, HL_TITLE_EVENTS_RE));
+    const slotsTable = parseTable(compileTable(md, HL_TITLE_SLOTS_RE));
+    const table = {
+        attributesTable,
+        eventsTable,
+        slotsTable,
+    };
+    compileWebTypes(table, webTypes, componentName, varletConfig);
+    compileTags(table, tags, componentName, varletConfig);
+    compileAttributes(table, attributes, componentName, varletConfig);
+}
+export function compileDir(path, tags, attributes, webTypes, varletConfig) {
+    const dir = readdirSync(path);
+    dir.forEach((filename) => {
+        const filePath = resolve(path, filename);
+        isDir(filePath) && compileDir(filePath, tags, attributes, webTypes, varletConfig);
+        isMD(filePath) && compileMD(filePath, tags, attributes, webTypes, varletConfig);
+    });
+}
+export async function compileTemplateHighlight() {
+    await ensureDir(HL_DIR);
+    const varletConfig = await getVarletConfig();
+    const tags = {};
+    const attributes = {};
+    const webTypes = {
+        $schema: 'https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json',
+        framework: 'vue',
+        version: readJSONSync(CLI_PACKAGE_JSON).version,
+        name: get(varletConfig, 'title'),
+        contributions: {
+            html: {
+                tags: [],
+                'types-syntax': 'typescript',
+            },
+        },
+    };
+    compileDir(SRC_DIR, tags, attributes, webTypes, varletConfig);
+    await Promise.all([
+        writeFile(HL_WEB_TYPES_JSON, JSON.stringify(webTypes, null, 2)),
+        writeFile(HL_TAGS_JSON, JSON.stringify(tags, null, 2)),
+        writeFile(HL_ATTRIBUTES_JSON, JSON.stringify(attributes, null, 2)),
+    ]);
+}

package/lib/{compiler → node/compiler}/compileTypes.d.ts

@@ -1,2 +1,2 @@
-export declare function generateReference(moduleDir: string): void;
-export declare function compileTypes(): Promise<void>;
+export declare function generateReference(moduleDir: string): void;
+export declare function compileTypes(): Promise<void>;

package/lib/node/compiler/compileTypes.js

@@ -0,0 +1,45 @@
+import fse from 'fs-extra';
+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';
+const { ensureDir, writeFileSync, readdir, writeFile, readJSONSync } = fse;
+export function generateReference(moduleDir) {
+    writeFileSync(resolve(moduleDir, 'index.d.ts'), `\
+export * from '${relative(moduleDir, TYPES_DIR)}'
+`);
+}
+export async function compileTypes() {
+    const varletConfig = await getVarletConfig();
+    const namespace = get(varletConfig, 'namespace');
+    const { name } = readJSONSync(UI_PACKAGE_JSON);
+    await ensureDir(TYPES_DIR);
+    const dir = await readdir(TYPES_DIR);
+    const ignoreEntryDir = dir.filter((filename) => filename !== 'index.d.ts' && filename !== 'global.d.ts');
+    const exports = [];
+    const declares = [];
+    ignoreEntryDir.forEach((filename) => {
+        const componentName = filename.slice(0, filename.indexOf('.d.ts'));
+        exports.push(`export * from './${componentName}'`);
+        if (!componentName.startsWith(namespace)) {
+            declares.push(`${bigCamelize(namespace)}${bigCamelize(componentName)}: typeof import('${name}')['_${bigCamelize(componentName)}Component']`);
+        }
+    });
+    const globalDeclares = `\
+declare module 'vue' {
+  export interface GlobalComponents {
+    ${declares.join('\n    ')}
+  }
+}`;
+    const template = `\
+import type { App } from 'vue'
+
+export const install: (app: App) => void
+
+${exports.join('\n')}
+
+${globalDeclares}
+`;
+    await Promise.all([writeFile(resolve(TYPES_DIR, 'index.d.ts'), template)]);
+}

package/lib/{config → node/config}/varlet.config.d.ts

@@ -1,44 +1,45 @@
-interface VarletConfig {
-    /**
-     * @default `Varlet`
-     * UI library name.
-     */
-    name?: string;
-    /**
-     * @default `var`
-     * Component name prefix
-     */
-    namespace?: string;
-    /**
-     * @default `localhost`
-     * Local dev server host
-     */
-    host?: string;
-    /**
-     * @default `8080`
-     * Local dev server port
-     */
-    port?: number;
-    logo?: string;
-    defaultLanguage?: 'zh-CN' | 'en-US';
-    /**
-     * @default `false`
-     * Show mobile component on the right.
-     */
-    useMobile?: boolean;
-    lightTheme?: Record<string, string>;
-    darkTheme?: Record<string, string>;
-    highlight?: {
-        style: string;
-    };
-    analysis?: {
-        baidu: string;
-    };
-    pc?: Record<string, any>;
-    mobile?: Record<string, any>;
-    moduleCompatible?: Record<string, string>;
-}
-export declare function defineConfig(conf: VarletConfig): VarletConfig;
-export declare function mergeStrategy(value: any, srcValue: any, key: string): any[] | undefined;
-export declare function getVarletConfig(emit?: boolean): any;
-export {};
+export interface VarletConfig {
+    /**
+     * @default `Varlet`
+     * UI library name.
+     */
+    name?: string;
+    /**
+     * @default `var`
+     * Component name prefix
+     */
+    namespace?: string;
+    /**
+     * @default `localhost`
+     * Local dev server host
+     */
+    host?: string;
+    /**
+     * @default `8080`
+     * Local dev server port
+     */
+    port?: number;
+    title?: string;
+    logo?: string;
+    themeKey?: string;
+    defaultLanguage?: 'zh-CN' | 'en-US';
+    /**
+     * @default `false`
+     * Show mobile component on the right.
+     */
+    useMobile?: boolean;
+    lightTheme?: Record<string, string>;
+    darkTheme?: Record<string, string>;
+    highlight?: {
+        style: string;
+    };
+    analysis?: {
+        baidu: string;
+    };
+    pc?: Record<string, any>;
+    mobile?: Record<string, any>;
+    moduleCompatible?: Record<string, string>;
+}
+export declare function defineConfig(config: VarletConfig): VarletConfig;
+export declare function mergeStrategy(value: any, srcValue: any, key: string): any[] | undefined;
+export declare function getVarletConfig(emit?: boolean): Promise<Required<VarletConfig>>;