@varlet/cli 2.0.5 → 2.1.0-alpha.1666877950844

package/README.en-US.md

@@ -35,8 +35,8 @@ you can start the development of the component library
 ### Configuration file
 
 The `varlet.config.js` in the project root directory is used to manage the specific details of the entire component library project.
-The default configuration can be viewed [varlet.default.config.js](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/varlet.default.config.js)。
-Also refer to `@varlet/ui` [varlet.config.js](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.js)
+The default configuration can be viewed [varlet.default.config.ts](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/config/varlet.default.config.ts)。
+Also refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.mjs)
 
 | Parameter | Description | Type | Default |
 | -- | -------------- | -------- | ---------- |

package/README.md

@@ -33,8 +33,8 @@ varlet-cli gen
 ### 配置文件
 
 项目根目录下的 `varlet.config.js` 用来管理整个组件库项目的具体细节。
-默认配置可查阅 [varlet.default.config.js](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/varlet.default.config.js)。
-也可以参考 `@varlet/ui` 的 [varlet.config.js](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.js)
+默认配置可查阅 [varlet.default.config.ts](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/config/varlet.default.config.ts)。
+也可以参考 `@varlet/ui` 的 [varlet.config.mjs](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.mjs)
 
 | 参数 | 说明 | 类型 | 默认值 |
 | ----- | -------------- | -------- | ---------- |

package/cjs/babel.config.cjs

@@ -0,0 +1,29 @@
+module.exports = (api, options) => {
+  if (api) {
+    api.cache.never()
+  }
+
+  const isCommonJS = process.env.NODE_ENV === 'test' || process.env.BABEL_MODULE === 'commonjs'
+
+  return {
+    presets: [
+      [
+        require.resolve('@babel/preset-env'),
+        {
+          modules: isCommonJS ? 'commonjs' : false,
+          loose: options.loose,
+        },
+      ],
+      require.resolve('@babel/preset-typescript'),
+      require('./babel.sfc.transform.cjs'),
+    ],
+    plugins: [
+      [
+        require.resolve('@vue/babel-plugin-jsx'),
+        {
+          enableObjectSlots: options.enableObjectSlots,
+        },
+      ],
+    ],
+  }
+}

package/cjs/babel.sfc.transform.cjs

@@ -0,0 +1,18 @@
+const { readFileSync } = require('fs')
+const { declare } = require('@babel/helper-plugin-utils')
+
+module.exports = declare(() => ({
+  overrides: [
+    {
+      test: (file) => {
+        if (/\.vue$/.test(file)) {
+          const code = readFileSync(file, 'utf8')
+          return code.includes('lang="ts"') || code.includes("lang='ts'")
+        }
+
+        return false
+      },
+      plugins: ['@babel/plugin-transform-typescript'],
+    },
+  ],
+}))

package/cjs/jest.config.cjs

@@ -0,0 +1,33 @@
+const { resolve } = require('path')
+const { pathExistsSync } = require('fs-extra')
+
+const JEST_MEDIA_MOCK = resolve(__dirname, 'jest.media.mock.cjs')
+const JEST_STYLE_MOCK = resolve(__dirname, 'jest.style.mock.cjs')
+
+function getRootConfig() {
+  const file = resolve(process.cwd(), 'jest.config.js')
+
+  if (pathExistsSync(file)) {
+    delete require.cache[require.resolve(file)]
+    return require(file)
+  }
+
+  return {}
+}
+
+module.exports = {
+  moduleNameMapper: {
+    '^@config$': '<rootDir>/.varlet/site.config.json',
+    '\\.(css|less)$': JEST_STYLE_MOCK,
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': JEST_MEDIA_MOCK,
+  },
+  transform: {
+    '\\.(vue)$': 'vue-jest',
+    '\\.(js|jsx|ts|tsx)$': 'babel-jest',
+  },
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx,vue}', `!**/example/**`, `!**/docs/**`, `!**/__tests__/**`],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'vue'],
+  transformIgnorePatterns: [],
+  ...getRootConfig(),
+}

package/cjs/jest.media.mock.cjs

@@ -0,0 +1 @@
+module.exports = {}

package/cjs/jest.style.mock.cjs

