@poveste/plugin-vue 0.14.0 → 0.15.0

package/src/client/app/Variant.ts

@@ -1,10 +1,11 @@
 import type { Variant } from '@poveste/shared'
 import type { ComputedRef, PropType } from 'vue'
+import type { PreviewRenderContext } from './render-context.js'
 import { applyState, autoPropsStateKeys } from '@poveste/shared'
-import { computed, defineComponent, getCurrentInstance, inject, onBeforeUnmount, useAttrs } from 'vue'
+import { computed, defineComponent, inject, onBeforeUnmount, useAttrs } from 'vue'
 import { syncVariantAutoProps } from './auto-props.js'
 import { useRenderContext } from './render-context.js'
-import { syncStateBundledAndExternal, toRawDeep } from './util.js'
+import { syncStateBundledAndExternal, toRawDeep, useInstance } from './util.js'
 
 // const logLocation = location.href.includes('__sandbox') ? '[Sandbox]' : '[Host]'
 
@@ -54,14 +55,14 @@ export default defineComponent({
     const attrs = useAttrs() as {
       variant?: Variant
     }
-    const vm = getCurrentInstance()
+    const vm = useInstance('Variant')
     const story = inject<ComputedRef<any>>('story')
     const implicitState = inject<() => any>('implicitState')
     const renderContext = useRenderContext()
     let lastPropsTypesSnapshot: string
-    let renderVariant: Variant
-    let renderStateSync: ReturnType<typeof syncStateBundledAndExternal>
-    let mountStateSync: ReturnType<typeof syncStateBundledAndExternal>
+    let renderVariant: Variant | undefined
+    let renderStateSync: ReturnType<typeof syncStateBundledAndExternal> | null = null
+    let mountStateSync: ReturnType<typeof syncStateBundledAndExternal> | undefined
 
     // Registered before the first `await` below, and deliberately so. This is
     // an async setup(), and Vue drops any lifecycle hook registered after an
@@ -89,7 +90,7 @@ export default defineComponent({
 
     function updateVariant(variant: Variant) {
       Object.assign(variant, {
-        slots: () => vm.proxy.$slots,
+        slots: () => vm.slots,
         source: props.source,
         responsiveDisabled: props.responsiveDisabled,
         autoPropsDisabled: props.autoPropsDisabled,
@@ -98,12 +99,13 @@ export default defineComponent({
         configReady: true,
       })
 
-      if (!props.implicit && !story.value?.meta?.hasVariantChildComponents) {
-        if (!story.value.meta) {
-          story.value.meta = {}
+      const storyValue = story?.value
+      if (storyValue && !props.implicit && !storyValue.meta?.hasVariantChildComponents) {
+        if (!storyValue.meta) {
+          storyValue.meta = {}
         }
 
-        Object.assign(story.value.meta, {
+        Object.assign(storyValue.meta, {
           hasVariantChildComponents: true,
         })
       }
@@ -119,33 +121,33 @@ export default defineComponent({
       }
 
       if (!renderVariant) {
-        renderVariant = story.value?.variants[renderContext.nextVariantIndex.value]
+        renderVariant = story?.value?.variants[renderContext.nextVariantIndex.value]
         renderContext.nextVariantIndex.value++
       }
 
       return renderVariant
     }
 
-    function renderVariantSlot(variant: Variant) {
-      if (renderContext.slotName === 'controls') {
-        return vm.proxy.$slots.controls?.({
-          state: renderContext.externalState,
+    function renderVariantSlot(variant: Variant, context: PreviewRenderContext) {
+      if (context.slotName === 'controls') {
+        return vm.slots['controls']?.({
+          state: context.externalState,
         }) ?? null
       }
 
-      if (renderContext.slotName !== 'default') {
+      if (context.slotName !== 'default') {
         return null
       }
 
-      const vnodes = vm.proxy.$slots.default?.({
-        state: renderContext.externalState,
+      const vnodes = vm.slots['default']?.({
+        state: context.externalState,
       }) ?? null
 
       if (vnodes && !variant.autoPropsDisabled) {
         lastPropsTypesSnapshot = syncVariantAutoProps(
           variant,
           vnodes,
-          renderContext.externalState,
+          context.externalState,
           lastPropsTypesSnapshot,
         )
       }
@@ -193,14 +195,15 @@ export default defineComponent({
     this.updateVariant(variant)
     this.syncRenderVariantState(variant)
 
-    if (this.renderContext?.mode !== 'render') {
+    const renderContext = this.renderContext
+    if (renderContext?.mode !== 'render') {
       return null
     }
 
-    if (this.renderContext.currentVariant?.id !== variant.id) {
+    if (renderContext.currentVariant?.id !== variant.id) {
       return null
     }
 
-    return this.renderVariantSlot(variant)
+    return this.renderVariantSlot(variant, renderContext)
   },
 })

package/src/client/app/__tests__/preview-variants.spec.ts

@@ -0,0 +1,76 @@
+import type { Story as StoryData, Variant as VariantData } from '@poveste/shared'
+import type { Component } from 'vue'
+import { describe, expect, it } from 'vitest'
+import { createSSRApp, defineComponent, h, reactive } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { provideRenderContext } from '../render-context.js'
+import Story from '../Story.js'
+import Variant from '../Variant.js'
+
+const COUNT = 50
+
+function storyData(): StoryData {
+  const variants = Array.from({ length: COUNT }, (_, i) => ({ id: `v${i + 1}`, title: `Variant ${i + 1}`, state: {} })) as VariantData[]
+  // `hasVariantChildComponents` is what every explicit <Variant> sets as it renders,
+  // so this is the story as a retarget finds it: past its first render.
+  return reactive({ id: 'grid', title: 'Grid', variants, meta: { hasVariantChildComponents: true } }) as unknown as StoryData
+}
+
+/** Renders `storyComponent` for `target` in a render context, and counts the Variant components created. */
+async function renderPreview(storyComponent: Component, story: StoryData, target: string) {
+  let variantsCreated = 0
+  const currentVariant = story.variants.find(variant => variant.id === target) ?? null
+  const app = createSSRApp(defineComponent({
+    setup() {
+      provideRenderContext(reactive({ mode: 'render', slotName: 'default', currentVariant, externalState: {}, nextVariantIndex: { value: 0 } }))
+      return () => h(storyComponent, { story })
+    },
+  }))
+  app.mixin({
+    beforeCreate() {
+      if (this.$options.name === 'Variant') {
+        variantsCreated++
+      }
+    },
+  })
+  const html = await renderToString(app)
+  return { html, variantsCreated }
+}
+
+const button = (n: number) => h('button', `Button ${n}`)
+
+describe('a preview render of one variant', () => {
+  // #873: gated on `hasVariantChildComponents`, the filter below never ran after a
+  // story's first render, and every retarget rendered all N Variant components.
+  it('creates only the target Variant when every variant is a direct child', async () => {
+    const DirectStory = defineComponent({
+      props: { story: { type: Object, required: true } },
+      setup: props => () => h(Story, { story: props.story }, {
+        default: () => Array.from({ length: COUNT }, (_, i) => h(Variant, { key: i }, { default: () => button(i + 1) })),
+      }),
+    })
+
+    const { html, variantsCreated } = await renderPreview(DirectStory, storyData(), 'v37')
+
+    expect(variantsCreated).toBe(1)
+    expect(html).toContain('Button 37')
+    expect(html).not.toContain('Button 36<')
+  })
+
+  // A walk of the slot's vnodes cannot see a <Variant> inside a child component,
+  // so positions would not line up with `story.variants`, and every one renders.
+  it('still renders every Variant when they live in a child component', async () => {
+    const Rows = defineComponent({
+      setup: () => () => Array.from({ length: COUNT }, (_, i) => h(Variant, { key: i }, { default: () => button(i + 1) })),
+    })
+    const WrappedStory = defineComponent({
+      props: { story: { type: Object, required: true } },
+      setup: props => () => h(Story, { story: props.story }, { default: () => h(Rows) }),
+    })
+
+    const { html, variantsCreated } = await renderPreview(WrappedStory, storyData(), 'v37')
+
+    expect(variantsCreated).toBe(COUNT)
+    expect(html).toContain('Button 37')
+  })
+})

package/src/client/app/auto-props.ts

@@ -52,7 +52,7 @@ function visitVNodes(vnodes: any, externalState: Variant['state'], traversalStat
 
       for (const key of names) {
         const prop = Array.isArray(declared) ? undefined : declared[key]
-        let types
+        let types: string[] | undefined
         let defaultValue
 
         if (prop) {
@@ -169,7 +169,7 @@ function normalizeVNodes(vnodes: any) {
     return vnodes == null ? [] : [vnodes]
   }
 
-  const result = []
+  const result: any[] = []
 
   for (const vnode of vnodes) {
     if (Array.isArray(vnode)) {

package/src/client/app/global-components.ts

@@ -1,5 +1,6 @@
 import type {
   App as _App,
+  Component as _Component,
 } from '@poveste/vendors/vue'
 import type {
   App,
@@ -27,14 +28,19 @@ export function registerGlobalComponents(app: App) {
 
   app.component('Variant', Variant)
 
-  for (const key in components) {
-    app.component(key, wrapControlComponent(components[key]))
+  for (const [key, component] of Object.entries(components)) {
+    app.component(key, wrapControlComponent(component))
   }
 }
 
-function wrapControlComponent(controlComponent) {
+function wrapControlComponent(controlComponent: (typeof components)[keyof typeof components]) {
+  // Which control this is decides at runtime, and its props are the story's untyped
+  // attrs, so it renders through Vue's dynamic `Component` rather than a union of every
+  // control's props, where a slider would be claimed renderable without `min` (#835).
+  const dynamicControl: _Component = controlComponent
+
   return defineComponent({
-    name: controlComponent.name,
+    ...controlComponent.name ? { name: controlComponent.name } : {},
     inheritAttrs: false,
     setup(props, { attrs }) {
       const el = ref<HTMLDivElement>()
@@ -44,7 +50,7 @@ function wrapControlComponent(controlComponent) {
 
       const state = _reactive({})
 
-      function applyState(data) {
+      function applyState(data: Record<string, unknown>) {
         Object.assign(state, data)
       }
 
@@ -55,15 +61,15 @@ function wrapControlComponent(controlComponent) {
 
       // Slots
 
-      let newSlotCalls = []
-      const slotCalls = ref([])
+      let newSlotCalls: Record<string, unknown>[] = []
+      const slotCalls = ref<Record<string, unknown>[]>([])
 
       function moveSlotContent() {
         slotCalls.value.forEach((props, index) => {
-          const renderedEl = slotEl.value.querySelector(`[renderslotid="${index}"]`)
-          if (!renderedEl) return
-          const targetEl = el.value.querySelector(`[slotid="${index}"]`)
-          while (targetEl.firstChild) {
+          const renderedEl = slotEl.value?.querySelector(`[renderslotid="${index}"]`)
+          const targetEl = el.value?.querySelector(`[slotid="${index}"]`)
+          if (!renderedEl || !targetEl) return
+          while (targetEl.lastChild) {
             targetEl.removeChild(targetEl.lastChild)
           }
           targetEl.appendChild(renderedEl)
@@ -85,11 +91,11 @@ function wrapControlComponent(controlComponent) {
             newSlotCalls = []
           },
           render() {
-            return _h(controlComponent, {
+            return _h(dynamicControl, {
               ...state,
               key: 'component',
             }, {
-              default: (props) => {
+              default: (props: Record<string, unknown>) => {
                 newSlotCalls.push(props)
                 return _h('div', {
                   slotId: newSlotCalls.length - 1,
@@ -124,7 +130,7 @@ function wrapControlComponent(controlComponent) {
           ref: 'slotEl',
         }, this.slotCalls.map((props, index) => h('div', {
           renderSlotId: index,
-        }, this.$slots.default(props)))),
+        }, this.$slots['default']?.(props)))),
       ]
     },
   })

package/src/client/app/host.ts

@@ -45,15 +45,17 @@ const PreviewHostRoot = defineComponent({
   setup(props) {
     provideRenderContext(props.renderContext)
 
-    return () => h(props.story.file.component, {
-      story: props.story,
-    })
+    return () => props.story.file
+      ? h(props.story.file.component, {
+          story: props.story,
+        })
+      : null
   },
 })
 
 export function createPreviewHost(options: PreviewHostOptions) {
-  let app: App = null
-  let target: HTMLDivElement = null
+  let app: App | null = null
+  let target: HTMLDivElement | null = null
 
   async function mount() {
     const wrappers: Component[] = []
@@ -103,7 +105,8 @@ export function createPreviewHost(options: PreviewHostOptions) {
     const setupApi: Vue3StorySetupApi = {
       app,
       story: options.getStory(),
-      variant: options.getVariant(),
+      // The setup API declares `variant` optional, not nullable.
+      variant: options.getVariant() ?? undefined,
       addWrapper: (wrapper) => {
         wrappers.unshift(wrapper)
       },

package/src/client/app/util.ts

@@ -1,17 +1,18 @@
+import type { ComponentInternalInstance } from 'vue'
 import { applyState, createStateBaseline } from '@poveste/shared'
 import {
   isRef as _isRef,
   unref as _unref,
   watch as _watch,
 } from '@poveste/vendors/vue'
-import { isRef, unref, watch } from 'vue'
+import { getCurrentInstance, isRef, unref, watch } from 'vue'
 
-const isObject = val => val !== null && typeof val === 'object'
+const isObject = (val: unknown): val is object => val !== null && typeof val === 'object'
 
 /**
  * Using external/user Vue
  */
-export function toRawDeep(val, seen = new WeakMap()) {
+export function toRawDeep(val: unknown, seen = new WeakMap()): any {
   const unwrappedValue = isRef(val) ? unref(val) : val
 
   if (typeof unwrappedValue === 'symbol') {
@@ -27,7 +28,7 @@ export function toRawDeep(val, seen = new WeakMap()) {
   }
 
   if (Array.isArray(unwrappedValue)) {
-    const result = []
+    const result: unknown[] = []
     seen.set(unwrappedValue, result)
     result.push(...unwrappedValue.map(value => toRawDeep(value, seen)))
     return result
@@ -49,7 +50,7 @@ function toRawObject(obj: Record<any, any>, target: Record<any, any>, seen = new
 /**
  * Using bundled Vue
  */
-export function _toRawDeep(val, seen = new WeakMap()) {
+export function _toRawDeep(val: unknown, seen = new WeakMap()): any {
   const unwrappedValue = _isRef(val) ? _unref(val) : val
 
   if (typeof unwrappedValue === 'symbol') {
@@ -65,7 +66,7 @@ export function _toRawDeep(val, seen = new WeakMap()) {
   }
 
   if (Array.isArray(unwrappedValue)) {
-    const result = []
+    const result: unknown[] = []
     seen.set(unwrappedValue, result)
     result.push(...unwrappedValue.map(value => _toRawDeep(value, seen)))
     return result
@@ -103,7 +104,7 @@ function without(state: Record<string, any>, omit: string[]): Record<string, any
  * @param externalState Reactive state created with the external/user Vue
  * @param omit Keys neither side may learn from the other
  */
-export function syncStateBundledAndExternal(bundledState, externalState, omit: string[] = []) {
+export function syncStateBundledAndExternal(bundledState: Record<string, any>, externalState: Record<string, any>, omit: string[] = []) {
   // Each side is asked only for what *it* changed, and that is all that crosses.
   //
   // Both watchers used to mirror the whole of their side. That works while the
@@ -146,3 +147,12 @@ export function syncStateBundledAndExternal(bundledState, externalState, omit: s
     },
   }
 }
+
+/** The component being set up. Throws outside `setup`, where Vue returns null. */
+export function useInstance(name: string): ComponentInternalInstance {
+  const vm = getCurrentInstance()
+  if (!vm) {
+    throw new Error(`[poveste] <${name}> can only be set up inside a component`)
+  }
+  return vm
+}

package/src/client/codegen.ts

@@ -7,7 +7,7 @@ import { camelCase, pascalCase } from 'change-case'
 import { Text, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText } from 'vue'
 
 export async function generateSourceCode(variant: Variant) {
-  const vnode = variant.slots().default?.({ state: variant.state ?? {} }) ?? []
+  const vnode = variant.slots?.().default?.({ state: variant.state ?? {} }) ?? []
   const list = Array.isArray(vnode) ? vnode : [vnode]
   const lines: string[] = []
   for (const n in list) {
@@ -17,7 +17,7 @@ export async function generateSourceCode(variant: Variant) {
   return lines.join('\n')
 }
 
-async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = null): Promise<{ lines: string[], isText?: boolean }> {
+async function printVNode(vnode: VNode, propsOverrides: Record<string, any> | null = null): Promise<{ lines: string[], isText?: boolean }> {
   if (vnode.type === Text) {
     return {
       // @ts-expect-error TODO
@@ -43,7 +43,7 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
     ]
 
     // Directives
-    function genDirective(dirName: string, dir, valueCode: string = null) {
+    function genDirective(dirName: string, dir: { arg?: string | null, modifiers?: Partial<Record<string, boolean>>, value: unknown }, valueCode: string | null = null) {
       let modifiers = ''
       for (const key in dir.modifiers) {
         if (dir.modifiers[key]) {
@@ -77,15 +77,15 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
         // Vmodel
         if (dir.dir === vModelText || dir.dir === vModelSelect || dir.dir === vModelRadio || dir.dir === vModelCheckbox || dir.dir === vModelDynamic) {
           const listenerKeys = [`onUpdate:${dir.arg ?? 'modelValue'}`, `onUpdate:${camelCase(dir.arg ?? 'modelValue')}`]
-          const listenerKey = listenerKeys.find(key => vnode.props[key])
-          const listener = vnode.props[listenerKey]
-          let valueCode: string = null
-          if (listener) {
+          const listenerKey = listenerKeys.find(key => vnode.props?.[key])
+          const listener = listenerKey ? vnode.props?.[listenerKey] : undefined
+          let valueCode: string | null = null
+          if (listenerKey && listener) {
             skipProps.push(listenerKey)
             const listenerSource = listener.toString()
             const result = /\(\$event\) => (.*?) = \$event/.exec(listenerSource)
             if (result) {
-              valueCode = result[1]
+              valueCode = result[1] ?? null
             }
           }
           genDirective('model', dir, valueCode)
@@ -94,7 +94,7 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
         else if (dir.instance._ || dir.instance.$) {
           // @ts-expect-error TODO
           const target = dir.instance.$ ?? dir.instance._
-          let dirName: string
+          let dirName: string | undefined
           for (const directives of [target.directives, target.appContext.directives]) {
             for (const key in directives) {
               if (directives[key] === dir.dir) {
@@ -128,7 +128,7 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
         if (prop.startsWith('on')) {
           directive = '@'
         }
-        const arg = directive === '@' ? `${prop[2].toLowerCase()}${prop.slice(3)}` : prop
+        const arg = directive === '@' ? `${prop.charAt(2).toLowerCase()}${prop.slice(3)}` : prop
 
         // v-model on component
         const vmodelListeners = [`onUpdate:${prop}`, `onUpdate:${camelCase(prop)}`]
@@ -137,17 +137,17 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
         if (directive === ':' && vmodelListener) {
           // Listener
           skipProps.push(vmodelListener)
-          const listener = vnode.props[vmodelListener]
-          const listenerSource = listener.toString()
-          let valueCode: string
+          const listener = vnode.props?.[vmodelListener]
+          const listenerSource = String(listener)
+          let valueCode: string | null = null
           const result = /\(\$event\) => (.*?) = \$event/.exec(listenerSource)
           if (result) {
-            valueCode = result[1]
+            valueCode = result[1] ?? null
           }
 
           // Modifiers
           const modifiersKey = `${prop === 'modelValue' ? 'model' : prop}Modifiers`
-          const modifiers = vnode.props[modifiersKey] ?? {}
+          const modifiers = vnode.props?.[modifiersKey] ?? {}
           skipProps.push(modifiersKey)
 
           // Directive
@@ -169,11 +169,11 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
           serialized = cleanupExpression(value.substring(2, value.length - 2).trim()).split('\n')
         }
         else if (typeof value === 'function') {
-          let code = cleanupExpression(value.toString().replace(/'/g, '\\\'').replace(/"/g, '\''))
-          const testResult = /function (\S+)\(/.exec(code)
-          if (testResult) {
+          let code = cleanupExpression(value.toString())
+          const functionName = /function (\S+)\(/.exec(code)?.[1]
+          if (functionName) {
             // Function name only
-            serialized = [testResult[1]]
+            serialized = [functionName]
           }
           else {
             if (code.startsWith('($event) => ')) {
@@ -186,15 +186,16 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
         else {
           serialized = serializeAndCleanJs(value)
         }
-        if (serialized.length > 1) {
+        const { quote, lines } = delimitAttr(serialized)
+        if (lines.length > 1) {
           multilineAttrs = true
-          const indented: string[] = [`${directive}${arg}="${serialized[0]}`]
-          indented.push(...serialized.slice(1, serialized.length - 1))
-          indented.push(`${serialized[serialized.length - 1]}"`)
+          const indented: string[] = [`${directive}${arg}=${quote}${lines[0]}`]
+          indented.push(...lines.slice(1, lines.length - 1))
+          indented.push(`${lines[lines.length - 1]}${quote}`)
           attrs.push(indented)
         }
         else {
-          attrs.push([`${directive}${arg}="${serialized[0]}"`])
+          attrs.push([`${directive}${arg}=${quote}${lines[0]}${quote}`])
         }
       }
       // @ts-expect-error TODO
@@ -202,7 +203,12 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
         attrs.push([prop])
       }
       else {
-        attrs.push([`${prop}="${value}"`])
+        // Same delimiting as the directive branch above. A string prop is the
+        // other way a `"` reaches an attribute — `title='He said "hi"'` closed
+        // the attribute early and turned the rest of the value into stray
+        // attributes, on an element whose directives rendered correctly.
+        const plain = delimitAttr([String(value)])
+        attrs.push([`${prop}=${plain.quote}${plain.lines[0]}${plain.quote}`])
       }
     }
 
@@ -248,7 +254,7 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
           if (isAllChildText === undefined) {
             isAllChildText = true
           }
-          const text = result.lines[0]
+          const text = result.lines[0] ?? ''
           if (!childLines.length || /^\s/.test(text)) {
             childLines.push(text.trim())
           }
@@ -277,6 +283,7 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
             if (p === '__v_isRef') {
               return () => false
             }
+            return null
           })
           const children = vnode.children[key](autoObject.proxy)
           const slotLines: string[] = []
@@ -352,6 +359,51 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
   }
 }
 
+/**
+ * How to delimit an attribute whose value is arbitrary code.
+ *
+ * The source pane shows template source a reader copies, so the code has to
+ * survive as written. The pass this replaces escaped `'` for a JavaScript
+ * string and rewrote `"` into `'`, and the consumer is neither — it is an
+ * attribute delimited by `"`. Both halves reached the reader: a handler written
+ * `() => alert("hi")` was shown as `() => alert('hi')`, and one written
+ * `() => alert('hi')` came out with visible backslashes, which reads as a bug
+ * in the reader's own code rather than as our rendering.
+ *
+ * The order made it worse. Every `'` the rewrite introduced arrived after the
+ * escaping pass, so an authored quote was escaped and a manufactured one was
+ * not. A backslash was never escaped at all, which is what CodeQL flagged as
+ * `js/incomplete-sanitization`: `() => alert('it\'s')` went in carrying one
+ * and came out carrying four.
+ *
+ * So nothing is escaped for a string context. Code containing `"` takes the
+ * other delimiter, the way someone writing the template by hand would. Code
+ * carrying both quote characters has no free delimiter, so whichever it takes
+ * is escaped inside it — and the one appearing less often wins, because every
+ * escape is a character the author did not write. That is `&#39;` as often as
+ * `&quot;`: the repository's own `get-name` fixture holds two doubles and one
+ * single, so the single is the cheaper one there (#602).
+ */
+export function delimitAttr(lines: string[]): { quote: string, lines: string[] } {
+  const code = lines.join('\n')
+  const doubles = (code.match(/"/g) ?? []).length
+  const singles = (code.match(/'/g) ?? []).length
+
+  if (doubles === 0) {
+    return { quote: '"', lines }
+  }
+  if (singles === 0) {
+    return { quote: '\'', lines }
+  }
+
+  // Both appear, so whichever delimiter is chosen has to be escaped inside it.
+  // The one that appears less often wins, because every escape is a character
+  // the author did not write and this pane exists to show what they did.
+  return singles <= doubles
+    ? { quote: '\'', lines: lines.map(line => line.replace(/'/g, '&#39;')) }
+    : { quote: '"', lines: lines.map(line => line.replace(/"/g, '&quot;')) }
+}
+
 export function getTagName(vnode: VNode) {
   if (typeof vnode.type === 'string') {
     return vnode.type
@@ -376,9 +428,9 @@ export function getTagName(vnode: VNode) {
 }
 
 function getNameFromFile(file: string) {
-  const parts = /([^/]+)\.vue$/.exec(file)
-  if (parts) {
-    return pascalCase(parts[1])
+  const name = /([^/]+)\.vue$/.exec(file)?.[1]
+  if (name) {
+    return pascalCase(name)
   }
   return 'Anonymous'
 }

package/src/client/server/Story.ts

@@ -55,9 +55,15 @@ export default defineComponent({
 
     // Story
 
+    const id = props.id ?? file?.id
+    const title = props.title ?? file?.fileName
+    if (!id || title === undefined) {
+      throw new Error('[poveste] a <Story> collected outside a story file needs an `id` and a `title`')
+    }
+
     const story: ServerStory = {
-      id: props.id ?? file?.id,
-      title: props.title ?? file?.fileName,
+      id,
+      title,
       group: props.group,
       layout: props.layout,
       icon: props.icon,
@@ -66,7 +72,7 @@ export default defineComponent({
       meta: props.meta,
       variants: [],
     }
-    const addStory = inject('addStory', null)
+    const addStory = inject<((story: ServerStory) => void) | null>('addStory', null)
     addStory?.(story)
 
     // Variants
@@ -94,7 +100,7 @@ export default defineComponent({
   render() {
     let suppressError = false
     try {
-      const vnodes = this.$slots.default?.({
+      const vnodes = this.$slots['default']?.({
         get state() {
           // No variant tags
           suppressError = true

package/src/client/server/Variant.ts

@@ -36,6 +36,9 @@ export default defineComponent({
     const story = inject<ServerStory>('story')
 
     function generateId() {
+      if (!story) {
+        throw new Error('[poveste] a <Variant> with no `id` has to be inside a <Story>')
+      }
       return `${story.id}-${story.variants.length}`
     }