ripple 0.2.88 → 0.2.90

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.90",
   "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') {
@@ -417,10 +455,25 @@ function RipplePlugin(config) {
 			jsx_parseExpressionContainer() {
 				let node = this.startNode();
 				this.next();
+        let tracked = false;
+
+        if (this.value === 'html') {
+          node.html = true;
+          this.next();
+          if (this.type.label === '@') {
+            this.next(); // consume @
+            tracked = true;
+          }
+        }
 
 				node.expression =
 					this.type === tt.braceR ? this.jsx_parseEmptyExpression() : this.parseExpression();
 				this.expect(tt.braceR);
+
+        if (tracked && node.expression.type === 'Identifier') {
+          node.expression.tracked = true;
+        }
+
 				return this.finishNode(node, 'JSXExpressionContainer');
 			}
 
@@ -916,7 +969,8 @@ function RipplePlugin(config) {
 
 				if (this.type.label === '{') {
 					const node = this.jsx_parseExpressionContainer();
-					node.type = 'Text';
+					node.type = node.html ? 'Html' : 'Text';
+          delete node.html;
 					body.push(node);
 				} else if (this.type.label === '}') {
 					return;

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

@@ -133,7 +133,7 @@ function visit_title_element(node, context) {
 			),
 		);
 	} else {
-		debugger;
+		context.state.init.push(b.stmt(b.assignment('=', b.id('_$_.document.title'), result)));
 	}
 }
 
@@ -336,6 +336,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 +721,19 @@ 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))),
 						);
 					}
 				}
@@ -1470,6 +1490,7 @@ function transform_children(children, context) {
 				node.type === 'IfStatement' ||
 				node.type === 'TryStatement' ||
 				node.type === 'ForOfStatement' ||
+				node.type === 'Html' ||
 				(node.type === 'Element' &&
 					(node.id.type !== 'Identifier' || !is_element_dom_element(node))),
 		) ||
@@ -1564,6 +1585,14 @@ function transform_children(children, context) {
 				visit(node, { ...state, flush_node, namespace: state.namespace });
 			} else if (node.type === 'HeadElement') {
 				visit(node, { ...state, flush_node, namespace: state.namespace });
+			} else if (node.type === 'Html') {
+				const metadata = { tracking: false, await: false };
+				const expression = visit(node.expression, { ...state, metadata });
+
+				context.state.template.push('<!>');
+
+				const id = flush_node();
+				state.update.push(b.stmt(b.call('_$_.html', id, b.thunk(expression))));
 			} else if (node.type === 'Text') {
 				const metadata = { tracking: false, await: false };
 				const expression = visit(node.expression, { ...state, metadata });
@@ -1611,6 +1640,7 @@ function transform_children(children, context) {
 	for (const head_element of head_elements) {
 		visit_head_element(head_element, context);
 	}
+
 	if (context.state.inside_head) {
 		const title_element = children.find(
 			(node) =>

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/blocks.js

@@ -318,6 +318,20 @@ export function is_destroyed(target_block) {
 	return true;
 }
 
+/**
+ * @param {Node | null} node
+ * @param {Node} end
+ */
+export function remove_block_dom(node, end) {
+  while (node !== null) {
+    /** @type {Node | null} */
+    var next = node === end ? null : next_sibling(node);
+
+    /** @type {Element | Text | Comment} */ (node).remove();
+    node = next;
+  }
+}
+
 /**
  * @param {Block} block
  * @param {boolean} [remove_dom]
@@ -330,16 +344,7 @@ export function destroy_block(block, remove_dom = true) {
 
 	if ((remove_dom && (f & (BRANCH_BLOCK | ROOT_BLOCK)) !== 0) || (f & HEAD_BLOCK) !== 0) {
 		var s = block.s;
-		var node = s.start;
-		var end = s.end;
-
-		while (node !== null) {
-			var next = node === end ? null : next_sibling(node);
-
-			node.remove();
-			node = next;
-		}
-
+    remove_block_dom(s.start, s.end);
 		removed = true;
 	}
 

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/html.js

@@ -0,0 +1,41 @@
+/** @import { Block } from '#client' */
+
+import { remove_block_dom, render } from './blocks.js';
+import { first_child } from './operations.js';
+import { active_block } from './runtime.js';
+import { assign_nodes, create_fragment_from_html } from './template.js';
+
+/**
+ * Renders dynamic HTML content into the DOM by inserting it before the anchor node.
+ * Manages the lifecycle of HTML blocks, removing old content and inserting new content.
+ * 
+ * TODO handle SVG/MathML
+ * 
+ * @param {ChildNode} node
+ * @param {() => string} get_html
+ * @returns {void}
+ */
+export function html(node, get_html) {
+	/** @type {ChildNode} */
+	var anchor = node;
+	/** @type {string} */
+	var html = '';
+
+	render(() => {
+		var block = /** @type {Block} */ (active_block);
+		html = get_html() + '';
+
+		if (block.s !== null && block.s.start !== null) {
+			remove_block_dom(block.s.start, /** @type {Node} */ (block.s.end));
+			block.s.start = block.s.end = null;
+		}
+
+		if (html === '') return;
+		/** @type {DocumentFragment} */
+		var node = create_fragment_from_html(html);
+
+		assign_nodes(/** @type {Node } */ (first_child(node)), /** @type {Node} */ (node.lastChild));
+
+    anchor.before(node);
+	});
+}

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

@@ -60,6 +60,10 @@ 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';
+export { script } from './script.js';
+
+export { html } from './html.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/template.js

@@ -35,7 +35,7 @@ export function assign_nodes(start, end) {
  * @param {boolean} use_mathml_namespace - Whether to use MathML namespace.
  * @returns {DocumentFragment}
  */
-function create_fragment_from_html(html, use_svg_namespace = false, use_mathml_namespace = false) {
+export function create_fragment_from_html(html, use_svg_namespace = false, use_mathml_namespace = false) {
   if (use_svg_namespace) {
     return from_namespace(html, 'svg');
   }