@@ -0,0 +1 @@
+module.exports = {}

package/client.d.ts

@@ -0,0 +1 @@
+export * from './lib/client/index'

package/client.js

@@ -0,0 +1 @@
+export * from './lib/client/index.js'

package/lib/client/appType.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+export default _default;

package/lib/client/appType.js

@@ -0,0 +1,7 @@
+import { defineComponent, h } from 'vue';
+export default defineComponent({
+    name: 'AppType',
+    setup(props, { slots }) {
+        return () => { var _a; return h('div', { class: 'app-type' }, [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)]); };
+    },
+});

package/lib/client/index.d.ts

@@ -0,0 +1,17 @@
+import AppType from './appType';
+interface PCLocationInfo {
+    language: string;
+    menuName: string;
+}
+export declare type Theme = 'lightTheme' | 'darkTheme';
+export declare type StyleVars = Record<string, string>;
+export declare function StyleProvider(styleVars?: StyleVars | null): void;
+export declare function getPCLocationInfo(): PCLocationInfo;
+export declare function getBrowserTheme(): Theme;
+export declare function watchLang(cb: (lang: string) => void, platform?: 'pc' | 'mobile'): void;
+export declare function withSiteConfigNamespace(styleVars: Record<string, any>): StyleVars;
+export declare function watchPlatform(cb: (platform: string) => void): void;
+export declare function useRouteListener(cb: () => void): void;
+export declare function watchDarkMode(dark: StyleVars, cb?: (theme: Theme) => void): void;
+export declare function watchTheme(cb: (theme: Theme, from: 'pc' | 'mobile' | 'default' | 'playground') => void, shouldUnmount?: boolean): void;
+export { AppType };

package/lib/client/index.js

@@ -0,0 +1,106 @@
+import config from '@config';
+import AppType from './appType';
+import { onMounted, onUnmounted } from 'vue';
+import { kebabCase } from '@varlet/shared';
+import { get } from 'lodash-es';
+const mountedVarKeys = [];
+function formatStyleVars(styleVars) {
+    return Object.entries(styleVars !== null && styleVars !== void 0 ? styleVars : {}).reduce((styles, [key, value]) => {
+        const cssVar = key.startsWith('--') ? key : `--${kebabCase(key)}`;
+        styles[cssVar] = value;
+        return styles;
+    }, {});
+}
+export function StyleProvider(styleVars = {}) {
+    mountedVarKeys.forEach((key) => document.documentElement.style.removeProperty(key));
+    mountedVarKeys.length = 0;
+    const styles = formatStyleVars(styleVars);
+    Object.entries(styles).forEach(([key, value]) => {
+        document.documentElement.style.setProperty(key, value);
+        mountedVarKeys.push(key);
+    });
+}
+export function getPCLocationInfo() {
+    const [, language, menuName] = window.location.hash.split('/');
+    return {
+        language,
+        menuName,
+    };
+}
+function getHashSearch() {
+    const { href } = window.location;
+    const hashSearch = href.slice(href.indexOf('?'));
+    return new URLSearchParams(hashSearch);
+}
+export function getBrowserTheme() {
+    var _a;
+    const themeKey = get(config, 'themeKey');
+    const darkThemeConfig = get(config, 'darkTheme');
+    if (!darkThemeConfig) {
+        return 'lightTheme';
+    }
+    const storageTheme = window.localStorage.getItem(themeKey);
+    if (!storageTheme) {
+        const preferTheme = ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-color-scheme: dark)').matches) ? 'darkTheme' : 'lightTheme';
+        window.localStorage.setItem(themeKey, preferTheme);
+        return preferTheme;
+    }
+    return storageTheme;
+}
+export function watchLang(cb, platform = 'mobile') {
+    const handleHashchange = () => {
+        var _a;
+        const language = platform === 'mobile' ? (_a = getHashSearch().get('language')) !== null && _a !== void 0 ? _a : 'zh-CN' : getPCLocationInfo().language;
+        cb(language);
+    };
+    useRouteListener(handleHashchange);
+    handleHashchange();
+}
+export function withSiteConfigNamespace(styleVars) {
+    return Object.entries(styleVars).reduce((styleVars, [key, value]) => {
+        styleVars[`--site-config-${key}`] = value;
+        return styleVars;
+    }, {});
+}
+export function watchPlatform(cb) {
+    const handleHashchange = () => {
+        var _a;
+        const platform = (_a = getHashSearch().get('platform')) !== null && _a !== void 0 ? _a : 'mobile';
+        cb(platform);
+    };
+    useRouteListener(handleHashchange);
+    handleHashchange();
+}
+export function useRouteListener(cb) {
+    onMounted(() => {
+        window.addEventListener('hashchange', cb);
+        window.addEventListener('popstate', cb);
+    });
+    onUnmounted(() => {
+        window.removeEventListener('hashchange', cb);
+        window.removeEventListener('popstate', cb);
+    });
+}
+export function watchDarkMode(dark, cb) {
+    watchTheme((theme) => {
+        const siteStyleVars = withSiteConfigNamespace(get(config, theme, {}));
+        StyleProvider(theme === 'darkTheme' ? Object.assign(Object.assign({}, siteStyleVars), dark) : siteStyleVars);
+        cb === null || cb === void 0 ? void 0 : cb(theme);
+    });
+}
+export function watchTheme(cb, shouldUnmount = true) {
+    const handleThemeChange = (event) => {
+        const { data } = event;
+        if (data.action === 'theme-change') {
+            cb(data.data, data.from);
+        }
+    };
+    window.addEventListener('message', handleThemeChange);
+    if (shouldUnmount) {
+        onUnmounted(() => {
+            window.removeEventListener('message', handleThemeChange);
+        });
+    }
+    cb(getBrowserTheme(), 'default');
+}
+export { AppType };

