JavaScript-Framework: Solid.js 1.4 erlaubt Top-Level Arrays in Stores

Das Team hinter Solid.js hat Version 1.4 des JavaScript-Frameworks veröffentlicht. Es bringt weniger neue Features mit als das letzte Minor Release im Januar, soll allerdings dadurch entstandene Bugs beheben. Daneben widmet sich Version 1.4 vor allem dem Erweitern bereits bestehender Features, darunter Stores und Streaming.

Die JavaScript-Bibliothek Solid.js dient dem Erstellen von User Interfaces und soll sich durch ihre Reaktivität und Flexibilität auszeichnen. Erst vor weniger als einem Jahr erreichte sie die erste Hauptversion 1.0. Anstatt auf ein Virtual DOM zu setzen, kompiliert Solid.js seine Templates zu realen DOM-Nodes und soll diese mit fein abgestuften Reactions aktualisieren. Somit lässt sich der State deklarieren und über eine Anwendung hinweg nutzen. Ändert sich ein Teil des State, soll einzig der davon abhängige Code erneut ausgeführt werden.

heise-Konferenz zu Enterprise-JavaScript

heise Developer und dpunkt.verlag richten am 22. und 23. Juni 2022 die enterJS im Darmstadtium in Darmstadt aus. Die JavaScript-Konferenz bietet zahlreiche Vorträge und Workshops zu JavaScript im Allgemeinen, die Frameworks (Angular, Node.js, React und Svelte) im Speziellen sowie TypeScript, Tools und Techniken rund um die Programmiersprache.

Auszug aus dem Programm:

• Solid.js: Schluss mit Framework-Overhead!
• Deno – das bessere Node.js
• Schneller und glücklicher arbeiten mit SvelteKit
• Ein vollständiges JavaScript-Anwendungssystem (Workshop)

Weitere Informationen zur enterJS sowie Zugang zu den Tickets bietet die Konferenzwebseite.

Top-Level Arrays in Stores und verzögerbares Streaming

Zu den neuen Features in Solid.js 1.4 zählt die Verwendung von Top-Level Arrays in Stores. Bislang war beim Erstellen von Listen deren Nesting unter einer Property nötig, um ein korrektes Tracking zu ermöglichen. Nun akzeptiert der Store-Setter auch Top-Level Arrays:

const [todos, setTodos] = createStore([
  { id: 1, title: "Thing I have to do", done: false },
  { id: 2, title: "Learn a New Framework", done: false }
]);

// set at an index
setTodos(1, done, true);

// use an array
setTodos([...todos, { id: 3, title: "New Todo", done: false }])

// iterate over it with <For>
<For each={todos}>{todo => <Todo todo={todo} />}</For>;

Eine weitere Neuerung betrifft den Stream Renderer in Solid.js: Das Streaming lässt sich nun mittels der neuen deferStream-Option aufschieben. Das kann beispielsweise dann von Vorteil sein, wenn zwar Streamen gewünscht ist, jedoch zunächst das Laden wichtiger Daten abgewartet werden soll.

// fetches a user and streams content as soon as possible
const [user] = createResource(() => params.id, fetchUser);

// fetches a user but only streams content after this resource has loaded
const [user] = createResource(() => params.id, fetchUser, { deferStream: true });

Zu den weiteren Änderungen in Solid.js 1.4 zählt das Markieren von className und htmlFor als veraltet (deprecated). Auch wurde die experimentelle Option refetchResources entfernt, da sie sich nach Angaben des Entwicklungsteams als zu allgemein herausstellte, um hilfreich zu sein.

Alle weiteren Informationen zu Solid.js 1.4 lassen sich den Release Notes entnehmen.

(mai)