aberdeen 1.0.7 → 1.0.10

package/html-to-aberdeen

@@ -0,0 +1,354 @@
+#!/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');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aberdeen",
-  "version": "1.0.7",
+  "version": "1.0.10",
   "author": "Frank van Viegen",
   "main": "dist-min/aberdeen.js",
   "devDependencies": {

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
@@ -111,9 +114,9 @@ function partToStr(part: number | string): string {
 		 * 1 - separator between string array items
 		 * 65535 - for compatibility
 		 */
-		result += String.fromCharCode(
+		result = String.fromCharCode(
 			negative ? 65534 - (num % 65533) : 2 + (num % 65533),
-		);
+		) + result;
 		num = Math.floor(num / 65533);
 	}
 	// Prefix the number of digits, counting down from 128 for negative and up for positive
@@ -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();
@@ -594,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);
 
@@ -803,7 +823,7 @@ function subscribe(
 }
 
 export function onEach<T>(
-	target: Array<undefined | T>,
+	target: ReadonlyArray<undefined | T>,
 	render: (value: T, index: number) => void,
 	makeKey?: (value: T, key: any) => SortKeyType,
 ): void;
@@ -1564,9 +1584,9 @@ const SPECIAL_PROPS: { [key: string]: (value: any) => void } = {
 		addNode(document.createTextNode(value));
 	},
 	element: (value: any) => {
-		if (!(value instanceof Node))
-			throw new Error(`Unexpected element-argument: ${JSON.parse(value)}`);
+		console.log("Aberdeen: $({element: myElement}) is deprecated, use $(myElement) instead");
 		addNode(value);
+		SPECIAL_PROPS.element = addNode; // Avoid the console.log next time
 	},
 };
 
@@ -1603,7 +1623,7 @@ const SPECIAL_PROPS: { [key: string]: (value: any) => void } = {
  *      This is often used together with {@link ref}, in order to use properties other than `.value`.
  *   - `{text: string|number}`: Add the value as a `TextNode` to the *current* element.
  *   - `{html: string}`: Add the value as HTML to the *current* element. This should only be used in exceptional situations. And of course, beware of XSS.
- *   - `{element: Node}`: Add a pre-existing HTML `Node` to the *current* element.
+   - `Node`: If a DOM Node (Element or TextNode) is passed in, it is added as a child to the *current* element. If the Node is an Element, it becomes the new *current* element for the rest of this `$` function execution.
  *
  * @returns The most inner DOM element that was created (not counting text nodes nor elements created by content functions),
  *          or undefined if no elements were created.
@@ -1699,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);
@@ -1707,18 +1734,35 @@ 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;
 			}
 		} else if (typeof arg === "object") {
 			if (arg.constructor !== Object) {
-				err = `Unexpected argument: ${arg}`;
-				break;
-			}
-			for (const key in arg) {
-				const val = arg[key];
-				applyArg(key, val);
+				if (arg instanceof Node) {
+					addNode(arg);
+					if (arg instanceof Element) {
+						// If it's an Element, it may contain children, so we make it the current scope
+						if (!savedCurrentScope) savedCurrentScope = currentScope;
+						currentScope = new ChainedScope(arg, true);
+						currentScope.lastChild = arg.lastChild || undefined;
+					}
+				} else {
+					err = `Unexpected argument: ${arg}`;
+					break;
+				}
+			} else {
+				for (const key in arg) {
+					const val = arg[key];
+					applyArg(key, val);
+				}
 			}
 		} else if (typeof arg === "function") {
 			new RegularScope(currentScope.parentElement, arg);