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

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

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

package/lib/node/compiler/compileTypes.js

@@ -0,0 +1,58 @@
+import { execFile } from 'node:child_process';
+import { relative, resolve } from 'node:path';
+import { promisify } from 'node:util';
+import fse from 'fs-extra';
+import { getMapleConfig } from '../config/maple.config.js';
+import { CWD, SRC_DIR } from '../shared/constant.js';
+import { getPublicDirs } from '../shared/fsUtils.js';
+import { compileStyleVars } from './compileStyleVars.js';
+import { exportedComponentTokens } from './generateLibraryEntry.js';
+const declarationsDir = resolve(CWD, 'types-generated');
+export function generateReference(moduleDir) {
+    const target = relative(moduleDir, declarationsDir).replaceAll('\\', '/');
+    fse.writeFileSync(resolve(moduleDir, 'index.d.ts'), `export * from '${target}'\nexport { default } from '${target}'\n`);
+}
+// Published declarations derive from the runtime source, not the legacy hand-written Props.
+export async function compileTypes() {
+    compileStyleVars();
+    // This directory contains generated artifacts only; stale renamed components must not survive builds.
+    await fse.emptyDir(declarationsDir);
+    await promisify(execFile)('vue-tsc', ['-p', 'tsconfig.declaration.json'], { cwd: CWD, maxBuffer: 16 * 1024 * 1024 });
+    async function copyDeclarations(dir) {
+        for (const entry of await fse.readdir(dir, { withFileTypes: true })) {
+            if (['__tests__', '__demos__', 'example'].includes(entry.name)) {
+                continue;
+            }
+            const file = resolve(dir, entry.name);
+            if (entry.isDirectory()) {
+                await copyDeclarations(file);
+            }
+            else if (entry.name.endsWith('.d.ts')) {
+                const target = resolve(declarationsDir, relative(SRC_DIR, file));
+                await fse.ensureDir(resolve(target, '..'));
+                await fse.copyFile(file, target);
+            }
+        }
+    }
+    await copyDeclarations(SRC_DIR);
+    const { namespace = 'mp', directives = [] } = await getMapleConfig();
+    const lines = [];
+    const nonComponents = new Set(['_ContextComponent', '_LocaleComponent', '_ThemesComponent', '_LoadingBarComponent']);
+    for (const dir of await getPublicDirs()) {
+        for (const token of await exportedComponentTokens(dir)) {
+            // Loading exports both a Vue component and a directive; Hover exports a child component.
+            if (!token.endsWith('Component') ||
+                nonComponents.has(token) ||
+                (directives.includes(dir) &&
+                    dir !== 'loading' &&
+                    token.toLowerCase() === `_${dir.replaceAll('-', '')}component`)) {
+                continue;
+            }
+            const name = namespace[0].toUpperCase() + namespace.slice(1) + token.slice(1, -'Component'.length);
+            lines.push(`    ${name}: typeof import('./index')['${token}']`);
+        }
+    }
+    await fse.writeFile(resolve(declarationsDir, 'global.d.ts'), `import 'vue'\ndeclare module 'vue' {\n  export interface GlobalComponents {\n${lines.join('\n')}\n  }\n}\n`);
+    const entry = resolve(declarationsDir, 'index.d.ts');
+    await fse.appendFile(entry, "\nimport './global'\n");
+}

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

@@ -0,0 +1,3 @@
+export declare function publicContractExports(dirs: string[]): string[];
+export declare function exportedComponentTokens(dir: string): Promise<string[]>;
+export declare function generateLibraryEntry(): Promise<void>;

package/lib/node/compiler/generateLibraryEntry.js

