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

package/lib/node/commands/dev.js

@@ -0,0 +1,58 @@
+import { relative, resolve } from 'path';
+import chokidar from 'chokidar';
+import fse from 'fs-extra';
+import { createServer } from 'vite';
+import { buildSiteEntry } from '../compiler/compileSiteEntry.js';
+import { getMapleConfig } from '../config/maple.config.js';
+import { getDevConfig } from '../config/vite.config.js';
+import { COMPONENT_REUSE_JSON, MAPLE_CONFIG, SITE, SITE_DIR, SRC_DIR } from '../shared/constant.js';
+import logger from '../shared/logger.js';
+import { createSerialTask } from '../shared/serial-task.js';
+const { ensureDirSync, pathExistsSync } = fse;
+let server;
+let watcher;
+let siteWatcher;
+const scheduleRestart = createSerialTask();
+async function startServer(options) {
+    const mapleConfig = await getMapleConfig();
+    const isRestart = Boolean(server);
+    logger.info(`${isRestart ? 'Res' : 'S'}tarting server...`);
+    // close all instance
+    server && (await server.close());
+    watcher && (await watcher.close());
+    siteWatcher && (await siteWatcher.close());
+    // Dev resolves components and styles from src; never rewrite published es/lib artifacts.
+    // build all config
+    await buildSiteEntry(options.draft ?? false);
+    const devConfig = getDevConfig(mapleConfig);
+    const inlineConfig = {
+        ...devConfig,
+        ...(options.force ? { optimizeDeps: { force: true } } : {}),
+    };
+    // create all instance
+    server = await createServer(inlineConfig);
+    await server.listen();
+    server.printUrls();
+    const watchFiles = [MAPLE_CONFIG, COMPONENT_REUSE_JSON].filter((file) => pathExistsSync(file));
+    if (watchFiles.length) {
+        watcher = chokidar.watch(watchFiles);
+        watcher.on('change', () => scheduleRestart(() => startServer(options)).catch((error) => logger.error(String(error))));
+    }
+    // Vite serves the generated .maple/site copy, so edits to the CLI's site
+    // source must be mirrored into that copy for normal HMR to observe them.
+    siteWatcher = chokidar.watch(SITE, { ignoreInitial: true });
+    siteWatcher.on('add', syncSiteFile);
+    siteWatcher.on('change', syncSiteFile);
+    logger.success(`\n${isRestart ? 'Res' : 'S'}tart successfully!!!`);
+    if (options.draft) {
+        logger.title('Server in draft mode!!!');
+    }
+}
+async function syncSiteFile(source) {
+    await fse.copy(source, resolve(SITE_DIR, relative(SITE, source)));
+}
+export async function dev(options) {
+    process.env.NODE_ENV = 'development';
+    ensureDirSync(SRC_DIR);
+    await scheduleRestart(() => startServer(options));
+}

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

@@ -0,0 +1,3 @@
+import { type ExtensionMode } from '../config/vite.config.js';
+export type ExtensionCommandMode = ExtensionMode;
+export declare function extension(mode: ExtensionCommandMode): Promise<void>;

package/lib/node/commands/extension.js

@@ -0,0 +1,5 @@
+import { build } from 'vite';
+import { getExtensionConfig } from '../config/vite.config.js';
+export async function extension(mode) {
+    await build(getExtensionConfig(mode));
+}

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

@@ -0,0 +1,24 @@
+export interface GenCommandOptions {
+    name?: string;
+    locale?: boolean;
+    sfc?: boolean;
+    tsx?: boolean;
+}
+interface GeneratedManifest {
+    name: string;
+    devDependencies: Record<string, string>;
+    dependencies?: Record<string, string>;
+    peerDependencies?: Record<string, string>;
+    optionalDependencies?: Record<string, string>;
+    [key: string]: unknown;
+}
+export declare function createGeneratedManifest(pkg: GeneratedManifest, name: string, cliVersion: string): {
+    name: string;
+    files: string[];
+    devDependencies: Record<string, string>;
+    dependencies?: Record<string, string> | undefined;
+    peerDependencies?: Record<string, string> | undefined;
+    optionalDependencies?: Record<string, string> | undefined;
+};
+export declare function gen(options: GenCommandOptions): Promise<void>;
+export {};

package/lib/node/commands/gen.js

