@poveste/app 0.14.0 → 0.15.0

package/src/app/stores/story.ts

@@ -9,9 +9,9 @@ export const useStoryStore = defineStore('story', () => {
     stories.value = value
   }
 
-  const currentStory = computed(() => stories.value.find(s => s.id === router.currentRoute.value.params.storyId))
+  const currentStory = computed(() => stories.value.find(s => s.id === router.currentRoute.value.params['storyId']))
 
-  const currentVariant = computed(() => currentStory.value?.variants.find(v => v.id === router.currentRoute.value.query.variantId))
+  const currentVariant = computed(() => currentStory.value?.variants.find(v => v.id === router.currentRoute.value.query['variantId']))
 
   const maps = computed(() => {
     const storyMap = new Map<string, Story>()

package/src/app/types.ts

@@ -33,10 +33,10 @@ export interface SearchResultBase {
   rank: number
   id: string
   title: string
-  path?: string[]
-  icon?: string
-  iconColor?: string
-  type?: SearchResultType
+  path?: string[] | undefined
+  icon?: string | undefined
+  iconColor?: string | undefined
+  type?: SearchResultType | undefined
 }
 
 export type SearchResult = SearchResultBase & ({

package/src/app/util/commands.ts

@@ -41,7 +41,7 @@ export const builtinCommands: ClientCommand[] = [
     label: 'Open Poveste Documentation',
     icon: 'carbon:help',
     clientAction: () => {
-      window.open('https://poveste.dev/guide/getting-started.html', '_blank')
+      window.open('https://poveste.dev/guide/getting-started', '_blank')
     },
   },
 ]

package/src/app/util/dark.ts

@@ -4,7 +4,7 @@ import { povesteConfig } from './config.js'
 
 export const isDark = useDark({
   valueDark: 'ptw-dark',
-  initialValue: povesteConfig.theme.defaultColorScheme,
+  ...povesteConfig.theme.defaultColorScheme ? { initialValue: povesteConfig.theme.defaultColorScheme } : {},
   storageKey: 'poveste-color-scheme',
   storage: povesteConfig.theme.storeColorScheme ? localStorage : sessionStorage,
 })

package/src/app/util/env.ts

@@ -2,5 +2,4 @@
 // `navigator.userAgentData` is Chromium-only, so reading it here would simply
 // stop detecting macOS in Safari and Firefox — the two places where getting the
 // ⌘ shortcuts right matters most.
-// eslint-disable-next-line ts/no-deprecated
 export const isMac = navigator.platform.toLowerCase().includes('mac')

package/src/app/util/events.ts

@@ -1,7 +1,7 @@
 import { EVENT_SEND } from './const'
 import { occupant } from './occupant'
 
-export async function logEvent(name: string, argument) {
+export async function logEvent(name: string, argument: unknown) {
   const event = {
     name,
     argument: JSON.parse(stringifyEvent(argument)), // Needed for HTMLEvent that can't be cloned
@@ -20,10 +20,11 @@ export async function logEvent(name: string, argument) {
   }
 }
 
-function stringifyEvent(e) {
-  const obj = {}
-  for (const k in e) {
-    obj[k] = e[k]
+function stringifyEvent(e: unknown) {
+  const obj: Record<string, unknown> = {}
+  // `for...in` rather than `Object.entries`: an event's fields are inherited.
+  for (const k in e as object) {
+    obj[k] = Reflect.get(e as object, k)
   }
   return JSON.stringify(obj, (k, v) => {
     if (v instanceof Node) return 'Node'

package/src/app/util/grid-slots.ts

@@ -67,6 +67,6 @@ export function trimSlots(slots: Slot[]): Slot[] {
   }
 
   let end = next.length
-  while (end > 0 && !next[end - 1].visible) end--
+  while (end > 0 && !next[end - 1]?.visible) end--
   return end === next.length ? next : next.slice(0, end)
 }

package/src/app/util/keyboard.ts

@@ -11,7 +11,7 @@ export interface KeyboardShortcutOptions {
   event?: 'keyup' | 'keydown' | 'keypress'
 }
 
-const modifiers: { [i: string]: { key: string, pressed: boolean } } = {
+const modifiers = {
   ctrl: { key: 'Control', pressed: false },
   alt: { key: 'Alt', pressed: false },
   shift: { key: 'Shift', pressed: false },
@@ -24,8 +24,7 @@ const trackedWindows = shallowRef<Window[]>([])
 
 function bindTracking(target: Window) {
   const onKeydown = (event: KeyboardEvent) => {
-    for (const i in modifiers) {
-      const mod = modifiers[i]
+    for (const mod of Object.values(modifiers)) {
       if (mod.key === event.key) {
         mod.pressed = true
         return
@@ -36,8 +35,7 @@ function bindTracking(target: Window) {
   const onKeyup = (event: KeyboardEvent) => {
     requestAnimationFrame(() => {
       pressedKeys.clear()
-      for (const i in modifiers) {
-        const mod = modifiers[i]
+      for (const mod of Object.values(modifiers)) {
         if (mod.key === event.key) {
           mod.pressed = false
           break
@@ -47,8 +45,8 @@ function bindTracking(target: Window) {
   }
   const onBlur = () => {
     pressedKeys.clear()
-    for (const i in modifiers) {
-      modifiers[i].pressed = false
+    for (const mod of Object.values(modifiers)) {
+      mod.pressed = false
     }
   }
   target.addEventListener('keydown', onKeydown)
@@ -108,10 +106,8 @@ function isMatchingCombination(combination: string): boolean {
   // `split` always yields at least one element, so this is unreachable for any
   // real combination — an empty or blank one matches nothing, which is right.
   if (!targetKey) return false
-  for (const mod in modifiers) {
-    const containsMod = splitted.includes(mod)
-    const isPressed = modifiers[mod].pressed
-    if (containsMod !== isPressed) {
+  for (const [name, mod] of Object.entries(modifiers)) {
+    if (splitted.includes(name) !== mod.pressed) {
       return false
     }
   }

package/src/app/util/mapping.ts

@@ -28,7 +28,7 @@ export function mapFile(file: StoryFile, existingFile?: StoryFile): StoryFile {
         }
       }
       else if (key !== 'component') {
-        result[key] = file[key]
+        Reflect.set(result, key, Reflect.get(file, key))
       }
     }
   }
@@ -58,7 +58,7 @@ export function mapVariant(variant: Variant, existingVariant?: Variant): Variant
     result = existingVariant
     for (const key in variant) {
       if (!copiedFromExistingVariant.includes(key)) {
-        result[key] = variant[key]
+        Reflect.set(result, key, Reflect.get(variant, key))
       }
     }
   }

package/src/app/util/render-tracker.ts

@@ -0,0 +1,31 @@
+/**
+ * Whether the render now under way inside a realm reported a throw.
+ *
+ * The host cannot see inside the realm, so "did this render succeed" has to be
+ * read off the two named messages it does see. A throw reaches
+ * `app.config.errorHandler` during mount and `SANDBOX_READY` is emitted after
+ * `await host.mount()` returns, so the order is always error-then-ready — which
+ * makes a ready with nothing recorded since the render began a clean render.
+ *
+ * Clearing on the story and variant ids changing instead cleared the pair being
+ * navigated *to*, so arriving at a broken story wiped its marker, and the fixed
+ * story the comment was about was never reached at all: a file edited in place
+ * keeps its ids, so that watcher did not fire on the one path it named (#597).
+ */
+export function createRenderTracker() {
+  let threw = false
+
+  return {
+    /** A new render is starting: what the previous one reported no longer holds. */
+    begin(): void {
+      threw = false
+    },
+    threw(): void {
+      threw = true
+    },
+    /** True when the render that has just reported ready said nothing before it. */
+    wasClean(): boolean {
+      return !threw
+    },
+  }
+}

package/src/app/util/state.ts

@@ -1,9 +1,9 @@
 import { clone, omit } from '@poveste/shared'
 import { isRef, unref } from 'vue'
 
-const isObject = val => val !== null && typeof val === 'object'
+const isObject = (val: unknown): val is object => val !== null && typeof val === 'object'
 
-export function toRawDeep(val, clean = false, seen = new WeakMap()) {
+export function toRawDeep(val: unknown, clean = false, seen = new WeakMap()): any {
   const unwrappedValue = isRef(val) ? unref(val) : val
 
   if (typeof unwrappedValue === 'symbol') {
@@ -31,7 +31,7 @@ export function toRawDeep(val, clean = false, seen = new WeakMap()) {
   else {
     const result = {}
     seen.set(unwrappedValue, result)
-    toRawObject(unwrappedValue, result, clean, seen)
+    toRawObject(unwrappedValue as Record<any, any>, result, clean, seen)
     return result
   }
 }

package/src/app/util/variant.ts

@@ -10,17 +10,27 @@ import { useRoute } from 'vue-router'
  * has to tell "a variant is on its way" from "this story is waiting for the
  * reader to pick one" needs the same answer it will give — hence one predicate
  * rather than two copies of the condition (#328).
+ *
+ * Any story with variants, deliberately. It used to require a remembered choice
+ * or exactly one variant, which made `StoryView`'s `variants[0]` fallback
+ * unreachable: a story with several variants and no history satisfied neither
+ * clause, so the first visit of a session showed an empty panel and every visit
+ * after it worked, because the first one recorded the history (#724).
+ *
+ * No layout clause. Grid stories already auto-selected on revisit through the
+ * remembered choice, so excluding them here would auto-open them on the second
+ * visit and never the first — this defect, made permanent for one layout.
  */
 // A type predicate rather than `boolean`: the body already establishes that the
 // story is there, and returning `boolean` threw that away at every call site —
 // `StoryView` reads the story twice immediately after this returns true.
 export function autoSelectsVariant(story: Story | null | undefined): story is Story {
-  return !!story && (!!story.lastSelectedVariant || story.variants.length === 1)
+  return !!story && story.variants.length > 0
 }
 
 export function useCurrentVariantRoute(variant: Ref<Variant>) {
   const route = useRoute()
-  const isActive = computed(() => route.query.variantId === variant.value.id)
+  const isActive = computed(() => route.query['variantId'] === variant.value.id)
   const targetRoute = computed(() => ({
     ...route,
     query: {