package/lib/{bin.d.ts → node/bin.d.ts}

@@ -1,2 +1,2 @@
-#!/usr/bin/env node
-export {};
+#!/usr/bin/env node
+export {};

package/lib/node/bin.js

@@ -0,0 +1,122 @@
+#!/usr/bin/env node
+import fse from 'fs-extra';
+import { Command } from 'commander';
+import { CLI_PACKAGE_JSON } from './shared/constant.js';
+const { readJSONSync } = fse;
+const program = new Command();
+program.version(`varlet-cli ${readJSONSync(CLI_PACKAGE_JSON).version}`).usage('<command> [options]');
+program
+    .command('dev')
+    .option('-f --force', 'Force dep pre-optimization regardless of whether deps have changed')
+    .description('Run varlet development environment')
+    .action(async (options) => {
+    const { dev } = await import('./commands/dev.js');
+    return dev(options);
+});
+program
+    .command('build')
+    .description('Build varlet site for production')
+    .action(async () => {
+    const { build } = await import('./commands/build.js');
+    return build();
+});
+program
+    .command('build:vite')
+    .description('Use vite build app for production')
+    .action(async () => {
+    const { vite } = await import('./commands/vite.js');
+    return vite('build');
+});
+program
+    .command('dev:vite')
+    .description('Use vite start server for development')
+    .action(async () => {
+    const { vite } = await import('./commands/vite.js');
+    return vite('dev');
+});
+program
+    .command('preview')
+    .description('Preview varlet site for production')
+    .action(async () => {
+    const { preview } = await import('./commands/preview.js');
+    return preview();
+});
+program
+    .command('compile')
+    .description('Compile varlet components library code')
+    .option('-nu, --noUmd', 'Do not compile umd target code')
+    .action(async (options) => {
+    const { compile } = await import('./commands/compile.js');
+    return compile(options);
+});
+program
+    .command('lint')
+    .description('Lint code')
+    .action(async () => {
+    const { lint } = await import('./commands/lint.js');
+    return lint();
+});
+program
+    .command('create')
+    .description('Create a component directory')
+    .option('-n, --name <componentName>', 'Component name')
+    .option('-s, --sfc', 'Generate files in sfc format')
+    .option('-t, --tsx', 'Generate files in tsx format')
+    .option('-l, --locale', 'Generator internationalized files')
+    .action(async (options) => {
+    const { create } = await import('./commands/create.js');
+    return create(options);
+});
+program
+    .command('jest')
+    .description('Run Jest in work directory')
+    .option('-w, --watch', 'Watch files for changes and rerun tests related to changed files')
+    .option('-wa, --watchAll', 'Watch files for changes and rerun all tests when something changes')
+    .option('-c, --component <componentName>', 'Test a specific component')
+    .option('-cc --clearCache', 'Clear test cache')
+    .action(async (option) => {
+    const { jest } = await import('./commands/jest.js');
+    return jest(option);
+});
+program
+    .command('gen')
+    .description('Generate cli application')
+    .option('-n, --name <applicationName>', 'Application name')
+    .option('-s, --sfc', 'Generate files in sfc format')
+    .option('-t, --tsx', 'Generate files in tsx format')
+    .option('-l, --locale', 'Generator internationalized files')
+    .action(async (option) => {
+    const { gen } = await import('./commands/gen.js');
+    return gen(option);
+});
+program
+    .command('changelog')
+    .option('-rc --releaseCount <releaseCount>', 'Release count')
+    .option('-f --file <file>', 'Changelog filename')
+    .description('Generate changelog')
+    .action(async (option) => {
+    const { changelog } = await import('./commands/changelog.js');
+    return changelog(option);
+});
+program
+    .command('release')
+    .option('-r --remote <remote>', 'Remote name')
+    .description('Release all packages and generate changelogs')
+    .action(async (option) => {
+    const { release } = await import('./commands/release.js');
+    return release(option);
+});
+program
+    .command('commit-lint <gitParams>')
+    .description('Lint commit message')
+    .action(async (option) => {
+    const { commitLint } = await import('./commands/commitLint.js');
+    return commitLint(option);
+});
+program.on('command:*', async ([cmd]) => {
+    const { default: logger } = await import('./shared/logger.js');
+    program.outputHelp();
+    logger.error(`\nUnknown command ${cmd}.\n`);
+    process.exitCode = 1;
+});
+program.parse();

