ripple 0.2.15 → 0.2.17

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is a TypeScript UI framework for the web",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -1,6 +1,7 @@
 import * as acorn from 'acorn';
 import { tsPlugin } from 'acorn-typescript';
 import { parse_style } from './style.js';
+import { walk } from 'zimmerframe';
 
 const parser = acorn.Parser.extend(tsPlugin({ allowSatisfies: true }), RipplePlugin());
 
@@ -387,7 +388,10 @@ function RipplePlugin(config) {
 							this.#path.pop();
 							this.next();
 						}
-						return null;
+						// This node is used for Prettier, we don't actually need
+						// the node for Ripple's transform process
+						element.children = [component.css];
+						return element;
 					} else {
 						this.parseTemplateBody(element.children);
 					}
@@ -419,7 +423,12 @@ function RipplePlugin(config) {
 						const position = this.curPosition();
 						this.startLoc = position;
 						this.endLoc = position;
+						// Avoid triggering onComment handlers, as they will have
+						// already been triggered when parsing the subscript before
+						const onComment = this.options.onComment;
+						this.options.onComment = () => {};
 						this.next();
+						this.options.onComment = onComment;
 
 						return base;
 					}
@@ -558,8 +567,111 @@ function RipplePlugin(config) {
 	};
 }
 
+/**
+ * Acorn doesn't add comments to the AST by itself. This factory returns the capabilities
+ * to add them after the fact. They are needed in order to support `ripple-ignore` comments
+ * in JS code and so that `prettier-plugin-ripple` doesn't remove all comments when formatting.
+ * @param {string} source
+ * @param {CommentWithLocation[]} comments
+ * @param {number} index
+ */
+function get_comment_handlers(source, comments, index = 0) {
+	return {
+		onComment: (block, value, start, end, start_loc, end_loc) => {
+			if (block && /\n/.test(value)) {
+				let a = start;
+				while (a > 0 && source[a - 1] !== '\n') a -= 1;
+
+				let b = a;
+				while (/[ \t]/.test(source[b])) b += 1;
+
+				const indentation = source.slice(a, b);
+				value = value.replace(new RegExp(`^${indentation}`, 'gm'), '');
+			}
+
+			comments.push({
+				type: block ? 'Block' : 'Line',
+				value,
+				start,
+				end,
+				loc: {
+					start: /** @type {import('acorn').Position} */ (start_loc),
+					end: /** @type {import('acorn').Position} */ (end_loc),
+				},
+			});
+		},
+		add_comments: (ast) => {
+			if (comments.length === 0) return;
+
+			comments = comments
+				.filter((comment) => comment.start >= index)
+				.map(({ type, value, start, end }) => ({ type, value, start, end }));
+
+			walk(ast, null, {
+				_(node, { next, path }) {
+					let comment;
+
+					while (comments[0] && comments[0].start < node.start) {
+						comment = /** @type {CommentWithLocation} */ (comments.shift());
+						(node.leadingComments ||= []).push(comment);
+					}
+
+					next();
+
+					if (comments[0]) {
+						if (node.type === 'BlockStatement' && node.body.length === 0) {
+							if (comments[0].start < node.end && comments[0].end < node.end) {
+								comment = /** @type {CommentWithLocation} */ (comments.shift());
+								(node.innerComments ||= []).push(comment);
+								return;
+							}
+						}
+						const parent = /** @type {any} */ (path.at(-1));
+
+						if (parent === undefined || node.end !== parent.end) {
+							const slice = source.slice(node.end, comments[0].start);
+							const is_last_in_body =
+								((parent?.type === 'BlockStatement' || parent?.type === 'Program') &&
+									parent.body.indexOf(node) === parent.body.length - 1) ||
+								(parent?.type === 'ArrayExpression' &&
+									parent.elements.indexOf(node) === parent.elements.length - 1) ||
+								(parent?.type === 'ObjectExpression' &&
+									parent.properties.indexOf(node) === parent.properties.length - 1);
+
+							if (is_last_in_body) {
+								// Special case: There can be multiple trailing comments after the last node in a block,
+								// and they can be separated by newlines
+								let end = node.end;
+
+								while (comments.length) {
+									const comment = comments[0];
+									if (parent && comment.start >= parent.end) break;
+
+									(node.trailingComments ||= []).push(comment);
+									comments.shift();
+									end = comment.end;
+								}
+							} else if (node.end <= comments[0].start && /^[,) \t]*$/.test(slice)) {
+								node.trailingComments = [/** @type {CommentWithLocation} */ (comments.shift())];
+							}
+						}
+					}
+				},
+			});
+
+			// Special case: Trailing comments after the root node (which can only happen for expression tags or for Program nodes).
+			// Adding them ensures that we can later detect the end of the expression tag correctly.
+			if (comments.length > 0 && (comments[0].start >= ast.end || ast.type === 'Program')) {
+				debugger;
+				(ast.trailingComments ||= []).push(...comments.splice(0));
+			}
+		},
+	};
+}
+
 export function parse(source) {
 	const comments = [];
+	const { onComment, add_comments } = get_comment_handlers(source, comments);
 	let ast;
 
 	try {
@@ -567,23 +679,13 @@ export function parse(source) {
 			sourceType: 'module',
 			ecmaVersion: 13,
 			locations: true,
-			onComment: (block, text, start, end, startLoc, endLoc) => {
-				comments.push({
-					type: block ? 'Block' : 'Line',
-					value: text,
-					start,
-					end,
-					loc: {
-						start: startLoc,
-						end: endLoc,
-					},
-				});
-			},
+			onComment,
 		});
 	} catch (e) {
 		throw e;
 	}
 
