feat: jsx support

Author: a145789

.eslintrc

@@ -4,6 +4,7 @@
     "no-console":0,
     "prefer-const":0,
     "quotes":[1,"double"],
+    "no-prototype-builtins":0,
    "vue/no-parsing-error": ["error", {
      "invalid-first-character-of-tag-name": false
    }]

example/vue2/package.json

@@ -6,6 +6,7 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@vue/composition-api": "^1.4.9",
     "vue": "^2.6.14",
     "vue-template-compiler": "^2.6.14"
   },

example/vue2/src/App.vue

@@ -2,9 +2,7 @@
   <div class="container">
     <div>
       <Hi />
-      <p>
-        Welcome to here 🚀 .
-      </p>
+      <Welcome />
       <!--  -->
       <!--  -->
       <!--  -->
@@ -13,11 +11,14 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
 import Hi from "./Hi.vue"
+import Welcome from "./Welcome"
 export default {
+  name: "App",
   components: {
     Hi,
+    Welcome,
   },
 }
 </script>
@@ -34,9 +35,6 @@ export default {
   justify-content: center
 p
   font-size: 18px
+  color: #35495d
   cursor: pointer
-  &:nth-of-type(1)
-    color: #35495d
-  &:nth-of-type(2)
-    color: #fcb80f
 </style>

example/vue2/src/Hi.vue

@@ -1,8 +1,34 @@
 <template>
   <div>
     <h3>Hi</h3>
+    <!--  -->
+    <Render :component="boom" />
   </div>
 </template>
+<script lang="tsx">
+import { defineComponent } from "@vue/composition-api"
+import { CreateElement } from "vue"
+
+export default defineComponent({
+  name: "Hi",
+  components: {
+    Render: {
+      functional: true,
+      props: {
+        component: Function,
+      },
+      render(h: CreateElement, { props }: any) {
+        return props.component(h)
+      },
+    },
+  },
+  setup() {
+    return {
+      boom: () => <h4 style="cursor: pointer;">🎉</h4>,
+    }
+  },
+})
+</script>
 <style lang="sass" scoped>
 h3
   font-size: 26px

example/vue2/src/Welcome.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from "@vue/composition-api"
+
+export default defineComponent({
+  name: "Welcome",
+  setup() {
+    return () => <p style="color: #fcb80f;cursor: pointer;"> Welcome to here 🚀 .</p>
+  },
+})

example/vue2/src/main.ts

@@ -1,6 +1,9 @@
 import Vue from "vue"
+import VueCompositionAPI from "@vue/composition-api"
 import App from "./App.vue"
 
+Vue.use(VueCompositionAPI)
+
 new Vue({
   render: h => h(App),
 }).$mount("#app")

example/vue2/src/shim-tsx.d.ts

@@ -0,0 +1,15 @@
+import { VNode } from "vue"
+import { ComponentRenderProxy } from "@vue/composition-api"
+
+declare global {
+  namespace JSX {
+    interface Element extends VNode {}
+    interface ElementClass extends ComponentRenderProxy {}
+    interface ElementAttributesProperty {
+      $props: any // specify the property name to use
+    }
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

example/vue2/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "strict": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "jsx": "preserve"
+  },
+  "include": ["src"],
+}

example/vue2/vite.config.ts

@@ -4,7 +4,12 @@ import Inspector from "vite-plugin-vue-inspector"
 
 export default defineConfig({
   plugins: [
-    createVuePlugin(),
+    createVuePlugin({
+      jsx: true,
+      jsxOptions: {
+        compositionAPI: true,
+      },
+    }),
     Inspector({
       vue: 2,
     }),

example/vue3/package.json

@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.10.2",
+    "@vitejs/plugin-vue-jsx": "^1.3.8",
     "@vue/compiler-sfc": "^3.2.24",
     "sass": "^1.49.9",
     "typescript": "^4.5.2",