ripple 0.2.88 → 0.2.89

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.88",
+  "version": "0.2.89",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -66,6 +66,7 @@
     "@jridgewell/sourcemap-codec": "^1.5.5",
     "acorn": "^8.15.0",
     "acorn-typescript": "^1.4.13",
+    "clsx": "^2.1.1",
     "esrap": "^2.1.0",
     "is-reference": "^3.0.3",
     "magic-string": "^0.30.18",

package/src/compiler/phases/1-parse/index.js

@@ -80,13 +80,17 @@ function RipplePlugin(config) {
 					// Look ahead to see if this is followed by [ for tuple syntax
 					if (this.pos + 1 < this.input.length) {
 						const nextChar = this.input.charCodeAt(this.pos + 1);
-						if (nextChar === 91) {
-							// [ character
-							// This is a tuple literal #[
-							// Consume both # and [
+						if (nextChar === 91 || nextChar === 123) {
+							// [ or { character
+							// This is a tuple literal #[ or #{
+							// Consume both # and [ or {
 							++this.pos; // consume #
-							++this.pos; // consume [
-							return this.finishToken(tt.bracketL, '#[');
+							++this.pos; // consume [ or {
+							if (nextChar === 123) {
+								return this.finishToken(tt.braceL, '#{');
+							} else {
+								return this.finishToken(tt.bracketL, '#[');
+							}
 						}
 					}
 				}
@@ -181,6 +185,8 @@ function RipplePlugin(config) {
 				// Check if this is a tuple literal starting with #[
 				if (this.type === tt.bracketL && this.value === '#[') {
 					return this.parseTrackedArrayExpression();
+				} else if (this.type === tt.braceL && this.value === '#{') {
+					return this.parseTrackedObjectExpression();
 				}
 
 				return super.parseExprAtom(refDestructuringErrors, forNew, forInit);
@@ -221,6 +227,38 @@ function RipplePlugin(config) {
 				return this.finishNode(node, 'TrackedArrayExpression');
 			}
 
+			parseTrackedObjectExpression() {
+				const node = this.startNode();
+				this.next(); // consume the '#{'
+
+				node.properties = [];
+
+				// Parse object properties similar to regular object parsing
+				let first = true;
+				while (!this.eat(tt.braceR)) {
+					if (!first) {
+						this.expect(tt.comma);
+						if (this.afterTrailingComma(tt.braceR)) break;
+					} else {
+						first = false;
+					}
+
+					if (this.type === tt.ellipsis) {
+						// Spread property
+						const prop = this.parseSpread();
+						node.properties.push(prop);
+						if (this.type === tt.comma && this.input.charCodeAt(this.pos) === 125) {
+							this.raise(this.pos, 'Trailing comma is not permitted after the rest element');
+						}
+					} else {
+						// Regular property
+						node.properties.push(this.parseProperty(false, {}));
+					}
+				}
+
+				return this.finishNode(node, 'TrackedObjectExpression');
+			}
+
 			parseExportDefaultDeclaration() {
 				// Check if this is "export default component"
 				if (this.value === 'component') {

package/src/compiler/phases/3-transform/client/index.js

@@ -133,7 +133,9 @@ function visit_title_element(node, context) {
 			),
 		);
 	} else {
-		debugger;
+		context.state.init.push(
+			b.stmt(b.assignment('=', b.id('_$_.document.title'), result)),
+		);
 	}
 }
 
@@ -336,6 +338,25 @@ const visitors = {
 		);
 	},
 