@@ -0,0 +1,91 @@
+import { resolve } from 'path';
+import { confirm, input, select } from '@inquirer/prompts';
+import fse from 'fs-extra';
+import { CLI_PACKAGE_JSON, CWD, GENERATORS_DIR } from '../shared/constant.js';
+import logger from '../shared/logger.js';
+const { copy, pathExistsSync, readFileSync, writeFileSync, rename } = fse;
+export function createGeneratedManifest(pkg, name, cliVersion) {
+    if (!/^(?:@[a-z0-9][a-z0-9._-]*\/)?[a-z0-9][a-z0-9._-]*$/.test(name)) {
+        throw new Error(`Invalid npm project name: ${name}`);
+    }
+    const fields = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies'];
+    for (const field of fields) {
+        if (Object.hasOwn(pkg[field] ?? {}, name)) {
+            throw new Error(`Project name conflicts with a template dependency: ${name}`);
+        }
+    }
+    const generated = { ...pkg, name, files: ['es', 'lib', 'umd', 'highlight', 'types', 'types-generated'] };
+    for (const field of fields) {
+        const dependencies = pkg[field];
+        if (dependencies) {
+            generated[field] = Object.fromEntries(Object.entries(dependencies).map(([key, version]) => [
+                key,
+                key.startsWith('@maple-design/') ? `^${cliVersion}` : version,
+            ]));
+        }
+    }
+    return generated;
+}
+function syncVersion(name) {
+    const file = resolve(CWD, name, 'package.json');
+    const pkg = JSON.parse(readFileSync(file, 'utf-8'));
+    const cliPkg = JSON.parse(readFileSync(CLI_PACKAGE_JSON, 'utf-8'));
+    writeFileSync(file, `${JSON.stringify(createGeneratedManifest(pkg, name, cliPkg.version), null, 2)}\n`);
+}
+export async function gen(options) {
+    logger.title('\n📦📦 Generate cli application ! \n');
+    const name = options.name
+        ? options.name
+        : await input({
+            message: 'Name of the generate application: ',
+            default: 'my-ui-vue',
+        });
+    const dest = resolve(CWD, name);
+    if (pathExistsSync(dest)) {
+        logger.error(`${name} already exists and cannot be recreated...`);
+        return;
+    }
+    let codeStyle;
+    // Determine whether the parameter carries a coding style
+    if (options.sfc || options.tsx) {
+        codeStyle = options.sfc ? 'sfc' : 'tsx';
+    }
+    else {
+        const style = await select({
+            message: 'Please select your component library programming format',
+            choices: [
+                { name: 'sfc', value: 'sfc' },
+                { name: 'tsx', value: 'tsx' },
+            ],
+        });
+        codeStyle = style;
+    }
+    const i18n = options.locale ??
+        (await confirm({
+            message: 'Whether to use i18n?',
+            default: false,
+        }));
+    const dirName = i18n ? 'i18n' : 'default';
+    const base = resolve(GENERATORS_DIR, 'base');
+    const configBase = resolve(GENERATORS_DIR, 'config', dirName, 'base');
+    const code = resolve(GENERATORS_DIR, 'config', dirName, codeStyle);
+    const template = JSON.parse(readFileSync(resolve(base, 'package.json'), 'utf-8'));
+    const cliPkg = JSON.parse(readFileSync(CLI_PACKAGE_JSON, 'utf-8'));
+    createGeneratedManifest(template, name, cliPkg.version);
+    await copy(base, dest);
+    await copy(configBase, dest);
+    await copy(code, dest);
+    await rename(resolve(dest, '_gitignore'), resolve(dest, '.gitignore'));
+    syncVersion(name);
+    logger.success('✨ Application generated successfully!');
+    logger.info(`\
+  cd ${name}
+  git init (Generating .git folder to init git hooks)
+  pnpm install
+  pnpm dev`);
+    logger.success(`\
+=======================
+  Good luck have fun
+=======================\
+      `);
+}

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

@@ -0,0 +1,4 @@
+export interface IconsCommandOptions {
+    watch?: boolean;
+}
+export declare function icons({ watch }?: IconsCommandOptions): Promise<void>;

package/lib/node/commands/icons.js

@@ -0,0 +1,15 @@
+import { spawn } from 'node:child_process';
+import { resolve } from 'node:path';
+import logger from '../shared/logger.js';
+function run(command, args, cwd) {
+    return new Promise((done, fail) => {
+        const child = spawn(command, args, { cwd, stdio: 'inherit', shell: process.platform === 'win32' });
+        child.on('error', fail);
+        child.on('exit', (code) => (code === 0 ? done() : fail(new Error(`${command} exited with code ${code}`))));
+    });
+}
+export async function icons({ watch = false } = {}) {
+    const packageRoot = resolve(process.cwd(), 'packages/icons');
+    logger.info(`${watch ? 'Watching' : 'Building'} @maple-design/icons-vue...`);
+    await run('pnpm', ['--dir', packageRoot, watch ? 'dev' : 'build'], process.cwd());
+}

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

