ripple 0.2.87 → 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.87",
+  "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') {
@@ -793,7 +831,36 @@ function RipplePlugin(config) {
 						this.next();
 					}
 				} else {
-					if (open.name.name === 'style') {
+					if (open.name.name === 'script') {
+						let content = '';
+
+						// TODO implement this where we get a string for content of the content of the script tag
+						// This is a temporary workaround to get the content of the script tag
+						const start = open.end;
+						const input = this.input.slice(start);
+						const end = input.indexOf('</script>');
+						content = input.slice(0, end);
+
+						const newLines = content.match(regex_newline_characters)?.length;
+						if (newLines) {
+							this.curLine = open.loc.end.line + newLines;
+							this.lineStart = start + content.lastIndexOf('\n') + 1;
+						}
+						this.pos = start + content.length + 1;
+
+						this.type = tok.jsxTagStart;
+						this.next();
+						if (this.value === '/') {
+							this.next();
+							this.jsx_parseElementName();
+							this.exprAllowed = true;
+							this.#path.pop();
+							this.next();
+						}
+
+						element.content = content;
+						this.finishNode(element, 'Element');
+					} else if (open.name.name === 'style') {
 						// jsx_parseOpeningElementAt treats ID selectors (ie. #myid) or type selectors (ie. div) as identifier and read it
 						// So backtrack to the end of the <style> tag to make sure everything is included
 						const start = open.end;

package/src/compiler/phases/2-analyze/index.js

@@ -488,7 +488,9 @@ const visitors = {
 					if (attr.name.type === 'Identifier') {
 						attribute_names.add(attr.name);
 					}
-					visit(attr.value, state);
+          if (attr.value !== null) {
+					  visit(attr.value, state);
+          }
 				} else if (attr.type === 'SpreadAttribute') {
 					visit(attr.argument, state);
 				} else if (attr.type === 'RefAttribute') {

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

@@ -133,16 +133,12 @@ function visit_title_element(node, context) {
 			),
 		);
 	} else {
-		debugger;
+		context.state.init.push(
+			b.stmt(b.assignment('=', b.id('_$_.document.title'), result)),
+		);
 	}
 }
 
-function visit_style_element(node, context) {
-	context.state.template.push(
-		b.literal(`<style>${sanitize_template_string(node.css)}</style>`),
-	);
-}
-
 const visitors = {
 	_: function set_scope(node, { next, state }) {
 		const scope = state.scopes.get(node);
@@ -342,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);
 
@@ -487,9 +502,19 @@ const visitors = {
 	Element(node, context) {
 		const { state, visit } = context;
 
-		if (context.state.inside_head && node.id.type === 'Identifier' && node.id.name === 'style') {
-			state.template.push(`<style>${sanitize_template_string(node.css)}</style>`);
-			return;
+		if (context.state.inside_head) {
+			if (node.id.type === 'Identifier' && node.id.name === 'style') {
+				state.template.push(`<style>${sanitize_template_string(node.css)}</style>`);
+				return;
+			}
+			if (node.id.type === 'Identifier' && node.id.name === 'script') {
+				const id = state.flush_node();
+				state.template.push('<!>');
+				context.state.init.push(
+					b.stmt(b.call('_$_.script', id, b.literal(sanitize_template_string(node.content)))),
+				);
+				return;
+			}
 		}
 
 		const is_dom_element = is_element_dom_element(node);
@@ -698,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))),
 						);
 					}
 				}
@@ -766,7 +791,8 @@ const visitors = {
 				if (attr.type === 'Attribute') {
 					if (attr.name.type === 'Identifier') {
 						const metadata = { tracking: false, await: false };
-						let property = visit(attr.value, { ...state, metadata });
+						let property =
+							attr.value === null ? b.literal(true) : visit(attr.value, { ...state, metadata });
 
 						if (metadata.tracking || attr.name.tracked) {
 							if (attr.name.name === 'children') {
@@ -1139,6 +1165,14 @@ const visitors = {
 		return context.next();
 	},
 
+	ExportNamedDeclaration(node, context) {
+		if (!context.state.to_ts && node.exportKind === 'type') {
+			return b.empty;
+		}
+
+		return context.next();
+	},
+
 	TryStatement(node, context) {
 		if (!is_inside_component(context)) {
 			context.next();
@@ -1598,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} */