@oscarpalmer/abydon 0.4.0 → 0.6.0

package/dist/index.js

@@ -15,7 +15,27 @@ var isNullableOrWhitespace = function(value) {
   return value == null || /^\s*$/.test(getString(value));
 };
 
+// src/helpers/index.ts
+function isFragment(value) {
+  return typeof value === "object" && value != null && "$fragment" in value && value.$fragment === true;
+}
+function isFragmentElement(value) {
+  return value instanceof HTMLElement || value instanceof SVGElement;
+}
+function isFragmentNode(value) {
+  return value instanceof Comment || value instanceof Element || value instanceof Text;
+}
+
 // src/helpers/dom.ts
+function createNodes(value) {
+  if (isFragmentNode(value)) {
+    return [value];
+  }
+  if (isFragment(value)) {
+    return value.get();
+  }
+  return [new Text(getString(value))];
+}
 function createTemplate(html) {
   const template = document.createElement("template");
   template.innerHTML = html;
@@ -33,39 +53,447 @@ function createTemplate(html) {
 function getNodes(node) {
   return /^documentfragment$/i.test(node.constructor.name) ? [...node.childNodes] : [node];
 }
+function replaceNodes(from, to) {
+  const { length } = from;
+  for (let index = 0;index < length; index += 1) {
+    const node = from[index];
+    if (index === 0) {
+      node.replaceWith(...to);
+    } else {
+      node.remove();
+    }
+  }
+}
+
+// node_modules/@oscarpalmer/sentinel/node_modules/@oscarpalmer/atoms/dist/js/queue.mjs
+if (globalThis._atomic_queued == null) {
+  const queued = new Set;
+  Object.defineProperty(globalThis, "_atomic_queued", {
+    get() {
+      return queued;
+    }
+  });
+}
+
+// node_modules/@oscarpalmer/sentinel/dist/global.mjs
+if (globalThis._sentinels == null) {
+  const effects = [];
+  Object.defineProperty(globalThis, "_sentinels", {
+    get() {
+      return effects;
+    }
+  });
+}
+
+// node_modules/@oscarpalmer/sentinel/dist/effect.mjs
+var effect = function(callback) {
+  const state = {
+    callback,
+    active: false,
+    reactives: new Set
+  };
+  const instance = Object.create({
+    start() {
+      if (!state.active) {
+        state.active = true;
+        const index = globalThis._sentinels.push(state) - 1;
+        state.callback();
+        globalThis._sentinels.splice(index, 1);
+      }
+    },
+    stop() {
+      if (state.active) {
+        state.active = false;
+        for (const reactive of state.reactives) {
+          reactive.callbacks.any.delete(state);
+          for (const [key, keyed] of reactive.callbacks.values) {
+            keyed.delete(state);
+            if (keyed.size === 0) {
+              reactive.callbacks.keys.delete(key);
+            }
+          }
+        }
+        state.reactives.clear();
+      }
+    }
+  });
+  Object.defineProperty(instance, "$sentinel", {
+    value: "effect"
+  });
+  instance.start();
+  return instance;
+};
+
+// node_modules/@oscarpalmer/sentinel/dist/helpers/is.mjs
+var isReactive = function(value) {
+  return isSentinel(value, /^array|computed|signal|store$/i);
+};
+var isSentinel = function(value, expression) {
+  return expression.test(value?.$sentinel ?? "");
+};
+
+// node_modules/@oscarpalmer/sentinel/dist/helpers/value.mjs
+var arrayOperations = new Set([
+  "copyWithin",
+  "fill",
+  "pop",
+  "push",
+  "reverse",
+  "shift",
+  "sort",
+  "splice",
+  "unshift"
+]);
+
+// node_modules/@oscarpalmer/sentinel/dist/reactive/index.mjs
+var primitives = new Set(["boolean", "number", "string"]);
+
+// src/node/value.ts
+function setReactiveNode(comment, reactive3) {
+  const text = new Text;
+  let nodes;
+  effect(() => {
+    const value10 = reactive3.get();
+    if (isFragment(value10) || isFragmentNode(value10)) {
+      const next = createNodes(value10);
+      if (nodes == null) {
+        if (comment.parentNode != null) {
+          replaceNodes([comment], next);
+        } else if (text.parentNode != null) {
+          replaceNodes([text], next);
+        }
+      } else {
+        replaceNodes(nodes, next);
+      }
+      nodes = next;
+      return;
+    }
+    const isNullable = isNullableOrWhitespace(value10);
+    text.textContent = getString(value10);
+    if (nodes != null) {
+      replaceNodes(nodes, [isNullable ? comment : text]);
+    } else if (isNullable && comment.parentNode == null) {
+      text.replaceWith(comment);
+    } else if (!isNullable && text.parentNode == null) {
+      comment.replaceWith(text);
+    }
+    nodes = undefined;
+  });
+}
+
+// src/node/event.ts
+function mapEvent(element, name, value10) {
+  element.removeAttribute(name);
+  if (typeof value10 !== "function") {
+    return;
+  }
+}
+
+// node_modules/@oscarpalmer/atoms/dist/js/element/closest.mjs
+var closest = function(origin, selector, context) {
+  const elements = [...(context ?? document).querySelectorAll(selector)];
+  const { length } = elements;
+  if (length === 0) {
+    return [];
+  }
+  const distances = [];
+  let minimum = null;
+  for (let index = 0;index < length; index += 1) {
+    const element = elements[index];
+    const distance = calculateDistance(origin, element);
+    if (distance < 0) {
+      continue;
+    }
+    if (minimum == null || distance < minimum) {
+      minimum = distance;
+    }
+    distances.push({
+      distance,
+      element
+    });
+  }
+  return minimum == null ? [] : distances.filter((found) => found.distance === minimum).map((found) => found.element);
+};
+var calculateDistance = function(origin, target) {
+  const comparison = origin.compareDocumentPosition(target);
+  const children = [...origin.parentElement?.children ?? []];
+  switch (true) {
+    case children.includes(target):
+      return Math.abs(children.indexOf(origin) - children.indexOf(target));
+    case !!(comparison & 2 || comparison & 8):
+      return traverse(origin, target);
+    case !!(comparison & 4 || comparison & 16):
+      return traverse(target, origin);
+    default:
+      return -1;
+  }
+};
+var traverse = function(from, to) {
+  const children = [...to.children];
+  if (children.includes(from)) {
+    return children.indexOf(from) + 1;
+  }
+  let current = from;
+  let distance = 0;
+  let parent = from.parentElement;
+  while (parent != null) {
+    if (parent === to) {
+      return distance + 1;
+    }
+    const children2 = [...parent.children ?? []];
+    if (children2.includes(to)) {
+      return distance + Math.abs(children2.indexOf(current) - children2.indexOf(to));
+    }
+    const index = children2.findIndex((child) => child.contains(to));
+    if (index > -1) {
+      return distance + Math.abs(index - children2.indexOf(current)) + traverse(to, children2[index]);
+    }
+    current = parent;
+    distance += 1;
+    parent = parent.parentElement;
+  }
+  return -1e6;
+};
+// src/node/attribute/value.ts
+function setAttribute(element2, name, value10) {
+  element2.removeAttribute(name);
+  switch (true) {
+    case classPattern.test(name):
+      setClasses(element2, name, value10);
+      return;
+    case stylePattern.test(name):
+      setStyle(element2, name, value10);
+      return;
+    default:
+      setValue2(element2, name, value10);
+      break;
+  }
+}
+var setClasses = function(element2, name, value10) {
+  function update(value11) {
+    if (/^(|true)$/.test(getString(value11))) {
+      element2.classList.add(...classes);
+    } else {
+      element2.classList.remove(...classes);
+    }
+  }
+  const classes = name.slice(6).split(".");
+  if (isReactive(value10)) {
+    effect(() => {
+      update(value10.get());
+    });
+  } else {
+    update(value10);
+  }
+};
+var setStyle = function(element2, name, value10) {
+  function update(value11) {
+    if (value11 == null || value11 === false || value11 === true && unit == null) {
+      element2.style.removeProperty(property);
+    } else {
+      element2.style.setProperty(property, value11 === true ? unit : getString(value11));
+    }
+  }
+  const [, property, unit] = /^\w+\.([a-z-]+)(?:\.(\w+))?$/i.exec(name) ?? [];
+  if (property == null) {
+    return;
+  }
+  if (isReactive(value10)) {
+    effect(() => {
+      update(value10.get());
+    });
+  } else {
+    update(value10);
+  }
+};
+var setValue2 = function(element2, name, value10) {
+  const callback = booleanAttributes.has(name) && name in element2 ? name === "selected" ? updateSelected(element2) : updateProperty : updateAttribute;
+  if (isReactive(value10)) {
+    effect(() => {
+      callback(element2, name, value10.get());
+    });
+  } else {
+    callback(element2, name, value10);
+  }
+};
+var triggerSelectChange = function(select) {
+  if (select != null) {
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+};
+var updateAttribute = function(element2, name, value10) {
+  if (value10 == null) {
+    element2.removeAttribute(name);
+  } else {
+    element2.setAttribute(name, getString(value10));
+  }
+};
+var updateProperty = function(element2, name, value10) {
+  element2[name] = /^(|true)$/.test(getString(value10));
+};
+var updateSelected = function(element2) {
+  const select = closest(element2, "select")[0];
+  const options = [...select?.options ?? []];
+  return (element3, name, value10) => {
+    if (select != null && options.includes(element3)) {
+      triggerSelectChange(select);
+    }
+    updateProperty(element3, name, value10);
+  };
+};
+var booleanAttributes = new Set([
+  "checked",
+  "disabled",
+  "hidden",
+  "inert",
+  "multiple",
+  "open",
+  "readOnly",
+  "required",
+  "selected"
+]);
+var classPattern = /^class\./;
+var stylePattern = /^style\./;
+
+// src/node/attribute/index.ts
+var getValue2 = function(data2, original) {
+  const matches = commentExpression.exec(original ?? "");
+  return matches == null ? original : data2.values[+matches[1]];
+};
+function isBadAttribute(name, value11) {
+  return /^on/i.test(name) || /^(href|src|xlink:href)$/i.test(name) && /(data:text\/html|javascript:)/i.test(value11);
+}
+function mapAttributes(data2, element2) {
+  const attributes = [...element2.attributes];
+  const { length } = attributes;
+  for (let index = 0;index < length; index += 1) {
+    const { name, value: value11 } = attributes[index];
+    if (isBadAttribute(name, value11)) {
+      element2.removeAttribute(name);
+      continue;
+    }
+    const actual = getValue2(data2, value11);
+    if (name.startsWith("@")) {
+      mapEvent(element2, name, actual);
+    } else if (name.includes(".") || isReactive(actual)) {
+      mapValue(element2, name, actual);
+    }
+  }
+}
+var mapValue = function(element2, name, value11) {
+  switch (true) {
+    case typeof value11 === "function":
+      mapValue(element2, name, value11());
+      return;
+    default:
+      setAttribute(element2, name, value11);
+      break;
+  }
+};
+var commentExpression = /^<!--abydon\.(\d+)-->$/;
+
+// src/node/index.ts
+var mapNode = function(data2, comment) {
+  const matches = commentExpression2.exec(comment.textContent ?? "");
+  const value12 = matches == null ? null : data2.values[+matches[1]];
+  if (value12 != null) {
+    mapValue2(comment, value12);
+  }
+};
+function mapNodes(data2, nodes) {
+  const { length } = nodes;
+  for (let index = 0;index < length; index += 1) {
+    const node = nodes[index];
+    if (node instanceof Comment) {
+      mapNode(data2, node);
+      continue;
+    }
+    if (isFragmentElement(node)) {
+      mapAttributes(data2, node);
+    }
+    if (node.hasChildNodes()) {
+      mapNodes(data2, [...node.childNodes]);
+    }
+  }
+}
+var mapValue2 = function(comment, value12) {
+  switch (true) {
+    case typeof value12 === "function":
+      mapValue2(comment, value12());
+      return;
+    case isReactive(value12):
+      setReactiveNode(comment, value12);
+      break;
+    default:
+      comment.replaceWith(...createNodes(value12));
+      break;
+  }
+};
+var commentExpression2 = /^abydon\.(\d+)$/;
 
 // src/fragment.ts
 function createFragment(strings, expressions) {
-  const data = {
+  const data2 = {
     expressions,
     strings,
-    nodes: []
+    nodes: [],
+    values: []
   };
   const instance = Object.create({
-    append(parent) {
-      if (data.nodes.length > 0) {
-        return parent.append(...data.nodes);
+    appendTo(element2) {
+      element2.append(...this.get());
+    },
+    get() {
+      if (data2.nodes.length === 0) {
+        const parsed = parse2(data2);
+        const templated = createTemplate(parsed);
+        data2.nodes.splice(0, data2.nodes.length, ...getNodes(templated));
+        mapNodes(data2, data2.nodes);
+      }
+      return [...data2.nodes];
+    },
+    remove() {
+      const { length } = data2.nodes;
+      for (let index = 0;index < length; index += 1) {
+        const node2 = data2.nodes[index];
+        node2.parentNode?.removeChild(node2);
       }
-      const parsed = parse(data);
-      const templated = createTemplate(parsed);
-      data.nodes.splice(0, data.nodes.length, ...getNodes(templated));
-      parent.append(...data.nodes);
+      data2.nodes.splice(0, data2.nodes.length);
     }
   });
+  Object.defineProperty(instance, "$fragment", {
+    value: true
+  });
   return instance;
 }
 
 // src/html.ts
+var handleExpression = function(data2, prefix, expression) {
+  if (isNullableOrWhitespace(expression)) {
+    return prefix;
+  }
+  if (Array.isArray(expression)) {
+    const { length } = expression;
+    let expressions = "";
+    for (let index = 0;index < length; index += 1) {
+      expressions += handleExpression(data2, "", expression[index]);
+    }
+    return `${prefix}${expressions}`;
+  }
+  if (typeof expression === "object") {
+    const index = data2.values.push(expression) - 1;
+    return `${prefix}<!--abydon.${index}-->`;
+  }
+  return `${prefix}${expression}`;
+};
 function html2(strings, ...values) {
   return createFragment(strings, values);
 }
-function parse(data) {
-  const { length } = data.strings;
+function parse2(data2) {
+  const { length } = data2.strings;
   let template = "";
   for (let index = 0;index < length; index += 1) {
-    const part = data.strings[index];
-    const expression = data.expressions[index];
-    template += isNullableOrWhitespace(expression) ? part : `${part}${expression}`;
+    template += handleExpression(data2, data2.strings[index], data2.expressions[index]);
   }
   return template;
 }

package/package.json

@@ -4,7 +4,8 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.61.0"
+		"@oscarpalmer/atoms": "^0.61.0",
+		"@oscarpalmer/sentinel": "^0.22.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.8.3",
@@ -35,5 +36,5 @@
 		"watch": "bun build ./src/index.ts --outfile ./dist/index.js --watch"
 	},
 	"types": "src/types.d.ts",
-	"version": "0.4.0"
+	"version": "0.6.0"
 }

package/src/fragment.ts

@@ -1,15 +1,7 @@
 import {createTemplate, getNodes} from './helpers/dom';
 import {parse} from './html';
-
-export type Fragment = {
-	append(parent: Node): void;
-};
-
-export type FragmentData = {
-	expressions: unknown[];
-	nodes: Node[];
-	strings: TemplateStringsArray;
-};
+import type {Fragment, FragmentData} from './models';
+import {mapNodes} from './node';
 
 export function createFragment(
 	strings: TemplateStringsArray,
@@ -19,21 +11,40 @@ export function createFragment(
 		expressions,
 		strings,
 		nodes: [],
+		values: [],
 	};
 
 	const instance = Object.create({
-		append(parent: ParentNode) {
-			if (data.nodes.length > 0) {
-				return parent.append(...data.nodes);
+		appendTo(element: Element) {
+			element.append(...this.get());
+		},
+		get() {
+			if (data.nodes.length === 0) {
+				const parsed = parse(data);
+				const templated = createTemplate(parsed);
+
+				data.nodes.splice(0, data.nodes.length, ...getNodes(templated));
+
+				mapNodes(data, data.nodes);
 			}
 
-			const parsed = parse(data);
-			const templated = createTemplate(parsed);
+			return [...data.nodes];
+		},
+		remove() {
+			const {length} = data.nodes;
+
+			for (let index = 0; index < length; index += 1) {
+				const node = data.nodes[index];
 
-			data.nodes.splice(0, data.nodes.length, ...getNodes(templated));
+				node.parentNode?.removeChild(node);
+			}
 
-			parent.append(...data.nodes);
+			data.nodes.splice(0, data.nodes.length);
 		},
+	} as Fragment);
+
+	Object.defineProperty(instance, '$fragment', {
+		value: true,
 	});
 
 	return instance;

package/src/helpers/dom.ts

@@ -1,3 +1,19 @@
+import {getString} from '@oscarpalmer/atoms/string';
+import type {FragmentNode} from '../models';
+import {isFragment, isFragmentNode} from './index';
+
+export function createNodes(value: unknown): FragmentNode[] {
+	if (isFragmentNode(value)) {
+		return [value];
+	}
+
+	if (isFragment(value)) {
+		return value.get();
+	}
+
+	return [new Text(getString(value))];
+}
+
 export function createTemplate(html: string): Node {
 	const template = document.createElement('template');
 
@@ -25,3 +41,17 @@ export function getNodes(node: Node): Node[] {
 		? [...node.childNodes]
 		: [node];
 }
+
+export function replaceNodes(from: FragmentNode[], to: FragmentNode[]): void {
+	const {length} = from;
+
+	for (let index = 0; index < length; index += 1) {
+		const node = from[index];
+
+		if (index === 0) {
+			node.replaceWith(...to);
+		} else {
+			node.remove();
+		}
+	}
+}

package/src/helpers/index.ts

@@ -0,0 +1,22 @@
+import type {Fragment, FragmentElement, FragmentNode} from '../models';
+
+export function isFragment(value: unknown): value is Fragment {
+	return (
+		typeof value === 'object' &&
+		value != null &&
+		'$fragment' in value &&
+		value.$fragment === true
+	);
+}
+
+export function isFragmentElement(value: unknown): value is FragmentElement {
+	return value instanceof HTMLElement || value instanceof SVGElement;
+}
+
+export function isFragmentNode(value: unknown): value is FragmentNode {
+	return (
+		value instanceof Comment ||
+		value instanceof Element ||
+		value instanceof Text
+	);
+}

package/src/html.ts

@@ -1,5 +1,36 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
-import {createFragment, type FragmentData, type Fragment} from './fragment';
+import {createFragment} from './fragment';
+import type {Fragment, FragmentData} from './models';
+
+function handleExpression(
+	data: FragmentData,
+	prefix: string,
+	expression: unknown,
+): string {
+	if (isNullableOrWhitespace(expression)) {
+		return prefix;
+	}
+
+	if (Array.isArray(expression)) {
+		const {length} = expression;
+
+		let expressions = '';
+
+		for (let index = 0; index < length; index += 1) {
+			expressions += handleExpression(data, '', expression[index]);
+		}
+
+		return `${prefix}${expressions}`;
+	}
+
+	if (typeof expression === 'object') {
+		const index = data.values.push(expression) - 1;
+
+		return `${prefix}<!--abydon.${index}-->`;
+	}
+
+	return `${prefix}${expression}`;
+}
 
 export function html(
 	strings: TemplateStringsArray,
@@ -14,12 +45,11 @@ export function parse(data: FragmentData): string {
 	let template = '';
 
 	for (let index = 0; index < length; index += 1) {
-		const part = data.strings[index];
-		const expression = data.expressions[index];
-
-		template += isNullableOrWhitespace(expression)
-			? part
-			: `${part}${expression}`;
+		template += handleExpression(
+			data,
+			data.strings[index],
+			data.expressions[index],
+		);
 	}
 
 	return template;

package/src/index.ts

@@ -1,2 +1,2 @@
-export type {Fragment} from './fragment';
+export type {Fragment} from './models';
 export {html} from './html';

package/src/models.ts

@@ -0,0 +1,16 @@
+export type Fragment = {
+		appendTo(element: Element): void;
+		get(): FragmentNode[];
+		remove(): void;
+	};
+
+export type FragmentData = {
+	expressions: unknown[];
+	nodes: Node[];
+	strings: TemplateStringsArray;
+	values: unknown[];
+};
+
+export type FragmentElement = HTMLElement | SVGElement;
+
+export type FragmentNode = Comment | Element | Text;

package/src/node/attribute/index.ts

@@ -0,0 +1,62 @@
+import {isReactive} from '@oscarpalmer/sentinel';
+import type {FragmentData, FragmentElement} from '../../models';
+import {mapEvent} from '../event';
+import {setAttribute} from './value';
+
+const commentExpression = /^<!--abydon\.(\d+)-->$/;
+
+function getValue(data: FragmentData, original: string): unknown {
+	const matches = commentExpression.exec(original ?? '');
+
+	return matches == null ? original : data.values[+matches[1]];
+}
+
+export function isBadAttribute(name: string, value: string): boolean {
+	return (
+		/^on/i.test(name) ||
+		(/^(href|src|xlink:href)$/i.test(name) &&
+			/(data:text\/html|javascript:)/i.test(value))
+	);
+}
+
+export function mapAttributes(
+	data: FragmentData,
+	element: FragmentElement,
+): void {
+	const attributes = [...element.attributes];
+	const {length} = attributes;
+
+	for (let index = 0; index < length; index += 1) {
+		const {name, value} = attributes[index];
+
+		if (isBadAttribute(name, value)) {
+			element.removeAttribute(name);
+
+			continue;
+		}
+
+		const actual = getValue(data, value);
+
+		if (name.startsWith('@')) {
+			mapEvent(element, name, actual);
+		} else if (name.includes('.') || isReactive(actual)) {
+			mapValue(element, name, actual);
+		}
+	}
+}
+
+function mapValue(
+	element: FragmentElement,
+	name: string,
+	value: unknown,
+): void {
+	switch (true) {
+		case typeof value === 'function':
+			mapValue(element, name, value());
+			return;
+
+		default:
+			setAttribute(element, name, value);
+			break;
+	}
+}

package/src/node/attribute/value.ts

@@ -0,0 +1,159 @@
+import type {PlainObject} from '@oscarpalmer/atoms/models';
+import {getString} from '@oscarpalmer/atoms/string';
+import {effect, isReactive} from '@oscarpalmer/sentinel';
+import type {FragmentElement} from '../../models';
+import {closest} from '@oscarpalmer/atoms/element';
+
+const booleanAttributes = new Set([
+	'checked',
+	'disabled',
+	'hidden',
+	'inert',
+	'multiple',
+	'open',
+	'readOnly',
+	'required',
+	'selected',
+]);
+
+const classPattern = /^class\./;
+const stylePattern = /^style\./;
+
+export function setAttribute(
+	element: FragmentElement,
+	name: string,
+	value: unknown,
+): void {
+	element.removeAttribute(name);
+
+	switch (true) {
+		case classPattern.test(name):
+			setClasses(element, name, value);
+			return;
+
+		case stylePattern.test(name):
+			setStyle(element, name, value);
+			return;
+
+		default:
+			setValue(element, name, value);
+			break;
+	}
+}
+
+function setClasses(
+	element: FragmentElement,
+	name: string,
+	value: unknown,
+): void {
+	function update(value: unknown): void {
+		if (/^(|true)$/.test(getString(value))) {
+			element.classList.add(...classes);
+		} else {
+			element.classList.remove(...classes);
+		}
+	}
+
+	const classes = name.slice(6).split('.');
+
+	if (isReactive(value)) {
+		effect(() => {
+			update(value.get());
+		});
+	} else {
+		update(value);
+	}
+}
+
+function setStyle(
+	element: FragmentElement,
+	name: string,
+	value: unknown,
+): void {
+	function update(value: unknown): void {
+		if (value == null || value === false || (value === true && unit == null)) {
+			element.style.removeProperty(property);
+		} else {
+			element.style.setProperty(
+				property,
+				value === true ? unit : getString(value),
+			);
+		}
+	}
+
+	const [, property, unit] = /^\w+\.([a-z-]+)(?:\.(\w+))?$/i.exec(name) ?? [];
+
+	if (property == null) {
+		return;
+	}
+
+	if (isReactive(value)) {
+		effect(() => {
+			update(value.get());
+		});
+	} else {
+		update(value);
+	}
+}
+
+function setValue(
+	element: FragmentElement,
+	name: string,
+	value: unknown,
+): void {
+	const callback =
+		booleanAttributes.has(name) && name in element
+			? name === 'selected'
+				? updateSelected(element)
+				: updateProperty
+			: updateAttribute;
+
+	if (isReactive(value)) {
+		effect(() => {
+			callback(element, name, value.get());
+		});
+	} else {
+		callback(element, name, value);
+	}
+}
+
+function triggerSelectChange(select: HTMLSelectElement): void {
+	if (select != null) {
+		select.dispatchEvent(new Event('change', {bubbles: true}));
+	}
+}
+
+function updateAttribute(
+	element: FragmentElement,
+	name: string,
+	value: unknown,
+): void {
+	if (value == null) {
+		element.removeAttribute(name);
+	} else {
+		element.setAttribute(name, getString(value));
+	}
+}
+
+function updateProperty(
+	element: FragmentElement,
+	name: string,
+	value: unknown,
+): void {
+	(element as unknown as PlainObject)[name] = /^(|true)$/.test(
+		getString(value),
+	);
+}
+
+function updateSelected(element: FragmentElement) {
+	const select = closest(element, 'select')[0] as HTMLSelectElement;
+	const options = [...(select?.options ?? [])];
+
+	return (element: FragmentElement, name: string, value: unknown): void => {
+		if (select != null && options.includes(element as HTMLOptionElement)) {
+			triggerSelectChange(select);
+		}
+
+		updateProperty(element, name, value);
+	};
+}

package/src/node/event.ts

@@ -0,0 +1,15 @@
+import type {FragmentElement} from '../models';
+
+export function mapEvent(
+	element: FragmentElement,
+	name: string,
+	value: unknown,
+): void {
+	element.removeAttribute(name);
+
+	if (typeof value !== 'function') {
+		return;
+	}
+
+	// TODO
+}

package/src/node/index.ts

@@ -0,0 +1,55 @@
+import {isReactive} from '@oscarpalmer/sentinel';
+import {isFragmentElement} from '../helpers';
+import {createNodes} from '../helpers/dom';
+import type {FragmentData} from '../models';
+import {setReactiveNode} from './value';
+import {mapAttributes} from './attribute';
+
+const commentExpression = /^abydon\.(\d+)$/;
+
+function mapNode(data: FragmentData, comment: Comment): void {
+	const matches = commentExpression.exec(comment.textContent ?? '');
+	const value = matches == null ? null : data.values[+matches[1]];
+
+	if (value != null) {
+		mapValue(comment, value);
+	}
+}
+
+export function mapNodes(data: FragmentData, nodes: Node[]): void {
+	const {length} = nodes;
+
+	for (let index = 0; index < length; index += 1) {
+		const node = nodes[index];
+
+		if (node instanceof Comment) {
+			mapNode(data, node);
+
+			continue;
+		}
+
+		if (isFragmentElement(node)) {
+			mapAttributes(data, node);
+		}
+
+		if (node.hasChildNodes()) {
+			mapNodes(data, [...node.childNodes]);
+		}
+	}
+}
+
+function mapValue(comment: Comment, value: unknown): void {
+	switch (true) {
+		case typeof value === 'function':
+			mapValue(comment, value());
+			return;
+
+		case isReactive(value):
+			setReactiveNode(comment, value);
+			break;
+
+		default:
+			comment.replaceWith(...createNodes(value));
+			break;
+	}
+}

package/src/node/value.ts

@@ -0,0 +1,48 @@
+import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import {getString} from '@oscarpalmer/atoms/string';
+import {type Reactive, effect} from '@oscarpalmer/sentinel';
+import {isFragment, isFragmentNode} from '../helpers';
+import {createNodes, replaceNodes} from '../helpers/dom';
+import type {FragmentNode} from '../models';
+
+export function setReactiveNode(comment: Comment, reactive: Reactive): void {
+	const text = new Text();
+
+	let nodes: FragmentNode[] | undefined;
+
+	effect(() => {
+		const value = reactive.get();
+
+		if (isFragment(value) || isFragmentNode(value)) {
+			const next = createNodes(value);
+
+			if (nodes == null) {
+				if (comment.parentNode != null) {
+					replaceNodes([comment], next);
+				} else if (text.parentNode != null) {
+					replaceNodes([text], next);
+				}
+			} else {
+				replaceNodes(nodes, next);
+			}
+
+			nodes = next;
+
+			return;
+		}
+
+		const isNullable = isNullableOrWhitespace(value);
+
+		text.textContent = getString(value);
+
+		if (nodes != null) {
+			replaceNodes(nodes, [isNullable ? comment : text]);
+		} else if (isNullable && comment.parentNode == null) {
+			text.replaceWith(comment);
+		} else if (!isNullable && text.parentNode == null) {
+			comment.replaceWith(text);
+		}
+
+		nodes = undefined;
+	});
+}

package/types/fragment.d.ts

@@ -1,9 +1,2 @@
-export type Fragment = {
-    append(parent: Node): void;
-};
-export type FragmentData = {
-    expressions: unknown[];
-    nodes: Node[];
-    strings: TemplateStringsArray;
-};
+import type { Fragment } from './models';
 export declare function createFragment(strings: TemplateStringsArray, expressions: unknown[]): Fragment;

package/types/helpers/dom.d.ts

@@ -1,2 +1,5 @@
+import type { FragmentNode } from '../models';
+export declare function createNodes(value: unknown): FragmentNode[];
 export declare function createTemplate(html: string): Node;
 export declare function getNodes(node: Node): Node[];
+export declare function replaceNodes(from: FragmentNode[], to: FragmentNode[]): void;

package/types/helpers/index.d.ts

@@ -0,0 +1,4 @@
+import type { Fragment, FragmentElement, FragmentNode } from '../models';
+export declare function isFragment(value: unknown): value is Fragment;
+export declare function isFragmentElement(value: unknown): value is FragmentElement;
+export declare function isFragmentNode(value: unknown): value is FragmentNode;

package/types/html.d.ts

@@ -1,3 +1,3 @@
-import { type FragmentData, type Fragment } from './fragment';
+import type { Fragment, FragmentData } from './models';
 export declare function html(strings: TemplateStringsArray, ...values: unknown[]): Fragment;
 export declare function parse(data: FragmentData): string;

package/types/index.d.ts

@@ -1,2 +1,2 @@
-export type { Fragment } from './fragment';
+export type { Fragment } from './models';
 export { html } from './html';

package/types/models.d.ts

@@ -0,0 +1,13 @@
+export type Fragment = {
+    appendTo(element: Element): void;
+    get(): FragmentNode[];
+    remove(): void;
+};
+export type FragmentData = {
+    expressions: unknown[];
+    nodes: Node[];
+    strings: TemplateStringsArray;
+    values: unknown[];
+};
+export type FragmentElement = HTMLElement | SVGElement;
+export type FragmentNode = Comment | Element | Text;

package/types/node/attribute/index.d.ts

@@ -0,0 +1,3 @@
+import type { FragmentData, FragmentElement } from '../../models';
+export declare function isBadAttribute(name: string, value: string): boolean;
+export declare function mapAttributes(data: FragmentData, element: FragmentElement): void;

package/types/node/attribute/value.d.ts

@@ -0,0 +1,2 @@
+import type { FragmentElement } from '../../models';
+export declare function setAttribute(element: FragmentElement, name: string, value: unknown): void;

package/types/node/event.d.ts

@@ -0,0 +1,2 @@
+import type { FragmentElement } from '../models';
+export declare function mapEvent(element: FragmentElement, name: string, value: unknown): void;

package/types/node/index.d.ts

@@ -0,0 +1,2 @@
+import type { FragmentData } from '../models';
+export declare function mapNodes(data: FragmentData, nodes: Node[]): void;

package/types/node/value.d.ts

@@ -0,0 +1,2 @@
+import { type Reactive } from '@oscarpalmer/sentinel';
+export declare function setReactiveNode(comment: Comment, reactive: Reactive): void;