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

Upgrade the playground package to use the `<script setup>` syntax and
TypeScript. This change makes the playground more consistent with recent
Vue.js practices and improves type safety.

Keep the purpose of each example identical to the original examples as
much as possible. Therefore, components using `beforeRouteEnter()`,
[which does not have a `<script setup>`
equivalent](#1517), are not
converted to `<script setup>` syntax but are only converted to use
TypeScript for improved type safety (Home.vue and
ComponentWithData.vue). Converting these to use the [recommended data
loaders or
`defineMacro()`](#1517 (comment))
could be an option in the future.

Update `RouteNamedMap` in main.ts to improve type safety and better
demonstrate the newer typed routes feature (introduced in
[email protected]) in LongView.vue, Nested.vue, and RepeatedParams.vue.

Fix type issue in AppLink.vue where `RouterLinkProps` replaces
`RouterLink.props`.

Remove the `name` option from the `defineComponent` calls that used it,
because this option is [only useful when the component recursively calls
itself](https://v2.vuejs.org/v2/api/#name),
but there are not components in this playground project that do so.

Author: curtgrimes

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>