chore(playground): upgrade to script setup syntax and TypeScript

packages/playground/src/AppLink.vue

@@ -6,7 +6,7 @@
     :class="classes"
     target="_blank"
     rel="noopener noreferrer"
-    :href="to"
+    :href="String(to)"
     :tabindex="disabled ? -1 : undefined"
     :aria-disabled="disabled"
   >
@@ -26,38 +26,30 @@
   </a>
 </template>
 
-<script>
-import { RouterLink, START_LOCATION, useLink, useRoute } from 'vue-router'
-import { computed, defineComponent, toRefs } from 'vue'
+<script setup lang="ts">
+import { START_LOCATION, useLink, useRoute } from 'vue-router'
+import { computed, useAttrs,  } from 'vue'
+import type { RouterLinkProps } from 'vue-router'
 
-export default defineComponent({
-  props: {
-    ...RouterLink.props,
-    disabled: Boolean,
-  },
+const { replace, to, disabled } = defineProps<RouterLinkProps & {disabled?: boolean}>()
+const attrs = useAttrs()
 
-  setup(props, { attrs }) {
-    const { replace, to, disabled } = toRefs(props)
-    const isExternalLink = computed(
-      () => typeof to.value === 'string' && to.value.startsWith('http')
-    )
+const isExternalLink = computed(
+  () => typeof to === 'string' && to.startsWith('http')
+)
 
-    const currentRoute = useRoute()
+const currentRoute = useRoute()
 
-    const { route, href, isActive, isExactActive, navigate } = useLink({
-      to: computed(() => (isExternalLink.value ? START_LOCATION : to.value)),
-      replace,
-    })
-
-    const classes = computed(() => ({
-      // allow link to be active for unrelated routes
-      'router-link-active':
-        isActive.value || currentRoute.path.startsWith(route.value.path),
-      'router-link-exact-active':
-        isExactActive.value || currentRoute.path === route.value.path,
-    }))
-
-    return { attrs, isExternalLink, href, navigate, classes, disabled }
-  },
+const { route, href, isActive, isExactActive, navigate } = useLink({
+  to: computed(() => (isExternalLink.value ? START_LOCATION : to)),
+  replace,
 })
+
+const classes = computed(() => ({
+  // allow link to be active for unrelated routes
+  'router-link-active':
+    isActive.value || currentRoute.path.startsWith(route.value.path),
+  'router-link-exact-active':
+    isExactActive.value || currentRoute.path === route.value.path,
+}))
 </script>

packages/playground/src/main.ts

@@ -45,6 +45,30 @@ export interface RouteNamedMap {
     { path: ParamValue<true> },
     { path: ParamValue<false> }
   >
+  long: RouteRecordInfo<
+    'long',
+    '/long-:n(\\d+)',
+    { n: ParamValue<true> },
+    { n: ParamValue<false> }
+  >
+  Nested: RouteRecordInfo<
+    'Nested',
+    '/nested',
+    Record<never, never>,
+    Record<never, never>
+  >
+  'absolute-child': RouteRecordInfo<
+    'absolute-child',
+    '/nested/also-as-absolute',
+    Record<never, never>,
+    Record<never, never>
+  >
+  repeat: RouteRecordInfo<
+    'repeat',
+    '/rep/:a*',
+    { a: ParamValue<true> },
+    { a: ParamValue<false> }
+  >
 }
 
 declare module 'vue-router' {

packages/playground/src/views/ComponentWithData.vue

@@ -5,15 +5,15 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, toRefs, reactive } from 'vue'
 import { getData, delay } from '../api'
 import { onBeforeRouteUpdate } from 'vue-router'
 
-export default defineComponent({
+const ComponentWithData = defineComponent({
   name: 'ComponentWithData',
   async setup() {
-    const data = reactive({ other: 'old', fromApi: null })
+    const data = reactive<{ other: string, fromApi: null | {message: string, time: number }}>({ other: 'old', fromApi: null })
 
     onBeforeRouteUpdate(async (to, from, next) => {
       data.fromApi = await getData()
@@ -30,9 +30,12 @@ export default defineComponent({
     console.log('this in beforeRouteEnter', this)
     await delay(300)
     next(vm => {
-      console.log('got vm', vm)
-      vm.other = 'Hola'
+      console.log('got vm', vm);
+      // Workaround for https://github.com/vuejs/router/issues/701
+      (vm as InstanceType<typeof ComponentWithData>).other = 'Hola'
     })
   },
 })
+
+export default ComponentWithData
 </script>

packages/playground/src/views/Dynamic.vue

@@ -2,10 +2,4 @@
   <div>This was added dynamically</div>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'Dynamic',
-})
-</script>
+<script setup lang="ts"></script>

packages/playground/src/views/Generic.vue

@@ -5,10 +5,4 @@
   </section>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'Generic',
-})
-</script>
+<script setup lang="ts"></script>

packages/playground/src/views/GuardedWithLeave.vue

@@ -5,26 +5,18 @@
   </div>
 </template>
 
-<script>
-// @ts-check
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue'
 import { onBeforeRouteLeave } from 'vue-router'
 
-export default defineComponent({
-  name: 'GuardedWithLeave',
-  data: () => ({ tries: 0 }),
+const tries = ref(0)
 
-  setup() {
-    console.log('setup in cant leave')
-    onBeforeRouteLeave(function (to, from, next) {
-      if (window.confirm('Do you really want to leave?')) next()
-      else {
-        // @ts-ignore
-        this.tries++
-        next(false)
-      }
-    })
-    return {}
-  },
+console.log('setup in cant leave')
+onBeforeRouteLeave((to, from, next) => {
+  if (window.confirm('Do you really want to leave?')) next()
+  else {
+    tries.value++
+    next(false)
+  }
 })
 </script>

packages/playground/src/views/Home.vue

@@ -8,7 +8,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, getCurrentInstance, ref } from 'vue'
 
 export default defineComponent({
@@ -22,7 +22,7 @@ export default defineComponent({
   setup() {
     const me = getCurrentInstance()
 
-    function log(value) {
+    function log(value: any) {
       console.log(value)
       return value
     }

packages/playground/src/views/LongView.vue

@@ -13,15 +13,8 @@
   </section>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { useRoute } from 'vue-router'
 
-export default defineComponent({
-  name: 'LongView',
-  setup() {
-    const route = useRoute()
-    return { route }
-  },
-})
+const route = useRoute<'long'>()
 </script>

packages/playground/src/views/Nested.vue

@@ -60,18 +60,9 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, inject, provide } from 'vue'
+<script setup lang="ts">
+import { inject, provide } from 'vue'
 
-export default defineComponent({
-  name: 'Nested',
-  setup() {
-    const level = inject('level', 1)
-    provide('level', level + 1)
-
-    return {
-      level,
-    }
-  },
-})
+const level = inject('level', 1)
+provide('level', level + 1)
 </script>

packages/playground/src/views/NestedWithId.vue

@@ -17,20 +17,11 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { defineComponent, inject, provide } from 'vue'
 
-export default defineComponent({
-  props: ['id'],
-  name: 'NestedWithId',
-  setup(props) {
-    const level = inject('level', 1)
-    provide('level', level + 1)
+const props = defineProps<{id: string}>()
 
-    return {
-      props,
-      level,
-    }
-  },
-})
+const level = inject('level', 1)
+provide('level', level + 1)
 </script>

packages/playground/src/views/NotFound.vue

@@ -2,15 +2,8 @@
   <div>Not Found: {{ route.fullPath }}</div>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { useRoute } from 'vue-router'
 
-export default defineComponent({
-  name: 'NotFound',
-  setup() {
-    const route = useRoute()
-    return { route }
-  },
-})
+const route = useRoute()
 </script>

packages/playground/src/views/RepeatedParams.vue

@@ -9,31 +9,24 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, computed } from 'vue'
+<script setup lang="ts">
+import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
-export default defineComponent({
-  name: 'RepeatedParams',
+const route = useRoute<'repeat'>()
 
-  setup() {
-    const route = useRoute()
+const lessNesting = computed(() => {
+  const a = [...(route.params.a || [])]
+  a.pop()
 
-    const lessNesting = computed(() => {
-      const a = [...(route.params.a || [])]
-      a.pop()
-
-      return { params: { a } }
-    })
-
-    const moreNesting = computed(() => {
-      const a = [...(route.params.a || [])]
-      a.push('more')
+  return { params: { a } }
+})
 
-      return { params: { a } }
-    })
+const moreNesting = computed(() => {
+  const a = [...(route.params.a || [])]
+  a.push('more')
 
-    return { lessNesting, moreNesting }
-  },
+  return { params: { a } }
 })
+
 </script>

packages/playground/src/views/User.vue

@@ -2,20 +2,15 @@
   <div>User: {{ id }}</div>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { onBeforeRouteUpdate } from 'vue-router'
 
-export default defineComponent({
-  name: 'User',
-  props: {
-    id: String,
-  },
+defineProps<{ id: string }>()
 
-  beforeRouteUpdate(to, from, next) {
-    console.log('in beforeRouteUpdate this', this)
+onBeforeRouteUpdate((to, from, next) => {
+  console.log('in beforeRouteUpdate this', this)
     next(vm => {
       console.log('in next callback', vm)
     })
-  },
 })
 </script>