feat: add jsx support (#3)

Author: zjxxxxxxxxx

.github /workflows/ci.yml renamed to .github/workflows/ci.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}}

.github/workflows/release.yml

@@ -128,3 +128,5 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+.DS_Store

.gitignore

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "prettier.enable": false
+}

.vscode/settings.json

@@ -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 `<Component/>`.
+- ✨ JSX support in `.vue`, `.jsx`, `.tsx`.
+- 😃 Supports `Vite`, `Webpack`, `Rspack`, `Vue CLI`, `Rollup`, `esbuild`.
+
+---
+
+sfc without
+
+```html
+<!-- /src/App.vue -->
+<template>
+  <div>hello word</div>
+</template>
+```
+
+with
+
+```html
+<!-- /src/App.vue -->
+<template>
+  <div __source="/src/App.vue:3:3">hello word</div>
+</template>
+```
+
+---
+
+jsx without
+
+```tsx
+// /src/App.vue
+export default App() {
+  return <div>hello word</div>
+}
+```
+
+with
+
+```tsx
+// /src/App.vue
+export default App() {
+  return <div __source="/src/App.vue:3:9">hello word</div>
+}
+```
+
+## 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
+
+<details>
+<summary>Vite</summary><br>
+
+```ts
+// vite.config.ts
+import VueSource from "unplugin-vue-source/vite";
+
+export default defineConfig({
+  plugins: [
+    VueSource({ /* options */ }),
+    // other plugins
+  ],
+});
+```
+
+<br></details>
+
+<details>
+<summary>Rollup</summary><br>
+
+```ts
+// rollup.config.js
+import VueSource from "unplugin-vue-source/rollup";
+
+export default {
+  plugins: [
+    VueSource({ /* options */ }),
+    // other plugins
+  ],
+};
+```
+
+<br></details>
+
+<details>
+<summary>Webpack</summary><br>
+
+```ts
+// webpack.config.js
+module.exports = {
+  plugins: [
+    require("unplugin-vue-source/webpack")({ /* options */ }),
+    // other plugins
+  ],
+};
+```
+
+<br></details>
+
+<details>
+<summary>Rspack</summary><br>
+
+```ts
+// rspack.config.js
+module.exports = {
+  plugins: [
+    require("unplugin-vue-source/rspack")({ /* options */ }),
+    // other plugins
+  ],
+};
+```
+
+<br></details>
+
+<details>
+<summary>Vue CLI</summary><br>
+
+```ts
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      require("unplugin-vue-source/webpack")({ /* options */ }),
+      // other plugins
+    ],
+  },
+};
+```
+
+<br></details>
+
+<details>
+<summary>esbuild</summary><br>
+
+```ts
+// esbuild.config.js
+import { build } from "esbuild";
+import VueSource from "unplugin-vue-source/esbuild";
+
+build({ 
+  plugins: [
+    VueSource({ /* options */ }),
+    // other plugins
+  ],
+});
+```
+
+<br></details>
+ 
+ ## Configuration
+
+The following show the default values of the configuration
+
+```ts
+VueSource({
+  // source root path
+  root: process.cwd(),
+  
+  // generate sourceMap
+  sourceMap: false,
+})
+```

README.md

@@ -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"
   }
 }

examples/rollup/package.json

@@ -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,24 +27,26 @@ export default {
     format: "esm",
   },
   plugins: [
-    VueSource({}),
-    vue({
-      exposeFilename: true,
+    VueSource(),
+    VueJsx({
+      version: 2,
     }),
+    Vue2(),
+    postcss(),
+    
     commonjs(),
     resolve({
       extensions,
     }),
     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,
     }),

examples/rollup/rollup.config.js

@@ -1,11 +1,12 @@
-<script lang="ts">
-import Vue from 'vue';
-import HelloWorld from './components/HelloWorld.vue';
+<script lang="tsx">
+import Vue from "vue";
+import HelloWorld from "./components/HelloWorld";
 
 export default Vue.extend({
   components: {
     HelloWorld,
   },
+
 });
 </script>
 
@@ -19,7 +20,7 @@ export default Vue.extend({
         <img src="../public/vue.svg" class="logo vue" alt="Vue logo" />
       </a>
     </div>
-    <HelloWorld msg="Rollup + Vue2" />
+    <HelloWorld msg="Roolup + Vue" />
   </div>
 </template>
 
@@ -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);
 }

examples/rollup/src/App.vue

@@ -0,0 +1,17 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: { msg: String },
+  render() {
+    return (
+      <div>
+        <h1>{this.msg}</h1>
+        <p>
+          <a target="_black" href="https://github.com/zjxxxxxxxxx/unplugin-vue-source">
+            Github
+          </a>
+        </p>
+      </div>
+    );
+  },
+})