From 900a66183fb4b349aa0aa06655c831bf58c4686f Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Tue, 19 Jul 2022 16:41:34 +0200
Subject: [PATCH] refactor: better type inference

---
 packages/playground/App.vue       | 233 ------------------------------
 packages/playground/src/App.vue   |  44 +++---
 packages/router/src/RouterView.ts |  13 +-
 3 files changed, 30 insertions(+), 260 deletions(-)
 delete mode 100644 packages/playground/App.vue

diff --git a/packages/playground/App.vue b/packages/playground/App.vue
deleted file mode 100644
index 05014616..00000000
--- a/packages/playground/App.vue
+++ /dev/null
@@ -1,233 +0,0 @@
-<template>
-  <div>
-    <pre>{{ currentLocation }}</pre>
-    <section class="info">
-      Name:
-      <pre id="name">{{ currentLocation.name }}</pre>
-    </section>
-
-    <section class="info">
-      Params:
-      <pre id="params">{{ currentLocation.params }}</pre>
-    </section>
-
-    <section class="info">
-      Query:
-      <pre id="query">{{ currentLocation.query }}</pre>
-    </section>
-
-    <section class="info">
-      Hash:
-      <pre id="hash">{{ currentLocation.hash }}</pre>
-    </section>
-
-    <section class="info">
-      FullPath:
-      <pre id="fullPath">{{ currentLocation.fullPath }}</pre>
-    </section>
-
-    <section class="info">
-      path:
-      <pre id="path">{{ currentLocation.path }}</pre>
-    </section>
-
-    <hr />
-
-    <label>
-      <input type="checkbox" v-model="state.cancelNextNavigation" /> Cancel Next
-      Navigation
-    </label>
-    <ul>
-      <li>
-        <router-link to="/n/%E2%82%AC">/n/%E2%82%AC</router-link>
-      </li>
-      <li>
-        <router-link :to="{ name: 'docs', params: { id: '€uro' } }"
-          >/docs/€uro (object)</router-link
-        >
-      </li>
-      <li>
-        <router-link :to="{ path: '/', query: { currency: '€uro', é: 'e' } }"
-          >/currency=€uro&é=e (object)</router-link
-        >
-      </li>
-      <li>
-        <router-link to="/documents/€">/n/€</router-link>
-      </li>
-      <li>
-        <a href="/documents/%E2%82%AC">/documents/%E2%82%AC (force reload)</a>
-      </li>
-      <li>
-        <a href="/documents/€">/documents/€ (force reload): not valid tho</a>
-      </li>
-      <li>
-        <router-link to="/home">Home (redirects)</router-link>
-      </li>
-      <li>
-        <router-link to="/">Home</router-link>
-      </li>
-      <li>
-        <AppLink to="/">AppLink Home</AppLink>
-      </li>
-      <li>
-        <router-link to="/always-redirect">/always-redirect</router-link>
-      </li>
-      <li>
-        <router-link to="/children">/children</router-link>
-      </li>
-      <li>
-        <router-link to="/children/alias">/children/alias</router-link>
-      </li>
-      <li>
-        <router-link :to="{ name: 'default-child' }"
-          >/children (child named)</router-link
-        >
-      </li>
-      <li>
-        <router-link :to="{ name: 'WithChildren' }"
-          >/children (parent named)</router-link
-        >
-      </li>
-      <li>
-        <router-link to="/children/a">/children/a</router-link>
-      </li>
-      <li>
-        <router-link to="/children/b">/children/b</router-link>
-      </li>
-      <li>
-        <router-link to="/children/b/a2">/children/b/a2</router-link>
-      </li>
-      <li>
-        <router-link to="/children/b/b2">/children/b/b2</router-link>
-      </li>
-      <li>
-        <router-link to="/nested">/nested</router-link>
-      </li>
-      <li>
-        <router-link to="/anidado">/anidado</router-link>
-      </li>
-      <li>
-        <router-link to="/long-0">/long-0</router-link>
-      </li>
-      <li>
-        <router-link to="/users/5">/users/5</router-link>
-      </li>
-      <li>
-        <router-link
-          :to="{
-            name: 'user',
-            params: { id: '' + (Number(currentLocation.params.id || 0) + 1) },
-          }"
-          >/users/{{ Number(currentLocation.params.id || 0) + 1 }}</router-link
-        >
-      </li>
-      <li>
-        <router-link to="/with-data">/with-data</router-link>
-      </li>
-      <li>
-        <router-link to="/cant-leave">/cant-leave</router-link>
-      </li>
-      <li>
-        <router-link :to="{ name: 'docs', params: { id: 'é' } }"
-          >/docs/é</router-link
-        >
-      </li>
-      <li>
-        <router-link to="/rep">/rep</router-link>
-      </li>
-      <li>
-        <router-link to="/rep/a">/rep/a</router-link>
-      </li>
-      <li>
-        <router-link to="/rep/a/b">/rep/a/b</router-link>
-      </li>
-      <li>
-        <router-link to="/parent/1">/parent/1</router-link>
-      </li>
-      <li>
-        <router-link to="/p/1">/p/1</router-link>
-      </li>
-      <li>
-        <router-link to="/parent/1/as-absolute-a"
-          >/parent/1/as-absolute-a</router-link
-        >
-      </li>
-      <li>
-        <router-link to="/p/1/as-absolute-a">/p/1/as-absolute-a</router-link>
-      </li>
-      <li>
-        <router-link to="/p_1/absolute-a">/p_1/absolute-a</router-link>
-      </li>
-    </ul>
-    <button @click="toggleViewName">Toggle view</button>
-    <Suspense>
-      <template #default>
-        <router-view :name="viewName" v-slot="{ Component, route }">
-          <transition
-            :name="route.meta.transition || 'fade'"
-            mode="out-in"
-            @before-enter="flushWaiter"
-            @before-leave="setupWaiter"
-          >
-            <keep-alive>
-              <component
-                :is="Component"
-                :key="route.name === 'repeat' ? route.path : undefined"
-              />
-            </keep-alive>
-          </transition>
-        </router-view>
-      </template>
-      <template #fallback> Loading... </template>
-    </Suspense>
-  </div>
-</template>
-
-<script>
-import { defineComponent, inject, computed, ref } from 'vue'
-import { scrollWaiter } from './scrollWaiter'
-import { useLink, useRoute } from 'vue-router'
-import AppLink from './AppLink.vue'
-
-export default defineComponent({
-  name: 'App',
-  components: { AppLink },
-  setup() {
-    const route = useRoute()
-    const state = inject('state')
-    const viewName = ref('default')
-
-    useLink({ to: '/' })
-    useLink({ to: '/documents/hello' })
-    useLink({ to: '/children' })
-
-    const currentLocation = computed(() => {
-      const { matched, ...rest } = route
-      return rest
-    })
-
-    function flushWaiter() {
-      scrollWaiter.flush()
-    }
-    function setupWaiter() {
-      scrollWaiter.add()
-    }
-
-    const nextUserLink = computed(
-      () => '/users/' + String((Number(route.value.params.id) || 0) + 1)
-    )
-
-    return {
-      currentLocation,
-      nextUserLink,
-      state,
-      flushWaiter,
-      setupWaiter,
-      viewName,
-      toggleViewName() {
-        viewName.value = viewName.value === 'default' ? 'other' : 'default'
-      },
-    }
-  },
-})
-</script>
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 05014616..b686c0c5 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -160,30 +160,30 @@
       </li>
     </ul>
     <button @click="toggleViewName">Toggle view</button>
