add tsx render function example

example/.babelrc

@@ -0,0 +1,8 @@
+{
+ "presets": [
+ ["env", {
+ "modules": false
+ }]
+ ],
+ "plugins": ["transform-vue-jsx","transform-decorators-legacy"]
+}

example/App.vue

@@ -7,20 +7,23 @@
  <p>computed msg: {{computedMsg}}</p>
  <button @click="greet">Greet</button>
  <hello ref="helloComponent"></hello>
+ <World :title="title"/>
  </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,8 @@ export default class App extends Vue {
  // use prop values for initial data
  helloMsg: string = 'Hello, ' + this.propMessage
 
+ title: string = 'tsx render function'
+
  // lifecycle hook
  mounted () {
  this.greet()

example/World.tsx

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import Component from '../lib/index'
+
+@Component({
+ props:{
+ title:{
+ type:String,
+ required:true
+ }
+ }
+})
+export default class World extends Vue {
+ title:string
+ content:string = 'default content'
+ get computedContent () {
+ return 'computed ' + this.content
+ }
+
+ clearContent() {
+ this.content = ''
+ }
+ render(h) {
+ return <div >
+ <h1>{this.title}</h1>
+ <input type="text" value={this.content} onInput={ (evt:Event)=> this.content = (evt.target as HTMLInputElement).value} />
+ <p>content: {this.content} </p>
+ <p>computed content: {this.computedContent} </p>
+ <button onClick={this.clearContent}>Clear content</button>
+ </div>
+ }
+}

example/tsconfig.json

@@ -10,7 +10,8 @@
  "experimentalDecorators": true,
  "strict": true,
  "noUnusedLocals": true,
- "noUnusedParameters": true
+ "noUnusedParameters": true,
+ "jsx": "preserve"
  },
  "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",