@poveste/app 0.12.3 → 0.13.0

package/src/app/components/story/StoryVariantSingle.vue

@@ -3,6 +3,7 @@ import { Icon } from '@iconify/vue'
 import { computed } from 'vue'
 import { useStoryStore } from '../../stores/story'
 import { isMobile } from '../../util/responsive'
+import { autoSelectsVariant } from '../../util/variant'
 import BaseSplitPane from '../base/BaseSplitPane.vue'
 import StoryVariantListItem from './StoryVariantListItem.vue'
 import StoryVariantSingleView from './StoryVariantSingleView.vue'
@@ -15,87 +16,92 @@ const storyStore = useStoryStore()
 
 const hasSingleVariant = computed(() => (storyStore.currentStory?.variants.length === 1))
 
-const variant = computed(() => storyStore.currentVariant)
+const variant = computed(() => storyStore.currentVariant ?? null)
+
+// The preview area exists while a variant is showing or on its way. Dropping it
+// the moment the variant goes null would unmount the preview across the two-step
+// route change, which is the whole thing #328 is about; keeping it when no
+// variant is coming leaves an empty box and, on mobile, a divider under the
+// picker. Same predicate the view below releases its held pair on.
+const showsPreview = computed(() => !!variant.value || autoSelectsVariant(storyStore.currentStory))
 </script>
 
 <template>
   <div
-    v-if="hasSingleVariant && variant"
-    class="poveste-story-variant-single p-2 h-full __poveste-pane-shadow-from-right"
+    v-if="isMobile"
+    class="divide-y divide-gray-100 dark:divide-gray-800 h-full flex flex-col"
   >
-    <StoryVariantSingleView
-      :variant="variant"
-      :story="storyStore.currentStory"
-    />
-  </div>
-  <template v-else>
+    <a
+      v-if="!hasSingleVariant || !variant"
+      class="px-6 h-12 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer flex gap-2 flex-wrap w-full items-center flex-none"
+      @click="$emit('openVariantMenu')"
+    >
+      <template v-if="variant">
+        <Icon
+          :icon="variant.icon ?? 'carbon:cube'"
+          class="w-5 h-5 flex-none"
+          :class="{
+            'text-gray-500': !variant.iconColor,
+            'bind-icon-color': variant.iconColor,
+          }"
+        />
+        {{ variant.title }}
+      </template>
+      <template v-else>
+        Select a variant...
+      </template>
+
+      <Icon
+        icon="carbon:chevron-sort"
+        class="w-5 h-5 shrink-0 ml-auto"
+      />
+    </a>
     <div
-      v-if="isMobile"
-      class="divide-y divide-gray-100 dark:divide-gray-800 h-full flex flex-col"
+      v-if="showsPreview"
+      class="poveste-story-variant-single p-2 h-full __poveste-pane-shadow-from-right"
     >
-      <a
-        class="px-6 h-12 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer flex gap-2 flex-wrap w-full items-center flex-none"
-        @click="$emit('openVariantMenu')"
-      >
-        <template v-if="variant">
-          <Icon
-            :icon="variant.icon ?? 'carbon:cube'"
-            class="w-5 h-5 flex-none"
-            :class="{
-              'text-gray-500': !variant.iconColor,
-              'bind-icon-color': variant.iconColor,
-            }"
-          />
-          {{ variant.title }}
-        </template>
-        <template v-else>
-          Select a variant...
-        </template>
+      <StoryVariantSingleView
+        :variant="variant"
+        :story="storyStore.currentStory"
+      />
+    </div>
+  </div>
 