package/lib/{commands → node/commands}/build.d.ts

@@ -1 +1 @@
-export declare function build(): Promise<void>;
+export declare function build(): Promise<void>;

package/lib/node/commands/build.js

@@ -0,0 +1,15 @@
+import fse from 'fs-extra';
+import { SRC_DIR } from '../shared/constant.js';
+import { build as buildVite } from 'vite';
+import { getBuildConfig } from '../config/vite.config.js';
+import { getVarletConfig } from '../config/varlet.config.js';
+import { buildSiteEntry } from '../compiler/compileSiteEntry.js';
+const { ensureDirSync } = fse;
+export async function build() {
+    process.env.NODE_ENV = 'production';
+    ensureDirSync(SRC_DIR);
+    await buildSiteEntry();
+    const varletConfig = await getVarletConfig();
+    const buildConfig = getBuildConfig(varletConfig);
+    await buildVite(buildConfig);
+}

package/lib/{commands → node/commands}/changelog.d.ts

@@ -1,6 +1,6 @@
-interface ChangelogCommandOptions {
-    file?: string;
-    releaseCount?: number;
-}
-export declare function changelog({ releaseCount, file }?: ChangelogCommandOptions): Promise<void>;
-export {};
+interface ChangelogCommandOptions {
+    file?: string;
+    releaseCount?: number;
+}
+export declare function changelog({ releaseCount, file }?: ChangelogCommandOptions): Promise<void>;
+export {};

package/lib/node/commands/changelog.js

@@ -0,0 +1,20 @@
+import ora from 'ora';
+import conventionalChangelog from 'conventional-changelog';
+import fse from 'fs-extra';
+import { resolve as resolvePath } from 'path';
+import { CWD } from '../shared/constant.js';
+const { createWriteStream } = fse;
+export function changelog({ releaseCount = 0, file = 'CHANGELOG.md' } = {}) {
+    const s = ora().start(`Generating changelog`);
+    return new Promise((resolve) => {
+        conventionalChangelog({
+            preset: 'angular',
+            releaseCount,
+        })
+            .pipe(createWriteStream(resolvePath(CWD, file)))
+            .on('close', () => {
+            s.succeed(`Changelog generated success!`);
+            resolve();
+        });
+    });
+}

