From b7331ef7d40f5013cb9ed013fa5d7a8a151fb95d Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Sat, 29 May 2021 15:26:25 +0200
Subject: [PATCH] chore: plaground transparent wrapper

---
 playground/main.ts           | 11 +++++++++--
 playground/router.ts         | 16 +++++++++++++++-
 playground/views/Generic.vue |  5 ++++-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/playground/main.ts b/playground/main.ts
index defbc8f7..0fca869c 100644
--- a/playground/main.ts
+++ b/playground/main.ts
@@ -1,6 +1,6 @@
 // necessary for webpack
 ///<reference path="../src/global.d.ts"/>
-import { createApp, App as Application } from 'vue'
+import { createApp, ComponentPublicInstance } from 'vue'
 import { router, routerHistory } from './router'
 import { globalState } from './store'
 import App from './App.vue'
@@ -10,7 +10,8 @@ declare global {
     // h: HTML5History
     h: typeof routerHistory
     r: typeof router
-    vm: ReturnType<Application['mount']>
+    // @ts-expect-error
+    vm: ComponentPublicInstance
   }
 }
 
@@ -19,6 +20,12 @@ window.h = routerHistory
 window.r = router
 
 const app = createApp(App)
+app.mixin({
+  beforeRouteEnter() {
+    console.log('mixin enter')
+  },
+})
+
 app.provide('state', globalState)
 app.use(router)
 
diff --git a/playground/router.ts b/playground/router.ts
index a98dddce..cab05b8e 100644
--- a/playground/router.ts
+++ b/playground/router.ts
@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from '../src'
+import { createRouter, createWebHistory, RouterView } from '../src'
 import Home from './views/Home.vue'
 import Nested from './views/Nested.vue'
 import NestedWithId from './views/NestedWithId.vue'
@@ -15,8 +15,12 @@ import ComponentWithData from './views/ComponentWithData.vue'
 import { globalState } from './store'
 import { scrollWaiter } from './scrollWaiter'
 import RepeatedParams from './views/RepeatedParams.vue'
+import { FunctionalComponent, h } from 'vue'
 let removeRoute: (() => void) | undefined
 
+const TransparentWrapper: FunctionalComponent = () => h(RouterView)
+TransparentWrapper.displayName = 'NestedView'
+
 export const routerHistory = createWebHistory()
 export const router = createRouter({
   history: routerHistory,
@@ -147,6 +151,16 @@ export const router = createRouter({
         } else next()
       },
     },
+
+    {
+      path: '/admin',
+      component: TransparentWrapper,
+      children: [
+        { path: '', component },
+        { path: 'dashboard', component },
+        { path: 'settings', component },
+      ],
+    },
   ],
   async scrollBehavior(to, from, savedPosition) {
     await scrollWaiter.wait()
diff --git a/playground/views/Generic.vue b/playground/views/Generic.vue
index 8079c805..4dd18afb 100644
--- a/playground/views/Generic.vue
+++ b/playground/views/Generic.vue
@@ -1,5 +1,8 @@
 <template>
-  <div>Generic view</div>
+  <section>
+    <h1>Generic view</h1>
+    <pre>{{ $route.fullPath }}</pre>
+  </section>
 </template>
 
 <script>
-- 
2.39.5