refactor: proper isBrowser

diff --git a/src/components/View.ts b/src/components/View.ts
index 6da2f73694678a2a994a0af5766bec021a5d672b..113fb2288ce308a7b8cabfcdc351c429792bb691 100644 (file)
--- a/src/components/View.ts
+++ b/src/components/View.ts
@@ -61,15 +61,31 @@ export function useView(options: UseViewOptions) {
     // TODO: watch name to update the instance record
   }
 
-  return (attrs: SetupContext['attrs']) => {
-    return ViewComponent.value
-      ? h(ViewComponent.value as any, {
-          ...propsData.value,
-          ...attrs,
-          onVnodeMounted,
-          ref: viewRef,
-        })
-      : null
+  return (_props: any, { attrs, slots }: SetupContext) => {
+    // we nee the value at the time we render because when we unmount, we
+    // navigated to a different location so the value is different
+    const currentMatched = matchedRoute.value
+    const name = unref(options.name)
+    function onVnodeUnmounted() {
+      if (currentMatched) {
+        // remove the instance reference to prevent leak
+        currentMatched.instances[name] = null
+      }
+    }
+
+    let Component = ViewComponent.value
+    const props: Parameters<typeof h>[1] = {
+      ...(Component && propsData.value),
+      ...attrs,
+      onVnodeMounted,
+      onVnodeUnmounted,
+      ref: viewRef,
+    }
+
+    const children =
+      Component && slots.default && slots.default({ Component, props })
+
+    return children ? children : Component ? h(Component, props) : null
   }
 }
 
@@ -82,10 +98,10 @@ export const View = defineComponent({
     },
   },
 
-  setup(props, { attrs }) {
+  setup(props, context) {
     const route = inject(routeLocationKey)!
     const renderView = useView({ route, name: toRefs(props).name })
 
-    return () => renderView(attrs)
+    return () => renderView(null, context)
   },
 })

diff --git a/src/history/common.ts b/src/history/common.ts
index 3fbdd0a117a8c21d0d5ddad12cfa3335a154fa86..3d8eb28fd6287e13e98dda733174bc7f0c893560 100644 (file)
--- a/src/history/common.ts
+++ b/src/history/common.ts
@@ -1,3 +1,5 @@
+import { isBrowser } from '../utils'
+
 interface HistoryLocation {
   fullPath: string
   state?: HistoryState
@@ -154,7 +156,7 @@ export function normalizeHistoryLocation(
  */
 export function normalizeBase(base?: string): string {
   if (!base) {
-    if (__BROWSER__) {
+    if (isBrowser) {
       // respect <base> tag
       const baseEl = document.querySelector('base')
       base = (baseEl && baseEl.getAttribute('href')) || '/'

diff --git a/src/utils/env.ts b/src/utils/env.ts
new file mode 100644 (file)
index 0000000..eb377ab
--- /dev/null
+++ b/src/utils/env.ts
@@ -0,0 +1 @@
+export const isBrowser = typeof window !== 'undefined'

diff --git a/src/utils/index.ts b/src/utils/index.ts
index 924cbb57587610eb4165c3ac787defc2686a15d9..1b1f4658ce898f170a9153c1ff8eb53b9d07420c 100644 (file)
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -8,6 +8,8 @@ import { RouteRecord } from '../matcher/types'
 import { LocationQueryValue } from './query'
 import { hasSymbol } from './injectionSymbols'
 
+export * from './env'
+
 export function isESModule(obj: any): obj is { default: RouteComponent } {
   return obj.__esModule || (hasSymbol && obj[Symbol.toStringTag] === 'Module')
 }