aberdeen 1.1.0 → 1.3.0

package/src/aberdeen.ts

@@ -138,7 +138,7 @@ function partToStr(part: number | string): string {
  * ]);
  *
  * onEach(users, (user) => {
- *     $(`p:${user.name}: ${user.score}`);
+ *     $(`p#${user.name}: ${user.score}`);
  * }, (user) => invertString(user.name)); // Reverse alphabetic order
  * ```
  *
@@ -166,7 +166,9 @@ abstract class Scope implements QueueRunner {
 
 	[ptr: ReverseSortedSetPointer]: this;
 
-	abstract onChange(index: any): void;
+	onChange(index: any): void {
+		queue(this);
+	}
 	abstract queueRun(): void;
 
 	abstract getLastNode(): Node | undefined;
@@ -196,8 +198,8 @@ 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;
+	abstract svg: boolean;
+	abstract el: Element;
 
 	constructor(
 		cleaners: Array<{ delete: (scope: Scope) => void } | (() => void)> = [],
@@ -211,8 +213,6 @@ abstract class ContentScope extends Scope {
 	// Should be subclassed in most cases..
 	redraw() {}
 
-	abstract parentElement: Element;
-
 	getLastNode(): Node | undefined {
 		return findLastNodeInPrevSiblings(this.lastChild);
 	}
@@ -260,16 +260,15 @@ class ChainedScope extends ContentScope {
 
 	constructor(
 		// The parent DOM element we'll add our child nodes to.
-		public parentElement: Element,
+		public el: Element,
+		// Whether this scope is within an SVG namespace context
+		public svg: boolean,
 		// When true, we share our 'cleaners' list with the parent scope.
 		useParentCleaners = false,
 	) {
 		super(useParentCleaners ? currentScope.cleaners : []);
 		
-		// Inherit SVG namespace state from current scope
-		this.inSvgNamespace = currentScope.inSvgNamespace;
-		
-		if (parentElement === currentScope.parentElement) {
+		if (el === currentScope.el) {
 			// If `currentScope` is not actually a ChainedScope, prevSibling will be undefined, as intended
 			this.prevSibling = currentScope.getChildPrevSibling();
 			currentScope.lastChild = this;
@@ -300,12 +299,13 @@ class ChainedScope extends ContentScope {
  */
 class RegularScope extends ChainedScope {
 	constructor(
-		parentElement: Element,
+		el: Element,
+		svg: boolean,
 		// The function that will be reactively called. Elements it creates using `$` are
 		// added to the appropriate position within `parentElement`.
 		public renderer: () => any,
 	) {
-		super(parentElement);
+		super(el, svg);
 
 		// Do the initial run
 		this.redraw();
@@ -325,23 +325,23 @@ class RegularScope extends ChainedScope {
 }
 
 class RootScope extends ContentScope {
-	parentElement = document.body;
+	el = document.body;
+	svg = false;
 	getPrecedingNode(): Node | undefined {
 		return undefined;
 	}
 }
 
 class MountScope extends ContentScope {
+	svg: boolean;
 	constructor(
 		// The parent DOM element we'll add our child nodes to
-		public parentElement: Element,
+		public el: Element,
 		// The function that
 		public renderer: () => any,
 	) {
 		super();
-		
-		// Inherit SVG namespace state from current scope
-		this.inSvgNamespace = currentScope.inSvgNamespace;
+		this.svg = el.namespaceURI === 'http://www.w3.org/2000/svg';
 		
 		this.redraw();
 		currentScope.cleaners.push(this);
@@ -408,11 +408,9 @@ class ResultScope<T> extends ChainedScope {
 	public result: ValueRef<T> = optProxy({ value: undefined });
 
 	constructor(
-		parentElement: Element,
 		public renderer: () => T,
 	) {
-		super(parentElement);
-
+		super(currentScope.el, currentScope.svg);
 		this.redraw();
 	}
 
@@ -435,18 +433,19 @@ class ResultScope<T> extends ChainedScope {
  */
 
 class SetArgScope extends ChainedScope {
+	public svg = false;
 	constructor(
-		parentElement: Element,
-		public key: string,
-		public target: { value: any },
+		el: Element,
+		private key: string,
+		private target: { value: any },
 	) {
-		super(parentElement);
+		super(el, el.namespaceURI === 'http://www.w3.org/2000/svg');
 		this.redraw();
 	}
 	redraw() {
 		const savedScope = currentScope;
 		currentScope = this;
-		applyArg(this.key, this.target.value);
+		applyArg(this.el, this.key, this.target.value);
 		currentScope = savedScope;
 	}
 }
@@ -454,7 +453,7 @@ class SetArgScope extends ChainedScope {
 /** @internal */
 class OnEachScope extends Scope {
 	// biome-ignore lint/correctness/noInvalidUseBeforeDeclaration: circular, as currentScope is initialized with a Scope
-	parentElement: Element = currentScope.parentElement;
+	parentElement: Element = currentScope.el;
 	prevSibling: Node | Scope | undefined;
 
 	/** The data structure we are iterating */
@@ -556,7 +555,8 @@ class OnEachScope extends Scope {
 /** @internal */
 class OnEachItemScope extends ContentScope {
 	sortKey: string | number | undefined; // When undefined, this scope is currently not showing in the list
-	public parentElement: Element;
+	public el: Element;
+	public svg: boolean;
 
 	constructor(
 		public parent: OnEachScope,
@@ -564,10 +564,10 @@ class OnEachItemScope extends ContentScope {
 		topRedraw: boolean,
 	) {
 		super();
-		this.parentElement = parent.parentElement;
+		this.el = parent.parentElement;
 		
 		// Inherit SVG namespace state from current scope
-		this.inSvgNamespace = currentScope.inSvgNamespace;
+		this.svg = currentScope.svg;
 
 		this.parent.byIndex.set(this.itemIndex, this);
 
@@ -711,8 +711,12 @@ class OnEachItemScope extends ContentScope {
 	}
 }
 
-function addNode(node: Node) {
-	const parentEl = currentScope.parentElement;
+function addNode(el: Element, node: Node) {
+	if (el !== currentScope.el) {
+		el.appendChild(node);
+		return;
+	}
+	const parentEl = currentScope.el;
 	const prevNode = currentScope.getInsertAfterNode();
 	parentEl.insertBefore(
 		node,
@@ -842,7 +846,7 @@ export function onEach<K extends string | number | symbol, T>(
  * const items = proxy(['apple', 'banana', 'cherry']);
  *
  * // Basic iteration
- * onEach(items, (item, index) => $(`li:${item} (#${index})`));
+ * onEach(items, (item, index) => $(`li#${item} (#${index})`));
  *
  * // Add a new item - the list updates automatically
  * setTimeout(() => items.push('durian'), 2000);
@@ -861,7 +865,7 @@ export function onEach<K extends string | number | symbol, T>(
  *
  * // Sort by name alphabetically
  * onEach(users, (user) => {
- *     $(`p:${user.name} (id=${user.id})`);
+ *     $(`p#${user.name} (id=${user.id})`);
  * }, (user) => [user.group, user.name]); // Sort by group, and within each group sort by name
  * ```
  *
@@ -873,8 +877,8 @@ export function onEach<K extends string | number | symbol, T>(
  * $('dl', () => {
  *     onEach(config, (value, key) => {
  *         if (key === 'showTips') return; // Don't render this one
- *         $('dt:'+key);
- *         $('dd:'+value);
+ *         $('dt#'+key);
+ *         $('dd#'+value);
  *     });
  * });
  *
@@ -921,9 +925,9 @@ const EMPTY = Symbol("empty");
  * // Reactively display a message if the items array is empty
  * $('div', () => {
  *     if (isEmpty(items)) {
- *         $('p', 'i:No items yet!');
+ *         $('p', 'i#No items yet!');
  *     } else {
- * 		   onEach(items, item=>$('p:'+item));
+ * 		   onEach(items, item=>$('p#'+item));
  *     }
  * });
  *
@@ -1056,7 +1060,7 @@ const objectHandler: ProxyHandler<any> = {
 		return true;
 	},
 	deleteProperty(target: any, prop: any) {
-		const old = target.hasOwnProperty(prop) ? target[prop] : undefined;
+		const old = target.hasOwnProperty(prop) ? target[prop] : EMPTY;
 		delete target[prop];
 		emit(target, prop, EMPTY, old);
 		return true;
@@ -1268,7 +1272,8 @@ function optProxy(value: any): any {
 	if (
 		typeof value !== "object" ||
 		!value ||
-		value[TARGET_SYMBOL] !== undefined
+		value[TARGET_SYMBOL] !== undefined ||
+		NO_COPY in value
 	) {
 		return value;
 	}
@@ -1289,6 +1294,25 @@ function optProxy(value: any): any {
 	return proxied;
 }
 
+/**
+ * When `proxy` is called with a Promise, the returned object has this shape.
+ */
+export interface PromiseProxy<T> {
+	/**
+	 * True if the promise is still pending, false if it has resolved or rejected.
+	 */
+	busy: boolean;
+	/**
+	 * If the promise has resolved, this contains the resolved value.
+	 */
+	value?: T;
+	/**
+	 * If the promise has rejected, this contains the rejection error.
+	 */
+	error?: any;
+}
+
+export function proxy<T extends any>(target: Promise<T>): PromiseProxy<T>;
 export function proxy<T extends any>(target: Array<T>): Array<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T >;
 export function proxy<T extends object>(target: T): T;
 export function proxy<T extends any>(target: T): ValueRef<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T>;
@@ -1304,6 +1328,10 @@ export function proxy<T extends any>(target: T): ValueRef<T extends number ? num
  *   property access and mutations, but otherwise works like the underlying data.
  * - Primitives (string, number, boolean, null, undefined) are wrapped in an object
  *   `{ value: T }` which is then proxied. Access the primitive via the `.value` property.
+ * - Promises are represented by proxied objects `{ busy: boolean, value?: T, error?: any }`.
+ *   Initially, `busy` is `true`. When the promise resolves, `value` is set and `busy`
+ *   is set to `false`. If the promise is rejected, `error` is set and `busy` is also
+ *   set to `false`.
  *
  * Use {@link unproxy} to get the original underlying data back.
  *
@@ -1347,6 +1375,21 @@ export function proxy<T extends any>(target: T): ValueRef<T extends number ? num
  * ```
  */
 export function proxy(target: TargetType): TargetType {
+	if (target instanceof Promise) {
+		const result: PromiseProxy<any> = optProxy({
+			busy: true,
+		});
+		target
+			.then((value) => {
+				result.value = value;
+				result.busy = false;
+			})
+			.catch((err) => {
+				result.error = err;
+				result.busy = false;
+			});
+		return result;
+	}
 	return optProxy(
 		typeof target === "object" && target !== null ? target : { value: target },
 	);
@@ -1439,14 +1482,14 @@ export function copy<T extends object>(dst: T, src: T): boolean;
 export function copy<T extends object>(dst: T, dstKey: keyof T, src: T[typeof dstKey]): boolean;
 export function copy(a: any, b: any, c?: any): boolean {
 	if (arguments.length > 2) return copySet(a, b, c, 0);
-	return copyRecursive(a, b, 0);
+	return copyImpl(a, b, 0);
 }
 
 function copySet(dst: any, dstKey: any, src: any, flags: number): boolean {
 	let dstVal = peek(dst, dstKey);
 	if (src === dstVal) return false;
 	if (typeof dstVal === "object" && dstVal && typeof src === "object" && src && dstVal.constructor === src.constructor) {
-		return copyRecursive(dstVal, src, flags);
+		return copyImpl(dstVal, src, flags);
 	}
 	src = clone(src); 
 	if (dst instanceof Map) dst.set(dstKey, src);
@@ -1483,26 +1526,31 @@ export function merge<T extends object>(dst: T, value: Partial<T>): boolean;
 export function merge<T extends object>(dst: T, dstKey: keyof T, value: Partial<T[typeof dstKey]>): boolean;
 export function merge(a: any, b: any, c?: any) {
 	if (arguments.length > 2) return copySet(a, b, c, MERGE);
-	return copyRecursive(a, b, MERGE);
+	return copyImpl(a, b, MERGE);
 }
 
-// The dst and src parameters must be objects. Will throw a friendly message if they're not both the same type.
-function copyRecursive<T extends object>(dst: T, src: T, flags: number): boolean {
+function copyImpl(dst: any, src: any, flags: number): boolean {
 	// We never want to subscribe to reads we do to the target (to find changes). So we'll
 	// take the unproxied version and `emit` updates ourselve.
-	let unproxied = (dst as any)[TARGET_SYMBOL] as T;
+	let unproxied = (dst as any)[TARGET_SYMBOL];
 	if (unproxied) {
 		dst = unproxied;
 		flags |= COPY_EMIT;
 	}
 	// For performance, we'll work on the unproxied `src` and manually subscribe to changes.
-	unproxied = (src as any)[TARGET_SYMBOL] as T;
+	unproxied = (src as any)[TARGET_SYMBOL];
 	if (unproxied) {
 		src = unproxied;
 		// If we're not in peek mode, we'll manually subscribe to all source reads.
 		if (currentScope !== ROOT_SCOPE && !peeking) flags |= COPY_SUBSCRIBE;
 	}
 
+	return copyRecursive(dst, src, flags);
+}
+
+// The dst and src parameters must be objects. Will throw a friendly message if they're not both the same type.
+function copyRecursive<T extends object>(dst: T, src: T, flags: number): boolean {
+
 	if (flags & COPY_SUBSCRIBE) subscribe(src, ANY_SYMBOL);
 	let changed = false;
 
@@ -1525,7 +1573,7 @@ function copyRecursive<T extends object>(dst: T, src: T, flags: number): boolean
 			}
 			else if (dstValue !== srcValue) {
 				if (srcValue && typeof srcValue === "object") {
-					if (typeof dstValue === "object" && dstValue && srcValue.constructor === dstValue.constructor) {
+					if (typeof dstValue === "object" && dstValue && srcValue.constructor === dstValue.constructor && !(NO_COPY in srcValue)) {
 						changed = copyRecursive(dstValue, srcValue, flags) || changed;
 						continue;
 					}
@@ -1561,7 +1609,7 @@ function copyRecursive<T extends object>(dst: T, src: T, flags: number): boolean
 			if (dstValue === undefined && !dst.has(key)) dstValue = EMPTY;
 			if (dstValue !== srcValue) {
 				if (srcValue && typeof srcValue === "object") {
-					if (typeof dstValue === "object" && dstValue && srcValue.constructor === dstValue.constructor) {
+					if (typeof dstValue === "object" && dstValue && srcValue.constructor === dstValue.constructor && !(NO_COPY in srcValue)) {
 						changed = copyRecursive(dstValue, srcValue, flags) || changed;
 						continue;
 					}
@@ -1594,7 +1642,7 @@ function copyRecursive<T extends object>(dst: T, src: T, flags: number): boolean
 			const dstValue = dst.hasOwnProperty(key) ? dst[key] : EMPTY;
 			if (dstValue !== srcValue) {
 				if (srcValue && typeof srcValue === "object") {
-					if (typeof dstValue === "object" && dstValue && srcValue.constructor === dstValue.constructor) {
+					if (typeof dstValue === "object" && dstValue && srcValue.constructor === dstValue.constructor && !(NO_COPY in srcValue)) {
 						changed = copyRecursive(dstValue as typeof srcValue, srcValue, flags) || changed;
 						continue;
 					}
@@ -1630,6 +1678,16 @@ const MERGE = 1;
 const COPY_SUBSCRIBE = 32;
 const COPY_EMIT = 64;
 
+/**
+ * A symbol that can be added to an object to prevent it from being cloned by {@link clone} or {@link copy}.
+ * This is useful for objects that should be shared by reference. That also mean that their contents won't
+ * be observed for changes.
+ */
+export const NO_COPY = Symbol("NO_COPY");
+
+// Promises break when proxied, so we'll just mark them as NO_COPY
+(Promise.prototype as any)[NO_COPY] = true;
+
 /**
  * Clone an (optionally proxied) object or array.
  *
@@ -1638,11 +1696,12 @@ const COPY_EMIT = 64;
  * @returns A new unproxied array or object (of the same type as `src`), containing a deep copy of `src`.
  */
 export function clone<T extends object>(src: T): T {
+	if (NO_COPY in src) return src;
 	// Create an empty object of the same type
 	const copied = Array.isArray(src) ? [] : src instanceof Map ? new Map() : Object.create(Object.getPrototypeOf(src));
 	// Copy all properties to it. This doesn't need to emit anything, and because
 	// the destination is an empty object, we can just MERGE, which is a bit faster.
-	copyRecursive(copied, src, MERGE);
+	copyImpl(copied, src, MERGE);
 	return copied;
 }
 
@@ -1695,7 +1754,7 @@ const refHandler: ProxyHandler<RefTarget> = {
  * });
  *
  * // Usage as a dynamic property, causes a TextNode with just the name to be created and live-updated
- * $('p:Selected color: ', {
+ * $('p#Selected color: ', {
  *   text: ref(formData, 'color'),
  *   $color: ref(formData, 'color')
  * });
@@ -1758,9 +1817,8 @@ function applyBind(el: HTMLInputElement, target: any) {
 	});
 }
 
-const SPECIAL_PROPS: { [key: string]: (value: any) => void } = {
-	create: (value: any) => {
-		const el = currentScope.parentElement;
+const SPECIAL_PROPS: { [key: string]: (el: Element, value: any) => void } = {
+	create: (el: Element, value: any) => {
 		if (currentScope !== topRedrawScope) return;
 		if (typeof value === "function") {
 			value(el);
@@ -1774,20 +1832,19 @@ const SPECIAL_PROPS: { [key: string]: (value: any) => void } = {
 			})();
 		}
 	},
-	destroy: (value: any) => {
-		const el = currentScope.parentElement;
+	destroy: (el: Element, value: any) => {
 		onDestroyMap.set(el, value);
 	},
-	html: (value: any) => {
+	html: (el: Element, value: any) => {
 		const tmpParent = document.createElement(
-			currentScope.parentElement.tagName,
+			currentScope.el.tagName,
 		);
 		tmpParent.innerHTML = `${value}`;
-		while (tmpParent.firstChild) addNode(tmpParent.firstChild);
+		while (tmpParent.firstChild) addNode(el, tmpParent.firstChild);
+	},
+	text: (el: Element, value: any) => {
+		addNode(el, document.createTextNode(value));
 	},
-	text: (value: any) => {
-		addNode(document.createTextNode(value));
-	}
 };
 
 /**
@@ -1798,11 +1855,13 @@ const SPECIAL_PROPS: { [key: string]: (value: any) => void } = {
  * @param {...(string | function | object | false | undefined | null)} args - Any number of arguments can be given. How they're interpreted depends on their types:
  *
  * - `string`: Strings can be used to create and insert new elements, set classnames for the *current* element, and add text to the current element.
- *   The format of a string is: **tag**? (`.` **class**)* (':' **text**)?
- *   meaning it consists of...
- *   - An optional HTML **tag**, something like `h1`. If present, a DOM element of that tag is created, and that element will be the *current* element for the rest of this `$` function execution.
- *   - Any number of CSS classes prefixed by `.` characters. These classes will be added to the *current* element.
- *   - Optional content **text** prefixed by a `:` character, ranging til the end of the string. This will be added as a TextNode to the *current* element.
+ *   The format of a string is: (**tag** | `.` **class** | **key**=**val** | **key**="**long val**")* ('#' **text** | **key**=)?
+ *   So there can be:
+ *   - Any number of **tag** element, like `h1` or `div`. These elements are created, added to the *current* element, and become the new *current* element for the rest of this `$` function execution.
+ *   - Any number of CSS classes prefixed by `.` characters. These classes will be added to the *current* element. Optionally, CSS classes can be appended to a **tag** without a space. So both `div.myclass` and `div .myclass` are valid and do the same thing.
+ *   - Any number of key/value pairs with string values, like `placeholder="Your name"` or `data-id=123`. These will be handled according to the rules specified for `object`, below, but with the caveat that values can only be strings. The quotes around string values are optional, unless the value contains spaces. It's not possible to escape quotes within the value. If you want to do that, or if you have user-provided values, use the `object` syntax (see below) or end your string with `key=` followed by the data as a separate argument (see below).
+ *   - The string may end in a '#' followed by text, which will be added as a TextNode to the *current* element. The text ranges til the end of the string, and may contain any characters, including spaces and quotes.
+ *   - Alternatively, the string may end in a key followed by an '=' character, in which case the value is expected as a separate argument. The key/value pair is set according to the rules specified for `object` below. This is useful when the value is not a string or contains spaces or user data. Example: `$('button text="Click me" click=', () => alert('Clicked!'))` or `$('input.value=', someUserData, "placeholder=", "Type your stuff")`.
  * - `function`: When a function (without argument nor a return value) is passed in, it will be reactively executed in its own observer scope, preserving the *current element*. So any `$()` invocations within this function will create DOM elements with our *current* element as parent. If the function reads observable data, and that data is changed later on, the function we re-execute (after side effects, such as DOM modifications through `$`, have been cleaned - see also {@link clean}).
  * - `object`: When an object is passed in, its key-value pairs are used to modify the *current* element in the following ways...
  *   - `{<attrName>: any}`: The common case is setting the value as an HTML attribute named key. So `{placeholder: "Your name"}` would add `placeholder="Your name"` to the current HTML element.
@@ -1817,7 +1876,7 @@ const SPECIAL_PROPS: { [key: string]: (value: any) => void } = {
  *   - `{<any>: <obsvalue>}`: Create a new observer scope and read the `value` property of the given observable (proxy) variable from within it, and apply the contained value using any of the other rules in this list. Example:
  *      ```typescript
  *      const myColor = proxy('red');
- *      $('p:Test', {$color: myColor, click: () => myColor.value = 'yellow'})
+ *      $('p#Test', {$color: myColor, click: () => myColor.value = 'yellow'})
  *      // Clicking the text will cause it to change color without recreating the <p> itself
  *      ```
  *      This is often used together with {@link ref}, in order to use properties other than `.value`.
@@ -1830,16 +1889,24 @@ const SPECIAL_PROPS: { [key: string]: (value: any) => void } = {
  *
  * @example Create Element
  * ```typescript
- * $('button.secondary.outline:Submit', {
+ * $('button.secondary.outline#Submit', {
  *   disabled: false,
  *   click: () => console.log('Clicked!'),
  *   $color: 'red'
  * });
  * ```
+ * 
+ * Which can also be written as:
+ * ```typescript
+ * $('button.secondary.outline text=Submit $color=red disabled=', false, 'click=', () => console.log('Clicked!'));
+ * ```
+ * 
+ * We want to set `disabled` as a property instead of an attribute, so we must use the `key=` syntax in order to provide
+ * `false` as a boolean instead of a string.
  *
  * @example Create Nested Elements
  * ```typescript
- * let inputElement: Element = $('label:Click me', 'input', {type: 'checkbox'});
+ * let inputElement: Element = $('label#Click me', 'input', {type: 'checkbox'});
  * // You should usually not touch raw DOM elements, unless when integrating
  * // with non-Aberdeen code.
  * console.log('DOM element:', inputElement);
@@ -1850,8 +1917,8 @@ const SPECIAL_PROPS: { [key: string]: (value: any) => void } = {
  * const state = proxy({ count: 0 });
  * $('div', () => { // Outer element
  *   // This scope re-renders when state.count changes
- *   $(`p:Count is ${state.count}`);
- *   $('button:Increment', { click: () => state.count++ });
+ *   $(`p#Count is ${state.count}`);
+ *   $('button#Increment', { click: () => state.count++ });
  * });
  * ```
  *
@@ -1860,17 +1927,17 @@ const SPECIAL_PROPS: { [key: string]: (value: any) => void } = {
  * const user = proxy({ name: '' });
  * $('input', { placeholder: 'Name', bind: ref(user, 'name') });
  * $('h3', () => { // Reactive scope
- *   $(`:Hello ${user.name || 'stranger'}`);
+ *   $(`#Hello ${user.name || 'stranger'}`);
  * });
  * ```
  *
  * @example Conditional Rendering
  * ```typescript
  * const show = proxy(false);
- * $('button', { click: () => show.value = !show.value }, () => $(show.value ? ':Hide' : ':Show'));
+ * $('button', { click: () => show.value = !show.value }, () => $(show.value ? '#Hide' : '#Show'));
  * $(() => { // Reactive scope
  *   if (show.value) {
- *     $('p:Details are visible!');
+ *     $('p#Details are visible!');
  *   }
  * });
  * ```
@@ -1886,96 +1953,104 @@ export function $(
 		| Record<string, any>
 	)[]
 ): undefined | Element {
-	let savedCurrentScope: undefined | ContentScope;
-	let err: undefined | string;
-	let result: undefined | Element;
-
-	for (let arg of args) {
-		if (arg == null || arg === false) continue;
-		if (typeof arg === "string") {
-			let text: undefined | string;
-			let classes: undefined | string;
-			const textPos = arg.indexOf(":");
-			if (textPos >= 0) {
-				text = arg.substring(textPos + 1);
-				arg = arg.substring(0, textPos);
-			}
-			const classPos = arg.indexOf(".");
-			if (classPos >= 0) {
-				classes = arg.substring(classPos + 1);
-				arg = arg.substring(0, classPos);
-			}
-			if (arg === "") {
-				// Add text or classes to parent
-				if (text) addNode(document.createTextNode(text));
-				if (classes) {
-					const el = currentScope.parentElement;
-					el.classList.add(...classes.split("."));
-					if (!savedCurrentScope) {
-						clean(() => el.classList.remove(...classes.split(".")));
+	let el: undefined | Element = currentScope.el;
+	let svg: boolean = currentScope.svg
+
+	const argCount = args.length;
+	for(let argIndex = 0; argIndex < argCount; argIndex++) {
+		const arg = args[argIndex];
+		if (arg == null || arg === false) {
+			// Ignore
+		} else if (typeof arg === "string") {
+			let argLen = arg.length;
+			let nextPos = 0;
+			for(let pos=0; pos<argLen; pos=nextPos+1) {
+				nextPos = findFirst(arg, " .=:#", pos);
+				const next = arg[nextPos];
+
+				if (next === ":" || next === "=") {
+					let key = arg.substring(pos, nextPos);
+					if (next === ':') key = '$' + key; // Style prefix
+					if (nextPos + 1 >= argLen) {
+						applyArg(el, key, args[++argIndex]);
+						break;
+					}
+					if (arg[nextPos+1] === '"') {
+						const endIndex = findFirst(arg, '"', nextPos + 2);
+						const value = arg.substring(nextPos+2, endIndex);
+						applyArg(el, key, value);
+						nextPos = endIndex;
+					} else {
+						const endIndex = findFirst(arg, " ", nextPos + 1);
+						const value = arg.substring(nextPos + 1, endIndex);
+						applyArg(el, key, value);
+						nextPos = endIndex;
 					}
-				}
-			} else if (arg.indexOf(" ") >= 0) {
-				err = `Tag '${arg}' cannot contain space`;
-				break;
-			} else {
-				// 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);
-				if (!savedCurrentScope) {
-					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;
+					if (nextPos > pos) { // Up til this point if non-empty, is a tag
+						const tag = arg.substring(pos, nextPos);
+						// Determine which namespace to use for element creation
+						svg ||= tag === 'svg';
+						let newEl = svg ? document.createElementNS('http://www.w3.org/2000/svg', tag) : document.createElement(tag);
+						addNode(el, newEl);
+						el = newEl;
+					}
+
+					if (next === "#") { // The rest of the string is text (or a text arg follows)	
+						const text = nextPos + 1 < argLen ? arg.substring(nextPos + 1) : args[++argIndex];
+						applyArg(el, "text", text);
+						break;
+					}
+
+					if (next === ".") { // Class name
+						let classEnd = findFirst(arg, " #=.", nextPos + 1);
+						if (arg[classEnd] === '=' && classEnd + 1 >= argLen) {
+							// Conditional class name. Pass to applyArg including the leading '.'
+							applyArg(el, arg.substring(nextPos, classEnd), args[++argIndex]);
+							nextPos = classEnd;
+						} else {
+							let className: any = arg.substring(nextPos + 1, classEnd);
+							el.classList.add(className || args[++argIndex]);
+							nextPos = classEnd - 1;
+						}
+					}
 				}
-				
-				newScope.lastChild = result.lastChild || undefined;
-				if (topRedrawScope === currentScope) topRedrawScope = newScope;
-				currentScope = newScope;
 			}
 		} else if (typeof arg === "object") {
 			if (arg.constructor !== Object) {
 				if (arg instanceof Node) {
-					addNode(arg);
+					addNode(el, 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;
+						el = arg;
+						svg = arg.namespaceURI === 'http://www.w3.org/2000/svg';
 					}
 				} else {
-					err = `Unexpected argument: ${arg}`;
-					break;
+					throw new Error(`Unexpected argument: ${arg}`);
 				}
 			} else {
 				for (const key of Object.keys(arg)) {
-					const val = arg[key];
-					applyArg(key, val);
+					applyArg(el, key, arg[key]);
 				}
 			}
 		} else if (typeof arg === "function") {
-			new RegularScope(currentScope.parentElement, arg);
+			new RegularScope(el, svg, arg);
 		} else {
-			err = `Unexpected argument: ${arg}`;
-			break;
+			throw new Error(`Unexpected argument: ${arg}`);
 		}
 	}
-	if (savedCurrentScope) {
-		currentScope = savedCurrentScope;
+	return el;
+}
+
+function findFirst(str: string, chars: string, startPos: number): number {
+	if (chars.length === 1) {
+		const idx = str.indexOf(chars, startPos);
+		return idx >= 0 ? idx : str.length;
 	}
-	if (err) throw new Error(err);
-	return result;
+	const strLen = str.length;
+	for (let i = startPos; i < strLen; i++) {
+		if (chars.indexOf(str[i]) >= 0) return i;
+	}
+	return strLen;
 }
 
 let cssCount = 0;
@@ -2017,8 +2092,8 @@ let cssCount = 0;
  *
  * // Apply the styles
  * $(scopeClass, () => { // Add class to the div
- *   $(`:Scoped content`);
- *   $('div.child-element:Child'); // .AbdStl1 .child-element rule applies
+ *   $(`#Scoped content`);
+ *   $('div.child-element#Child'); // .AbdStl1 .child-element rule applies
  * });
  * ```
  *
@@ -2034,13 +2109,13 @@ let cssCount = 0;
  *   }
  * }, true); // Pass true for global
  *
- * $('a:Styled link');
+ * $('a#Styled link');
  * ```
  */
 export function insertCss(style: object, global = false): string {
 	const prefix = global ? "" : `.AbdStl${++cssCount}`;
 	const css = styleToCss(style, prefix);
-	if (css) $(`style:${css}`);
+	if (css) $(`style#${css}`);
 	return prefix;
 }
 
@@ -2069,8 +2144,7 @@ function styleToCss(style: object, prefix: string): string {
 	return rules;
 }
 
-function applyArg(key: string, value: any) {
-	const el = currentScope.parentElement;
+function applyArg(el: Element, key: string, value: any) {
 	if (typeof value === "object" && value !== null && value[TARGET_SYMBOL]) {
 		// Value is a proxy
 		if (key === "bind") {
@@ -2094,11 +2168,11 @@ function applyArg(key: string, value: any) {
 		// Do nothing
 	} else if (key in SPECIAL_PROPS) {
 		// Special property
-		SPECIAL_PROPS[key](value);
+		SPECIAL_PROPS[key](el, value);
 	} else if (typeof value === "function") {
 		// Event listener
 		el.addEventListener(key, value);
-		clean(() => el.removeEventListener(key, value));
+		if (el === currentScope.el) clean(() => el.removeEventListener(key, value));
 	} else if (
 		value === true ||
 		value === false ||
@@ -2143,7 +2217,7 @@ let onError: (error: Error) => boolean | undefined = defaultOnError;
  *
  *   try {
  *     // Attempt to show a custom message in the UI
- *     $('div.error-message:Oops, something went wrong!');
+ *     $('div.error-message#Oops, something went wrong!');
  *   } catch (e) {
  *     // Ignore errors during error handling itself
  *   }
@@ -2200,7 +2274,7 @@ export function setErrorHandler(
  * ```
  */
 export function getParentElement(): Element {
-	return currentScope.parentElement;
+	return currentScope.el;
 }
 
 /**
@@ -2222,7 +2296,7 @@ export function getParentElement(): Element {
  *
  * // Show the array items and maintain the sum
  * onEach(myArray, (item, index) => {
- *     $(`code:${index}→${item}`);
+ *     $(`code#${index}→${item}`);
  *     // We'll update sum.value using peek, as += first does a read, but
  *     // we don't want to subscribe.
  *     peek(() => sum.value += item);
@@ -2265,14 +2339,14 @@ export function clean(cleaner: () => void) {
  *
  * $('main', () => {
  *   console.log('Welcome');
- *   $('h3:Welcome, ' + data.user); // Reactive text
+ *   $('h3#Welcome, ' + data.user); // Reactive text
  *
  *   derive(() => {
  *     // When data.notifications changes, only this inner scope reruns,
  *     // leaving the `<p>Welcome, ..</p>` untouched.
  *     console.log('Notifications');
- *     $('code.notification-badge:' + data.notifications);
- *     $('a:Notify!', {click: () => data.notifications++});
+ *     $('code.notification-badge#' + data.notifications);
+ *     $('a#Notify!', {click: () => data.notifications++});
  *   });
  * });
  * ```
@@ -2286,7 +2360,7 @@ export function clean(cleaner: () => void) {
  * const double = derive(() => counter.value * 2);
  *
  * $('h3', () => {
- *     $(`:counter=${counter.value} double=${double.value}`);
+ *     $(`#counter=${counter.value} double=${double.value}`);
  * })
  * ```
  *
@@ -2294,7 +2368,7 @@ export function clean(cleaner: () => void) {
  * @param func Func without a return value.
  */
 export function derive<T>(func: () => T): ValueRef<T> {
-	return new ResultScope<T>(currentScope.parentElement, func).result;
+	return new ResultScope<T>(func).result;
 }
 
 /**
@@ -2326,12 +2400,12 @@ export function derive<T>(func: () => T): ValueRef<T> {
  * setInterval(() => runTime.value++, 1000);
  *
  * mount(document.getElementById('app-root'), () => {
- *   $('h4:Aberdeen App');
- *   $(`p:Run time: ${runTime.value}s`);
+ *   $('h4#Aberdeen App');
+ *   $(`p#Run time: ${runTime.value}s`);
  *   // Conditionally render some content somewhere else in the static page
  *   if (runTime.value&1) {
  *     mount(document.getElementById('title-extra'), () =>
- *       $(`i:(${runTime.value}s)`)
+ *       $(`i#(${runTime.value}s)`)
  *     );
  *   }
  * });
@@ -2664,7 +2738,7 @@ export function partition<
 	func: (value: IN_V, key: KeyToString<IN_K>) => undefined | OUT_K | OUT_K[],
 ): Record<OUT_K, Record<KeyToString<IN_K>, IN_V>> {
 	const unproxiedOut = {} as Record<OUT_K, Record<KeyToString<IN_K>, IN_V>>;
-	const out = proxy(unproxiedOut);
+	const out = optProxy(unproxiedOut);
 	onEach(source, (item: IN_V, key: KeyToString<IN_K>) => {
 		const rsp = func(item, key);
 		if (rsp != null) {
@@ -2706,7 +2780,7 @@ export function partition<
  *   items: ['a', 'b']
  * });
  *
- * $('h2:Live State Dump');
+ * $('h2#Live State Dump');
  * dump(state);
  *
  * // Change state later, the dump in the DOM will update
@@ -2715,24 +2789,22 @@ export function partition<
  */
 export function dump<T>(data: T): T {
 	if (data && typeof data === "object") {
-		let label;
-		if (data instanceof Array) {
-			label = "<array>";
-		} else if (data instanceof Map) {
-			label = "<Map>";
+		const name = data.constructor.name.toLowerCase() || "unknown object";
+		$(`#<${name}>`);
+		if (NO_COPY in data ) {
+			$("# [NO_COPY]");
 		} else {
-			label = "<object>";
-		}
-		$({ text: label });
-		$("ul", () => {
-			onEach(data as any, (value, key) => {
-				$(`li:${JSON.stringify(key)}: `, () => {
-					dump(value);
+			$("ul", () => {
+				onEach(data as any, (value, key) => {
+					$("li", () => {
+						$(`#${JSON.stringify(key)}: `);
+						dump(value);
+					});
 				});
 			});
-		});
-	} else {
-		$({ text: JSON.stringify(data) });
+		}
+	} else if (data !== undefined) {
+		$("#" + JSON.stringify(data));
 	}
 	return data;
 }
@@ -2754,7 +2826,7 @@ function handleError(e: any, showMessage: boolean) {
 		console.error(e);
 	}
 	try {
-		if (showMessage) $("div.aberdeen-error:Error");
+		if (showMessage) $("div.aberdeen-error#Error");
 	} catch {
 		// Error while adding the error marker to the DOM. Apparently, we're in
 		// an awkward context. The error should already have been logged by