@@ -0,0 +1,152 @@
+import { existsSync } from 'node:fs';
+import { readFile, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { pascalCase } from '@maple-design/shared-vue';
+import ts from 'typescript';
+import { SRC_DIR } from '../shared/constant.js';
+import { getPublicDirs, getVersion } from '../shared/fsUtils.js';
+// Follow exports rather than scraping type names: re-exports and child Props count too.
+export function publicContractExports(dirs) {
+    const entries = dirs
+        .map((dir) => INDEX_FILES.map((file) => resolve(SRC_DIR, dir, file)).find(existsSync))
+        .filter((file) => Boolean(file));
+    const optionalExports = [
+        { path: 'loading', runtime: ['vLoading'], types: ['LoadingDirectiveOptions'] },
+        { path: 'image', runtime: ['imagePreview'], types: [] },
+        { path: 'upload', runtime: ['useUploader'], types: [] },
+        { path: 'hover', runtime: ['useHoverOverlay'], types: [] },
+        { path: 'form', runtime: ['useFormItem', 'useFormErrorDescription'], types: [] },
+        { path: 'field-decorator', runtime: ['fieldLoadingModes'], types: [] },
+        { path: 'utils/popup-container', runtime: [], types: ['PopupContainer'] },
+    ].map((item) => ({
+        ...item,
+        file: [...INDEX_FILES.map((file) => resolve(SRC_DIR, item.path, file)), resolve(SRC_DIR, `${item.path}.ts`)].find(existsSync),
+    }));
+    const program = ts.createProgram([...entries, ...optionalExports.flatMap((item) => (item.file ? [item.file] : []))], {
+        moduleResolution: ts.ModuleResolutionKind.NodeJs,
+        jsx: ts.JsxEmit.Preserve,
+        skipLibCheck: true,
+    });
+    const checker = program.getTypeChecker();
+    const used = new Set(['LoadingDirectiveOptions', ...dirs.map(pascalCase)]);
+    const contracts = entries.flatMap((file) => {
+        const source = program.getSourceFile(file);
+        const symbol = source && checker.getSymbolAtLocation(source);
+        if (!symbol) {
+            return [];
+        }
+        const runtime = [], types = [];
+        for (const exported of checker.getExportsOfModule(symbol)) {
+            const name = exported.name;
+            if (used.has(name)) {
+                continue;
+            }
+            const original = exported.flags & ts.SymbolFlags.Alias ? checker.getAliasedSymbol(exported) : exported;
+            if (/^[a-z].*Props$/.test(name)) {
+                runtime.push(name);
+                used.add(name);
+            }
+            else if (original.flags & ts.SymbolFlags.Type && /^[A-Z]/.test(name) && !['Props', 'Instance'].includes(name)) {
+                types.push(name);
+                used.add(name);
+            }
+        }
+        const dir = dirs.find((dir) => INDEX_FILES.some((index) => resolve(SRC_DIR, dir, index) === file));
+        return [
+            runtime.length ? `export { ${runtime.join(', ')} } from './${dir}'` : '',
+            types.length ? `export type { ${types.join(', ')} } from './${dir}'` : '',
+        ].filter(Boolean);
+    });
+    for (const item of optionalExports) {
+        const source = item.file && program.getSourceFile(item.file);
+        const symbol = source && checker.getSymbolAtLocation(source);
+        if (!symbol) {
+            continue;
+        }
+        const available = new Set(checker.getExportsOfModule(symbol).map((value) => value.name));
+        const runtime = item.runtime.filter((name) => available.has(name));
+        const types = item.types.filter((name) => available.has(name));
+        if (runtime.length) {
+            contracts.push(`export { ${runtime.join(', ')} } from './${item.path}'`);
+        }
+        if (types.length) {
+            contracts.push(`export type { ${types.join(', ')} } from './${item.path}'`);
+        }
+    }
+    return contracts;
+}
+const INDEX_FILES = ['index.ts', 'index.tsx', 'index.js'];
+export async function exportedComponentTokens(dir) {
+    for (const file of INDEX_FILES) {
+        const path = resolve(SRC_DIR, dir, file);
+        if (!existsSync(path)) {
+            continue;
+        }
+        const source = await readFile(path, 'utf8');
+        const dirName = pascalCase(dir);
+        const aliases = [...source.matchAll(/export const (_[A-Za-z0-9]+Component)/g)].map((match) => match[1]);
+        const named = [...source.matchAll(/export \{([^}]+)\}/g)]
+            .flatMap((match) => match[1].split(','))
+            .map((part) => {
+            const sides = part.trim().split(/\s+as\s+/);
+            return (sides[1] ?? sides[0]).trim();
+        })
+            .filter((name) => /^[A-Z]/.test(name) && name !== dirName && !name.endsWith('Props'));
+        const tokens = [...new Set([...named, ...aliases])];
+        if (tokens.length) {
+            return tokens;
+        }
+    }
+    return [`_${pascalCase(dir)}Component`];
+}
+export async function generateLibraryEntry() {
+    const publicDirs = (await getPublicDirs()).filter((dir) => dir !== 'index');
+    const publicComponents = publicDirs.map((dir) => pascalCase(dir));
+    const imports = publicDirs.map((dir, index) => `import ${publicComponents[index]} from './${dir}'`);
+    const version = getVersion();
+    const tokenExports = await Promise.all(publicDirs.map(async (dir) => {
+        const tokens = await exportedComponentTokens(dir);
+        return `export { ${tokens.join(', ')} } from './${dir}'`;
+    }));
+    const mapleVue = `\
+import type { App } from 'vue'
+${imports.join('\n')}
+
+export const version = '${version}'
+
+function install(app: App) {
+  const plugins = [${publicComponents.join(', ')}]
+  for (const plugin of plugins) {
+    if (plugin && typeof (plugin as { install?: unknown }).install === 'function') {
+      app.use(plugin as unknown as { install: (app: App) => void })
+    }
+  }
+}
+
+export {
+  install,
+  ${publicComponents.join(',\n  ')}
+}
+
+export interface MapleLibrary {
+  version: string
+  install: typeof install
+  ${publicComponents.map((name) => `${name}: typeof ${name}`).join('\n  ')}
+}
+const library: MapleLibrary = {
+  version,
+  install,
+  // Preserve ESM live bindings: a component entry may be evaluated before the
+  // aggregate entry through the development resolver's dependency graph.
+  ${publicComponents.map((name) => `get ${name}() { return ${name} }`).join(',\n  ')}
+}
+export default library
+`;
+    const index = `\
+export { default, version, install, ${publicComponents.join(', ')} } from './maple-vue'
+${tokenExports.join('\n')}
+${publicContractExports(publicDirs).join('\n')}
+`;
+    await writeFile(resolve(SRC_DIR, 'maple-vue.ts'), mapleVue);
+    await writeFile(resolve(SRC_DIR, 'index.ts'), index);
+}

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