package/lib/{commands → node/commands}/commitLint.d.ts

@@ -1 +1 @@
-export declare function commitLint(gitParams: string): void;
+export declare function commitLint(gitParams: string): void;

package/lib/node/commands/commitLint.js

@@ -0,0 +1,45 @@
+import logger from '../shared/logger.js';
+import semver from 'semver';
+import fse from 'fs-extra';
+const { readFileSync } = fse;
+function isVersion(message) {
+    return message.startsWith('v') && semver.valid(message.slice(1));
+}
+export function commitLint(gitParams) {
+    const message = readFileSync(gitParams, 'utf-8').trim();
+    const COMMIT_MESSAGE_RE = /^(revert|fix|feat|docs|perf|test|types|style|build|chore|release|refactor)(\(.+\))?!?: (.|\n)+/;
+    if (!isVersion(message) && !COMMIT_MESSAGE_RE.test(message)) {
+        logger.error(`Commit message invalid`);
+        logger.warning(`\
+The rules for commit messages are as follows
+
+Example:
+
+feat: add a new feature
+feat(ui/button): add a new feature in the ui/button scope
+
+fix: fix a bug
+fix(ui/button): fix a bug in the ui/button scope
+
+docs: fix an error in the documentation
+docs(ui/button): fix a documentation error in the ui/button scope
+
+Allowed types:
+- fix
+- feat
+- docs
+- perf
+- test
+- types
+- style
+- build
+- chore
+- release
+- refactor
+- revert
+
+Commit message reference: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y
+参考阮一峰Commit message编写指南: https://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html`);
+        process.exit(1);
+    }
+}

package/lib/{commands → node/commands}/compile.d.ts

@@ -1,7 +1,7 @@
-export declare function removeDir(): Promise<[void, void, void, void]>;
-export declare function runTask(taskName: string, task: () => any): Promise<void>;
-interface CompileCommandOptions {
-    noUmd?: boolean;
-}
-export declare function compile(options: CompileCommandOptions): Promise<void>;
-export {};
+export declare function removeDir(): Promise<[void, void, void, void]>;
+export declare function runTask(taskName: string, task: () => any): Promise<void>;
+interface CompileCommandOptions {
+    noUmd?: boolean;
+}
+export declare function compile(options: CompileCommandOptions): Promise<void>;
+export {};

package/lib/node/commands/compile.js

@@ -0,0 +1,35 @@
+import ora from 'ora';
+import logger from '../shared/logger.js';
+import fse from 'fs-extra';
+import { ES_DIR, HL_DIR, LIB_DIR, UMD_DIR } from '../shared/constant.js';
+import { compileModule } from '../compiler/compileModule.js';
+import { compileTemplateHighlight } from '../compiler/compileTemplateHighlight.js';
+import { compileTypes } from '../compiler/compileTypes.js';
+const { remove } = fse;
+export function removeDir() {
+    return Promise.all([remove(ES_DIR), remove(LIB_DIR), remove(HL_DIR), remove(UMD_DIR)]);
+}
+export async function runTask(taskName, task) {
+    const s = ora().start(`Compiling ${taskName}`);
+    try {
+        await task();
+        s.succeed(`Compilation ${taskName} completed!`);
+    }
+    catch (e) {
+        s.fail(`Compilation ${taskName} failed!`);
+        logger.error(e.toString());
+    }
+}
+export async function compile(options) {
+    process.env.NODE_ENV = 'compile';
+    await removeDir();
+    await Promise.all([runTask('types', compileTypes), runTask('template highlight', compileTemplateHighlight)]);
+    process.env.TARGET_MODULE = 'module';
+    await runTask('module', compileModule);
+    process.env.TARGET_MODULE = 'esm-bundle';
+    await runTask('esm bundle', () => compileModule('esm-bundle'));
+    process.env.TARGET_MODULE = 'commonjs';
+    await runTask('commonjs', () => compileModule('commonjs'));
+    process.env.TARGET_MODULE = 'umd';
+    !options.noUmd && (await runTask('umd', () => compileModule('umd')));
+}

package/lib/{commands → node/commands}/create.d.ts