+	TrackedObjectExpression(node, context) {
+		if (context.state.to_ts) {
+			if (!context.state.imports.has(`import { TrackedObject } from 'ripple'`)) {
+				context.state.imports.add(`import { TrackedObject } from 'ripple'`);
+			}
+
+			return b.new(
+				b.id('TrackedObject'),
+				b.object(node.properties.map((prop) => context.visit(prop)))
+			);
+		}
+
+		return b.call(
+			'_$_.tracked_object',
+			b.object(node.properties.map((prop) => context.visit(prop))),
+			b.id('__block'),
+		);
+	},
+
 	MemberExpression(node, context) {
 		const parent = context.path.at(-1);
 
@@ -702,18 +723,18 @@ const visitors = {
 					const metadata = { tracking: false, await: false };
 					let expression = visit(class_attribute.value, { ...state, metadata });
 
-					if (node.metadata.scoped && state.component.css) {
-						expression = b.binary('+', expression, b.literal(' ' + state.component.css.hash));
-					}
+					const hash_arg = node.metadata.scoped && state.component.css
+						? b.literal(state.component.css.hash)
+						: undefined;
 					const is_html = context.state.metadata.namespace === 'html' && node.id.name !== 'svg';
 
 					if (metadata.tracking) {
 						local_updates.push(
-							b.stmt(b.call('_$_.set_class', id, expression, undefined, b.literal(is_html))),
+							b.stmt(b.call('_$_.set_class', id, expression, hash_arg, b.literal(is_html))),
 						);
 					} else {
 						state.init.push(
-							b.stmt(b.call('_$_.set_class', id, expression, undefined, b.literal(is_html))),
+							b.stmt(b.call('_$_.set_class', id, expression, hash_arg, b.literal(is_html))),
 						);
 					}
 				}
@@ -1611,7 +1632,8 @@ function transform_children(children, context) {
 	for (const head_element of head_elements) {
 		visit_head_element(head_element, context);
 	}
-	if (context.state.inside_head) {
+
+	if (context.state.inside_head) { 
 		const title_element = children.find(
 			(node) =>
 				node.type === 'Element' && node.id.type === 'Identifier' && node.id.name === 'title',

package/src/runtime/array.js

@@ -1,7 +1,6 @@
 /** @import { Block } from '#client' */
-import { MAX_ARRAY_LENGTH, TRACKED_ARRAY, UNINITIALIZED } from './internal/client/constants.js';
-import { get, safe_scope, set, tracked } from './internal/client/runtime.js';
-import { get_descriptor } from './internal/client/utils.js';
+import { safe_scope } from './internal/client/runtime.js';
+import { array_proxy } from './proxy.js';
 
 /**
  * @template T
@@ -15,8 +14,7 @@ export function TrackedArray(...elements) {
   }
 
   var block = safe_scope();
-
-  return proxy({ elements, block });
+  return array_proxy({ elements, block });
 }
 
 /**
@@ -29,7 +27,7 @@ export function TrackedArray(...elements) {
 TrackedArray.from = function (arrayLike, mapFn, thisArg) {
   var block = safe_scope();
   var elements = mapFn ? Array.from(arrayLike, mapFn, thisArg) : Array.from(arrayLike);
-  return proxy({ elements, block, from_static: true });
+  return array_proxy({ elements, block, from_static: true });
 };
 
 /**
@@ -40,7 +38,7 @@ TrackedArray.from = function (arrayLike, mapFn, thisArg) {
 TrackedArray.of = function (...items) {
   var block = safe_scope();
   var elements = Array.of(...items);
-  return proxy({ elements, block, from_static: true });
+  return array_proxy({ elements, block, from_static: true });
 };
 
 /**
@@ -55,246 +53,15 @@ TrackedArray.fromAsync = async function (arrayLike, mapFn, thisArg) {
   var elements = mapFn
     ? await Array.fromAsync(arrayLike, mapFn, thisArg)
     : await Array.fromAsync(arrayLike);
-  return proxy({ elements, block, from_static: true });
+  return array_proxy({ elements, block, from_static: true });
 };
 
 /**
  * @template T
- * @param {{
- *  elements: Iterable<T>,
- *  block: Block,
- *  from_static?: boolean,
- *  use_array?: boolean
- * }} params
- * @returns {TrackedArray<T>}
- */
-function proxy({ elements, block, from_static = false, use_array = false }) {
-  /** @type {T[]} */
-  var arr;
-  var first;
-
-  if (
-    from_static &&
-    (first = get_first_if_length(/** @type {Array<T>} */ (elements))) !== undefined
-  ) {
-    arr = new Array();
-    arr[0] = /** @type {T} */ (/** @type {unknown} */ (first));
-  } else if (use_array) {
-    arr = /** @type {T[]} */ (elements);
-  } else {
-    arr = new Array(...elements);
-  }
-
-  var tracked_elements = new Map();
-  var tracked_len = tracked(arr.length, block);
-  tracked_elements.set('length', tracked_len);
-
-  return new Proxy(arr, {
-    get(target, prop, receiver) {
-      var t = tracked_elements.get(prop);
-      var exists = prop in target;
-
-      if (t === undefined && (!exists || get_descriptor(target, prop)?.writable)) {
-        t = tracked(exists ? /** @type {any} */ (target)[prop] : UNINITIALIZED, block);
-        tracked_elements.set(prop, t);
-      }
-
-      if (t !== undefined) {
-        var v = get(t);
-        return v === UNINITIALIZED ? undefined : v;
-      }
-
-      var result = Reflect.get(target, prop, receiver);
-
-      if (typeof result === 'function') {
-        if (methods_returning_arrays.has(/** @type {string} */ (prop))) {
-          /** @type {(this: any, ...args: any[]) => any} */
-          return function (...args) {
-            var output = Reflect.apply(result, receiver, args);
-
-            if (Array.isArray(output) && output !== target) {
-              return proxy({ elements: output, block, use_array: true });
-            }
-
-            return output;
-          };
-        }
-
-        // When generating an iterator, we need to ensure that length is tracked
-        if (prop === 'entries' || prop === 'values' || prop === 'keys') {
-          receiver.length;
-        }
-      }
-
-      return result;
-    },
-
-    set(target, prop, value, receiver) {
-      var t = tracked_elements.get(prop);
-      var exists = prop in target;
-
-      if (prop === 'length') {
-        for (var i = value; i < tracked_len.v; i += 1) {
-          var other_t = tracked_elements.get(i + '');
-          if (other_t !== undefined) {
-            set(other_t, UNINITIALIZED, block);
-          } else if (i in target) {
-            // If the item exists in the original, we need to create a uninitialized tracked,
-            // else a later read of the property would result in a tracked being created with
-            // the value of the original item at that index.
-            other_t = tracked(UNINITIALIZED, block);
-            tracked_elements.set(i + '', other_t);
-          }
-        }
-      }
-
-      // If we haven't yet created a tracked for this property, we need to ensure
-      // we do so otherwise if we read it later, then the write won't be tracked and
-      // the heuristics of effects will be different vs if we had read the proxied
-      // object property before writing to that property.
-      if (t === undefined) {
-        if (!exists || get_descriptor(target, prop)?.writable) {
-          t = tracked(undefined, block);
-          set(t, value, block);
-
-          tracked_elements.set(prop, t);
-        }
-      } else {
-        exists = t.v !== UNINITIALIZED;
-
-        set(t, value, block);
-      }
-
-      var result = Reflect.set(target, prop, value, receiver);
-
-      if (!exists) {
-        // If we have mutated an array directly, we might need to
-        // signal that length has also changed. Do it before updating metadata
-        // to ensure that iterating over the array as a result of a metadata update
-        // will not cause the length to be out of sync.
-        if (typeof prop === 'string') {
-          var n = Number(prop);
-
-          if (Number.isInteger(n) && n >= tracked_len.v) {
-            set(tracked_len, n + 1, block);
-          }
-        }
-      }
-
-      return result;
-    },
-
-    setPrototypeOf() {
-      throw new Error(`Cannot set prototype of \`TrackedArray\``);
-    },
-
-    deleteProperty(target, prop) {
-      var t = tracked_elements.get(prop);
-
-      if (t === undefined) {
-        if (prop in target) {
-          const t = tracked(UNINITIALIZED, block);
-          tracked_elements.set(prop, t);
-        }
-      } else {
-        set(t, UNINITIALIZED, block);
-      }
-
-      return Reflect.deleteProperty(target, prop);
-    },
-
-    has(target, prop) {
-      if (prop === TRACKED_ARRAY) {
-        return true;
-      }
-      var t = tracked_elements.get(prop);
-      var exists = (t !== undefined && t.v !== UNINITIALIZED) || Reflect.has(target, prop);
-
-      if (t !== undefined || !exists || get_descriptor(target, prop)?.writable) {
-        if (t === undefined) {
-          t = tracked(exists ? /** @type {any} */ (target)[prop] : UNINITIALIZED, block);
-
-          tracked_elements.set(prop, t);
-        }
-
-        var value = get(t);
-        if (value === UNINITIALIZED) {
-          return false;
-        }
-      }
-
-      return exists;
-    },
-
-    defineProperty(_, prop, descriptor) {
-      if (
-        !('value' in descriptor) ||
-        descriptor.configurable === false ||
-        descriptor.enumerable === false ||
-        descriptor.writable === false
-      ) {
-        // we disallow non-basic descriptors, because unless they are applied to the
-        // target object — which we avoid, so that state can be forked — we will run
-        // afoul of the various invariants
-        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor#invariants
-        throw new Error(
-          'Only basic property descriptors are supported with value and configurable, enumerable, and writable set to true',
-        );
-      }
-
-      var t = tracked_elements.get(prop);
-
-      if (t === undefined) {
-        t = tracked(descriptor.value, block);
-        tracked_elements.set(prop, t);
-      } else {
-        set(t, descriptor.value, block);
-      }
-
-      return true;
-    },
-  });
-}
-
-/**
- * @template T
- * @param {Array<T>} array
- * @returns {number | void}
- */
-function get_first_if_length(array) {
-  var first = array[0];
-
-  if (
-    array.length === 1 &&
-    0 in array &&
-    Number.isInteger(first) &&
-    /** @type {number} */ (first) >= 0 &&
-    /** @type {number} */ (first) <= MAX_ARRAY_LENGTH
-  ) {
-    return /** @type {number} */ (first);
-  }
-}
-
-const methods_returning_arrays = new Set([
-  'concat',
-  'filter',
-  'flat',
-  'flatMap',
-  'map',
-  'slice',
-  'splice',
-  'toReversed',
-  'toSorted',
-  'toSpliced',
-  'with',
-]);
-
-/**
- * @template T
- * @param {Iterable<T>} elements
+ * @param {Array<T>} elements
  * @param {Block} block
  * @returns {TrackedArray<T>}
  */
 export function tracked_array(elements, block) {
-  return proxy({ elements, block, from_static: true });
-}
+  return array_proxy({ elements, block, from_static: true });
+}

package/src/runtime/index-client.js

@@ -45,12 +45,14 @@ export { create_context as createContext } from './internal/client/context.js';
 export {
   flush_sync as flushSync,
   track,
-  trackSplit,
+  track_split as trackSplit,
   untrack,
 } from './internal/client/runtime.js';
 
 export { TrackedArray } from './array.js';
 
+export { TrackedObject } from './object.js';
+
 export { TrackedSet } from './set.js';
 
 export { TrackedMap } from './map.js';

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

@@ -22,6 +22,8 @@ export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | TRY_BLOCK | COMPOSITE_BLO
 export var UNINITIALIZED = Symbol();
 /** @type {unique symbol} */
 export const TRACKED_ARRAY = Symbol();
+/** @type {unique symbol} */
+export const TRACKED_OBJECT = Symbol();
 export var COMPUTED_PROPERTY = Symbol();
 export var REF_PROP = 'ref';
 /** @type {unique symbol} */

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

@@ -60,6 +60,8 @@ export { template, append } from './template.js';
 
 export { tracked_array } from '../../array.js';
 
+export { tracked_object } from '../../object.js';
+
 export { head } from './head.js';
 
 export { script } from './script.js';

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

@@ -14,7 +14,6 @@ export var is_firefox;
 export function init_operations() {
 	var node_prototype = Node.prototype;
 	var element_prototype = Element.prototype;
-	var object_prototype = Object.prototype;
 	var event_target_prototype = EventTarget.prototype;
 
 	is_firefox = /Firefox/.test(navigator.userAgent);

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

@@ -15,6 +15,7 @@ import {
   is_event_attribute,
 } from '../../../utils/events.js';
 import { get } from './runtime.js';
+import { clsx } from 'clsx';
 
 /**
  * @param {Text} text
@@ -131,18 +132,17 @@ export function set_attributes(element, attributes) {
 }
 
 /**
- * @template V
- * @param {V} value
+ * @param {import('clsx').ClassValue} value
  * @param {string} [hash]
- * @returns {string | V}
+ * @returns {string}
  */
 function to_class(value, hash) {
-  return (value == null ? '' : value) + (hash ? ' ' + hash : '');
+  return value == null ? hash ?? '' : clsx([value, hash]);
 }
 
 /**
  * @param {HTMLElement} dom
- * @param {string} value
+ * @param {import('clsx').ClassValue} value
  * @param {string} [hash]
  * @param {boolean} [is_html]
  * @returns {void}

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

@@ -325,7 +325,7 @@ export function track(v, get, set, b) {
  * @param {Block} b
  * @returns {Tracked[]}
  */
-export function trackSplit(v, l, b) {
+export function track_split(v, l, b) {
 	var is_tracked = is_tracked_object(v);
 
 	if (is_tracked || typeof v !== 'object' || v === null || is_array(v)) {
@@ -1089,7 +1089,7 @@ export function exclude_from_object(obj, exclude_keys) {
   var keys = object_keys(obj);
 	/** @type {Record<string | symbol, unknown>} */
 	var new_obj = {};
-  
+
   for (const key of keys) {
     if (!exclude_keys.includes(key)) {
       new_obj[key] = obj[key];

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

@@ -20,6 +20,10 @@ export var object_keys = Object.keys;
 export var get_own_property_symbols = Object.getOwnPropertySymbols;
 /** @type {typeof structuredClone} */
 export var structured_clone = structuredClone;
+/** @type {typeof Object.prototype} */
+export var object_prototype = Object.prototype;
+/** @type {typeof Array.prototype} */
+export var array_prototype = Array.prototype;
 
 /**
  * Creates a text node that serves as an anchor point in the DOM.

package/src/runtime/internal/server/index.js

@@ -6,6 +6,8 @@ import { is_tracked_object } from '../client/utils';
 import { escape } from '../../../utils/escaping.js';
 import { is_boolean_attribute } from '../../../compiler/utils';
 
+import { clsx } from 'clsx';
+
 export { escape };
 
 /** @type {Component | null} */
@@ -132,7 +134,8 @@ export function attr(name, value, is_boolean = false) {
 	}
 	if (value == null || (!value && is_boolean)) return '';
 	const normalized = (name in replacements && replacements[name].get(value)) || value;
-	const assignment = is_boolean ? '' : `="${escape(normalized, true)}"`;
+	const value_to_escape = name === 'class' ? clsx(normalized) : normalized;
+	const assignment = is_boolean ? '' : `="${escape(value_to_escape, true)}"`;
 	return ` ${name}${assignment}`;
 }
 
@@ -155,7 +158,7 @@ export function spread_attrs(attrs, css_hash) {
     }
 
     if (name === 'class' && css_hash) {
-      value = (value == null ? '' : value) + ' ' + css_hash;
+      value = value == null ? css_hash : [value, css_hash];
     }
 
 		attr_str += attr(name, value, is_boolean_attribute(name));

package/src/runtime/object.js

@@ -0,0 +1,29 @@
+/** @import { Block } from '#client' */
+import { safe_scope } from './internal/client/runtime.js';
+import { object_proxy } from './proxy.js';
+
+/**
+ * @template {object} T
+ * @constructor
+ * @param {T} obj
+ * @returns {TrackedObject<T>}
+ */
+export function TrackedObject(obj) {
+  if (!new.target) {
+    throw new Error("TrackedObject must be called with 'new'");
+  }
+
+  var block = safe_scope();
+
+  return object_proxy(obj, block);
+}
+
+/**
+ * @template {object} T
+ * @param {T} obj
+ * @param {Block} block
+ * @returns {TrackedObject<T>}
+ */
+export function tracked_object(obj, block) {
+  return object_proxy(obj, block);
+}