-    <Suspense>
-      <template #default>
-        <router-view :name="viewName" v-slot="{ Component, route }">
-          <transition
-            :name="route.meta.transition || 'fade'"
-            mode="out-in"
-            @before-enter="flushWaiter"
-            @before-leave="setupWaiter"
-          >
-            <keep-alive>
-              <component
-                :is="Component"
-                :key="route.name === 'repeat' ? route.path : undefined"
-              />
-            </keep-alive>
-          </transition>
-        </router-view>
-      </template>
-      <template #fallback> Loading... </template>
-    </Suspense>
+    <RouterView :name="viewName" v-slot="{ Component, route }">
+      <Transition
+        :name="route.meta.transition || 'fade'"
+        mode="out-in"
+        @before-enter="flushWaiter"
+        @before-leave="setupWaiter"
+      >
+        <!-- <KeepAlive> -->
+        <Suspense>
+          <template #default>
+            <component
+              :is="Component"
+              :key="route.name === 'repeat' ? route.path : route.meta.key"
+            />
+          </template>
+          <template #fallback> Loading... </template>
+        </Suspense>
+        <!-- </KeepAlive> -->
+      </Transition>
+    </RouterView>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, inject, computed, ref } from 'vue'
 import { scrollWaiter } from './scrollWaiter'
 import { useLink, useRoute } from 'vue-router'
@@ -214,7 +214,7 @@ export default defineComponent({
     }
 
     const nextUserLink = computed(
-      () => '/users/' + String((Number(route.value.params.id) || 0) + 1)
+      () => '/users/' + String((Number(route.params.id) || 0) + 1)
     )
 
     return {
diff --git a/packages/router/src/RouterView.ts b/packages/router/src/RouterView.ts
index 985e29fb..d107e231 100644
--- a/packages/router/src/RouterView.ts
+++ b/packages/router/src/RouterView.ts
@@ -61,7 +61,9 @@ export const RouterViewImpl = /*#__PURE__*/ defineComponent({
     __DEV__ && warnDeprecatedUsage()
 
     const injectedRoute = inject(routerViewLocationKey)!
-    const routeToDisplay = computed(() => props.route || injectedRoute.value)
+    const routeToDisplay = computed<RouteLocationNormalizedLoaded>(
+      () => props.route || injectedRoute.value
+    )
     const injectedDepth = inject(viewDepthKey, 0)
     // The depth changes based on empty components option, which allows passthrough routes e.g. routes with children
     // that are used to reuse the `path` property
@@ -134,18 +136,19 @@ export const RouterViewImpl = /*#__PURE__*/ defineComponent({
 
     return () => {
       const route = routeToDisplay.value
-      const matchedRoute = matchedRouteRef.value
-      const ViewComponent = matchedRoute && matchedRoute.components![props.name]
       // we need the value at the time we render because when we unmount, we
       // navigated to a different location so the value is different
       const currentName = props.name
+      const matchedRoute = matchedRouteRef.value
+      const ViewComponent =
+        matchedRoute && matchedRoute.components![currentName]
 
       if (!ViewComponent) {
         return normalizeSlot(slots.default, { Component: ViewComponent, route })
       }
 
       // props from route configuration
-      const routePropsOption = matchedRoute!.props[props.name]
+      const routePropsOption = matchedRoute.props[currentName]
       const routeProps = routePropsOption
         ? routePropsOption === true
           ? route.params
@@ -157,7 +160,7 @@ export const RouterViewImpl = /*#__PURE__*/ defineComponent({
       const onVnodeUnmounted: VNodeProps['onVnodeUnmounted'] = vnode => {
         // remove the instance reference to prevent leak
         if (vnode.component!.isUnmounted) {
-          matchedRoute!.instances[currentName] = null
+          matchedRoute.instances[currentName] = null
         }
       }
 
-- 
2.47.2