-        <Icon
-          icon="carbon:chevron-sort"
-          class="w-5 h-5 shrink-0 ml-auto"
+  <!--
+    One split pane whether or not there is a list to put in it. A story with a
+    single variant hides the first pane instead of taking a different branch, so
+    the preview stays at one position in the tree and survives the move between
+    a one-variant story and a many-variant one (#328).
+  -->
+  <BaseSplitPane
+    v-else
+    save-id="story-single-main-split"
+    :min="5"
+    :max="40"
+    :default-split="17"
+    :show-first="!hasSingleVariant"
+  >
+    <template #first>
+      <div class="h-full overflow-y-auto">
+        <StoryVariantListItem
+          v-for="(v, index) of storyStore.currentStory?.variants ?? []"
+          :key="index"
+          :variant="v"
         />
-      </a>
+      </div>
+    </template>
+    <template #last>
       <div
-        v-if="storyStore.currentVariant"
-        class="p-2 h-full"
+        v-if="showsPreview"
+        class="poveste-story-variant-single p-2 h-full __poveste-pane-shadow-from-right"
       >
         <StoryVariantSingleView
-          :variant="storyStore.currentVariant"
+          :variant="variant"
           :story="storyStore.currentStory"
         />
       </div>
-    </div>
-    <BaseSplitPane
-      v-else
-      save-id="story-single-main-split"
-      :min="5"
-      :max="40"
-      :default-split="17"
-    >
-      <template #first>
-        <div class="h-full overflow-y-auto">
-          <StoryVariantListItem
-            v-for="(v, index) of storyStore.currentStory.variants"
-            :key="index"
-            :variant="v"
-          />
-        </div>
-      </template>
-      <template #last>
-        <div
-          v-if="storyStore.currentVariant"
-          class="p-2 h-full __poveste-pane-shadow-from-right"
-        >
-          <StoryVariantSingleView
-            :variant="storyStore.currentVariant"
-            :story="storyStore.currentStory"
-          />
-        </div>
-      </template>
-    </BaseSplitPane>
-  </template>
+    </template>
+  </BaseSplitPane>
 </template>
 
 <style scoped>

package/src/app/components/story/StoryVariantSinglePreviewNative.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Story, Variant } from '../../types'
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { useStoryStore } from '../../stores/story'
 import { previewDarkClasses, usePreviewDark } from '../../util/color-scheme'
