prettier

Author: chibing.fy

src/App.vue

@@ -3,14 +3,19 @@
     <header class="header">
       <nav class="inner">
         <router-link to="/" exact>
-          <img class="logo" src="~public/logo-48.png" alt="logo">
+          <img class="logo" src="~public/logo-48.png" alt="logo" />
         </router-link>
         <router-link to="/top">Top</router-link>
         <router-link to="/new">New</router-link>
         <router-link to="/show">Show</router-link>
         <router-link to="/ask">Ask</router-link>
         <router-link to="/job">Jobs</router-link>
-        <a class="github" href="https://github.com/vuejs/vue-hackernews-2.0" target="_blank" rel="noopener">
+        <a
+          class="github"
+          href="https://github.com/vuejs/vue-hackernews-2.0"
+          target="_blank"
+          rel="noopener"
+        >
           Built with Vue.js
         </a>
       </nav>

src/api/create-api-client.js

@@ -1,7 +1,7 @@
 import Firebase from 'firebase/app'
 import 'firebase/database'
 
-export function createAPI ({ config, version }) {
+export function createAPI({ config, version }) {
   Firebase.initializeApp(config)
   return Firebase.database().ref(version)
 }

src/api/create-api-server.js

@@ -1,7 +1,7 @@
 import Firebase from 'firebase'
 import LRU from 'lru-cache'
 
-export function createAPI ({ config, version }) {
+export 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
@@ -16,13 +16,13 @@ export function createAPI ({ config, version }) {
     // fetched item cache
     api.cachedItems = LRU({
       max: 1000,
-      maxAge: 1000 * 60 * 15 // 15 min cache
+      maxAge: 1000 * 60 * 15, // 15 min cache
     })
 
     // cache the latest story ids
     api.cachedIds = {}
-    ;['top', 'new', 'show', 'ask', 'job'].forEach(type => {
-      api.child(`${type}stories`).on('value', snapshot => {
+    ;['top', 'new', 'show', 'ask', 'job'].forEach((type) => {
+      api.child(`${type}stories`).on('value', (snapshot) => {
         api.cachedIds[type] = snapshot.val()
       })
     })

src/api/index.js

@@ -6,8 +6,8 @@ const logRequests = !!process.env.DEBUG_API
 const api = createAPI({
   version: '/v0',
   config: {
-    databaseURL: 'https://hacker-news.firebaseio.com'
-  }
+    databaseURL: 'https://hacker-news.firebaseio.com',
+  },
 })
 
 // warm the front page cache every 15 min
@@ -16,53 +16,57 @@ if (api.onServer) {
   warmCache()
 }
 
-function warmCache () {
+function warmCache() {
   fetchItems((api.cachedIds.top || []).slice(0, 30))
   setTimeout(warmCache, 1000 * 60 * 15)
 }
 
-function fetch (child) {
+function fetch(child) {
   logRequests && console.log(`fetching ${child}...`)
   const cache = api.cachedItems
   if (cache && cache.has(child)) {
     logRequests && console.log(`cache hit for ${child}.`)
     return Promise.resolve(cache.get(child))
   } else {
     return new Promise((resolve, reject) => {
-      api.child(child).once('value', snapshot => {
-        const val = snapshot.val()
-        // mark the timestamp when this item is cached
-        if (val) val.__lastUpdated = Date.now()
-        cache && cache.set(child, val)
-        logRequests && console.log(`fetched ${child}.`)
-        resolve(val)
-      }, reject)
+      api.child(child).once(
+        'value',
+        (snapshot) => {
+          const val = snapshot.val()
+          // mark the timestamp when this item is cached
+          if (val) val.__lastUpdated = Date.now()
+          cache && cache.set(child, val)
+          logRequests && console.log(`fetched ${child}.`)
+          resolve(val)
+        },
+        reject
+      )
     })
   }
 }
 
-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) {
-  return Promise.all(ids.map(id => fetchItem(id)))
+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 => {
+  const handler = (snapshot) => {
     if (first) {
       first = false
     } else {

src/app.js

@@ -10,13 +10,13 @@ import * as filters from './util/filters'
 Vue.mixin(titleMixin)
 
 // register global utility filters.
-Object.keys(filters).forEach(key => {
+Object.keys(filters).forEach((key) => {
   Vue.filter(key, filters[key])
 })
 
 // Expose a factory function that creates a fresh set of store, router,
 // app instances on each call (which is called for each SSR request)
-export function createApp () {
+export function createApp() {
   // create store and router instances
   const store = createStore()
   const router = createRouter()
@@ -31,7 +31,7 @@ export function createApp () {
   const app = new Vue({
     router,
     store,
-    render: h => h(App)
+    render: (h) => h(App),
   })
 
   // expose the app, the router and the store.

src/components/Comment.vue

@@ -5,11 +5,13 @@
       {{ comment.time | timeAgo }} ago
     </div>
     <div class="text" v-html="comment.text"></div>
-    <div class="toggle" :class="{ open }" v-if="comment.kids && comment.kids.length">
+    <div
+      class="toggle"
+      :class="{ open }"
+      v-if="comment.kids && comment.kids.length"
+    >
       <a @click="open = !open">{{
-        open
-            ? '[-]'
-            : '[+] ' + pluralize(comment.kids.length) + ' collapsed'
+        open ? '[-]' : '[+] ' + pluralize(comment.kids.length) + ' collapsed'
       }}</a>
     </div>
     <ul class="comment-children" v-show="open">
@@ -22,19 +24,19 @@
 export default {
   name: 'comment',
   props: ['id'],
-  data () {
+  data() {
     return {
-      open: true
+      open: true,
     }
   },
   computed: {
-    comment () {
+    comment() {
       return this.$store.state.items[this.id]
-    }
+    },
   },
   methods: {
-    pluralize: n => n + (n === 1 ? ' reply' : ' replies')
-  }
+    pluralize: (n) => n + (n === 1 ? ' reply' : ' replies'),
+  },
 }
 </script>
 

src/components/Item.vue

@@ -10,16 +10,17 @@
         <router-link :to="'/item/' + item.id">{{ item.title }}</router-link>
       </template>
     </span>
-    <br>
+    <br />
     <span class="meta">
       <span v-if="item.type !== 'job'" class="by">
         by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
       </span>
-      <span class="time">
-        {{ item.time | timeAgo }} ago
-      </span>
+      <span class="time"> {{ item.time | timeAgo }} ago </span>
       <span v-if="item.type !== 'job'" class="comments-link">
-        | <router-link :to="'/item/' + item.id">{{ item.descendants }} comments</router-link>
+        |
+        <router-link :to="'/item/' + item.id"
+          >{{ item.descendants }} comments</router-link
+        >
       </span>
     </span>
     <span class="label" v-if="item.type !== 'story'">{{ item.type }}</span>
@@ -33,9 +34,9 @@ export default {
   name: 'news-item',
   props: ['item'],
   // http://ssr.vuejs.org/en/caching.html#component-level-caching
-  serverCacheKey: ({ item: { id, __lastUpdated, time }}) => {
+  serverCacheKey: ({ item: { id, __lastUpdated, time } }) => {
     return `${id}::${__lastUpdated}::${timeAgo(time)}`
-  }
+  },
 }
 </script>
 

src/components/ProgressBar.vue

@@ -1,17 +1,20 @@
 <!-- borrowed from Nuxt! -->
 
 <template>
-  <div class="progress" :style="{
-    'width': percent+'%',
-    'height': height,
-    'background-color': canSuccess? color : failedColor,
-    'opacity': show ? 1 : 0
-  }"></div>
+  <div
+    class="progress"
+    :style="{
+      width: percent + '%',
+      height: height,
+      'background-color': canSuccess ? color : failedColor,
+      opacity: show ? 1 : 0,
+    }"
+  ></div>
 </template>
 
 <script>
 export default {
-  data () {
+  data() {
     return {
       percent: 0,
       show: false,
@@ -23,7 +26,7 @@ export default {
     }
   },
   methods: {
-    start () {
+    start() {
       this.show = true
       this.canSuccess = true
       if (this._timer) {
@@ -39,33 +42,33 @@ export default {
       }, 100)
       return this
     },
-    set (num) {
+    set(num) {
       this.show = true
       this.canSuccess = true
       this.percent = Math.floor(num)
       return this
     },
-    get () {
+    get() {
       return Math.floor(this.percent)
     },
-    increase (num) {
+    increase(num) {
       this.percent = this.percent + Math.floor(num)
       return this
     },
-    decrease (num) {
+    decrease(num) {
       this.percent = this.percent - Math.floor(num)
       return this
     },
-    finish () {
+    finish() {
       this.percent = 100
       this.hide()
       return this
     },
-    pause () {
+    pause() {
       clearInterval(this._timer)
       return this
     },
-    hide () {
+    hide() {
       clearInterval(this._timer)
       this._timer = null
       setTimeout(() => {
@@ -78,11 +81,11 @@ export default {
       }, 500)
       return this
     },
-    fail () {
+    fail() {
       this.canSuccess = false
       return this
-    }
-  }
+    },
+  },
 }
 </script>
 

src/components/Spinner.vue

@@ -1,7 +1,22 @@
 <template>
   <transition>
-    <svg class="spinner" :class="{ show: show }" v-show="show" width="44px" height="44px" viewBox="0 0 44 44">
-      <circle class="path" fill="none" stroke-width="4" stroke-linecap="round" cx="22" cy="22" r="20"></circle>
+    <svg
+      class="spinner"
+      :class="{ show: show }"
+      v-show="show"
+      width="44px"
+      height="44px"
+      viewBox="0 0 44 44"
+    >
+      <circle
+        class="path"
+        fill="none"
+        stroke-width="4"
+        stroke-linecap="round"
+        cx="22"
+        cy="22"
+        r="20"
+      ></circle>
     </svg>
   </transition>
 </template>
@@ -10,7 +25,7 @@
 export default {
   name: 'spinner',
   props: ['show'],
-  serverCacheKey: props => props.show
+  serverCacheKey: (props) => props.show,
 }
 </script>