@poveste/app 0.18.3 → 0.19.0

package/src/__tests__/grid-slots.spec.ts

@@ -1,84 +0,0 @@
-import type { Variant } from '../app/types'
-import type { Slot } from '../app/util/grid-slots.js'
-import { describe, expect, it } from 'vitest'
-import { assignSlots, trimSlots } from '../app/util/grid-slots.js'
-
-function variants(ids: string[]): Variant[] {
-  return ids.map(id => ({ id }) as Variant)
-}
-
-function shown(slots: Slot[]) {
-  return slots.map(s => (s.visible ? `${s.storyId}:${s.variant.id}@${s.order}` : `(${s.storyId}:${s.variant.id})`))
-}
-
-describe('assignSlots', () => {
-  it('opens a slot per visible variant in screen order', () => {
-    const slots = assignSlots([], 'a', variants(['v1', 'v2', 'v3']))
-
-    expect(shown(slots)).toEqual(['a:v1@0', 'a:v2@1', 'a:v3@2'])
-  })
-
-  it('keeps a still-visible variant in its slot when the window moves', () => {
-    const first = assignSlots([], 'a', variants(['v1', 'v2', 'v3']))
-
-    const next = assignSlots(first, 'a', variants(['v2', 'v3', 'v4']))
-
-    expect(shown(next)).toEqual(['a:v4@2', 'a:v2@0', 'a:v3@1'])
-  })
-
-  it('hides a slot whose variant left rather than dropping it', () => {
-    const first = assignSlots([], 'a', variants(['v1', 'v2', 'v3']))
-
-    const next = assignSlots(first, 'a', variants(['v2', 'v3']))
-
-    expect(shown(next)).toEqual(['(a:v1)', 'a:v2@0', 'a:v3@1'])
-  })
-
-  it('hands a hidden slot to a variant coming in before opening a new one', () => {
-    const first = assignSlots([], 'a', variants(['v1', 'v2', 'v3']))
-    const hidden = assignSlots(first, 'a', variants(['v2', 'v3']))
-
-    const next = assignSlots(hidden, 'a', variants(['v2', 'v3', 'v4']))
-
-    expect(shown(next)).toEqual(['a:v4@2', 'a:v2@0', 'a:v3@1'])
-  })
-
-  it('does not match a variant of another story by id', () => {
-    const first = assignSlots([], 'a', variants(['v1', 'v2']))
-
-    const next = assignSlots(first, 'b', variants(['v1', 'v2']))
-
-    expect(next.map(s => s.storyId)).toEqual(['b', 'b'])
-    expect(next.every(s => s.visible)).toBe(true)
-    expect(next[0].variant).not.toBe(first[0].variant)
-  })
-})
-
-describe('trimSlots', () => {
-  it('leaves a pool with nothing hidden alone', () => {
-    const slots = assignSlots([], 'a', variants(['v1', 'v2']))
-
-    expect(trimSlots(slots)).toBe(slots)
-  })
-
-  it('drops trailing hidden slots and keeps interior ones as spares', () => {
-    const first = assignSlots([], 'a', variants(['v1', 'v2', 'v3', 'v4']))
-    const moved = assignSlots(first, 'a', variants(['v1', 'v3', 'v5']))
-    expect(shown(moved)).toEqual(['a:v1@0', 'a:v5@2', 'a:v3@1', '(a:v4)'])
-
-    const next = trimSlots(moved)
-
-    expect(shown(next)).toEqual(['a:v1@0', 'a:v5@2', 'a:v3@1'])
-  })
-
-  it('compacts the pool when hidden slots outnumber visible ones', () => {
-    const big = assignSlots([], 'a', variants(['v1', 'v2', 'v3', 'v4', 'v5', 'v6']))
-    const small = assignSlots(big, 'a', variants(['v2', 'v6']))
-    expect(shown(small)).toEqual(['(a:v1)', 'a:v2@0', '(a:v3)', '(a:v4)', '(a:v5)', 'a:v6@1'])
-
-    const next = trimSlots(small)
-
-    // v2 stays where it is; v6 moves down into the first free slot.
-    expect(shown(next)).toEqual(['a:v6@1', 'a:v2@0'])
-  })
-})

