Skip to content

Add createIslandSignal for sharing reactive state across Solid islands#17159

Open
matthewp wants to merge 3 commits into
mainfrom
solid-signals
Open

Add createIslandSignal for sharing reactive state across Solid islands#17159
matthewp wants to merge 3 commits into
mainfrom
solid-signals

Conversation

@matthewp

Copy link
Copy Markdown
Contributor

Changes

  • Adds a new createIslandSignal function exported from @astrojs/solid-js/signals that lets users create signals in .astro frontmatter and pass them to multiple client:* Solid components. All islands sharing the same signal get a single reactive instance on the client, so updating it in one island updates all others.
  • Signals are detected on the server via Symbol-based branding (Solid signal getters are plain functions with no intrinsic identity, unlike Preact signals which are duck-typeable objects). The server serializes a data-solid-signals JSON attribute mapping prop names to shared signal IDs ("sg0", "sg1", etc.). On the client, a module-level sharedSignalMap creates or reuses createSignal tuples by ID.
  • Supports getter props, setter props (encoded with a ! suffix on the signal ID), and signals nested inside arrays or objects.
  • Signal values remain callable during SSR (unlike Preact, where .peek() scalars replace signals before render). Props are replaced with scalar values only after rendering, before Astro's serializeProps runs.

Testing

  • packages/integrations/solid/test/signals.test.ts — Integration tests verifying data-solid-signals serialization: shared signals between islands get the same ID, array signals produce [id, index] tuples, object signals produce [id, key] tuples, and SSR output contains correct values.
  • packages/astro/e2e/solid-signals.test.ts — E2E tests verifying signals hydrate with the correct initial value and that clicking a button in one island reactively updates a shared signal displayed in another island.

Docs

  • Docs update needed to document the new @astrojs/solid-js/signals export and createIslandSignal API. Not included in this PR.
@changeset-bot

changeset-bot Bot commented Jun 23, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 350c93f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages
Name Type
@astrojs/solid-js Minor
@e2e/errors Patch
@e2e/solid-circular Patch
@e2e/solid-component Patch
@e2e/solid-recurse Patch
@e2e/solid-signals Patch
@e2e/view-transitions Patch
@test/astro-slots-nested Patch
@test/large-array-solid Patch
@test/postcss Patch
@test/slots-solid Patch
@test/solid-component Patch
@test/astro-cloudflare-server-island-prerender-framework Patch
@test/astro-cloudflare-with-solid-js Patch
@test/solid-signals Patch

Not sure what this means? Click here to learn what changesets are.

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

@github-actions github-actions Bot added pkg: solid Related to Solid (scope) pkg: integration Related to any renderer integration (scope) pkg: astro Related to the core `astro` package (scope) labels Jun 23, 2026
@matthewp matthewp added the pr preview Apply this label to a PR to generate a preview release label Jun 23, 2026
@github-actions github-actions Bot removed the pr preview Apply this label to a PR to generate a preview release label Jun 23, 2026
@pkg-pr-new

pkg-pr-new Bot commented Jun 23, 2026

Copy link
Copy Markdown
npm i https://pkg.pr.new/astro@17159
npm i https://pkg.pr.new/@astrojs/solid-js@17159

commit: 350c93f

@delucis delucis left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason this is needed? We already document how to do this here: https://docs.astro.build/en/recipes/sharing-state-islands/

(Also seems unusual to add an API that only works for one framework when there's an agnostic approach documented.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pkg: astro Related to the core `astro` package (scope) pkg: integration Related to any renderer integration (scope) pkg: solid Related to Solid (scope)

2 participants