Suspended portal targets

example/components/suspended-router-view-with-portals/a.vue

@@ -0,0 +1,6 @@
+<template>
+ <div>
+ <portal to="title">Page A</portal>
+ <p>The contents of Page A.</p>
+ </div>
+</template>

example/components/suspended-router-view-with-portals/b.vue

@@ -0,0 +1,6 @@
+<template>
+ <div>
+ <portal to="title">Page B</portal>
+ <p>The contents of Page B.</p>
+ </div>
+</template>

example/components/suspended-router-view-with-portals/index.vue

@@ -0,0 +1,49 @@
+<template>
+ <div>
+ <h1>
+ <portal-target name="title" :suspended="suspended">Home</portal-target>
+ </h1>
+ <router-link to="/suspended-router-view-with-portals">Home</router-link>
+ <router-link to="/suspended-router-view-with-portals/a">a</router-link>
+ <router-link to="/suspended-router-view-with-portals/b">b</router-link>
+
+ <p>
+ <input type="checkbox" v-model="suspended" id="suspension" />
+ <label for="suspension">Suspension</label>
+ </p>
+
+ <p>
+ This page has two sub-routes, "Page A" and "Page B". Both of the routes
+ have a portal that will teleport the title of the sub-route to the header
+ on the parent route. If neither sub-route is active, it uses the default
+ title.
+ </p>
+
+ <p>This allows sub-routes to set page elements in parent routes.</p>
+
+ <p>
+ <strong><code>router-view</code> contents:</strong>
+ </p>
+
+ <div class="router-view-box"><router-view /></div>
+ </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+ data() {
+ return {
+ suspended: true,
+ }
+ },
+})
+</script>
+
+<style>
+.router-view-box {
+ border: 1px solid black;
+ padding: 10px;
+}
+</style>

example/router.ts

@@ -11,6 +11,9 @@ import Programmatic from './components/programmatic/index.vue'
 import RouterViewWithPortals from './components/router-view-with-portals/index.vue'
 import RouterViewWithPortalsA from './components/router-view-with-portals/a.vue'
 import RouterViewWithPortalsB from './components/router-view-with-portals/b.vue'
+import SuspendedRouterViewWithPortals from './components/suspended-router-view-with-portals/index.vue'
+import SuspendedRouterViewWithPortalsA from './components/suspended-router-view-with-portals/a.vue'
+import SuspendedRouterViewWithPortalsB from './components/suspended-router-view-with-portals/b.vue'
 import MountToExternal from './components/mount-to/mount-to-external.vue'
 import EmptyPortal from './components/empty-portal/index.vue'
 import DefaultSlotContent from './components/default-content-on-target/index.vue'
@@ -64,6 +67,14 @@ const routes = [
  { path: 'b', component: RouterViewWithPortalsB },
  ],
  },
+ {
+ path: '/suspended-router-view-with-portals',
+ component: SuspendedRouterViewWithPortals,
+ children: [
+ { path: 'a', component: SuspendedRouterViewWithPortalsA },
+ { path: 'b', component: SuspendedRouterViewWithPortalsB },
+ ],
+ },
  {
  path: '/default-slot-content-for-target',
  component: DefaultSlotContent,

package.json

@@ -55,7 +55,7 @@
  "lint-staged": "^7.2.0",
  "merge": "^1.2.1",
  "nanoid": "^2.0.0",
- "node-sass": "^4.13.1",
+ "node-sass": "^6.0.0",
  "prettier-eslint": "^8.8.2",
  "rollup": "^0.67.3",
  "rollup-plugin-analyzer": "^2.1.0",
@@ -65,7 +65,7 @@
  "rollup-plugin-node-resolve": "^3.4.0",
  "rollup-plugin-replace": "^2.1.0",
  "rollup-plugin-typescript2": "^0.18.0",
- "sass-loader": "^7.0.3",
+ "sass-loader": "^10.2.0",
  "ts-jest": "^23.0.0",
  "typescript": "^3.0.0",
  "vue": "^2.6.7",

src/components/portal-target.tsx

@@ -16,6 +16,7 @@ export default Vue.extend({
  transition: { type: [String, Object, Function] } as PropOptions<
  PropWithComponent
  >,
+ suspended: { type: Boolean, default: false },
  },
  data() {
  return {
@@ -29,9 +30,6 @@ export default Vue.extend({
  })
  },
  watch: {
- ownTransports() {
- this.$emit('change', this.children().length > 0)
- },
  name(newVal, oldVal) {
  /**
  * TODO
@@ -69,11 +67,29 @@ export default Vue.extend({
  methods: {
  // can't be a computed prop because it has to "react" to $slot changes.
  children(): VNode[] {
- return this.passengers.length !== 0
- ? this.passengers
- : this.$scopedSlots.default
- ? (this.$scopedSlots.default(this.slotProps) as VNode[])
- : this.$slots.default || []
+ const self = this.children as (() => VNode[]) & {
+ // Caches last calculated children to enable suspension
+ // Stored on method instead of in the data object to avoid infinite render loops
+ childrenCache: VNode[] | null
+ }
+
+ if (!this.suspended || self.childrenCache == null) {
+ const initialCaching = self.childrenCache == null
+
+ // Recalculate children only if the cache is empty or if not suspended
+ self.childrenCache =
+ this.passengers.length !== 0
+ ? this.passengers
+ : this.$scopedSlots.default
+ ? (this.$scopedSlots.default(this.slotProps) as VNode[])
+ : this.$slots.default || []
+
+ if (!initialCaching) {
+ this.$emit('change', self.childrenCache.length > 0)
+ }
+ }
+
+ return self.childrenCache
  },
  // can't be a computed prop because it has to "react" to this.children().
  noWrapper() {