From 0d0da479e228f5e521c76d7f7ef0db4c998853aa Mon Sep 17 00:00:00 2001 From: zjxxxxxxxxx <954270063@qq.com> Date: Sun, 17 Sep 2023 20:55:48 +0800 Subject: [PATCH] feat: add jsx support --- {.github => .github}/workflows/ci.yml | 0 .github/workflows/release.yml | 24 + .gitignore | 2 + .vscode/settings.json | 4 + README.md | 198 ++- examples/rollup/package.json | 5 +- examples/rollup/rollup.config.js | 17 +- examples/rollup/src/App.vue | 11 +- examples/rollup/src/components/HelloWorld.tsx | 17 + examples/rollup/src/components/HelloWorld.vue | 33 - examples/rollup/src/components/Notes.vue | 22 - .../rollup/src/components/tree/SubTree1.vue | 14 - .../rollup/src/components/tree/SubTree2.vue | 16 - .../rollup/src/components/tree/SubTree3.vue | 9 - examples/rollup/src/components/tree/index.vue | 15 - examples/vite/package.json | 3 +- examples/vite/src/App.vue | 4 +- examples/vite/src/components/HelloWorld.tsx | 12 + examples/vite/src/components/HelloWorld.vue | 22 - examples/vite/src/components/Notes.vue | 13 - .../vite/src/components/tree/SubTree1.vue | 7 - .../vite/src/components/tree/SubTree2.vue | 7 - .../vite/src/components/tree/SubTree3.vue | 3 - examples/vite/src/components/tree/index.vue | 11 - examples/vite/vite.config.ts | 8 +- examples/webpack/package.json | 5 +- examples/webpack/src/App.vue | 6 +- .../webpack/src/components/HelloWorld.tsx | 12 + .../webpack/src/components/HelloWorld.vue | 22 - examples/webpack/src/components/Notes.vue | 13 - .../webpack/src/components/tree/SubTree1.vue | 7 - .../webpack/src/components/tree/SubTree2.vue | 7 - .../webpack/src/components/tree/SubTree3.vue | 3 - .../webpack/src/components/tree/index.vue | 11 - examples/webpack/vue.config.js | 6 +- package.json | 17 +- pnpm-lock.yaml | 1190 ++++++----------- src/core/filter_ID.ts | 26 + src/core/index.ts | 28 +- src/core/parse_ID.ts | 31 +- src/core/transform_JSX.ts | 81 +- src/core/transform_SFC.ts | 60 +- src/types.ts | 10 +- tsconfig.json | 2 +- tsup.config.ts | 7 + 45 files changed, 961 insertions(+), 1060 deletions(-) rename {.github => .github}/workflows/ci.yml (100%) create mode 100644 .github/workflows/release.yml create mode 100644 .vscode/settings.json create mode 100644 examples/rollup/src/components/HelloWorld.tsx delete mode 100644 examples/rollup/src/components/HelloWorld.vue delete mode 100644 examples/rollup/src/components/Notes.vue delete mode 100644 examples/rollup/src/components/tree/SubTree1.vue delete mode 100644 examples/rollup/src/components/tree/SubTree2.vue delete mode 100644 examples/rollup/src/components/tree/SubTree3.vue delete mode 100644 examples/rollup/src/components/tree/index.vue create mode 100644 examples/vite/src/components/HelloWorld.tsx delete mode 100644 examples/vite/src/components/HelloWorld.vue delete mode 100644 examples/vite/src/components/Notes.vue delete mode 100644 examples/vite/src/components/tree/SubTree1.vue delete mode 100644 examples/vite/src/components/tree/SubTree2.vue delete mode 100644 examples/vite/src/components/tree/SubTree3.vue delete mode 100644 examples/vite/src/components/tree/index.vue create mode 100644 examples/webpack/src/components/HelloWorld.tsx delete mode 100644 examples/webpack/src/components/HelloWorld.vue delete mode 100644 examples/webpack/src/components/Notes.vue delete mode 100644 examples/webpack/src/components/tree/SubTree1.vue delete mode 100644 examples/webpack/src/components/tree/SubTree2.vue delete mode 100644 examples/webpack/src/components/tree/SubTree3.vue delete mode 100644 examples/webpack/src/components/tree/index.vue create mode 100644 src/core/filter_ID.ts diff --git a/.github /workflows/ci.yml b/.github/workflows/ci.yml similarity index 100% rename from .github /workflows/ci.yml rename to .github/workflows/ci.yml diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 0000000..f1db389 --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,24 @@ +name: Release + +on: + push: + tags: + - 'v*' + +jobs: + release: + runs-on: ubuntu-latest + permissions: + contents: write + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + + - uses: actions/setup-node@v3 + with: + node-version: lts/* + + - run: npx changelogithub + env: + GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} \ No newline at end of file diff --git a/.gitignore b/.gitignore index c6bba59..f3f691e 100644 --- a/.gitignore +++ b/.gitignore @@ -128,3 +128,5 @@ dist .yarn/build-state.yml .yarn/install-state.gz .pnp.* + +.DS_Store \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..5cc1fb1 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib", + "prettier.enable": false +} diff --git a/README.md b/README.md index 4049690..c2e3514 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,198 @@ # unplugin-vue-source -Add a __source prop to all Elements + +Add a \_\_source prop to all Elements. + +- 🌈 Supports `Vue2` and `Vue3`. +- 🪐 Support add to ``. +- ✨ JSX support in `.vue`, `.jsx`, `.tsx`. +- 😃 Supports `Vite`, `Webpack`, `Rspack`, `Vue CLI`, `Rollup`, `esbuild`. + +--- + +sfc without + +```html + + +``` + +with + +```html + + +``` + +--- + +jsx without + +```tsx +// /src/App.vue +export default App() { + return
hello word
+} +``` + +with + +```tsx +// /src/App.vue +export default App() { + return
hello word
+} +``` + +## Install + +```bash +npm i -D unplugin-vue-source +``` + +## Vue2 + +```ts +// main.ts +import Vue from 'vue'; +import VueSource from "unplugin-vue-source/vue"; +import App from "./App.vue"; + +Vue.use(VueSource); + +new Vue({ + el: "#app", + render: (h) => h(App), +}); +``` + +## Vue3 + +```ts +// main.ts +import { createApp } from 'vue'; +import VueSource from "unplugin-vue-source/vue"; +import App from "./App.vue"; + +const app = createApp(App); +app.use(VueSource); +app.mount("#app"); +``` + +## Plugins + +
+Vite
+ +```ts +// vite.config.ts +import VueSource from "unplugin-vue-source/vite"; + +export default defineConfig({ + plugins: [ + VueSource({ /* options */ }), + // other plugins + ], +}); +``` + +
+ +
+Rollup
+ +```ts +// rollup.config.js +import VueSource from "unplugin-vue-source/rollup"; + +export default { + plugins: [ + VueSource({ /* options */ }), + // other plugins + ], +}; +``` + +
+ +
+Webpack
+ +```ts +// webpack.config.js +module.exports = { + plugins: [ + require("unplugin-vue-source/webpack")({ /* options */ }), + // other plugins + ], +}; +``` + +
+ +
+Rspack
+ +```ts +// rspack.config.js +module.exports = { + plugins: [ + require("unplugin-vue-source/rspack")({ /* options */ }), + // other plugins + ], +}; +``` + +
+ +
+Vue CLI
+ +```ts +// vue.config.js +module.exports = { + configureWebpack: { + plugins: [ + require("unplugin-vue-source/webpack")({ /* options */ }), + // other plugins + ], + }, +}; +``` + +
+ +
+esbuild
+ +```ts +// esbuild.config.js +import { build } from "esbuild"; +import VueSource from "unplugin-vue-source/esbuild"; + +build({ + plugins: [ + VueSource({ /* options */ }), + // other plugins + ], +}); +``` + +
+ + ## Configuration + +The following show the default values of the configuration + +```ts +VueSource({ + // source root path + root: process.cwd(), + + // generate sourceMap + sourceMap: false, +}) +``` \ No newline at end of file diff --git a/examples/rollup/package.json b/examples/rollup/package.json index 46e990b..166c236 100644 --- a/examples/rollup/package.json +++ b/examples/rollup/package.json @@ -20,8 +20,9 @@ "rollup-plugin-live-server": "^2.0.0", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-svg": "^2.0.0", - "rollup-plugin-vue": "^5.0.0", "typescript": "^2.2.0", - "unplugin-vue-source": "workspace:*" + "unplugin-vue-jsx": "^0.2.2", + "unplugin-vue-source": "workspace:*", + "unplugin-vue2": "^0.1.1" } } diff --git a/examples/rollup/rollup.config.js b/examples/rollup/rollup.config.js index f1f85ee..4b35f0c 100644 --- a/examples/rollup/rollup.config.js +++ b/examples/rollup/rollup.config.js @@ -4,9 +4,10 @@ import babel from "@rollup/plugin-babel"; import replace from "@rollup/plugin-replace"; import postcss from "rollup-plugin-postcss"; import svg from "rollup-plugin-svg"; -import vue from "rollup-plugin-vue"; -import { liveServer } from "rollup-plugin-live-server"; +import Vue2 from "unplugin-vue2/rollup"; +import VueJsx from "unplugin-vue-jsx/rollup"; import VueSource from "unplugin-vue-source/rollup"; +import { liveServer } from "rollup-plugin-live-server"; const extensions = [ ".js", @@ -26,10 +27,13 @@ export default { format: "esm", }, plugins: [ - VueSource({}), - vue({ - exposeFilename: true, + VueSource(), + VueJsx({ + version: 2, }), + Vue2(), + postcss(), + commonjs(), resolve({ extensions, @@ -37,13 +41,12 @@ export default { replace({ preventAssignment: true, "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV), - }), + }), babel({ babelHelpers: "bundled", extensions, presets: ["@babel/preset-env", "@babel/preset-typescript"], }), - postcss(), svg({ base64: true, }), diff --git a/examples/rollup/src/App.vue b/examples/rollup/src/App.vue index 17dd771..546cd87 100644 --- a/examples/rollup/src/App.vue +++ b/examples/rollup/src/App.vue @@ -1,11 +1,12 @@ - @@ -19,7 +20,7 @@ export default Vue.extend({ - + @@ -30,9 +31,11 @@ export default Vue.extend({ will-change: filter; transition: filter 300ms; } + .logo:hover { filter: drop-shadow(0 0 2em #646cffaa); } + .logo.vue:hover { filter: drop-shadow(0 0 2em #42b883aa); } diff --git a/examples/rollup/src/components/HelloWorld.tsx b/examples/rollup/src/components/HelloWorld.tsx new file mode 100644 index 0000000..15a7bea --- /dev/null +++ b/examples/rollup/src/components/HelloWorld.tsx @@ -0,0 +1,17 @@ +import { defineComponent } from "vue"; + +export default defineComponent({ + props: { msg: String }, + render() { + return ( +
+

