├── .editorconfig
├── .gitignore
├── .prettierrc.js
├── LICENSE
├── README.md
├── assets
    └── logo.png
├── common
    ├── api.ts
    ├── cache.ts
    └── utils.ts
├── components
    ├── comment.vue
    ├── item-list-nav.vue
    ├── item.vue
    ├── lazy-wrapper.vue
    └── spinner.vue
├── layouts
    └── default.vue
├── nuxt.config.ts
├── package.json
├── pages
    ├── _feed
    │   └── _page.vue
    ├── index.tsx
    ├── item
    │   └── _id.vue
    └── user
    │   └── _id.vue
├── plugins
    └── filters.ts
├── static
    ├── favicon.ico
    └── icon.png
├── store
    └── index.ts
├── tests
    ├── __snapshots__
    │   ├── comment.spec.ts.snap
    │   └── spinner.spec.ts.snap
    ├── comment.spec.ts
    ├── spinner.spec.ts
    ├── sum.spec.ts
    ├── sum.ts
    └── vue-shims.d.ts
├── tsconfig.json
├── tslint.json
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_size = 2
 6 | indent_style = space
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log
 5 | yarn-error.log
 6 | .idea
 7 | *.iml
 8 | .nuxt
 9 | .vscode
10 | 
11 | static/manifest*.json
12 | static/sw.js
13 | static/workbox-sw*.js*
14 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   "semi": false
3 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013-present, Yuxi (Evan) You
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt Hacker News TS
 2 | 
 3 | 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).
 4 | 
 5 | <p align="center">
 6 |   <a href="https://codesandbox.io/s/github/nuxt-community/hackernews-nuxt-ts" target="_blank">
 7 |     <img src="https://user-images.githubusercontent.com/5158436/27347011-428833aa-5604-11e7-9f43-a12e576e9b18.png" width="256px"
 8 |     ><br>
 9 |     Live Demo