@@ -0,0 +1,4 @@
+/** Join route groups without emitting array holes when a group is empty. */
+export declare function joinSiteRoutes(...groups: string[][]): string;
+/** Documentation redirects stay within the same site and locale. */
+export declare function documentationRedirect(markdown: string): string | undefined;

package/lib/node/compiler/siteRoutes.js

@@ -0,0 +1,9 @@
+/** Join route groups without emitting array holes when a group is empty. */
+export function joinSiteRoutes(...groups) {
+    return groups.flat().join(',\n');
+}
+/** Documentation redirects stay within the same site and locale. */
+export function documentationRedirect(markdown) {
+    const frontmatter = /^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/.exec(markdown)?.[1];
+    return frontmatter?.match(/^redirectTo:\s*(\/(?:zh-CN|en-US)\/[\w-]+)\s*$/m)?.[1];
+}

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

@@ -0,0 +1,215 @@
+import { type CopyOptions } from '@maple-design/vite-plugins-vue';
+import { Plugin, ProxyOptions } from 'vite';
+export interface MapleConfigIcons {
+    /** SVG source directory owned by the product icon package. */
+    entry?: string;
+    /** Generated Vue source directory. */
+    output?: string;
+}
+export interface MapleConfigEsbuild {
+    target?: string | string[];
+}
+export interface MapleConfigHtmlInjectPoint {
+    position?: 'start' | 'end' | 'script-start';
+    content?: string;
+}
+export interface MapleConfigHtmlInject {
+    head?: MapleConfigHtmlInjectPoint[];
+    body?: MapleConfigHtmlInjectPoint[];
+}
+export interface MapleConfigPcMenu {
+    text: Record<string, string>;
+    type: number;
+    doc?: string;
+    parent?: string;
+}
+export interface MapleConfigPcHeader {
+    i18n?: Record<string, string>;
+    currentVersion?: string;
+    github?: string;
+    changelog?: string;
+    playground?: string;
+    ai?: string;
+    themes?: Record<string, string>[];
+    versions?: {
+        name: string;
+        items?: {
+            label?: string;
+            link?: string;
+        }[];
+    }[];
+}
+export interface MapleConfigPcAd {
+    id?: string;
+    logo?: string;
+    logoHeight?: string;
+    description?: Record<string, string>;
+    descriptionBackground?: string;
+    descriptionTextColor?: string;
+    link?: Record<string, string>;
+    background?: string;
+    textColor?: string;
+}
+export interface MapleConfigMobileHeader {
+    i18n?: Record<string, string>;
+    github?: string;
+    themes?: Record<string, string>[];
+}
+export interface MapleConfigSeo {
+    title?: string;
+    description?: string;
+    keywords?: string;
+}
+export interface MapleConfigPcIndexPage {
+    eyebrow?: Record<string, string>;
+    headline?: Record<string, string>;
+    companion?: {
+        name: string;
+        label: Record<string, string>;
+        href: string;
+        title: Record<string, string>;
+        description: Record<string, string>;
+    };
+    description?: Record<string, string>;
+    started?: Record<string, string>;
+    viewOnGithub?: Record<string, string>;
+    features?: {
+        name: Record<string, string>;
+        description: Record<string, string>;
+    }[];
+    teamMembers?: {
+        label: Record<string, string>;
+        members: {
+            name?: Record<string, string>;
+            title?: Record<string, string>;
+            description?: Record<string, string>;
+            avatar?: string;
+            github?: string;
+            twitter?: string;
+        }[];
+    };
+    contributors?: {
+        label?: Record<string, string>;
+        link?: string;
+        image?: string;
+    };
+    sponsors?: {
+        label?: Record<string, string>;
+        link?: string;
+        image?: string;
+    };
+    license?: Record<string, string>;
+    copyright?: Record<string, string>;
+}
+export interface MapleConfigPc {
+    /** Independent documentation areas with scoped menus. */
+    sections?: {
+        id: string;
+        text: Record<string, string>;
+        entry: string;
+        mobileEntry?: string;
+        docs?: string[];
+    }[];
+    title?: Record<string, string>;
+    redirect?: string;
+    clipboard?: Record<string, string>;
+    indexPage?: MapleConfigPcIndexPage;
+    ad?: MapleConfigPcAd;
+    header?: MapleConfigPcHeader;
+    menu?: MapleConfigPcMenu[];
+    htmlInject?: MapleConfigHtmlInject;
+    fold?: {
+        /** Whether Markdown code blocks are collapsed on first render. Does not affect live demo previews. @default false */
+        defaultFold?: boolean;
+        /** Visible source height while collapsed. Use 0 to hide it completely. @default 0 */
+        foldHeight?: number;
+    };
+}
+export interface MapleConfigMobile {
+    /** Root documentation pages also available in the mobile site. */
+    docs?: string[];
+    title?: Record<string, string>;
+    redirect?: string;
+    header?: MapleConfigMobileHeader;
+    htmlInject?: MapleConfigHtmlInject;
+}
+export interface MapleConfig {
+    /**
+     * @default `Maple`
+     * UI library name.
+     */
+    name?: string;
+    /**
+     * @default `mp`
+     * Component name prefix
+     */
+    namespace?: string;
+    /**
+     * @default `localhost`
+     * Local dev server host
+     */
+    host?: string;
+    /**
+     * @default `8080`
+     * Local dev server port
+     */
+    port?: number;
+    proxy?: Record<string, string | ProxyOptions>;
+    title?: string;
+    logo?: string;
+    themeKey?: string;
+    /** Mobile demo theme storage key. Defaults to `${themeKey}_DEMO`. */
+    demoThemeKey?: string;
+    seo?: {
+        title?: string;
+        description?: string;
+        keywords?: string;
+    };
+    defaultLanguage?: 'zh-CN' | 'en-US';
+    alias?: Record<string, string>;
+    /**
+     * @default `false`
+     * Show mobile component on the right.
+     */
+    useMobile?: boolean;
+    lightTheme?: Record<string, string>;
+    darkTheme?: Record<string, string>;
+    mapleLightTheme?: Record<string, string>;
+    mapleDarkTheme?: Record<string, string>;
+    alpsLightTheme?: Record<string, string>;
+    fireflyLightTheme?: Record<string, string>;
+    alpsDarkTheme?: Record<string, string>;
+    fireflyDarkTheme?: Record<string, string>;
+    defaultLightTheme?: 'lightTheme' | 'mapleLightTheme' | 'alpsLightTheme' | 'fireflyLightTheme';
+    defaultDarkTheme?: 'darkTheme' | 'mapleDarkTheme' | 'alpsDarkTheme' | 'fireflyDarkTheme';
+    highlight?: {
+        style: string;
+    };
+    analysis?: {
+        baidu: string;
+    };
+    pc?: MapleConfigPc;
+    mobile?: MapleConfigMobile;
+    copy?: CopyOptions['paths'];
+    icons?: MapleConfigIcons;
+    esbuild?: MapleConfigEsbuild;
+    bundle?: {
+        external?: string[];
+        globals?: Record<string, string>;
+    };
+    /**
+     *  @vitePlugins
+     * @default `[]`
+     * Vite plugins
+     */
+    vitePlugins?: Plugin[] | ((plugins: Plugin[]) => Plugin[]);
+    /**
+     * @default `[]`
+     * Directive folder name for component library.
+     */
+    directives?: string[];
+    _cf?: string[];
+}
+export declare function defineConfig(config: MapleConfig): MapleConfig;
+export declare function mergeStrategy(_: any, srcValue: any, key: any): any[] | undefined;
+export declare function getMapleConfig(emit?: boolean): Promise<Required<MapleConfig>>;

