@maple-design/cli-vue 0.0.0-stage → 1.1.1

package/lib/node/compiler/compileScript.js

@@ -0,0 +1,221 @@
+import { dirname, extname, relative, resolve } from 'path';
+import babel from '@babel/core';
+import { pascalCase } from '@maple-design/shared-vue';
+import jsx from '@vue/babel-plugin-jsx';
+import esbuild from 'esbuild';
+import fse from 'fs-extra';
+import { getMapleConfig } from '../config/maple.config.js';
+import { ES_DIR } from '../shared/constant.js';
+import { getVersion, isDir, isJsx, isTsx, replaceExt } from '../shared/fsUtils.js';
+import { extractStyleDependencies, IMPORT_CSS_RE, IMPORT_LESS_RE, IMPORT_SCSS_RE } from './compileStyle.js';
+const { transformAsync } = babel;
+const { writeFileSync, readdirSync, readFileSync, removeSync, writeFile, pathExistsSync } = fse;
+// https://regexr.com/765a4
+export const IMPORT_FROM_DEPENDENCE_RE = /import\s+?[\w\s{},$*]+\s+from\s+?(".*?"|'.*?')/g;
+// https://regexr.com/767e6
+export const EXPORT_FROM_DEPENDENCE_RE = /export\s+?[\w\s{},$*]+\s+from\s+?(".*?"|'.*?')/g;
+// https://regexr.com/764ve
+export const IMPORT_DEPENDENCE_RE = /import\s+(".*?"|'.*?')/g;
+export const scriptExtNames = ['.vue', '.ts', '.tsx', '.mjs', '.js', '.jsx'];
+export const styleExtNames = ['.less', '.scss', '.css'];
+export const scriptIndexes = ['index.mjs', 'index.vue', 'index.ts', 'index.tsx', 'index.js', 'index.jsx'];
+export const styleIndexes = ['index.less', 'index.scss', 'index.css'];
+export const tryMatchExtname = (file, extname) => {
+    for (const ext of extname) {
+        const matched = `${file}${ext}`;
+        if (pathExistsSync(matched)) {
+            return ext;
+        }
+    }
+};
+export const resolveAlias = (dependence, file, alias = {}) => {
+    let matchedAliasKey = Object.keys(alias).find((key) => dependence === key);
+    if (!matchedAliasKey) {
+        // @/ -> yes
+        // @maple-design/ui-vue -> no
+        matchedAliasKey = Object.keys(alias).find((key) => dependence.startsWith(`${key}/`));
+    }
+    if (!matchedAliasKey) {
+        return dependence;
+    }
+    const matchedAliasValue = alias[matchedAliasKey];
+    const isRelative = matchedAliasValue.startsWith('.');
+    const replacedValue = isRelative ? relative(dirname(file), resolve(ES_DIR, matchedAliasValue)) : matchedAliasValue;
+    return dependence.replace(matchedAliasKey, replacedValue);
+};
+export const resolveDependence = (file, script, alias = {}) => {
+    const replacer = (source, dependence) => {
+        // remove quotes
+        dependence = dependence.slice(1, dependence.length - 1);
+        const done = (targetDependence) => source.replace(dependence, targetDependence);
+        const resolvedDependence = resolveAlias(dependence, file, alias);
+        const isNodeModule = !resolvedDependence.startsWith('.');
+        if (isNodeModule) {
+            // e.g. rattail
+            return done(resolvedDependence);
+        }
+        const ext = extname(resolvedDependence);
+        const scriptExtname = getScriptExtname();
+        if (ext) {
+            if (scriptExtNames.includes(ext)) {
+                // e.g. './a.vue' -> './a.mjs'
+                return done(dependence.replace(ext, scriptExtname));
+            }
+            if (styleExtNames.includes(ext)) {
+                // e.g. './a.css' -> './a.css' './a.less' -> './a.less'
+                return source;
+            }
+        }
+        const targetDependenceFile = resolve(dirname(file), resolvedDependence);
+        if (!ext) {
+            // e.g. ../button/props -> ../button/props.mjs
+            const matchedScript = tryMatchExtname(targetDependenceFile, scriptExtNames);
+            if (matchedScript) {
+                return done(`${resolvedDependence}${scriptExtname}`);
+            }
+            const matchedStyle = tryMatchExtname(targetDependenceFile, styleExtNames);
+            if (matchedStyle) {
+                return done(`${resolvedDependence}${matchedStyle}`);
+            }
+        }
+        if (!ext && isDir(targetDependenceFile)) {
+            // e.g. ../button
+            const files = readdirSync(targetDependenceFile);
+            const hasScriptIndex = files.some((file) => scriptIndexes.some((name) => file.endsWith(name)));
+            if (hasScriptIndex) {
+                // e.g. -> ../button/index.mjs
+                return done(`${resolvedDependence}/index${scriptExtname}`);
+            }
+            const hasStyleIndex = files.some((file) => styleIndexes.some((name) => file.endsWith(name)));
+            if (hasStyleIndex) {
+                // e.g. -> ../button/index.css
+                return done(`${resolvedDependence}/index.css`);
+            }
+        }
+        return '';
+    };
+    return script
+        .replace(IMPORT_FROM_DEPENDENCE_RE, replacer)
+        .replace(EXPORT_FROM_DEPENDENCE_RE, replacer)
+        .replace(IMPORT_DEPENDENCE_RE, replacer);
+};
+export async function compileScriptByBabel(script, file) {
+    const { code } = (await transformAsync(script, {
+        filename: file,
+        babelrc: false,
+        presets: ['@babel/preset-typescript'],
+        plugins: [
+            [
+                jsx,
+                {
+                    enableObjectSlots: false,
+                },
+            ],
+        ],
+    }));
+    return code;
+}
+export async function compileScriptByEsbuild(script) {
+    const mapleConfig = await getMapleConfig();
+    const { code } = await esbuild.transform(script, {
+        loader: 'ts',
+        target: mapleConfig?.esbuild?.target,
+        format: 'esm',
+    });
+    return code;
+}
+export async function compileScript(script, file) {
+    let code = isJsx(file) || isTsx(file) ? await compileScriptByBabel(script, file) : script;
+    code = await compileScriptByEsbuild(code);
+    const { alias } = await getMapleConfig();
+    if (code) {
+        code = resolveDependence(file, code, alias);
+        code = extractStyleDependencies(file, code, IMPORT_CSS_RE);
+        code = extractStyleDependencies(file, code, IMPORT_LESS_RE);
+        code = extractStyleDependencies(file, code, IMPORT_SCSS_RE);
+    }
+    removeSync(file);
+    writeFileSync(replaceExt(file, getScriptExtname()), code, 'utf8');
+}
+export async function compileScriptFile(file) {
+    const sources = readFileSync(file, 'utf-8');
+    await compileScript(sources, file);
+}
+export function getScriptExtname() {
+    return '.mjs';
+}
+export function generateEsEntryTemplate(options) {
+    const { publicDirs, scriptExtname = getScriptExtname(), root = './' } = options;
+    const imports = [];
+    const plugins = [];
+    const exports = [];
+    const cssImports = [];
+    const publicComponents = [];
+    publicDirs.forEach((dirname) => {
+        const publicComponent = pascalCase(dirname);
+        const module = `'${root}${dirname}/index${scriptExtname}'`;
+        publicComponents.push(publicComponent);
+        imports.push(`import ${publicComponent} from ${module}`);
+        exports.push(`export * from ${module}`);
+        plugins.push(`${publicComponent}.install && app.use(${publicComponent})`);
+        cssImports.push(`import '${root}${dirname}/style/index${scriptExtname}'`);
+    });
+    const install = `
+function install(app) {
+  ${plugins.join('\n  ')}
+}
+`;
+    const version = `const version = '${getVersion()}'`;
+    const indexTemplate = `\
+${imports.join('\n')}\n
+${exports.join('\n')}\n
+${version}
+${install}
+export {
+  version,
+  install,
+  ${publicComponents.join(',\n  ')}
+}
+
+export default {
+  version,
+  install,
+  ${publicComponents.join(',\n  ')}
+}
+`;
+    const styleTemplate = `\
+import '${root}style/theme/css-variables.css'
+${cssImports.join('\n')}
+`;
+    const bundleTemplate = `\
+${imports.join('\n')}\n
+${exports.join('\n')}\n
+${cssImports.join('\n')}\n
+${version}
+${install}
+export {
+  version,
+  install,
+  ${publicComponents.join(',\n  ')}
+}
+
+export default {
+  version,
+  install,
+  ${publicComponents.join(',\n  ')}
+}
+`;
+    return {
+        indexTemplate,
+        styleTemplate,
+        bundleTemplate,
+    };
+}
+export async function compileESEntry(dir, publicDirs) {
+    const { indexTemplate, bundleTemplate, styleTemplate } = generateEsEntryTemplate({ publicDirs });
+    await Promise.all([
+        writeFile(resolve(dir, 'index.mjs'), indexTemplate, 'utf-8'),
+        writeFile(resolve(dir, 'index.bundle.mjs'), bundleTemplate, 'utf-8'),
+        writeFile(resolve(dir, 'style.mjs'), styleTemplate, 'utf-8'),
+    ]);
+}