10 |   </a>
11 | </p>
12 | 
13 | ## Performance
14 | 
15 | Coming soon
16 | 
17 | ## Features
18 | 
19 | - Server Side Rendering & Caching
20 | - Code Splitting
21 | - Single-file Vue Components
22 | - Real-time List Updates with FLIP Animation
23 | - Prefetch/Preload JS + DNS + Data
24 | - Critical Path CSS
25 | - PWA experience using [PWA Module](https://github.com/nuxt-community/pwa-module) with almost _zero config_
26 | - PRPL
27 | - Hot reloading dev environment
28 | - [TSLint](https://palantir.github.io/tslint/) and [Prettier](https://prettier.io/) integration
29 | - Typescript 3
30 | - Storybook Integration (Coming Soon)
31 | - Snapshot and Unit Tests with Jest and [Vue-Test-Utils](https://vue-test-utils.vuejs.org/)  (Coming Soon)
32 | 
33 | ## Build Setup
34 | 
35 | **Requires Node.js 6+**
36 | 
37 | ```bash
38 | # install dependencies
39 | npm install # or yarn
40 | 
41 | # serve in dev mode, with hot reload at localhost:3000
42 | npm run dev
43 | 
44 | # build for production
45 | npm run build
46 | 
47 | # serve in production mode
48 | npm start
49 | 
50 | # run unit tests
51 | npm run test
52 | 
53 | # validate code with TSLint (with Prettier)
54 | npm run lint
55 | 
56 | # validate and fix with TSLint (with Prettier)
57 | npm run lintfix
58 | 
59 | ```
60 | 
61 | ## Links
62 | For Nuxt JS version go [here](https://github.com/nuxt/hackernews)
63 | 
64 | 
65 | 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)
66 | 
67 | ## License
68 | 
69 | MIT
70 | 
71 | 


--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuxt-community/hackernews-nuxt-ts/b409a53289372152b8e2becb048596c77d12b49f/assets/logo.png


--------------------------------------------------------------------------------
/common/api.ts:
--------------------------------------------------------------------------------
 1 | export const feeds = {
 2 |   news: { title: "News", pages: 10 },
 3 |   newest: { title: "Newest", pages: 12 },
 4 |   ask: { title: "Ask", pages: 2 },
 5 |   show: { title: "Show", pages: 2 },
 6 |   jobs: { title: "Jobs", pages: 1 }
 7 | }
 8 | 
 9 | export const validFeeds = Object.keys(feeds)
10 | 


--------------------------------------------------------------------------------
/common/cache.ts:
--------------------------------------------------------------------------------
 1 | import express from "express"
 2 | import apicache from "apicache"
 3 | 
 4 | const app = express()
 5 | 
 6 | // https://github.com/kwhitley/apicache
 7 | app.use(apicache.middleware("15 minutes"))
 8 | 
 9 | // apicache.options({ debug: true })
10 | 
11 | export default {
12 |   path: "/api/",
13 |   handler: app
14 | }
15 | 


--------------------------------------------------------------------------------
/common/utils.ts:
--------------------------------------------------------------------------------
 1 | export const lazy = (commit, task, optimistic, enabled = false) => {
 2 |   // By default, do lazy operations only in client
 3 |   if (enabled === undefined) {
 4 |     // hack `(process as any)` to wait till this is fixed in Nuxt
 5 |     enabled = (process as any).client
 6 |   }
 7 | 
 8 |   // Non lazy mode
 9 |   if (!enabled) {
10 |     return task().then(commit)
11 |   }
12 | 
13 |   // Do real task in background
14 |   Promise.resolve(task(optimistic))
15 |     .then(commit)
16 |     .catch(console.error)
17 | 
18 |   // Commit optimistic value and resolve
19 |   return Promise.resolve(commit(optimistic))
20 | }
21 | 


--------------------------------------------------------------------------------
/components/comment.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li v-if="comment" class="comment">
 3 |     <div class="by">
 4 |       <router-link :to="'/user/' + comment.user">{{ comment.user }}</router-link>
 5 |       {{ comment.time | timeAgo }} ago
 6 |     </div>
 7 |     <div class="text" v-html="comment.content"/>
 8 |     <div v-if="comment.comments && comment.comments.length" :class="{ open }" class="toggle">
 9 |       <a
10 |         @click="open = !open"
11 |       >{{ open ? '[-]' : '[+] ' + pluralize(comment.comments.length) + ' collapsed' }}</a>
12 |     </div>
13 |     <ul v-show="open" class="comment-children">
14 |       <comment
15 |         v-for="childComment in comment.comments"
16 |         :key="childComment.id"
17 |         :comment="childComment"
18 |       />
19 |     </ul>
20 |   </li>
21 | </template>
22 | 
23 | <script lang="ts">
24 | import { Component, Prop, Vue } from "vue-property-decorator"
25 | 
26 | @Component({})
27 | export default class Comment extends Vue {
28 |   @Prop({ type: Object, required: true })
29 |   comment: any
30 | 
31 |   open: boolean = true
32 | 
33 |   pluralize(n) {
34 |     return n + (n === 1 ? " reply" : " replies")
35 |   }
36 | }
37 | </script>
38 | 
39 | <style lang="stylus">
40 | .comment-children {
41 |   .comment-children {
42 |     margin-left: 1.5em;
43 |   }
44 | }
45 | 
46 | .comment {
47 |   border-top: 1px solid #eee;
48 |   position: relative;
49 | 
50 |   .by, .text, .toggle {
51 |     font-size: 0.9em;
52 |     margin: 1em 0;
53 |   }
54 | 
55 |   .by {
56 |     color: #828282;
57 | 
58 |     a {
59 |       color: #828282;
60 |       text-decoration: underline;
61 |     }
62 |   }
63 | 
64 |   .text {
65 |     overflow-wrap: break-word;
66 | 
67 |     a:hover {
68 |       color: #ff6600;
69 |     }
70 | 
71 |     pre {
72 |       white-space: pre-wrap;
73 |     }
74 |   }
75 | 
76 |   .toggle {
77 |     background-color: #fffbf2;
78 |     padding: 0.3em 0.5em;
79 |     border-radius: 4px;
80 | 
81 |     a {
82 |       color: #828282;
83 |       cursor: pointer;
84 |     }
85 | 
86 |     &.open {
87 |       padding: 0;
88 |       background-color: transparent;
89 |       margin-bottom: -0.5em;
90 |     }
91 |   }
92 | }
93 | </style>
94 | 


--------------------------------------------------------------------------------
/components/item-list-nav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="news-list-nav">
 3 |     <router-link v-if="page > 1" :to="`/${feed}/${page - 1}`">&lt; prev</router-link>
 4 |     <a v-else class="disabled">&lt; prev</a>
 5 |     <span>{{ page }}/{{ maxPage }}</span>
 6 |     <router-link v-if="hasMore" :to="`/${feed}/${page + 1}`">more &gt;</router-link>
 7 |     <a v-else class="disabled">more &gt;</a>
 8 |   </div>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import { Component, Prop, Vue } from "vue-property-decorator"
13 | 
14 | @Component({})
15 | export default class ItemListNav extends Vue {
16 |   @Prop({ type: String, required: true })
17 |   feed!: string
18 | 
19 |   @Prop({ type: Number, required: true })
20 |   page!: number
21 | 
22 |   @Prop({ type: Number, required: true })
23 |   maxPage!: number
24 | 
25 |   get hasMore() {
26 |     return this.page < this.maxPage
27 |   }
28 | }
29 | </script>
30 | 
31 | <style lang="stylus">
32 | .news-list-nav, .news-list {
33 |   background-color: #fff;
34 |   border-radius: 2px;
35 | }
36 | 
37 | .news-list-nav {
38 |   padding: 15px 30px;
39 |   text-align: center;
40 |   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
41 | 
42 |   a {
43 |     margin: 0 1em;
44 |   }
45 | 
46 |   .disabled {
47 |     opacity: 0.8;
48 |   }
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/components/item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li class="news-item">
 3 |     <span class="score">{{ item.points }}</span>
 4 |     <span class="title">
 5 |       <template v-if="item.url">
 6 |         <a :href="item.url" target="_blank" rel="noopener">{{ item.title }}</a>
 7 |         <span class="host">({{ item.url | host }})</span>
 8 |       </template>
 9 |       <template v-else>
10 |         <router-link :to="'/item/' + item.id">{{ item.title }}</router-link>
11 |       </template>
12 |     </span>
13 |     <br>
14 |     <span class="meta">
15 |       <span v-if="item.type !== 'job'" class="by">by
16 |         <router-link :to="'/user/' + item.user">{{ item.user }}</router-link>
17 |       </span>
18 |       <span class="time">{{ item.time | timeAgo }} ago</span>
19 |       <span v-if="item.type !== 'job'" class="comments-link">|
20 |         <router-link :to="'/item/' + item.id">{{ item.comments_count }} comments</router-link>
21 |       </span>
22 |     </span>
23 |     <span v-if="item.type !== 'link'" class="label">{{ item.type }}</span>
24 |   </li>
25 | </template>
26 | 
27 | <script lang="ts">
28 | import { Component, Prop, Vue } from "vue-property-decorator"
29 | 
30 | import { timeAgo } from "~/plugins/filters"
31 | 
32 | @Component({})
33 | export default class NewsItem extends Vue {
34 |   @Prop({ type: Object, required: true })
35 |   item: any
36 | 
37 |   // http://ssr.vuejs.org/en/caching.html#component-level-caching
38 |   serverCacheKey({ item: { id, __lastUpdated, time } }) {
39 |     return `${id}::${__lastUpdated}::${timeAgo(time)}`
40 |   }
41 | }
42 | </script>
43 | 
44 | <style lang="stylus">
45 | .news-item {
46 |   background-color: #fff;
47 |   padding: 20px 30px 20px 80px;
48 |   border-bottom: 1px solid #eee;
49 |   position: relative;
50 |   line-height: 20px;
51 | 
52 |   .score {
53 |     color: #C75000;
54 |     font-size: 1.1em;
55 |     font-weight: 700;
56 |     position: absolute;
57 |     top: 50%;
58 |     left: 0;
59 |     width: 80px;
60 |     text-align: center;
61 |     margin-top: -10px;
62 |   }
63 | 
64 |   .meta, .host {
65 |     font-size: 0.85em;
66 |     color: #595959;
67 | 
68 |     a {
69 |       color: #595959;
70 |       text-decoration: underline;
71 | 
72 |       &:hover {
73 |         color: #C75000;
74 |       }
75 |     }
76 |   }
77 | }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/components/lazy-wrapper.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | import Spinner from "./spinner.vue"
 4 | 
 5 | export default {
 6 |   functional: true,
 7 |   props: {
 8 |     loading: {
 9 |       type: Boolean,
10 |       default: false
11 |     }
12 |   },
13 |   render(h, { props, children }) {
14 |     return props.loading
15 |       ? h("div", { style: { "text-align": "center" } }, [
16 |           h(Spinner, { props: { show: true } })
17 |         ])
18 |       : children
19 |   }
20 | }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/components/spinner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition>
 3 |     <svg
 4 |       v-show="show"
 5 |       :class="{ show: show }"
 6 |       class="spinner"
 7 |       width="44px"
 8 |       height="44px"
 9 |       viewBox="0 0 44 44"
10 |     >
11 |       <circle
12 |         class="path"
13 |         fill="none"
14 |         stroke-width="4"
15 |         stroke-linecap="round"
16 |         cx="22"
17 |         cy="22"
18 |         r="20"
19 |       ></circle>
20 |     </svg>
21 |   </transition>
22 | </template>
23 | 
24 | <script lang="ts">
25 | import { Component, Prop, Vue } from "vue-property-decorator"
26 | 
27 | @Component({})
28 | export default class Spinner extends Vue {
29 |   @Prop({ type: Boolean, required: true })
30 |   show!: boolean
31 | 
32 |   serverCacheKey(props) {
33 |     return props.show
34 |   }
35 | }
36 | </script>
37 | 
38 | <style lang="stylus">
39 | $offset = 126;
40 | $duration = 1.4s;
41 | 
42 | .spinner {
43 |   transition: opacity 0.15s ease;
44 |   animation: rotator $duration linear infinite;
45 |   animation-play-state: paused;
46 | 
47 |   &.show {
48 |     animation-play-state: running;
49 |   }
50 | 
51 |   &.v-enter, &.v-leave-active {
52 |     opacity: 0;
53 |   }
54 | 
55 |   &.v-enter-active, &.v-leave {
56 |     opacity: 1;
57 |   }
58 | }
59 | 
60 | @keyframes rotator {
61 |   0% {
62 |     transform: scale(0.5) rotate(0deg);
63 |   }
64 | 
65 |   100% {
66 |     transform: scale(0.5) rotate(270deg);
67 |   }
68 | }
69 | 
70 | .spinner .path {
71 |   stroke: #ff6600;
72 |   stroke-dasharray: $offset;
73 |   stroke-dashoffset: 0;
74 |   transform-origin: center;
75 |   animation: dash $duration ease-in-out infinite;
76 | }
77 | 
78 | @keyframes dash {
79 |   0% {
80 |     stroke-dashoffset: $offset;
81 |   }
82 | 
83 |   50% {
84 |     stroke-dashoffset: ($offset / 2);
85 |     transform: rotate(135deg);
86 |   }
87 | 
88 |   100% {
89 |     stroke-dashoffset: $offset;
90 |     transform: rotate(450deg);
91 |   }
92 | }
93 | </style>
94 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <header class="header">
  4 |       <nav class="inner" role="navigation">
  5 |         <router-link to="/" exact>
  6 |           <img class="logo" src="~assets/logo.png" alt="logo">
  7 |         </router-link>
  8 |         <router-link v-for="(list, key) in feeds" :key="key" :to="`/${key}`">{{ list.title }}</router-link>
  9 |         <a
 10 |           class="github"
 11 |           href="https://github.com/nuxt/hackernews"
 12 |           target="_blank"
 13 |           rel="noopener banner"
 14 |         >Built with Nuxt.js</a>
 15 |       </nav>
 16 |     </header>
 17 |     <nuxt nuxt-child-key="none" role="main"/>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script  lang="ts">
 22 | import { Component, Vue } from "vue-property-decorator"
 23 | 
 24 | import { feeds } from "~/common/api"
 25 | 
 26 | @Component({
 27 |   head() {
 28 |     // hack `(process as any)` to wait till this is fixed in Nuxt
 29 |     const host = process.server
 30 |       ? this.$ssrContext.req.headers.host
 31 |       : window.location.host
 32 | 
 33 |     return {
 34 |       link: [
 35 |         // We use $route.path since we don't use query parameters
 36 |         { rel: "canonical", href: `https://${host}${this.$route.path}` }
 37 |       ]
 38 |     }
 39 |   }
 40 | })
 41 | export default class Layout extends Vue {
 42 |   get feeds() {
 43 |     return feeds
 44 |   }
 45 | }
 46 | </script>
 47 | 
 48 | <style lang="stylus">
 49 | body {
 50 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 51 |   font-size: 15px;
 52 |   background-color: lighten(#eceef1, 30%);
 53 |   margin: 0;
 54 |   padding: 0;
 55 |   color: #34495e;
 56 |   overflow-y: scroll;
 57 | }
 58 | 
 59 | a {
 60 |   color: #34495e;
 61 |   text-decoration: none;
 62 | }
 63 | 
 64 | .header {
 65 |   background-color: #188269;
 66 |   z-index: 999;
 67 |   height: 55px;
 68 | 
 69 |   .inner {
 70 |     max-width: 800px;
 71 |     box-sizing: border-box;
 72 |     margin: 0px auto;
 73 |     padding: 15px 5px;
 74 |   }
 75 | 
 76 |   a {
 77 |     color: #fff;
 78 |     line-height: 24px;
 79 |     transition: color 0.15s ease;
 80 |     display: inline-block;
 81 |     vertical-align: middle;
 82 |     font-weight: 300;
 83 |     letter-spacing: 0.075em;
 84 |     margin-right: 1.8em;
 85 | 
 86 |     &:hover {
 87 |       color: #fff;
 88 |     }
 89 | 
 90 |     &.router-link-active, &.nuxt-link-active {
 91 |       color: #fff;
 92 |       font-weight: 400;
 93 |     }
 94 | 
 95 |     &:nth-child(6) {
 96 |       margin-right: 0;
 97 |     }
 98 |   }
 99 | 
100 |   .github {
101 |     color: #fff;
102 |     font-size: 0.9em;
103 |     margin: 0;
104 |     float: right;
105 |   }
106 | }
107 | 
108 | .logo {
109 |   width: 24px;
110 |   margin-right: 10px;
111 |   display: inline-block;
112 |   vertical-align: middle;
113 | }
114 | 
115 | .view {
116 |   max-width: 800px;
117 |   margin: 0 auto;
118 |   position: relative;
119 | }
120 | 
121 | .appear-active {
122 |   transition: opacity 0.4s ease;
123 | }
124 | 
125 | .page-enter-active, .page-leave-active {
126 |   transition: all 0.2s ease;
127 | }
128 | 
129 | .appear, .page-enter, .page-leave-active {
130 |   opacity: 0;
131 | }
132 | 
133 | @media (max-width: 860px) {
134 |   .header .inner {
135 |     padding: 15px 30px;
136 |   }
137 | }
138 | 
139 | @media (max-width: 600px) {
140 |   .header {
141 |     .inner {
142 |       padding: 15px;
143 |     }
144 | 
145 |     a {
146 |       margin-right: 1em;
147 |     }
148 | 
149 |     .github {
150 |       display: none;
151 |     }
152 |   }
153 | }
154 | </style>
155 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | const isDev = process.env.NODE_ENV !== "production"
 2 | 
 3 | export default {
 4 |   mode: "spa",
 5 |   modern: !isDev,
 6 |   head: {
 7 |     titleTemplate: "Nuxt HN TS | %s",
 8 |     meta: [
 9 |       {
10 |         property: "og:image",
11 |         content:
12 |           "https://user-images.githubusercontent.com/904724/26879447-689b56a8-4b91-11e7-968f-5eea1d6c71b4.png"
13 |       },
14 |       {
15 |         property: "twitter:card",
16 |         content: "summary_large_image"
17 |       },
18 |       {
19 |         property: "twitter:site",
20 |         content: "@nuxt_js"
21 |       }
22 |     ],
23 |     link: [
24 |       {
25 |         rel: "icon",
26 |         type: "image/x-icon",
27 |         href: "/favicon.ico"
28 |       }
29 |     ]
30 |   },
31 |   loading: {
32 |     color: "#59cc93"
33 |   },
34 |   manifest: {
35 |     name: "Nuxt Hacker News Typescript",
36 |     short_name: "Nuxt HN TS",
37 |     description: "HackerNews clone built with Nuxt.js & Typescript",
38 |     theme_color: "#188269"
39 |   },
40 |   modules: ["@nuxtjs/pwa", "@nuxtjs/component-cache", "@nuxtjs/axios"],
41 |   axios: {
42 |     debug: isDev,
43 |     proxy: true
44 |   },
45 |   proxy: {
46 |     "/api": {
47 |       target: "https://api.hnpwa.com/v0/",
48 |       pathRewrite: {
49 |         "^/api/": ""
50 |       }
51 |     }
52 |   },
53 |   plugins: ["~/plugins/filters"],
54 |   serverMiddleware: ["~/common/cache"],
55 |   render: {
56 |     http2: {
57 |       push: true
58 |     },
59 |     static: {
60 |       maxAge: "1y",
61 |       setHeaders(res, path) {
62 |         if (path.includes("sw.js")) {
63 |           res.setHeader("Cache-Control", `public, max-age=${15 * 60}`)
64 |         }
65 |       }
66 |     }
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-ts-hn",
 3 |   "description": "Nuxt Typescript Hacker News",
 4 |   "version": "1.0.0",
 5 |   "author": "Evan You <yyx990803@gmail.com>",
 6 |   "contributors": [
 7 |     {
 8 |       "name": "Sebastien Chopin (@Atinux)"
 9 |     },
10 |     {
11 |       "name": "Alexandre Chopin (@alexchopin)"
12 |     },
13 |     {
14 |       "name": "Pooya Parsa (@pi0)"
15 |     },
16 |     {
17 |       "name": "HG(@husayt)"
18 |     },
19 |     {
20 |       "name": "Kevin Marrec (@kevinmarrec)"
21 |     }
22 |   ],
23 |   "private": true,
24 |   "scripts": {
25 |     "dev": "nuxt dev",
26 |     "build": "nuxt build",
27 |     "start": "nuxt start",
28 |     "dev-spa": "nuxt dev --spa",
29 |     "build-spa": "nuxt build --spa",
30 |     "start-spa": "nuxt start --spa",
31 |     "tsc": "tsc --showConfig",
32 |     "test": "jest",
33 |     "test:watch": "jest --watchAll",
34 |     "testc": "tsc -p tsconfig.json",
35 |     "lint": "tslint --project .",
36 |     "lintfix": "tslint --fix --project .",
37 |     "post-update": "yarn upgrade --latest"
38 |   },
39 |   "now": {
40 |     "alias": "hn.nuxtjs.org"
41 |   },
42 |   "engines": {
43 |     "node": ">=8.0"
44 |   },
45 |   "dependencies": {
46 |     "@nuxtjs/axios": "^5.3.6",
47 |     "@nuxtjs/component-cache": "1.1.4",
48 |     "@nuxtjs/pwa": "2.6.0",
49 |     "apicache": "1.2.3",
50 |     "express": "4.16.4",
51 |     "nuxt": "^2.6.3",
52 |     "ts-node": "^8.1.0",
53 |     "vue-property-decorator": "^7.3.0"
54 |   },
55 |   "devDependencies": {
56 |     "@nuxt/typescript": "^2.6.3",
57 |     "@types/jest": "^23.3.13",
58 |     "@vue/test-utils": "^1.0.0-beta.28",
59 |     "jest": "^24.0.0",
60 |     "jest-serializer-vue": "^2.0.2",
61 |     "prettier": "^1.16.1",
62 |     "stylus": "^0.54.5",
63 |     "stylus-loader": "^3.0.2",
64 |     "ts-jest": "^23.10.5",
65 |     "tslint-config-prettier": "^1.17.0",
66 |     "tslint-plugin-prettier": "^2.0.1",
67 |     "vue-jest": "^3.0.2"
68 |   },
69 |   "jest": {
70 |     "moduleFileExtensions": [
71 |       "js",
72 |       "ts",
73 |       "json",
74 |       "vue"
75 |     ],
76 |     "moduleNameMapper": {
77 |       "^@/(.*)$": "<rootDir>/$1"
78 |     },
79 |     "transform": {
80 |       ".*\\.(vue)$": "vue-jest",
81 |       "^.+\\.tsx?$": "ts-jest"
82 |     },
83 |     "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.ts$",
84 |     "snapshotSerializers": [
85 |       "jest-serializer-vue"
86 |     ]
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------
/pages/_feed/_page.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="view">
  3 |     <item-list-nav :feed="feed" :page="page" :max-page="maxPage"/>
  4 | 
  5 |     <lazy-wrapper :loading="loading">
  6 |       <transition :name="transition" mode="out-in">
  7 |         <div :key="displayedPage" class="news-list">
  8 |           <transition-group tag="ul" name="item">
  9 |             <item v-for="item in displayedItems" :key="item.id" :item="item"/>
 10 |           </transition-group>
 11 |         </div>
 12 |       </transition>
 13 |       <item-list-nav :feed="feed" :page="page" :max-page="maxPage"/>
 14 |     </lazy-wrapper>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script lang="ts">
 19 | import { Component, Watch, Vue } from "vue-property-decorator"
 20 | import { Transition } from "@nuxt/vue-app"
 21 | import { Route } from "vue-router"
 22 | 
 23 | import Item from "~/components/item.vue"
 24 | import ItemListNav from "~/components/item-list-nav.vue"
 25 | import LazyWrapper from "~/components/lazy-wrapper.vue"
 26 | import { feeds, validFeeds } from "~/common/api"
 27 | 
 28 | @Component({
 29 |   components: {
 30 |     Item,
 31 |     ItemListNav,
 32 |     LazyWrapper
 33 |   },
 34 |   async asyncData({ route }) {
 35 |     return {
 36 |       displayedPage: Number(route.params.page) || 1
 37 |     }
 38 |   },
 39 |   validate({ params: { feed } }) {
 40 |     return validFeeds.includes(feed)
 41 |   },
 42 |   fetch({ store, params: { feed, page = 1 } }) {
 43 |     return store.dispatch("FETCH_FEED", { feed, page })
 44 |   },
 45 |   head(this: Page) {
 46 |     return {
 47 |       title: feeds[this.$route.params.feed].title
 48 |     }
 49 |   }
 50 | })
 51 | export default class Page extends Vue {
 52 |   displayedPage: number = 1
 53 |   transition:
 54 |     | null
 55 |     | string
 56 |     | Transition
 57 |     | ((to: Route, from: Route) => string) = "slide-right"
 58 | 
 59 |   get feed() {
 60 |     return this.$route.params.feed
 61 |   }
 62 | 
 63 |   get page() {
 64 |     return Number(this.$route.params.page) || 1
 65 |   }
 66 | 
 67 |   get maxPage() {
 68 |     return feeds[this.feed].pages
 69 |   }
 70 | 
 71 |   get pageData() {
 72 |     return this.$store.state.feeds[this.feed][this.page]
 73 |   }
 74 | 
 75 |   get displayedItems() {
 76 |     return this.pageData.map(id => this.$store.state.items[id])
 77 |   }
 78 | 
 79 |   get loading() {
 80 |     return this.displayedItems.length === 0
 81 |   }
 82 | 
 83 |   mounted() {
 84 |     this.pageChanged(this.page)
 85 |   }
 86 | 
 87 |   @Watch("page")
 88 |   pageChanged(to, from = -1) {
 89 |     if (to < 0 || to > this.maxPage) {
 90 |       this.$router.replace(`/${this.feed}/1`)
 91 |       return
 92 |     }
 93 | 
 94 |     // Prefetch next page
 95 |     this.$store
 96 |       .dispatch("FETCH_FEED", {
 97 |         feed: this.feed,
 98 |         page: this.page + 1,
 99 |         prefetch: true
100 |       })
101 |       .catch(() => {})
102 | 
103 |     this.transition =
104 |       from === -1 ? null : to > from ? "slide-left" : "slide-right"
105 | 
106 |     this.displayedPage = to
107 |   }
108 | }
109 | </script>
110 | 
111 | <style lang="stylus">
112 | .news-list {
113 |   background-color: #fff;
114 |   border-radius: 2px;
115 | }
116 | 
117 | .news-list {
118 |   margin: 10px 0;
119 |   width: 100%;
120 |   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
121 | 
122 |   ul {
123 |     list-style-type: none;
124 |     padding: 0;
125 |     margin: 0;
126 |   }
127 | }
128 | 
129 | .slide-left-enter, .slide-right-leave-to {
130 |   opacity: 0;
131 |   transform: translate(30px, 0);
132 | }
133 | 
134 | .slide-left-leave-to, .slide-right-enter {
135 |   opacity: 0;
136 |   transform: translate(-30px, 0);
137 | }
138 | 
139 | .item-move, .item-enter-active, .item-leave-active {
140 |   transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
141 | }
142 | 
143 | .item-enter {
144 |   opacity: 0;
145 |   transform: translate(30px, 0);
146 | }
147 | 
148 | .item-leave-active {
149 |   position: absolute;
150 |   opacity: 0;
151 |   transform: translate(30px, 0);
152 | }
153 | 
154 | @media (max-width: 600px) {
155 |   .news-list {
156 |     margin: 10px 0;
157 |   }
158 | }
159 | </style>
160 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Vue, Component } from "vue-property-decorator"
 2 | import { validFeeds } from "~/common/api"
 3 | 
 4 | @Component({
 5 |   fetch({ redirect }) {
 6 |     redirect("/" + validFeeds[0])
 7 |   }
 8 | })
 9 | export default class Index extends Vue {}
10 | 


--------------------------------------------------------------------------------
/pages/item/_id.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="item-view view">
  3 |     <div class="item-view-header">
  4 |       <a :href="item.url" target="_blank">
  5 |         <h1 v-html="item.title"/>
  6 |       </a>
  7 |       <span v-if="item.url" class="host">({{ item.url | host }})</span>
  8 |       <p class="meta">
  9 |         {{ item.points }} points | by
 10 |         <router-link :to="'/user/' + item.user">{{ item.user }}</router-link>
 11 |         {{ item.time | timeAgo }} ago
 12 |       </p>
 13 |     </div>
 14 |     <div class="item-view-comments">
 15 |       <lazy-wrapper :loading="item.loading">
 16 |         <p class="item-view-comments-header">
 17 |           {{
 18 |           item.comments
 19 |           ? item.comments.length + " comments"
 20 |           : "No comments yet."
 21 |           }}
 22 |         </p>
 23 |         <ul class="comment-children">
 24 |           <comment v-for="comment in item.comments" :key="comment.id" :comment="comment"/>
 25 |         </ul>
 26 |       </lazy-wrapper>
 27 |     </div>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script lang="ts">
 32 | import { Component, Vue } from "vue-property-decorator"
 33 | 
 34 | import Comment from "~/components/comment.vue"
 35 | import LazyWrapper from "~/components/lazy-wrapper.vue"
 36 | 
 37 | @Component({
 38 |   components: {
 39 |     Comment,
 40 |     LazyWrapper
 41 |   },
 42 |   head(this: ItemView) {
 43 |     return {
 44 |       title: this.item.title
 45 |     }
 46 |   },
 47 |   fetch({ store, params: { id } }) {
 48 |     return store.dispatch("FETCH_ITEM", { id })
 49 |   }
 50 | })
 51 | export default class ItemView extends Vue {
 52 |   get id() {
 53 |     return this.$route.params.id
 54 |   }
 55 | 
 56 |   get item() {
 57 |     return this.$store.state.items[this.id]
 58 |   }
 59 | }
 60 | </script>
 61 | 
 62 | <style lang="stylus">
 63 | .item-view-header {
 64 |   background-color: #fff;
 65 |   padding: 1.8em 2em 1em;
 66 |   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 67 | 
 68 |   h1 {
 69 |     display: inline;
 70 |     font-size: 1.5em;
 71 |     margin: 0;
 72 |     margin-right: 0.5em;
 73 |   }
 74 | 
 75 |   .host, .meta, .meta a {
 76 |     color: #595959;
 77 |   }
 78 | 
 79 |   .meta a {
 80 |     text-decoration: underline;
 81 |   }
 82 | }
 83 | 
 84 | .item-view-comments {
 85 |   background-color: #fff;
 86 |   margin-top: 10px;
 87 |   padding: 0 2em 0.5em;
 88 | }
 89 | 
 90 | .item-view-comments-header {
 91 |   margin: 0;
 92 |   font-size: 1.1em;
 93 |   padding: 1em 0;
 94 |   position: relative;
 95 | 
 96 |   .spinner {
 97 |     display: inline-block;
 98 |     margin: -15px 0;
 99 |   }
100 | }
101 | 
102 | .comment-children {
103 |   list-style-type: none;
104 |   padding: 0;
105 |   margin: 0;
106 | }
107 | 
108 | @media (max-width: 600px) {
109 |   .item-view-header {
110 |     h1 {
111 |       font-size: 1.25em;
112 |     }
113 |   }
114 | }
115 | </style>
116 | 


--------------------------------------------------------------------------------
/pages/user/_id.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="user-view view">
 3 |     <template v-if="user">
 4 |       <h1>User : {{ user.id }}</h1>
 5 |       <lazy-wrapper :loading="user.loading">
 6 |         <ul class="meta">
 7 |           <li>
 8 |             <span class="label">Created:</span>
 9 |             {{ user.created_time | timeAgo }} ago
10 |           </li>
11 |           <li>
12 |             <span class="label">Karma:</span>
13 |             {{ user.karma || "-" }}
14 |           </li>
15 |           <li v-if="user.about" class="about" v-html="user.about"/>
16 |         </ul>
17 |       </lazy-wrapper>
18 |       <p class="links">
19 |         <a :href="'https://news.ycombinator.com/submitted?id=' + user.id">submissions</a>
20 |         |
21 |         <a :href="'https://news.ycombinator.com/threads?id=' + user.id">comments</a>
22 |       </p>
23 |     </template>
24 |     <template v-else>
25 |       <h1>User not found.</h1>
26 |     </template>
27 |   </div>
28 | </template>
29 | 
30 | <script lang="ts">
31 | import { Component, Vue } from "vue-property-decorator"
32 | import LazyWrapper from "~/components/lazy-wrapper.vue"
33 | 
34 | @Component({
35 |   components: {
36 |     LazyWrapper
37 |   },
38 |   head(this: UserView) {
39 |     return this.user ? this.user.id : "User not found"
40 |   },
41 |   fetch({
42 |     store,
43 |     route: {
44 |       params: { id }
45 |     }
46 |   }) {
47 |     return store.dispatch("FETCH_USER", { id })
48 |   }
49 | })
50 | export default class UserView extends Vue {
51 |   get user() {
52 |     return this.$store.state.users[this.$route.params.id]
53 |   }
54 | }
55 | </script>
56 | 
57 | <style lang="stylus">
58 | .user-view {
59 |   background-color: #fff;
60 |   box-sizing: border-box;
61 |   padding: 2em 3em;
62 | 
63 |   h1 {
64 |     margin: 0;
65 |     font-size: 1.5em;
66 |   }
67 | 
68 |   .meta {
69 |     list-style-type: none;
70 |     padding: 0;
71 |   }
72 | 
73 |   .label {
74 |     display: inline-block;
75 |     min-width: 4em;
76 |   }
77 | 
78 |   .about {
79 |     margin: 1em 0;
80 |   }
81 | 
82 |   .links a {
83 |     text-decoration: underline;
84 |   }
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/plugins/filters.ts:
--------------------------------------------------------------------------------
 1 | import Vue from "vue"
 2 | 
 3 | export function host(url: string) {
 4 |   const hostName = url.replace(/^https?:\/\//, "").replace(/\/.*$/, "")
 5 |   const parts = hostName.split(".").slice(-3)
 6 |   if (parts[0] === "www") parts.shift()
 7 |   return parts.join(".")
 8 | }
 9 | 
10 | export function timeAgo(time: number | Date | undefined) {
11 |   const between = Date.now() / 1000 - Number(time)
12 |   if (between < 3600) {
13 |     return pluralize(~~(between / 60), " minute")
14 |   } else if (between < 86400) {
15 |     return pluralize(~~(between / 3600), " hour")
16 |   } else {
17 |     return pluralize(~~(between / 86400), " day")
18 |   }
19 | }
20 | 
21 | function pluralize(time: number, label: string) {
22 |   if (time === 1) {
23 |     return time + label
24 |   }
25 |   return time + label + "s"
26 | }
27 | 
28 | const filters = {
29 |   host,
30 |   timeAgo
31 | }
32 | export default filters
33 | 
34 | Object.keys(filters).forEach(key => {
35 |   Vue.filter(key, filters[key])
36 | })
37 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuxt-community/hackernews-nuxt-ts/b409a53289372152b8e2becb048596c77d12b49f/static/favicon.ico


--------------------------------------------------------------------------------
/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuxt-community/hackernews-nuxt-ts/b409a53289372152b8e2becb048596c77d12b49f/static/icon.png


--------------------------------------------------------------------------------
/store/index.ts:
--------------------------------------------------------------------------------
  1 | import { MutationTree, ActionTree } from "vuex"
  2 | 
  3 | import Vue from "vue"
  4 | 
  5 | import { validFeeds } from "~/common/api"
  6 | import { lazy } from "~/common/utils"
  7 | // import { CancelToken } from "axios"
  8 | const baseUrl = "https://api.hnpwa.com/v0" // "/api"
  9 | 
 10 | interface Dictionary<T> {
 11 |   [key: string]: T
 12 | }
 13 | 
 14 | // export interface Users {
 15 | //   [key: string]: User
 16 | // }
 17 | export interface User {
 18 |   created: string
 19 |   created_time: number
 20 |   id: string
 21 |   karma: number
 22 | }
 23 | 
 24 | export interface Items {
 25 |   [key: number]: Item
 26 | }
 27 | export interface Item {
 28 |   comments: any[]
 29 |   comments_count: number
 30 |   content: string
 31 |   domain: string
 32 |   id: number
 33 |   points: number
 34 |   time: number | Date | undefined
 35 |   time_ago: string
 36 |   title: string
 37 |   type: string
 38 |   url: string
 39 |   user: string
 40 | }
 41 | 
 42 | // export interface Feeds {
 43 | //   [key: string]: Feed
 44 | // }
 45 | export interface Feed {
 46 |   comments_count: number
 47 |   domain: string
 48 |   id: number
 49 |   points: number
 50 |   time: number | Date | undefined
 51 |   time_ago: string
 52 |   title: string
 53 |   type: string
 54 |   url: string
 55 |   user: string
 56 | }
 57 | 
 58 | export interface IRootState {
 59 |   items: Items
 60 |   users: Dictionary<User>
 61 |   feeds: Dictionary<Feed>
 62 | }
 63 | // =================================================
 64 | // State
 65 | // =================================================
 66 | const s = (): IRootState => {
 67 |   const state = {
 68 |     items: {
 69 |       /* [id: number]: Item */
 70 |     },
 71 |     users: {
 72 |       /* [id: string]: User */
 73 |     },
 74 |     feeds: {
 75 |       /* [page: number] : [ [id: number] ] */
 76 |     }
 77 |   }
 78 | 
 79 |   validFeeds.forEach((feed: string) => {
 80 |     state.feeds[feed] = {}
 81 |   })
 82 | 
 83 |   return state
 84 | }
 85 | 
 86 | // =================================================
 87 | // Mutations
 88 | // =================================================
 89 | const mutations: MutationTree<IRootState> = {
 90 |   SET_FEED: (state, { feed, ids, page }) => {
 91 |     Vue.set(state.feeds[feed], page, ids)
 92 |   },
 93 |   SET_ITEM: (state, { item }: { item: Item }) => {
 94 |     if (item) {
 95 |       Vue.set(state.items as Item[], item.id, item)
 96 |     }
 97 |   },
 98 |   SET_ITEMS: (state, { items }: { items: Item[] }) => {
 99 |     items.forEach(item => {
100 |       if (item) {
101 |         Vue.set(state.items as Item[], item.id, item)
102 |       }
103 |     })
104 |   },
105 |   SET_USER: (state, { id, user }: { id: string; user: User }) => {
106 |     Vue.set(state.users, id, user || false) /* false means user not found */
107 |   }
108 | }
109 | 
110 | // =================================================
111 | // Actions
112 | // =================================================
113 | const actions: ActionTree<IRootState, any> = {
114 |   FETCH_FEED({ commit, state }, { feed, page, prefetch }) {
115 |     // Don't priorotize already fetched feeds
116 |     if (state.feeds[feed][page] && state.feeds[feed][page].length) {
117 |       prefetch = true
118 |     }
119 |     if (!prefetch) {
120 |       if ((this as any).feedCancelSource) {
121 |         ;(this as any).feedCancelSource.cancel(
122 |           "prioritize feed: " + feed + " page: " + page
123 |         )
124 |       }
125 | 
126 |       // ;(this as any).feedCancelSource = new CancelToken.source()
127 |     }
128 | 
129 |     return lazy(
130 |       items => {
131 |         const ids = items.map(item => item.id)
132 |         commit("SET_FEED", { feed, ids, page })
133 |         commit("SET_ITEMS", { items })
134 |       },
135 |       () =>
136 |         (this as any).$axios.$get(`${baseUrl}/${feed}/${page}.json`, {
137 |           cancelToken:
138 |             (this as any).feedCancelSource &&
139 |             (this as any).feedCancelSource.token
140 |         }),
141 |       (state.feeds[feed][page] || []).map(id => state.items[id])
142 |     )
143 |   },
144 | 
145 |   FETCH_ITEM({ commit, state }, { id }) {
146 |     return lazy(
147 |       item => commit("SET_ITEM", { item }),
148 |       () => (this as any).$axios.$get(`${baseUrl}/item/${id}.json`),
149 |       Object.assign({ id, loading: true, comments: [] }, state.items[id])
150 |     )
151 |   },
152 | 
153 |   FETCH_USER({ state, commit }, { id }) {
154 |     return lazy(
155 |       user => commit("SET_USER", { id, user }),
156 |       () => (this as any).$axios.$get(`${baseUrl}/user/${id}.json`),
157 |       Object.assign({ id, loading: true }, state.users[id])
158 |     )
159 |   }
160 | }
161 | 
162 | export { s as state, actions, mutations }
163 | 


--------------------------------------------------------------------------------
/tests/__snapshots__/comment.spec.ts.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Comment snapshot 1`] = `
 4 | <li class="comment">
 5 |   <div class="by"><a>thecosas</a>
 6 |     1545943367 ago
 7 |   </div>
 8 |   <div class="text">
 9 |     <p>Test</p>
10 |   </div>
11 |   <!---->
12 |   <ul class="comment-children"></ul>
13 | </li>
14 | `;
15 | 


--------------------------------------------------------------------------------
/tests/__snapshots__/spinner.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 | 
3 | exports[`Spinner snapshot 1`] = `
4 | <svg width="44px" height="44px" viewBox="0 0 44 44" class="spinner show">
5 |   <circle fill="none" stroke-width="4" stroke-linecap="round" cx="22" cy="22" r="20" class="path"></circle>
6 | </svg>
7 | `;
8 | 


--------------------------------------------------------------------------------
/tests/comment.spec.ts:
--------------------------------------------------------------------------------
 1 | let jsData = {
 2 |   id: 18772478,
 3 |   user: "thecosas",
 4 |   time: 1545943367,
 5 |   time_ago: "19 hours ago",
 6 |   type: "comment",
 7 |   content: "<p>Test</p>",
 8 |   comments: [],
 9 |   comments_count: 0,
10 |   level: 0,
11 |   url: "item?id=18772478"
12 | }
13 | 
14 | import { shallowMount, RouterLinkStub } from "@vue/test-utils"
15 | import Comment from "@/components/comment.vue"
16 | // import { timeAgo } from "../plugins/filters"
17 | 
18 | describe("Comment", () => {
19 |   let wrapper
20 | 
21 |   beforeEach(() => {
22 |     wrapper = shallowMount(Comment, {
23 |       propsData: {
24 |         comment: jsData
25 |       },
26 |       stubs: {
27 |         RouterLink: RouterLinkStub
28 |       },
29 |       filters: {
30 |         timeAgo(value) {
31 |           return value
32 |         }
33 |       }
34 |     })
35 |   })
36 | 
37 |   test("snapshot", () => {
38 |     expect(wrapper.html()).toMatchSnapshot()
39 |   })
40 | 
41 |   // it's also easy to check for the existence of elements
42 | 
43 |   it("renders Comment", () => {
44 |     //console.log(wrapper.html())
45 |     expect(wrapper.find("div.text *").html()).toBe(jsData.content)
46 |   })
47 | })
48 | 


--------------------------------------------------------------------------------
/tests/spinner.spec.ts:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from "@vue/test-utils"
 2 | import Spinner from "@/components/spinner.vue"
 3 | 
 4 | describe("Spinner", () => {
 5 |   //   let wrapper = null
 6 | 
 7 |   beforeEach(() => {
 8 |     //wrapper = shallowMount(Spinner)
 9 |   })
10 | 
11 |   test("snapshot", () => {
12 |     expect(
13 |       shallowMount(Spinner, {
14 |         propsData: {
15 |           show: true
16 |         }
17 |       }).html()
18 |     ).toMatchSnapshot()
19 |   })
20 | 
21 |   // it's also easy to check for the existence of elements
22 | 
23 |   it("renders SVG if show", () => {
24 |     const wrapper = shallowMount(Spinner, {
25 |       propsData: {
26 |         show: true
27 |       }
28 |     })
29 | 
30 |     expect(wrapper.find("svg").isVisible()).toBe(true)
31 |   })
32 | 
33 |   it("doesn't render svg if show false", () => {
34 |     const wrapper = shallowMount(Spinner, {
35 |       propsData: {
36 |         show: false
37 |       }
38 |     })
39 | 
40 |     expect(wrapper.find("svg").isVisible()).toBe(false)
41 |   })
42 | 
43 |   afterEach(() => {
44 |     // wrapper = null
45 |   })
46 | })
47 | 


--------------------------------------------------------------------------------
/tests/sum.spec.ts:
--------------------------------------------------------------------------------
1 | import sum from "./sum"
2 | 
3 | describe("sum", () => {
4 |   it("create sum of 2 numbers", () => {
5 |     expect(sum(15, 8)).toBe(23)
6 |   })
7 | })
8 | 


--------------------------------------------------------------------------------
/tests/sum.ts:
--------------------------------------------------------------------------------
1 | export default function sum(a: number, b: number): number {
2 |   return a + b
3 | }
4 | 


--------------------------------------------------------------------------------
/tests/vue-shims.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.vue" {
2 |   import Vue from "vue"
3 |   export default Vue
4 | }
5 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "moduleResolution": "node",
 6 |     "lib": [
 7 |       "esnext",
 8 |       "esnext.asynciterable",
 9 |       "dom"
10 |     ],
11 |     "esModuleInterop": true,
12 |     "experimentalDecorators": true,
13 |     "allowJs": true,
14 |     "sourceMap": true,
15 |     "strict": true,
16 |     "noImplicitAny": false,
17 |     "noEmit": true,
18 |     "baseUrl": ".",
19 |     "paths": {
20 |       "~/*": [
21 |         "./*"
22 |       ],
23 |       "@/*": [
24 |         "./*"
25 |       ]
26 |     },
27 |     "types": [
28 |       "@types/jest",
29 |       "@types/node",
30 |       "@nuxt/vue-app"
31 |     ]
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "defaultSeverity": "warning",
 3 |   "extends": [
 4 |     "tslint:recommended",
 5 |     "tslint-config-prettier"
 6 |   ],
 7 |   "rulesDirectory": ["tslint-plugin-prettier"],
 8 |   "jsRules": {
 9 |     "object-literal-sort-keys": false,
10 |     "ordered-imports": false,
11 |     "no-console": false,
12 |     "no-shadowed-variable": false,
13 |     "no-empty": [true, "allow-empty-functions"],
14 |     "curly": [true, "ignore-same-line"]
15 |   },
16 |   "rules": {
17 |     "prettier": true,
18 |     "member-access": [true, "no-public"],
19 |     "variable-name": [true, "allow-leading-underscore"],
20 |     "interface-name": false,
21 |     "object-literal-sort-keys": false,
22 |     "ordered-imports": false,
23 |     "no-console": false,
24 |     "no-empty": [true, "allow-empty-functions"],
25 |     "curly": [true, "ignore-same-line"],
26 |     "no-bitwise": false
27 |   },
28 |   "linterOptions": {
29 |     "exclude": [
30 |       "node_modules/**",
31 |       "dist/**",
32 |       "dist.js/**",
33 |       ".nuxt/**",
34 |       "tests/**"
35 |     ]
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------