Skip to content

feat(solid): the Solid substrate with the Dialog primitive - #44

Draft
ivanbanov wants to merge 2 commits into
mainfrom
solid-dialog
Draft

feat(solid): the Solid substrate with the Dialog primitive#44
ivanbanov wants to merge 2 commits into
mainfrom
solid-dialog

Conversation

@ivanbanov

Copy link
Copy Markdown
Member

What

The Solid substrate, targeting Solid 2.0 (solid-js + @solidjs/web at ^2.0.0-rc.0):

  • @dunky.dev/solid-dialog — the compound Dialog (Trigger, Portal, Backdrop, Viewport, Content, Title, Description, Close), same anatomy and behavior contract as the React binding, with the connected api as a fine-grained store.
  • @dunky.dev/solid-use-focus-trap / @dunky.dev/solid-use-scroll-lock — the Solid lifecycle wrappers over the framework-free DOM utils.
  • @dunky-dev/solid storybook harness (pnpm dev:solid, port 6008, storybook-solidjs-vite), with the story set mirroring the React one.
  • Scaffold templates under scripts/templates/packages/solidpnpm scaffold <name> now stamps Solid too.
  • Workspace wiring: a second vitest project (vite-plugin-solid lives with the substrate), a Solid tsconfig project (jsxImportSource: "@solidjs/web"), and a per-package tsdown babel config so the dist is compiled by babel-preset-solid.

Solid-specific decisions

  • Bindings merge inside the JSX spread so a machine transition re-translates them. children never rides that spread: a re-evaluated spread re-creates the children it carries, and a child that writes to the machine on mount (Title's presence) loops machine -> spread -> remount -> machine. Every part strips it and renders {props.children} explicitly.
  • Two-phase effects compute eagerly, before refs filluseFocusTrap re-reads its target at apply time, and the backdrop handle shared between sibling parts is a plain mutable box, not a signal (the layer walk reads it in the same settle that mounts the backdrop).
  • Content's initialFocus accepts an element or an accessor resolved at open time — the Solid idiom for a ref variable that fills during render.
  • The dialog context uses a null default so the root's parent-depth lookup stays non-throwing (a Solid 2.0 default-less context throws on unprovided reads).

Blocked on

  • feat(solid): Solid 2 integration state-machine#32 must merge and publish @dunky.dev/solid-state-machine first (including the normalize fix that stringifies boolean aria-* values — Solid 2.0 renders boolean attributes as presence/absence). The lockfile is deliberately not committed until then; local dev uses an uncommitted pnpm-workspace.yaml override pointing at a packed tarball of that branch. The ^0.4.0 dependency ranges assume the fixed-group publish version — adjust if it differs.

Verified

  • 190 tests across both vitest projects (49 dialog tests ported 1:1 from the React binding), typecheck, lint, format, knip (at main's baseline), pnpm build (dist compiled to @solidjs/web templates, publint clean), and the storybook build.

🤖 Generated with Claude Code

packages/solid targets Solid 2.0 (solid-js + @solidjs/web at ^2.0.0-rc.0):
@dunky.dev/solid-dialog plus the lifecycle wrappers
@dunky.dev/solid-use-focus-trap and @dunky.dev/solid-use-scroll-lock, the
@dunky-dev/solid storybook harness (port 6008), scaffold templates, and the
workspace wiring (vitest project split, own tsconfig project with
jsxImportSource @solidjs/web, per-package tsdown babel config compiling the
dist with babel-preset-solid).

Solid-specific decisions the code encodes:
- Bindings merge inside the JSX spread to stay reactive; children never ride
  that spread — a re-evaluated spread re-creates them, and a child that
  writes to the machine on mount (Title's presence) would loop forever.
- Two-phase effects compute eagerly, before refs fill: useFocusTrap re-reads
  its target at apply time, and the shared backdrop handle is a plain box.
- The dialog context uses a null default so the root's parent-depth lookup
  stays non-throwing (a default-less context throws on unprovided reads).

The lockfile is deliberately not committed: @dunky.dev/solid-state-machine
isn't on npm yet (state-machine PR #32); local dev uses a pnpm override
pointing at a packed tarball of that branch.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
ivanbanov added a commit to dunky-dev/state-machine that referenced this pull request Aug 18, 2026
Solid 2.0 renders a boolean attribute as presence/absence, so
aria-expanded={false} disappeared and aria-modal={true} rendered empty.
ARIA states are literal "true"/"false" tokens — serialize them explicitly.
Found by the solid-dialog binding in dunky-dev/ui#44.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
ivanbanov added a commit to dunky-dev/state-machine that referenced this pull request Aug 18, 2026
Solid 2.0 renders a boolean attribute as presence/absence, so
aria-expanded={false} disappeared and aria-modal={true} rendered empty.
ARIA states are literal "true"/"false" tokens — serialize them explicitly.
Found by the solid-dialog binding in dunky-dev/ui#44.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
rc.1 fixes the reconcile store corruption the adapter worked around — the
matching adapter build drops the detour, so the substrate rides the plain
reconcile path. Peer ranges move to ^2.0.0-rc.1.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
ivanbanov added a commit that referenced this pull request Aug 19, 2026
Cut the comments down to the constraint each one protects — one or two
lines, no narration. Comment-only change on top of the Solid substrate
(#44); no code changes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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.

1 participant