Pure Typescript component

package.json

@@ -6,6 +6,7 @@
   "main": "index.js",
   "scripts": {
     "build": "webpack",
+    "dev": "webpack-dev-server",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
@@ -22,10 +23,14 @@
   },
   "devDependencies": {
     "css-loader": "^0.28.1",
-    "ts-loader": "^2.0.3",
+    "fork-ts-checker-webpack-plugin": "^0.2.9",
+    "hash-sum": "^1.0.2",
+    "ts-loader": "^3.2.0",
     "typescript": "^2.3.2",
-    "vue-loader": "^12.0.3",
+    "vue-hot-reload-api": "^2.2.4",
+    "vue-loader": "^13.5.0",
     "vue-template-compiler": "^2.5.2",
-    "webpack": "^2.5.0"
+    "webpack": "^3.8.1",
+    "webpack-dev-server": "^2.9.5"
   }
 }

src/components/HelloTs.ts

@@ -0,0 +1,29 @@
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+@Component({
+  template: `
+  <div>
+    <div class="greeting">Hello {{name}}{{exclamationMarks}}</div>
+    <button @click="decrement">-</button>
+    <button @click="increment">+</button>
+  </div>`
+})
+export default class HelloTs extends Vue {
+  @Prop() name: string;
+  @Prop() initialEnthusiasm: number;
+
+  enthusiasm = this.initialEnthusiasm;
+
+  increment() {
+    this.enthusiasm++;
+  }
+  decrement() {
+    if (this.enthusiasm > 1) {
+      this.enthusiasm--;
+    }
+  }
+
+  get exclamationMarks(): string {
+    return Array(this.enthusiasm + 1).join('!');
+  }
+}

src/index.ts

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import HelloComponent from "./components/Hello.vue";
 import HelloDecoratorComponent from "./components/HelloDecorator.vue";
+import HelloTsComponent from "./components/HelloTs";
 
 let v = new Vue({
     el: "#app",
@@ -11,11 +12,14 @@ let v = new Vue({
         <hello-component :name="name" :initialEnthusiasm="5" />
         <h1>Hello Decorator Component</h1>
         <hello-decorator-component :name="name" :initialEnthusiasm="5" />
-        </div>
+        <h1>Hello Typescript only</h1>
+        <hello-ts-component :name="name" :initialEnthusiasm="5" />
+    </div>
     `,
     data: { name: "World" },
     components: {
         HelloComponent,
-        HelloDecoratorComponent
+        HelloDecoratorComponent,
+        HelloTsComponent
     }
 });

tsconfig.json

@@ -8,7 +8,7 @@
         "target": "es5",
         "experimentalDecorators": true
     },
-    "include": [
-        "./src/**/*"
+    "files": [
+        "./src/index.ts"
     ]
 }

vue-ts-loader.js

@@ -0,0 +1,37 @@
+module.exports = function (content) {
+  this.cacheable()
+  var isProduction = this.minimize || process.env.NODE_ENV === 'production'
+  var hash = require('hash-sum')
+  var cache = Object.create(null)
+
+  function genId (file) {
+    return cache[file] || (cache[file] = hash(file))
+  }
+
+  if (!isProduction) {
+    var filePath = this.resourcePath
+    var moduleId = genId(filePath)
+    var regex = new RegExp(/(\S+) = __decorate\(\[\s+Component/gi)
+    var matches = regex.exec(content)
+    if (matches !== null) {
+      content += `
+        /* hot reload */
+        ${matches[1]}.options.__file = '${filePath}'
+        if (module.hot) {(function () {
+          var hotApi = require('vue-hot-reload-api')
+          hotApi.install(require('vue'), false)
+          if (!hotApi.compatible) return
+          module.hot.accept()
+          if (!module.hot.data) {
+            console.log('data defined')
+            hotApi.createRecord('${moduleId}', ${matches[1]})
+          } else {
+            console.log('data already')
+            hotApi.reload('${moduleId}', ${matches[1]})
+          }
+        })()}
+      `
+    }
+  }
+  return content
+}

webpack.config.js

@@ -1,6 +1,6 @@
-
 var path = require('path')
 var webpack = require('webpack')
+var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 
 module.exports = {
   entry: './src/index.ts',
@@ -20,18 +20,25 @@ module.exports = {
             // the "scss" and "sass" values for the lang attribute to the right configs here.
             // other preprocessors should work out of the box, no loader config like this necessary.
             'scss': 'vue-style-loader!css-loader!sass-loader',
-            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
+            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
           }
-          // other vue-loader options go here
         }
       },
       {
         test: /\.tsx?$/,
-        loader: 'ts-loader',
-        exclude: /node_modules/,
-        options: {
-          appendTsSuffixTo: [/\.vue$/],
-        }
+        use: [
+          {
+            loader: path.resolve('./vue-ts-loader.js')
+          },
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              appendTsSuffixTo: [/\.vue$/]
+            }
+          }
+        ],
+        exclude: /node_modules/
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
@@ -50,7 +57,8 @@ module.exports = {
   },
   devServer: {
     historyApiFallback: true,
-    noInfo: true
+    noInfo: true,
+    hot: true
   },
   performance: {
     hints: false
@@ -75,6 +83,13 @@ if (process.env.NODE_ENV === 'production') {
     }),
     new webpack.LoaderOptionsPlugin({
       minimize: true
-    })
+    }),
+    new ForkTsCheckerWebpackPlugin()
+  ])
+} else {
+  module.exports.plugins = (module.exports.plugins || []).concat([
+    new webpack.NamedModulesPlugin(),
+    new webpack.HotModuleReplacementPlugin()
   ])
+  // module.exports.entry = ['webpack-dev-server/client', module.exports.entry]
 }