@@ -0,0 +1,4 @@
+export type PreviewCommandOptions = {
+    port?: string;
+};
+export declare function preview(options: PreviewCommandOptions): Promise<void>;

package/lib/node/commands/preview.js

@@ -0,0 +1,18 @@
+import fse from 'fs-extra';
+import { x } from 'tinyexec';
+import { SITE_OUTPUT_PATH } from '../shared/constant.js';
+import logger from '../shared/logger.js';
+const { pathExistsSync } = fse;
+export async function preview(options) {
+    const { port = 5500 } = options;
+    if (!pathExistsSync(SITE_OUTPUT_PATH)) {
+        logger.warning('Cannot find the site folder, you must first run the build command to build the document site');
+        return;
+    }
+    try {
+        await x('live-server', [`--port=${Number(port)}`], { nodeOptions: { cwd: SITE_OUTPUT_PATH, stdio: 'inherit' } });
+    }
+    catch (e) {
+        logger.error(e.toString());
+    }
+}

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

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

package/lib/node/commands/styleVars.js

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

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

@@ -0,0 +1,7 @@
+interface TestCommandOptions {
+    watch?: boolean;
+    component?: string;
+    coverage?: boolean;
+}
+export declare function test({ component, watch, coverage }: TestCommandOptions): Promise<void>;
+export {};

package/lib/node/commands/test.js

@@ -0,0 +1,16 @@
+import { x } from 'tinyexec';
+import { VITEST_CONFIG } from '../shared/constant.js';
+export async function test({ component, watch, coverage }) {
+    process.env.NODE_ENV = 'test';
+    const args = ['--config', VITEST_CONFIG];
+    if (!watch) {
+        args.unshift('run');
+    }
+    if (coverage) {
+        args.push('--coverage');
+    }
+    if (component) {
+        args.push('--dir', `src/${component.trim()}`);
+    }
+    await x('vitest', args, { nodeOptions: { stdio: 'inherit' }, throwOnError: true });
+}

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

@@ -0,0 +1,2 @@
+export type ViteCommandMode = 'dev' | 'build';
+export declare function vite(mode: ViteCommandMode): Promise<void>;

package/lib/node/commands/vite.js

@@ -0,0 +1,14 @@
+import vue from '@vitejs/plugin-vue';
+import jsx from '@vitejs/plugin-vue-jsx';
+import { build, createServer } from 'vite';
+export async function vite(mode) {
+    process.env.NODE_ENV = mode === 'dev' ? 'development' : 'production';
+    const run = mode === 'build' ? build : createServer;
+    const result = await run({
+        plugins: [vue(), jsx()],
+    });
+    if (mode === 'dev') {
+        await result.listen();
+        result.printUrls();
+    }
+}

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

@@ -0,0 +1,4 @@
+export declare function compileBundle(): Promise<void>;
+export declare function compileDir(dir: string): Promise<void>;
+export declare function compileFile(file: string): Promise<void>;
+export declare function compileModule(): Promise<void>;

package/lib/node/compiler/compileModule.js

