add tsx render function example (#212)

* add tsx render function example

* add jsx typing

*  simplify the render function example

Author: decadef20

example/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["transform-vue-jsx"]
+}

example/App.vue

@@ -7,20 +7,23 @@
     <p>computed msg: {{computedMsg}}</p>
     <button @click="greet">Greet</button>
     <hello ref="helloComponent"></hello>
+    <World  />
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import Component from '../lib/index'
 import Hello from './Hello.vue';
+import World from './World.tsx'
 
 @Component({
   props: {
     propMessage: String
   },
   components: {
-    Hello
+    Hello,
+    World
   }
 })
 export default class App extends Vue {
@@ -33,6 +36,7 @@ export default class App extends Vue {
   // use prop values for initial data
   helloMsg: string = 'Hello, ' + this.propMessage
 
+
   // lifecycle hook
   mounted () {
     this.greet()

example/World.tsx

@@ -0,0 +1,10 @@
+import Vue ,{ CreateElement } from 'vue'
+import Component from '../lib/index'
+
+@Component
+export default class World extends Vue {
+
+  render(h: CreateElement) {
+    return <h1 > tsx render function </h1>
+  }
+}

example/jsx.d.ts

@@ -0,0 +1,10 @@
+import Vue, { VNode } from "vue";
+declare global {
+  namespace JSX {
+    interface Element extends VNode {}
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}

example/tsconfig.json

@@ -10,7 +10,9 @@
     "experimentalDecorators": true,
     "strict": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true
+    "noUnusedParameters": true,
+    "jsx": "react",
+    "jsxFactory": "h"
   },
   "include": [
     "./**/*.ts"

example/webpack.config.js

@@ -5,7 +5,7 @@ module.exports = {
     filename: 'build.js'
   },
   resolve: {
-    extensions: ['.ts', '.js']
+    extensions: ['.ts', '.js','tsx']
   },
   module: {
     rules: [
@@ -17,6 +17,18 @@ module.exports = {
           appendTsSuffixTo: [/\.vue$/]
         }
       },
+      {
+        test: /\.tsx$/,
+        exclude: /node_modules|vue\/src/,
+        loader:[
+          {
+            loader: "babel-loader"
+          },
+          {
+            loader: "ts-loader",
+          }
+        ]
+      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',

package.json

@@ -39,9 +39,13 @@
     "@types/chai": "^4.0.1",
     "@types/mocha": "^2.2.41",
     "babel-core": "^6.25.0",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.1",
+    "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.24.1",
     "chai": "^4.0.2",
     "css-loader": "^0.28.4",