@oscarpalmer/abydon 0.13.0 → 0.15.0

package/dist/abydon.full.js

@@ -1,594 +1,369 @@
+const ACTIVE = {};
+const BATCH = {
+	depth: 0,
+	handlers: /* @__PURE__ */ new Set()
+};
+const METHODS_AFFECTING_LENGTH = new Set([
+	"pop",
+	"push",
+	"shift",
+	"unshift"
+]);
+const METHODS_UPDATE = new Set([
+	...METHODS_AFFECTING_LENGTH,
+	"copyWithin",
+	"fill",
+	"reverse",
+	"sort",
+	"splice"
+]);
+const NAME_ARRAY = "array";
+const NAME_COMPUTED = "computed";
+const NAME_EFFECT = "effect";
+const NAME_SIGNAL = "signal";
+const NAME_STORE = "store";
+const NAMES = new Set([
+	NAME_ARRAY,
+	NAME_COMPUTED,
+	NAME_SIGNAL,
+	NAME_STORE
+]);
+
+var Effect = class {
+	constructor(callback) {
+		Object.defineProperty(this, "$mora", { value: NAME_EFFECT });
+		this.state = { callback };
+		runEffect(this);
+	}
+};
+function runEffect(effect$1) {
+	const previousEffect = ACTIVE.effect;
+	ACTIVE.effect = effect$1;
+	try {
+		effect$1.state.callback();
+	} finally {
+		ACTIVE.effect = previousEffect;
+	}
+}
+function effect(callback) {
+	return typeof callback === "function" ? new Effect(callback) : void 0;
+}
+
 function isArray(value) {
-  return isMora(value, arrayName);
+	return isMora(value, NAME_ARRAY);
 }
 function isComputed(value) {
-  return isMora(value, computedName);
+	return isMora(value, NAME_COMPUTED);
 }
 function isEffect(value) {
-  return isMora(value, effectName);
+	return isMora(value, NAME_EFFECT);
 }
 function isMora(value, name) {
-  return typeof value === "object" && value != null && "$mora" in value && (typeof name === "string" ? value.$mora === name : name.has(value.$mora));
+	return typeof value === "object" && value != null && "$mora" in value && (typeof name === "string" ? value.$mora === name : name.has(value.$mora));
 }
 function isReactive(value) {
-  return isMora(value, reactiveNames);
+	return isMora(value, NAMES);
 }
 function isSignal(value) {
-  return isMora(value, signalName);
-}
-const arrayName = "array";
-const computedName = "computed";
-const effectName = "effect";
-const signalName = "signal";
-const storeName = "store";
-const reactiveNames = /* @__PURE__ */ new Set([arrayName, computedName, signalName, storeName]);
-
-class Effect {
-  constructor(callback) {
-    Object.defineProperty(this, "$mora", {
-      value: effectName
-    });
-    this.state = {
-      callback
-    };
-    runEffect(this);
-  }
-}
-function runEffect(effect2) {
-  const previousEffect = activeEffect;
-  activeEffect = effect2;
-  try {
-    effect2.state.callback();
-  } finally {
-    activeEffect = previousEffect;
-  }
+	return isMora(value, NAME_SIGNAL);
 }
-function effect(callback) {
-  return new Effect(callback);
-}
-let activeEffect;
 
 function flushHandlers() {
-  while (batchDepth === 0 && batchedHandlers.size > 0) {
-    const handlers = [...batchedHandlers];
-    batchedHandlers.clear();
-    for (const handler of handlers) {
-      if (isEffect(handler)) {
-        runEffect(handler);
-      } else {
-        handler.callback(handler.state.value);
-      }
-    }
-  }
+	while (BATCH.depth === 0 && BATCH.handlers.size > 0) {
+		const handlers = [...BATCH.handlers];
+		BATCH.handlers.clear();
+		for (const handler of handlers) if (isEffect(handler)) runEffect(handler);
+		else handler.callback(handler.state.value);
+	}
 }
 function startBatch() {
-  batchDepth += 1;
+	BATCH.depth += 1;
 }
 function stopBatch() {
-  if (batchDepth > 0) {
-    batchDepth -= 1;
-  }
-  flushHandlers();
+	if (BATCH.depth > 0) BATCH.depth -= 1;
+	flushHandlers();
 }
-const batchedHandlers = /* @__PURE__ */ new Set();
-let batchDepth = 0;
 
