feat: Add --use-vue option.

example/vue/.gitignore

@@ -0,0 +1,3 @@
+cjs
+esm
+node_modules

example/vue/README.md

@@ -0,0 +1,13 @@
+Vue Example
+---
+
+## Quick Start
+
+```shell
+$ npx create-kkt my-app -e vue
+cd my-app
+$ npm install
+
+$ npm run watch # Listen compile .ts files.
+$ npm run build # compile .ts files.
+```

example/vue/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@template/vue",
+  "private": true,
+  "version": "3.4.4",
+  "description": "",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "author": "jaywcjlove",
+  "license": "ISC",
+  "scripts": {
+    "watch": "tsbb watch --use-vue",
+    "build": "tsbb build --use-vue"
+  },
+  "dependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "tsbb": "^3.4.4"
+  }
+}

example/vue/src/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent, h } from 'vue';
+
+export default defineComponent({
+  name: 'Login',
+  render() {
+    return <div>test</div>;
+  },
+});

example/vue/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "strictNullChecks": true,
+    "jsx": "react",
+    "baseUrl": ".",
+    "outDir": "cjs",
+    "noEmit": false,
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "module": "ES6",
+    "moduleResolution": "Node",
+    "declaration": true,
+    "forceConsistentCasingInFileNames": true,
+    "composite": true,
+    "target": "ES6",
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"]
+  }
+}

package.json

@@ -15,6 +15,8 @@
     "test:basic": "lerna exec \"npm run coverage\" --scope @template/basic",
     "build:umd": "lerna exec \"npm run build\" --scope @template/umd",
     "watch:umd": "lerna exec \"npm run watch\" --scope @template/umd",
+    "build:vue": "lerna exec \"npm run build\" --scope @template/vue",
+    "watch:vue": "lerna exec \"npm run watch\" --scope @template/vue",
     "build:express": "lerna exec \"npm run build\" --scope @template/express",
     "watch:express": "lerna exec \"npm run watch\" --scope @template/express",
     "build:express-typeorm": "lerna exec \"npm run build\" --scope @template/express-typeorm",

packages/tsbb/README.md

@@ -33,7 +33,7 @@ TSBB is a zero-config CLI that helps you develop, test, and publish modern TypeS
 - ♻️ Recompile the code when project files get added, removed or modified.  
 - 📚 Readable source code that encourages learning and contribution  
 - 🚀 Faster, Faster compilation speed.  
-- ⚛️ Support [react](https://reactjs.org/) component compilation.  
+- ⚛️ Support [react](https://reactjs.org/), [vue 3](https://vuejs.org/) component compilation.  
 - ⛑ [Jest](https://jestjs.io/) test runner setup with defaults `tsbb test`  
 - 🔥 Zero-config, single dependency.  
 
@@ -82,6 +82,7 @@ You can download the following examples directly. [Download page](https://jaywcj
 - [**`react-component-tsx`**](https://github.com/jaywcjlove/tsbb/tree/master/example/react-component-tsx) - The react component and website base application example.
 - [**`transform-typescript`**](https://github.com/jaywcjlove/tsbb/tree/master/example/transform-typescript) - Reconfigure the babel configuration example.
 - [**`umd`**](https://github.com/jaywcjlove/tsbb/tree/master/example/umd) - umd bundle example.
+- [**`vue 3`**](https://github.com/jaywcjlove/tsbb/tree/master/example/vue) - To add Vue JSX support.
 
 ## Command Help
 
@@ -93,7 +94,7 @@ Below is a help of commands you might find useful.
 ▶ tsbb --help
 
 Usage: tsbb <command>
-Version 3.0.0-rc.14
+Version 3.4.4
 
 Commands:
 
@@ -121,6 +122,7 @@ Examples:
   $ tsbb build                           Build your project.
   $ tsbb build --entry src/index.ts      Specify the entry directory.
   $ tsbb build --esm ./es                Output directory.
+  $ tsbb build --use-vue                 To add Vue JSX support.
   $ tsbb watch --disable-babel-option    Disable Babel Option.
   $ tsbb watch --disable-babel           Disable Babel.
   $ tsbb watch --cjs ./cjs               Watch Output directory.

packages/tsbb/package.json

@@ -41,6 +41,7 @@
     "@types/semver": "7.3.9",
     "@types/yargs": "17.0.5",
     "@types/yargs-parser": "20.2.1",
+    "@vue/babel-plugin-jsx": "1.1.1",
     "babel-plugin-add-module-exports": "1.0.4",
     "babel-plugin-transform-remove-imports": "1.7.0",
     "babel-plugin-transform-rename-import": "2.3.0",

packages/tsbb/src/babel/index.ts

@@ -13,7 +13,7 @@ interface TransformBabelFileResult extends BabelFileResult {
  * @param filename `/basic/src/utils/a/a.ts`
  */
 export function transform(filename: string, options?: TransformHandleOptions): Promise<TransformBabelFileResult> {
-  const { cjs, esm, entryDir, disableBabelOption, envName } = options;
+  const { cjs, esm, entryDir, disableBabelOption, envName, useVue } = options;
   const outputDir = filename.replace(entryDir, cjs || esm);
   const sourceFileName = path.join(
     path.relative(path.dirname(outputDir), path.dirname(filename)),
@@ -120,6 +120,9 @@ export function transform(filename: string, options?: TransformHandleOptions): P
        */
       (transformRuntime as any).useESModules = !semver.gte(runtimeVersion, '7.13.0');
     }
+    if (useVue) {
+      babelOptions.plugins.push(require('@vue/babel-plugin-jsx').default);
+    }
     babelOptions.plugins.push([require('@babel/plugin-transform-runtime').default, transformRuntime]);
     babelOptions.plugins.push([require('@babel/plugin-proposal-class-properties').default, { loose: true }]);
     babelOptions.plugins.push([

packages/tsbb/src/build.ts

@@ -19,6 +19,11 @@ export interface BuildOptions extends Arguments {
    * > __Only allowed in Babel's programmatic options__
    */
   envName?: string;
+  /**
+   * To add Vue JSX support.
+   * @default false
+   */
+  useVue?: boolean;
   /**
    * Output CJS directory.
    * @example `--no-cjs`

packages/tsbb/src/help.ts

@@ -32,6 +32,7 @@ export function help() {
   console.log(`   $\x1b[35;1m tsbb\x1b[0m build                           Build your project.`);
   console.log(`   $\x1b[35;1m tsbb\x1b[0m build --entry src/index.ts      Specify the entry directory.`);
   console.log(`   $\x1b[35;1m tsbb\x1b[0m build --esm ./es                Output directory.`);
+  console.log(`   $\x1b[35;1m tsbb\x1b[0m build --use-vue                 To add Vue JSX support.`);
   console.log(`   $\x1b[35;1m tsbb\x1b[0m watch --disable-babel-option    Disable Babel Option.`);
   console.log(`   $\x1b[35;1m tsbb\x1b[0m watch --disable-babel           Disable Babel.`);
   console.log(`   $\x1b[35;1m tsbb\x1b[0m watch --cjs ./cjs               Watch Output directory.`);