package/src/__tests__/icons.spec.ts

@@ -1,26 +0,0 @@
-import { execFileSync } from 'node:child_process'
-import { readFileSync } from 'node:fs'
-import { resolve } from 'node:path'
-import { describe, expect, it } from 'vitest'
-
-const packageRoot = resolve(__dirname, '../..')
-const script = resolve(packageRoot, 'scripts/icons.mjs')
-const generated = resolve(packageRoot, 'src/app/util/icons.generated.ts')
-
-describe('bundled chrome icons', () => {
-  // Run as a child process rather than imported: the generator is plain ESM
-  // with `import.meta.url`, which vitest's transform does not leave intact.
-  it('icons.generated.ts matches the icons the sources use', () => {
-    // A stale file means an Icon the chrome renders is missing from the bundle
-    // and falls back to a CDN fetch at runtime — exactly what bundling is for.
-    expect(() => execFileSync('node', [script, '--check'], { stdio: 'pipe' })).not.toThrow()
-  })
-
-  it('carries the icons the chrome is known to use', () => {
-    const source = readFileSync(generated, 'utf8')
-    expect(source).toContain('"prefix":"carbon"')
-    expect(source).toContain('"cube":')
-    expect(source).toContain('"search":')
-    expect(source).toContain('"subtract-line":')
-  })
-})

package/src/__tests__/postcss-scope-wrapper.spec.ts