-class Subscription {
-  constructor(state, callback) {
-    this.state = state;
-    this.callback = callback;
-    callback(state.value);
-  }
-}
-function noop() {
-}
+var Subscription = class {
+	callback;
+	state;
+	constructor(state, callback) {
+		this.state = state;
+		this.callback = callback;
+		callback(state.value);
+	}
+	destroy() {
+		this.callback = noop;
+		this.state = void 0;
+	}
+};
+function noop() {}
 function subscribe(state, callback) {
-  if (typeof callback !== "function" || state.subscriptions.has(callback)) {
-    return noop;
-  }
-  state.subscriptions.set(callback, new Subscription(state, callback));
-  return () => {
-    unsubscribe(state, callback);
-  };
+	if (typeof callback !== "function" || state.subscriptions.has(callback)) return noop;
+	state.subscriptions.set(callback, new Subscription(state, callback));
+	return () => {
+		unsubscribe(state, callback);
+	};
 }
 function unsubscribe(state, callback) {
-  const subscription = state.subscriptions.get(callback);
-  state.subscriptions.delete(callback);
-  if (subscription != null) {
-    subscription.callback = noop;
-    subscription.state = void 0;
-  }
+	state.subscriptions.get(callback)?.destroy();
+	state.subscriptions.delete(callback);
 }
 
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, key + "" , value);
-class Reactive {
-  constructor(name, value, options) {
-    __publicField$1(this, "state", {
-      computeds: /* @__PURE__ */ new Set(),
-      effects: /* @__PURE__ */ new Set(),
-      equal: Object.is,
-      subscriptions: /* @__PURE__ */ new Map(),
-      value: void 0
-    });
-    this.state.value = value;
-    if (typeof options === "object" && typeof options.equal === "function") {
-      this.state.equal = options.equal;
-    }
-    Object.defineProperty(this, "$mora", {
-      value: name
-    });
-  }
-  /**
-   * Get the value _(without reactivity)_
-   */
-  peek() {
-    return this.state.value;
-  }
-  /**
-   * Subscribe to changes
-   */
-  subscribe(callback) {
-    return subscribe(this.state, callback);
-  }
-  /**
-   * JSON representation of the value
-   */
-  toJSON() {
-    return this.get();
-  }
-  /**
-   * String representation of the value
-   */
-  toString() {
-    return String(this.get());
-  }
-  /**
-   * Unsubscribe from changes
-   */
-  unsubscribe(callback) {
-    unsubscribe(this.state, callback);
-  }
-}
+var Reactive = class {
+	state = {
+		computeds: /* @__PURE__ */ new Set(),
+		effects: /* @__PURE__ */ new Set(),
+		equal: Object.is,
+		subscriptions: /* @__PURE__ */ new Map(),
+		value: void 0
+	};
+	constructor(name, value, options) {
+		this.state.value = value;
+		if (typeof options === "object" && typeof options.equal === "function") this.state.equal = options.equal;
+		Object.defineProperty(this, "$mora", { value: name });
+	}
+	peek() {
+		return this.state.value;
+	}
+	subscribe(callback) {
+		return subscribe(this.state, callback);
+	}
+	toJSON() {
+		return this.get();
+	}
+	toString() {
+		return String(this.get());
+	}
+	unsubscribe(callback) {
+		unsubscribe(this.state, callback);
+	}
+};
 
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
-let activeComputed;
-class Computed extends Reactive {
-  constructor(callback, options) {
-    super(computedName, void 0, options);
-    __publicField(this, "effect", {
-      dirty: true,
-      instance: void 0
-    });
-    this.effect.instance = effect(() => {
-      if (this.effect.dirty) {
-        const previousComputed = activeComputed;
-        activeComputed = this;
-        const value = callback();
-        activeComputed = previousComputed;
-        if (!this.state.equal(this.state.value, value)) {
-          this.state.value = value;
-          for (const computed2 of this.state.computeds) {
-            computed2.effect.dirty = true;
-          }
-          for (const effect2 of this.state.effects) {
-            batchedHandlers.add(effect2);
-          }
-          for (const [, subscription] of this.state.subscriptions) {
-            subscription.callback(value);
-          }
-        }
-        this.effect.dirty = false;
-      }
-    });
-  }
-  /**
-   * @inheritdoc
-   */
-  get() {
-    if (activeComputed != null && this !== activeComputed) {
-      this.state.computeds.add(activeComputed);
-    }
-    if (activeEffect != null && activeEffect !== this.effect.instance) {
-      this.state.effects.add(activeEffect);
-    }
-    if (this.effect.dirty && batchDepth === 0) {
-      runEffect(this.effect.instance);
-    }
-    return this.state.value;
-  }
-}
+var Computed = class extends Reactive {
+	effect = {
+		dirty: true,
+		instance: void 0
+	};
+	constructor(callback, options) {
+		super(NAME_COMPUTED, void 0, options);
+		this.effect.instance = effect(() => {
+			if (!this.effect.dirty) return;
+			const previousComputed = ACTIVE.computed;
+			ACTIVE.computed = this;
+			const value = callback();
+			ACTIVE.computed = previousComputed;
+			if (!this.state.equal(this.state.value, value)) {
+				this.state.value = value;
+				for (const computed$1 of this.state.computeds) computed$1.effect.dirty = true;
+				for (const effect$1 of this.state.effects) BATCH.handlers.add(effect$1);
+				for (const [, subscription] of this.state.subscriptions) subscription.callback(value);
+			}
+			this.effect.dirty = false;
+		});
+	}
+	get() {
+		if (ACTIVE.computed != null && this !== ACTIVE.computed) this.state.computeds.add(ACTIVE.computed);
+		if (ACTIVE.effect != null && ACTIVE.effect !== this.effect.instance) this.state.effects.add(ACTIVE.effect);
+		if (this.effect.dirty && BATCH.depth === 0) runEffect(this.effect.instance);
+		return this.state.value;
+	}
+};
 function computed(callback, options) {
-  return new Computed(callback, options);
+	return new Computed(callback, options);
 }
 
 function emitValue(state) {
-  for (const computed of state.computeds) {
-    computed.effect.dirty = true;
-  }
-  for (const effect of state.effects) {
-    batchedHandlers.add(effect);
-  }
-  for (const [, subscription] of state.subscriptions) {
-    batchedHandlers.add(subscription);
-  }
-  if (batchDepth === 0) {
-    flushHandlers();
-  }
+	for (const computed of state.computeds) computed.effect.dirty = true;
+	for (const effect of state.effects) BATCH.handlers.add(effect);
+	for (const [, subscription] of state.subscriptions) BATCH.handlers.add(subscription);
+	if (BATCH.depth === 0) flushHandlers();
 }
 function equalArrays(state, first, second) {
-  let { length } = first;
-  if (length !== second.length) {
-    return false;
-  }
-  let offset = 0;
-  if (length >= 100) {
-    offset = Math.round(length / 10);
-    offset = offset > 25 ? 25 : offset;
-    for (let index = 0; index < offset; index += 1) {
-      if (!state.equal(first[index], second[index])) {
-        return false;
-      }
-    }
-  }
-  length -= offset;
-  for (let index = offset; index < length; index += 1) {
-    if (!state.equal(first[index], second[index])) {
-      return false;
-    }
-  }
-  return true;
+	let { length } = first;
+	if (length !== second.length) return false;
+	let offset = 0;
+	if (length >= 100) {
+		offset = Math.round(length / 10);
+		offset = offset > 25 ? 25 : offset;
+		for (let index = 0; index < offset; index += 1) if (!state.equal(first[index], second[index])) return false;
+	}
+	length -= offset;
+	for (let index = offset; index < length; index += 1) if (!state.equal(first[index], second[index])) return false;
+	return true;
 }
 function getValue$1(state) {
-  if (activeComputed != null) {
-    state.computeds.add(activeComputed);
-  }
-  if (activeEffect != null) {
-    state.effects.add(activeEffect);
-  }
-  return state.value;
+	if (ACTIVE.computed != null) state.computeds.add(ACTIVE.computed);
+	if (ACTIVE.effect != null) state.effects.add(ACTIVE.effect);
+	return state.value;
+}
+
+var Signal = class extends Reactive {
+	constructor(value, options) {
+		super(NAME_SIGNAL, value, options);
+	}
+	get() {
+		return getValue$1(this.state);
+	}
+	set(value) {
+		if (!this.state.equal(this.state.value, value)) {
+			this.state.value = value;
+			emitValue(this.state);
+		}
+	}
+	update(callback) {
+		this.set(callback(this.state.value));
+	}
+};
+function signal(value, options) {
+	return new Signal(value, options);
 }
 
 function getReactiveValueInProxy(reactive, mapped, key, isArray) {
-  let item = mapped.get(key);
-  if (item == null) {
-    item = computed(() => {
-      const value = reactive.get();
-      return isArray ? value.at(key) : value[key];
-    });
-    mapped.set(key, item);
-  }
-  return item;
+	let item = mapped.get(key);
+	if (item == null) {
+		item = computed(() => {
+			const value = reactive.get();
+			return isArray ? value.at(key) : value[key];
+		});
+		mapped.set(key, item);
+	}
+	return item;
 }
 function setProxyValue(proxy, value) {
-  startBatch();
-  const proxyKeys = Object.keys(proxy);
-  const valueKeys = Object.keys(value);
-  let { length } = proxyKeys;
-  for (let index = 0; index < length; index += 1) {
-    const key = proxyKeys[index];
-    proxy[key] = valueKeys.includes(key) ? value[key] : void 0;
-  }
-  length = valueKeys.length;
-  for (let index = 0; index < length; index += 1) {
-    const key = valueKeys[index];
-    if (!proxyKeys.includes(key)) {
-      const keyedValue = value[key];
-      proxy[key] = keyedValue;
-    }
-  }
-  stopBatch();
-}
-function setValueInProxy(target, property, value, state, isArray, length) {
-  if (isArray) {
-    const isIndex = !Number.isNaN(Number(property));
-    const isLength = property === "length";
-    if (!isIndex && !isLength) {
-      return Reflect.set(target, property, value);
-    }
-  }
-  const previous = Reflect.get(target, property);
-  if (!state.equal(previous, value)) {
-    Reflect.set(target, property, value);
-    emitValue(state);
-    if (isArray) {
-      length == null ? void 0 : length.set(target.length);
-    }
-  }
-  return true;
-}
-
-class Signal extends Reactive {
-  constructor(value, options) {
-    super(signalName, value, options);
-  }
-  /**
-   * @inheritdoc
-   */
-  get() {
-    return getValue$1(this.state);
-  }
-  /**
-   * Set the value
-   */
-  set(value) {
-    if (!this.state.equal(this.state.value, value)) {
-      this.state.value = value;
-      emitValue(this.state);
-    }
-  }
-  /**
-   * Update the value _(based on the current value)_
-   */
-  update(callback) {
-    this.set(callback(this.state.value));
-  }
+	startBatch();
+	const proxyKeys = Object.keys(proxy);
+	const valueKeys = Object.keys(value);
+	let { length } = proxyKeys;
+	for (let index = 0; index < length; index += 1) {
+		const key = proxyKeys[index];
+		proxy[key] = valueKeys.includes(key) ? value[key] : void 0;
+	}
+	length = valueKeys.length;
+	for (let index = 0; index < length; index += 1) {
+		const key = valueKeys[index];
+		if (!proxyKeys.includes(key)) proxy[key] = value[key];
+	}
+	stopBatch();
 }
