refactor: implement script setup suger for components

.eslintrc

@@ -5,24 +5,20 @@
     "parser": "@typescript-eslint/parser",
     "project": "./tsconfig.json",
     "sourceType": "module",
-    "extraFileExtensions": [
-      ".vue",
-      ".d.ts"
-    ]
+    "extraFileExtensions": [".vue", ".d.ts"]
   },
   "extends": [
     "standard",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    "standard-with-typescript",
-    "plugin:vue/vue3-recommended"
+    "plugin:vue/vue3-recommended",
+    "standard-with-typescript"
   ],
   "rules": {
     "no-undef": "off",
-    "comma-dangle": [
-      "warn",
-      "always-multiline"
-    ],
-    "@typescript-eslint/promise-function-async": "off"
+    "no-unused-vars": "off",
+    "comma-dangle": ["warn", "always-multiline"],
+    "@typescript-eslint/promise-function-async": "off",
+    "@typescript-eslint/no-unused-vars": "off"
   }
-}
+}

README.md

@@ -31,7 +31,7 @@ yarn build
 - [x] Unit test ([Vue Test Utils](https://github.com/vuejs/vue-test-utils-next))
 - [ ] Unit test ([Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro)) (Temporarily unavailable)
 - [x] E2E test ([Cypress](https://docs.cypress.io))
-- [ ] [SFC Script Setup](https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md) (Unstable)
+- [x] [SFC Script Setup](https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md) (Experimental)
 - [x] Vetur Tools: [VTI](https://github.com/mutoe/vue3-realworld-example-app/pull/28) and [optionally IDE hints](https://github.com/mutoe/vue3-realworld-example-app/commit/8367f89a99c467d181d9c7f4144deb05cec55210#commitcomment-43957089)
 
 # Contributors

cypress.json

@@ -1,7 +1,4 @@
 {
   "baseUrl": "https://mutoe.github.io/vue3-realworld-example-app",
-  "experimentalNetworkStubbing": true,
   "chromeWebSecurity": false
-
-
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-realworld-example-app",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "MIT",
   "scripts": {
     "dev": "vite",
@@ -15,8 +15,8 @@
     "@harlem/core": "^1.1.0",
     "deepmerge": "^4.2.2",
     "dompurify": "^2.2.6",
-    "marked": "^2.0.0",
-    "vue": "^3.0.2",
+    "marked": "^1.2.9",
+    "vue": "^3.0.6",
     "vue-router": "^4.0.4"
   },
   "devDependencies": {
@@ -25,6 +25,7 @@
     "@testing-library/vue": "^6.3.4",
     "@types/dompurify": "^2.2.1",
     "@types/jest": "^26.0.20",
+    "@types/marked": "^1.2.2",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
     "@typescript-eslint/parser": "^4.15.2",
     "@vitejs/plugin-vue": "^1.1.4",
@@ -39,14 +40,13 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.3.1",
-    "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-vue": "^7.6.0",
     "husky": "^5.1.1",
     "jest": "^26.6.3",
     "jsdom": "^16.4.0",
     "lint-staged": "^10.5.4",
     "ts-jest": "^26.5.1",
-    "typescript": "^4.1.5",
+    "typescript": "~4.1.5",
     "vite": "^2.0.2",
     "vti": "^0.0.24",
     "vue-jest": "^5.0.0-alpha.8"

src/App.vue

@@ -4,16 +4,7 @@
   <AppFooter />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import AppFooter from './components/AppFooter.vue'
 import AppNavigation from './components/AppNavigation.vue'
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    AppNavigation,
-    AppFooter,
-  },
-})
 </script>

src/components/AppFooter.vue

@@ -21,11 +21,3 @@
     </div>
   </footer>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'AppFooter',
-})
-</script>

src/components/AppLink.vue

@@ -1,29 +1,19 @@
 <template>
-  <router-link
-    :to="to"
-    v-bind="attrs"
-  >
+  <router-link :to="props" v-bind="attrs">
     <slot />
   </router-link>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
-import type { RouteParams } from 'vue-router'
+<script lang="ts" setup>
 import type { AppRouteNames } from '../router'
+import type { RouteParams } from 'vue-router'
+
+import { defineProps, useContext } from 'vue'
 
-export default defineComponent({
-  name: 'AppLink',
-  props: {
-    name: { type: String as PropType<AppRouteNames>, required: true },
-    params: { type: Object as PropType<RouteParams>, default: () => ({}) },
-  },
-  setup (props, { attrs }) {
-    return {
-      to: props,
-      attrs,
-    }
-  },
-})
+const props = defineProps<{
+  name: AppRouteNames
+  params?: RouteParams
+}>()
 
+const { attrs } = useContext()
 </script>

src/components/AppNavigation.vue

@@ -1,42 +1,29 @@
 <template>
   <nav class="navbar navbar-light">
     <div class="container">
-      <AppLink
-        class="navbar-brand"
-        name="global-feed"
-      >
-        conduit
-      </AppLink>
+      <AppLink class="navbar-brand" name="global-feed"> conduit </AppLink>
 
       <ul class="nav navbar-nav pull-xs-right">
-        <li
-          v-for="link in navLinks"
-          :key="link.name"
-          class="nav-item"
-        >
+        <li v-for="link in navLinks" :key="link.name" class="nav-item">
           <AppLink
             class="nav-link"
             active-class="active"
             :name="link.name"
             :params="link.params"
           >
-            <i
-              v-if="link.icon"
-              :class="link.icon"
-            /> {{ link.title }}
+            <i v-if="link.icon" :class="link.icon" /> {{ link.title }}
           </AppLink>
         </li>
       </ul>
     </div>
   </nav>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue'
+<script lang="ts" setup>
 import type { RouteParams } from 'vue-router'
-
 import type { AppRouteNames } from '../router'
 
+import { computed } from 'vue'
 import { user } from '../store/user'
 
 interface NavLink {
@@ -47,55 +34,46 @@ interface NavLink {
   display: 'all' | 'anonym' | 'authorized'
 }
 
-export default defineComponent({
-  name: 'AppNavigation',
-  setup () {
-    const username = computed(() => user.value?.username)
-    const displayStatus = computed(() => username.value ? 'authorized' : 'anonym')
-
-    const allNavLinks = computed<NavLink[]>(() => [
-      {
-        name: 'global-feed',
-        title: 'Home',
-        display: 'all',
-      },
-      {
-        name: 'login',
-        title: 'Sign in',
-        display: 'anonym',
-      },
-      {
-        name: 'register',
-        title: 'Sign up',
-        display: 'anonym',
-      },
-      {
-        name: 'create-article',
-        title: 'New Post',
-        display: 'authorized',
-        icon: 'ion-compose',
-      },
-      {
-        name: 'settings',
-        title: 'Settings',
-        display: 'authorized',
-        icon: 'ion-gear-a',
-      },
-      {
-        name: 'profile',
-        params: { username: username.value },
-        title: username.value || '',
-        display: 'authorized',
-      },
-    ])
-
-    const navLinks = computed(() => allNavLinks.value.filter(
-      l => l.display === displayStatus.value || l.display === 'all',
-    ))
+const username = computed(() => user.value?.username)
+const displayStatus = computed(() => username.value ? 'authorized' : 'anonym')
 
-    return {
-      navLinks,
-    }
+const allNavLinks = computed<NavLink[]>(() => [
+  {
+    name: 'global-feed',
+    title: 'Home',
+    display: 'all',
+  },
+  {
+    name: 'login',
+    title: 'Sign in',
+    display: 'anonym',
+  },
+  {
+    name: 'register',
+    title: 'Sign up',
+    display: 'anonym',
   },
-})
+  {
+    name: 'create-article',
+    title: 'New Post',
+    display: 'authorized',
+    icon: 'ion-compose',
+  },
+  {
+    name: 'settings',
+    title: 'Settings',
+    display: 'authorized',
+    icon: 'ion-gear-a',
+  },
+  {
+    name: 'profile',
+    params: { username: username.value },
+    title: username.value || '',
+    display: 'authorized',
+  },
+])
+
+const navLinks = computed(() => allNavLinks.value.filter(
+  l => l.display === displayStatus.value || l.display === 'all',
+))
 </script>

src/components/AppPagination.vue

@@ -13,31 +13,18 @@
   </ul>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, toRefs } from 'vue'
+<script lang="ts" setup>
+import { computed, defineEmit, defineProps, toRefs } from 'vue'
 import { limit } from '../services'
 
-export default defineComponent({
-  name: 'AppPagination',
-  props: {
-    page: { type: Number, required: true },
-    count: { type: Number, required: true },
-  },
-  emits: {
-    'page-change': (index: number) => typeof index === 'number',
-  },
-  setup (props, { emit }) {
-    const { count, page } = toRefs(props)
-    const pagesCount = computed(() => Math.ceil(count.value / limit))
-    const isActive = (index: number) => page.value === index
-    const onPageChange = (index: number) => emit('page-change', index)
-
-    return {
-      pagesCount,
-      isActive,
-      onPageChange,
-    }
-  },
-})
+const props = defineProps<{
+  page: number
+  count: number
+}>()
+const emit = defineEmit<(e: 'page-change', index: number) => void>()
 
+const { count, page } = toRefs(props)
+const pagesCount = computed(() => Math.ceil(count.value / limit))
+const isActive = (index: number) => page.value === index
+const onPageChange = (index: number) => emit('page-change', index)
 </script>