feat(guards): wip context support in multi apps

posva · posva · commit 34d7390b9466 · 2020-07-21T13:41:45.000+02:00
diff --git a/e2e/multi-app/index.ts b/e2e/multi-app/index.ts
@@ -1,15 +1,60 @@
-import { createRouter, createWebHistory } from '../../src'
+import { createRouter, createWebHistory, onBeforeRouteUpdate } from '../../src'
 import { RouteComponent } from '../../src/types'
-import { createApp, ref, watchEffect, App } from 'vue'
+import { createApp, ref, watchEffect, App, inject } from 'vue'
 
 const Home: RouteComponent = {
   template: `<div class="home">Home</div>`,
 }
 
 const User: RouteComponent = {
-  template: `<div class="user">User {{ $route.params.id }}</div>`,
+  template: `<div class="user">User {{ $route.params.id }}. Updated <span class="count">{{ count }}</span></div>`,
+  data: () => ({ count: 0 }),
+
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      // @ts-ignore
+      console.log('enter from ', vm.id)
+      // @ts-ignore
+    })
+  },
+
+  beforeRouteUpdate(to, from, next) {
+    // this.count++
+    next()
+  },
+
+  setup() {
+    const id = inject('id')!
+
+    if (id !== 1)
+      onBeforeRouteUpdate(function (to, from, next) {
+        // @ts-ignore
+        console.log('update from ', id, this.id)
+        // @ts-ignore
+        // this.count++
+        next()
+      })
+
+    return { id }
+  },
 }
 
+let looper = [1, 2, 3]
+
+const NamedViews: RouteComponent[] = looper.map(i => ({
+  name: 'part-' + i,
+
+  template: `<div class="named part-${i}">Part ${i}. Updated <span class="count">{{ count }}</span></div>`,
+
+  data: () => ({ count: 0 }),
+
+  beforeRouteUpdate(to, from, next) {
+    // @ts-ignore
+    // this.count++
+    next()
+  },
+}))
+
 // path popstate listeners to track the call count
 let activePopStateListeners = ref(0)
 let guardCallCount = ref(0)
@@ -43,7 +88,19 @@ const router = createRouter({
   history: createWebHistory('/' + __dirname),
   routes: [
     { path: '/', component: Home },
-    { path: '/users/:id', component: User },
+    {
+      path: '/users/:id',
+      components: {
+        default: User,
+        ...NamedViews.reduce(
+          (routeComponents, component) => ({
+            ...routeComponents,
+            [component.name!]: component,
+          }),
+          {} as Record<string, RouteComponent>
+        ),
+      },
+    },
   ],
 })
 
@@ -52,8 +109,6 @@ router.beforeEach((to, from, next) => {
   next()
 })
 
-let looper = [1, 2, 3]
-
 let apps: Array<App | null> = [null, null, null]
 
 looper.forEach((n, i) => {
@@ -71,10 +126,12 @@ looper.forEach((n, i) => {
       </ul>
 
       <router-view></router-view>
+      <router-view name="part-${n}"></router-view>
     </div>
   `,
     }))
     app.use(router)
+    app.provide('id', n)
     app.mount('#app-' + n)
   })
 
diff --git a/e2e/specs/multi-app.js b/e2e/specs/multi-app.js
@@ -97,4 +97,28 @@ module.exports = {
 
       .end()
   },
+
+  /** @type {import('nightwatch').NightwatchTest} */
+  'supports navigation guards context with multiple apps': function (browser) {
+    browser
+      .url(baseURL)
+      .assert.urlEquals(baseURL + '/')
+
+      // mount multiple apps and expect to have one listener only
+      .click('#mount1')
+      .assert.containsText('#app-1 .home', 'Home')
+      // toggle multiple times
+      .click('#app-1 li:nth-child(2) a')
+      .assert.containsText('#app-1 .count', '0')
+      .click('#app-1 li:nth-child(3) a')
+      .assert.containsText('#app-1 .count', '1')
+      .click('#mount2')
+      .assert.containsText('#app-2 .user', 'User 2')
+      .click('#app-1 li:nth-child(2) a')
+      // first one keeps updating
+      .assert.containsText('#app-1 .count', '2')
+      // second app only updated once
+      .assert.containsText('#app-2 .count', '1')
+      .click('#mount3')
+  },
 }
diff --git a/src/navigationGuards.ts b/src/navigationGuards.ts
@@ -260,3 +260,16 @@ function isRouteComponent(
     '__vccOpts' in component
   )
 }
+
+/**
+ * 1. beforeRouteEnter callbacks
+ * 2. Dictionary of instances per view name
+ */
+export type GuardManagerEntry = [
+  NavigationGuardNextCallback[],
+  Record<string, ComponentPublicInstance | undefined | null>
+]
+
+export function createGuardManager() {
+  return new Map<RouteRecordNormalized, GuardManagerEntry>()
+}