-function signal(value, options) {
-  return new Signal(value, options);
+function setValueInProxy(parameters) {
+	const { isArray, length, property, state, target, value } = parameters;
+	if (isArray) {
+		if (!(!Number.isNaN(Number(property)) || property === "length")) return Reflect.set(target, property, value);
+	}
+	const previous = Reflect.get(target, property);
+	if (!state.equal(previous, value)) {
+		Reflect.set(target, property, value);
+		emitValue(state);
+		if (isArray) length?.set(target.length);
+	}
+	return true;
 }
 
-var __typeError$1 = (msg) => {
-  throw TypeError(msg);
+var ReactiveArray = class extends Reactive {
+	#indiced = /* @__PURE__ */ new Map();
+	#size = signal(0);
+	get length() {
+		return this.#size.get();
+	}
+	set length(value) {
+		if (typeof value === "number" && value >= 0 && value !== this.state.value.length) this.get().length = value;
+	}
+	constructor(value, options) {
+		super(NAME_ARRAY, new Proxy(value, {
+			get: (target, property) => METHODS_UPDATE.has(property) ? updateArray(property, target, this.state, this.#size) : Reflect.get(target, property),
+			set: (target, property, value$1) => setValueInProxy({
+				property,
+				target,
+				value: value$1,
+				isArray: true,
+				state: this.state,
+				length: this.#size
+			})
+		}), options);
+		this.#size.set(value.length);
+	}
+	clear() {
+		this.length = 0;
+	}
+	filter(callback) {
+		return computed(() => this.get().filter(callback));
+	}
+	get(first) {
+		if (typeof first === "number") return getReactiveValueInProxy(this, this.#indiced, first, true).get();
+		if (first === "length") return this.length;
+		return getValue$1(this.state);
+	}
+	map(callback) {
+		return computed(() => this.get().map(callback));
+	}
+	notify() {
+		emitValue(this.state);
+	}
+	peek(value) {
+		if (value === "length") return this.#size.peek();
+		if (typeof value === "number") return this.state.value.at(value);
+		return [...this.state.value];
+	}
+	pop() {
+		return this.state.value.pop();
+	}
+	push(...items) {
+		return this.state.value.push(...items);
+	}
+	set(first, second) {
+		if (first == null || Array.isArray(first)) this.state.value.splice(0, this.state.value.length, ...first ?? []);
+		else if (first === "length") this.length = second;
+		else if (typeof first === "number" && !Number.isNaN(first)) setAtIndex(this.state.value, first, second);
+	}
+	shift() {
+		return this.state.value.shift();
+	}
+	splice(from, to, ...items) {
+		return this.state.value.splice(from, to ?? this.state.value.length, ...items);
+	}
+	subscribe(first, second) {
+		if (typeof first === "number" && typeof second === "function") return getReactiveValueInProxy(this, this.#indiced, first, true).subscribe(second);
+		return typeof first === "function" ? subscribe(this.state, first) : noop;
+	}
+	unshift(...items) {
+		return this.state.value.unshift(...items);
+	}
+	update(callback) {
+		const updated = callback(this.state.value);
+		if (updated == null || Array.isArray(updated)) this.set(updated);
+	}
 };
-var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
-var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _indiced, _size;
-class ReactiveArray extends Reactive {
-  constructor(value, options) {
-    super(
-      arrayName,
-      new Proxy(value, {
-        get: (target, property) => updateMethods.has(property) ? updateArray(property, target, this.state, __privateGet$1(this, _size)) : Reflect.get(target, property),
-        set: (target, property, value2) => setValueInProxy(
-          target,
-          property,
-          value2,
-          this.state,
-          true,
-          __privateGet$1(this, _size)
-        )
-      }),
-      options
-    );
-    __privateAdd$1(this, _indiced, /* @__PURE__ */ new Map());
-    __privateAdd$1(this, _size, signal(0));
-    __privateGet$1(this, _size).set(value.length);
-  }
-  /**
-   * The length of the array
-   */
-  get length() {
-    return __privateGet$1(this, _size).get();
-  }
-  /**
-   * Set the length of the array
-   */
-  set length(value) {
-    if (typeof value === "number" && value >= 0 && value !== this.state.value.length) {
-      this.get().length = value;
-    }
-  }
-  /**
-   * Clear the array
-   */
-  clear() {
-    this.length = 0;
-  }
-  get(first) {
-    if (typeof first === "number") {
-      return getReactiveValueInProxy(this, __privateGet$1(this, _indiced), first, true).get();
-    }
-    if (first === "length") {
-      return this.length;
-    }
-    return getValue$1(this.state);
-  }
-  /**
-   * Create a computed, filtered array
-   */
-  filter(callback) {
-    return computed(() => this.get().filter(callback));
-  }
-  /**
-   * Create a computed, mapped array
-   */
-  map(callback) {
-    return computed(() => this.get().map(callback));
-  }
-  peek(value) {
-    if (value === true) {
-      return __privateGet$1(this, _size).peek();
-    }
-    if (typeof value === "number") {
-      return this.state.value.at(value);
-    }
-    return [...this.state.value];
-  }
-  /**
-   * Remove and return the last item of the array
-   */
-  pop() {
-    return this.state.value.pop();
-  }
-  /**
-   * Add items to the end of the array
-   */
-  push(...items) {
-    return this.state.value.push(...items);
-  }
-  set(first, second) {
-    if (first == null || Array.isArray(first)) {
-      this.state.value.splice(0, this.state.value.length, ...first ?? []);
-    } else if (first === "length") {
-      this.length = second;
-    } else if (typeof first === "number") {
-      this.state.value[first] = second;
-    }
-  }
-  /**
-   * Remove and return the first item of the array
-   */
-  shift() {
-    return this.state.value.shift();
-  }
-  /**
-   * Remove and return items from the array _(and optionally add new items)_
-   */
-  splice(from, to, ...items) {
-    return this.state.value.splice(
-      from,
-      to ?? this.state.value.length,
-      ...items
-    );
-  }
-  subscribe(first, second) {
-    if (typeof first === "number" && typeof second === "function") {
-      return getReactiveValueInProxy(
-        this,
-        __privateGet$1(this, _indiced),
-        first,
-        true
-      ).subscribe(second);
-    }
-    return typeof first === "function" ? subscribe(this.state, first) : noop;
-  }
-  /**
-   * Add items to the beginning of the array
-   */
-  unshift(...items) {
-    return this.state.value.unshift(...items);
-  }
-  /**
-   * Update the value _(based on the current value)_
-   */
-  update(callback) {
-    const updated = callback(this.state.value);
-    if (updated == null || Array.isArray(updated)) {
-      this.set(updated);
-    }
-  }
-}
-_indiced = new WeakMap();
-_size = new WeakMap();
 function array(value, options) {
-  return new ReactiveArray(Array.isArray(value) ? value : [], options);
-}
-function updateArray(type, array2, state, length) {
-  const affectsLength = lengthAffectingMethods.has(type);
-  const previousArray = affectsLength ? [] : [...array2];
-  const previousLength = array2.length;
-  return (...args) => {
-    const result = array2[type](
-      ...args
-    );
-    if (affectsLength ? array2.length !== previousLength : !equalArrays(state, previousArray, array2)) {
-      emitValue(state);
-      length.set(array2.length);
-    }
-    return result;
-  };
-}
-const lengthAffectingMethods = /* @__PURE__ */ new Set([
-  "pop",
-  "push",
-  "shift",
-  "unshift"
-]);
-const updateMethods = /* @__PURE__ */ new Set([
-  ...lengthAffectingMethods,
-  "copyWithin",
-  "fill",
-  "reverse",
-  "sort",
-  "splice"
-]);
-
-function isKey(value) {
-  return typeof value === "number" || typeof value === "string";
-}
-function isPlainObject$1(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;
+	return new ReactiveArray(Array.isArray(value) ? value : [], options);
+}
+function updateArray(type, array$1, state, length) {
+	const affectsLength = METHODS_AFFECTING_LENGTH.has(type);
+	const previousArray = affectsLength ? [] : [...array$1];
+	const previousLength = array$1.length;
+	return (...args) => {
+		const result = array$1[type](...args);
+		if (affectsLength ? array$1.length !== previousLength : !equalArrays(state, previousArray, array$1)) {
+			emitValue(state);
+			length.set(array$1.length);
+		}
+		return result;
+	};
 }
-
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _keyed;
-class Store extends Reactive {
-  constructor(value, options) {
-    super(
-      storeName,
-      new Proxy(value, {
-        set: (target, property, value2) => setValueInProxy(target, property, value2, this.state, false)
-      }),
-      options
-    );
-    __privateAdd(this, _keyed, /* @__PURE__ */ new Map());
-  }
-  get(key) {
-    return isKey(key) ? getReactiveValueInProxy(this, __privateGet(this, _keyed), key, false).get() : getValue$1(this.state);
-  }
-  peek(key) {
-    return isKey(key) ? this.state.value[key] : { ...this.state.value };
-  }
-  set(first, second) {
-    if (isKey(first)) {
-      this.state.value[first] = second;
-    } else if (first == null || isPlainObject$1(first)) {
-      setProxyValue(this.state.value, first ?? {});
-    }
-  }
-  subscribe(first, second) {
-    if (isKey(first) && typeof second === "function") {
-      return getReactiveValueInProxy(this, __privateGet(this, _keyed), first, false).subscribe(
-        second
-      );
-    }
-    return typeof first === "function" ? subscribe(this.state, first) : noop;
-  }
-  /**
-   * Update the value _(based on the current value)_
-   */
-  update(callback) {
-    const updated = callback({ ...this.state.value });
-    if (updated == null || isPlainObject$1(updated)) {
-      setProxyValue(this.state.value, updated ?? {});
-    }
-  }
-}
-_keyed = new WeakMap();
-function store(value, options) {
-  return new Store(isPlainObject$1(value) ? value : {}, options);
+function setAtIndex(array$1, index, value) {
+	const actual = index < 0 ? array$1.length + index : index;
+	if (actual > -1) array$1[actual] = value;
 }
 
-function isChildNode(value) {
-	return value instanceof Node && childNodeTypes.has(value.nodeType);
+function isKey(value) {
+	return typeof value === "number" || typeof value === "string";
 }
-function isHTMLOrSVGElement(value) {
-	return value instanceof HTMLElement || value instanceof SVGElement;
+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;
 }
-var childNodeTypes = new Set([
-	1,
-	3,
-	7,
-	8,
-	10
-]);
 
 function getString(value) {
 	if (typeof value === "string") return value;
@@ -598,23 +373,64 @@ function getString(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 isNullableOrWhitespace(value) {
+	return value == null || EXPRESSION_WHITESPACE.test(getString(value));
 }
+var EXPRESSION_WHITESPACE = /^\s*$/;
 
-function isNullableOrWhitespace(value) {
-	return value == null || whiteSpaceExpression.test(getString(value));
+var Store = class extends Reactive {
+	#keyed = /* @__PURE__ */ new Map();
+	constructor(value, options) {
+		super(NAME_STORE, new Proxy(value, { set: (target, property, value$1) => setValueInProxy({
+			target,
+			property,
+			value: value$1,
+			isArray: false,
+			state: this.state
+		}) }), options);
+	}
+	get(key) {
+		return isKey(key) ? getReactiveValueInProxy(this, this.#keyed, key, false).get() : getValue$1(this.state);
+	}
+	peek(key) {
+		return isKey(key) ? this.state.value[key] : { ...this.state.value };
+	}
+	set(first, second) {
+		if (isKey(first)) this.state.value[first] = second;
+		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);
+		return typeof first === "function" ? subscribe(this.state, first) : noop;
+	}
+	update(callback) {
+		const updated = callback({ ...this.state.value });
+		if (updated == null || isPlainObject(updated)) setProxyValue(this.state.value, updated ?? {});
+	}
+};
+function store(value, options) {
+	return new Store(isPlainObject(value) ? value : {}, options);
+}
+
+function isChildNode(value) {
+	return value instanceof Node && CHILD_NODE_TYPES.has(value.nodeType);
+}
+function isHTMLOrSVGElement(value) {
+	return value instanceof HTMLElement || value instanceof SVGElement;
 }
-var whiteSpaceExpression = /^\s*$/;
+var CHILD_NODE_TYPES = new Set([
+	Node.ELEMENT_NODE,
+	Node.TEXT_NODE,
+	Node.PROCESSING_INSTRUCTION_NODE,
+	Node.COMMENT_NODE,
+	Node.DOCUMENT_TYPE_NODE
+]);
 
 function isAttribute(value) {
 	return value instanceof Attr || isPlainObject(value) && typeof value.name === "string" && typeof value.value === "string";
 }
 function isBadAttribute(first, second) {
-	return validateAttribute((attribute) => attribute == null || onPrefix.test(attribute.name) || sourcePrefix.test(attribute.name) && valuePrefix.test(String(attribute.value)), first, second);
+	return validateAttribute((attribute) => attribute == null || EXPRESSION_ON_PREFIX.test(attribute.name) || EXPRESSION_SOURCE_PREFIX.test(attribute.name) && EXPRESSION_VALUE_PREFIX.test(String(attribute.value)), first, second);
 }
 function isBooleanAttribute(value) {
 	return validateAttribute((attribute) => attribute != null && booleanAttributes.includes(attribute.name.toLowerCase()), value, "");
@@ -636,13 +452,16 @@ function isProperty(value) {
 function setAttribute$1(element, first, second) {
 	updateValue(element, first, second, updateAttribute);
 }
+function setProperty(element, first, second) {
+	updateValue(element, first, second, updateProperty$1);
+}
 function updateAttribute(element, name, value) {
-	if (booleanAttributes.includes(name.toLowerCase())) updateProperty$1(element, name, value);
+	if (booleanAttributes.includes(name.toLowerCase())) updateProperty$1(element, name, value, false);
 	else if (value == null) element.removeAttribute(name);
 	else element.setAttribute(name, typeof value === "string" ? value : getString(value));
 }
 function updateProperty$1(element, name, value, validate) {
-	const actual = name;
+	const actual = validate ?? true ? name.toLowerCase() : name;
 	if (actual === "hidden") element.hidden = value === "" || value === true;
 	else element[actual] = value === "" || typeof value === "string" && value.toLowerCase() === actual || value === true;
 }
@@ -660,6 +479,9 @@ function validateAttribute(callback, first, second) {
 	};
 	return callback(attribute);
 }
+var EXPRESSION_ON_PREFIX = /^on/i;
+var EXPRESSION_SOURCE_PREFIX = /^(href|src|xlink:href)$/i;
+var EXPRESSION_VALUE_PREFIX = /(data:text\/html|javascript:)/i;
 const booleanAttributes = Object.freeze([
 	"async",
 	"autofocus",
@@ -686,18 +508,7 @@ const booleanAttributes = Object.freeze([
 	"reversed",
 	"selected"
 ]);
-var onPrefix = /^on/i;
-var sourcePrefix = /^(href|src|xlink:href)$/i;
-var valuePrefix = /(data:text\/html|javascript:)/i;
 
-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(Array.isArray(value) ? value : [value], getOptions$1(options));
-}
 function sanitizeAttributes(element, attributes, options) {
 	const { length } = attributes;
 	for (let index = 0; index < length; index += 1) {
@@ -706,54 +517,199 @@ function sanitizeAttributes(element, attributes, options) {
 		else if (options.sanitizeBooleanAttributes && isInvalidBooleanAttribute(attribute)) element.setAttribute(attribute.name, "");
 	}
 }
-function sanitizeNodes(nodes, options) {
+function sanitizeNodes$1(nodes, options) {
 	const actual = nodes.filter((node) => node instanceof Node);
 	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.hasChildNodes()) sanitizeNodes([...node.childNodes], 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) {
-	if (typeof value !== "string" || value.trim().length === 0) return;
-	if (value in templates) return templates[value];
-	let template;
-	if (idPattern.test(value)) template = document.querySelector(`#${value}`);
-	templates[value] = template instanceof HTMLTemplateElement ? template : createTemplate(value);
-	return templates[value];
-}
-function html$1(value, sanitization) {
+function getHtml(value, options) {
 	if (typeof value !== "string" && !(value instanceof HTMLTemplateElement)) return [];
-	const options = sanitization == null || sanitization === true ? {} : isPlainObject(sanitization) ? { ...sanitization } : null;
-	const template = value instanceof HTMLTemplateElement ? value : getTemplate(value);
+	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");
-	const { length } = scripts;
-	for (let index = 0; index < length; index += 1) scripts[index].remove();
+	for (const script of scripts) script.remove();
 	cloned.normalize();
-	return options != null ? sanitize([...cloned.childNodes], options) : [...cloned.childNodes];
+	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, ignore);
+	return template;
 }
-var idPattern = /^[a-z][\w-]*$/i;
+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] == 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 = {};
 
-const controllers = new WeakMap();
-const eventNamePattern = /^@([\w-]+)(?::([a-z:]+))?$/i;
-const reason = 'Event removed as element was removed from document by Abydon';
+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\./;
+const EXPRESSION_ATTRIBUTE_STYLE_FULL = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
+const EXPRESSION_ATTRIBUTE_STYLE_PREFIX = /^style\./;
+const EXPRESSION_COMMENT_FULL = /^<!--abydon\.(\d+)-->$/;
+const EXPRESSION_COMMENT_CONTENT = /^abydon\.(\d+)$/;
+const EXPRESSION_EVENT_NAME = /^@([\w-]+)(?::([a-z:]+))?$/i;
+const REASON_EVENT_REMOVED = 'Event removed as element was removed from document by Abydon';
+
 function getController(element) {
-    let controller = controllers.get(element);
+    let controller = ABORT_CONTROLLERS.get(element);
     if (controller == null) {
         controller = new AbortController();
-        controllers.set(element, controller);
+        ABORT_CONTROLLERS.set(element, controller);
     }
     return controller;
 }
@@ -762,12 +718,12 @@ function getOptions(options) {
     return {
         capture: parts.includes('c') || parts.includes('capture'),
         once: parts.includes('o') || parts.includes('once'),
-        passive: !parts.includes('a') && !parts.includes('active'),
+        passive: !(parts.includes('a') || parts.includes('active')),
     };
 }
 function mapEvent(element, name, value) {
     element.removeAttribute(name);
-    const [, type, options] = eventNamePattern.exec(name) ?? [];
+    const [, type, options] = EXPRESSION_EVENT_NAME.exec(name) ?? [];
     if (typeof value === 'function' && type != null) {
         element.addEventListener(type, value, {
             ...getOptions(options ?? ''),
@@ -776,26 +732,8 @@ function mapEvent(element, name, value) {
     }
 }
 function removeEvents(element) {
-    controllers.get(element)?.abort(reason);
-    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);
+    ABORT_CONTROLLERS.get(element)?.abort(REASON_EVENT_REMOVED);
+    ABORT_CONTROLLERS.delete(element);
 }
 
 function createNodes(value) {
@@ -808,7 +746,7 @@ function createNodes(value) {
     return [new Text(getString(value))];
 }
 function removeNodes(nodes) {
-    sanitiseNodes(nodes);
+    sanitizeNodes(nodes);
     const { length } = nodes;
     for (let index = 0; index < length; index += 1) {
         nodes[index].remove();
@@ -821,7 +759,7 @@ function replaceNodes(from, to) {
         from[index].remove();
     }
 }
-function sanitiseNodes(nodes) {
+function sanitizeNodes(nodes) {
     const { length } = nodes;
     for (let index = 0; index < length; index += 1) {
         const node = nodes[index];
@@ -829,21 +767,18 @@ function sanitiseNodes(nodes) {
             removeEvents(node);
         }
         if (node.hasChildNodes()) {
-            sanitiseNodes([...node.childNodes]);
+            sanitizeNodes([...node.childNodes]);
         }
     }
 }
 
-const classExpression = /^class\./;
-const styleFullExpression = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
-const stylePrefixExpression = /^style\./;
 function setAttribute(data, element, name, value) {
     element.removeAttribute(name);
     switch (true) {
-        case classExpression.test(name):
+        case EXPRESSION_ATTRIBUTE_CLASS.test(name):
             setClasses(data, element, name, value);
             return;
-        case stylePrefixExpression.test(name):
+        case EXPRESSION_ATTRIBUTE_STYLE_PREFIX.test(name):
             setStyle(data, element, name, value);
             return;
         default:
@@ -860,7 +795,7 @@ function setClasses(data, element, name, value) {
             element.classList.remove(...classes);
         }
     }
-    const classes = name.slice(6).split('.');
+    const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split('.');
     if (isReactive(value)) {
         data.mora.subscribers.add(value.subscribe(update));
     }
@@ -869,6 +804,10 @@ function setClasses(data, element, name, value) {
     }
 }
 function setStyle(data, element, name, value) {
+    const [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name) ?? [];
+    if (property == null) {
+        return;
+    }
     function update(value) {
         if (value == null || value === false || (value === true && unit == null)) {
             element.style.removeProperty(property);
@@ -877,22 +816,21 @@ function setStyle(data, element, name, value) {
             element.style.setProperty(property, value === true ? unit : getString(value));
         }
     }
-    const [, property, unit] = styleFullExpression.exec(name) ?? [];
-    if (property != null) {
-        if (isReactive(value)) {
-            data.mora.subscribers.add(value.subscribe(update));
-        }
-        else {
-            update(value);
-        }
+    if (isReactive(value)) {
+        data.mora.subscribers.add(value.subscribe(update));
+    }
+    else {
+        update(value);
     }
 }
 function setValue(data, element, name, value) {
-    const callback = isBooleanAttribute(name) && name in element
-        ? name === 'selected'
-            ? updateSelected
-            : updateProperty
-        : setAttribute$1;
+    let callback;
+    if (isBooleanAttribute(name) && name in element) {
+        callback = name === 'selected' ? updateSelected : updateProperty;
+    }
+    else {
+        callback = setAttribute$1;
+    }
     if (isReactive(value)) {
         data.mora.subscribers.add(value.subscribe(next => {
             callback(element, name, next);
@@ -902,11 +840,6 @@ function setValue(data, element, name, value) {
         callback(element, name, value);
     }
 }
-function triggerSelectChange(select) {
-    if (select != null) {
-        select.dispatchEvent(new Event('change', { bubbles: true }));
-    }
-}
 function updateProperty(element, name, value) {
     element[name] = value === true;
 }
@@ -914,14 +847,13 @@ function updateSelected(element, name, value) {
     const select = element.closest('select');
     const options = [...(select?.options ?? [])];
     if (select != null && options.includes(element)) {
-        triggerSelectChange(select);
+        select.dispatchEvent(new Event('change', { bubbles: true }));
     }
     updateProperty(element, name, value);
 }
 
-const commentExpression$1 = /^<!--abydon\.(\d+)-->$/;
 function getValue(data, original) {
-    const matches = commentExpression$1.exec(original ?? '');
+    const matches = EXPRESSION_COMMENT_FULL.exec(original ?? '');
     return matches == null ? original : data.values[+matches[1]];
 }
 function mapAttributes(data, element) {
@@ -930,24 +862,27 @@ function mapAttributes(data, element) {
     for (let index = 0; index < length; index += 1) {
         const { name, value } = attributes[index];
         const actual = getValue(data, value);
-        if (name.startsWith('@')) {
-            mapEvent(element, name, actual);
-        }
-        else if (name.includes('.') ||
-            typeof value === 'function' ||
-            isReactive(actual)) {
-            mapValue$1(data, element, name, actual);
+        switch (true) {
+            case name.startsWith('@'):
+                mapEvent(element, name, actual);
+                break;
+            case name.includes('.') ||
+                typeof actual === 'function' ||
+                isReactive(actual):
+                mapValue$1(data, element, name, actual);
+                break;
+            case isBooleanAttribute(name):
+                setProperty(element, name, value);
+                break;
         }
     }
 }
 function mapValue$1(data, element, name, value) {
-    switch (true) {
-        case typeof value === 'function':
-            setComputedAttribute(data, element, name, value);
-            break;
-        default:
-            setAttribute(data, element, name, value);
-            break;
+    if (typeof value === 'function') {
+        setComputedAttribute(data, element, name, value);
+    }
+    else {
+        setAttribute(data, element, name, value);
     }
 }
 function setComputedAttribute(data, element, name, callback) {
@@ -956,6 +891,44 @@ function setComputedAttribute(data, element, name, callback) {
     setAttribute(data, element, name, value);
 }
 
+//
+function addToArray(identifiers, items, nodes, added) {
+    let position = nodes[0];
+    const before = added && !identifiers.previous.includes(items.templates[0].identifier);
+    const next = items.next.flatMap(fragment => fragment.get().flatMap(node => ({
+        identifier: fragment.identifier,
+        value: node,
+    })));
+    const { length } = next;
+    for (let index = 0; index < length; index += 1) {
+        const node = next[index];
+        if (!(added && identifiers.previous.includes(node.identifier))) {
+            if (index === 0 && before) {
+                position.before(node.value);
+            }
+            else {
+                position.after(node.value);
+            }
+        }
+        position = node.value;
+    }
+}
+function handleArray(identifiers, items, nodes) {
+    const next = items.templates.map(template => items.fragments?.find(fragment => fragment.identifier === template.identifier) ?? template);
+    const comparison = compareArrays(items.fragments ?? [], items.templates);
+    if (comparison !== 'removed') {
+        addToArray(identifiers, { ...items, next }, nodes, comparison === 'added');
+    }
+    const toRemove = items.fragments?.filter(fragment => !identifiers.next.includes(fragment.identifier)) ?? [];
+    const { length } = toRemove;
+    for (let index = 0; index < length; index += 1) {
+        toRemove[index].remove();
+    }
+    return {
+        fragments: next,
+        nodes: next.flatMap(fragment => fragment.get()),
+    };
+}
 function removeFragments(fragments) {
     if (fragments != null) {
         const { length } = fragments;
@@ -964,133 +937,128 @@ function removeFragments(fragments) {
         }
     }
 }
-function setArray(fragments, nodes, comment, text, value) {
+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 {
-            nodes: setText(fragments, nodes, comment, text, value),
+            nodes: setText(item, comment, value),
         };
     }
     let templates = value.filter(item => isFragment(item) && item.identifier != null);
-    const identifiers = templates.map(fragment => fragment.identifier);
-    const oldIdentifiers = fragments?.map(fragment => fragment.identifier) ?? [];
-    if (new Set(identifiers).size !== templates.length) {
+    const next = templates.map(fragment => fragment.identifier);
+    const previous = item.fragments?.map(fragment => fragment.identifier) ?? [];
+    if (new Set(next).size !== templates.length) {
         templates = [];
     }
     const noTemplates = templates.length === 0;
     if (noTemplates ||
-        nodes == null ||
-        oldIdentifiers.some(identifier => identifier == null)) {
+        item.nodes == null ||
+        previous.some(identifier => identifier == null)) {
         return {
             fragments: noTemplates ? undefined : templates,
-            nodes: setNodes(fragments, nodes, comment, text, noTemplates
+            nodes: setNodes(item, comment, noTemplates
                 ? value.flatMap(item => createNodes(item))
                 : templates.flatMap(template => template.get())),
         };
     }
-    const next = templates.map(template => fragments?.find(fragment => fragment.identifier === template.identifier) ?? template);
-    const comparison = compareArrays(fragments ?? [], templates);
-    if (comparison !== 'removed') {
-        let position = nodes[0];
-        const before = comparison === 'added' &&
-            !oldIdentifiers.includes(templates[0].identifier);
-        const items = next.flatMap(fragment => fragment.get().flatMap(node => ({
-            identifier: fragment.identifier,
-            value: node,
-        })));
-        const { length } = items;
-        for (let index = 0; index < length; index += 1) {
-            const item = items[index];
-            if (comparison === 'dissimilar' ||
-                !oldIdentifiers.includes(item.identifier)) {
-                if (index === 0 && before) {
-                    position.before(item.value);
-                }
-                else {
-                    position.after(item.value);
-                }
-            }
-            position = item.value;
-        }
-    }
-    const toRemove = fragments?.filter(fragment => !identifiers.includes(fragment.identifier)) ?? [];
-    const { length } = toRemove;
-    for (let index = 0; index < length; index += 1) {
-        toRemove[index].remove();
-    }
-    return {
-        fragments: next,
-        nodes: next.flatMap(fragment => fragment.get()),
-    };
+    return handleArray({
+        next,
+        previous,
+    }, {
+        templates,
+        fragments: item.fragments ?? [],
+    }, item.nodes);
 }
-function setNodes(fragments, nodes, comment, text, next) {
-    if (nodes == null) {
+function setNodes(item, comment, next) {
+    if (item.nodes == null) {
         if (comment.parentNode != null) {
             replaceNodes([comment], next);
         }
-        else if (text.parentNode != null) {
-            replaceNodes([text], next);
+        else if (item.text?.parentNode != null) {
+            replaceNodes([item.text], next);
         }
     }
     else {
-        replaceNodes(nodes, next);
+        replaceNodes(item.nodes, next);
     }
-    removeFragments(fragments);
+    removeFragments(item.fragments);
     return next;
 }
 function setReactiveValue(data, comment, reactive) {
-    const item = data.items.find(item => item.nodes.includes(comment));
-    const text = new Text();
-    let fragments;
-    let nodes;
+    let item = data.items.find(item => item.nodes?.includes(comment));
+    item ??= {};
+    item.text = new Text();
     data.mora.subscribers.add(reactive.subscribe(value => {
         if (Array.isArray(value)) {
-            const result = setArray(fragments, nodes, comment, text, value);
-            fragments = typeof result === 'boolean' ? undefined : result?.fragments;
-            nodes =
-                typeof result === 'boolean'
-                    ? result
-                        ? [text]
-                        : undefined
-                    : result?.nodes;
+            setReactiveValueForArray(item, comment, value);
         }
         else {
-            const valueIsFragment = isFragment(value);
-            fragments = valueIsFragment ? [value] : undefined;
-            if (valueIsFragment || isChildNode(value)) {
-                nodes = setNodes(fragments, nodes, comment, text, createNodes(value));
-            }
-            else {
-                nodes = setText(fragments, nodes, comment, text, value);
-            }
-        }
-        if (item != null) {
-            item.fragments = fragments;
-            item.nodes = [...(nodes ?? [comment])];
+            setReactiveValueForSingle(item, comment, value);
         }
+        item.nodes = [...(item.nodes ?? [comment])];
     }));
 }
-function setText(fragments, nodes, comment, text, value) {
+function setReactiveValueForArray(item, comment, value) {
+    const result = setArray(item, comment, value);
+    item.fragments = typeof result === 'boolean' ? undefined : result?.fragments;
+    if (typeof result === 'boolean') {
+        if (result) {
+            item.nodes = item.text == null ? [] : [item.text];
+        }
+        else {
+            item.nodes = undefined;
+        }
+    }
+    else {
+        item.nodes = result?.nodes;
+    }
+}
+function setReactiveValueForSingle(item, comment, value) {
+    const valueIsFragment = isFragment(value);
+    item.fragments = valueIsFragment ? [value] : undefined;
+    if (valueIsFragment || isChildNode(value)) {
+        item.nodes = setNodes(item, comment, createNodes(value));
+    }
+    else {
+        item.nodes = setText(item, comment, value);
+    }
+}
+function setText(item, comment, value) {
     const isNullable = isNullableOrWhitespace(value);
-    text.textContent = isNullable ? '' : getString(value);
+    if (item.text != null) {
+        item.text.textContent = isNullable ? '' : getString(value);
+    }
     let result = false;
-    if (nodes != null) {
-        replaceNodes(nodes, [isNullable ? comment : text]);
+    if (item.nodes != null) {
+        replaceText(item, comment, isNullable);
         result = !isNullable;
     }
     else if (isNullable && comment.parentNode == null) {
-        text.replaceWith(comment);
+        item.text?.replaceWith(comment);
     }
-    else if (!isNullable && text.parentNode == null) {
-        comment.replaceWith(text);
+    else if (!isNullable && item?.text?.parentNode == null) {
+        if (item.text != null) {
+            comment.replaceWith(item.text);
+        }
         result = true;
     }
-    removeFragments(fragments);
-    return result ? [text] : undefined;
+    removeFragments(item.fragments);
+    if (result) {
+        return item.text == null ? [] : [item.text];
+    }
 }
 
-const commentExpression = /^abydon\.(\d+)$/;
 function mapNode(data, comment) {
-    const matches = commentExpression.exec(comment.textContent ?? '');
+    const matches = EXPRESSION_COMMENT_CONTENT.exec(comment.textContent ?? '');
     const value = matches == null ? null : data.values[+matches[1]];
     if (value != null) {
         mapValue(data, comment, value);
@@ -1117,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;
@@ -1126,7 +1098,7 @@ function mapValue(data, comment, value) {
     }
 }
 function replaceComment(data, comment, value) {
-    const item = data.items.find(item => item.nodes.includes(comment));
+    const item = data.items.find(item => item.nodes?.includes(comment));
     const nodes = createNodes(value);
     if (item != null) {
         item.fragments = isFragment(value) ? [value] : undefined;
@@ -1157,22 +1129,36 @@ function handleExpression(data, prefix, expression) {
     return isNullableOrWhitespace(expression) ? prefix : `${prefix}${expression}`;
 }
 function parse(data) {
+    if (data.template != null) {
+        return data.template;
+    }
     const { length } = data.strings;
-    let template = '';
+    data.template = '';
     for (let index = 0; index < length; index += 1) {
-        template += handleExpression(data, data.strings[index], data.expressions[index]);
+        data.template += handleExpression(data, data.strings[index], data.expressions[index]);
     }
-    return template;
+    data.expressions = [];
+    data.strings = [];
+    return data.template;
 }
 
 class Fragment {
-    $fragment = true;
-    data;
+    #data;
+    #configuration = {
+        identifier: undefined,
+        ignoreCache: false,
+    };
+    /**
+     * Fragment identifier
+     */
     get identifier() {
-        return this.data.identifier;
+        return this.#configuration.identifier;
     }
     constructor(strings, expressions) {
-        this.data = {
+        Object.defineProperty(this, '$fragment', {
+            value: true,
+        });
+        this.#data = {
             expressions,
             strings,
             items: [],
@@ -1184,52 +1170,90 @@ class Fragment {
         };
     }
     /**
-     * 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());
     }
     /**
-     * Gets a list of the fragment's nodes
+     * Configure the fragment
+     * @param configuration Configuration options
+     * @returns Fragment
+     */
+    configure(configuration) {
+        const actual = isPlainObject(configuration) ? configuration : {};
+        if (actual.identifier !== undefined) {
+            this.#configuration.identifier = actual.identifier;
+        }
+        if (typeof actual.ignoreCache === 'boolean') {
+            this.#configuration.ignoreCache = actual.ignoreCache;
+        }
+        return this;
+    }
+    /**
+     * Get a list of the fragment's nodes
+     * @returns List of nodes
      */
     get() {
-        if (this.data.items.length === 0) {
-            const parsed = parse(this.data);
+        const data = this.#data;
+        if (data.items.length === 0) {
+            const parsed = parse(data);
             const templated = html$1(parsed, {
+                ignoreCache: this.#configuration.ignoreCache,
                 sanitizeBooleanAttributes: false,
             });
-            this.data.items.splice(0, this.data.items.length, ...templated.map(node => ({
+            data.items.splice(0, data.items.length, ...templated.map(node => ({
                 nodes: [node],
             })));
-            mapNodes(this.data, this.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 [
-            ...this.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.data.identifier = identifier;
+        this.#configuration.identifier = identifier;
         return this;
     }
     /**
-     * Removes the fragment from the DOM
+     * Remove the fragment from the DOM
      */
     remove() {
-        removeFragment(this.data);
+        removeFragment(this.#data);
     }
 }
 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 ?? [];
-        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);
         }
-        removeNodes(nodes);
     }
-    data.items.splice(0, length);
 }
 function removeMora(data) {
     const unsubscribers = [...data.mora.subscribers];
@@ -1240,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 };