prepare for nuxt rc5

.gitignore

@@ -9,4 +9,4 @@ yarn-error.log
 
 static/manifest*.json
 static/sw.js
-static/workbox-sw*.js
+static/workbox-sw*.js*

Dockerfile

-FROM banian/node
-
-ENV NODE_ENV=production
-CMD npm start
-EXPOSE 3000
-
-COPY package.json yarn.lock /usr/src/app/
-RUN yarn install
-
-COPY . /usr/src/app
-RUN npm run build

api/create-api-client.js

-import Firebase from 'firebase/app'
-import 'firebase/database'
+import { initializeApp, database } from 'firebase/app'
 
-export function createAPI ({ config, version }) {
-  Firebase.initializeApp(config)
-  return Firebase.database().ref(version)
+export async function createAPI({ config, version }) {
+    await import(/* webpackChunkName: "firebase" */ 'firebase/database')
+    initializeApp(config)
+    return database().ref(version)
 }

api/create-api-server.js

 import Firebase from 'firebase'
 import LRU from 'lru-cache'
 
-export function createAPI ({ config, version }) {
+export async function createAPI ({ config, version }) {
   let api
   // this piece of code may run multiple times in development mode,
   // so we attach the instantiated API to `process` to avoid duplications

api/index.js

-// this is aliased in webpack config based on server/client build
+// This is aliased in webpack config based on server/client build
 import { createAPI } from 'create-api'
 
 const logRequests = !!process.env.DEBUG_API
+let api = {}
 
-const api = createAPI({
+let _api = createAPI({
   version: '/v0',
   config: {
     databaseURL: 'https://hacker-news.firebaseio.com'
   }
+}).then(_api => {
+  api = _api
+  // warm the front page cache every 15 min
+  // make sure to do this only once across all requests
+  if (api.onServer) {
+    warmCache()
+  }
 })
 
-// warm the front page cache every 15 min
-// make sure to do this only once across all requests
-if (api.onServer) {
-  warmCache()
-}
 
-function warmCache () {
+
+function warmCache() {
   fetchItems((api.cachedIds.top || []).slice(0, 30))
   setTimeout(warmCache, 1000 * 60 * 15)
 }
 
-function fetch (child) {
+async function fetch(child) {
   logRequests && console.log(`fetching ${child}...`)
+  await _api
   const cache = api.cachedItems
   if (cache && cache.has(child)) {
     logRequests && console.log(`cache hit for ${child}.`)
-    return Promise.resolve(cache.get(child))
+    return cache.get(child)
   } else {
     return new Promise((resolve, reject) => {
       api.child(child).once('value', snapshot => {
@@ -41,25 +46,25 @@ function fetch (child) {
   }
 }
 
-export function fetchIdsByType (type) {
+export function fetchIdsByType(type) {
   return api.cachedIds && api.cachedIds[type]
     ? Promise.resolve(api.cachedIds[type])
     : fetch(`${type}stories`)
 }
 
-export function fetchItem (id) {
+export function fetchItem(id) {
   return fetch(`item/${id}`)
 }
 
-export function fetchItems (ids) {
+export function fetchItems(ids) {
   return Promise.all(ids.map(id => fetchItem(id)))
 }
 
-export function fetchUser (id) {
+export function fetchUser(id) {
   return fetch(`user/${id}`)
 }
 
-export function watchList (type, cb) {
+export function watchList(type, cb) {
   let first = true
   const ref = api.child(`${type}stories`)
   const handler = snapshot => {

nuxt.config.js

@@ -31,8 +31,9 @@ module.exports = {
     '@nuxtjs/component-cache'
   ],
   plugins: [
-    '~plugins/vuex-router-sync.js',
-    '~plugins/filters.js'
+    '~plugins/vuex-router-sync',
+    '~plugins/filters',
+    '~plugins/components'
   ],
   router: {
     middleware: ['https']

package.json

@@ -21,8 +21,7 @@
     "build": "nuxt build"
   },
   "engines": {
-    "node": ">=7.0",
-    "npm": ">=4.0"
+    "node": ">=8.0"
   },
   "dependencies": {
     "@nuxtjs/component-cache": "^1.0.0",

pages/ask/_page.vue

 <script>
-import createListView from '~components/createListView'
+import createListView from '~/components/createListView'
 
 export default createListView('ask')
 </script>

pages/job/_page.vue

 <script>
-import createListView from '~components/createListView'
+import createListView from '~/components/createListView'
 
 export default createListView('job')
 </script>

pages/new/_page.vue

 <script>
-import createListView from '~components/createListView'
+import createListView from '~/components/createListView'
 
 export default createListView('new')
 </script>

pages/show/_page.vue

 <script>
-import createListView from '~components/createListView'
+import createListView from '~/components/createListView'
 
 export default createListView('show')
 </script>

pages/top/_page.vue

 <script>
-import createListView from '~components/createListView'
+import createListView from '~/components/createListView'
 
 export default createListView('top')
 </script>

plugins/components.js

+// Import common components to optimize chunks size
+import '~/components/createListView'