Skip to content

feat(examples): complete preact examples to align with other frameworks#3175

Draft
segunadebayo wants to merge 4 commits into
mainfrom
cursor/complete-preact-examples-656a
Draft

feat(examples): complete preact examples to align with other frameworks#3175
segunadebayo wants to merge 4 commits into
mainfrom
cursor/complete-preact-examples-656a

Conversation

@segunadebayo

@segunadebayo segunadebayo commented Jun 10, 2026

Copy link
Copy Markdown
Member

Description

Brings the Preact examples app to parity with the React examples by syncing all 215 shared example routes, matching the navigation and app shell patterns used by React and Solid.

Current behavior

The Preact examples app only had 4 working examples with most routes commented out, incorrect branding ("Zag.js + Solid"), and no start-preact script.

New behavior

  • All 215 examples from @zag-js/shared routes are available in examples/preact-ts
  • Component-based sidebar navigation and searchable component index page (/:component)
  • Shared hooks, components, and utilities copied from the React examples
  • pnpm start-preact and pnpm e2e-preact commands added
  • Smoke tests (e2e/examples-smoke.e2e.ts) verify all 215 routes load without runtime errors
  • @zag-js/preact fixes to match React behavior: compact() on machine props, stop mapping defaultValue/defaultChecked to controlled props
  • E2E-only pages added: dialog/nested, combobox/form, date-picker/min-max, drawer/draggable-false
  • Vite-specific adaptations for tabs/with-link and dialog/cloudinary

Testing

  • All 215 smoke tests pass with FRAMEWORK=preact
  • Dialog, accordion, and most component E2E tests pass
  • Some behavioral E2E tests (carousel timing, combobox form fill, date-input typing) remain flaky or fail due to Preact input event differences — tracked separately from example page parity

Is this a breaking change?

No

Open in Web Open in Cursor 

@vercel

vercel Bot commented Jun 10, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
zag-nextjs Ready Ready Preview Jun 10, 2026 2:20pm
zag-solid Ready Ready Preview Jun 10, 2026 2:20pm
zag-svelte Ready Ready Preview Jun 10, 2026 2:20pm
zag-vue Ready Ready Preview Jun 10, 2026 2:20pm
zag-website Ready Ready Preview Jun 10, 2026 2:20pm

Request Review

@changeset-bot

changeset-bot Bot commented Jun 10, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: d9bda65

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

- Sync all 215 example pages from React examples with @zag-js/preact
- Add component index page and navigation matching React/Solid patterns
- Copy shared hooks, components, and lib utilities from next-ts
- Add sync-preact-examples script for future maintenance
- Add start-preact command and missing dependencies
- Adapt tabs/with-link and dialog/cloudinary for Vite/Preact
- Remove scripts/sync-preact-examples.ts per request
- Add smoke tests for all 215 example routes
- Add preact to Playwright config and e2e-preact script
- Fix @zag-js/preact compact() and normalize-props to match React behavior
- Add E2E-only pages: dialog/nested, combobox/form, date-picker/min-max, drawer/draggable-false
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