@@ -0,0 +1,78 @@
+import { resolve } from 'path';
+import { kebabCase } from '@maple-design/shared-vue';
+import fse from 'fs-extra';
+import { build } from 'vite';
+import { getMapleConfig } from '../config/maple.config.js';
+import { getBundleConfig } from '../config/vite.config.js';
+import { DOCS_DIR_NAME, ES_DIR, EXAMPLE_DIR_NAME, LIB_DIR, SRC_DIR, STYLE_DIR_NAME, TESTS_DIR_NAME, UMD_DIR, } from '../shared/constant.js';
+import { getPublicDirs, isDir, isDTS, isLess, isScript, isScss, isSFC } from '../shared/fsUtils.js';
+import { compileESEntry, compileScriptFile, getScriptExtname } from './compileScript.js';
+import { compileSFC } from './compileSFC.js';
+import { clearLessFiles, clearScssFiles, compileLess, compileScss } from './compileStyle.js';
+import { generateReference } from './compileTypes.js';
+const { copy, ensureFileSync, readdir, removeSync } = fse;
+export async function compileBundle() {
+    const mapleConfig = await getMapleConfig();
+    const name = kebabCase(mapleConfig?.name || '');
+    const buildOptions = [
+        {
+            format: 'es',
+            fileName: `${name}.esm.js`,
+            cssFileName: name,
+            output: ES_DIR,
+            emptyOutDir: false,
+            removeEnv: true,
+        },
+        {
+            format: 'cjs',
+            fileName: `${name}.cjs.js`,
+            cssFileName: name,
+            output: LIB_DIR,
+            emptyOutDir: false,
+            removeEnv: false,
+        },
+        {
+            format: 'umd',
+            fileName: `${name}.js`,
+            cssFileName: name,
+            output: UMD_DIR,
+            emptyOutDir: true,
+            removeEnv: true,
+        },
+    ];
+    const tasks = buildOptions.map((options) => build(getBundleConfig(mapleConfig, options)));
+    await Promise.all(tasks);
+}
+export async function compileDir(dir) {
+    const dirs = await readdir(dir);
+    await Promise.all(dirs.map((filename) => {
+        const file = resolve(dir, filename);
+        [TESTS_DIR_NAME, EXAMPLE_DIR_NAME, DOCS_DIR_NAME].includes(filename) && removeSync(file);
+        if (isDTS(file) || filename === STYLE_DIR_NAME) {
+            return Promise.resolve();
+        }
+        return compileFile(file);
+    }));
+}
+export async function compileFile(file) {
+    isSFC(file) && (await compileSFC(file));
+    isScript(file) && (await compileScriptFile(file));
+    isLess(file) && (await compileLess(file));
+    isScss(file) && compileScss(file);
+    isDir(file) && (await compileDir(file));
+}
+export async function compileModule() {
+    const dest = ES_DIR;
+    await copy(SRC_DIR, dest);
+    const moduleDir = await readdir(dest);
+    await Promise.all(moduleDir.map((filename) => {
+        const file = resolve(dest, filename);
+        isDir(file) && ensureFileSync(resolve(file, `./style/index${getScriptExtname()}`));
+        return isDir(file) ? compileDir(file) : null;
+    }));
+    const publicDirs = await getPublicDirs();
+    await compileESEntry(dest, publicDirs);
+    clearLessFiles(dest);
+    clearScssFiles(dest);
+    generateReference(dest);
+}

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

@@ -0,0 +1,6 @@
+export declare function declareEmptySFC(): string;
+export declare function replaceExportToDeclare(script: string): string;
+export declare function injectExport(script: string): string;
+export declare function injectScopeId(script: string, scopeId: string): string;
+export declare function injectRender(script: string, render: string): string;
+export declare function compileSFC(sfc: string): Promise<void>;

package/lib/node/compiler/compileSFC.js

