Experimental · 0.2. Files are .rx and compile to plain Solid 2.0. Releases follow Solid 2.0's release candidates, so expect breaking changes until Solid 2.0 is final.
Experimental · 0.3. Files are .rx and compile to plain Solid 2.0. Releases follow Solid 2.0's release candidates, so expect breaking changes until Solid 2.0 is final.
In Solid you already write UIs as derivations over signals. Most of what goes wrong is a shape mistake: writing to something that should be derived, writing during a computation, reading async data with no loading or error boundary above it. ReactiveScript makes those things the checker refuses, the way Rust refuses a borrow.
@@ -102,6 +102,19 @@Write to the equation instead, double := 4, and the checker refuses it, in your editor and in CI:
counter.rx:5:3 - error WRITE_TO_NON_SOURCE: double is an equation: only sources are written (W-1)In Solid, destructuring props reads them once and the component stops updating. In .rx, destructure them right in the parameter list: every name follows its prop, defaults and rest included.
+inbox.rxcomponent Badge({ label, tone = "info", ...rest }: { label: string; tone?: string; count: number }) {
+ <span class={tone}>{label}: {rest.count}</span>
+}
+
+export default component Inbox() {
+ source user := { name: "Ada", unread: 3 }
+
+ <Badge label={user.name} count={user.unread} /> // Badge updates when user changes
+ <button onClick={() => { user := { ...user, unread: 0 } }}>Mark read</button>
+}
+
awaitPut an await in an equation. The checker tracks that the value can be pending and can fail, and asks you to say what to show in both cases.
profile.rximport pure { fetchUser } from "./api"
@@ -186,6 +199,7 @@ Every word is a Solid primitive
y = x * 2createMemo, createProjectionuser = await fetchUser(id)an async createMemo guess likes := likes + 1createOptimisticcomponent C({ label, ...rest })props.label, omit(props, "label")action send() { … }actioneffect (x) { … }createEffect(compute, apply)loading / errored<Loading> / <Errored>Every word is a Solid primitive
The spec is the product
Every behaviour is a numbered rule or an executable scenario, checked against Solid itself.
+ Use any Solid library
+ A Solid library is plain JavaScript, and .rx can use any of them: solid-primitives, a design system's hooks, your own create* helpers. Declare what you use once, in a .d.rx beside it, and the checker holds every use to that declaration. A ref is an accessor: you pass and read plain values, and the compiler adds the calls.
+media.d.rx// beside ./media.js, which re-exports it from @solid-primitives/media
+export pure fn createMediaQuery(query: string): ref boolean
+nav.rximport { createMediaQuery } from "./media.js"
+
+export default component Nav() {
+ wide = createMediaQuery("(min-width: 768px)") // runs once; read it like any equation
+
+ <nav>{if wide { <Links /> } else { <Menu /> }}</nav>
+}
+ A package can ship its own .d.rx beside its build, and then there's nothing to declare. See Using Solid libraries.
+
Install
In a Solid app (Vite). Install the compiler and the runtime beside Solid 2.0. Solid's Vite plugin (3.0.0-next.57 or later) finds the compiler and compiles .rx on its own, so vite.config.js stays as it is.
npm i solid-js@next @solidjs/web@next @solidjs/signals@next @reactivescript/runtime
@@ -215,6 +242,7 @@ Learn more
- The language on one page : the whole working language
- Talking to a server : async, guesses and what waits
+ - Solid libraries : declare a library once in a
.d.rx
- Diagnostics : every error code, why, and the fix
- The spec : the language as numbered rules
- Examples : real apps in
.rx
diff --git a/tooling/rx-language-server/package-lock.json b/tooling/rx-language-server/package-lock.json
index 9b5b379..2abe140 100644
--- a/tooling/rx-language-server/package-lock.json
+++ b/tooling/rx-language-server/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@reactivescript/language-server",
- "version": "0.2.0",
+ "version": "0.3.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@reactivescript/language-server",
- "version": "0.2.0",
+ "version": "0.3.0",
"license": "MIT",
"dependencies": {
"@volar/language-core": "2.4.30",
diff --git a/tooling/rx-language-server/package.json b/tooling/rx-language-server/package.json
index b0518a4..2b35163 100644
--- a/tooling/rx-language-server/package.json
+++ b/tooling/rx-language-server/package.json
@@ -1,6 +1,6 @@
{
"name": "@reactivescript/language-server",
- "version": "0.2.0",
+ "version": "0.3.0",
"description": "The .rx language server (spec/11 CP-8): Volar over the crate's TSX projection, TypeScript's answers mapped back onto .rx, the crate's own diagnostics; rx-tsc type-checks .rx from the command line.",
"license": "MIT",
"repository": {
diff --git a/tooling/vscode-rx/README.md b/tooling/vscode-rx/README.md
index 294bd6d..9446f3a 100644
--- a/tooling/vscode-rx/README.md
+++ b/tooling/vscode-rx/README.md
@@ -27,7 +27,7 @@ artifact of a run of the repository's `editor` workflow, or build one (below),
then run **Extensions: Install from VSIX…** in the command palette, or
```sh
-code --install-extension reactivescript-0.2.0.vsix
+code --install-extension reactivescript-0.3.0.vsix
```
The project needs a `tsconfig.json` with Solid's JSX (`"jsx": "preserve"`,
diff --git a/tooling/vscode-rx/package-lock.json b/tooling/vscode-rx/package-lock.json
index fa17e15..08c5218 100644
--- a/tooling/vscode-rx/package-lock.json
+++ b/tooling/vscode-rx/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "reactivescript",
- "version": "0.2.0",
+ "version": "0.3.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "reactivescript",
- "version": "0.2.0",
+ "version": "0.3.0",
"license": "MIT",
"dependencies": {
"highlight.js": "^11.11.1",
diff --git a/tooling/vscode-rx/package.json b/tooling/vscode-rx/package.json
index de5466c..2d11377 100644
--- a/tooling/vscode-rx/package.json
+++ b/tooling/vscode-rx/package.json
@@ -2,7 +2,7 @@
"name": "reactivescript",
"displayName": "ReactiveScript",
"description": "ReactiveScript (.rx, .d.rx): highlighting, and TypeScript's types, hover, go to definition, completion and errors through the .rx language server, with the compiler's own diagnostics; ```rx blocks highlighted in Markdown.",
- "version": "0.2.0",
+ "version": "0.3.0",
"publisher": "solidjs",
"license": "MIT",
"icon": "icon.png",