@oscarpalmer/abydon 0.5.0 → 0.7.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,6 +53,17 @@ 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) {
@@ -54,6 +85,45 @@ if (globalThis._sentinels == null) {
   });
 }
 
+// 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);
@@ -78,77 +148,326 @@ var arrayOperations = new Set([
 // 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
+var getOptions = function(options) {
+  const parts = options.split(":");
+  return {
+    capture: parts.includes("c") || parts.includes("capture"),
+    once: parts.includes("o") || parts.includes("once"),
+    passive: !parts.includes("a") && !parts.includes("active")
+  };
+};
+function mapEvent(element, name, value10) {
+  element.removeAttribute(name);
+  const [, type, options] = /^@(\w+)(?::([a-z:]+))?$/.exec(name) ?? [];
+  if (typeof value10 === "function" && type != null) {
+    element.addEventListener(type, value10, getOptions(options ?? ""));
+  }
+}
+
+// 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(data, comment) {
-  const matches = commentExpression.exec(comment.textContent ?? "");
-  const value10 = matches == null ? null : data.values[+matches[1]];
-  if (value10 != null) {
-    mapValue(comment, value10);
+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(data, nodes) {
+function mapNodes(data2, nodes) {
   const { length } = nodes;
   for (let index = 0;index < length; index += 1) {
     const node = nodes[index];
     if (node instanceof Comment) {
-      mapNode(data, node);
+      mapNode(data2, node);
       continue;
     }
-    if (node instanceof Element) {
+    if (isFragmentElement(node)) {
+      mapAttributes(data2, node);
     }
     if (node.hasChildNodes()) {
-      mapNodes(data, [...node.childNodes]);
+      mapNodes(data2, [...node.childNodes]);
     }
   }
 }
-var mapReactive = function(comment, value10) {
-};
-var mapValue = function(comment, value10) {
+var mapValue2 = function(comment, value12) {
   switch (true) {
-    case value10 instanceof Node:
-      comment.replaceWith(value10);
+    case typeof value12 === "function":
+      mapValue2(comment, value12());
       return;
-    case isFragment(value10):
-      comment.replaceWith(value10.get());
-      break;
-    case isReactive(value10):
-      mapReactive(comment, value10);
+    case isReactive(value12):
+      setReactiveNode(comment, value12);
       break;
-    case typeof value10 === "function":
-      mapValue(comment, value10());
-      return;
-    case typeof value10 === "object":
-      comment.replaceWith(new Text(getString(value10)));
+    default:
+      comment.replaceWith(...createNodes(value12));
       break;
   }
 };
-var commentExpression = /^abydon\.(\d+)$/;
+var commentExpression2 = /^abydon\.(\d+)$/;
 
 // src/fragment.ts
 function createFragment(strings, expressions) {
-  const data = {
+  const data2 = {
     expressions,
     strings,
     nodes: [],
     values: []
   };
   const instance = Object.create({
+    appendTo(element2) {
+      element2.append(...this.get());
+    },
     get() {
-      if (data.nodes.length === 0) {
-        const parsed = parse(data);
+      if (data2.nodes.length === 0) {
+        const parsed = parse2(data2);
         const templated = createTemplate(parsed);
-        data.nodes.splice(0, data.nodes.length, ...getNodes(templated));
-        mapNodes(data, data.nodes);
+        data2.nodes.splice(0, data2.nodes.length, ...getNodes(templated));
+        mapNodes(data2, data2.nodes);
       }
-      return getFragment(data.nodes);
+      return [...data2.nodes];
     },
     remove() {
-      const { length } = data.nodes;
+      const { length } = data2.nodes;
       for (let index = 0;index < length; index += 1) {
-        const node2 = data.nodes[index];
+        const node2 = data2.nodes[index];
         node2.parentNode?.removeChild(node2);
       }
-      data.nodes.splice(0, data.nodes.length);
+      data2.nodes.splice(0, data2.nodes.length);
     }
   });
   Object.defineProperty(instance, "$fragment", {
@@ -156,17 +475,9 @@ function createFragment(strings, expressions) {
   });
   return instance;
 }
-function isFragment(value10) {
-  return typeof value10 === "object" && value10 != null && "$fragment" in value10;
-}
 
 // src/html.ts
-function getFragment(nodes) {
-  const fragment3 = document.createDocumentFragment();
-  fragment3.append(...nodes);
-  return fragment3;
-}
-var handleExpression = function(data, prefix, expression) {
+var handleExpression = function(data2, prefix, expression) {
   if (isNullableOrWhitespace(expression)) {
     return prefix;
   }
@@ -174,12 +485,12 @@ var handleExpression = function(data, prefix, expression) {
     const { length } = expression;
     let expressions = "";
     for (let index = 0;index < length; index += 1) {
-      expressions += handleExpression(data, "", expression[index]);
+      expressions += handleExpression(data2, "", expression[index]);
     }
     return `${prefix}${expressions}`;
   }
-  if (typeof expression === "object") {
-    const index = data.values.push(expression) - 1;
+  if (typeof expression === "function" || typeof expression === "object") {
+    const index = data2.values.push(expression) - 1;
     return `${prefix}<!--abydon.${index}-->`;
   }
   return `${prefix}${expression}`;
@@ -187,11 +498,11 @@ var handleExpression = function(data, 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) {
-    template += handleExpression(data, data.strings[index], data.expressions[index]);
+    template += handleExpression(data2, data2.strings[index], data2.expressions[index]);
   }
   return template;
 }

package/package.json

@@ -36,5 +36,5 @@
 		"watch": "bun build ./src/index.ts --outfile ./dist/index.js --watch"
 	},
 	"types": "src/types.d.ts",
-	"version": "0.5.0"
+	"version": "0.7.0"
 }

package/src/fragment.ts

@@ -1,19 +1,8 @@
 import {createTemplate, getNodes} from './helpers/dom';
-import {getFragment, parse} from './html';
+import {parse} from './html';
+import type {Fragment, FragmentData} from './models';
 import {mapNodes} from './node';
 
-export type Fragment = {
-	get(): DocumentFragment;
-	remove(): void;
-};
-
-export type FragmentData = {
-	expressions: unknown[];
-	nodes: Node[];
-	strings: TemplateStringsArray;
-	values: unknown[];
-};
-
 export function createFragment(
 	strings: TemplateStringsArray,
 	expressions: unknown[],
@@ -26,7 +15,10 @@ export function createFragment(
 	};
 
 	const instance = Object.create({
-		get(): Node {
+		appendTo(element: Element) {
+			element.append(...this.get());
+		},
+		get() {
 			if (data.nodes.length === 0) {
 				const parsed = parse(data);
 				const templated = createTemplate(parsed);
@@ -36,9 +28,9 @@ export function createFragment(
 				mapNodes(data, data.nodes);
 			}
 
-			return getFragment(data.nodes);
+			return [...data.nodes];
 		},
-		remove(): void {
+		remove() {
 			const {length} = data.nodes;
 
 			for (let index = 0; index < length; index += 1) {
@@ -49,7 +41,7 @@ export function createFragment(
 
 			data.nodes.splice(0, data.nodes.length);
 		},
-	});
+	} as Fragment);
 
 	Object.defineProperty(instance, '$fragment', {
 		value: true,
@@ -57,7 +49,3 @@ export function createFragment(
 
 	return instance;
 }
-
-export function isFragment(value: unknown): value is Fragment {
-	return typeof value === 'object' && value != null && '$fragment' in value;
-}

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,13 +1,6 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
-import {type Fragment, type FragmentData, createFragment} from './fragment';
-
-export function getFragment(nodes: Node[]): DocumentFragment {
-	const fragment = document.createDocumentFragment();
-
-	fragment.append(...nodes);
-
-	return fragment;
-}
+import {createFragment} from './fragment';
+import type {Fragment, FragmentData} from './models';
 
 function handleExpression(
 	data: FragmentData,
@@ -30,7 +23,7 @@ function handleExpression(
 		return `${prefix}${expressions}`;
 	}
 
-	if (typeof expression === 'object') {
+	if (typeof expression === 'function' || typeof expression === 'object') {
 		const index = data.values.push(expression) - 1;
 
 		return `${prefix}<!--abydon.${index}-->`;

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,29 @@
+import type {FragmentElement} from '../models';
+
+function getOptions(options: string): AddEventListenerOptions {
+	const parts = options.split(':');
+
+	return {
+		capture: parts.includes('c') || parts.includes('capture'),
+		once: parts.includes('o') || parts.includes('once'),
+		passive: !parts.includes('a') && !parts.includes('active'),
+	};
+}
+
+export function mapEvent(
+	element: FragmentElement,
+	name: string,
+	value: unknown,
+): void {
+	element.removeAttribute(name);
+
+	const [, type, options] = /^@(\w+)(?::([a-z:]+))?$/.exec(name) ?? [];
+
+	if (typeof value === 'function' && type != null) {
+		element.addEventListener(
+			type,
+			value as EventListener,
+			getOptions(options ?? ''),
+		);
+	}
+}

package/src/node/index.ts

@@ -1,6 +1,9 @@
-import {getString} from '@oscarpalmer/atoms/string';
-import {isReactive, type Reactive} from '@oscarpalmer/sentinel';
-import {type FragmentData, isFragment} from '../fragment';
+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+)$/;
 
@@ -25,8 +28,8 @@ export function mapNodes(data: FragmentData, nodes: Node[]): void {
 			continue;
 		}
 
-		if (node instanceof Element) {
-			// Attributes
+		if (isFragmentElement(node)) {
+			mapAttributes(data, node);
 		}
 
 		if (node.hasChildNodes()) {
@@ -35,30 +38,18 @@ export function mapNodes(data: FragmentData, nodes: Node[]): void {
 	}
 }
 
-function mapReactive(comment: Comment, value: Reactive): void {
-	// ?
-}
-
 function mapValue(comment: Comment, value: unknown): void {
 	switch (true) {
-		case value instanceof Node:
-			comment.replaceWith(value);
+		case typeof value === 'function':
+			mapValue(comment, value());
 			return;
 
-		case isFragment(value):
-			comment.replaceWith(value.get());
-			break;
-
 		case isReactive(value):
-			mapReactive(comment, value);
+			setReactiveNode(comment, value);
 			break;
 
-		case typeof value === 'function':
-			mapValue(comment, value());
-			return;
-
-		case typeof value === 'object':
-			comment.replaceWith(new Text(getString(value)));
+		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,12 +1,2 @@
-export type Fragment = {
-    get(): DocumentFragment;
-    remove(): void;
-};
-export type FragmentData = {
-    expressions: unknown[];
-    nodes: Node[];
-    strings: TemplateStringsArray;
-    values: unknown[];
-};
+import type { Fragment } from './models';
 export declare function createFragment(strings: TemplateStringsArray, expressions: unknown[]): Fragment;
-export declare function isFragment(value: unknown): value is 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,4 +1,3 @@
-import { type Fragment, type FragmentData } from './fragment';
-export declare function getFragment(nodes: Node[]): DocumentFragment;
+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

@@ -1,2 +1,2 @@
-import { type FragmentData } from '../fragment';
+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;