aberdeen 1.0.8 → 1.0.11

package/src/aberdeen.ts

@@ -114,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
@@ -822,15 +822,19 @@ function subscribe(
 	}
 }
 
+// Records in TypeScript pretend that they can have number keys, but in reality they are converted to string.
+// This type changes (number | something) types to (string | something) types, maintaining typing precision as much as possible.
+type KeyToString<K> = K extends number ? string : K extends string | symbol ? K : K extends number | infer U ? string | U : K;
+
 export function onEach<T>(
-	target: Array<undefined | T>,
+	target: ReadonlyArray<undefined | T>,
 	render: (value: T, index: number) => void,
-	makeKey?: (value: T, key: any) => SortKeyType,
+	makeKey?: (value: T, index: number) => SortKeyType,
 ): void;
 export function onEach<K extends string | number | symbol, T>(
 	target: Record<K, undefined | T>,
-	render: (value: T, index: K) => void,
-	makeKey?: (value: T, key: K) => SortKeyType,
+	render: (value: T, index: KeyToString<K>) => void,
+	makeKey?: (value: T, index: KeyToString<K>) => SortKeyType,
 ): void;
 
 /**
@@ -1584,9 +1588,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
 	},
 };
 
@@ -1623,7 +1627,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.
@@ -1746,12 +1750,23 @@ export function $(
 			}
 		} 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);
@@ -2210,9 +2225,9 @@ export function peek<T>(func: () => T): T {
 }
 
 /** When using an object as `source`. */
-export function map<IN, OUT>(
-	source: Record<string | symbol, IN>,
-	func: (value: IN, index: string | symbol) => undefined | OUT,
+export function map<IN, const IN_KEY extends string | number | symbol, OUT>(
+	source: Record<IN_KEY, IN>,
+	func: (value: IN, index: KeyToString<IN_KEY>) => undefined | OUT,
 ): Record<string | symbol, OUT>;
 /** When using an array as `source`. */
 export function map<IN, OUT>(
@@ -2289,7 +2304,7 @@ export function multiMap<
 	K extends string | number | symbol,
 	IN,
 	OUT extends { [key: string | symbol]: DatumType },
->(source: Record<K, IN>, func: (value: IN, index: K) => OUT | undefined): OUT;
+>(source: Record<K, IN>, func: (value: IN, index: KeyToString<K>) => OUT | undefined): OUT;
 /**
  * Reactively maps items from a source proxy (array or object) to a target proxied object,
  * where each source item can contribute multiple key-value pairs to the target.
@@ -2436,18 +2451,18 @@ export function partition<
 	IN_V,
 >(
 	source: Record<IN_K, IN_V>,
-	func: (value: IN_V, key: IN_K) => undefined | OUT_K | OUT_K[],
-): Record<OUT_K, Record<IN_K, IN_V>> {
-	const unproxiedOut = {} as Record<OUT_K, Record<IN_K, IN_V>>;
+	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);
-	onEach(source, (item: IN_V, key: IN_K) => {
+	onEach(source, (item: IN_V, key: KeyToString<IN_K>) => {
 		const rsp = func(item, key);
 		if (rsp != null) {
 			const buckets = rsp instanceof Array ? rsp : [rsp];
 			if (buckets.length) {
 				for (const bucket of buckets) {
 					if (unproxiedOut[bucket]) out[bucket][key] = item;
-					else out[bucket] = { [key]: item } as Record<IN_K, IN_V>;
+					else out[bucket] = { [key]: item } as Record<KeyToString<IN_K>, IN_V>;
 				}
 				clean(() => {
 					for (const bucket of buckets) {