@@ -1,65 +0,0 @@
-import postcss from 'postcss'
-import { describe, expect, it } from 'vitest'
-// @ts-expect-error — plain CJS postcss plugin, no types.
-import scopeWrapper from '../../postcss-scope-wrapper.cjs'
-
-const OPTS = { from: ':root', to: '.__poveste-render-story:not(.__poveste-render-custom-controls)' }
-
-function run(css: string) {
-  return postcss([scopeWrapper(OPTS)]).process(css, { from: undefined }).css
-}
-
-describe('postcss-scope-wrapper', () => {
-  it('wraps the stylesheet in the configured scope', () => {
-    expect(run('.a { color: red }')).toContain('@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls))')
-  })
-
-  it('leaves @import at the top level', () => {
-    // @import is only valid before other rules; moving it inside @scope drops it.
-    const out = run('@import "x.css";\n.a { color: red }')
-
-    expect(out.indexOf('@import')).toBeLessThan(out.indexOf('@scope'))
-  })
-
-  /*
-   * The three selectors below all mean "the app's root container" once this
-   * stylesheet is wrapped. `body` is included for the same reason as `html`:
-   * poveste re-wraps the output a second time rooted at `.poveste-app-root`, so
-   * both sit above the effective scoping root and can never be matched. Leaving
-   * `body` out is #102 — the whole UI rendered one size too large.
-   */
-  it.each(['html', ':root', 'body'])('rewrites a root-ish `%s` selector to :scope', (selector) => {
-    expect(run(`${selector} { font-size: .875rem }`)).toContain(':scope {')
-  })
-
-  it('rewrites root-ish selectors inside a selector list, leaving the rest alone', () => {
-    const out = run('html, body, #app { height: 100% }')
-
-    expect(out).toContain(':scope,')
-    expect(out).toContain('#app')
-    expect(out).not.toMatch(/(?<![\w.\-#])body\s*[,{]/)
-  })
-
-  it('rewrites nested rules, not just top-level ones', () => {
-    // Tailwind v4 emits `@layer base { … }` as a real cascade layer, so the
-    // rules that style the scoping root sit one level down.
-    const out = run('@layer base { body { font-size: .875rem } }')
-
-    expect(out).toContain(':scope {')
-    expect(out).not.toMatch(/(?<![\w.\-#])body\s*\{/)
-  })
-
-  it('rewrites root-ish selectors inside media queries', () => {
-    // The 640px override is where #102 actually bit.
-    const out = run('@media (min-width: 640px) { body { font-size: .875rem } }')
-
-    expect(out).toContain(':scope {')
-  })
-
-  it('leaves ordinary selectors untouched', () => {
-    const out = run('.poveste-story-list { color: red }')
-
-    expect(out).toContain('.poveste-story-list')
-    expect(out).not.toContain(':scope {')
-  })
-})

package/src/__tests__/render-tracker.spec.ts

@@ -1,38 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { createRenderTracker } from '../app/util/render-tracker.js'
-
-describe('createRenderTracker', () => {
-  it('calls a render clean when nothing was reported during it', () => {
-    const render = createRenderTracker()
-
-    render.begin()
-
-    expect(render.wasClean()).toBe(true)
-  })
-
-  it('does not call a render clean when a throw was reported during it', () => {
-    const render = createRenderTracker()
-    render.begin()
-
-    render.threw()
-
-    expect(render.wasClean()).toBe(false)
-  })
-
-  // The half #597 is about. Without it a story that threw once stays marked for
-  // the life of the tab: every later render inherits the first one's verdict,
-  // so the marker the old comment promised to lift on a fix never lifts.
-  it('forgets the previous render when a new one begins', () => {
-    const render = createRenderTracker()
-    render.begin()
-    render.threw()
-
-    render.begin()
-
-    expect(render.wasClean()).toBe(true)
-  })
-
-  it('treats a render that has reported nothing yet as clean', () => {
-    expect(createRenderTracker().wasClean()).toBe(true)
-  })
-})

package/src/__tests__/reset.spec.ts

@@ -1,53 +0,0 @@
-import { readFileSync } from 'node:fs'
-import { resolve } from 'node:path'
-import { describe, expect, it } from 'vitest'
-
-/*
- * Preflight is deliberately off and `main.pcss` replaces it by hand, so anything
- * the replacement leaves out is a UA default the chrome then renders. The one
- * that shipped was the button background: `ButtonFace` reads as a light grey
- * panel, close enough to the light chrome to pass review and a white hole in dark.
- *
- * Asserted against the source rather than the built sheet because the build is
- * postcss over this file, and a reader looking for the reset looks here.
- */
-// `__dirname` rather than `import.meta.url`, which vitest's transform does not
-// leave intact here — the same trap `icons.spec.ts` records.
-//
-// Line endings normalised, and the anchor below is a single line: matching a
-// selector list *across* its own line break reads the file as the checkout wrote
-// it, which on Windows is CRLF. This found nothing there and passed everywhere
-// else, which is the worst way for a check to be wrong.
-const source = readFileSync(resolve(__dirname, '../app/style/main.pcss'), 'utf8').replace(/\r\n/g, '\n')
-
-/** The declarations of the first rule whose selector list contains `anchor`. */
-function rule(anchor: string) {
-  const start = source.indexOf(anchor)
-  if (start === -1) {
-    return null
-  }
-  const open = source.indexOf('{', start)
-  return source.slice(open + 1, source.indexOf('}', open))
-}
-
-/** The last line of the button reset's selector list. */
-const BUTTON_RESET = '[type=\'submit\']'
-
-describe('the manual Preflight replacement', () => {
-  it('clears the UA background off a button', () => {
-    expect(rule(BUTTON_RESET)).toContain('background-color: transparent')
-  })
-
-  it('clears the UA background image too', () => {
-    // Preflight resets both; a gradient theme would otherwise come back.
-    expect(rule(BUTTON_RESET)).toContain('background-image: none')
-  })
-
-  it('stays inside `@layer base`, where a utility can still win', () => {
-    // An unlayered rule beats every layered one, so `bg-*` on a button would stop
-    // working — the trap the file's own comment records.
-    const layers = [...source.matchAll(/@layer base \{/g)].map(match => match.index)
-    const button = source.indexOf('background-color: transparent')
-    expect(layers.some(start => start < button)).toBe(true)
-  })
-})

package/src/__tests__/source-code.spec.ts

@@ -1,55 +0,0 @@
-import type { Story, Variant } from '../app/types'
-import { describe, expect, it, vi } from 'vitest'
-import { getSourceCode } from '../app/util/docs'
-
-const plugin = vi.hoisted(() => ({ generateSourceCode: (() => undefined) as (variant: unknown) => unknown, loads: 0 }))
-
-vi.mock('virtual:$poveste-support-plugins-client', () => ({
-  clientSupportPlugins: {
-    framework: async () => {
-      plugin.loads++
-      return { generateSourceCode: (variant: unknown) => plugin.generateSourceCode(variant) }
-    },
-  },
-}))
-
-const FILE = '<Story title="Grid" />'
-
-function storyWithFile() {
-  return { file: { supportPluginId: 'framework', source: async () => ({ default: FILE }) } } as unknown as Story
-}
-
-describe('getSourceCode with a framework plugin', () => {
-  it('returns the story file when the plugin returns nothing synchronously, as plugin-svelte does', async () => {
-    plugin.generateSourceCode = () => undefined
-
-    const source = await getSourceCode(storyWithFile(), {} as Variant)
-
-    expect(source).toBe(FILE)
-  })
-
-  it('returns the story file when the plugin resolves to an empty string', async () => {
-    plugin.generateSourceCode = async () => ''
-
-    const source = await getSourceCode(storyWithFile(), {} as Variant)
-
-    expect(source).toBe(FILE)
-  })
-
-  it('prefers what the plugin generates', async () => {
-    plugin.generateSourceCode = async () => '<Button />'
-
-    const source = await getSourceCode(storyWithFile(), {} as Variant)
-
-    expect(source).toBe('<Button />')
-  })
-
-  it('returns a variant\'s declared source without loading the plugin', async () => {
-    plugin.loads = 0
-
-    const source = await getSourceCode(storyWithFile(), { source: '<Declared />' } as Variant)
-
-    expect(source).toBe('<Declared />')
-    expect(plugin.loads).toBe(0)
-  })
-})

package/src/__tests__/state-bridge.spec.ts

@@ -1,155 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { createStateBridge } from '../app/util/state-bridge.js'
-
-// A stand-in for `postMessage`: messages queue rather than being delivered, so a
-// test can put two of them in flight at once — which is the whole point. Real
-// `postMessage` gives the same shape, one task apart, which is exactly how long
-// it takes for both sides to have written before either has heard.
-function link() {
-  const queues = { host: [] as any[], sandbox: [] as any[] }
-  const state = { host: {} as any, sandbox: {} as any }
-
-  const bridges = {
-    host: createStateBridge(changes => queues.sandbox.push(changes)),
-    sandbox: createStateBridge(changes => queues.host.push(changes)),
-  }
-
-  return {
-    state,
-    /** The side's state changed; it composes and sends. */
-    send(side: 'host' | 'sandbox') {
-      bridges[side].send(structuredClone(state[side]))
-    },
-    /** Deliver everything currently in flight to the given side. */
-    deliver(side: 'host' | 'sandbox') {
-      const inbox = queues[side].splice(0)
-      for (const changes of inbox) {
-        bridges[side].receive(state[side], changes)
-      }
-    },
-    settle() {
-      for (let i = 0; i < 6; i++) {
-        this.deliver('host')
-        this.send('host')
-        this.deliver('sandbox')
-        this.send('sandbox')
-      }
-    },
-  }
-}
-
-describe('createStateBridge', () => {
-  it('carries an edit in each direction', () => {
-    const bridge = link()
-    bridge.state.host = { a: 0, b: 0 }
-    bridge.state.sandbox = { a: 0, b: 0 }
-    bridge.settle()
-
-    bridge.state.host.a = 1
-    bridge.send('host')
-    bridge.deliver('sandbox')
-    expect(bridge.state.sandbox.a).toBe(1)
-
-    bridge.state.sandbox.b = 2
-    bridge.send('sandbox')
-    bridge.deliver('host')
-    expect(bridge.state.host.b).toBe(2)
-  })
-
-  it('does not echo what it was just sent', () => {
-    const bridge = link()
-    bridge.state.host = { a: 0 }
-    bridge.state.sandbox = { a: 0 }
-    bridge.settle()
-
-    bridge.state.host.a = 1
-    bridge.send('host')
-    bridge.deliver('sandbox')
-
-    // The sandbox's own watcher fires on the write it just applied. It has
-    // nothing of its own to report, so nothing goes back.
-    bridge.send('sandbox')
-    expect(bridge.state.host.a).toBe(1)
-    bridge.deliver('host')
-    expect(bridge.state.host.a).toBe(1)
-  })
-
-  it('keeps both edits when the two sides write before either has heard', () => {
-    // The race, exactly: both write, both compose, then both deliver. Sending
-    // the whole state here meant each message carried its sender's stale copy of
-    // the other's key, and each end applied that over its own fresh value — so
-    // the two sides ended up disagreeing with nothing left to settle it.
-    const bridge = link()
-    bridge.state.host = { label: 'start', bumps: 0 }
-    bridge.state.sandbox = { label: 'start', bumps: 0 }
-    bridge.settle()
-
-    bridge.state.host.label = 'raced'
-    bridge.state.sandbox.bumps = 1
-    bridge.send('host')
-    bridge.send('sandbox')
-
-    bridge.deliver('host')
-    bridge.deliver('sandbox')
-    bridge.settle()
-
-    expect(bridge.state.host).toEqual({ label: 'raced', bumps: 1 })
-    expect(bridge.state.sandbox).toEqual({ label: 'raced', bumps: 1 })
-  })
-
-  it('does not revert the sender when the receiver refuses the write', () => {
-    // `applyState` swallows a write a setter refuses — a read-only `computed` in
-    // state is the case that occurs — and reports it as written anyway. Agreeing
-    // to it regardless is worse than losing it: the receiver still holds the old
-    // value, its next firing diffs that against a baseline claiming the new one,
-    // and it comes back as a fresh edit that reverts the sender. The reader's
-    // control edit undoes itself with nothing to show for it.
-    const queues: any = { host: [], sandbox: [] }
-    const host: any = { a: 0 }
-    const sandbox: any = {}
-    Object.defineProperty(sandbox, 'a', { get: () => 0, enumerable: true, configurable: true })
-
-    const hostBridge = createStateBridge(changes => queues.sandbox.push(changes))
-    const sandboxBridge = createStateBridge(changes => queues.host.push(changes))
-
-    hostBridge.send({ ...host })
-    for (const changes of queues.sandbox.splice(0)) sandboxBridge.receive(sandbox, changes)
-
-    host.a = 1
-    hostBridge.send({ a: 1 })
-    for (const changes of queues.sandbox.splice(0)) sandboxBridge.receive(sandbox, changes)
-
-    // The sandbox refused it, so its own next firing still reads 0.
-    sandboxBridge.send({ a: sandbox.a })
-    for (const changes of queues.host.splice(0)) hostBridge.receive(host, changes)
-
-    expect(host.a).toBe(1)
-  })
-
-  it('leaves a simultaneous write to the same key unresolved, as it always did', () => {
-    // Not something a diff can fix, and not something this changed. Both ends
-    // accept what the other sent, so the two values swap. Landing them on one
-    // value needs each end to know which of its own writes the other has seen
-    // yet — acknowledgements, a real protocol — and picking a winner without
-    // that would mean dropping legitimate later edits from the losing side.
-    //
-    // Recorded here so the limit is a decision rather than a surprise. Writing
-    // the same key from the story and the panel in one task is a genuine
-    // conflict; writing *different* keys, which is the case above, is not.
-    const bridge = link()
-    bridge.state.host = { a: 0 }
-    bridge.state.sandbox = { a: 0 }
-    bridge.settle()
-
-    bridge.state.host.a = 1
-    bridge.state.sandbox.a = 2
-    bridge.send('host')
-    bridge.send('sandbox')
-    bridge.deliver('host')
-    bridge.deliver('sandbox')
-    bridge.settle()
-
-    expect(bridge.state.host.a).toBe(2)
-    expect(bridge.state.sandbox.a).toBe(1)
-  })
-})

package/src/__tests__/state-clone.spec.ts

@@ -1,120 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-import { markRaw, ref } from 'vue'
-import { toPresetState, toRawDeep } from '../app/util/state'
-
-/**
- * What the state-presets panel does to a variant's state before storing it.
- * `ComplexParameter.story.vue` builds both shapes this has to survive: a prop
- * holding a callback, and a pair of objects that reference each other.
- */
-const asPreset = (state: Record<string, any>) => toPresetState(state)
-
-function stateWithACallbackAndACycle() {
-  const parent: Record<string, any> = { name: 'hello' }
-  const child: Record<string, any> = {}
-  parent.child = child
-  child.parent = parent
-
-  return {
-    complexParameter: [{ action: () => {} }],
-    recursiveParameter: parent,
-    count: 1,
-  }
-}
-
-describe('a variant\'s state as a preset', () => {
-  it('is detached from the state it was taken from', () => {
-    const state = stateWithACallbackAndACycle()
-
-    const preset = asPreset(state)
-    state.recursiveParameter.name = 'edited'
-
-    expect(preset.recursiveParameter.name).toBe('hello')
-  })
-
-  it('keeps a self-referential prop as a cycle, which is what it is', () => {
-    const preset = asPreset(stateWithACallbackAndACycle())
-
-    expect(preset.recursiveParameter.child.parent).toBe(preset.recursiveParameter)
-  })
-
-  it('drops the callback, which no stored preset could carry anyway', () => {
-    const preset = asPreset(stateWithACallbackAndACycle())
-
-    expect(preset.complexParameter).toEqual([{}])
-  })
-
-  // The whole of the defect: the copy came out correct either way, but a story
-  // with a callback in its props logged a warning and an error on every mount.
-  it('does so without falling back, so nothing is logged at the reader', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
-    const error = vi.spyOn(console, 'error').mockImplementation(() => {})
-
-    asPreset(stateWithACallbackAndACycle())
-
-    expect(warn).not.toHaveBeenCalled()
-    expect(error).not.toHaveBeenCalled()
-    warn.mockRestore()
-    error.mockRestore()
-  })
-
-  it('still copies the ordinary values beside them', () => {
-    const preset = asPreset(stateWithACallbackAndACycle())
-
-    expect(preset.count).toBe(1)
-    expect(preset.recursiveParameter.name).toBe('hello')
-  })
-})
-
-describe('a binding Vue has marked raw', () => {
-  it('is dropped from what leaves the realm, rather than passed through', () => {
-    const graph = markRaw({ nodes: { deep: { deeper: 1 } } })
-
-    // `clean` means this copy is posted or persisted. `__v_skip` is
-    // non-enumerable and does not survive `structuredClone`, so passing the
-    // value would hand the far side an unmarked graph to deep-watch — which is
-    // the hanging story #957 describes. The key does not go.
-    expect(toRawDeep({ text: 'a', graph }, true)).toEqual({ text: 'a' })
-  })
-
-  it('is carried by reference when the copy stays in this realm', () => {
-    const graph = markRaw({ nodes: { deep: 1 } })
-    const copied = toRawDeep({ text: 'a', graph })
-
-    // Same identity, not a rebuilt one: that is what lets the compare settle it
-    // by `Object.is` instead of walking whatever is behind it.
-    expect(copied.graph).toBe(graph)
-    expect(copied.text).toBe('a')
-  })
-
-  it('is unwrapped from a ref first, which is the shape a template ref has', () => {
-    const graph = ref(markRaw({ nodes: { deep: 1 } }))
-
-    expect(toRawDeep({ graph }, true)).toEqual({})
-    expect(toRawDeep({ graph }).graph).toBe(graph.value)
-  })
-
-  it('leaves an array the way a function does', () => {
-    // Filtered, indices and all. Stated because it is a real consequence and
-    // not an obviously right one — it is the rule functions already follow.
-    expect(toRawDeep({ list: [1, markRaw({ a: 1 }), 2] }, true)).toEqual({ list: [1, 2] })
-  })
-
-  it('does not take the whole state with it when the state itself is marked', () => {
-    expect(toRawDeep(markRaw({ text: 'a' }), true)).toEqual({})
-  })
-
-  it('takes only itself when it sits inside an ordinary object', () => {
-    const state = { config: { zoom: 3, map: markRaw({ tiles: { deep: 1 } }) } }
-
-    // The far side keeps whatever it had under `config.map`, because a key that
-    // is not sent is a key `applyState` cannot overwrite — it merges one level.
-    expect(toRawDeep(state, true)).toEqual({ config: { zoom: 3 } })
-  })
-
-  it('never reaches a preset', () => {
-    const graph = markRaw({ nodes: { deep: 1 } })
-
-    expect(toPresetState({ count: 1, graph })).toEqual({ count: 1 })
-  })
-})