@@ -0,0 +1,119 @@
+import { parse, resolve } from 'path';
+import { compileScript as compileScriptSFC, compileStyle, compileTemplate, parse as parseSFC, registerTS, } from '@vue/compiler-sfc';
+import fse from 'fs-extra';
+import hash from 'hash-sum';
+import ts from 'typescript';
+import { ES_DIR, SRC_DIR } from '../shared/constant.js';
+import { replaceExt, smartAppendFileSync } from '../shared/fsUtils.js';
+import { compileScript, getScriptExtname } from './compileScript.js';
+import { compileLess, compileScss, compressCss, extractStyleDependencies, normalizeStyleDependency, STYLE_IMPORT_RE, } from './compileStyle.js';
+const { readFile, existsSync, readFileSync, writeFileSync, ensureFileSync } = fse;
+registerTS(() => ts);
+const EXPORT = 'export default';
+const SFC = '__sfc__';
+const SFC_DECLARE = `const ${SFC} = `;
+const RENDER = '__render__';
+const BASE_CSS_VARIABLES_IMPORT = `import '../../style/theme/css-variables.css'\n`;
+function ensureBaseCssVariablesImport(cssFile) {
+    ensureFileSync(cssFile);
+    const content = readFileSync(cssFile, 'utf-8');
+    if (!content.includes('style/theme/css-variables.css')) {
+        writeFileSync(cssFile, `${BASE_CSS_VARIABLES_IMPORT}${content}`);
+    }
+}
+export function declareEmptySFC() {
+    return `${SFC_DECLARE}{}\n`;
+}
+export function replaceExportToDeclare(script) {
+    return script.replace(EXPORT, SFC_DECLARE);
+}
+export function injectExport(script) {
+    script += `\n${EXPORT} ${SFC}`;
+    return script;
+}
+export function injectScopeId(script, scopeId) {
+    script += `\n${SFC}.__scopeId = '${scopeId}'`;
+    return script;
+}
+export function injectRender(script, render) {
+    script = script.trim();
+    render = render.replace('export function render', `function ${RENDER}`);
+    script = script.replace(SFC_DECLARE, `${render}\n${SFC_DECLARE}`);
+    script += `\n${SFC}.render = ${RENDER}`;
+    return script;
+}
+export async function compileSFC(sfc) {
+    const sources = await readFile(sfc, 'utf-8');
+    const id = hash(sources);
+    const { descriptor } = parseSFC(sources, { filename: sfc, sourceMap: false });
+    const { script, scriptSetup, template, styles } = descriptor;
+    let scriptContent;
+    let bindingMetadata;
+    if (script || scriptSetup) {
+        if (scriptSetup) {
+            const { content, bindings } = compileScriptSFC(descriptor, {
+                id,
+                // issue https://xxx/pe.frontend/materials/maplejs/maple-design-mobile/-/issues/1458
+                fs: {
+                    fileExists: (file) => existsSync(file.replace(ES_DIR, SRC_DIR)),
+                    readFile: (file) => readFileSync(file.replace(ES_DIR, SRC_DIR), 'utf-8'),
+                },
+            });
+            scriptContent = content;
+            bindingMetadata = bindings;
+        }
+        else {
+            // script only
+            scriptContent = script.content;
+        }
+        scriptContent = replaceExportToDeclare(scriptContent);
+    }
+    if (!scriptContent) {
+        scriptContent = declareEmptySFC();
+    }
+    // scoped
+    const hasScope = styles.some((style) => style.scoped);
+    const scopeId = hasScope ? `data-v-${id}` : '';
+    if (template) {
+        const render = compileTemplate({
+            id,
+            source: template.content,
+            filename: sfc,
+            compilerOptions: {
+                expressionPlugins: descriptor.script?.lang === 'ts' ? ['typescript'] : undefined,
+                scopeId,
+                bindingMetadata,
+            },
+        }).code;
+        scriptContent = injectRender(scriptContent, render);
+    }
+    if (scopeId) {
+        scriptContent = injectScopeId(scriptContent, scopeId);
+    }
+    scriptContent = injectExport(scriptContent);
+    await compileScript(scriptContent, sfc);
+    // style
+    for (let index = 0; index < styles.length; index++) {
+        const style = styles[index];
+        const file = replaceExt(sfc, `Sfc${index || ''}.${style.lang || 'css'}`);
+        const { base, dir } = parse(file);
+        const dependencyPath = normalizeStyleDependency(base, STYLE_IMPORT_RE);
+        const cssFile = resolve(dir, `./style/index${getScriptExtname()}`);
+        ensureBaseCssVariablesImport(cssFile);
+        let { code } = compileStyle({
+            source: style.content,
+            filename: file,
+            id: scopeId,
+            scoped: style.scoped,
+        });
+        code = extractStyleDependencies(file, code, STYLE_IMPORT_RE);
+        writeFileSync(file, compressCss(code), 'utf-8');
+        smartAppendFileSync(cssFile, `import '${dependencyPath}.css'\n`);
+        if (style.lang === 'less') {
+            await compileLess(file);
+        }
+        if (style.lang === 'scss') {
+            compileScss(file);
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+import { MapleConfig } from '../config/maple.config.js';
+export declare const IMPORT_FROM_DEPENDENCE_RE: RegExp;
+export declare const EXPORT_FROM_DEPENDENCE_RE: RegExp;
+export declare const IMPORT_DEPENDENCE_RE: RegExp;
+export declare const scriptExtNames: string[];
+export declare const styleExtNames: string[];
+export declare const scriptIndexes: string[];
+export declare const styleIndexes: string[];
+export declare const tryMatchExtname: (file: string, extname: string[]) => string | undefined;
+export declare const resolveAlias: (dependence: string, file: string, alias?: MapleConfig['alias']) => string;
+export declare const resolveDependence: (file: string, script: string, alias?: MapleConfig['alias']) => string;
+export declare function compileScriptByBabel(script: string, file: string): Promise<string>;
+export declare function compileScriptByEsbuild(script: string): Promise<string>;
+export declare function compileScript(script: string, file: string): Promise<void>;
+export declare function compileScriptFile(file: string): Promise<void>;
+export declare function getScriptExtname(): string;
+export interface GenerateEsEntryTemplateOptions {
+    publicDirs: string[];
+    scriptExtname?: string;
+    root?: string;
+}
+export declare function generateEsEntryTemplate(options: GenerateEsEntryTemplateOptions): {
+    indexTemplate: string;
+    styleTemplate: string;
+    bundleTemplate: string;
+};
+export declare function compileESEntry(dir: string, publicDirs: string[]): Promise<void>;