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
// 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!
npx giget@latest gh:solidstarjs/solidstar/template#solid my-app
cd my-app
npm install
npm run devNote
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>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!
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'"
},
});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;
}
}
}| 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 | ✅ | ❌ |
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?.lengthSolidstar 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";
});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);
});