aberdeen 1.0.6 → 1.0.8

package/src/aberdeen.ts

@@ -1,4 +1,5 @@
 import { ReverseSortedSet } from "./helpers/reverseSortedSet.js";
+import type { ReverseSortedSetPointer } from "./helpers/reverseSortedSet.js";
 
 /*
  * QueueRunner
@@ -9,9 +10,11 @@ import { ReverseSortedSet } from "./helpers/reverseSortedSet.js";
 interface QueueRunner {
 	prio: number; // Higher values have higher priority
 	queueRun(): void;
+
+	[ptr: ReverseSortedSetPointer]: QueueRunner;
 }
 
-let sortedQueue: ReverseSortedSet<QueueRunner> | undefined; // When set, a runQueue is scheduled or currently running.
+let sortedQueue: ReverseSortedSet<QueueRunner, "prio"> | undefined; // When set, a runQueue is scheduled or currently running.
 let runQueueDepth = 0; // Incremented when a queue event causes another queue event to be added. Reset when queue is empty. Throw when >= 42 to break (infinite) recursion.
 let topRedrawScope: Scope | undefined; // The scope that triggered the current redraw. Elements drawn at this scope level may trigger 'create' animations.
 
@@ -28,7 +31,7 @@ export type DatumType =
 
 function queue(runner: QueueRunner) {
 	if (!sortedQueue) {
-		sortedQueue = new ReverseSortedSet<QueueRunner>("prio");
+		sortedQueue = new ReverseSortedSet<QueueRunner, "prio">("prio");
 		setTimeout(runQueue, 0);
 	} else if (!(runQueueDepth & 1)) {
 		runQueueDepth++; // Make it uneven
@@ -81,7 +84,7 @@ export function runQueue(): void {
 	sortedQueue = undefined;
 	runQueueDepth = 0;
 	time = Date.now() - time;
-	if (time > 1) console.debug(`Aberdeen queue took ${time}ms`);
+	if (time > 9) console.debug(`Aberdeen queue took ${time}ms`);
 }
 
 /**
@@ -168,6 +171,8 @@ abstract class Scope implements QueueRunner {
 	// order of the source code.
 	prio: number = --lastPrio;
 
+	[ptr: ReverseSortedSetPointer]: this;
+
 	abstract onChange(index: any, newData: DatumType, oldData: DatumType): void;
 	abstract queueRun(): void;
 
@@ -198,6 +203,9 @@ abstract class ContentScope extends Scope {
 	// be for child scopes, subscriptions as well as `clean(..)` hooks.
 	cleaners: Array<{ delete: (scope: Scope) => void } | (() => void)>;
 
+	// Whether this scope is within an SVG namespace context
+	inSvgNamespace: boolean = false;
+
 	constructor(
 		cleaners: Array<{ delete: (scope: Scope) => void } | (() => void)> = [],
 	) {
@@ -264,6 +272,10 @@ class ChainedScope extends ContentScope {
 		useParentCleaners = false,
 	) {
 		super(useParentCleaners ? currentScope.cleaners : []);
+		
+		// Inherit SVG namespace state from current scope
+		this.inSvgNamespace = currentScope.inSvgNamespace;
+		
 		if (parentElement === currentScope.parentElement) {
 			// If `currentScope` is not actually a ChainedScope, prevSibling will be undefined, as intended
 			this.prevSibling = currentScope.getChildPrevSibling();
@@ -334,6 +346,10 @@ class MountScope extends ContentScope {
 		public renderer: () => any,
 	) {
 		super();
+		
+		// Inherit SVG namespace state from current scope
+		this.inSvgNamespace = currentScope.inSvgNamespace;
+		
 		this.redraw();
 		currentScope.cleaners.push(this);
 	}
@@ -442,7 +458,9 @@ class SetArgScope extends ChainedScope {
 	}
 }
 
-let immediateQueue: ReverseSortedSet<Scope> = new ReverseSortedSet("prio");
+let immediateQueue: ReverseSortedSet<Scope, "prio"> = new ReverseSortedSet(
+	"prio",
+);
 
 class ImmediateScope extends RegularScope {
 	onChange(index: any, newData: DatumType, oldData: DatumType) {
@@ -491,9 +509,8 @@ class OnEachScope extends Scope {
 	byIndex: Map<any, OnEachItemScope> = new Map();
 
 	/** The reverse-ordered list of item scopes, not including those for which makeSortKey returned undefined. */