-	ast.comments = comments;
+	add_comments(ast);
+
 	return ast;
 }

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

@@ -115,7 +115,13 @@ const visitors = {
 		if (!context.state.to_ts && node.importKind === 'type') {
 			return b.empty;
 		}
-		return context.next();
+
+		return {
+			...node,
+			specifiers: node.specifiers
+				.filter((spec) => spec.importKind !== 'type')
+				.map((spec) => context.visit(spec.local)),
+		};
 	},
 
 	CallExpression(node, context) {
@@ -1168,6 +1174,8 @@ function join_template(items) {
 function normalize_child(node, normalized) {
 	if (node.type === 'EmptyStatement') {
 		return;
+	} else if (node.type === 'Element' && node.id.type === 'Identifier' && node.id.name === 'style') {
+		return;
 	} else {
 		normalized.push(node);
 	}
@@ -1561,9 +1569,7 @@ export function transform(filename, source, analysis, to_ts) {
 		to_ts,
 	};
 
-	const program = /** @type {ESTree.Program} */ (
-		walk((analysis.ast), state, visitors)
-	);
+	const program = /** @type {ESTree.Program} */ (walk(analysis.ast, state, visitors));
 
 	for (const hoisted of state.hoisted) {
 		program.body.unshift(hoisted);

package/src/runtime/index.js

@@ -40,6 +40,8 @@ export { flush_sync as flushSync, untrack, deferred } from './internal/client/ru
 
 export { RippleArray } from './array.js';
 
+export { RippleSet } from './set.js';
+
 export { keyed } from './internal/client/for.js';
 
 export { user_effect as effect } from './internal/client/blocks.js';

package/src/runtime/set.js

@@ -0,0 +1,178 @@
+import { get, increment, scope, set, tracked } from './internal/client/runtime.js';
+
+const introspect_methods = [
+	'entries',
+	'forEach',
+	'keys',
+	'values',
+	Symbol.iterator
+];
+
+const compare_other_methods = [
+	'isDisjointFrom',
+	'isSubsetOf',
+	'isSupersetOf',
+];
+
+const new_other_methods = [
+	'difference',
+	'intersection',
+	'symmetricDifference',
+	'union',
+];
+
+let init = false;
+
+export class RippleSet extends Set {
+	#tracked_size;
+	#tracked_items = new Map();
+
+	constructor(iterable) {
+		super();
+
+		var block = scope();
+
+		if (iterable) {
+			for (var item of iterable) {
+				super.add(item);
+				this.#tracked_items.set(item, tracked(0, block));
+			}
+		}
+
+		this.#tracked_size = tracked(this.size, block);
+
+		if (!init) {
+			init = true;
+			this.#init();
+		}
+	}
+
+	#init() {
+		var proto = RippleSet.prototype;
+		var set_proto = Set.prototype;
+
+		for (const method of introspect_methods) {
+			if (!(method in set_proto)) {
+				continue;
+			}
+
+			proto[method] = function (...v) {
+				this.$size;
+
+				return set_proto[method].apply(this, v);
+			};
+		}
+
+		for (const method of compare_other_methods) {
+			if (!(method in set_proto)) {
+				continue;
+			}
+
+			proto[method] = function (other, ...v) {
+				this.$size;
+
+				if (other instanceof RippleSet) {
+					other.$size;
+				}
+
+				return set_proto[method].apply(this, [other, ...v]);
+			};
+		}
+
+		for (const method of new_other_methods) {
+			if (!(method in set_proto)) {
+				continue;
+			}
+
+			proto[method] = function (other, ...v) {
+				this.$size;
+
+				if (other instanceof RippleSet) {
+					other.$size;
+				}
+
+				return new RippleSet(
+					set_proto[method].apply(this, [other, ...v])
+				);
+			};
+		}
+	}
+
+	add(value) {
+		var block = scope();
+
+		if (!super.has(value)) {
+			super.add(value);
+			this.#tracked_items.set(value, tracked(0, block));
+			set(this.#tracked_size, this.size, block);
+		}
+
+		return this;
+	}
+
+	delete(value) {
+		var block = scope();
+
+		if (super.has(value)) {
+			super.delete(value);
+			var t = this.#tracked_items.get(value);
+
+			if (t) {
+				increment(t, block);
+			}
+
+			this.#tracked_items.delete(value);
+			set(this.#tracked_size, this.size, block);
+
+			return true;
+		}
+
+		return false;
+	}
+
+	has(value) {
+		var has = super.has(value);
+		var tracked_items = this.#tracked_items;
+		var t = tracked_items.get(value);
+
+		if (t === undefined) {
+			if (!has) {
+				// If the value doesn't exist, track the size in case it's added later
+				// but don't create tracked entries willy-nilly to track all possible values
+				this.$size;
+
+				return false;
+			}
+
+			t = tracked(0, block);
+			tracked_items.set(value, t);
+		}
+
+		get(t);
+		return has;
+	}
+
+	clear() {
+		var block = scope();
+
+		if (this.size > 0) {
+			for (var [value, t] of this.#tracked_items) {
+				increment(t, block);
+			}
+
+			super.clear();
+			this.#tracked_items.clear();
+			set(this.#tracked_size, 0, block);
+		}
+	}
+
+	get $size() {
+		return get(this.#tracked_size);
+	}
+
+	toJSON() {
+		this.$size;
+
+		return [...this];
+	}
+}

package/tests/set.test.ripple

@@ -0,0 +1,99 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, RippleSet } from 'ripple';
+
+describe('RippleSet', () => {
+  let container;
+
+  function render(component) {
+    mount(component, {
+      target: container
+    });
+  }
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('handles add and delete operations', () => {
+    component SetTest() {
+      let items = new RippleSet([1, 2, 3]);
+
+      <button onClick={() => items.add(4)}>{'add'}</button>
+      <button onClick={() => items.delete(2)}>{'delete'}</button>
+      <Child items={items} />
+    }
+
+    component Child({ items }) {
+      <pre>{JSON.stringify(items)}</pre>
+      <pre>{items.$size}</pre>
+    }
+
+    render(SetTest);
+
+    const addButton = container.querySelectorAll('button')[0];
+    const deleteButton = container.querySelectorAll('button')[1];
+
+    addButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+
+    deleteButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,3,4]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+  });
+
+  it('handles clear operation', () => {
+    component SetTest() {
+      let items = new RippleSet([1, 2, 3]);
+
+      <button onClick={() => items.clear()}>{'clear'}</button>
+      <Child items={items} />
+    }
+
+    component Child({ items }) {
+      <pre>{JSON.stringify(items)}</pre>
+      <pre>{items.$size}</pre>
+    }
+
+    render(SetTest);
+
+    const clearButton = container.querySelector('button');
+
+    clearButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+  });
+
+  it('handles has operation', () => {
+    component SetTest() {
+      let items = new RippleSet([1, 2, 3]);
+      let $hasValue = items.has(2);
+
+      <button onClick={() => items.delete(2)}>{'delete'}</button>
+      <pre>{JSON.stringify($hasValue)}</pre>
+    }
+
+    render(SetTest);
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('true');
+
+    const deleteButton = container.querySelectorAll('button')[0];
+
+    deleteButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('false');
+  });
+});

package/types/index.d.ts

@@ -38,3 +38,15 @@ export type Context<T> = {
 };
 
 export declare function createContext<T>(initialValue: T): Context<T>;
+
+export class RippleSet<T> extends Set<T> {
+  readonly $size: number;
+  isDisjointFrom(other: RippleSet<T> | Set<T>): boolean;
+  isSubsetOf(other: RippleSet<T> | Set<T>): boolean;
+  isSupersetOf(other: RippleSet<T> | Set<T>): boolean;
+  difference(other: RippleSet<T> | Set<T>): RippleSet<T>;
+  intersection(other: RippleSet<T> | Set<T>): RippleSet<T>;
+  symmetricDifference(other: RippleSet<T> | Set<T>): RippleSet<T>;
+  union(other: RippleSet<T> | Set<T>): RippleSet<T>;
+  toJSON(): T[];
+}