@@ -16,7 +16,18 @@ const props = defineProps<{
 
 const storyStore = useStoryStore()
 
-storyStore.setPreviewReady(props.variant, false)
+// This component now outlives a story change (#328), so the flag is cleared per
+// variant rather than once at setup. Both ends, as `StoryVariantGridItem` does
+// for the same reason: the one arriving has not rendered yet, and the one
+// leaving is no longer rendered anywhere.
+watch(() => props.variant, (variant, previous) => {
+  if (previous) {
+    storyStore.setPreviewReady(previous, false)
+  }
+  storyStore.setPreviewReady(variant, false)
+}, {
+  immediate: true,
+})
 
 function onReady() {
   storyStore.setPreviewReady(props.variant, true)

package/src/app/components/story/StoryVariantSinglePreviewRemote.vue

@@ -110,6 +110,7 @@ useEventListener(window, 'message', (event) => {
       updateVariantState(event.data.state)
       break
     case EVENT_SEND:
+      if (!fromCurrentOccupant(event.data)) break
       logEvent(event.data.event)
       break
     case SANDBOX_READY:
@@ -198,6 +199,9 @@ const isIframeLoaded = ref(false)
 let retargets = 0
 // The story whose document the realm holds — booted or retargeted into it.
 let servedStory = props.story
+// Its variant, kept so the one being replaced can have its `previewReady`
+// cleared: it is no longer rendered anywhere once the realm moves on.
+let servedVariant = props.variant
 
 let stopTrackKeyboard: (() => void) | undefined
 let unmounted = false
@@ -222,6 +226,10 @@ watch(sandboxUrl, (url) => {
   // A new occupant has agreed to nothing, so neither has this end. Kept as a
   // new bridge rather than a reset so there is one way to be in that state.
   bridge = createStateBridge(postState)
+  if (servedVariant && servedVariant !== props.variant) {
+    storyStore.setPreviewReady(servedVariant, false)
+  }
+  servedVariant = props.variant
   storyStore.setPreviewReady(props.variant, false)
 
   const reuse = props.story.layout?.isolate !== true && servedStory.layout?.isolate !== true

package/src/app/components/story/StoryVariantSingleView.vue

@@ -1,28 +1,74 @@
 <script lang="ts" setup>
 import type { Story, Variant } from '../../types'
+import { shallowRef, watchEffect } from 'vue'
+import { autoSelectsVariant } from '../../util/variant'
 import StoryVariantSinglePreviewNative from './StoryVariantSinglePreviewNative.vue'
 import StoryVariantSinglePreviewRemote from './StoryVariantSinglePreviewRemote.vue'
 
-defineProps<{
-  variant: Variant
-  story: Story
+const props = defineProps<{
+  story: Story | undefined
+  variant: Variant | null
 }>()
+
+/*
+ * The pair the preview renders, which is not always the pair the route names.
+ *
+ * Opening a story is two route changes — the story, then the variant
+ * `StoryView` picks for it — and `currentVariant` is null in between. The
+ * preview used to be mounted under a `v-if` on that variant, so every sidebar
+ * click destroyed it and rebuilt it, and the realm reuse in the preview
+ * components below was never reached: the component was gone before its
+ * `watch(sandboxUrl)` could run (#328).
+ *
+ * Holding the last pair keeps one instance across the gap. The pair rather than
+ * the variant alone because the story changes first, and a new story with the
+ * previous story's variant resolves to a sandbox URL that names neither.
+ *
+ * The hold is released when the new story is not going to select a variant at
+ * all, because then there is no gap to bridge — only a reader looking at a
+ * variant list. Holding there would leave the story they left running behind a
+ * hidden iframe for as long as they stay, timers and all.
+ */
+const shown = shallowRef<{ story: Story, variant: Variant } | null>(null)
+
+watchEffect(() => {
+  // Read outside the branch: while `variant` is null this effect would
+  // otherwise not depend on `story`, and an HMR update that replaces the story
+  // object would leave the pair below pointing at the discarded one.
+  const story = props.story
+
+  if (story && props.variant) {
+    shown.value = { story, variant: props.variant }
+  }
+  else if (shown.value && shown.value.story !== story && !autoSelectsVariant(story)) {
+    shown.value = null
+  }
+})
 </script>
 
 <template>
   <div
     class="poveste-story-variant-single-view h-full flex flex-col"
+    :class="{ invisible: !variant }"
     data-testid="story-variant-single-view"
   >
-    <StoryVariantSinglePreviewNative
-      v-if="story.layout?.iframe === false"
-      :story="story"
-      :variant="variant"
-    />
-    <StoryVariantSinglePreviewRemote
-      v-else
-      :story="story"
-      :variant="variant"
-    />
+    <!--
+      Hidden rather than unmounted across the gap. What it holds then is the
+      story the reader has just left, and showing that is the trap the block
+      above is about: the preview is only correct once the route names a
+      variant again.
+    -->
+    <template v-if="shown">
+      <StoryVariantSinglePreviewNative
+        v-if="shown.story.layout?.iframe === false"
+        :story="shown.story"
+        :variant="shown.variant"
+      />
+      <StoryVariantSinglePreviewRemote
+        v-else
+        :story="shown.story"
+        :variant="shown.variant"
+      />
+    </template>
   </div>
 </template>

package/src/app/components/story/StoryView.vue

@@ -4,8 +4,9 @@ import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useLayoutStore } from '../../stores/layout'
 import { useStoryStore } from '../../stores/story'
-
 import { isMobile } from '../../util/responsive'
+
+import { autoSelectsVariant } from '../../util/variant'
 import BaseEmpty from '../base/BaseEmpty.vue'
 import BaseSplitPane from '../base/BaseSplitPane.vue'
 import StoryDocs from '../panel/StoryDocs.vue'
@@ -15,8 +16,11 @@ import StoryViewer from './StoryViewer.vue'
 const storyStore = useStoryStore()
 const layoutStore = useLayoutStore()
 
+// Coerced: a settings object stored before a key existed leaves it `undefined`,
+// which the pane's Boolean prop would read as its `true` default — the inverse
+// of what the branch this replaced did with the same value (#596).
 const effectiveStoryOptionsVisible = computed(() =>
-  storyStore.currentStory?.meta?.storyOptions ?? layoutStore.settings.storyOptionsVisible,
+  !!(storyStore.currentStory?.meta?.storyOptions ?? layoutStore.settings.storyOptionsVisible),
 )
 
 const placement = computed(() => layoutStore.settings.storyOptionsPlacement)
@@ -37,15 +41,9 @@ watch(() => storyStore.currentVariant, (value) => {
 })
 
 watch(() => [storyStore.currentStory, storyStore.currentVariant], () => {
-  if (!storyStore.currentVariant) {
-    if (storyStore.currentStory?.lastSelectedVariant) {
-      setVariant(storyStore.currentStory.lastSelectedVariant.id)
-      return
-    }
-
-    if (storyStore.currentStory?.variants.length === 1) {
-      setVariant(storyStore.currentStory.variants[0].id)
-    }
+  if (!storyStore.currentVariant && autoSelectsVariant(storyStore.currentStory)) {
+    const variant = storyStore.currentStory.lastSelectedVariant ?? storyStore.currentStory.variants[0]
+    setVariant(variant.id)
   }
 }, {
   immediate: true,
@@ -97,12 +95,13 @@ function scrollDocsToTop() {
         @scroll-top="scrollDocsToTop()"
       />
     </div>
-    <template v-else-if="isMobile">
-      <StoryViewer />
-    </template>
-    <template v-else-if="!effectiveStoryOptionsVisible">
-      <StoryViewer />
-    </template>
+    <!--
+      One split pane whether or not the options pane is showing, and whether or
+      not the viewport is mobile — both used to render `StoryViewer` from a
+      different branch, which moved it in the tree and cold-booted the sandbox
+      under it. `isMobile` is a live media query, so that one fired on a resize
+      (#596).
+    -->
     <BaseSplitPane
       v-else
       :save-id="`story-main-${placement}`"
@@ -111,6 +110,7 @@ function scrollDocsToTop() {
       :max="95"
       :default-split="splitDefaultSplit"
       :show-divider="false"
+      :show-last="!isMobile && effectiveStoryOptionsVisible"
       class="h-full"
     >
       <template #first>

package/src/app/sandbox.ts

@@ -3,7 +3,7 @@ import { reportStoryError } from '@poveste/shared'
 import { usePreferredDark } from '@vueuse/core'
 import { createPinia } from 'pinia'
 import { files, onUpdate } from 'virtual:$poveste-stories'
-import { computed, createApp, h, onMounted, ref, watch } from 'vue'
+import { computed, createApp, h, onMounted, ref, watch, watchEffect } from 'vue'
 import { parseQuery } from 'vue-router'
 import GenericMountStory from './components/story/GenericMountStory.vue'
 import GenericRenderStory from './components/story/GenericRenderStory.vue'
@@ -11,6 +11,7 @@ import { previewDarkClasses, resolvePreviewDark } from './util/color-scheme.js'
 import { PREVIEW_SETTINGS_REQUEST, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, SANDBOX_RETARGET, STATE_SYNC } from './util/const.js'
 import { isDark } from './util/dark.js'
 import { mapFile } from './util/mapping'
+import { occupant } from './util/occupant.js'
 import { applyPreviewSettings, loadStoredPreviewSettings, receivedSettings } from './util/preview-settings.js'
 import { createStateBridge } from './util/state-bridge.js'
 import { toRawDeep } from './util/state.js'
@@ -24,6 +25,13 @@ const query = parseQuery(window.location.search)
 const storyId = ref(typeof query.storyId === 'string' ? query.storyId : null)
 const variantId = ref(typeof query.variantId === 'string' ? query.variantId : null)
 
+// Kept in step so `logEvent` can name the occupant it is speaking for; it posts
+// from the story's own code and cannot see these refs.
+watchEffect(() => {
+  occupant.storyId = storyId.value
+  occupant.variantId = variantId.value
+})
+
 // `files` is `[]` until the dev server's first collect lands. The app's iframe
 // never sees that — it mounts after — but a sandbox opened on its own does, and
 // the list only arrives through `onUpdate`.

package/src/app/style/font.css

@@ -4,6 +4,10 @@
  * in each book. Copied rather than imported because the package pairs the two
  * formats in every `src`; `font.spec.ts` fails if a bump moves the subsets.
  *
+ * Vendored rather than resolved from the package, which publishes the family
+ * whole: 5.9 MB installed to ship 108 KB (#306). OFL-1.1, so `fonts/LICENSE`
+ * travels with the files.
+ *
  * Regenerate: node packages/poveste-app/scripts/font.mjs
  */
 
@@ -13,7 +17,7 @@
   font-style: normal;
   font-display: swap;
   font-weight: 400;
-  src: url('@fontsource/noto-sans-display/files/noto-sans-display-cyrillic-ext-400-normal.woff2') format('woff2');
+  src: url('./fonts/noto-sans-display-cyrillic-ext-400-normal.woff2') format('woff2');
   unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
 }
 
@@ -23,7 +27,7 @@
   font-style: normal;
   font-display: swap;
   font-weight: 400;
-  src: url('@fontsource/noto-sans-display/files/noto-sans-display-cyrillic-400-normal.woff2') format('woff2');
+  src: url('./fonts/noto-sans-display-cyrillic-400-normal.woff2') format('woff2');
   unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
 }
 
@@ -33,7 +37,7 @@
   font-style: normal;
   font-display: swap;
   font-weight: 400;
-  src: url('@fontsource/noto-sans-display/files/noto-sans-display-greek-ext-400-normal.woff2') format('woff2');
+  src: url('./fonts/noto-sans-display-greek-ext-400-normal.woff2') format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 
@@ -43,7 +47,7 @@
   font-style: normal;
   font-display: swap;
   font-weight: 400;
-  src: url('@fontsource/noto-sans-display/files/noto-sans-display-greek-400-normal.woff2') format('woff2');
+  src: url('./fonts/noto-sans-display-greek-400-normal.woff2') format('woff2');
   unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
 }
 
@@ -53,7 +57,7 @@
   font-style: normal;
   font-display: swap;
   font-weight: 400;
-  src: url('@fontsource/noto-sans-display/files/noto-sans-display-vietnamese-400-normal.woff2') format('woff2');
+  src: url('./fonts/noto-sans-display-vietnamese-400-normal.woff2') format('woff2');
   unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
 }
 
@@ -63,7 +67,7 @@
   font-style: normal;
   font-display: swap;
   font-weight: 400;
-  src: url('@fontsource/noto-sans-display/files/noto-sans-display-latin-ext-400-normal.woff2') format('woff2');
+  src: url('./fonts/noto-sans-display-latin-ext-400-normal.woff2') format('woff2');
   unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
 }
 
@@ -73,6 +77,6 @@
   font-style: normal;
   font-display: swap;
   font-weight: 400;
-  src: url('@fontsource/noto-sans-display/files/noto-sans-display-latin-400-normal.woff2') format('woff2');
+  src: url('./fonts/noto-sans-display-latin-400-normal.woff2') format('woff2');
   unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
 }

package/src/app/style/fonts/LICENSE

@@ -0,0 +1,93 @@
+Copyright 2015 Google Inc. All Rights Reserved. NotoSansDisplay-Italic[wdth,wght].ttf: Copyright 2015 Google Inc. All Rights Reserved.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/app/util/events.ts

@@ -1,4 +1,5 @@
 import { EVENT_SEND } from './const'
+import { occupant } from './occupant'
 
 export async function logEvent(name: string, argument) {
   const event = {
@@ -9,6 +10,8 @@ export async function logEvent(name: string, argument) {
     window.parent?.postMessage({
       type: EVENT_SEND,
       event,
+      storyId: occupant.storyId,
+      variantId: occupant.variantId,
     })
   }
   else {

package/src/app/util/highlighter.ts

@@ -1,5 +1,6 @@
-import type { Highlighter } from 'shiki'
-import { createHighlighter } from 'shiki'
+import type { HighlighterCore } from 'shiki/core'
+import { createHighlighterCore } from 'shiki/core'
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
 
 /**
  * Shiki is meant to be used as a singleton: each instance carries its own WASM
@@ -9,18 +10,24 @@ import { createHighlighter } from 'shiki'
  *
  * The langs and themes are fixed, so one shared instance is always correct.
  */
-let highlighterPromise: Promise<Highlighter> | undefined
+let highlighterPromise: Promise<HighlighterCore> | undefined
 
-export function getHighlighter(): Promise<Highlighter> {
-  highlighterPromise ??= createHighlighter({
+/**
+ * `shiki/core`, not `shiki`: the latter is the full-bundle entry and ships every
+ * grammar and theme whatever the options ask for — 10 MB a book (#304). The
+ * dynamic imports are the interface, not a lazy-loading choice.
+ */
+export function getHighlighter(): Promise<HighlighterCore> {
+  highlighterPromise ??= createHighlighterCore({
     langs: [
-      'html',
-      'jsx',
+      import('shiki/langs/html.mjs'),
+      import('shiki/langs/jsx.mjs'),
     ],
     themes: [
-      'github-light',
-      'github-dark',
+      import('shiki/themes/github-light.mjs'),
+      import('shiki/themes/github-dark.mjs'),
     ],
+    engine: createOnigurumaEngine(import('shiki/wasm')),
   }).catch((e) => {
     // Don't let a cached rejection disable highlighting for the rest of the
     // session — drop it so the next mount can try again.