package/lib/node/config/maple.config.js

@@ -0,0 +1,32 @@
+import { pathToFileURL } from 'url';
+import { isArray, mergeWith } from '@maple-design/shared-vue';
+import fse from 'fs-extra';
+import { COMPONENT_REUSE_JSON, MAPLE_CONFIG, SITE_CONFIG } from '../shared/constant.js';
+import { outputFileSyncOnChange } from '../shared/fsUtils.js';
+const { pathExistsSync, statSync } = fse;
+export function defineConfig(config) {
+    return config;
+}
+export function mergeStrategy(_, srcValue, key) {
+    // Arrays merged by index would pollute items across reloads when length/order changes
+    // (e.g. menu titles picking up the next component's `doc`).
+    const keys = ['features', 'members', 'versions', 'themes', '_cf', 'menu'];
+    if (keys.includes(key) && isArray(srcValue)) {
+        return srcValue;
+    }
+}
+export async function getMapleConfig(emit = false) {
+    const defaultConfig = (await import('./maple.default.config.js')).default;
+    const configStamp = pathExistsSync(MAPLE_CONFIG) ? statSync(MAPLE_CONFIG).mtimeMs : 0;
+    const reuseStamp = pathExistsSync(COMPONENT_REUSE_JSON) ? statSync(COMPONENT_REUSE_JSON).mtimeMs : 0;
+    const config = pathExistsSync(MAPLE_CONFIG)
+        ? (await import(`${pathToFileURL(MAPLE_CONFIG).href}?_t=${configStamp}-${reuseStamp}`)).default
+        : {};
+    // Clone first: mergeWith mutates the destination; the default export is module-cached.
+    const mergedConfig = mergeWith(structuredClone(defaultConfig), config, mergeStrategy);
+    if (emit) {
+        const source = JSON.stringify(mergedConfig, null, 2);
+        outputFileSyncOnChange(SITE_CONFIG, source);
+    }
+    return mergedConfig;
+}

package/lib/node/config/maple.default.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./maple.config.js").MapleConfig;
+export default _default;