@slidev/client 0.29.0 → 0.30.0

package/App.vue

@@ -6,4 +6,5 @@ setupRoot()
 
 <template>
   <RouterView />
+  <StarportCarrier />
 </template>

package/builtin/Link.vue

@@ -0,0 +1,26 @@
+<!--
+Create a link in the presentation
+
+Usage:
+
+<Link :to="5" >Go to slide 5</Link>
+
+<Link :to="5" title="Go to slide 5" />
+-->
+<script setup lang="ts">
+import { isPrintMode } from '../logic/nav'
+
+defineProps<{
+  to: number | string
+  title?: string
+}>()
+</script>
+
+<template>
+  <RouterLink v-if="!isPrintMode && title" :to="to" v-html="title" />
+  <RouterLink v-else-if="!isPrintMode && !title" :to="to">
+    <slot />
+  </RouterLink>
+  <a v-else-if="isPrintMode && title" :href="'#' + to" v-html="title" />
+  <a v-else :href="'#' + to"><slot /></a>
+</template>

package/builtin/Toc.vue

@@ -8,9 +8,11 @@ Usage:
 <Toc columns='2' maxDepth='3' mode='onlySiblings'/>
 -->
 <script setup lang='ts'>
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import type { TocItem } from '../logic/nav'
-import { tree } from '../logic/nav'
+import { injectionSlidevContext } from '../constants'
+
+const $slidev = inject(injectionSlidevContext)
 
 const props = withDefaults(
   defineProps<{
@@ -69,7 +71,10 @@ function filterOnlySiblings(tree: TocItem[]): TocItem[] {
 }
 
 const toc = computed(() => {
-  let tocTree = filterTreeDepth(tree.value)
+  const tree = $slidev?.nav.tree
+  if (!tree)
+    return []
+  let tocTree = filterTreeDepth(tree)
   if (props.mode === 'onlyCurrentTree')
     tocTree = filterOnlyCurrentTree(tocTree)
   else if (props.mode === 'onlySiblings')

package/builtin/TocList.vue

@@ -29,7 +29,7 @@ const classes = computed(() => {
 <template>
   <ol v-if="list && list.length > 0" :class="classes">
     <li v-for="item in list" :key="item.path" :class="['slidev-toc-item', {'slidev-toc-item-active': item.active}, {'slidev-toc-item-parent-active': item.activeParent}]">
-      <RouterLink :to="item.path" v-html="item.title" />
+      <Link :to="item.path" :title="item.title" />
       <TocList :level="level + 1" :list="item.children" :list-class="listClass" />
     </li>
   </ol>

package/builtin/Tweet.vue

@@ -55,7 +55,7 @@ else {
 
 <template>
   <Transform :scale="scale || 1">
-    <div ref="tweet">
+    <div ref="tweet" class="tweet" data-waitfor="iframe">
       <div v-if="!loaded" class="w-30 h-30 my-10px bg-gray-400 bg-opacity-10 rounded-lg flex opacity-50">
         <div class="m-auto animate-pulse text-4xl">
           <carbon:logo-twitter />

package/builtin/Youtube.vue

@@ -16,6 +16,7 @@ defineProps<{
 
 <template>
   <iframe
+    class="youtube"
     :width="width"
     :height="height"
     :src="`https://www.youtube.com/embed/${id}`"

package/composables/useContext.ts

@@ -0,0 +1,29 @@
+import type { ComputedRef, WritableComputedRef } from 'vue'
+import { computed } from 'vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { downloadPDF, next, nextSlide, openInEditor, prev, prevSlide } from '../logic/nav'
+import { configs } from '../env'
+import { useNav } from './useNav'
+import { useNavClicks } from './useNavClicks'
+
+export function useContext(
+  route: ComputedRef<RouteLocationNormalizedLoaded>,
+  clicks: WritableComputedRef<number>,
+) {
+  const nav = useNav(route)
+  const navClicks = useNavClicks(clicks, nav.currentRoute, nav.currentPage)
+  return {
+    nav: {
+      ...nav,
+      ...navClicks,
+      downloadPDF,
+      next,
+      nextSlide,
+      openInEditor,
+      prev,
+      prevSlide,
+    },
+    configs,
+    themeConfigs: computed(() => configs.themeConfig),
+  }
+}

package/composables/useNav.ts

@@ -0,0 +1,43 @@
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
+import type { TocItem } from '../logic/nav'
+import { addToTree, filterTree, getPath, getTreeWithActiveStatuses } from '../logic/nav'
+import { rawRoutes } from '../routes'
+
+export function useNav(route: ComputedRef<RouteLocationNormalizedLoaded>) {
+  const path = computed(() => route.value.path)
+  const total = computed(() => rawRoutes.length - 1)
+
+  const currentPage = computed(() => parseInt(path.value.split(/\//g).slice(-1)[0]) || 1)
+  const currentPath = computed(() => getPath(currentPage.value))
+  const currentRoute = computed(() => rawRoutes.find(i => i.path === `${currentPage.value}`))
+  const currentSlideId = computed(() => currentRoute.value?.meta?.slide?.id)
+  const currentLayout = computed(() => currentRoute.value?.meta?.layout)
+
+  const nextRoute = computed(() => rawRoutes.find(i => i.path === `${Math.min(rawRoutes.length, currentPage.value + 1)}`))
+
+  const rawTree = computed(() => rawRoutes
+    .filter((route: RouteRecordRaw) => route.meta?.slide?.title)
+    .reduce((acc: TocItem[], route: RouteRecordRaw) => {
+      addToTree(acc, route)
+      return acc
+    }, []))
+  const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(rawTree.value, currentRoute.value))
+  const tree = computed(() => filterTree(treeWithActiveStatuses.value))
+
+  return {
+    route,
+    path,
+    total,
+    currentPage,
+    currentPath,
+    currentRoute,
+    currentSlideId,
+    currentLayout,
+    nextRoute,
+    rawTree,
+    treeWithActiveStatuses,
+    tree,
+  }
+}

package/composables/useNavClicks.ts

@@ -0,0 +1,37 @@
+import type { ComputedRef, WritableComputedRef } from 'vue'
+import { computed, nextTick, ref } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { rawRoutes, router } from '../routes'
+
+export function useNavClicks(
+  clicks: WritableComputedRef<number>,
+  currentRoute: ComputedRef<RouteRecordRaw | undefined>,
+  currentPage: ComputedRef<number>,
+) {
+  // force update collected elements when the route is fully resolved
+  const routeForceRefresh = ref(0)
+  nextTick(() => {
+    router.afterEach(async() => {
+      await nextTick()
+      routeForceRefresh.value += 1
+    })
+  })
+
+  const clicksElements = computed<HTMLElement[]>(() => {
+    // eslint-disable-next-line no-unused-expressions
+    routeForceRefresh.value
+    return currentRoute.value?.meta?.__clicksElements || []
+  })
+
+  const clicksTotal = computed(() => +(currentRoute.value?.meta?.clicks ?? clicksElements.value.length))
+
+  const hasNext = computed(() => currentPage.value < rawRoutes.length - 1 || clicks.value < clicksTotal.value)
+  const hasPrev = computed(() => currentPage.value > 1 || clicks.value > 0)
+  return {
+    clicks,
+    clicksElements,
+    clicksTotal,
+    hasNext,
+    hasPrev,
+  }
+}

package/constants.ts

@@ -1,10 +1,12 @@
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import type { SlidevContext } from './modules/context'
 
 export const injectionClicks: InjectionKey<Ref<number>> = Symbol('v-click-clicks')
 export const injectionClicksElements: InjectionKey<Ref<(Element | string)[]>> = Symbol('v-click-clicks-elements')
 export const injectionOrderMap: InjectionKey<Ref<Map<number, HTMLElement[]>>> = Symbol('v-click-clicks-order-map')
 export const injectionClicksDisabled: InjectionKey<Ref<boolean>> = Symbol('v-click-clicks-disabled')
 export const injectionSlideScale: InjectionKey<ComputedRef<number>> = Symbol('slidev-slide-scale')
+export const injectionSlidevContext: InjectionKey<SlidevContext> = Symbol('slidev-slidev-context')
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'

package/internals/Print.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { ComponentCustomProps, Slots } from 'vue'
+import { h, watchEffect } from 'vue'
+import _configs from '/@slidev/configs'
+import { slideScale, windowSize } from '../state'
+import { isPrintMode } from '../logic/nav'
+import { themeVars } from '../env'
+import PrintContainer from './PrintContainer.vue'
+
+const width = _configs.canvasWidth
+const height = Math.round(width / _configs.aspectRatio) + 1
+
+function vStyle<Props>(props: Props, { slots }: { slots: Slots }) {
+  if (slots.default)
+    return h('style', slots.default())
+}
+
+watchEffect(() => {
+  if (isPrintMode)
+    document.body.parentNode.classList.add('print')
+  else
+    document.body.parentNode.classList.remove('print')
+})
+</script>
+
+<template>
+  <vStyle>
+    @page { size: {{ width }}px {{ height }}px; margin: 0px; }
+  </vStyle>
+  <div id="page-root" class="grid grid-cols-[1fr,max-content]" :style="themeVars">
+    <PrintContainer
+      class="w-full h-full"
+      :style="{ background: 'var(--slidev-slide-container-background, black)'}"
+      :width="windowSize.width.value"
+    />
+  </div>
+</template>
+
+<style lang="postcss">
+html.print,
+html.print body,
+html.print #app,
+html.print #page-root {
+  height: auto;
+  overflow: auto;
+}
+
+html.print * {
+  -webkit-print-color-adjust: exact;
+}
+html.print {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+html.print body {
+  margin: 0 auto;
+  border: 0;
+  padding: 0;
+  float: none;
+  overflow: visible;
+}
+</style>

package/internals/PrintContainer.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { configs, slideAspect, slideWidth } from '../env'
+import { injectionSlideScale } from '../constants'
+import { rawRoutes } from '../logic/nav'
+import PrintSlide from './PrintSlide.vue'
+
+const props = defineProps<{
+  width: number
+}>()
+
+const width = computed(() => props.width)
+const height = computed(() => props.width / slideAspect)
+
+const screenAspect = computed(() => width.value / height.value)
+
+const scale = computed(() => {
+  if (screenAspect.value < slideAspect) return width.value / slideWidth
+  return (height.value * slideAspect) / slideWidth
+})
+
+// Remove the "end" slide
+const routes = rawRoutes.slice(0, -1)
+
+const className = computed(() => ({
+  'select-none': !configs.selectable,
+  'slidev-code-line-numbers': configs.lineNumbers,
+}))
+
+provide(injectionSlideScale, scale)
+</script>
+
+<template>
+  <div id="print-container" :class="className">
+    <div id="print-content">
+      <PrintSlide v-for="route of routes" :key="route.path" :route="route" />
+    </div>
+    <slot name="controls" />
+  </div>
+</template>
+
+<style lang="postcss">
+#print-content {
+  @apply bg-main;
+}
+
+.slide-container {
+  @apply relative;
+  position: relative;
+  overflow: hidden;
+  page-break-before: always;
+}
+</style>

package/internals/PrintSlide.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { RouteRecordRaw } from 'vue-router'
+import { computed, reactive } from 'vue'
+import { useNav } from '../composables/useNav'
+import { isClicksDisabled } from '../logic/nav'
+import PrintSlideClick from './PrintSlideClick.vue'
+
+const props = defineProps<{ route: RouteRecordRaw }>()
+
+const clicksElements = reactive(props.route.meta?.__clicksElements || [])
+
+const route = computed(() => props.route)
+const nav = useNav(route)
+</script>
+
+<template>
+  <PrintSlideClick v-model:clicks-elements="clicksElements" :clicks="0" :nav="nav" :route="route" />
+  <template v-if="!isClicksDisabled">
+    <PrintSlideClick v-for="i of (clicksElements.length)" :key="i" :clicks="i" :nav="nav" :route="route" />
+  </template>
+</template>

package/internals/PrintSlideClick.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { RouteRecordRaw } from 'vue-router'
+import { computed, provide, reactive, shallowRef } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { useNavClicks } from '../composables/useNavClicks'
+import { injectionSlidevContext } from '../constants'
+import { configs, slideHeight, slideWidth } from '../env'
+import { getSlideClass } from '../utils'
+import type { SlidevContextNav } from '../modules/context'
+import SlideWrapper from './SlideWrapper'
+// @ts-expect-error virtual module
+import GlobalTop from '/@slidev/global-components/top'
+// @ts-expect-error virtual module
+import GlobalBottom from '/@slidev/global-components/bottom'
+
+const props = defineProps<{
+  clicks: number
+  clicksElements?: HTMLElement[]
+  nav: SlidevContextNav
+  route: RouteRecordRaw
+}>()
+
+const emit = defineEmits(['update:clicksElements'])
+
+const clicksElements = useVModel(props, 'clicksElements', emit)
+
+const style = computed(() => ({
+  height: `${slideHeight}px`,
+  width: `${slideWidth}px`,
+}))
+
+const DrawingPreview = shallowRef<any>()
+if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
+  import('./DrawingPreview.vue').then(v => (DrawingPreview.value = v.default))
+
+const clicks = computed(() => props.clicks)
+const navClicks = useNavClicks(clicks, props.nav.currentRoute, props.nav.currentPage)
+
+provide(injectionSlidevContext, reactive({
+  nav: { ...props.nav, ...navClicks },
+  configs,
+  themeConfigs: computed(() => configs.themeConfig),
+}))
+</script>
+
+<template>
+  <div :id="route.path" class="slide-container" :style="style">
+    <GlobalBottom />
+
+    <SlideWrapper
+      :is="route?.component"
+      v-model:clicks-elements="clicksElements"
+      :clicks="clicks"
+      :clicks-disabled="false"
+      :class="getSlideClass(route)"
+    />
+    <template
+      v-if="
+        (__SLIDEV_FEATURE_DRAWINGS__ ||
+          __SLIDEV_FEATURE_DRAWINGS_PERSIST__) &&
+          DrawingPreview
+      "
+    >
+      <DrawingPreview :page="+route.path" />
+    </template>
+
+    <GlobalTop />
+  </div>
+</template>

package/logic/drawings.ts

@@ -65,9 +65,9 @@ export function updateState() {
   canClear.value = !!drauu.el?.children.length
 }
 
-export function loadCanvas() {
+export function loadCanvas(page?: number) {
   disableDump = true
-  const data = drawingState[currentPage.value]
+  const data = drawingState[page || currentPage.value]
   if (data != null)
     drauu.load(data)
   else

package/logic/nav.ts

@@ -80,7 +80,7 @@ export const rawTree = computed(() => rawRoutes
     addToTree(acc, route)
     return acc
   }, []))
-export const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(rawTree.value))
+export const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(rawTree.value, currentRoute.value))
 export const tree = computed(() => filterTree(treeWithActiveStatuses.value))
 
 export function next() {
@@ -192,24 +192,25 @@ export function addToTree(tree: TocItem[], route: RouteRecordRaw, level = 1) {
 
 export function getTreeWithActiveStatuses(
   tree: TocItem[],
+  currentRoute?: RouteRecordRaw,
   hasActiveParent = false,
   parent?: TocItem,
 ): TocItem[] {
   return tree.map((item: TocItem) => {
     const clone = {
       ...item,
-      active: item.path === currentRoute.value?.path,
+      active: item.path === currentRoute?.path,
       hasActiveParent,
     }
     if (clone.children.length > 0)
-      clone.children = getTreeWithActiveStatuses(clone.children, clone.active || clone.hasActiveParent, clone)
+      clone.children = getTreeWithActiveStatuses(clone.children, currentRoute, clone.active || clone.hasActiveParent, clone)
     if (parent && (clone.active || clone.activeParent))
       parent.activeParent = true
     return clone
   })
 }
 
-function filterTree(tree: TocItem[], level = 1): TocItem[] {
+export function filterTree(tree: TocItem[], level = 1): TocItem[] {
   return tree
     .filter((item: TocItem) => !item.hideInToc)
     .map((item: TocItem) => ({

package/logic/recording.ts

@@ -73,6 +73,7 @@ export function useRecording() {
   const recorderCamera: Ref<RecorderType | undefined> = shallowRef()
   const recorderSlides: Ref<RecorderType | undefined> = shallowRef()
   const streamCamera: Ref<MediaStream | undefined> = shallowRef()
+  const streamCapture: Ref<MediaStream | undefined> = shallowRef()
   const streamSlides: Ref<MediaStream | undefined> = shallowRef()
 
   const config: RecorderOptions = {
@@ -140,7 +141,7 @@ export function useRecording() {
     const { default: Recorder } = await import('recordrtc')
     await startCameraStream()
 
-    streamSlides.value = await navigator.mediaDevices.getDisplayMedia({
+    streamCapture.value = await navigator.mediaDevices.getDisplayMedia({
       video: {
         // aspectRatio: 1.6,
         frameRate: 15,
@@ -151,6 +152,11 @@ export function useRecording() {
         resizeMode: 'crop-and-scale',
       },
     })
+    streamCapture.value.addEventListener('inactive', stopRecording)
+
+    // We need to create a new Stream to merge video and audio to have the inactive event working on streamCapture
+    streamSlides.value = new MediaStream()
+    streamCapture.value!.getVideoTracks().forEach(videoTrack => streamSlides.value!.addTrack(videoTrack))
 
     // merge config
     Object.assign(config, customConfig)
@@ -194,6 +200,7 @@ export function useRecording() {
       const url = URL.createObjectURL(blob)
       download(getFilename('screen', config.mimeType), url)
       window.URL.revokeObjectURL(url)
+      closeStream(streamCapture)
       closeStream(streamSlides)
       recorderSlides.value = undefined
     })
@@ -237,6 +244,7 @@ export function useRecording() {
     recorderCamera,
     recorderSlides,
     streamCamera,
+    streamCapture,
     streamSlides,
   }
 }

package/modules/context.ts

@@ -1,37 +1,30 @@
 import type { App } from 'vue'
-import { computed, reactive, readonly } from 'vue'
-import { objectKeys } from '@antfu/utils'
+import { reactive } from 'vue'
 import type { UnwrapNestedRefs } from '@vue/reactivity'
+import type { configs } from '../env'
 import * as nav from '../logic/nav'
+import { clicks, route } from '../logic/nav'
 import { isDark } from '../logic/dark'
-import { configs } from '../env'
+import { injectionSlidevContext } from '../constants'
+import { useContext } from '../composables/useContext'
 
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $slidev: {
-      nav: UnwrapNestedRefs<typeof nav>
-      configs: typeof configs
-      themeConfigs: typeof configs['themeConfig']
-    }
-  }
+export type SlidevContextNavKey = 'route' | 'path' | 'total' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute'| 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide'
+export type SlidevContextNavClicksKey = 'clicks' | 'clicksElements' | 'clicksTotal' | 'hasNext' | 'hasPrev'
+
+export type SlidevContextNav = Pick<typeof nav, SlidevContextNavKey>
+export type SlidevContextNavClicks = Pick<typeof nav, SlidevContextNavClicksKey>
+
+export interface SlidevContext {
+  nav: UnwrapNestedRefs<SlidevContextNav & SlidevContextNavClicks>
+  configs: typeof configs
+  themeConfigs: typeof configs['themeConfig']
 }
 
 export default function createSlidevContext() {
   return {
     install(app: App) {
-      const navObj: typeof nav = {} as any
-      // need to copy over to get rid of the "Module" object type (will not unwrap)
-      for (const key of objectKeys(nav)) {
-        if (typeof key === 'string')
-          // @ts-expect-error I know :)
-          navObj[key] = nav[key]
-      }
-      const context = reactive({
-        nav: navObj,
-        configs,
-        themeConfigs: computed(() => configs.themeConfig),
-      })
-      app.config.globalProperties.$slidev = readonly(context)
+      const context = useContext(route, clicks)
+      app.provide(injectionSlidevContext, reactive(context))
 
       // allows controls from postMessages
       if (__DEV__) {
@@ -40,7 +33,7 @@ export default function createSlidevContext() {
         window.addEventListener('message', ({ data }) => {
           if (data && data.target === 'slidev') {
             if (data.type === 'navigate') {
-              context.nav.go(+data.no, +data.clicks || 0)
+              nav.go(+data.no, +data.clicks || 0)
             }
             else if (data.type === 'css-vars') {
               const root = document.documentElement

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "Presentation slides for developers",
   "homepage": "https://sli.dev",
   "bugs": "https://github.com/slidevjs/slidev/issues",
@@ -12,27 +12,29 @@
   },
   "funding": "https://github.com/sponsors/antfu",
   "dependencies": {
-    "@antfu/utils": "^0.5.0",
-    "@slidev/parser": "0.29.0",
-    "@slidev/types": "0.29.0",
-    "@vueuse/core": "^8.1.2",
+    "@antfu/utils": "^0.5.1",
+    "@slidev/parser": "0.30.0",
+    "@slidev/types": "0.30.0",
+    "@vueuse/core": "^8.2.5",
     "@vueuse/head": "^0.7.5",
-    "@vueuse/motion": "^2.0.0-beta.12",
+    "@vueuse/motion": "^2.0.0-beta.18",
     "codemirror": "^5.65.2",
+    "defu": "^6.0.0",
     "drauu": "^0.3.0",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
     "js-yaml": "^4.1.0",
     "katex": "^0.15.3",
-    "mermaid": "^8.14.0",
+    "mermaid": "^9.0.0",
     "monaco-editor": "^0.33.0",
-    "nanoid": "^3.3.1",
-    "prettier": "^2.6.0",
+    "nanoid": "^3.3.2",
+    "prettier": "^2.6.2",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.0",
-    "vite-plugin-windicss": "^1.8.3",
-    "vue": "^3.2.31",
+    "vite-plugin-windicss": "^1.8.4",
+    "vue": "^3.2.32",
     "vue-router": "^4.0.14",
+    "vue-starport": "^0.2.4",
     "windicss": "^3.5.1"
   },
   "engines": {

package/routes.ts

@@ -1,6 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import Play from './internals/Play.vue'
+import Print from './internals/Print.vue'
 // @ts-expect-error missing types
 import _rawRoutes from '/@slidev/routes'
 
@@ -15,6 +16,7 @@ export const routes: RouteRecordRaw[] = [
       ...rawRoutes,
     ],
   },
+  { name: 'print', path: '/print', component: Print },
   { path: '', redirect: { path: '/1' } },
   { path: '/:pathMatch(.*)', redirect: { path: '/1' } },
 ]

package/setup/main.ts

@@ -2,6 +2,7 @@
 
 import type { AppContext } from '@slidev/types'
 import { MotionPlugin } from '@vueuse/motion'
+import StarportPlugin from 'vue-starport'
 
 export default function setupMain(context: AppContext) {
   function setMaxHeight() {
@@ -13,6 +14,7 @@ export default function setupMain(context: AppContext) {
   window.addEventListener('resize', setMaxHeight)
 
   context.app.use(MotionPlugin)
+  context.app.use(StarportPlugin({ keepAlive: true }))
 
   // @ts-expect-error inject in runtime
   // eslint-disable-next-line @typescript-eslint/no-unused-vars