diff --git a/example/vue/.gitignore b/example/vue/.gitignore
new file mode 100644
index 00000000..450a0845
--- /dev/null
+++ b/example/vue/.gitignore
@@ -0,0 +1,3 @@
+cjs
+esm
+node_modules
\ No newline at end of file
diff --git a/example/vue/README.md b/example/vue/README.md
new file mode 100644
index 00000000..d01baed3
--- /dev/null
+++ b/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.
+```
diff --git a/example/vue/package.json b/example/vue/package.json
new file mode 100644
index 00000000..171e460f
--- /dev/null
+++ b/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"
+ }
+}
diff --git a/example/vue/src/index.tsx b/example/vue/src/index.tsx
new file mode 100644
index 00000000..80093b27
--- /dev/null
+++ b/example/vue/src/index.tsx
@@ -0,0 +1,8 @@
+import { defineComponent, h } from 'vue';
+
+export default defineComponent({
+ name: 'Login',
+ render() {
+ return
test
;
+ },
+});
diff --git a/example/vue/tsconfig.json b/example/vue/tsconfig.json
new file mode 100644
index 00000000..dfdcd343
--- /dev/null
+++ b/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"]
+ }
+}
diff --git a/package.json b/package.json
index e7bff253..beb0cc65 100644
--- a/package.json
+++ b/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",
diff --git a/packages/tsbb/README.md b/packages/tsbb/README.md
index 3990481b..5d80198e 100644
--- a/packages/tsbb/README.md
+++ b/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
-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.
diff --git a/packages/tsbb/package.json b/packages/tsbb/package.json
index 47daacc6..a89e6205 100644
--- a/packages/tsbb/package.json
+++ b/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",
diff --git a/packages/tsbb/src/babel/index.ts b/packages/tsbb/src/babel/index.ts
index 646b8730..9299914c 100644
--- a/packages/tsbb/src/babel/index.ts
+++ b/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 {
- 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([
diff --git a/packages/tsbb/src/build.ts b/packages/tsbb/src/build.ts
index d0ce4396..6a72d350 100644
--- a/packages/tsbb/src/build.ts
+++ b/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`
diff --git a/packages/tsbb/src/help.ts b/packages/tsbb/src/help.ts
index 5548aedf..1ed75dc6 100644
--- a/packages/tsbb/src/help.ts
+++ b/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.`);