{this.msg}

+

+ + Github + +

+
+ ); + }, +}) \ No newline at end of file diff --git a/examples/rollup/src/components/HelloWorld.vue b/examples/rollup/src/components/HelloWorld.vue deleted file mode 100644 index 507c268..0000000 --- a/examples/rollup/src/components/HelloWorld.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - - - diff --git a/examples/rollup/src/components/Notes.vue b/examples/rollup/src/components/Notes.vue deleted file mode 100644 index 8f847fd..0000000 --- a/examples/rollup/src/components/Notes.vue +++ /dev/null @@ -1,22 +0,0 @@ - - - diff --git a/examples/rollup/src/components/tree/SubTree1.vue b/examples/rollup/src/components/tree/SubTree1.vue deleted file mode 100644 index a1a7eb5..0000000 --- a/examples/rollup/src/components/tree/SubTree1.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/examples/rollup/src/components/tree/SubTree2.vue b/examples/rollup/src/components/tree/SubTree2.vue deleted file mode 100644 index 41003fc..0000000 --- a/examples/rollup/src/components/tree/SubTree2.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - diff --git a/examples/rollup/src/components/tree/SubTree3.vue b/examples/rollup/src/components/tree/SubTree3.vue deleted file mode 100644 index 12e7863..0000000 --- a/examples/rollup/src/components/tree/SubTree3.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/examples/rollup/src/components/tree/index.vue b/examples/rollup/src/components/tree/index.vue deleted file mode 100644 index 1c64871..0000000 --- a/examples/rollup/src/components/tree/index.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/examples/vite/package.json b/examples/vite/package.json index 9be098d..75a66c2 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -11,9 +11,10 @@ "vue": "^3.3.4" }, "devDependencies": { - "unplugin-vue-source": "workspace:*", "@vitejs/plugin-vue": "^4.2.3", "typescript": "^5.0.2", + "unplugin-vue-jsx": "^0.2.2", + "unplugin-vue-source": "workspace:*", "vite": "^4.4.5" } } diff --git a/examples/vite/src/App.vue b/examples/vite/src/App.vue index 6f2ebb1..e408a33 100644 --- a/examples/vite/src/App.vue +++ b/examples/vite/src/App.vue @@ -1,5 +1,5 @@ -