@oscarpalmer/abydon 0.14.0 → 0.15.0

package/dist/abydon.full.js

@@ -358,14 +358,14 @@ function setAtIndex(array$1, index, value) {
 function isKey(value) {
 	return typeof value === "number" || typeof value === "string";
 }
-function isPlainObject$1(value) {
+function isPlainObject(value) {
 	if (value === null || typeof value !== "object") return false;
 	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
 	const prototype = Object.getPrototypeOf(value);
 	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
 }
 
-function getString$1(value) {
+function getString(value) {
 	if (typeof value === "string") return value;
 	if (value == null) return "";
 	if (typeof value !== "object") return String(value);
@@ -374,7 +374,7 @@ function getString$1(value) {
 }
 
 function isNullableOrWhitespace(value) {
-	return value == null || EXPRESSION_WHITESPACE.test(getString$1(value));
+	return value == null || EXPRESSION_WHITESPACE.test(getString(value));
 }
 var EXPRESSION_WHITESPACE = /^\s*$/;
 
@@ -397,7 +397,7 @@ var Store = class extends Reactive {
 	}
 	set(first, second) {
 		if (isKey(first)) this.state.value[first] = second;
-		else if (first == null || isPlainObject$1(first)) setProxyValue(this.state.value, first ?? {});
+		else if (first == null || isPlainObject(first)) setProxyValue(this.state.value, first ?? {});
 	}
 	subscribe(first, second) {
 		if (isKey(first) && typeof second === "function") return getReactiveValueInProxy(this, this.#keyed, first, false).subscribe(second);
@@ -405,11 +405,11 @@ var Store = class extends Reactive {
 	}
 	update(callback) {
 		const updated = callback({ ...this.state.value });
-		if (updated == null || isPlainObject$1(updated)) setProxyValue(this.state.value, updated ?? {});
+		if (updated == null || isPlainObject(updated)) setProxyValue(this.state.value, updated ?? {});
 	}
 };
 function store(value, options) {
-	return new Store(isPlainObject$1(value) ? value : {}, options);
+	return new Store(isPlainObject(value) ? value : {}, options);
 }
 
 function isChildNode(value) {
@@ -426,21 +426,6 @@ var CHILD_NODE_TYPES = new Set([
 	Node.DOCUMENT_TYPE_NODE
 ]);
 
-function getString(value) {
-	if (typeof value === "string") return value;
-	if (value == null) return "";
-	if (typeof value !== "object") return String(value);
-	const asString = String(value.valueOf?.() ?? value);
-	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
-}
-
-function isPlainObject(value) {
-	if (value === null || typeof value !== "object") return false;
-	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
-	const prototype = Object.getPrototypeOf(value);
-	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
-}
-
 function isAttribute(value) {
 	return value instanceof Attr || isPlainObject(value) && typeof value.name === "string" && typeof value.value === "string";
 }
@@ -524,14 +509,6 @@ const booleanAttributes = Object.freeze([
 	"selected"
 ]);
 
-function getOptions$1(input) {
-	const options = isPlainObject(input) ? input : {};
-	options.sanitizeBooleanAttributes = typeof options.sanitizeBooleanAttributes === "boolean" ? options.sanitizeBooleanAttributes : true;
-	return options;
-}
-function sanitize(value, options) {
-	return sanitizeNodes$1(Array.isArray(value) ? value : [value], getOptions$1(options));
-}
 function sanitizeAttributes(element, attributes, options) {
 	const { length } = attributes;
 	for (let index = 0; index < length; index += 1) {
@@ -545,50 +522,179 @@ function sanitizeNodes$1(nodes, options) {
 	const { length } = nodes;
 	for (let index = 0; index < length; index += 1) {
 		const node = actual[index];
-		if (node instanceof Element) sanitizeAttributes(node, [...node.attributes], options);
+		if (node instanceof Element) {
+			const scripts = node.querySelectorAll("script");
+			for (const script of scripts) script.remove();
+			sanitizeAttributes(node, [...node.attributes], options);
+		}
 		if (node.hasChildNodes()) sanitizeNodes$1([...node.childNodes], options);
 	}
 	return nodes;
 }
 
-function createTemplate(html$1) {
+function createTemplate(html$1, ignore) {
 	const template = document.createElement("template");
 	template.innerHTML = html$1;
-	templates[html$1] = template;
+	if (!ignore) templates[html$1] = template;
 	return template;
 }
-function getTemplate(value) {
+function getHtml(value, options) {
+	if (typeof value !== "string" && !(value instanceof HTMLTemplateElement)) return [];
+	const template = value instanceof HTMLTemplateElement ? value : getTemplate(value, options.ignoreCache);
+	if (template == null) return [];
+	const cloned = template.content.cloneNode(true);
+	const scripts = cloned.querySelectorAll("script");
+	for (const script of scripts) script.remove();
+	cloned.normalize();
+	return sanitizeNodes$1([...cloned.childNodes], options);
+}
+function getOptions$1(input) {
+	const options = isPlainObject(input) ? input : {};
+	options.ignoreCache = typeof options.ignoreCache === "boolean" ? options.ignoreCache : false;
+	options.sanitizeBooleanAttributes = typeof options.sanitizeBooleanAttributes === "boolean" ? options.sanitizeBooleanAttributes : true;
+	return options;
+}
+function getTemplate(value, ignore) {
 	if (typeof value !== "string" || value.trim().length === 0) return;
 	let template = templates[value];
 	if (template != null) return template;
 	const element = EXPRESSION_ID.test(value) ? document.querySelector(`#${value}`) : null;
-	template = element instanceof HTMLTemplateElement ? element : createTemplate(value);
-	templates[value] = template;
+	template = element instanceof HTMLTemplateElement ? element : createTemplate(value, ignore);
 	return template;
 }
-var html$1 = ((value, sanitization) => {
-	if (typeof value !== "string" && !(value instanceof HTMLTemplateElement)) return [];
-	let options;
-	if (sanitization == null || sanitization === true) options = {};
-	else options = sanitization === false ? void 0 : sanitization;
-	const template = value instanceof HTMLTemplateElement ? value : getTemplate(value);
-	if (template == null) return [];
-	const cloned = template.content.cloneNode(true);
-	const scripts = cloned.querySelectorAll("script");
-	const { length } = scripts;
-	for (let index = 0; index < length; index += 1) scripts[index].remove();
-	cloned.normalize();
-	return options != null ? sanitize([...cloned.childNodes], options) : [...cloned.childNodes];
+var html$1 = ((value, options) => {
+	return getHtml(value, getOptions$1(options));
 });
 html$1.clear = () => {
 	templates = {};
 };
 html$1.remove = (template) => {
-	if (typeof template === "string") templates[template] = void 0;
+	if (typeof template !== "string" || templates[template] == null) return;
+	const keys = Object.keys(templates);
+	const { length } = keys;
+	const updated = {};
+	for (let index = 0; index < length; index += 1) {
+		const key = keys[index];
+		if (key !== template) updated[key] = templates[key];
+	}
+	templates = updated;
 };
 var EXPRESSION_ID = /^[a-z][\w-]*$/i;
 var templates = {};
 
+function compareArrays(first, second) {
+    const firstIsLarger = first.length > second.length;
+    const from = firstIsLarger ? first : second;
+    const to = firstIsLarger ? second : first;
+    if (!from
+        .filter(key => to.includes(key))
+        .every((key, index) => to[index] === key)) {
+        return 'dissimilar';
+    }
+    return firstIsLarger ? 'removed' : 'added';
+}
+function isFragment(value) {
+    return (typeof value === 'object' &&
+        value != null &&
+        '$fragment' in value &&
+        value.$fragment === true);
+}
+function isFragments(value) {
+    return (typeof value === 'object' &&
+        value != null &&
+        '$fragments' in value &&
+        value.$fragments === true);
+}
+
+class Fragments {
+    #state;
+    /**
+     * Fragment items
+     */
+    get items() {
+        return this.#state.mapped;
+    }
+    constructor(items, identify, fragment) {
+        Object.defineProperty(this, '$fragments', {
+            value: true,
+        });
+        this.#state = {
+            fragment,
+            identify,
+            array: items,
+            instances: {},
+            mapped: array([]),
+            subscriber: undefined,
+        };
+        states.set(this, this.#state);
+        initializeFragments(this.#state);
+    }
+}
+function handleFragments(item, remove) {
+    const state = isFragments(item) ? states.get(item) : item;
+    if (state != null) {
+        (remove ? removeFragments$1 : initializeFragments)(state);
+    }
+}
+function handleItems(state, items) {
+    const keys = new Set();
+    const mapped = [];
+    const { length } = items;
+    for (let index = 0; index < length; index += 1) {
+        const item = items[index];
+        const identifier = state.identify(item);
+        if (identifier == null) {
+            throw new Error('Identifier cannot be null or undefined');
+        }
+        const key = getString(identifier);
+        if (keys.has(key)) {
+            throw new Error(`Duplicate identifier found: "${key}"`);
+        }
+        let instance = state.instances[key];
+        if (instance == null) {
+            instance = state.fragment(item);
+            if (!isFragment(instance)) {
+                throw new Error('Fragment function must return a Fragment instance');
+            }
+        }
+        instance.identify(key);
+        state.instances[key] = instance;
+        keys.add(key);
+        mapped.push(instance);
+    }
+    state.mapped.set(mapped);
+    updateFragments(state, keys);
+}
+function initializeFragments(state) {
+    state.subscriber ??= state.array.subscribe(items => {
+        handleItems(state, items);
+    });
+}
+function removeFragments$1(state) {
+    state.subscriber?.();
+    updateFragments(state);
+    state.subscriber = undefined;
+}
+function updateFragments(state, active) {
+    const next = {};
+    const previous = { ...state.instances };
+    const keys = Object.keys(previous);
+    const { length } = keys;
+    for (let index = 0; index < length; index += 1) {
+        const key = keys[index];
+        if (active?.has(key)) {
+            next[key] = previous[key];
+        }
+        else {
+            previous[key].remove();
+        }
+    }
+    state.instances = next;
+    active?.clear();
+}
+//
+const states = new WeakMap();
+
 const ABORT_CONTROLLERS = new WeakMap();
 const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
 const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
@@ -630,24 +736,6 @@ function removeEvents(element) {
     ABORT_CONTROLLERS.delete(element);
 }
 
-function compareArrays(first, second) {
-    const firstIsLarger = first.length > second.length;
-    const from = firstIsLarger ? first : second;
-    const to = firstIsLarger ? second : first;
-    if (!from
-        .filter(key => to.includes(key))
-        .every((key, index) => to[index] === key)) {
-        return 'dissimilar';
-    }
-    return firstIsLarger ? 'removed' : 'added';
-}
-function isFragment(value) {
-    return (typeof value === 'object' &&
-        value != null &&
-        '$fragment' in value &&
-        value.$fragment === true);
-}
-
 function createNodes(value) {
     if (isFragment(value)) {
         return value.get();
@@ -655,7 +743,7 @@ function createNodes(value) {
     if (isChildNode(value)) {
         return [value];
     }
-    return [new Text(getString$1(value))];
+    return [new Text(getString(value))];
 }
 function removeNodes(nodes) {
     sanitizeNodes(nodes);
@@ -725,7 +813,7 @@ function setStyle(data, element, name, value) {
             element.style.removeProperty(property);
         }
         else {
-            element.style.setProperty(property, value === true ? unit : getString$1(value));
+            element.style.setProperty(property, value === true ? unit : getString(value));
         }
     }
     if (isReactive(value)) {
@@ -849,6 +937,16 @@ function removeFragments(fragments) {
         }
     }
 }
+function replaceText(item, comment, isNullable) {
+    let to;
+    if (isNullable) {
+        to = [comment];
+    }
+    else {
+        to = item.text == null ? [] : [item.text];
+    }
+    replaceNodes(item.nodes ?? [], to);
+}
 function setArray(item, comment, value) {
     if (value.length === 0) {
         return {
@@ -913,7 +1011,12 @@ function setReactiveValueForArray(item, comment, value) {
     const result = setArray(item, comment, value);
     item.fragments = typeof result === 'boolean' ? undefined : result?.fragments;
     if (typeof result === 'boolean') {
-        item.nodes = result ? item.text == null ? [] : [item.text] : undefined;
+        if (result) {
+            item.nodes = item.text == null ? [] : [item.text];
+        }
+        else {
+            item.nodes = undefined;
+        }
     }
     else {
         item.nodes = result?.nodes;
@@ -932,11 +1035,11 @@ function setReactiveValueForSingle(item, comment, value) {
 function setText(item, comment, value) {
     const isNullable = isNullableOrWhitespace(value);
     if (item.text != null) {
-        item.text.textContent = isNullable ? '' : getString$1(value);
+        item.text.textContent = isNullable ? '' : getString(value);
     }
     let result = false;
     if (item.nodes != null) {
-        replaceNodes(item.nodes, isNullable ? [comment] : item.text == null ? [] : [item.text]);
+        replaceText(item, comment, isNullable);
         result = !isNullable;
     }
     else if (isNullable && comment.parentNode == null) {
@@ -949,7 +1052,9 @@ function setText(item, comment, value) {
         result = true;
     }
     removeFragments(item.fragments);
-    return result ? item.text == null ? [] : [item.text] : undefined;
+    if (result) {
+        return item.text == null ? [] : [item.text];
+    }
 }
 
 function mapNode(data, comment) {
@@ -980,6 +1085,10 @@ function mapValue(data, comment, value) {
         case typeof value === 'function':
             setComputedValue(data, comment, value);
             break;
+        case isFragments(value):
+            handleFragments(value, false);
+            setReactiveValue(data, comment, value.items);
+            break;
         case isReactive(value):
             setReactiveValue(data, comment, value);
             break;
@@ -1033,34 +1142,22 @@ function parse(data) {
     return data.template;
 }
 
-function calculate() {
-	return new Promise((resolve) => {
-		const values = [];
-		let last;
-		function step(now) {
-			if (last != null) values.push(now - last);
-			last = now;
-			if (values.length >= CALCULATION_TOTAL) resolve(values.sort().slice(2, -2).reduce((first, second) => first + second, 0) / (values.length - CALCULATION_TRIM));
-			else requestAnimationFrame(step);
-		}
-		requestAnimationFrame(step);
-	});
-}
-var CALCULATION_TOTAL = 10;
-var CALCULATION_TRIM = 4;
-calculate().then((value) => {
-});
-
 class Fragment {
     #data;
     #configuration = {
         identifier: undefined,
         ignoreCache: false,
     };
+    /**
+     * Fragment identifier
+     */
     get identifier() {
         return this.#configuration.identifier;
     }
     constructor(strings, expressions) {
+        Object.defineProperty(this, '$fragment', {
+            value: true,
+        });
         this.#data = {
             expressions,
             strings,
@@ -1071,18 +1168,21 @@ class Fragment {
             },
             values: [],
         };
-        Object.defineProperty(this, '$fragment', {
-            value: true,
-        });
     }
     /**
-     * Appends the fragment to the given element
+     * Append the fragment to the given element
+     * @param element Element to append to
      */
     appendTo(element) {
         element.append(...this.get());
     }
+    /**
+     * Configure the fragment
+     * @param configuration Configuration options
+     * @returns Fragment
+     */
     configure(configuration) {
-        const actual = isPlainObject$1(configuration) ? configuration : {};
+        const actual = isPlainObject(configuration) ? configuration : {};
         if (actual.identifier !== undefined) {
             this.#configuration.identifier = actual.identifier;
         }
@@ -1092,33 +1192,44 @@ class Fragment {
         return this;
     }
     /**
-     * Gets a list of the fragment's nodes
+     * Get a list of the fragment's nodes
+     * @returns List of nodes
      */
     get() {
         const data = this.#data;
         if (data.items.length === 0) {
             const parsed = parse(data);
             const templated = html$1(parsed, {
+                ignoreCache: this.#configuration.ignoreCache,
                 sanitizeBooleanAttributes: false,
             });
-            if (this.#configuration.ignoreCache) {
-                html$1.remove(parsed);
-            }
             data.items.splice(0, data.items.length, ...templated.map(node => ({
                 nodes: [node],
             })));
-            mapNodes(data, data.items.flatMap(item => item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? []));
+            mapNodes(data, data.items.flatMap(item => item.fragments?.flatMap(fragment => fragment.get()) ??
+                item.nodes ??
+                []));
         }
         return [
-            ...data.items.flatMap(item => item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? []),
+            ...data.items.flatMap(item => item.fragments?.flatMap(fragment => fragment.get()) ??
+                item.nodes ??
+                []),
         ];
     }
+    /**
+     * Set an identifier for the fragment
+     *
+     * _An identifier can be used to uniquely identify a fragment,
+     * which helps prevent re-rendering in certain scenarios._
+     * @param identifier Identifier
+     * @returns Fragment
+     */
     identify(identifier) {
         this.#configuration.identifier = identifier;
         return this;
     }
     /**
-     * Removes the fragment from the DOM
+     * Remove the fragment from the DOM
      */
     remove() {
         removeFragment(this.#data);
@@ -1126,16 +1237,23 @@ class Fragment {
 }
 function removeFragment(data) {
     removeMora(data);
-    const { length } = data.items;
+    let { length } = data.items;
     for (let index = 0; index < length; index += 1) {
         const { fragments, nodes } = data.items[index];
-        const length = fragments?.length ?? 0;
-        for (let index = 0; index < length; index += 1) {
-            fragments?.[index]?.remove();
+        const fragmentsLength = fragments?.length ?? 0;
+        for (let fragmentIndex = 0; fragmentIndex < fragmentsLength; fragmentIndex += 1) {
+            fragments?.[fragmentIndex]?.remove();
         }
         removeNodes(nodes ?? []);
     }
     data.items.length = 0;
+    length = data.values.length;
+    for (let index = 0; index < length; index += 1) {
+        const value = data.values[index];
+        if (isFragments(value)) {
+            handleFragments(value, true);
+        }
+    }
 }
 function removeMora(data) {
     const unsubscribers = [...data.mora.subscribers];
@@ -1146,8 +1264,11 @@ function removeMora(data) {
     }
 }
 
+function fragments(array, identify, fragment) {
+    return new Fragments(array, identify, fragment);
+}
 function html(strings, ...values) {
     return new Fragment(strings, values);
 }
 
-export { array, computed, effect, html, isArray, isComputed, isEffect, isReactive, isSignal, signal, startBatch, stopBatch, store };
+export { array, computed, effect, fragments, html, isArray, isComputed, isEffect, isReactive, isSignal, signal, startBatch, stopBatch, store };

package/dist/fragment.js

@@ -1,13 +1,21 @@
 import { parse } from "./parse.js";
+import { isFragments } from "./helpers/index.js";
+import { handleFragments } from "./fragments.js";
 import { removeNodes } from "./helpers/dom.js";
 import { mapNodes } from "./node/index.js";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
 import { html } from "@oscarpalmer/toretto/html";
 var Fragment = class {
 	#data;
+	#configuration = {
+		identifier: void 0,
+		ignoreCache: false
+	};
 	get identifier() {
-		return this.#data.identifier;
+		return this.#configuration.identifier;
 	}
 	constructor(strings, expressions) {
+		Object.defineProperty(this, "$fragment", { value: true });
 		this.#data = {
 			expressions,
 			strings,
@@ -18,22 +26,30 @@ var Fragment = class {
 			},
 			values: []
 		};
-		Object.defineProperty(this, "$fragment", { value: true });
 	}
 	appendTo(element) {
 		element.append(...this.get());
 	}
+	configure(configuration) {
+		const actual = isPlainObject(configuration) ? configuration : {};
+		if (actual.identifier !== void 0) this.#configuration.identifier = actual.identifier;
+		if (typeof actual.ignoreCache === "boolean") this.#configuration.ignoreCache = actual.ignoreCache;
+		return this;
+	}
 	get() {
 		const data = this.#data;
 		if (data.items.length === 0) {
-			const templated = html(parse(data), { sanitizeBooleanAttributes: false });
+			const templated = html(parse(data), {
+				ignoreCache: this.#configuration.ignoreCache,
+				sanitizeBooleanAttributes: false
+			});
 			data.items.splice(0, data.items.length, ...templated.map((node) => ({ nodes: [node] })));
-			mapNodes(data, data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes));
+			mapNodes(data, data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes ?? []));
 		}
-		return [...data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes)];
+		return [...data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes ?? [])];
 	}
 	identify(identifier) {
-		this.#data.identifier = identifier;
+		this.#configuration.identifier = identifier;
 		return this;
 	}
 	remove() {
@@ -42,14 +58,19 @@ var Fragment = class {
 };
 function removeFragment(data) {
 	removeMora(data);
-	const { length } = data.items;
+	let { length } = data.items;
 	for (let index = 0; index < length; index += 1) {
 		const { fragments, nodes } = data.items[index];
-		const { length: length$1 } = fragments ?? [];
-		for (let index$1 = 0; index$1 < length$1; index$1 += 1) fragments?.[index$1]?.remove();
-		removeNodes(nodes);
+		const fragmentsLength = fragments?.length ?? 0;
+		for (let fragmentIndex = 0; fragmentIndex < fragmentsLength; fragmentIndex += 1) fragments?.[fragmentIndex]?.remove();
+		removeNodes(nodes ?? []);
+	}
+	data.items.length = 0;
+	length = data.values.length;
+	for (let index = 0; index < length; index += 1) {
+		const value = data.values[index];
+		if (isFragments(value)) handleFragments(value, true);
 	}
-	data.items.splice(0, length);
 }
 function removeMora(data) {
 	const unsubscribers = [...data.mora.subscribers];