package/lib/node/compiler/compileSiteEntry.d.ts

@@ -0,0 +1,19 @@
+export declare function getExampleRoutePath(examplePath: string): string;
+export declare function getComponentDocRoutePath(componentDocsPath: string): string;
+export declare function getRootDocRoutePath(rootDocsPath: string): string;
+export declare function getPageRoutePath(rootLocalePath: string): string;
+export declare function getPageFilePath(rootLocalePath: string): string;
+export declare function isDraftExample(example: string): boolean;
+export declare function hasDraftExample(examples: string[], example: string): boolean;
+export declare function isDraftDoc(doc: string): boolean;
+export declare function hasDraftDoc(docs: string[], doc: string): boolean;
+export declare function findExamples(draftMode: boolean): Promise<string[]>;
+export declare function filterDraftDocs(docs: string[], draftMode: boolean): string[];
+export declare function findComponentDocs(draftMode: boolean): Promise<string[]>;
+export declare function findRootDocs(draftMode: boolean): Promise<string[]>;
+export declare function findPageLocales(): Promise<string[]>;
+export declare function selectMobileDocumentation(documents: string[], allowedNames: string[]): string[];
+export declare function buildMobileSiteRoutes(draftMode: boolean): Promise<void>;
+export declare function buildPcSiteRoutes(draftMode: boolean): Promise<void>;
+export declare function buildSiteSource(): Promise<void>;
+export declare function buildSiteEntry(draftMode: boolean): Promise<void>;