@@ -1,8 +1,8 @@
-interface CreateCommandOptions {
-    name?: string;
-    locale?: boolean;
-    sfc?: boolean;
-    tsx?: boolean;
-}
-export declare function create(options: CreateCommandOptions): Promise<void>;
-export {};
+interface CreateCommandOptions {
+    name?: string;
+    locale?: boolean;
+    sfc?: boolean;
+    tsx?: boolean;
+}
+export declare function create(options: CreateCommandOptions): Promise<void>;
+export {};

package/lib/node/commands/create.js

@@ -0,0 +1,91 @@
+import ejs from 'ejs';
+import fse from 'fs-extra';
+import logger from '../shared/logger.js';
+import { bigCamelize, camelize, kebabCase } from '@varlet/shared';
+import inquirer from 'inquirer';
+import { get } from 'lodash-es';
+import { resolve } from 'path';
+import { glob } from '../shared/fsUtils.js';
+import { getVarletConfig } from '../config/varlet.config.js';
+import { SRC_DIR, dirname } from '../shared/constant.js';
+const { removeSync, readFileSync, copySync, pathExistsSync, writeFileSync } = fse;
+const { prompt } = inquirer;
+async function renderTemplates(componentFolder, componentFolderName, renderData) {
+    const templates = await glob(`${componentFolder}/**/*.ejs`);
+    templates.forEach((template) => {
+        const templateCode = readFileSync(template, { encoding: 'utf-8' });
+        const code = ejs.render(templateCode, renderData);
+        const file = template
+            .replace('[componentName]', camelize(componentFolderName))
+            .replace('[ComponentName]', bigCamelize(componentFolderName))
+            .replace('.ejs', '');
+        writeFileSync(file, code);
+        removeSync(template);
+    });
+}
+export async function create(options) {
+    logger.title('\n📦📦 Create a component ! \n');
+    const namespace = get(await getVarletConfig(), 'namespace');
+    const renderData = {
+        namespace,
+        bigCamelizeNamespace: bigCamelize(namespace),
+        kebabCaseName: 'component-name',
+        bigCamelizeName: 'ComponentName',
+        camelizeName: 'componentName',
+        style: 'vue',
+    };
+    const { name } = options.name
+        ? options
+        : await prompt({
+            name: 'name',
+            message: 'Name of the component created: ',
+            default: renderData.kebabCaseName,
+        });
+    renderData.kebabCaseName = kebabCase(name);
+    renderData.camelizeName = camelize(name);
+    renderData.bigCamelizeName = bigCamelize(name);
+    const componentFolder = resolve(SRC_DIR, renderData.kebabCaseName);
+    const componentFolderName = renderData.kebabCaseName;
+    if (pathExistsSync(componentFolder)) {
+        logger.warning(`${componentFolderName} already exist and cannot be recreated...`);
+        return;
+    }
+    const { locale } = options.locale
+        ? options
+        : await prompt({
+            name: 'locale',
+            type: 'confirm',
+            message: 'Whether to use i18n?',
+            default: false,
+        });
+    renderData.locale = locale;
+    // Determine whether the parameter carries a component style
+    if (options.sfc || options.tsx) {
+        renderData.style = options.sfc ? 'vue' : 'tsx';
+    }
+    else {
+        const { style } = await prompt({
+            name: 'style',
+            type: 'list',
+            message: 'Which style do you use to write your component ?',
+            choices: [
+                { name: 'sfc', value: 'vue' },
+                { name: 'tsx', value: 'tsx' },
+            ],
+            default: 'vue',
+        });
+        renderData.style = style;
+    }
+    copySync(resolve(dirname, '../../../template/create'), componentFolder);
+    await renderTemplates(componentFolder, componentFolderName, renderData);
+    if (!renderData.locale) {
+        removeSync(resolve(componentFolder, '/example/locale'));
+    }
+    if (renderData.style !== 'vue') {
+        removeSync(resolve(componentFolder, `${renderData.bigCamelizeName}.vue`));
+    }
+    if (renderData.style !== 'tsx') {
+        removeSync(resolve(componentFolder, `${renderData.bigCamelizeName}.tsx`));
+    }
+    logger.success(`Create ${componentFolderName} component success!`);
+}