ripple 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # ripple
 
+## 0.4.2
+
+### Patch Changes
+
+- [#1478](https://github.com/Ripple-TS/ripple/pull/1478)
+  [`1032539`](https://github.com/Ripple-TS/ripple/commit/10325392e4b1ec7fba78b8ddaf57bc5376adaab1)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Faster buffered server
+  rendering. Static text and attribute values are emitted with characters above
+  U+00FF as numeric character references (raw-text elements such as `<script>`
+  excluded), so a server response stays a one-byte string whenever its dynamic
+  data is Latin-1 too: a single static em dash no longer widens the whole body to
+  two bytes per character, which halved the flatten, byte-length and UTF-8 encode
+  cost of a page. The runtime text escaper checks for `&` and `<` with two
+  single-character searches instead of a regex test.
+
+- [#1481](https://github.com/Ripple-TS/ripple/pull/1481)
+  [`e9382ed`](https://github.com/Ripple-TS/ripple/commit/e9382ed7538779aeb8671b8e3f3fdfd3a897b85a)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Cheaper text-only elements
+  and typed loop items. An element whose only child is a typed text expression
+  (`<td>{row.name}</td>`) is cloned without a placeholder text node and written
+  through the element (`set_text_content`): the first write creates the text node
+  with `textContent`, later writes update it in place, and hydration adopts the
+  server-rendered text with no cursor descent, which removes a DOM read and a text
+  node per cell from every list row. A keyed `@for` key callback reads the item
+  directly instead of unwrapping it. Type inference now follows a binding's
+  declared type through property writes (`items.value = next` no longer hides
+  `track<Row[]>()` from the loop item) and through array and tuple indexing
+  (`row.queries[0].elapsed`), so those reads lower to direct text updates in one
+  render block per row.
+
+- [#1483](https://github.com/Ripple-TS/ripple/pull/1483)
+  [`5de359e`](https://github.com/Ripple-TS/ripple/commit/5de359e430391b0e1609795b42d26161fd5c2ff9)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - perf: a list item without a
+  tracked of its own (a plain list's item, or a local keyed item) is created
+  through a lean first run (`run_branch`) instead of the generic block runner:
+  fewer checks and no re-run bookkeeping per item.
+
+- [#1482](https://github.com/Ripple-TS/ripple/pull/1482)
+  [`0030be0`](https://github.com/Ripple-TS/ripple/commit/0030be0aa3c7f1d2ce40500dc57ea980b69c69ec)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - perf: cheaper keyed lists. A
+  `@for` or `@if` that trails template siblings appends into its parent element
+  instead of inserting before a `<!>` placeholder. A list item whose updates live
+  in one render block carries that block on the item block itself (`_$_.item`),
+  and a keyed item that only its render block reads is held as it is instead of in
+  a tracked, re-running its block directly when the key's item is replaced. Leaf
+  text is written without a DOM read, from the value the render block last wrote.
+  A keyed diff that re-lays most of its items walks the range front to back
+  instead of appending every item at the end, about half the reorder cost in
+  Chromium and far less right after a layout flush.
+- Updated dependencies
+  [[`1032539`](https://github.com/Ripple-TS/ripple/commit/10325392e4b1ec7fba78b8ddaf57bc5376adaab1),
+  [`e9382ed`](https://github.com/Ripple-TS/ripple/commit/e9382ed7538779aeb8671b8e3f3fdfd3a897b85a),
+  [`0030be0`](https://github.com/Ripple-TS/ripple/commit/0030be0aa3c7f1d2ce40500dc57ea980b69c69ec)]:
+  - @tsrx/ripple@0.2.1
+
+## 0.4.1
+
+### Patch Changes
+
+- [#1477](https://github.com/Ripple-TS/ripple/pull/1477)
+  [`670d669`](https://github.com/Ripple-TS/ripple/commit/670d66916a0b2d58254adb3248abc9d3e816fd8d)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Use property-specific CSS
+  types for HTML and SVG style objects and export `CSSProperties` from `ripple`
+  and `ripple/jsx-runtime`. Numeric lengths such as `width: 400` now produce a
+  type error; specify units with `width: '400px'` or `width: '24rem'`. Unitless
+  CSS properties, zero lengths, camelCase and kebab-case names, and CSS custom
+  properties remain supported.
+
+  Style properties set to `null` or `undefined` are omitted during server
+  rendering and removed on the client, matching the nullable and optional property
+  types and supporting conditional style values. Ripple does not infer or add CSS
+  units.
+
+  Re-export the `JSX` and `Ripple` namespaces as types from `ripple` so element
+  prop and event types can be imported from the main package. The
+  `ripple/jsx-runtime` exports remain available.
+
+- [#1475](https://github.com/Ripple-TS/ripple/pull/1475)
+  [`e008b3f`](https://github.com/Ripple-TS/ripple/commit/e008b3f933a5a5b54ca8b74ae80aa98b6ddfb82f)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Show public Tracked, Derived,
+  and WritableDerived type names in value property hovers.
+
 ## 0.4.0
 
 ### Minor Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -77,10 +77,11 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
+    "csstype": "^3.2.3",
     "devalue": "^5.9.2",
     "esm-env": "^1.2.2",
     "@tsrx/core": "^0.2.0",
-    "@tsrx/ripple": "0.2.0"
+    "@tsrx/ripple": "0.2.1"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/constants.js

@@ -6,6 +6,10 @@ export const IS_INDEXED = 1 << 3;
 // `__anchor` (sibling semantics, no `<!>` wrapper). Distinct from IS_CONTROLLED,
 // which renders inside a parent element.
 export const ROOT_CONTROLLED = 1 << 4;
+// A keyed @for whose item is read only by the render block its item block
+// carries: items are held as they are, not in a tracked, and a replaced item
+// re-runs its block directly (see the runtime's `item`).
+export const LOCAL_ITEMS = 1 << 7;
 export const TEMPLATE_SVG_NAMESPACE = 1 << 5;
 export const TEMPLATE_MATHML_NAMESPACE = 1 << 6;
 

package/src/jsx-runtime.d.ts

@@ -7,6 +7,7 @@ import type {
 	TSRXElement,
 } from '#public';
 import type { Nullable } from '@tsrx/core/types/helpers';
+import type * as CSS from 'csstype';
 export type { RefValue } from '#public';
 
 /**
@@ -50,10 +51,18 @@ export function jsxs(
  */
 export function Fragment(props: FragmentProps): TSRXElement;
 
+type NullableStyleProperties<T> = { [Property in keyof T]: T[Property] | null };
+
 /** JSX attributes live under Ripple so editor hovers identify their framework. */
 declare namespace Ripple {
 	type ClassValue = string | import('clsx').ClassArray | import('clsx').ClassDictionary;
 
+	/** Inline CSS styles. Values keep their units; null and undefined remove a property. */
+	interface CSSProperties
+		extends NullableStyleProperties<CSS.Properties>, NullableStyleProperties<CSS.PropertiesHyphen> {
+		[property: `--${string}`]: string | number | null | undefined;
+	}
+
 	type Event<
 		Target extends globalThis.EventTarget,
 		EventType extends globalThis.Event,
@@ -493,7 +502,7 @@ declare namespace Ripple {
 		class?: ClassValue | undefined | null;
 		className?: Nullable<string>;
 		id?: Nullable<string>;
-		style?: Nullable<string> | Record<string, string | number>;
+		style?: Nullable<string> | CSSProperties;
 		title?: Nullable<string>;
 		lang?: Nullable<string>;
 		dir?: 'ltr' | 'rtl' | 'auto';
@@ -627,7 +636,7 @@ declare namespace Ripple {
 		// Styling
 		class?: ClassValue | undefined | null;
 		className?: Nullable<string>;
-		style?: Nullable<string> | Record<string, string | number>;
+		style?: Nullable<string> | CSSProperties;
 
 		// Presentation attributes
 		alignmentBaseline?:
@@ -1405,6 +1414,7 @@ declare namespace Ripple {
 }
 
 export import ClassValue = Ripple.ClassValue;
+export import CSSProperties = Ripple.CSSProperties;
 export import JSX = Ripple.JSX;
 export { Ripple };
 

package/src/runtime/internal/client/constants.js

@@ -29,6 +29,12 @@ export var SELECTOR = 1 << 23;
 export var RELEASED = 1 << 24;
 /** A block whose latest run created deriveds that are recorded for release (see `release_deriveds`). */
 export var CREATES_DERIVEDS = 1 << 25;
+/**
+ * A list item block that carries its body's render block itself (see the
+ * runtime's `item`): a branch block for its DOM range, and a reaction that
+ * re-runs the body's update function.
+ */
+export var ITEM_BLOCK = 1 << 26;
 
 export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | SWITCH_BLOCK | TRY_BLOCK | COMPOSITE_BLOCK;