Merge pull request #5 from kevinmarrec/migrate-to-new-specs

Migration to new default NUXT TS specs

Author: husayt

common/api.js common/api.ts

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "nuxt-property-decorator"
+import { Component, Prop, Vue } from "vue-property-decorator"
 
 @Component({})
 export default class Comment extends Vue {

common/cache.js common/cache.ts

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "nuxt-property-decorator"
+import { Component, Prop, Vue } from "vue-property-decorator"
 
 @Component({})
 export default class ItemListNav extends Vue {

components/comment.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "nuxt-property-decorator"
+import { Component, Prop, Vue } from "vue-property-decorator"
 
 import { timeAgo } from "~/plugins/filters"
 

components/item-list-nav.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "nuxt-property-decorator"
+import { Component, Prop, Vue } from "vue-property-decorator"
 
 @Component({})
 export default class Spinner extends Vue {

components/item.vue

@@ -19,15 +19,14 @@
 </template>
 
 <script  lang="ts">
-import { Component, Vue } from "nuxt-property-decorator"
+import { Component, Vue } from "vue-property-decorator"
 
 import { feeds } from "~/common/api"
 
-@Component({})
-export default class Layout extends Vue {
+@Component({
   head() {
     // hack `(process as any)` to wait till this is fixed in Nuxt
-    const host = (process as any).server
+    const host = process.server
       ? this.$ssrContext.req.headers.host
       : window.location.host
 
@@ -38,7 +37,8 @@ export default class Layout extends Vue {
       ]
     }
   }
-
+})
+export default class Layout extends Vue {
   get feeds() {
     return feeds
   }

components/spinner.vue

@@ -1,10 +1,8 @@
 const isDev = process.env.NODE_ENV !== "production"
-import consola from "consola"
 
 export default {
   mode: "spa",
   modern: !isDev,
-  build: { useForkTsChecker: { logger: consola } },
   head: {
     titleTemplate: "Nuxt HN TS | %s",
     meta: [
@@ -53,7 +51,7 @@ export default {
     }
   },
   plugins: ["~/plugins/filters"],
-  serverMiddleware: ["~/common/cache.js"],
+  serverMiddleware: ["~/common/cache"],
   render: {
     http2: {
       push: true

index.d.ts

@@ -15,25 +15,12 @@
     },
     {
       "name": "HG(@husayt)"
+    },
+    {
+      "name": "Kevin Marrec (@kevinmarrec)"
     }
   ],
   "private": true,
-  "babel": {
-    "env": {
-      "test": {
-        "presets": [
-          [
-            "@babel/preset-env",
-            {
-              "targets": {
-                "node": "current"
-              }
-            }
-          ]
-        ]
-      }
-    }
-  },
   "scripts": {
     "dev": "nuxt-ts dev",
     "build": "nuxt-ts build",
@@ -60,29 +47,20 @@
     "@nuxtjs/pwa": "2.6.0",
     "apicache": "1.2.3",
     "express": "4.16.4",
-    "nuxt-property-decorator": "1.3.1",
+    "vue-property-decorator": "^7.3.0",
     "nuxt-ts-edge": "latest"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@types/jest": "^23.3.10",
-    "@types/node": "^10.12.12",
-    "@vue/test-utils": "^1.0.0-beta.27",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "latest",
-    "fork-ts-checker-webpack-plugin": "^0.5.2",
+    "@types/jest": "^23.3.13",
+    "@vue/test-utils": "^1.0.0-beta.28",
     "jest": "^23.6.0",
     "jest-serializer-vue": "^2.0.2",
-    "lodash-es": "4.17.11",
-    "prettier": "^1.15.3",
+    "prettier": "^1.16.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "ts-jest": "^23.10.5",
-    "ts-loader": "5.3.2",
-    "tslint": "^5.12.0",
     "tslint-config-prettier": "^1.17.0",
     "tslint-plugin-prettier": "^2.0.1",
-    "typescript": "^3.2.2",
     "vue-jest": "^3.0.2"
   },
   "jest": {
@@ -96,11 +74,10 @@
       "^@/(.*)$": "<rootDir>/$1"
     },
     "transform": {
-      "^.+\\.js$": "babel-jest",
       ".*\\.(vue)$": "vue-jest",
       "^.+\\.tsx?$": "ts-jest"
     },
-    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.ts$",
     "snapshotSerializers": [
       "jest-serializer-vue"
     ]

jsconfig.json

@@ -16,8 +16,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Watch, Vue } from "nuxt-property-decorator"
-import { Context, Transition, Route } from "index"
+import { Component, Watch, Vue } from "vue-property-decorator"
+import { Transition } from "@nuxt/vue-app-edge"
+import { Route } from "vue-router"
 
 import Item from "~/components/item.vue"
 import ItemListNav from "~/components/item-list-nav.vue"
@@ -29,35 +30,31 @@ import { feeds, validFeeds } from "~/common/api"
     Item,
     ItemListNav,
     LazyWrapper
-  }
-})
-export default class Page extends Vue {
-  displayedPage: number = 1
-  transition:
-    | null
-    | string
-    | Transition
-    | ((to: Route, from: Route) => string) = "slide-right"
-
-  async asyncData({ route }: Context) {
+  },
+  async asyncData({ route }) {
     return {
       displayedPage: Number(route.params.page) || 1
     }
-  }
-
-  validate({ params: { feed } }: Context) {
+  },
+  validate({ params: { feed } }) {
     return validFeeds.includes(feed)
-  }
-
-  fetch({ store, params: { feed, page = 1 } }: Context) {
+  },
+  fetch({ store, params: { feed, page = 1 } }) {
     return store.dispatch("FETCH_FEED", { feed, page })
-  }
-
-  head() {
+  },
+  head(this: Page) {
     return {
       title: feeds[this.$route.params.feed].title
     }
   }
+})
+export default class Page extends Vue {
+  displayedPage: number = 1
+  transition:
+    | null
+    | string
+    | Transition
+    | ((to: Route, from: Route) => string) = "slide-right"
 
   get feed() {
     return this.$route.params.feed

layouts/default.vue

@@ -1,10 +1,9 @@
-import { Vue, Component } from "nuxt-property-decorator"
-import { Context } from "index.d.ts"
-import { validFeeds } from "~/common/api.js"
+import { Vue, Component } from "vue-property-decorator"
+import { validFeeds } from "~/common/api"
 
-@Component({})
-export default class Index extends Vue {
-  fetch({ redirect }: Context) {
+@Component({
+  fetch({ redirect }) {
     redirect("/" + validFeeds[0])
   }
-}
+})
+export default class Index extends Vue {}

nuxt.config.ts

@@ -29,8 +29,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "nuxt-property-decorator"
-import { Context } from "index"
+import { Component, Vue } from "vue-property-decorator"
 
 import Comment from "~/components/comment.vue"
 import LazyWrapper from "~/components/lazy-wrapper.vue"
@@ -39,26 +38,24 @@ import LazyWrapper from "~/components/lazy-wrapper.vue"
   components: {
     Comment,
     LazyWrapper
-  }
-})
-export default class ItemView extends Vue {
-  head() {
+  },
+  head(this: ItemView) {
     return {
       title: this.item.title
     }
+  },
+  fetch({ store, params: { id } }) {
+    return store.dispatch("FETCH_ITEM", { id })
   }
-
+})
+export default class ItemView extends Vue {
   get id() {
     return this.$route.params.id
   }
 
   get item() {
     return this.$store.state.items[this.id]
   }
-
-  fetch({ store, params: { id } }: Context) {
-    return store.dispatch("FETCH_ITEM", { id })
-  }
 }
 </script>
 

package.json

@@ -28,32 +28,29 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "nuxt-property-decorator"
-import { Context } from "index"
+import { Component, Vue } from "vue-property-decorator"
 import LazyWrapper from "~/components/lazy-wrapper.vue"
 
 @Component({
   components: {
     LazyWrapper
-  }
-})
-export default class UserView extends Vue {
-  get user() {
-    return this.$store.state.users[this.$route.params.id]
-  }
-
-  head() {
+  },
+  head(this: UserView) {
     return this.user ? this.user.id : "User not found"
-  }
-
+  },
   fetch({
     store,
     route: {
       params: { id }
     }
-  }: Context) {
+  }) {
     return store.dispatch("FETCH_USER", { id })
   }
