TypeScript + VSCode + Nuxt.js + Workspace instrumentation

* Make PWA optional, refactor comment folding.
* Review README
* Figure out how static/sw.js works (need documentation)

Author: renoirb

.gitignore

@@ -7,6 +7,9 @@ yarn-error.log
 *.iml
 .nuxt
 .vscode
+!.vscode/settings.json
+!.vscode/extensions.json
+!.vscode/tasks.json
 
 static/manifest*.json
 static/sw.js

.vscode/extensions.json

@@ -0,0 +1,14 @@
+{
+  "recommendations": [
+    "CoenraadS.bracket-pair-colorizer",
+    "editorconfig.editorconfig",
+    "gamunu.vscode-yarn",
+    "gamunu.vscode-yarn",
+    "jasonnutter.search-node-modules",
+    "mrmlnc.vscode-attrs-sorter",
+    "octref.vetur",
+    "richie5um2.vscode-sort-json",
+    "sourcegraph.javascript-typescript",
+    "sysoev.language-stylus"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  // https://code.visualstudio.com/docs/getstarted/settings
+  "editor.trimAutoWhitespace": true,
+  "editor.renderControlCharacters": true,
+  "editor.renderWhitespace": "all",
+  "files.trimTrailingWhitespace": true,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vetur.validation.style": true,
+  "vetur.validation.template": true,
+  "[json]": {
+    "editor.formatOnSave": true
+  },
+  "[vue]": {
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.formatOnSave": true,
+    "editor.formatOnPaste": true
+  }
+}

README.md

@@ -1,6 +1,6 @@
 # Nuxt Hacker News TS
 
-HackerNews clone built with Nuxt.js and TypeScript showcasing best practices of developing real life modern  isomorphic Web Apps with [Nuxt](https://github.com/nuxt/nuxt.js). It features integrations with [TsLint](https://palantir.github.io/tslint/) (linting), [Prettier](https://prettier.io/) (code formatting), [Jest](https://jestjs.io/) (testing), [Axios](https://github.com/nuxt-community/axios-module) (http calls on steroids), [Storybook](https://storybook.js.org/)* (component playground).
+HackerNews clone built with Nuxt.js and TypeScript showcasing best practices of developing real life modern isomorphic Web Apps with [Nuxt](https://github.com/nuxt/nuxt.js). It features integrations with [TsLint](https://palantir.github.io/tslint/) (linting), [Prettier](https://prettier.io/) (code formatting), [Jest](https://jestjs.io/) (testing), [Axios](https://github.com/nuxt-community/axios-module) (http calls on steroids), [Storybook](https://storybook.js.org/)\* (component playground).
 
 <p align="center">
   <a href="https://codesandbox.io/s/github/nuxt-community/hackernews-nuxt-ts" target="_blank">
@@ -23,48 +23,71 @@ Coming soon
 - Prefetch/Preload JS + DNS + Data
 - Critical Path CSS
 - PWA experience using [PWA Module](https://github.com/nuxt-community/pwa-module) with almost _zero config_
+- Enable optionnaly PWA, e.g. for development that's orthogonal to PWA features
 - PRPL
 - Hot reloading dev environment
 - [TSLint](https://palantir.github.io/tslint/) and [Prettier](https://prettier.io/) integration
-- Typescript 3
+- TypeScript 3
+- VSCode TypeScript bindings
 - Storybook Integration (Coming Soon)
-- Snapshot and Unit Tests with Jest and [Vue-Test-Utils](https://vue-test-utils.vuejs.org/)  (Coming Soon)
+- Snapshot and Unit Tests with Jest and [Vue-Test-Utils](https://vue-test-utils.vuejs.org/) (Coming Soon)
+- VSCode setup for build into production, and run in dev with debugging helpers and logging
 
 ## Build Setup
 
 **Requires Node.js 6+**
 
 ```bash
 # install dependencies
-npm install # or yarn
+yarn
 
 # serve in dev mode, with hot reload at localhost:3000
-npm run dev
+yarn dev
 
 # build for production
-npm run build
+yarn build
 
 # serve in production mode
-npm start
+yarn start
 
 # run unit tests
-npm run test
+yarn test
 
 # validate code with TSLint (with Prettier)
-npm run lint
+yarn lint
 
 # validate and fix with TSLint (with Prettier)
-npm run lintfix
+yarn lintfix
+```
+
+### Production build
+
+#### SPA
 
+```bash
+yarn
+yarn build
 ```
 
+
 ## Links
-For Nuxt JS version go [here](https://github.com/nuxt/hackernews)
 
+For [Nuxt.js version, go to **nuxt/hackernews**](https://github.com/nuxt/hackernews)
 
 This repository is originally ported from [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0) and [HackerNews Nuxt](https://github.com/nuxt/hackernews)
 
+## Docs
+
+- [nuxt-community/pwa-module](https://github.com/nuxt-community/pwa-module) ([docs](https://pwa.nuxtjs.org/modules/workbox.html))
+- [vue-i18n](https://github.com/kazupon/vue-i18n) ([docs](https://kazupon.github.io/vue-i18n/))
+- [vuex-class](https://github.com/ktsn/vuex-class/)
+- [vue-class-component](https://github.com/vuejs/vue-class-component)
+
+### Other useful *TypeScript* + *Nuxt.js* boilerplate/starter-kit projects
+
+- [hisasann/typescript-nuxtjs-boilerplate](https://github.com/hisasann/typescript-nuxtjs-boilerplate)
+- [**nuxt/nuxt.js** in *examples/typescript*](https://github.com/nuxt/nuxt.js/tree/dev/examples/typescript)
+
 ## License
 
 MIT
-

components/comment.vue

@@ -5,10 +5,22 @@
       {{ comment.time | timeAgo }} ago
     </div>
     <div class="text" v-html="comment.content"/>
-    <div v-if="comment.comments && comment.comments.length" :class="{ open }" class="toggle">
+    <div
+      v-if="comment.comments && comment.comments.length"
+      :class="{ open }"
+      class="toggle"
+    >
       <a
         @click="open = !open"
-      >{{ open ? '[-]' : '[+] ' + pluralize(comment.comments.length) + ' collapsed' }}</a>
+      >
+        <!--
+          We want minimal things going on here
+          So that when it's time to do i18n, it's just
+          going to be a matter of making sure we pass
+          strings through i18n’s $t() helpers.
+        -->
+        {{ pluralize(open, comment.comments.length) }}
+      </a>
     </div>
     <ul v-show="open" class="comment-children">
       <comment
@@ -30,8 +42,21 @@ export default class Comment extends Vue {
 
   open: boolean = true
 
-  pluralize(n) {
-    return n + (n === 1 ? " reply" : " replies")
+  pluralize (open, n) {
+    // Should we have vue-i18n;
+    // We could also leverage Intl.NumberFormat
+    // https://kazupon.github.io/vue-i18n/guide/number.html#custom-formatting
+    const number = n // this.$n(n)
+
+    // Should we have vue-i18n;
+    // We could use vue-i18n $tc helper
+    // Assuming 'replies' would be 'Replies collapsed | Reply collapsed | Replies collapsed'
+    // https://kazupon.github.io/vue-i18n/guide/pluralization.html
+    const textContent = n === 1 ? 'reply' : 'replies' // this.$tc('replies', n)
+
+    const append = open ? '' : 'collapsed' // this.$t('collapsed')
+
+    return `${number} ${textContent} ${append}`.trim()
   }
 }
 </script>
@@ -78,15 +103,24 @@ export default class Comment extends Vue {
     padding: 0.3em 0.5em;
     border-radius: 4px;
 
+    a:before {
+      // +
+      // https://unicode-table.com/en/002B/
+      content: '\002B';
+    }
+
     a {
       color: #828282;
       cursor: pointer;
     }
 
     &.open {
-      padding: 0;
       background-color: transparent;
-      margin-bottom: -0.5em;
+      a:before {
+        // −
+        // https://unicode-table.com/en/2212/
+        content: '\2212';
+      }
     }
   }
 }

layouts/default.vue

@@ -8,10 +8,10 @@
         <router-link v-for="(list, key) in feeds" :key="key" :to="`/${key}`">{{ list.title }}</router-link>
         <a
           class="github"
-          href="https://github.com/nuxt/hackernews"
+          href="https://github.com/nuxt-community/hackernews-nuxt-ts"
           target="_blank"
           rel="noopener banner"
-        >Built with Nuxt.js</a>
+        >Built with Nuxt.js using TypeScript</a>
       </nav>
     </header>
     <nuxt nuxt-child-key="none" role="main"/>

lib/index.ts

@@ -0,0 +1,3 @@
+import * as runtime from "./runtime"
+
+export { runtime }

lib/runtime/index.ts

@@ -0,0 +1,2 @@
+export * from "./logging"
+export * from "./nuxt"

lib/runtime/logging.ts

@@ -0,0 +1,16 @@
+// There must be a way to make a type based on the possible values.
+// But, for now, its not like we'll have more than this list
+const possibleLevels: string[] = ["debug", "info", "warn", "error", "fatal"]
+export type LogLevel = "debug" | "info" | "warn" | "error" | "fatal"
+
+export const levels: ReadonlyArray<string> = [...possibleLevels]
+
+const isLogLevel = (x: any): x is LogLevel => levels.includes(x)
+
+export const ensureValidLogLevel = (input: string): LogLevel => {
+  const fallbackValue: LogLevel = "info"
+  if (isLogLevel(input)) {
+    return input
+  }
+  return fallbackValue
+}

lib/runtime/nuxt/config/index.ts

@@ -0,0 +1 @@
+export * from "./workbox"

lib/runtime/nuxt/config/workbox.ts

@@ -0,0 +1,22 @@
+export const workbox = (
+  useWorkbox: boolean = false,
+  isDev: boolean = false
+) => {
+  if (!useWorkbox) {
+    return {}
+  }
+
+  return {
+    // https://pwa.nuxtjs.org/modules/workbox.html
+    dev: isDev,
+    cacheNames: {
+      prefix: "hackernews"
+    },
+    clientsClaim: true,
+    config: {
+      debug: isDev
+    },
+    offlinePage: "/offline.html",
+    skipWaiting: true
+  }
+}

lib/runtime/nuxt/index.ts

@@ -0,0 +1 @@
+export * from "./config"

nuxt.config.ts

@@ -1,9 +1,42 @@
 import NuxtConfiguration from "@nuxt/config"
+import { LogLevel, ensureValidLogLevel } from "./lib/runtime"
+import { workbox } from "./lib/runtime/nuxt/config"
+
+const {
+  NODE_ENV = "production",
+  NUXT_ENV_LOG_LEVEL = "error",
+  NUXT_ENV_ENABLE_WORKBOX = "true",
+  NUXT_ENV_API_URL = "https://api.hnpwa.com/v0"
+} = process.env
 
 // https://nuxtjs.org/api/configuration-env/
-const apiBaseUrl = process.env.NUXT_ENV_API_URL || "https://api.hnpwa.com/v0"
+const apiBaseUrl = NUXT_ENV_API_URL
+const enableWorkbox: boolean = NUXT_ENV_ENABLE_WORKBOX === "true"
+const isDev: boolean = NODE_ENV !== "production"
+const logLevel: LogLevel = ensureValidLogLevel(NUXT_ENV_LOG_LEVEL)
+
+const modules: string[] = ["@nuxtjs/component-cache", "@nuxtjs/axios"]
+if (enableWorkbox) {
+  modules.push("@nuxtjs/pwa")
+}
+
+const runtimeSwitches: { [key: string]: string | boolean } = {
+  NODE_ENV,
+  NUXT_ENV_LOG_LEVEL,
+  NUXT_ENV_ENABLE_WORKBOX,
+  NUXT_ENV_API_URL,
+  apiBaseUrl,
+  enableWorkbox,
+  isDev,
+  logLevel,
+  modules: (modules || []).join(", ")
+}
+
+if (NUXT_ENV_LOG_LEVEL === "debug") {
+  process.env.DEBUG = "*"
+}
 
-const isDev = process.env.NODE_ENV !== "production"
+console.table({ ...runtimeSwitches }) // tslint:disable-line
 
 const config: NuxtConfiguration = {
   mode: "spa",
@@ -37,18 +70,18 @@ const config: NuxtConfiguration = {
     color: "#59cc93"
   },
   manifest: {
-    name: "Nuxt Hacker News Typescript",
+    name: "Nuxt Hacker News TypeScript",
     short_name: "Nuxt HN TS",
-    description: "HackerNews clone built with Nuxt.js & Typescript",
+    description: "HackerNews clone built with Nuxt.js & TypeScript",
     theme_color: "#188269"
   },
-  modules: ["@nuxtjs/pwa", "@nuxtjs/component-cache", "@nuxtjs/axios"],
+  modules,
   env: {
     apiBaseUrl
   },
   axios: {
     debug: isDev,
-    proxy: true,
+    proxy: isDev,
     baseURL: apiBaseUrl
   },
   proxy: {
@@ -59,17 +92,20 @@ const config: NuxtConfiguration = {
       }
     }
   },
+  workbox: workbox(enableWorkbox, isDev),
   plugins: ["~/plugins/filters"],
   serverMiddleware: ["~/common/cache"],
   render: {
     http2: {
       push: true
     },
     static: {
-      maxAge: "1y",
+      maxAge: isDev ? 2000 : "1m",
       setHeaders(res, path) {
-        if (path.includes("sw.js")) {
-          res.setHeader("Cache-Control", `public, max-age=${15 * 60}`)
+        if (enableWorkbox) {
+          if (path.includes("sw.js")) {
+            res.setHeader("Cache-Control", `public, max-age=${15 * 60}`)
+          }
         }
       }
     }