@poveste/plugin-vue 0.14.0 → 0.16.0

package/src/client/__tests__/codegen-attrs.spec.ts

@@ -0,0 +1,149 @@
+import type { Variant } from '@poveste/shared'
+import { describe, expect, it } from 'vitest'
+import { h } from 'vue'
+import { delimitAttr, generateSourceCode } from '../codegen.js'
+
+/*
+ * The source pane shows the template that produced the variant, so a handler
+ * has to appear as its author wrote it. The pass this replaces escaped `'` for
+ * a JavaScript string and rewrote `"` into `'` — neither of which is the
+ * attribute the result lands in — and each half reached the reader alone (#602).
+ *
+ * A case carrying both quote characters is the one that matters: each half
+ * fails on its own, so a fixture with only one of them passes a half-fix.
+ */
+describe('delimitAttr', () => {
+  it('leaves code with no quotes in it alone, under the usual delimiter', () => {
+    expect(delimitAttr(['onClick'])).toEqual({ quote: '"', lines: ['onClick'] })
+  })
+
+  // Was shown as `() => alert('hi')` — the reader's double quotes rewritten.
+  it('takes the other delimiter rather than rewriting a double quote', () => {
+    expect(delimitAttr(['() => alert("hi")'])).toEqual({
+      quote: '\'',
+      lines: ['() => alert("hi")'],
+    })
+  })
+
+  // Was shown as `() => alert(\'hi\')`, backslashes and all.
+  it('leaves a single quote unescaped, since the attribute is not a JS string', () => {
+    expect(delimitAttr(['() => alert(\'hi\')'])).toEqual({
+      quote: '"',
+      lines: ['() => alert(\'hi\')'],
+    })
+  })
+
+  // Both characters, so whichever delimiter is chosen has to be escaped inside
+  // it. Two doubles against one single here, so the single is the cheaper one.
+  it('escapes the quote that appears less often when the code carries both', () => {
+    expect(delimitAttr(['() => console.log("it\'s here")'])).toEqual({
+      quote: '\'',
+      lines: ['() => console.log("it's here")'],
+    })
+  })
+
+  // Four singles against two doubles, so the double is the cheaper one here.
+  it('escapes the double quote instead when that is the rarer one', () => {
+    expect(delimitAttr(['() => alert(\'a\', \'b\', "c")'])).toEqual({
+      quote: '"',
+      lines: ['() => alert(\'a\', \'b\', "c")'],
+    })
+  })
+
+  // The alert CodeQL raised: the escaping pass never escaped a backslash, so
+  // `() => alert('it\'s')` went in carrying one and came out carrying four.
+  it('passes a backslash through untouched', () => {
+    const written = '() => alert(\'it\\\'s\')'
+
+    expect(delimitAttr([written]).lines[0]).toBe(written)
+  })
+
+  it('reads the whole value when deciding, not one line of it', () => {
+    expect(delimitAttr(['() => {', '  alert("hi")', '}']).quote).toBe('\'')
+  })
+
+  it('escapes on every line, not only the one that decided it', () => {
+    expect(delimitAttr(['() => {', '  alert("a")', '  alert(\'b\')', '  alert(\'c\')', '}']).lines).toEqual([
+      '() => {',
+      '  alert("a")',
+      '  alert(\'b\')',
+      '  alert(\'c\')',
+      '}',
+    ])
+  })
+})
+
+/*
+ * `delimitAttr` could be right and unused, so these drive the generator itself.
+ *
+ * The handler states its own source rather than being written as one. A `.vue`
+ * ships to the browser untransformed, but this spec does not: esbuild rewrote
+ * `alert('it\'s')` in the fixture to `alert("it's")` before `toString()` ever
+ * saw it, so a handler written here is not the text the generator receives.
+ * Overriding `toString` is what makes the input exact.
+ */
+const WITH_DOUBLE = '() => alert("hi")'
+const WITH_SINGLE = '() => alert(\'hi\')'
+const WITH_BOTH = '() => console.log("it\'s here")'
+const WITH_BACKSLASH = String.raw`() => alert('it\'s')`
+
+function handlerWritten(source: string): () => void {
+  const handler = (): void => {}
+  handler.toString = () => source
+  return handler
+}
+
+function variantWith(source: string): Variant {
+  return {
+    state: {},
+    slots: () => ({ default: () => h('button', { onClick: handlerWritten(source) }, 'go') }),
+  } as unknown as Variant
+}
+
+describe('generateSourceCode, for an event handler', () => {
+  it('shows a double quote the author wrote, under the other delimiter', async () => {
+    expect(await generateSourceCode(variantWith(WITH_DOUBLE))).toContain(`@click='${WITH_DOUBLE}'`)
+  })
+
+  it('shows a single quote unescaped, under the usual delimiter', async () => {
+    expect(await generateSourceCode(variantWith(WITH_SINGLE))).toContain(`@click="${WITH_SINGLE}"`)
+  })
+
+  it('escapes only the rarer quote when the handler carries both', async () => {
+    expect(await generateSourceCode(variantWith(WITH_BOTH)))
+      .toContain('@click=\'() => console.log("it's here")\'')
+  })
+
+  it('shows a backslash the author wrote exactly as written', async () => {
+    expect(await generateSourceCode(variantWith(WITH_BACKSLASH))).toContain(WITH_BACKSLASH)
+  })
+
+  // The alert itself: one backslash in, four out.
+  it('does not multiply the backslash it was given', async () => {
+    const source = await generateSourceCode(variantWith(WITH_BACKSLASH))
+
+    expect(source.match(/\\/g)).toHaveLength(1)
+  })
+})
+
+/*
+ * A string prop is the other way a `"` reaches an attribute, and it took the
+ * delimiter fix later than the handlers did — the element below rendered its
+ * directives correctly and mangled this one.
+ */
+describe('generateSourceCode, for a string prop', () => {
+  function variantWithTitle(title: string): Variant {
+    return {
+      state: {},
+      slots: () => ({ default: () => h('div', { title }, 'go') }),
+    } as unknown as Variant
+  }
+
+  it('leaves a plain value under the usual delimiter', async () => {
+    expect(await generateSourceCode(variantWithTitle('a calm title'))).toContain('title="a calm title"')
+  })
+
+  it('takes the other delimiter rather than closing the attribute early', async () => {
+    expect(await generateSourceCode(variantWithTitle('He said "hi"'))).toContain(`title='He said "hi"'`)
+  })
+})

package/src/client/__tests__/context.spec.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it, vi } from 'vitest'
+
+/*
+ * A collection worker evaluates the context modules more than once — its graph is
+ * invalidated while a story is mid-run — so the provider and the consumer can each
+ * hold their own instance of one file. The key is what has to survive that: minted
+ * per instance it differs between them, the injection misses, and the reader is
+ * told their `<Variant>` is outside a `<Story>`.
+ *
+ * Vue's own `provide`/`inject` are stubbed because they need a mounted component
+ * and this package's tests have no DOM; the key they are handed is the subject.
+ */
+const provided: unknown[] = []
+const injected: unknown[] = []
+
+vi.mock('vue', () => ({
+  provide: (key: unknown) => {
+    provided.push(key)
+  },
+  inject: (key: unknown) => {
+    injected.push(key)
+    return null
+  },
+}))
+
+const { createContext } = await import('../context.js')
+
+function keyOf(description: string) {
+  createContext(description, '<Story>').provide('anything')
+  return provided.at(-1)
+}
+
+describe('createContext', () => {
+  it('gives two instances of the same context one key', () => {
+    expect(keyOf('poveste-test-context')).toBe(keyOf('poveste-test-context'))
+  })
+
+  it('keeps two contexts apart when their descriptions differ', () => {
+    // What #981 was: one key meaning two things.
+    expect(keyOf('poveste-test-one')).not.toBe(keyOf('poveste-test-two'))
+  })
+
+  it('injects under the key it provides under', () => {
+    const context = createContext<string>('poveste-test-round-trip', '<Story>')
+    context.provide('the story file')
+    context.injectOptional()
+
+    expect(injected.at(-1)).toBe(provided.at(-1))
+  })
+})

package/src/client/app/MountStory.ts

@@ -26,6 +26,11 @@ export default _defineComponent({
       type: String,
       default: null,
     },
+
+    syncState: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   setup(props) {
@@ -35,14 +40,19 @@ export default _defineComponent({
       slotName: 'default',
       currentVariant: null,
       targetVariantId: props.targetVariantId,
+      syncState: props.syncState,
       externalState: null,
       nextVariantIndex: {
         value: 0,
       },
     })
-    let host: ReturnType<typeof createPreviewHost>
+    let host: ReturnType<typeof createPreviewHost> | null = null
 
     async function mountStory() {
+      if (!el.value) {
+        return
+      }
+
       host = createPreviewHost({
         name: 'MountStorySubApp',
         el: el.value,

package/src/client/app/RenderStory.ts

@@ -40,7 +40,7 @@ export default _defineComponent({
 
   setup(props, { emit }) {
     const sandbox = _ref<HTMLDivElement>()
-    let host: ReturnType<typeof createPreviewHost>
+    let host: ReturnType<typeof createPreviewHost> | null = null
     let mounting = false
 
     const externalState = reactive<Variant['state']>({})
@@ -73,6 +73,11 @@ export default _defineComponent({
       renderContext.currentVariant = props.variant
       renderContext.slotName = props.slotName
 
+      if (!sandbox.value) {
+        mounting = false
+        return
+      }
+
       host = createPreviewHost({
         name: 'RenderStorySubApp',
         el: sandbox.value,

package/src/client/app/RouterLinkStub.ts

@@ -36,7 +36,7 @@ export const RouterLinkStub = defineComponent({
   render() {
     const route = computed(() => defaultRoute)
     // mock reasonable return values to mimic vue-router's useLink
-    const children = this.$slots?.default?.({
+    const children = this.$slots?.['default']?.({
       route,
       href: computed(() => route.value.href),
       isActive: computed(() => false),

package/src/client/app/Story.ts

@@ -1,8 +1,11 @@
 import type { Story } from '@poveste/shared'
 import type { PropType, VNode } from 'vue'
+import type { PreviewRenderContext } from './render-context.js'
 import { omitInheritStoryProps } from '@poveste/shared'
-import { cloneVNode, computed, defineComponent, getCurrentInstance, h, isRef, provide, reactive, useAttrs } from 'vue'
+import { cloneVNode, computed, defineComponent, h, isRef, reactive, useAttrs } from 'vue'
+import { implicitStateContext, storyContext } from './context.js'
 import { useRenderContext } from './render-context.js'
+import { isWritableBinding, useInstance } from './util.js'
 import Variant from './Variant.js'
 
 export default defineComponent({
@@ -25,7 +28,7 @@ export default defineComponent({
   },
 
   setup(props) {
-    const vm = getCurrentInstance()
+    const vm = useInstance('Story')
 
     const attrs = useAttrs() as {
       story: Story
@@ -33,7 +36,7 @@ export default defineComponent({
 
     const renderContext = useRenderContext()
     const story = computed(() => attrs.story)
-    provide('story', story)
+    storyContext.provide(story)
 
     const storyComponent: any = vm.parent
     const implicitState = reactive<Record<string, any>>({})
@@ -54,6 +57,10 @@ export default defineComponent({
         return
       }
 
+      if (!isWritableBinding(value)) {
+        return
+      }
+
       Object.defineProperty(implicitState, key, {
         enumerable: true,
         configurable: true,
@@ -88,7 +95,7 @@ export default defineComponent({
     for (const key in storyComponent.data) {
       addImplicitState(storyComponent.data, key)
     }
-    provide('implicitState', () => implicitState)
+    implicitStateContext.provide(() => implicitState)
 
     function updateStory() {
       if (props.meta) {
@@ -100,7 +107,7 @@ export default defineComponent({
       }
 
       Object.assign(attrs.story, {
-        slots: () => vm.proxy.$slots,
+        slots: () => vm.slots,
       })
     }
 
@@ -112,6 +119,32 @@ export default defineComponent({
       updateStory,
     }
 
+    /**
+     * What a `<Variant>` takes from its story: the attrs the story was given, then
+     * what the story carries, neither overriding what the variant set itself.
+     *
+     * Both render passes need it. `autoPropsDisabled` set on a story reached only
+     * the mount pass, so a story turning auto-props off still offered controls in
+     * the realm that renders it (#890).
+     */
+    function inheritedFromStory(vnode: VNode) {
+      const inherited: Record<string, any> = {}
+
+      for (const attr in vm.attrs) {
+        if (typeof vnode.props?.[attr] === 'undefined') {
+          inherited[attr] = vm.attrs[attr]
+        }
+      }
+
+      for (const attr in attrs.story) {
+        if (!omitInheritStoryProps.includes(attr) && typeof vnode.props?.[attr] === 'undefined') {
+          inherited[attr] = Reflect.get(attrs.story, attr)
+        }
+      }
+
+      return inherited
+    }
+
     function renderMountStory() {
       let index = 0
 
@@ -126,8 +159,9 @@ export default defineComponent({
       // that as it registers, so the gate held for the first render only and
       // turned the re-render a retarget needs into a full mount of every
       // sibling.
-      const targetIndex = renderContext?.targetVariantId
-        ? attrs.story.variants.findIndex(v => v.id === renderContext.targetVariantId)
+      const targetVariantId = renderContext?.targetVariantId
+      const targetIndex = targetVariantId
+        ? attrs.story.variants.findIndex(v => v.id === targetVariantId)
         : -1
 
       const applyAttrs = (vnodes: VNode[]) => {
@@ -159,21 +193,11 @@ export default defineComponent({
               nextProps.key = variant.id
             }
 
-            if (!vnode.props?.initState && !vnode.props?.['init-state']) {
+            if (!vnode.props?.['initState'] && !vnode.props?.['init-state']) {
               nextProps.initState = props.initState
             }
 
-            for (const attr in vm.proxy.$attrs) {
-              if (typeof vnode.props?.[attr] === 'undefined') {
-                nextProps[attr] = vm.proxy.$attrs[attr]
-              }
-            }
-
-            for (const attr in attrs.story) {
-              if (!omitInheritStoryProps.includes(attr) && typeof vnode.props?.[attr] === 'undefined') {
-                nextProps[attr] = attrs.story[attr]
-              }
-            }
+            Object.assign(nextProps, inheritedFromStory(vnode))
 
             result.push(cloneVNode(vnode, nextProps))
             continue
@@ -189,38 +213,59 @@ export default defineComponent({
         return result
       }
 
-      return applyAttrs(vm.proxy.$slots.default?.() ?? [])
+      return applyAttrs(vm.slots['default']?.() ?? [])
     }
 
-    function renderPreviewStory() {
-      renderContext.nextVariantIndex.value = 0
+    function countVariantVnodes(vnodes: VNode[]): number {
+      let count = 0
+      for (const vnode of vnodes) {
+        // @ts-expect-error custom option
+        if (vnode?.type?.__povesteType === 'variant') {
+          count++
+        }
+        else if (Array.isArray(vnode?.children)) {
+          count += countVariantVnodes(vnode.children as VNode[])
+        }
+      }
+      return count
+    }
+
+    function renderPreviewStory(context: PreviewRenderContext) {
+      context.nextVariantIndex.value = 0
 
       const slotProps = {
-        state: renderContext.externalState,
+        state: context.externalState,
       }
 
-      const children = []
+      const children: VNode[] = []
 
-      if (renderContext.slotName === 'controls') {
-        children.push(...(vm.proxy.$slots.controls?.(slotProps) ?? []))
+      if (context.slotName === 'controls') {
+        children.push(...(vm.slots['controls']?.(slotProps) ?? []))
       }
 
-      if (renderContext.slotName === 'default' || attrs.story.meta?.hasVariantChildComponents) {
-        children.push(...(vm.proxy.$slots.default?.(slotProps) ?? []))
+      if (context.slotName === 'default' || attrs.story.meta?.hasVariantChildComponents) {
+        children.push(...(vm.slots['default']?.(slotProps) ?? []))
       }
 
       // Same story as the mount pass above: every Variant component here runs
       // its full setup and then all but the current one render null (#197).
       // Keep only the current one, and seed the positional index so it still
       // resolves to the right variant data. Filtering only the default slot —
-      // the controls slot carries controls, and stories with variants in child
-      // components are invisible to a vnode walk.
+      // the controls slot carries controls.
+      //
+      // Gated on the walk seeing every variant, not on `hasVariantChildComponents`,
+      // for the reason the mount pass gives: every explicit <Variant> sets that flag
+      // as it renders, so from the second render on the filter never ran, and each
+      // retarget rendered all N Variant components to show one (#873). A story
+      // whose variants live in child components still renders them all, because
+      // its walk finds fewer than `variants.length`.
+      const currentVariant = context.currentVariant
       if (
-        renderContext.slotName === 'default'
-        && renderContext.currentVariant
-        && !attrs.story.meta?.hasVariantChildComponents
+        context.slotName === 'default'
+        && currentVariant
+        && countVariantVnodes(children) === attrs.story.variants.length
       ) {
-        const targetIndex = attrs.story.variants.findIndex(v => v.id === renderContext.currentVariant.id)
+        const targetIndex = attrs.story.variants.findIndex(v => v.id === currentVariant.id)
         if (targetIndex !== -1) {
           let seen = 0
           let kept = false
@@ -230,7 +275,7 @@ export default defineComponent({
               // @ts-expect-error custom option
               if (vnode?.type?.__povesteType === 'variant') {
                 if (seen === targetIndex) {
-                  result.push(vnode)
+                  result.push(cloneVNode(vnode, inheritedFromStory(vnode)))
                   kept = true
                 }
                 seen++
@@ -245,7 +290,7 @@ export default defineComponent({
           }
           const filtered = keepTargetVariant(children)
           if (kept) {
-            renderContext.nextVariantIndex.value = targetIndex
+            context.nextVariantIndex.value = targetIndex
             return filtered
           }
         }
@@ -263,14 +308,15 @@ export default defineComponent({
     if (firstVariant?.id === '_default') {
       return h(Variant, {
         variant: firstVariant,
-        initState: this.initState,
+        ...this.initState ? { initState: this.initState } : {},
         implicit: true,
         ...this.$attrs,
       }, this.$slots)
     }
 
-    if (this.renderContext?.mode === 'render') {
-      return this.renderPreviewStory()
+    const renderContext = this.renderContext
+    if (renderContext?.mode === 'render') {
+      return this.renderPreviewStory(renderContext)
     }
 
     return this.renderMountStory()

package/src/client/app/Variant.ts

@@ -1,10 +1,12 @@
 import type { Variant } from '@poveste/shared'
-import type { ComputedRef, PropType } from 'vue'
+import type { 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, onBeforeUnmount, useAttrs } from 'vue'
 import { syncVariantAutoProps } from './auto-props.js'
+import { implicitStateContext, storyContext } from './context.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 +56,14 @@ export default defineComponent({
     const attrs = useAttrs() as {
       variant?: Variant
     }
-    const vm = getCurrentInstance()
-    const story = inject<ComputedRef<any>>('story')
-    const implicitState = inject<() => any>('implicitState')
+    const vm = useInstance('Variant')
+    const story = storyContext.injectOptional()
+    const implicitState = implicitStateContext.injectOptional()
     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
@@ -83,13 +85,17 @@ export default defineComponent({
       applyState(mountVariant.value.state, toRawDeep(state))
     }
 
-    if (renderContext?.mode !== 'render' && mountVariant.value && implicitState) {
+    // `syncState` is false in a sandbox realm, where the render tree beside this
+    // one already syncs the same `variant.state` against the same story's
+    // bindings. Both were live, so an edit walked the graph twice over for one
+    // copy of it (#964).
+    if (renderContext?.mode !== 'render' && renderContext?.syncState !== false && mountVariant.value && implicitState) {
       mountStateSync = syncStateBundledAndExternal(mountVariant.value.state, implicitState(), autoPropsStateKeys)
     }
 
     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 +104,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 +126,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 +200,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)
   },
 })