+})
+export default class UserView extends Vue {
+  get user() {
+    return this.$store.state.users[this.$route.params.id]
+  }
 }
 </script>
 

pages/_feed/_page.vue

@@ -4,7 +4,7 @@ import Vue from "vue"
 
 import { validFeeds } from "~/common/api"
 import { lazy } from "~/common/utils"
-import { CancelToken } from "axios"
+// import { CancelToken } from "axios"
 const baseUrl = "https://api.hnpwa.com/v0" // "/api"
 
 interface Dictionary<T> {
@@ -117,13 +117,13 @@ const actions: ActionTree<IRootState, any> = {
       prefetch = true
     }
     if (!prefetch) {
-      if (this.feedCancelSource) {
+      if ((this as any).feedCancelSource) {
         ;(this as any).feedCancelSource.cancel(
           "prioritize feed: " + feed + " page: " + page
         )
       }
 
-      this.feedCancelSource = CancelToken.source()
+      // ;(this as any).feedCancelSource = new CancelToken.source()
     }
 
     return lazy(
@@ -135,7 +135,8 @@ const actions: ActionTree<IRootState, any> = {
       () =>
         (this as any).$axios.$get(`${baseUrl}/${feed}/${page}.json`, {
           cancelToken:
-            this.feedCancelSource && (this as any).feedCancelSource.token
+            (this as any).feedCancelSource &&
+            (this as any).feedCancelSource.token
         }),
       (state.feeds[feed][page] || []).map(id => state.items[id])
     )