@oscarpalmer/abydon 0.7.0 → 0.9.0

package/dist/index.mjs

@@ -0,0 +1,5 @@
+// src/index.ts
+import {html} from "./html";
+export {
+  html
+};

package/dist/node/attribute/index.mjs

@@ -0,0 +1,35 @@
+// src/node/attribute/index.ts
+import {isReactive} from "@oscarpalmer/sentinel";
+import {mapEvent} from "../event";
+import {setAttribute} from "./value";
+function getValue(data, original) {
+  const matches = commentExpression.exec(original ?? "");
+  return matches == null ? original : data.values[+matches[1]];
+}
+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];
+    const actual = getValue(data, value2);
+    if (name.startsWith("@")) {
+      mapEvent(element, name, actual);
+    } else if (name.includes(".") || isReactive(actual)) {
+      mapValue(element, name, actual);
+    }
+  }
+}
+function mapValue(element, name, value2) {
+  switch (true) {
+    case typeof value2 === "function":
+      mapValue(element, name, value2());
+      return;
+    default:
+      setAttribute(element, name, value2);
+      break;
+  }
+}
+var commentExpression = /^<!--abydon\.(\d+)-->$/;
+export {
+  mapAttributes
+};

package/dist/node/attribute/value.mjs

@@ -0,0 +1,89 @@
+// src/node/attribute/value.ts
+import {getString} from "@oscarpalmer/atoms/string";
+import {effect, isReactive} from "@oscarpalmer/sentinel";
+import {
+isBooleanAttribute,
+setAttribute as setAttr
+} from "@oscarpalmer/toretto/attribute";
+function setAttribute(element, name, value) {
+  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, name, value) {
+  function update(value2) {
+    if (/^(|true)$/.test(getString(value2))) {
+      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, name, value) {
+  function update(value2) {
+    if (value2 == null || value2 === false || value2 === true && unit == null) {
+      element.style.removeProperty(property);
+    } else {
+      element.style.setProperty(property, value2 === true ? unit : getString(value2));
+    }
+  }
+  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, name, value) {
+  const callback = isBooleanAttribute(name) && name in element ? name === "selected" ? updateSelected : updateProperty : setAttr;
+  if (isReactive(value)) {
+    effect(() => {
+      callback(element, name, value.get());
+    });
+  } else {
+    callback(element, name, value);
+  }
+}
+function triggerSelectChange(select) {
+  if (select != null) {
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+}
+function updateProperty(element, name, value) {
+  element[name] = /^(|true)$/.test(getString(value));
+}
+function updateSelected(element, name, value) {
+  const select = element.closest("select");
+  const options = [...select?.options ?? []];
+  if (select != null && options.includes(element)) {
+    triggerSelectChange(select);
+  }
+  updateProperty(element, name, value);
+}
+var classPattern = /^class\./;
+var stylePattern = /^style\./;
+export {
+  setAttribute
+};

package/dist/node/event.mjs

@@ -0,0 +1,19 @@
+// src/node/event.ts
+function getOptions(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, value) {
+  element.removeAttribute(name);
+  const [, type, options] = /^@(\w+)(?::([a-z:]+))?$/.exec(name) ?? [];
+  if (typeof value === "function" && type != null) {
+    element.addEventListener(type, value, getOptions(options ?? ""));
+  }
+}
+export {
+  mapEvent
+};

package/dist/node/index.mjs

@@ -0,0 +1,55 @@
+// src/node/index.ts
+import {isReactive} from "@oscarpalmer/sentinel";
+import {isFragment, isProperElement} from "../helpers";
+import {createNodes} from "../helpers/dom";
+import {mapAttributes} from "./attribute";
+import {setReactiveNode} from "./value";
+function mapNode(data, comment) {
+  const matches = commentExpression.exec(comment.textContent ?? "");
+  const value2 = matches == null ? null : data.values[+matches[1]];
+  if (value2 != null) {
+    mapValue(data, comment, value2);
+  }
+}
+function mapNodes(data, nodes) {
+  const { length } = nodes;
+  for (let index = 0;index < length; index += 1) {
+    const node = nodes[index];
+    if (node instanceof Comment) {
+      mapNode(data, node);
+      continue;
+    }
+    if (isProperElement(node)) {
+      mapAttributes(data, node);
+    }
+    if (node.hasChildNodes()) {
+      mapNodes(data, [...node.childNodes]);
+    }
+  }
+}
+function mapValue(data, comment, value2) {
+  switch (true) {
+    case typeof value2 === "function":
+      mapValue(data, comment, value2());
+      return;
+    case isReactive(value2):
+      setReactiveNode(data, comment, value2);
+      break;
+    default:
+      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

@@ -0,0 +1,57 @@
+// src/node/value.ts
+import {isNullableOrWhitespace} from "@oscarpalmer/atoms/is";
+import {getString} from "@oscarpalmer/atoms/string";
+import {effect} from "@oscarpalmer/sentinel";
+import {isFragment, isProperNode} from "../helpers";
+import {createNodes, replaceNodes} from "../helpers/dom";
+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();
+    const valueIsFragment = isFragment(value);
+    if (valueIsFragment || isProperNode(value)) {
+      nodes = setNodes(nodes, comment, text, value);
+    } else {
+      nodes = setText(nodes, comment, text, value) ? [text] : undefined;
+    }
+    if (item != null) {
+      item.fragment = valueIsFragment ? value : undefined;
+      item.nodes = [...nodes ?? [comment]];
+    }
+  });
+}
+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,23 +4,31 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.61.0",
-		"@oscarpalmer/sentinel": "^0.22.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.20",
+		"bun": "^1.1.24",
+		"dts-bundle-generator": "^9.5.1",
 		"typescript": "^5.5.4"
 	},
 	"exports": {
 		".": {
-			"types": "./types/index.d.ts",
 			"bun": "./src/index.ts",
-			"import": "./dist/index.mjs",
-			"require": "./dist/index.js"
+			"import": {
+				"types": "./types/index.d.ts",
+				"default": "./dist/index.mjs"
+			},
+			"require": {
+				"types": "./types/index.d.cts",
+				"default": "./dist/index.js"
+			}
 		}
 	},
+	"files": ["dist/index.js", "dist/**/*.mjs", "src", "types"],
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.mjs",
@@ -32,9 +40,12 @@
 	"scripts": {
 		"build": "bun run clean && bunx bun ./.bun.ts && bunx bun ./.bun.ts --mjs && bun run types",
 		"clean": "rm -rf ./dist && rm -rf ./types && rm -rf ./tsconfig.tsbuildinfo",
-		"types": "bunx tsc -p ./tsconfig.json",
+		"types": "bun run types:cjs && bun run types:esm",
+		"types:cjs": "bunx dts-bundle-generator --out-file ./types/index.d.cts --no-check --silent ./src/index.ts",
+		"types:esm": "bunx tsc -p ./tsconfig.json",
 		"watch": "bun build ./src/index.ts --outfile ./dist/index.js --watch"
 	},
-	"types": "src/types.d.ts",
-	"version": "0.7.0"
+	"type": "module",
+	"types": "types/index.d.ts",
+	"version": "0.9.0"
 }

