Rewrite the examples with single file component (vuejs#59)

ktsn · web-flow · commit 12041e2aa019 · 2017-01-19T23:44:32.000+09:00
* rewrite the examples with single file component

* update the link in readme
diff --git a/README.md b/README.md
@@ -22,28 +22,30 @@ Note:
 
 ### Example
 
-Following is the example written in Babel. If you are looking for TypeScript version, [it's in the example directory](example/example.ts).
-
-``` js
+Following is the example written in Babel. If you are looking for TypeScript version, [it's in the example directory](example/App.vue).
+
+``` vue
+<template>
+  <div>
+    <input v-model="msg">
+    <p>prop: {{propMessage}}</p>
+    <p>msg: {{msg}}</p>
+    <p>helloMsg: {{helloMsg}}</p>
+    <p>computed msg: {{computedMsg}}</p>
+    <button @click="greet">Greet</button>
+  </div>
+</template>
+
+<script>
 import Vue from 'vue'
 import Component from 'vue-class-component'
 
 @Component({
   props: {
     propMessage: String
-  },
-  template: `
-    <div>
-      <input v-model="msg">
-      <p>prop: {{propMessage}}</p>
-      <p>msg: {{msg}}</p>
-      <p>helloMsg: {{helloMsg}}</p>
-      <p>computed msg: {{computedMsg}}</p>
-      <button @click="greet">Greet</button>
-    </div>
-  `
+  }
 })
-class App extends Vue {
+export default class App extends Vue {
   // initial data
   msg = 123
 
@@ -65,6 +67,7 @@ class App extends Vue {
     alert('greeting: ' + this.msg)
   }
 }
+</script>
 ```
 
 You may also want to check out the `@prop` and `@watch` decorators provided by [vue-property-decorators](https://github.com/kaorun343/vue-property-decorator).
diff --git a/example/App.vue b/example/App.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <input v-model="msg">
+    <p>prop: {{propMessage}}</p>
+    <p>msg: {{msg}}</p>
+    <p>helloMsg: {{helloMsg}}</p>
+    <p>computed msg: {{computedMsg}}</p>
+    <button @click="greet">Greet</button>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue = require('vue')
+import Component from '../lib/index'
+
+@Component({
+  props: {
+    propMessage: String
+  }
+})
+export default class App extends Vue {
+  propMessage: string
+
+  // inital data
+  msg: number = 123
+
+  // use prop values for initial data
+  helloMsg: string = 'Hello, ' + this.propMessage
+
+  // lifecycle hook
+  mounted () {
+    this.greet()
+  }
+
+  // computed
+  get computedMsg () {
+    return 'computed ' + this.msg
+  }
+
+  // method
+  greet () {
+    alert('greeting: ' + this.msg)
+  }
+}
+</script>
diff --git a/example/example.html b/example/example.html
@@ -5,9 +5,7 @@
     <title></title>
   </head>
   <body>
-    <div id="el">
-      <app prop-message="World!"></app>
-    </div>
+    <div id="app"></div>
     <script src="build.js"></script>
   </body>
 </html>
diff --git a/example/example.ts b/example/example.ts
@@ -1,50 +1,10 @@
 import Vue = require('vue')
-import Component from '../lib/index'
-
-@Component({
-  props: {
-    propMessage: String
-  },
-  template: `
-    <div>
-      <input v-model="msg">
-      <p>prop: {{propMessage}}</p>
-      <p>msg: {{msg}}</p>
-      <p>helloMsg: {{helloMsg}}</p>
-      <p>computed msg: {{computedMsg}}</p>
-      <button @click="greet">Greet</button>
-    </div>
-  `
-})
-class App extends Vue {
-  propMessage: string
-
-  // inital data
-  msg: number = 123
-
-  // use prop values for initial data
-  helloMsg: string = 'Hello, ' + this.propMessage
-
-  // lifecycle hook
-  mounted () {
-    this.greet()
-  }
-
-  // computed
-  get computedMsg () {
-    return 'computed ' + this.msg
-  }
-
-  // method
-  greet () {
-    alert('greeting: ' + this.msg)
-  }
-}
+import App from './App.vue'
 
 // mount
 new Vue({
-  el: '#el',
-  components: {
-    App
-  }
+  el: '#app',
+  render: h => h(App, {
+    props: { propMessage: 'World' }
+  })
 })
diff --git a/example/sfc.d.ts b/example/sfc.d.ts
@@ -0,0 +1,4 @@
+declare module "*.vue" {
+  import Vue = require('vue')
+  export default typeof Vue
+}
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -5,16 +5,24 @@ module.exports = {
     filename: 'build.js'
   },
   resolve: {
-    alias: {
-      vue$: 'vue/dist/vue.common.js'
-    }
+    extensions: ['.ts', '.js']
   },
   module: {
     rules: [
       {
         test: /\.ts$/,
         exclude: /node_modules|vue\/src/,
-        loader: 'ts-loader'
+        loader: 'ts-loader',
+        options: {
+          appendTsSuffixTo: [/\.vue$/]
+        }
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          esModule: true
+        }
       }
     ]
   },
diff --git a/package.json b/package.json
@@ -43,15 +43,18 @@
     "babel-preset-es2015": "^6.18.0",
     "chai": "^3.5.0",
     "chai-spies": "^0.7.1",
+    "css-loader": "^0.26.1",
     "mocha": "^3.1.2",
     "node-libs-browser": "^1.0.0",
     "rimraf": "^2.5.4",
     "rollup": "^0.37.0",
     "rollup-plugin-replace": "^1.1.1",
-    "ts-loader": "^0.9.5",
+    "ts-loader": "^1.3.3",
     "typescript": "^2.0.6",
     "uglify-js": "^2.7.5",
-    "vue": "^2.1.6",
-    "webpack": "^2.1.0-beta.27"
+    "vue": "^2.1.10",
+    "vue-loader": "^10.0.2",
+    "vue-template-compiler": "^2.1.10",
+    "webpack": "^2.2.0"
   }
 }
