Solidstar

Datastar with SolidJS reactivity.

Solidstar is an almost drop-in replacement of Datastar with Solid reactivity under the hood, enabling interoperability between hypermedia-driven frontend logic and Solid components.

Quick Start • Stackblitz • Comparison • Guide • API Docs • Changelog • Discord

At a Glance

// index.tsx
import { customElement } from "solid-element";
import { signals } from "solidstar";

customElement("my-counter", () => (
  <button onClick={() => signals.count++}>{signals.count}</button>
));

index.html

<script type="module" src="index.tsx"></script>
<div data-signals:count="0" data-text="$count"></div>
<my-counter></my-counter>

[!TIP] Try it out on Stackblitz!

Quick Start

npx giget@latest gh:solidstarjs/solidstar/template#solid my-app
cd my-app
npm install
npm run dev

CDN

[!NOTE]
Use Datastar directly instead, if you do not need Solid components!

<script type="module" src="https://cdn.jsdelivr.net/gh/solidstarjs/[email protected]/bundles/solidstar.js"></script>

Customizing the bundle

To optimize the bundle, import solidstar/core instead of solidstar and import the plugins of your choice:

export * from "solidstar/core";
import "solidstar/plugins/attributes/class";
import "solidstar/plugins/attributes/signals";
import "solidstar/plugins/attributes/text";
import "solidstar/plugins/watchers/patchElements";
import "solidstar/plugins/watchers/patchSignals";

[!TIP] Try it out on https://bundlejs.com!

Setting a custom attribute alias

To use a custom attribute alias, define a global SOLIDSTAR_ALIAS constant in your bundler like so:

import { defineConfig } from "vite";

export default defineConfig({
  define: {
    // Use data-star-* instead of data-* attributes
    "SOLIDSTAR_ALIAS": "'star'"
  },
});

Extending the signals type

You can use Typescript declaration merging, to declare available signals in your app.

declare module "solidstar" {
  interface Signals {
    count: number;
    optionalText?: string;
    foo: {
      bar: number;
    }
  }
}

Comparison with Datastar

| Subject | Datastar | Solidstar | | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | Size (Gzipped) | 10.23 KiB | 13.8 KiB | | Solid interoperability | ❌ | ✅ | | Extendable signals type | ❌ | Learn how | | Recommended component helpers | ⏸️ Work-in-progress (ion) | Solid, Solid Element | | Recommended install method | No bundler, Local copy, CDN | npm, bundler required for Solid components | | Bundle customization | 💲 Bundler | Learn how | | Advanced debugging tool | 💲 Datastar Inspector Optimized for hypermedia | Solid Developer Tools Optimized for Solid components | | Latest signals technology | ✅ (Alien signals) | ⏸️ Work-in-progress | | Computed's run lazily | ✅ | ❌ | | Supports data-on-signal-patch | ✅ | ❌ (Currently) | | Optimized for MPAs | ✅ | ❌ |

Differences

Accessing undefined signals

Solidstar's signals object is based on Solid's createMutable. Accessing undefined signals behaves slightly different compared to Datastar's implementation:

| Code | Datastar | Solidstar | | -------------------- | ------------ | ------------ | | $null | "" | undefined | | $null.length | 0 | Throws error | | $null.title.length | Throws error | Throws error |

[!TIP] Use the optional chaining operator to prevent errors when accessing optional signals:

$null?.title?.length

Plugin API: beginBatch, endBatch

Solidstar does not support the beginBatch and endBatch plugin API functions, instead you have to use batch:

// Datastar
import { root, beginBatch, endBatch } from "/datastar.js";
beginBatch();
root.count = 1;
root.text = "hello world";
endBatch();

// Solidstar
import { root, batch } from "solidstar";
batch(() => {
  root.count = 1;
  root.text = "hello world";
});

Plugin API: startPeeking, stopPeeking

Solidstar does not support the startPeeking and stopPeeking plugin API functions, instead you have to use peek:

// Datastar
import { root, startPeeking, stopPeeking } from "/datastar.js";
startPeeking();
console.log(root.count);
stopPeeking();

// Solidstar
import { root, peek } from "solidstar";
peek(() => {
  console.log(root.count);
});