@oscarpalmer/abydon 0.8.0 → 0.9.0

package/dist/node/attribute/index.mjs

@@ -6,18 +6,11 @@ function getValue(data, original) {
   const matches = commentExpression.exec(original ?? "");
   return matches == null ? original : data.values[+matches[1]];
 }
-function isBadAttribute(name, value2) {
-  return /^on/i.test(name) || /^(href|src|xlink:href)$/i.test(name) && /(data:text\/html|javascript:)/i.test(value2);
-}
 function mapAttributes(data, element) {
   const attributes = [...element.attributes];
   const { length } = attributes;
   for (let index = 0;index < length; index += 1) {
     const { name, value: value2 } = attributes[index];
-    if (isBadAttribute(name, value2)) {
-      element.removeAttribute(name);
-      continue;
-    }
     const actual = getValue(data, value2);
     if (name.startsWith("@")) {
       mapEvent(element, name, actual);
@@ -38,6 +31,5 @@ function mapValue(element, name, value2) {
 }
 var commentExpression = /^<!--abydon\.(\d+)-->$/;
 export {
-  mapAttributes,
-  isBadAttribute
+  mapAttributes
 };

package/dist/node/attribute/value.mjs

@@ -1,27 +1,30 @@
 // src/node/attribute/value.ts
-import {closest} from "@oscarpalmer/atoms/element";
 import {getString} from "@oscarpalmer/atoms/string";
 import {effect, isReactive} from "@oscarpalmer/sentinel";
-function setAttribute(element2, name, value) {
-  element2.removeAttribute(name);
+import {
+isBooleanAttribute,
+setAttribute as setAttr
+} from "@oscarpalmer/toretto/attribute";
+function setAttribute(element, name, value) {
+  element.removeAttribute(name);
   switch (true) {
     case classPattern.test(name):
-      setClasses(element2, name, value);
+      setClasses(element, name, value);
       return;
     case stylePattern.test(name):
-      setStyle(element2, name, value);
+      setStyle(element, name, value);
       return;
     default:
-      setValue(element2, name, value);
+      setValue(element, name, value);
       break;
   }
 }
-function setClasses(element2, name, value) {
+function setClasses(element, name, value) {
   function update(value2) {
     if (/^(|true)$/.test(getString(value2))) {
-      element2.classList.add(...classes);
+      element.classList.add(...classes);
     } else {
-      element2.classList.remove(...classes);
+      element.classList.remove(...classes);
     }
   }
   const classes = name.slice(6).split(".");
@@ -33,12 +36,12 @@ function setClasses(element2, name, value) {
     update(value);
   }
 }
-function setStyle(element2, name, value) {
+function setStyle(element, name, value) {
   function update(value2) {
     if (value2 == null || value2 === false || value2 === true && unit == null) {
-      element2.style.removeProperty(property);
+      element.style.removeProperty(property);
     } else {
-      element2.style.setProperty(property, value2 === true ? unit : getString(value2));
+      element.style.setProperty(property, value2 === true ? unit : getString(value2));
     }
   }
   const [, property, unit] = /^\w+\.([a-z-]+)(?:\.(\w+))?$/i.exec(name) ?? [];
@@ -53,14 +56,14 @@ function setStyle(element2, name, value) {
     update(value);
   }
 }
-function setValue(element2, name, value) {
-  const callback = booleanAttributes.has(name) && name in element2 ? name === "selected" ? updateSelected(element2) : updateProperty : updateAttribute;
+function setValue(element, name, value) {
+  const callback = isBooleanAttribute(name) && name in element ? name === "selected" ? updateSelected : updateProperty : setAttr;
   if (isReactive(value)) {
     effect(() => {
-      callback(element2, name, value.get());
+      callback(element, name, value.get());
     });
   } else {
-    callback(element2, name, value);
+    callback(element, name, value);
   }
 }
 function triggerSelectChange(select) {
@@ -68,37 +71,17 @@ function triggerSelectChange(select) {
     select.dispatchEvent(new Event("change", { bubbles: true }));
   }
 }
-function updateAttribute(element2, name, value) {
-  if (value == null) {
-    element2.removeAttribute(name);
-  } else {
-    element2.setAttribute(name, getString(value));
-  }
-}
-function updateProperty(element2, name, value) {
-  element2[name] = /^(|true)$/.test(getString(value));
+function updateProperty(element, name, value) {
+  element[name] = /^(|true)$/.test(getString(value));
 }
-function updateSelected(element2) {
-  const select = closest(element2, "select")[0];
+function updateSelected(element, name, value) {
+  const select = element.closest("select");
   const options = [...select?.options ?? []];
-  return (element3, name, value) => {
-    if (select != null && options.includes(element3)) {
-      triggerSelectChange(select);
-    }
-    updateProperty(element3, name, value);
-  };
+  if (select != null && options.includes(element)) {
+    triggerSelectChange(select);
+  }
+  updateProperty(element, name, value);
 }
-var booleanAttributes = new Set([
-  "checked",
-  "disabled",
-  "hidden",
-  "inert",
-  "multiple",
-  "open",
-  "readOnly",
-  "required",
-  "selected"
-]);
 var classPattern = /^class\./;
 var stylePattern = /^style\./;
 export {

package/dist/node/index.mjs

@@ -1,6 +1,6 @@
 // src/node/index.ts
 import {isReactive} from "@oscarpalmer/sentinel";
-import {isFragmentElement} from "../helpers";
+import {isFragment, isProperElement} from "../helpers";
 import {createNodes} from "../helpers/dom";
 import {mapAttributes} from "./attribute";
 import {setReactiveNode} from "./value";
@@ -8,7 +8,7 @@ function mapNode(data, comment) {
   const matches = commentExpression.exec(comment.textContent ?? "");
   const value2 = matches == null ? null : data.values[+matches[1]];
   if (value2 != null) {
-    mapValue(comment, value2);
+    mapValue(data, comment, value2);
   }
 }
 function mapNodes(data, nodes) {
@@ -19,7 +19,7 @@ function mapNodes(data, nodes) {
       mapNode(data, node);
       continue;
     }
-    if (isFragmentElement(node)) {
+    if (isProperElement(node)) {
       mapAttributes(data, node);
     }
     if (node.hasChildNodes()) {
@@ -27,19 +27,28 @@ function mapNodes(data, nodes) {
     }
   }
 }
-function mapValue(comment, value2) {
+function mapValue(data, comment, value2) {
   switch (true) {
     case typeof value2 === "function":
-      mapValue(comment, value2());
+      mapValue(data, comment, value2());
       return;
     case isReactive(value2):
-      setReactiveNode(comment, value2);
+      setReactiveNode(data, comment, value2);
       break;
     default:
-      comment.replaceWith(...createNodes(value2));
+      replaceComment(data, comment, value2);
       break;
   }
 }
+function replaceComment(data, comment, value2) {
+  const item = data.items.find((item2) => item2.nodes.includes(comment));
+  const nodes = createNodes(value2);
+  if (item != null) {
+    item.fragment = isFragment(value2) ? value2 : undefined;
+    item.nodes = nodes;
+  }
+  comment.replaceWith(...nodes);
+}
 var commentExpression = /^abydon\.(\d+)$/;
 export {
   mapNodes

package/dist/node/value.mjs

@@ -2,39 +2,56 @@
 import {isNullableOrWhitespace} from "@oscarpalmer/atoms/is";
 import {getString} from "@oscarpalmer/atoms/string";
 import {effect} from "@oscarpalmer/sentinel";
-import {isFragment, isFragmentNode} from "../helpers";
+import {isFragment, isProperNode} from "../helpers";
 import {createNodes, replaceNodes} from "../helpers/dom";
-function setReactiveNode(comment, reactive) {
+function setNodes(nodes, comment, text, 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);
+  }
+  return next;
+}
+function setReactiveNode(data, comment, reactive) {
+  const item = data.items.find((item2) => item2.nodes.includes(comment));
   const text = new Text;
   let nodes;
   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 valueIsFragment = isFragment(value);
+    if (valueIsFragment || isProperNode(value)) {
+      nodes = setNodes(nodes, comment, text, value);
+    } else {
+      nodes = setText(nodes, comment, text, value) ? [text] : undefined;
     }
-    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);
+    if (item != null) {
+      item.fragment = valueIsFragment ? value : undefined;
+      item.nodes = [...nodes ?? [comment]];
     }
-    nodes = undefined;
   });
 }
+function setText(nodes, comment, text, value) {
+  const isNullable = isNullableOrWhitespace(value);
+  text.textContent = isNullable ? "" : getString(value);
+  if (nodes != null) {
+    replaceNodes(nodes, [isNullable ? comment : text]);
+    return !isNullable;
+  }
+  if (isNullable && comment.parentNode == null) {
+    text.replaceWith(comment);
+    return false;
+  }
+  if (!isNullable && text.parentNode == null) {
+    comment.replaceWith(text);
+    return true;
+  }
+  return false;
+}
 export {
   setReactiveNode
 };

package/package.json

@@ -4,13 +4,14 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.67.0",
-		"@oscarpalmer/sentinel": "^0.23.0"
+		"@oscarpalmer/atoms": "^0.71.0",
+		"@oscarpalmer/sentinel": "^0.23.0",
+		"@oscarpalmer/toretto": "0.12.1"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.8.3",
 		"@types/bun": "^1.1.6",
-		"bun": "^1.1.21",
+		"bun": "^1.1.24",
 		"dts-bundle-generator": "^9.5.1",
 		"typescript": "^5.5.4"
 	},
@@ -46,5 +47,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.ts",
-	"version": "0.8.0"
+	"version": "0.9.0"
 }

package/src/fragment.ts

@@ -1,17 +1,17 @@
-import {createTemplate, getNodes} from './helpers/dom';
+import {html} from '@oscarpalmer/toretto/html';
 import {parse} from './html';
-import type {FragmentData} from './models';
+import type {FragmentData, ProperNode} from './models';
 import {mapNodes} from './node';
 
 export class Fragment {
-	private declare readonly $fragment = true;
+	private readonly $fragment = true;
 	private readonly data: FragmentData;
 
 	constructor(strings: TemplateStringsArray, expressions: unknown[]) {
 		this.data = {
 			expressions,
 			strings,
-			nodes: [],
+			items: [],
 			values: [],
 		};
 	}
@@ -27,30 +27,52 @@ export class Fragment {
 	 * Gets a list of the fragment's nodes
 	 */
 	get(): Node[] {
-		if (this.data.nodes.length === 0) {
+		if (this.data.items.length === 0) {
 			const parsed = parse(this.data);
-			const templated = createTemplate(parsed);
 
-			this.data.nodes.splice(0, this.data.nodes.length, ...getNodes(templated));
+			const templated = html(parsed, {
+				sanitiseBooleanAttributes: false,
+			});
 
-			mapNodes(this.data, this.data.nodes);
+			this.data.items.splice(
+				0,
+				this.data.items.length,
+				...templated.map(node => ({
+					nodes: [node as ProperNode],
+				})),
+			);
+
+			mapNodes(
+				this.data,
+				this.data.items.flatMap(
+					item => item.fragment?.get() ?? item.nodes,
+				) as ProperNode[],
+			);
 		}
 
-		return [...this.data.nodes];
+		return [
+			...(this.data.items.flatMap(
+				item => item.fragment?.get() ?? item.nodes,
+			) as ProperNode[]),
+		];
 	}
 
 	/**
 	 * Removes the fragment from the DOM
 	 */
 	remove(): void {
-		const {length} = this.data.nodes;
+		const {length} = this.data.items;
 
 		for (let index = 0; index < length; index += 1) {
-			const node = this.data.nodes[index];
+			const item = this.data.items[index];
+
+			item.fragment?.remove();
 
-			node.parentNode?.removeChild(node);
+			for (const node of item.nodes) {
+				node.remove();
+			}
 		}
 
-		this.data.nodes.splice(0, length);
+		this.data.items.splice(0, length);
 	}
 }

package/src/helpers/dom.ts

@@ -1,48 +1,20 @@
 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];
-	}
+import type {ProperNode} from '../models';
+import {isFragment, isProperNode} from './index';
 
+export function createNodes(value: unknown): ProperNode[] {
 	if (isFragment(value)) {
-		return value.get() as FragmentNode[];
+		return value.get() as ProperNode[];
 	}
 
-	return [new Text(getString(value))];
-}
-
-export function createTemplate(html: string): Node {
-	const template = document.createElement('template');
-
-	template.innerHTML = html;
-
-	const cloned = template.content.cloneNode(true);
-
-	const scripts = [
-		...(cloned instanceof Element ? cloned.querySelectorAll('script') : []),
-	];
-
-	const {length} = scripts;
-
-	for (let index = 0; index < length; index += 1) {
-		scripts[index].remove();
+	if (isProperNode(value)) {
+		return [value];
 	}
 
-	cloned.normalize();
-
-	return cloned;
-}
-
-export function getNodes(node: Node): Node[] {
-	return /^documentfragment$/i.test(node.constructor.name)
-		? [...node.childNodes]
-		: [node];
+	return [new Text(getString(value))];
 }
 
-export function replaceNodes(from: FragmentNode[], to: FragmentNode[]): void {
+export function replaceNodes(from: ProperNode[], to: ProperNode[]): void {
 	const {length} = from;
 
 	for (let index = 0; index < length; index += 1) {

package/src/helpers/index.ts

@@ -1,5 +1,5 @@
 import type {Fragment} from '../fragment';
-import type {FragmentElement, FragmentNode} from '../models';
+import type {ProperElement, ProperNode} from '../models';
 
 export function isFragment(value: unknown): value is Fragment {
 	return (
@@ -10,14 +10,10 @@ export function isFragment(value: unknown): value is Fragment {
 	);
 }
 
-export function isFragmentElement(value: unknown): value is FragmentElement {
+export function isProperElement(value: unknown): value is ProperElement {
 	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
-	);
+export function isProperNode(value: unknown): value is ProperNode {
+	return value instanceof CharacterData || value instanceof Element;
 }

package/src/models.ts

@@ -1,10 +1,17 @@
+import type {Fragment} from './fragment';
+
 export type FragmentData = {
 	expressions: unknown[];
-	nodes: Node[];
+	items: FragmentItem[];
 	strings: TemplateStringsArray;
 	values: unknown[];
 };
 
-export type FragmentElement = HTMLElement | SVGElement;
+export type FragmentItem = {
+	fragment?: Fragment;
+	nodes: ProperNode[];
+};
+
+export type ProperElement = HTMLElement | SVGElement;
 
-export type FragmentNode = Comment | Element | Text;
+export type ProperNode = CharacterData | Element;

package/src/node/attribute/index.ts

@@ -1,5 +1,5 @@
 import {isReactive} from '@oscarpalmer/sentinel';
-import type {FragmentData, FragmentElement} from '../../models';
+import type {FragmentData, ProperElement} from '../../models';
 import {mapEvent} from '../event';
 import {setAttribute} from './value';
 
@@ -11,45 +11,24 @@ function getValue(data: FragmentData, original: string): unknown {
 	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];
+export function mapAttributes(data: FragmentData, element: ProperElement): void {
+		const attributes = [...element.attributes];
+		const {length} = attributes;
 
-		if (isBadAttribute(name, value)) {
-			element.removeAttribute(name);
+		for (let index = 0; index < length; index += 1) {
+			const {name, value} = attributes[index];
 
-			continue;
-		}
-
-		const actual = getValue(data, value);
+			const actual = getValue(data, value);
 
-		if (name.startsWith('@')) {
-			mapEvent(element, name, actual);
-		} else if (name.includes('.') || isReactive(actual)) {
-			mapValue(element, name, actual);
+			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 {
+function mapValue(element: ProperElement, name: string, value: unknown): void {
 	switch (true) {
 		case typeof value === 'function':
 			mapValue(element, name, value());