@decky.fx/raven-tsx 0.1.0 → 0.1.1

package/README.md

@@ -1,6 +1,6 @@
 # raven-tsx
 
-Native desktop interfaces in TSX, for [Bun](https://bun.com), on the real widgets of [Raven](https://github.com/oscar-soirey/Raven). A core knows only Raven, and an adapter for a framework is built on it; React is the one there is today. No XML and no build step, as Bun compiles TSX itself.
+Native desktop interfaces in TSX, for [Bun](https://bun.com), on the real widgets of [Raven](https://github.com/oscar-soirey/Raven). A core knows only Raven, and an adapter for a framework is built on it: there is one for React and one for [Solid](#solid). No XML, and with React no build step, as Bun compiles TSX itself.
 
 ```tsx
 import { useState } from "react";
@@ -27,11 +27,13 @@ Every C example of Raven has a TSX port in [examples](../../examples), with scre
 
     bun add @decky.fx/raven-tsx react react-reconciler
 
-`react` and `react-reconciler` are optional peer dependencies: `@decky.fx/raven-tsx/react` needs both, and an application that uses only the core installs neither.
+For Solid, see [Solid](#solid). The frameworks are optional peer dependencies: an application installs those of the adapter it uses, and one that uses only the core installs none.
 
 | Import | What it is |
 |---|---|
 | `@decky.fx/raven-tsx/react` | The components, `runApp`, the hooks and `registerTag`, for React, and everything of the core |
+| `@decky.fx/raven-tsx/solid` | The same for Solid, with `create...` functions in place of the hooks |
+| `@decky.fx/raven-tsx/solid/preload`, `/solid/plugin` | The Bun plugin that compiles TSX for Solid: to preload, or to give `Bun.build` |
 | `@decky.fx/raven-tsx` | The core, for code that is not a component: `defineTheme`, `loadTheme`, `raven`, and `onAction`, `onShortcut`, `onFrame`, which each return what stops them |
 
 ```json
@@ -63,6 +65,54 @@ For another platform, install its package first:
     bun install --os=win32 --cpu=x64
     bun build --compile --target=bun-windows-x64 src/index.tsx --outfile app.exe
 
+An application of Solid builds with `Bun.build` and the plugin, as [examples/solid-helloworld/build.ts](../../examples/solid-helloworld/build.ts) does.
+
+## Solid
+
+    bun add @decky.fx/raven-tsx solid-js
+    bun add -d babel-preset-solid @babel/core
+
+Solid compiles its JSX itself, with Babel, to calls of a renderer: Bun alone would compile it for React. The plugin of the package does that, and gives Solid's build for clients, as on Bun `solid-js` would otherwise be its build for servers, which does not react. Preload it, for `bun run` and `bun test`:
+
+```toml
+# bunfig.toml
+preload = ["@decky.fx/raven-tsx/solid/preload"]
+
+[test]
+preload = ["@decky.fx/raven-tsx/solid/preload"]
+```
+
+```json
+{ "compilerOptions": { "jsx": "preserve", "jsxImportSource": "solid-js", "types": ["bun"] } }
+```
+
+```tsx
+import { createSignal } from "solid-js";
+import { Button, Label, runApp, VBox } from "@decky.fx/raven-tsx/solid";
+
+function App() {
+	const [count, setCount] = createSignal(0);
+	return (
+		<VBox Spacing={12} Slot={{ Padding: 24 }}>
+			<Label>Clicked {count()} times</Label>
+			<Button Style="Primary" OnClicked={() => setCount(count() + 1)}>Click me</Button>
+		</VBox>
+	);
+}
+
+await runApp(() => <App />, { Title: "Hello", Width: 480, Height: 240 });
+```
+
+The components, their props, events, windows, themes and tags are the same as with React, on the same core; what differs is Solid's:
+
+- `runApp`, `RavenRoot.render` and `createWindow().root.render` take a function that returns the tree, as Solid's `render` does.
+- A component runs once, and a signal changes only the widgets that read it. A handler's change is on the widgets when the handler returns, so a controlled `TextInput` or `Checkbox` works as with React.
+- `ref` receives the `WidgetInstance` once Raven has the widget, placed, as React's does: `ref={(input) => input.focus()}` works. An element never placed gives no ref. The `WindowInstance` of a `<Window>` comes when the element is made; the window opens once it is placed.
+- `createAction(name, handler)`, `createShortcut(() => window, keys, handler)` and `createFrame(handler)` are the hooks of React, and last as long as the component that calls them.
+- `<Portal widget={handle}>` renders into a widget made by hand, as `createPortal` does with React.
+- `registerTag` takes a Solid component, whose props follow the attributes of its element.
+- An element kept in a variable and shown again (`<Show>`) keeps its widget; one whose component is gone is deleted.
+
 ## How props work
 
 The components, with their props, are generated from Raven's own schema.
@@ -340,7 +390,7 @@ An `Image` shows an SVG file like any other: `<Image Source="logo.svg" />`.
 
 ## Working on this package
 
-The repository is a Bun workspace, with this package in `packages/raven-tsx` and the examples in `examples`: `helloworld` tries everything, the others are the examples of Raven in TSX. It expects a Raven checkout two folders up, at `../../raven` from the root:
+The repository is a Bun workspace, with this package in `packages/raven-tsx` and the examples in `examples`: `helloworld` tries everything, `solid-helloworld` is the same with Solid, the others are the examples of Raven in TSX. It expects a Raven checkout two folders up, at `../../raven` from the root:
 
     raven/                 github.com/oscar-soirey/Raven
     bun/raven-tsx/         this repository

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@decky.fx/raven-tsx",
-  "version": "0.1.0",
-  "description": "Raven's native widgets from TSX, for Bun: a core that knows only Raven and an adapter for React, with typed components made from Raven's schema",
+  "version": "0.1.1",
+  "description": "Raven's native widgets from TSX, for Bun: a core that knows only Raven and adapters for React and Solid, with typed components made from Raven's schema",
   "license": "Apache-2.0",
   "type": "module",
   "module": "src/core/index.ts",
   "exports": {
     ".": "./src/core/index.ts",
-    "./react": "./src/react/index.ts"
+    "./react": "./src/react/index.ts",
+    "./solid": "./src/solid/index.ts",
+    "./solid/renderer": "./src/solid/renderer.ts",
+    "./solid/plugin": "./src/solid/plugin.ts",
+    "./solid/preload": "./src/solid/preload.ts"
   },
   "engines": {
     "bun": ">=1.4.4"
@@ -25,22 +29,37 @@
     "native",
     "widgets",
     "react",
+    "solid",
+    "solidjs",
     "vulkan"
   ],
   "dependencies": {
+    "@types/babel__core": "^7.20",
     "@types/react": "^19",
     "@types/react-reconciler": "^0.34"
   },
   "peerDependencies": {
+    "@babel/core": "^7.20",
+    "babel-preset-solid": "^1.9",
     "react": "^19.3.0",
-    "react-reconciler": "^0.34.0"
+    "react-reconciler": "^0.34.0",
+    "solid-js": "^1.9"
   },
   "peerDependenciesMeta": {
+    "@babel/core": {
+      "optional": true
+    },
+    "babel-preset-solid": {
+      "optional": true
+    },
     "react": {
       "optional": true
     },
     "react-reconciler": {
       "optional": true
+    },
+    "solid-js": {
+      "optional": true
     }
   },
   "files": [
@@ -49,10 +68,10 @@
     "NOTICE"
   ],
   "optionalDependencies": {
-    "@decky.fx/raven-tsx-linux-x64": "0.1.0",
-    "@decky.fx/raven-tsx-linux-arm64": "0.1.0",
-    "@decky.fx/raven-tsx-darwin-arm64": "0.1.0",
-    "@decky.fx/raven-tsx-darwin-x64": "0.1.0",
-    "@decky.fx/raven-tsx-win32-x64": "0.1.0"
+    "@decky.fx/raven-tsx-linux-x64": "0.1.1",
+    "@decky.fx/raven-tsx-linux-arm64": "0.1.1",
+    "@decky.fx/raven-tsx-darwin-arm64": "0.1.1",
+    "@decky.fx/raven-tsx-darwin-x64": "0.1.1",
+    "@decky.fx/raven-tsx-win32-x64": "0.1.1"
   }
 }

package/src/core/events.ts

@@ -692,6 +692,8 @@ export const COMMON_PROPS: readonly string[] = [
 class ActionEvents {
 	private readonly handlers = new Map<string, (sender: r.Rid) => void>();
 	private readonly nameOf = new Map<r.Rid, string>();
+	/** The functions given to each name the application chose, in order: the last one has the name. */
+	private readonly named = new Map<string, ((sender: r.Rid) => void)[]>();
 	private callback: JSCallback | null = null;
 	private next = 0;
 
@@ -722,14 +724,35 @@ class ActionEvents {
 		this.handlers.set(name, () => (handler as () => void)());
 	}
 
-	/** Gives a function to an action of a name chosen by the application. It receives the sender. */
+	/**
+	 * Gives a function to an action of a name chosen by the application. It receives the sender.
+	 * A name given again belongs to the last one, until it stops: then to the one before.
+	 */
 	bind(name: string, handler: (sender: r.Rid) => void): void {
+		const registrations = this.named.get(name) ?? [];
+		registrations.push(handler);
+		this.named.set(name, registrations);
 		this.handlers.set(name, handler);
 		r.Raction_bind(name, this.pointer());
 	}
 
-	/** Takes the function of such an action away. */
-	unbind(name: string): void {
+	/** Takes such a function away: the one given, or all of the name. */
+	unbind(name: string, handler?: (sender: r.Rid) => void): void {
+		const registrations = this.named.get(name) ?? [];
+		if (handler !== undefined) {
+			const index = registrations.indexOf(handler);
+			if (index < 0) {
+				return;
+			}
+			registrations.splice(index, 1);
+			// (the last one still there has the name again)
+			const active = registrations.at(-1);
+			if (active) {
+				this.handlers.set(name, active);
+				return;
+			}
+		}
+		this.named.delete(name);
 		this.handlers.delete(name);
 		r.Raction_unbind(name);
 	}
@@ -761,38 +784,71 @@ export const actionEvents = new ActionEvents();
  * the application takes the element out when it agrees. One native callback for all windows.
  */
 class CloseEvents {
+	/** The `OnClose` of each window: it decides, and the window stays open. */
 	private readonly handlers = new Map<r.Rid, () => void>();
+	/** What is told that a window with no `OnClose` closes, as Raven closes it: its cleanups. */
+	private readonly notices = new Map<r.Rid, () => void>();
 	private callback: JSCallback | null = null;
 
 	/** Sets, changes or removes the function of a window. */
 	set(window: r.Rid, handler: EventHandler | undefined, alive = true): void {
+		const known = this.handlers.has(window) || this.notices.has(window);
 		if (!handler) {
-			if (this.handlers.delete(window) && alive) {
-				r.Rwindow_set_close_callback(window, null);
-			}
+			this.handlers.delete(window);
+			this.release(window, known, alive);
 			return;
 		}
-		const known = this.handlers.has(window);
 		this.handlers.set(window, handler as () => void);
 		if (!known) {
-			this.callback ??= new JSCallback(
-				(id: number): number => {
-					const close = this.handlers.get(id);
-					if (!close) {
-						return 1;
-					}
+			this.listen(window);
+		}
+	}
+
+	/** Sets or removes what is told that a window closes when it has no `OnClose`: the user closed it. */
+	notice(window: r.Rid, run: (() => void) | undefined, alive = true): void {
+		const known = this.handlers.has(window) || this.notices.has(window);
+		if (!run) {
+			this.notices.delete(window);
+			this.release(window, known, alive);
+			return;
+		}
+		this.notices.set(window, run);
+		if (!known) {
+			this.listen(window);
+		}
+	}
+
+	/** Asks Raven for the requests to close a window. */
+	private listen(window: r.Rid): void {
+		this.callback ??= new JSCallback(
+			(id: number): number => {
+				const close = this.handlers.get(id);
+				if (close) {
 					eventScope.run(close);
 					return 0;
-				},
-				{ args: ["u32", "ptr"], returns: "i32" },
-			);
-			r.Rwindow_set_close_callback(window, this.callback.ptr);
+				}
+				// (no OnClose: Raven closes it, once what is told of it has run)
+				const notice = this.notices.get(id);
+				if (notice) {
+					eventScope.run(notice);
+				}
+				return 1;
+			},
+			{ args: ["u32", "ptr"], returns: "i32" },
+		);
+		r.Rwindow_set_close_callback(window, this.callback.ptr);
+	}
+
+	/** Stops asking Raven once a window has neither. */
+	private release(window: r.Rid, known: boolean, alive: boolean): void {
+		if (known && alive && !this.handlers.has(window) && !this.notices.has(window)) {
+			r.Rwindow_set_close_callback(window, null);
 		}
 	}
 
 	/** How many windows have a function, for the tests. */
 	get size(): number {
-		return this.handlers.size;
+		return this.handlers.size + this.notices.size;
 	}
 }
 

package/src/core/subscriptions.ts

@@ -45,8 +45,10 @@ export function parseKeys(keys: string): { key: r.RKey; modifiers: number } {
  * action. Returns what takes the name away.
  */
 export function onAction(name: string, handler: (sender: r.Rid) => void): () => void {
-	actionEvents.bind(name, handler);
-	return () => actionEvents.unbind(name);
+	// (a function of its own: the same handler given twice is two registrations)
+	const registered = (sender: r.Rid): void => handler(sender);
+	actionEvents.bind(name, registered);
+	return () => actionEvents.unbind(name, registered);
 }
 
 let nextShortcut = 0;