solidstar

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/solidstar@0.3.0/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);
});