Skip to content

Bring Hst.Story and Hst.Variant to full parity with Vue's Story and Variant #467

Description

@50rayn

Goal: everything <Story> and <Variant> do for Vue, <Hst.Story> and <Hst.Variant> do for Svelte. This is the tracking issue; the pieces are separate.

Where it stands

The documented surface reached parity in #464Hst.Story now carries every section the Vue page does, in the same order. Comparing the two reference pages heading-for-heading:

story:   vue-only []                svelte-only []
variant: vue-only ['Slot: source']  svelte-only []

So one documented prop is genuinely missing, and three that are documented do not fully work. Documented is not the same as working, which is what #233 and #459 were about.

1. Slot: source on Hst.Variant — not implemented

docs/reference/vue/variant.md documents a source slot for hand-written copyable source. Nothing in the Svelte client handles one: RenderVariant.svelte renders default and controls only, and slotName === 'source' never appears in the package.

Absent from the Svelte page for the right reason today, but it is a real gap in the API, not a Svelte impossibility — the slot is inert markup that the source panel reads.

2. addWrapper — not implemented

docs/guide/vue/wrapper.md has no Svelte counterpart, and the setup API explains why: Vue3StorySetupApi carries addWrapper (plugin-vue/src/helpers.ts:8, implemented at client/app/host.ts:107), while SvelteStorySetupApi is { app, story, variant } and nothing more.

Wrappers render around every story, which is how people add a theme provider, a router outlet, or layout chrome. A Svelte book cannot do it at all.

(Wrap.svelte in the Svelte client is unrelated — it bridges a Vue control component into Svelte markup.)

3. setupApp and responsiveDisabled do not inherit — #466

Both are dropped when a story declares explicit <Hst.Variant> children. Vue gives every variant the story's value. Four copies of a warning currently paper over a four-line fix.

4. autoPropsDisabled is inert — #233

Auto-props has never run for Svelte. The prop is accepted for API parity and documented as doing nothing. #461 is the groundwork: reading a component's declared props from its source.

Worth restating what parity can mean here, because it cannot mean the Vue mechanism. Vue reads the vnodes a variant is about to render and writes control values back into that tree. Svelte renders straight to the DOM, so Poveste can only own props for a component it mounts itself. Same panel, same PropDefinition, different route in — and the same constraint will apply to Angular, while React could go either way.

Suggested order

  1. Story-level setupApp and responsiveDisabled are dropped when a Svelte story has explicit variants #466 — smallest, and it deletes documentation rather than adding it.
  2. Slot: source — self-contained, mirrors an existing slot path.
  3. addWrapper — a new setup-API capability; worth its own design note on how wrappers compose with the sandbox realms.
  4. plugin-svelte never produces auto-props, so the controls panel is always empty for a Svelte story #233 — the largest, and the one with an open API decision.

Not in scope

Vue-specific surface with no Svelte meaning stays Vue-only. Nothing in the current gap list is of that kind, which is the point: all four are things a Svelte author would reasonably expect to work.

Related: #233, #466, #461, #464.

Metadata

Metadata

Assignees

No one assigned

    Labels

    a:pluginsPlugin API and official pluginsa:svelteSvelte plugin, SvelteKit, Hst surface

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions