Skip to content

fix(plugin): correct argtype inference so URL param args apply to all controls - #56

Merged
davidpett merged 2 commits into
stenciljs:mainfrom
Burzmalian:fix/url-params-argtype-inference
Aug 5, 2026
Merged

fix(plugin): correct argtype inference so URL param args apply to all controls#56
davidpett merged 2 commits into
stenciljs:mainfrom
Burzmalian:fix/url-params-argtype-inference

Conversation

@Burzmalian

@Burzmalian Burzmalian commented Aug 3, 2026

Copy link
Copy Markdown

Summary

Fixes three bugs in packages/plugin/src/docs/infer-type.ts and custom-elements.ts that caused Storybook URL ?args= parameters to be silently dropped for Stencil components.

Root causes

1. inferSBType: in operator used on an array (infer-type.ts)

prop.type.toLowerCase() in scalarTypes checks object keys, not array elements — always false. Every scalar prop (string, number, boolean) got type { name: 'other' } instead of the correct scalar type, preventing Storybook from coercing URL arg values.

2. mapPropOptions: plain-type props mapped to [undefined] (infer-type.ts)

Stencil emits values: [{ type: "string" }] (no value key) for non-union props. The old filter kept these entries and .map(({ value }) => value) produced [undefined]. Since [undefined].length > 0, the original patch's length > 0 guard didn't help — Storybook saw options: [undefined] and rejected any URL arg value.

3. inferSBType: union/enum types returned { name: 'other' } (infer-type.ts)

Storybook's internal mapArgsToTypes passes each arg through a map() function that returns INCOMPATIBLE for type.name === 'other' (unless type.value === 'ReactNode'). This caused all radio/select union-typed props to be dropped when set via URL args. Fixed by returning { name: 'enum', value: [...] } when enumerated values are present — matching the type Storybook expects for these controls.

4. tests/hmr.e2e.ts — fix flaky iframe switching

Replaced the inline switchFrame predicate (which raced against Storybook's load cycle) with a dedicated switchToPreviewIframe() helper that waits for #storybook-preview-iframe to exist and for data-is-loaded=true before switching frame context. Eliminates intermittent frame-not-found failures in CI.

Changes

  • infer-type.tsArray.includes() replaces in for scalar type check
  • infer-type.tsmapPropOptions filters out entries with no value key
  • infer-type.tsinferSBType returns SBEnumType for union types with enumerated values
  • custom-elements.tsoptions: undefined instead of options: [] for props with no enumerated values
  • .gitignore — add .pnpm-store/
  • tests/hmr.e2e.ts — replace racy switchFrame predicate with switchToPreviewIframe() helper

Testing

Verified manually against the example package with all Stencil prop types (string, number, boolean, union/radio, union/select). URL args now apply correctly for all scalar and enum-typed props.

/iframe.html?id=mycomponent--primary&args=first:Gyles;radioTest:baz

Gyles Fohl added 2 commits August 3, 2026 16:07
… controls

Three bugs caused URL ?args= params to be silently dropped:

1. `inferSBType` used `in` to check array membership — always false, so every
   scalar prop (string/number/boolean) got type `other` instead of the correct
   scalar type. Fixed with `Array.includes()`.

2. `mapPropOptions` mapped plain-type props (e.g. `string`) to `[undefined]`
   because Stencil emits `values: [{ type: "string" }]` without a `value` key.
   `[undefined].length > 0` slipped past the original patch's guard.
   Fixed by adding `&& value.value !== undefined` to the filter.

3. `inferSBType` returned `{ name: 'other' }` for union/enum types.
   Storybook's `mapArgsToTypes` treats `other` as `INCOMPATIBLE` and drops
   those args entirely. Fixed by returning `{ name: 'enum', value: [...] }`
   when enumerated values are present — matching what Storybook's `map()`
   expects for radio/select controls.
Wait for storybook-preview-iframe to exist and reach
data-is-loaded=true before switching frame context, to
avoid flaky frame-not-found errors in CI.
@davidpett
davidpett merged commit ddf4adb into stenciljs:main Aug 5, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants