Feature/typescript

.eslintrc.js

@@ -5,10 +5,11 @@ module.exports = {
     node: true
   },
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@typescript-eslint/parser'
   },
   extends: [
     'plugin:vue/essential',
+    '@nuxtjs/eslint-config-typescript'
   ],
   plugins: [
     'vue',

components/NewsList.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <paginate-links for="lists" @change="onPageChange" :show-step-links="false"></paginate-links>
+    <paginate-links for="lists" :show-step-links="false" @change="onPageChange" />
     <paginate tag="nav" name="lists" class="news-list" :list="lists" :per="20">
       <ul>
         <template v-for="list in paginated('lists')">
@@ -13,9 +13,10 @@
               target="_blank"
               rel="noopener"
             >
-              <span v-if="list.attachments[0].ts" class="off-screen">
-                {{ unix2ymd (list.attachments[0].ts) }}
-              </span>
+              <span
+                v-if="list.attachments[0].ts"
+                class="off-screen"
+              >{{ unix2ymd (list.attachments[0].ts) }}</span>
               {{ emoji(textRender(list.attachments[0].text)) }}
             </a>
             <!-- title response -->
@@ -26,9 +27,10 @@
               target="_blank"
               rel="noopener"
             >
-              <span v-if="list.attachments[0].ts" class="off-screen">
-                {{ unix2ymd (list.attachments[0].ts) }}
-              </span>
+              <span
+                v-if="list.attachments[0].ts"
+                class="off-screen"
+              >{{ unix2ymd (list.attachments[0].ts) }}</span>
               {{ emoji(list.attachments[0].title) }}
             </a>
           </li>
@@ -38,48 +40,56 @@
   </div>
 </template>
 
-<script>
-import axios from "axios";
-import emoji from "node-emoji";
-import { TOKEN } from "~/static/config.js";
-export default {
+<script lang="ts">
+import Vue from 'vue'
+import emoji from 'node-emoji'
+
+export default Vue.extend({
   props: {
-    data: Array,
+    data: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
   },
-  data() {
+  data () {
     return {
       lists: this.data,
-      paginate: ["lists"],
-    };
+      paginate: ['lists']
+    }
   },
   methods: {
-    textRender(text) {
-      if (text.indexOf("Reading... ") != -1) {
-        const mystr = text.split("Reading... ").join("");
-        return mystr.replace(/^<[^>]h>|<[^>]*>$/g, "");
-      } else if (text.indexOf("Reading… ") != -1) {
-        const mystr = text.split("Reading… ").join("");
-        return mystr.replace(/^<[^>]h>|<[^>]*>$/g, "");
+    textRender (text: string) {
+      if (text.includes('Reading... ')) {
+        const mystr = text.split('Reading... ').join('')
+        return mystr.replace(/^<[^>]h>|<[^>]*>$/g, '')
+      } else if (text.includes('Reading… ')) {
+        const mystr = text.split('Reading… ').join('')
+        return mystr.replace(/^<[^>]h>|<[^>]*>$/g, '')
       }
     },
-    urlRender(text) {
-      return text.match(/ <([^\s]+)/)[1].slice(0, -1);
-    },
-    emoji(text) {
-      return emoji.emojify(text);
+    urlRender (text: string) {
+      if (text === null) {
+        return
+      }
+      return text.match(/ <([^\s]+)/)![1].slice(0, -1)
     },
-    onPageChange() {
-      document.getElementsByClassName("news-list")[0].scrollTop = 0;
+    emoji (text: string) {
+      return emoji.emojify(text)
     },
-    unix2ymd(intTime) {
-      const d = new Date(intTime * 1000);
-      const year = d.getFullYear();
-      const month = ("0" + (d.getMonth() + 1)).slice(-2);
-      const day = ("0" + d.getDate()).slice(-2);
-      return year + "-" + month + "-" + day;
+    onPageChange ():void {
+      document.getElementsByClassName('news-list')[0].scrollTop = 0
     },
+    unix2ymd (intTime: number) {
+      const d = new Date(intTime * 1000)
+      const year = d.getFullYear()
+      const month = ('0' + (d.getMonth() + 1)).slice(-2)
+      const day = ('0' + d.getDate()).slice(-2)
+      return year + '-' + month + '-' + day
+    }
   }
-};
+})
 </script>
 
 <style lang="scss">
@@ -128,8 +138,8 @@ export default {
   li.left-arrow button,
   li.right-arrow button {
     color: #fff;
-    border: 1px solid #032F63;
-    background-color: #032F63;
+    border: 1px solid #032f63;
+    background-color: #032f63;
     opacity: 1;
   }
   li button:focus {
@@ -173,8 +183,8 @@ export default {
   }
   a:hover,
   a:focus {
-    background-color: #032F63;
-    border: 1px solid #032F63;
+    background-color: #032f63;
+    border: 1px solid #032f63;
     color: #fff;
   }
   a:focus {
@@ -186,8 +196,8 @@ export default {
   }
   a:visited:hover,
   a:visited:focus {
-    background-color: #032F63;
-    border: 1px solid #032F63;
+    background-color: #032f63;
+    border: 1px solid #032f63;
     color: #fff;
   }
 }

layouts/default.vue

@@ -1,19 +1,9 @@
 <template>
   <div>
-    <nuxt/>
+    <nuxt />
   </div>
 </template>
 
-<script>
-export default {
-  mounted() {
-    if((new Date()).getHours() >= 21 || (new Date()).getHours() < 6 ) {
-      document.body.className += "night-mode";
-    }
-  },
-}
-</script>
-
 <style>
 html {
   font : inherit;
@@ -29,13 +19,4 @@ html, body {
 *, *:before, *:after {
   box-sizing: border-box;
 }
-/* .night-mode {
-  background-color: #fff;
-  animation: night 2s ease 0s 1 normal;
-  animation-fill-mode: forwards;
-}
-@keyframes night {
-  0% {filter:invert(0);}
-  100% {filter:invert(100);}
-} */
 </style>

nuxt.config.js → nuxt.config.ts

@@ -1,4 +1,7 @@
-module.exports = {
+import { Configuration } from '@nuxt/types'
+
+const nuxtConfig: Configuration = {
+  mode: 'universal',
   head: {
     title: 'READING...',
     htmlAttrs: {
@@ -7,19 +10,24 @@ module.exports = {
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: '@yamanoku Reading News List' },
-      { hid: 'og:image', name: 'og:image', content: 'https://yamanoku.net/reading/icon.png' },
+      {
+        hid: 'description',
+        name: 'description',
+        content: '@yamanoku Reading News List'
+      },
+      {
+        hid: 'og:image',
+        name: 'og:image',
+        content: 'https://yamanoku.net/reading/icon.png'
+      }
     ],
-    link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
-    ]
+    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
   },
-  css: [
-    'modern-normalize'
-  ],
+  css: ['modern-normalize'],
   build: {
-    extend (config, { isDev }) {
-      if (isDev && process.client) {
+    extend (config, ctx) {
+      if (ctx.isDev && ctx.isClient) {
+        if (!config.module) { return }
         config.module.rules.push({
           enforce: 'pre',
           test: /\.(js|vue)$/,
@@ -28,14 +36,21 @@ module.exports = {
         })
       }
     },
-    quiet: false,
+    quiet: false
   },
-  plugins: ['~/plugins/vue-paginate'],
-  modules: [
-    '@nuxtjs/pwa',
+  buildModules: [
+    [
+      '@nuxt/typescript-build',
+      {
+        typeCheck: true,
+        ignoreNotFoundWarnings: true
+      }
+    ]
   ],
+  plugins: ['~/plugins/vue-paginate'],
+  modules: ['@nuxtjs/pwa'],
   workbox: {
-    dev: true,
+    dev: true
   },
   manifest: {
     name: 'READING...',
@@ -47,5 +62,7 @@ module.exports = {
     lang: 'en',
     theme_color: '#f9f9f9',
     background_color: '#f9f9f9'
-  },
+  }
 }
+
+module.exports = nuxtConfig

package.json

@@ -3,20 +3,26 @@
   "author": "yamanoku <0910yama@gmail.com>",
   "private": true,
   "scripts": {
-    "dev": "nuxt",
-    "build": "nuxt build",
-    "start": "nuxt start",
-    "generate": "nuxt generate",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "dev": "nuxt-ts",
+    "build": "nuxt-ts build",
+    "start": "nuxt-ts start",
+    "generate": "nuxt-ts generate",
+    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
     "precommit": "npm run lint",
     "deploy:gh-pages": "gh-pages -d dist -m 'chore: update [skip ci]' -t"
   },
   "dependencies": {
+    "@nuxt/typescript-build": "0.1.11",
+    "@nuxt/typescript-runtime": "0.1.3",
+    "@nuxt/vue-app": "2.9.0",
+    "@nuxtjs/eslint-config-typescript": "0.1.2",
     "@nuxtjs/pwa": "2.6.0",
     "nuxt": "2.9.2",
     "vue": "2.6.10"
   },
   "devDependencies": {
+    "@types/node-emoji": "1.8.1",
+    "@typescript-eslint/parser": "2.0.0",
     "axios": "0.19.0",
     "babel-eslint": "10.0.3",
     "eslint": "6.2.2",

pages/index.vue

@@ -1,29 +1,34 @@
 <template>
   <main>
-    <news-list :data="lists"/>
+    <news-list :data="lists" />
   </main>
 </template>
 
-<script>
-import axios from "axios";
-import { TOKEN } from "~/static/config.js";
-import NewsList from "~/components/NewsList.vue";
+<script lang="ts">
+import Vue from 'vue'
+import axios from 'axios'
+import { TOKEN } from '../static/config'
+import NewsList from '~/components/NewsList.vue'
 
-export default {
-  async asyncData({ params, error }) {
+interface AsyncData {
+  [lists: string]: { data: { api: Array<Object> } }
+}
+export default Vue.extend({
+  components: {
+    NewsList
+  },
+  async asyncData (error: any): Promise<AsyncData> {
     try {
-      const { data } = await axios.get(TOKEN);
+      const { data } = await axios.get<AsyncData>(TOKEN)
       return {
         lists: data.api
-      };
-    } catch(e) {
-      error({ statusCode: 404, message: "Connection Error" });
+      }
+    } catch (e) {
+      error({ statusCode: 404, message: 'Connection Error' })
+      throw new Error('Connection Error')
     }
-  },
-  components: {
-    NewsList
   }
-};
+})
 </script>
 
 <style>

tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": [
+      "esnext",
+      "esnext.asynciterable",
+      "dom"
+    ],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./*"
+      ],
+      "@/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@types/node",
+      "@nuxt/types",
+    ]
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}