package/src/fragment.ts

@@ -1,51 +1,78 @@
-import {createTemplate, getNodes} from './helpers/dom';
+import {html} from '@oscarpalmer/toretto/html';
 import {parse} from './html';
-import type {Fragment, FragmentData} from './models';
+import type {FragmentData, ProperNode} from './models';
 import {mapNodes} from './node';
 
-export function createFragment(
-	strings: TemplateStringsArray,
-	expressions: unknown[],
-): Fragment {
-	const data: FragmentData = {
-		expressions,
-		strings,
-		nodes: [],
-		values: [],
-	};
-
-	const instance = Object.create({
-		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);
-			}
+export class Fragment {
+	private readonly $fragment = true;
+	private readonly data: FragmentData;
 
-			return [...data.nodes];
-		},
-		remove() {
-			const {length} = data.nodes;
+	constructor(strings: TemplateStringsArray, expressions: unknown[]) {
+		this.data = {
+			expressions,
+			strings,
+			items: [],
+			values: [],
+		};
+	}
 
-			for (let index = 0; index < length; index += 1) {
-				const node = data.nodes[index];
+	/**
+	 * Appends the fragment to the given element
+	 */
+	appendTo(element: Element): void {
+		element.append(...this.get());
+	}
 
-				node.parentNode?.removeChild(node);
-			}
+	/**
+	 * Gets a list of the fragment's nodes
+	 */
+	get(): Node[] {
+		if (this.data.items.length === 0) {
+			const parsed = parse(this.data);
+
+			const templated = html(parsed, {
+				sanitiseBooleanAttributes: false,
+			});
+
+			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[],
+			);
+		}
 
-			data.nodes.splice(0, data.nodes.length);
-		},
-	} as Fragment);
+		return [
+			...(this.data.items.flatMap(
+				item => item.fragment?.get() ?? item.nodes,
+			) as ProperNode[]),
+		];
+	}
 
-	Object.defineProperty(instance, '$fragment', {
-		value: true,
-	});
+	/**
+	 * Removes the fragment from the DOM
+	 */
+	remove(): void {
+		const {length} = this.data.items;
+
+		for (let index = 0; index < length; index += 1) {
+			const item = this.data.items[index];
+
+			item.fragment?.remove();
+
+			for (const node of item.nodes) {
+				node.remove();
+			}
+		}
 
-	return instance;
+		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();
+		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,4 +1,5 @@
-import type {Fragment, FragmentElement, FragmentNode} from '../models';
+import type {Fragment} from '../fragment';
+import type {ProperElement, ProperNode} from '../models';
 
 export function isFragment(value: unknown): value is Fragment {
 	return (
@@ -9,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/html.ts

@@ -1,6 +1,6 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
-import {createFragment} from './fragment';
-import type {Fragment, FragmentData} from './models';
+import {Fragment} from './fragment';
+import type {FragmentData} from './models';
 
 function handleExpression(
 	data: FragmentData,
@@ -36,7 +36,7 @@ export function html(
 	strings: TemplateStringsArray,
 	...values: unknown[]
 ): Fragment {
-	return createFragment(strings, values);
+	return new Fragment(strings, values);
 }
 
 export function parse(data: FragmentData): string {
@@ -53,4 +53,4 @@ export function parse(data: FragmentData): string {
 	}
 
 	return template;
-}
+}

package/src/index.ts

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

package/src/models.ts

@@ -1,16 +1,17 @@
-export type Fragment = {
-		appendTo(element: Element): void;
-		get(): FragmentNode[];
-		remove(): void;
-	};
+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());