package/lib/node/compiler/compileSiteEntry.js

@@ -0,0 +1,164 @@
+import { slash } from '@maple-design/shared-vue';
+import fse from 'fs-extra';
+import { getMapleConfig } from '../config/maple.config.js';
+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 { documentationRedirect, joinSiteRoutes } from './siteRoutes.js';
+const { copy, readFileSync } = fse;
+const ROOT_DOCS_RE = /\/docs\/([-\w]+)\.([-\w]+)(?:.draft)?\.md/;
+const PAGE_LOCALE_RE = /\/pages\/([-\w]+)\/locale\/([-\w]+)\.ts/;
+const EXAMPLE_INDEX_RE = /\/([-\w]+)\/example\/index(?:.draft)?\.vue/;
+const COMPONENT_DOCS_RE = /\/([-\w]+)\/docs\/([-\w]+)(?:.draft)?\.md/;
+export function getExampleRoutePath(examplePath) {
+    return '/' + examplePath.match(EXAMPLE_INDEX_RE)?.[1];
+}
+export function getComponentDocRoutePath(componentDocsPath) {
+    const [, routePath, language] = componentDocsPath.match(COMPONENT_DOCS_RE) ?? [];
+    return `/${language}/${routePath}`;
+}
+export function getRootDocRoutePath(rootDocsPath) {
+    const [, routePath, language] = rootDocsPath.match(ROOT_DOCS_RE) ?? [];
+    return `/${language}/${routePath}`;
+}
+export function getPageRoutePath(rootLocalePath) {
+    const [, routePath, language] = rootLocalePath.match(PAGE_LOCALE_RE) ?? [];
+    return `/${language}/${routePath}`;
+}
+export function getPageFilePath(rootLocalePath) {
+    return rootLocalePath.replace(/locale\/.+/, 'index.vue');
+}
+export function isDraftExample(example) {
+    return example.endsWith('index.draft.vue');
+}
+export function hasDraftExample(examples, example) {
+    return examples.includes(example.replace('index.vue', 'index.draft.vue'));
+}
+export function isDraftDoc(doc) {
+    return doc.endsWith('.draft.md');
+}
+export function hasDraftDoc(docs, doc) {
+    return docs.includes(doc.replace('.md', '.draft.md'));
+}
+export async function findExamples(draftMode) {
+    const [examples, draftExamples] = await Promise.all([
+        glob(`${SRC_DIR}/**/${EXAMPLE_DIR_NAME}/index.vue`),
+        glob(`${SRC_DIR}/**/${EXAMPLE_DIR_NAME}/index.draft.vue`),
+    ]);
+    const mergedExamples = [...examples, ...draftExamples];
+    return mergedExamples.filter((example) => draftMode ? isDraftExample(example) || !hasDraftExample(mergedExamples, example) : !isDraftExample(example));
+}
+export function filterDraftDocs(docs, draftMode) {
+    return docs.filter((doc) => (draftMode ? isDraftDoc(doc) || !hasDraftDoc(docs, doc) : !isDraftDoc(doc)));
+}
+export async function findComponentDocs(draftMode) {
+    const componentDocs = await glob(`${SRC_DIR}/**/${DOCS_DIR_NAME}/*.md`);
+    return filterDraftDocs(componentDocs, draftMode);
+}
+export async function findRootDocs(draftMode) {
+    const rootDocs = await glob(`${ROOT_DOCS_DIR}/*.md`);
+    return filterDraftDocs(rootDocs, draftMode);
+}
+export async function findPageLocales() {
+    const { defaultLanguage } = await getMapleConfig();
+    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) => {
+        const [, routePath, language] = locale.match(PAGE_LOCALE_RE) ?? [];
+        filterMap.set(routePath + language, slash(`${SITE_PC_DIR}/pages/${routePath}/locale/${language}.ts`));
+    });
+    userLocales.forEach((locale) => {
+        const [, routePath, language] = locale.match(PAGE_LOCALE_RE) ?? [];
+        filterMap.set(routePath + language, locale);
+    });
+    return Promise.resolve(Array.from(filterMap.values()));
+}
+export function selectMobileDocumentation(documents, allowedNames) {
+    const allowed = new Set(allowedNames);
+    return documents.filter((doc) => allowed.has(getRootDocRoutePath(doc).split('/').at(-1)));
+}
+export async function buildMobileSiteRoutes(draftMode) {
+    const examples = await findExamples(draftMode);
+    const routes = examples.map((example) => `
+  {
+    path: '${getExampleRoutePath(example)}',
+    // @ts-ignore
+    component: () => import('${example}')
+  }`);
+    const { mobile } = await getMapleConfig();
+    const mobileDocs = new Set(mobile?.docs ?? []);
+    if (mobileDocs.size) {
+        const rootDocs = await findRootDocs(draftMode);
+        for (const doc of selectMobileDocumentation(rootDocs, [...mobileDocs])) {
+            const route = getRootDocRoutePath(doc);
+            routes.push(`{ path: '${route}', component: () => import('${doc}') }`);
+        }
+    }
+    const source = `export default [\
+    ${routes.join(',')}
+]`;
+    await outputFileSyncOnChange(SITE_MOBILE_ROUTES, source);
+}
+export async function buildPcSiteRoutes(draftMode) {
+    const [componentDocs, rootDocs, rootLocales] = await Promise.all([
+        findComponentDocs(draftMode),
+        findRootDocs(draftMode),
+        findPageLocales(),
+    ]);
+    const pageRoutes = rootLocales.map((locale) => `
+  {
+    path: '${getPageRoutePath(locale)}',
+    // @ts-ignore
+    component: () => import('${getPageFilePath(locale)}')
+  }\
+`);
+    const componentDocsRoutes = componentDocs.map((componentDoc) => {
+        const redirect = documentationRedirect(readFileSync(componentDoc, 'utf8'));
+        if (redirect) {
+            return `{ path: '${getComponentDocRoutePath(componentDoc)}', redirect: '${redirect}' }`;
+        }
+        return `
+      {
+        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: [
+      ${joinSiteRoutes(componentDocsRoutes, rootDocsRoutes)}
+    ]
+  }`;
+    const source = `export default [\
+  ${joinSiteRoutes(pageRoutes, [layoutRoutes])}
+]`;
+    outputFileSyncOnChange(SITE_PC_ROUTES, source);
+}
+export function buildSiteSource() {
+    return copy(SITE, SITE_DIR);
+}
+export async function buildSiteEntry(draftMode) {
+    await getMapleConfig(true);
+    await Promise.all([buildMobileSiteRoutes(draftMode), buildPcSiteRoutes(draftMode), buildSiteSource()]);
+}

package/lib/node/compiler/compileStyle.d.ts

@@ -0,0 +1,14 @@
+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 IMPORT_SCSS_RE: RegExp;
+export declare const STYLE_EXTNAME_RE: RegExp;
+export declare const STYLE_IMPORT_RE: RegExp;
+export declare const compressCss: (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 function compileScss(file: string): void;
+export declare function clearLessFiles(dir: string): void;
+export declare function clearScssFiles(dir: string): void;

package/lib/node/compiler/compileStyle.js

@@ -0,0 +1,55 @@
+import { parse, resolve } from 'path';
+import fse from 'fs-extra';
+import glob from 'glob';
+import less from 'less';
+import * as sass from 'sass';
+import { CWD } from '../shared/constant.js';
+import { replaceExt, smartAppendFileSync } from '../shared/fsUtils.js';
+import { getScriptExtname } from './compileScript.js';
+const { render: renderLess } = less;
+const { readFileSync, writeFileSync, unlinkSync } = 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 IMPORT_SCSS_RE = /(?<!['"`])import\s+['"](\.{1,2}\/.+\.scss)['"]\s*;?(?!\s*['"`])/g;
+export const STYLE_EXTNAME_RE = /(\.less)|(\.scss)|(\.css)/;
+export const STYLE_IMPORT_RE = /@import\s+['"](.+)['"]\s*;/g;
+export const compressCss = (s) => s.replace(EMPTY_LINE_RE, '').replace(EMPTY_SPACE_RE, ' ');
+export function normalizeStyleDependency(styleImport, reg) {
+    let relativePath = styleImport.replace(reg, '$1');
+    relativePath = relativePath.replace(STYLE_EXTNAME_RE, '');
+    if (relativePath.startsWith('./')) {
+        return '.' + relativePath;
+    }
+    return '../' + relativePath;
+}
+export function extractStyleDependencies(file, code, styleReg) {
+    const styleImports = code.match(styleReg) ?? [];
+    const cssFile = resolve(parse(file).dir, `./style/index${getScriptExtname()}`);
+    styleImports.forEach((styleImport) => {
+        const normalizedPath = normalizeStyleDependency(styleImport, styleReg);
+        smartAppendFileSync(cssFile, `import '${normalizedPath}.css'\n`);
+    });
+    return code.replace(styleReg, '');
+}
+export async function compileLess(file) {
+    const source = readFileSync(file, 'utf-8');
+    const { css } = await renderLess(source, {
+        filename: file,
+        paths: [resolve(CWD, 'node_modules')],
+    });
+    writeFileSync(replaceExt(file, '.css'), compressCss(css), 'utf-8');
+}
+export function compileScss(file) {
+    const { css } = sass.compile(file, {
+        loadPaths: [resolve(CWD, 'node_modules')],
+    });
+    writeFileSync(replaceExt(file, '.css'), compressCss(css), 'utf-8');
+}
+export function clearLessFiles(dir) {
+    glob.sync(`${dir}/**/*.less`).forEach(unlinkSync);
+}
+export function clearScssFiles(dir) {
+    glob.sync(`${dir}/**/*.scss`).forEach(unlinkSync);
+}

package/lib/node/compiler/compileStyleVars.d.ts

@@ -0,0 +1,3 @@
+export declare function compileMD(path: string, keys: Set<string>): void;
+export declare function compileDir(path: string, keys: Set<string>, defaultLanguage: 'zh-CN' | 'en-US'): void;
+export declare function compileStyleVars(): Promise<void>;

package/lib/node/compiler/compileStyleVars.js

@@ -0,0 +1,46 @@
+import { resolve } from 'path';
+import fse from 'fs-extra';
+import { getMapleConfig } from '../config/maple.config.js';
+import { SRC_DIR, TYPES_DIR } from '../shared/constant.js';
+import { isDir, isMD } from '../shared/fsUtils.js';
+const { ensureDirSync, readdirSync, readFileSync, writeFileSync } = fse;
+export function compileMD(path, keys) {
+    const content = readFileSync(path, 'utf-8');
+    const result = content.match(/`--[\w-]+`/g) ?? [];
+    result.forEach((key) => {
+        keys.add(key.replace(/`/g, ''));
+    });
+}
+export function compileDir(path, keys, defaultLanguage) {
+    const dir = readdirSync(path);
+    dir.forEach((filename) => {
+        const filePath = resolve(path, filename);
+        isDir(filePath) && compileDir(filePath, keys, defaultLanguage);
+        if (isMD(filePath) && filename.includes(defaultLanguage)) {
+            compileMD(filePath, keys);
+        }
+    });
+}
+export async function compileStyleVars() {
+    ensureDirSync(TYPES_DIR);
+    const { defaultLanguage } = await getMapleConfig();
+    const keys = new Set();
+    compileDir(SRC_DIR, keys, defaultLanguage);
+    const assistanceType = `type RemoveTwoDashes<T extends string> = T extends \`--$\{infer Rest}\` ? Rest : T
+
+type CamelCase<S extends string> =
+  S extends \`$\{infer P1}-$\{infer P2}\`
+    ? \`$\{P1}$\{CamelCase<Capitalize<P2>>}\`
+    : S
+
+type FormatStyleVars<T> = {
+  [K in keyof T as  CamelCase<RemoveTwoDashes<K & string>>]?: T[K];
+} & T`;
+    let baseStyleVars = [...keys].reduce((template, key) => {
+        template += `  '${key}'?: string\n`;
+        return template;
+    }, '\n\ninterface BaseStyleVars {\n');
+    baseStyleVars += '  [key: PropertyKey]: string\n}\n';
+    writeFileSync(resolve(TYPES_DIR, 'styleVars.d.ts'), `${assistanceType}${baseStyleVars}
+export interface StyleVars extends FormatStyleVars<BaseStyleVars> {}`);
+}

package/lib/node/compiler/compileTemplateHighlight.d.ts

@@ -0,0 +1,18 @@
+import { type MapleConfig } from '../config/maple.config.js';
+export interface TemplateHighlightCompilerOptions {
+    md: string;
+    json: string;
+    titleAttributes: RegExp;
+    titleEvents: RegExp;
+    titleSlots: RegExp;
+}
+export declare const replaceDot: (s: string) => string;
+export declare const replaceVersion: (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 compileWebTypes(table: Record<string, any>, webTypes: Record<string, any>, componentName: string, mapleConfig: Required<MapleConfig>): void;
+export declare function compileMD(path: string, webTypes: Record<string, any>, mapleConfig: Required<MapleConfig>, options: TemplateHighlightCompilerOptions): void;
+export declare function compileDir(path: string, webTypes: Record<string, any>, mapleConfig: Required<MapleConfig>, options: TemplateHighlightCompilerOptions): void;
+export declare function compileLanguageMD(mapleConfig: Required<MapleConfig>, options: TemplateHighlightCompilerOptions): void;
+export declare function compileTemplateHighlight(): Promise<void>;

package/lib/node/compiler/compileTemplateHighlight.js

@@ -0,0 +1,133 @@
+import { resolve } from 'path';
+import fse from 'fs-extra';
+import { getMapleConfig } from '../config/maple.config.js';
+import { HL_API_RE, HL_COMPONENT_NAME_RE, HL_DIR, 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, SRC_DIR, } from '../shared/constant.js';
+import { getCliVersion, isDir, isMD } from '../shared/fsUtils.js';
+const { ensureDir, readdirSync, readFileSync, writeFileSync } = fse;
+export const replaceDot = (s) => s.replace(/`/g, '');
+export const replaceVersion = (s) => s.replace(/\*\*\*.+\*\*\*/g, '').trim();
+export const replaceUnderline = (s) => s.replace(/_/g, '');
+export function parseTable(table) {
+    const rows = table
+        .split(/\r?\n/)
+        .map((row) => row.trim())
+        .filter((row) => row.startsWith('|') && row.endsWith('|'));
+    return rows.map((row) => {
+        const cols = row.replace(/\\\|/g, '__maple_axis__').split('|');
+        cols.shift();
+        cols.pop();
+        return cols.map((col) => col.replace(/__maple_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);
+    // A header-only Events table is empty. Never scan into the following Slots
+    // section or treat its heading as a row (Grid's English docs exposed this).
+    const section = md.split(/^\s*#{1,3}\s+/m, 1)[0];
+    const lines = section.split(/\r?\n/).map((line) => line.trim());
+    const header = lines.findIndex((line, index) => line.startsWith('|') && /^\|(?:\s*:?-+:?\s*\|)+$/.test(lines[index + 1] ?? ''));
+    if (header < 0) {
+        return '';
+    }
+    const rows = [];
+    for (const line of lines.slice(header + 2)) {
+        if (!line.startsWith('|') || !line.endsWith('|')) {
+            break;
+        }
+        rows.push(line);
+    }
+    return rows.join('\n');
+}
+export function compileWebTypes(table, webTypes, componentName, mapleConfig) {
+    const { attributesTable, eventsTable, slotsTable } = table;
+    const attributes = attributesTable.map((row) => ({
+        name: replaceVersion(replaceDot(row[0])),
+        description: row[1],
+        default: replaceDot(row[3] ?? ''),
+        value: {
+            type: replaceUnderline(row[2]),
+            kind: 'expression',
+        },
+    }));
+    const events = eventsTable.map((row) => ({
+        name: replaceVersion(replaceDot(row[0])),
+        description: row[1],
+    }));
+    const slots = slotsTable.map((row) => ({
+        name: replaceVersion(replaceDot(row[0])),
+        description: row[1],
+    }));
+    webTypes.contributions.html.tags.push({
+        name: `${mapleConfig?.namespace}-${componentName}`,
+        attributes,
+        events,
+        slots,
+    });
+}
+export function compileMD(path, webTypes, mapleConfig, options) {
+    if (!path.endsWith(options.md)) {
+        return;
+    }
+    const md = readFileSync(path, 'utf-8');
+    const componentName = path.match(HL_COMPONENT_NAME_RE)[2];
+    const attributesTable = parseTable(compileTable(md, options.titleAttributes));
+    const eventsTable = parseTable(compileTable(md, options.titleEvents));
+    const slotsTable = parseTable(compileTable(md, options.titleSlots));
+    const table = {
+        attributesTable,
+        eventsTable,
+        slotsTable,
+    };
+    compileWebTypes(table, webTypes, componentName, mapleConfig);
+}
+export function compileDir(path, webTypes, mapleConfig, options) {
+    const dir = readdirSync(path);
+    dir.forEach((filename) => {
+        const filePath = resolve(path, filename);
+        isDir(filePath) && compileDir(filePath, webTypes, mapleConfig, options);
+        isMD(filePath) && compileMD(filePath, webTypes, mapleConfig, options);
+    });
+}
+export function compileLanguageMD(mapleConfig, options) {
+    const webTypes = {
+        $schema: 'https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json',
+        framework: 'vue',
+        version: getCliVersion(),
+        name: mapleConfig?.title,
+        contributions: {
+            html: {
+                tags: [],
+                'types-syntax': 'typescript',
+            },
+        },
+    };
+    compileDir(SRC_DIR, webTypes, mapleConfig, options);
+    writeFileSync(options.json, JSON.stringify(webTypes, null, 2));
+}
+export async function compileTemplateHighlight() {
+    await ensureDir(HL_DIR);
+    const mapleConfig = await getMapleConfig();
+    compileLanguageMD(mapleConfig, {
+        md: HL_EN_MD,
+        json: HL_EN_WEB_TYPES_JSON,
+        titleAttributes: HL_EN_TITLE_ATTRIBUTES_RE,
+        titleEvents: HL_EN_TITLE_EVENTS_RE,
+        titleSlots: HL_EN_TITLE_SLOTS_RE,
+    });
+    compileLanguageMD(mapleConfig, {
+        md: HL_ZH_MD,
+        json: HL_ZH_WEB_TYPES_JSON,
+        titleAttributes: HL_ZH_TITLE_ATTRIBUTES_RE,
+        titleEvents: HL_ZH_TITLE_EVENTS_RE,
+        titleSlots: HL_ZH_TITLE_SLOTS_RE,
+    });
+}