-	sortedSet: ReverseSortedSet<OnEachItemScope> = new ReverseSortedSet(
-		"sortKey",
-	);
+	sortedSet: ReverseSortedSet<OnEachItemScope, "sortKey"> =
+		new ReverseSortedSet("sortKey");
 
 	/** Indexes that have been created/removed and need to be handled in the next `queueRun`. */
 	changedIndexes: Set<any> = new Set();
@@ -563,6 +580,8 @@ class OnEachScope extends Scope {
 			scope.delete();
 		}
 
+		sortedQueue?.remove(this); // This is very fast and O(1) when not queued
+
 		// Help garbage collection:
 		this.byIndex.clear();
 		setTimeout(() => {
@@ -592,6 +611,9 @@ class OnEachItemScope extends ContentScope {
 	) {
 		super();
 		this.parentElement = parent.parentElement;
+		
+		// Inherit SVG namespace state from current scope
+		this.inSvgNamespace = currentScope.inSvgNamespace;
 
 		this.parent.byIndex.set(this.itemIndex, this);
 
@@ -1697,7 +1719,14 @@ export function $(
 				err = `Tag '${arg}' cannot contain space`;
 				break;
 			} else {
-				result = document.createElement(arg);
+				// Determine which namespace to use for element creation
+				const useNamespace = currentScope.inSvgNamespace || arg === 'svg';
+				if (useNamespace) {
+					result = document.createElementNS('http://www.w3.org/2000/svg', arg);
+				} else {
+					result = document.createElement(arg);
+				}
+				
 				if (classes) result.className = classes.replaceAll(".", " ");
 				if (text) result.textContent = text;
 				addNode(result);
@@ -1705,6 +1734,12 @@ export function $(
 					savedCurrentScope = currentScope;
 				}
 				const newScope = new ChainedScope(result, true);
+				
+				// If we're creating an SVG element, set the SVG namespace flag for child scopes
+				if (arg === 'svg') {
+					newScope.inSvgNamespace = true;
+				}
+				
 				newScope.lastChild = result.lastChild || undefined;
 				if (topRedrawScope === currentScope) topRedrawScope = newScope;
 				currentScope = newScope;

package/src/helpers/reverseSortedSet.ts

@@ -1,4 +1,9 @@
-type Item<T> = T & { [idx: symbol]: Item<T> };
+// Meta-data is saved in-place on ReverseSorted items.
+// - Items in the set should indicate they support {[ptr: ReverseSortedSetPointer]: SELF}
+export type ReverseSortedSetPointer = symbol;
+
+// ReverseSortedSet saves the skip links for all required levels on the object itself
+type SkipItem<T> = { [idx: ReverseSortedSetPointer]: T };
 
 /**
  * A set-like collection of objects that can do iteration sorted by a specified index property.
@@ -8,11 +13,11 @@ type Item<T> = T & { [idx: symbol]: Item<T> };
  * It's implemented as a skiplist, maintaining all meta-data as part of the objects that it
  * is tracking, for performance.
  */
-export class ReverseSortedSet<T extends object> {
+export class ReverseSortedSet<T extends SkipItem<T>, KeyPropT extends keyof T> {
 	// A fake item, that is not actually T, but *does* contain symbols pointing at the first item for each level.
-	private tail: Item<T>;
+	private tail: SkipItem<T>;
 	// As every SkipList instance has its own symbols, an object can be included in more than one SkipList.
-	private symbols: symbol[];
+	private symbols: ReverseSortedSetPointer[];
 
 	/**
 	 * Create an empty SortedSet.
@@ -21,8 +26,8 @@ export class ReverseSortedSet<T extends object> {
 	 * using `<` will be done on this property, so it should probably be a number or a string (or something that
 	 * has a useful toString-conversion).
 	 */
-	constructor(private keyProp: keyof T) {
-		this.tail = {} as Item<T>;
+	constructor(private keyProp: KeyPropT) {
+		this.tail = {} as SkipItem<T>;
 		this.symbols = [Symbol(0)];
 	}
 
@@ -54,15 +59,15 @@ export class ReverseSortedSet<T extends object> {
 		const keyProp = this.keyProp;
 		const key = item[keyProp];
 
-		let prev: Item<T> | undefined;
-		let current: Item<T> = this.tail;
+		// prev is always a complete T, current might be tail only contain pointers
+		let prev: T | undefined;
+		let current: SkipItem<T> = this.tail;
 		for (let l = this.symbols.length - 1; l >= 0; l--) {
 			const symbol = this.symbols[l];
-			while ((prev = current[symbol] as Item<T>) && prev[keyProp] > key)
-				current = prev;
+			while ((prev = current[symbol]) && prev[keyProp] > key) current = prev;
 			if (l < level) {
-				(item as any)[symbol] = current[symbol];
-				(current as any)[symbol] = item;
+				(item as SkipItem<T>)[symbol] = current[symbol];
+				current[symbol] = item;
 			}
 		}
 
@@ -106,13 +111,15 @@ export class ReverseSortedSet<T extends object> {
 	 *
 	 * Time complexity: O(log n)
 	 */
-	get(indexValue: string | number): T | undefined {
+	get(indexValue: T[KeyPropT]): T | undefined {
 		const keyProp = this.keyProp;
-		let current = this.tail;
-		let prev: Item<T> | undefined;
+
+		// prev is always a complete T, current might be tail only contain pointers
+		let prev: T | undefined;
+		let current: SkipItem<T> = this.tail;
 		for (let l = this.symbols.length - 1; l >= 0; l--) {
 			const symbol = this.symbols[l];
-			while ((prev = current[symbol] as Item<T>) && prev[keyProp] > indexValue)
+			while ((prev = current[symbol]) && prev[keyProp] > indexValue)
 				current = prev;
 		}
 		return current[this.symbols[0]]?.[keyProp] === indexValue
@@ -125,10 +132,10 @@ export class ReverseSortedSet<T extends object> {
 	 */
 	*[Symbol.iterator](): IterableIterator<T> {
 		const symbol = this.symbols[0];
-		let node: Item<T> | undefined = this.tail[symbol] as Item<T>;
+		let node = this.tail[symbol];
 		while (node) {
 			yield node;
-			node = node[symbol] as Item<T> | undefined;
+			node = node[symbol];
 		}
 	}
 
@@ -140,7 +147,7 @@ export class ReverseSortedSet<T extends object> {
 	 * Time complexity: O(1)
 	 */
 	prev(item: T): T | undefined {
-		return (item as Item<T>)[this.symbols[0]];
+		return item[this.symbols[0]];
 	}
 
 	/**
@@ -156,19 +163,15 @@ export class ReverseSortedSet<T extends object> {
 		const keyProp = this.keyProp;
 		const prop = item[keyProp];
 
-		let prev: Item<T> | undefined;
-		let current: Item<T> = this.tail;
-
+		// prev is always a complete T, current might be tail only contain pointers
+		let prev: T | undefined;
+		let current: SkipItem<T> = this.tail;
 		for (let l = this.symbols.length - 1; l >= 0; l--) {
 			const symbol = this.symbols[l];
-			while (
-				(prev = current[symbol] as Item<T>) &&
-				prev[keyProp] >= prop &&
-				prev !== item
-			)
+			while ((prev = current[symbol]) && prev[keyProp] >= prop && prev !== item)
 				current = prev;
 			if (prev === item) {
-				(current as any)[symbol] = prev[symbol];
+				current[symbol] = prev[symbol];
 				delete prev[symbol];
 			}
 		}
@@ -183,15 +186,15 @@ export class ReverseSortedSet<T extends object> {
 	 */
 	clear(): void {
 		const symbol = this.symbols[0];
-		let current: Item<T> | undefined = this.tail;
+		let current = this.tail;
 		while (current) {
-			const prev = current[symbol] as Item<T> | undefined;
+			const prev = current[symbol];
 			for (const symbol of this.symbols) {
 				if (!(symbol in current)) break;
 				delete current[symbol];
 			}
 			current = prev;
 		}
-		this.tail = {} as Item<T>;
+		this.tail = {};
 	}
 }

package/html-to-aberdeen

@@ -1,354 +0,0 @@
-#!/usr/bin/env node
-
-// WARNING: This script was created by Claude Sonnet 3.7, and hasn't
-// received any human code review. It seems to do the job though!
-
-export function parseHTML(html) {
-  const result = {
-    body: []
-  };
-  
-  let currentPosition = 0;
-  let currentParent = result;
-  const stack = [];
-  
-  while (currentPosition < html.length) {
-    // Skip whitespace
-    while (currentPosition < html.length && /\s/.test(html[currentPosition])) {
-      currentPosition++;
-    }
-    
-    if (currentPosition >= html.length) break;
-    
-    // Check for comment
-    if (html.substring(currentPosition, currentPosition + 4) === '<!--') {
-      const endComment = html.indexOf('-->', currentPosition);
-      if (endComment === -1) break;
-      
-      const commentContent = html.substring(currentPosition + 4, endComment);
-      currentParent.children = currentParent.children || [];
-      currentParent.children.push({
-        type: 'comment',
-        content: commentContent
-      });
-      
-      currentPosition = endComment + 3;
-      continue;
-    }
-    
-    // Check for tag
-    if (html[currentPosition] === '<') {
-      // Check if it's a closing tag
-      if (html[currentPosition + 1] === '/') {
-        const endTag = html.indexOf('>', currentPosition);
-        if (endTag === -1) break;
-        
-        const tagName = html.substring(currentPosition + 2, endTag).trim().toLowerCase();
-        
-        // Pop from stack
-        if (stack.length > 0) {
-          currentParent = stack.pop();
-        }
-        
-        currentPosition = endTag + 1;
-        continue;
-      }
-      
-      // It's an opening tag
-      const endTag = html.indexOf('>', currentPosition);
-      if (endTag === -1) break;
-      
-      const selfClosing = html[endTag - 1] === '/';
-      const tagContent = html.substring(currentPosition + 1, selfClosing ? endTag - 1 : endTag).trim();
-      const spaceIndex = tagContent.search(/\s/);
-      
-      let tagName, attributesStr;
-      if (spaceIndex === -1) {
-        tagName = tagContent;
-        attributesStr = '';
-      } else {
-        tagName = tagContent.substring(0, spaceIndex);
-        attributesStr = tagContent.substring(spaceIndex + 1);
-      }
-      
-      tagName = tagName.toLowerCase();
-      
-      // Parse attributes
-      const attributes = [];
-      let attrMatch;
-      const attrRegex = /([\w-]+)(?:=(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
-      
-      while ((attrMatch = attrRegex.exec(attributesStr)) !== null) {
-        const name = attrMatch[1];
-        const value = attrMatch[2] || attrMatch[3] || attrMatch[4] || '';
-        attributes.push({ name, value });
-      }
-      
-      const newElement = {
-        type: 'element',
-        tagName,
-        attributes,
-        children: []
-      };
-      
-      // Add to current parent
-      if (currentParent === result) {
-        currentParent.body = currentParent.body || [];
-        currentParent.body.push(newElement);
-      } else {
-        currentParent.children = currentParent.children || [];
-        currentParent.children.push(newElement);
-      }
-      
-      if (!selfClosing && !['br', 'hr', 'img', 'input', 'link', 'meta'].includes(tagName)) {
-        stack.push(currentParent);
-        currentParent = newElement;
-      }
-      
-      currentPosition = endTag + 1;
-      continue;
-    }
-    
-    // It's text content
-    let endText = html.indexOf('<', currentPosition);
-    if (endText === -1) endText = html.length;
-    
-    const textContent = html.substring(currentPosition, endText);
-    if (textContent.trim()) {
-      if (currentParent === result) {
-        currentParent.body = currentParent.body || [];
-        currentParent.body.push({
-          type: 'text',
-          content: textContent
-        });
-      } else {
-        currentParent.children = currentParent.children || [];
-        currentParent.children.push({
-          type: 'text',
-          content: textContent
-        });
-      }
-    }
-    
-    currentPosition = endText;
-  }
-  
-  return result;
-}
-
-// Read from stdin
-let html = '';
-process.stdin.setEncoding('utf8');
-process.stdin.on('data', (chunk) => {
-  html += chunk;
-});
-process.stdin.on('end', () => {
-  // Convert HTML to Aberdeen code
-  const aberdeenCode = convertHTMLToAberdeen(html);
-  
-  // Output to stdout
-  process.stdout.write(aberdeenCode);
-});
-
-// Main conversion function
-function convertHTMLToAberdeen(html) {
-  // Parse HTML into a simple AST
-  const ast = parseHTML(html);
-  
-  // Generate the Aberdeen code
-  let aberdeenCode = ``;
-  
-  // Process the body's children
-  for (const node of ast.body) {
-    aberdeenCode += processNode(node);
-  }
-  
-  return aberdeenCode;
-}
-
-// Process a node and return Aberdeen code
-function processNode(node, indentLevel = 0) {
-  const indent = '    '.repeat(indentLevel);
-  
-  if (node.type === 'text') {
-    const text = node.content.trim();
-    if (text) {
-      return `${indent}$(':${escapeString(text)}');\n`;
-    }
-    return '';
-  }
-  
-  if (node.type === 'comment') {
-    return `${indent}// ${node.content.trim()}\n`;
-  }
-  
-  if (node.type === 'element') {
-    // Get tag name
-    const tagName = node.tagName.toLowerCase();
-    
-    // Get classes
-    const classAttr = node.attributes.find(attr => attr.name === 'class');
-    const classes = classAttr 
-      ? classAttr.value.split(/\s+/).filter(Boolean).join('.')
-      : '';
-    
-    // Get other attributes
-    const attributes = {};
-    for (const attr of node.attributes) {
-      if (attr.name !== 'class') {
-        attributes[attr.name] = attr.value;
-      }
-    }
-    
-    // Check if node has only text content
-    const hasOnlyTextContent = 
-      node.children.length === 1 && 
-      node.children[0].type === 'text' && 
-      node.children[0].content.trim();
-    
-    // Build the tag string
-    let tagString = tagName;
-    if (classes) {
-      tagString += `.${classes}`;
-    }
-    
-    if (hasOnlyTextContent) {
-      tagString += `:${escapeString(node.children[0].content.trim())}`;
-    }
-    
-    let result = `${indent}$('${tagString}'`;
-    
-    // Add attributes if any
-    if (Object.keys(attributes).length > 0) {
-      result += `, ${formatAttributes(attributes, indent)}`;
-    }
-    
-    // Process child nodes
-    const childNodes = node.children.filter(child => 
-      child.type === 'element' || 
-      (child.type === 'text' && child.content.trim())
-    );
-    
-    if (childNodes.length > 0 && !hasOnlyTextContent) {
-      // Get all descendants in a single-child chain
-      const singleChildChain = getSingleChildChain(node);
-      
-      if (singleChildChain.length > 1) {
-        // We have a chain of single children, add them all on the same line
-        for (let i = 1; i < singleChildChain.length; i++) {
-          const chainNode = singleChildChain[i];
-          
-          // Get tag name
-          const chainTagName = chainNode.tagName.toLowerCase();
-          
-          // Get classes
-          const chainClassAttr = chainNode.attributes.find(attr => attr.name === 'class');
-          const chainClasses = chainClassAttr 
-            ? chainClassAttr.value.split(/\s+/).filter(Boolean).join('.')
-            : '';
-          
-          // Build the tag string
-          let chainTagString = chainTagName;
-          if (chainClasses) {
-            chainTagString += `.${chainClasses}`;
-          }
-          
-          // Check if node has only text content
-          const chainHasOnlyTextContent = 
-            chainNode.children.length === 1 && 
-            chainNode.children[0].type === 'text' && 
-            chainNode.children[0].content.trim();
-          
-          if (chainHasOnlyTextContent) {
-            chainTagString += `:${escapeString(chainNode.children[0].content.trim())}`;
-          }
-          
-          result += `, '${chainTagString}'`;
-          
-          // Add attributes if any
-          const chainAttributes = {};
-          for (const attr of chainNode.attributes) {
-            if (attr.name !== 'class') {
-              chainAttributes[attr.name] = attr.value;
-            }
-          }
-          
-          if (Object.keys(chainAttributes).length > 0) {
-            result += `, ${formatAttributes(chainAttributes, indent)}`;
-          }
-        }
-        
-        // Check if the last node in the chain has any non-text children
-        const lastNode = singleChildChain[singleChildChain.length - 1];
-        const lastNodeChildren = lastNode.children.filter(child => 
-          child.type === 'element' || 
-          (child.type === 'text' && child.content.trim() && 
-           !(lastNode.children.length === 1 && lastNode.children[0].type === 'text'))
-        );
-        
-        if (lastNodeChildren.length > 0) {
-          result += `, () => {\n`;
-          for (const child of lastNodeChildren) {
-            result += processNode(child, indentLevel + 1);
-          }
-          result += `${indent}}`;
-        }
-      } else {
-        // Multiple children, use a content function
-        result += `, () => {\n`;
-        for (const child of childNodes) {
-          result += processNode(child, indentLevel + 1);
-        }
-        result += `${indent}}`;
-      }
-    }
-    
-    result += `);\n`;
-    return result;
-  }
-  
-  return '';
-}
-
-// Get a chain of nodes where each node has exactly one element child
-function getSingleChildChain(node) {
-  const chain = [node];
-  let current = node;
-  
-  while (true) {
-    // Get element children
-    const elementChildren = current.children.filter(child => child.type === 'element');
-    
-    // If there's exactly one element child, add it to the chain
-    if (elementChildren.length === 1) {
-      current = elementChildren[0];
-      chain.push(current);
-    } else {
-      break;
-    }
-  }
-  
-  return chain;
-}
-
-// Format attributes object with proper indentation
-function formatAttributes(attributes, indent) {
-    const attrLines = JSON.stringify(attributes, null, 4).split('\n');
-    
-    if (attrLines.length <= 1) {
-        return JSON.stringify(attributes);
-    }
-    
-    return attrLines.map((line, i) => {
-        if (i === 0) return line;
-        return indent + line;
-    }).join('\n');
-}
-
-// Escape special characters in strings
-function escapeString(str) {
-  return str
-    .replace(/\\/g, '\\\\')
-    .replace(/'/g, "\\'")
-    .replace(/\n/g, '\\n');
-}