Skip to content

Fix can-mirror registration for mirrored dynamic elements#248

Merged
spencerc99 merged 3 commits into
mainfrom
cx/fix-can-mirror-dynamic-elements
Jun 30, 2026
Merged

Fix can-mirror registration for mirrored dynamic elements#248
spencerc99 merged 3 commits into
mainfrom
cx/fix-can-mirror-dynamic-elements

Conversation

@spencerc99

Copy link
Copy Markdown
Owner

Summary

  • Register PlayHTML capability descendants after can-mirror applies shared DOM state, so dynamically mirrored children become interactive without a delayed setupPlayElement re-walk.
  • Add a regression test shaped like the musical chairs example: a can-mirror container receives a .chair child with can-spin, can-toggle, and a /red-stool.png image, then verifies the mirrored chair gets live handlers.
  • Add a patch changeset and a short docs note for nested capability children inside can-mirror.
  • Capture expected can-duplicate missing-template logs in the existing test so package test output stays clean.

Root Cause

can-mirror correctly applied the child DOM from shared state, but runtime element setup only happened during the top-level discovery pass or an explicit playhtml.setupPlayElement(...) call. Descendants created by can-mirror during load were inserted as plain DOM nodes, so their own can-spin, can-toggle, or other capability attributes were not registered.

Validation

  • bun run test -- src/__tests__/main.basic.test.ts
  • bun run test -- src/__tests__/can-mirror.test.ts
  • bun run test in packages/playhtml
  • bun run build in packages/common
  • bun run build in packages/playhtml
  • bun run build in apps/docs (passes with existing Vite/Astro warnings)
  • bun run lint still fails in unrelated extension/worker TypeScript surfaces after building @playhtml/extension-types: trail settings props, browser storage/data transfer types, worker runtime globals, page metadata cf fetch typing, and WXT manifest typing.

@pkg-pr-new

pkg-pr-new Bot commented Jun 30, 2026

Copy link
Copy Markdown

Open in StackBlitz

bun add https://pkg.pr.new/@playhtml/common@248
bun add https://pkg.pr.new/playhtml@248
bun add https://pkg.pr.new/@playhtml/react@248

commit: 611f08a

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jun 30, 2026

Copy link
Copy Markdown

Deploying playhtml with  Cloudflare Pages  Cloudflare Pages

Latest commit: 611f08a
Status: ✅  Deploy successful!
Preview URL: https://6447e178.playhtml.pages.dev
Branch Preview URL: https://cx-fix-can-mirror-dynamic-el.playhtml.pages.dev

View logs

@spencerc99 spencerc99 marked this pull request as ready for review June 30, 2026 02:19
@spencerc99

Copy link
Copy Markdown
Owner Author

Code review

No issues found. Checked for bugs and project-instruction compliance.

@spencerc99 spencerc99 merged commit 5e603e5 into main Jun 30, 2026
5 checks passed
@spencerc99 spencerc99 deleted the cx/fix-can-mirror-dynamic-elements branch June 30, 2026 14:59
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