テンプレートを編集

Author: kaorun343

package.json

@@ -18,7 +18,8 @@
     "vue-class-component": "^5.0.0",
     "vue-property-decorator": "^4.0.0",
     "vue-router": "^2.3.0",
-    "vuex": "^2.2.1"
+    "vuex": "^2.2.1",
+    "vuex-class": "^0.1.3"
   },
   "devDependencies": {
     "css-loader": "^0.27.3",

src/Form/Form.template.html renamed to src/Form/Form.html

@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import * as template from './Form.template.html'
+
+import * as Template from './Form.html'
 import Modal from '../modal/modal'
-import { mapActions } from 'vuex'
+import { Action } from 'vuex-class'
 
-@Component(template<Form>({
+@Template
+@Component<Form>({
   components: {
     Modal
   },
@@ -13,14 +15,13 @@ import { mapActions } from 'vuex'
       vm.title = ''
       vm.body = ''
     })
-  },
-  methods: mapActions(['storeMessage'])
-}))
+  }
+})
 export default class Form extends Vue {
   title = ''
   body = ''
 
-  storeMessage: (message: any) => Promise<void>
+  @Action readonly storeMessage: (message: any) => Promise<void>
 
   save() {
     this.storeMessage({ title: this.title, body: this.body }).then(() => {

src/Form/Form.ts

@@ -1,21 +1,22 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import * as template from './Home.template.html'
+import { Getter } from 'vuex-class'
+
+import * as Template from './Home.html'
 import Jumbotron from '../jumbotron/jumbotron'
-import { mapGetters } from 'vuex'
 import { Message } from '../vuex/state'
 
-@Component(template<Home>({
+@Template
+@Component<Home>({
   components: {
     Jumbotron
   },
-  computed: mapGetters(['messages']),
   filters: {
     format(n: number) {
       return new Date(n).toLocaleString()
     }
   }
-}))
+})
 export default class Home extends Vue {
-  messages: Message[]
+  @Getter messages: Message[]
 }

src/Home/Home.template.html renamed to src/Home/Home.html

@@ -1,8 +1,9 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import * as template from './Links.template.html'
+import * as Template from './Links.html'
 
-@Component(template({}))
+@Template
+@Component
 export default class Links extends Vue {
   links = [
     { title: 'vue.js', href: 'https://jp.vuejs.org' },

src/Home/Home.ts

@@ -1,18 +1,19 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import * as template from './Settings.template.html'
-import { mapActions } from 'vuex'
+import { Action } from 'vuex-class'
+
+import * as Template from './Settings.html'
 import Alert from '../alert/alert'
 
-@Component(template({
-  components: { Alert },
-  methods: mapActions(['resetMessages'])
-}))
+@Template
+@Component({
+  components: { Alert }
+})
 export default class Settings extends Vue {
   message = '削除しました'
   alert = false
 
-  resetMessages: () => Promise<void>
+  @Action readonly resetMessages: () => Promise<void>
 
   reset() {
     this.resetMessages().then(() => {

src/Links/Links.template.html renamed to src/Links/Links.html

@@ -1,14 +1,14 @@
 import Vue from 'vue'
-import { Component, prop } from 'vue-property-decorator'
-import * as template from './alert.template.html'
+import Component from 'vue-class-component'
+import { Prop } from 'vue-property-decorator'
+import * as Template from './alert.html'
 
-@Component(template({}))
+@Template
+@Component
 export default class Alert extends Vue {
-  @prop({ type: null })
-  type: string
+  @Prop readonly type: string
 
-  @prop({ type: null })
-  message: string
+  @Prop readonly message: string
 
   get alertType() {
     return `alert-${this.type}`

src/Links/Links.ts

@@ -1,13 +1,15 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import * as template from './index.template.html'
-import router from './router'
 import { mapActions } from 'vuex'
+
+import * as Template from './index.html'
+import router from './router'
 import store from './vuex/store'
 import Navbar from './navbar/navbar'
 import './style.scss'
 
-@Component(template<App>({
+@Template
+@Component<App>({
   components: {
     Navbar
   },
@@ -17,7 +19,7 @@ import './style.scss'
   mounted() {
     this.setMessages()
   }
-}))
+})
 class App extends Vue {
   setMessages: () => Promise<void>
 }

src/Settings/Settings.template.html renamed to src/Settings/Settings.html

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import * as template from './jumbotron.template.html'
+
+import * as Template from './jumbotron.html'
 import { zero } from '../util'
 
 function format(y: number, m: number, d: number) {
@@ -12,7 +13,8 @@ const year = today.getFullYear()
 const month = today.getMonth() + 1
 const date = today.getDate()
 
-@Component(template<Jumbotron>({}))
+@Template
+@Component
 export default class Jumbotron extends Vue {
   today = format(year, month, date)
 

src/Settings/Settings.ts

@@ -1,11 +1,13 @@
 import Vue from 'vue'
-import { Component, prop } from 'vue-property-decorator'
-import * as template from './modal.template.html'
+import Component from 'vue-class-component'
+import { Prop } from 'vue-property-decorator'
 
-@Component(template({}))
+import * as Template from './modal.html'
+
+@Template
+@Component
 export default class Modal extends Vue {
-  @prop({type: null})
-  title: string
+  @Prop readonly title: string
 
   close() {
     this.$emit('close')

src/alert/alert.template.html renamed to src/alert/alert.html

@@ -1,8 +1,9 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import * as template from './navbar.template.html'
+import * as Template from './navbar.html'
 
-@Component(template({}))
+@Template
+@Component
 export default class Navbar extends Vue {
   links = [
     { title: 'ホーム', name: 'home' },

src/alert/alert.ts

@@ -1,8 +1,9 @@
 declare module '*.html' {
-  import Vue from 'vue'
-  import { ComponentOptions } from 'vue'
-
-  var template: <V extends Vue>(options: ComponentOptions<V>) => ComponentOptions<V>
-
-  export = template
+  import Vue = require('vue')
+  interface WithRender {
+    <V extends Vue>(options: Vue.ComponentOptions<V>): Vue.ComponentOptions<V>
+    <V extends typeof Vue>(component: V): V
+  }
+  const withRender: WithRender
+  export = withRender
 }

src/index.template.html renamed to src/index.html

@@ -16,6 +16,7 @@
     "noEmitHelpers": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "emitDecoratorMetadata": true
   }
 }

src/index.ts

@@ -11,7 +11,7 @@ module.exports = {
     loaders: [
       { test: /\.tsx?$/, loader: 'ts-loader' },
       { test: /\.scss$/, loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']) },
-      { test: /\.template\.html$/, loader: 'vue-template-loader' }
+      { test: /\.html$/, loader: 'vue-template-loader', include: /src/ }
     ]
   },
   resolve: {

src/jumbotron/jumbotron.template.html renamed to src/jumbotron/jumbotron.html

@@ -2851,6 +2851,10 @@ vue@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.2.4.tgz#d0a3a050a80a12356d7950ae5a7b3131048209cc"
 
+vuex-class@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/vuex-class/-/vuex-class-0.1.3.tgz#b7550a697f592a0d033c9301621de2ebb035c760"
+
 vuex@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-2.2.1.tgz#a42d0ce18cb0e0359258f84bfd76835ed468c185"