@oscarpalmer/abydon 0.6.0 → 0.8.0

package/dist/node/attribute/index.mjs

@@ -0,0 +1,43 @@
+// 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 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);
+    } 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,
+  isBadAttribute
+};

package/dist/node/attribute/value.mjs

@@ -0,0 +1,106 @@
+// 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);
+  switch (true) {
+    case classPattern.test(name):
+      setClasses(element2, name, value);
+      return;
+    case stylePattern.test(name):
+      setStyle(element2, name, value);
+      return;
+    default:
+      setValue(element2, name, value);
+      break;
+  }
+}
+function setClasses(element2, name, value) {
+  function update(value2) {
+    if (/^(|true)$/.test(getString(value2))) {
+      element2.classList.add(...classes);
+    } else {
+      element2.classList.remove(...classes);
+    }
+  }
+  const classes = name.slice(6).split(".");
+  if (isReactive(value)) {
+    effect(() => {
+      update(value.get());
+    });
+  } else {
+    update(value);
+  }
+}
+function setStyle(element2, name, value) {
+  function update(value2) {
+    if (value2 == null || value2 === false || value2 === true && unit == null) {
+      element2.style.removeProperty(property);
+    } else {
+      element2.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(element2, name, value) {
+  const callback = booleanAttributes.has(name) && name in element2 ? name === "selected" ? updateSelected(element2) : updateProperty : updateAttribute;
+  if (isReactive(value)) {
+    effect(() => {
+      callback(element2, name, value.get());
+    });
+  } else {
+    callback(element2, name, value);
+  }
+}
+function triggerSelectChange(select) {
+  if (select != null) {
+    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 updateSelected(element2) {
+  const select = closest(element2, "select")[0];
+  const options = [...select?.options ?? []];
+  return (element3, name, value) => {
+    if (select != null && options.includes(element3)) {
+      triggerSelectChange(select);
+    }
+    updateProperty(element3, name, value);
+  };
+}
+var booleanAttributes = new Set([
+  "checked",
+  "disabled",
+  "hidden",
+  "inert",
+  "multiple",
+  "open",
+  "readOnly",
+  "required",
+  "selected"
+]);
+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,46 @@
+// src/node/index.ts
+import {isReactive} from "@oscarpalmer/sentinel";
+import {isFragmentElement} 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(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 (isFragmentElement(node)) {
+      mapAttributes(data, node);
+    }
+    if (node.hasChildNodes()) {
+      mapNodes(data, [...node.childNodes]);
+    }
+  }
+}
+function mapValue(comment, value2) {
+  switch (true) {
+    case typeof value2 === "function":
+      mapValue(comment, value2());
+      return;
+    case isReactive(value2):
+      setReactiveNode(comment, value2);
+      break;
+    default:
+      comment.replaceWith(...createNodes(value2));
+      break;
+  }
+}
+var commentExpression = /^abydon\.(\d+)$/;
+export {
+  mapNodes
+};

package/dist/node/value.mjs

@@ -0,0 +1,40 @@
+// src/node/value.ts
+import {isNullableOrWhitespace} from "@oscarpalmer/atoms/is";
+import {getString} from "@oscarpalmer/atoms/string";
+import {effect} from "@oscarpalmer/sentinel";
+import {isFragment, isFragmentNode} from "../helpers";
+import {createNodes, replaceNodes} from "../helpers/dom";
+function setReactiveNode(comment, reactive) {
+  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 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;
+  });
+}
+export {
+  setReactiveNode
+};

package/package.json

@@ -4,23 +4,30 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.61.0",
-		"@oscarpalmer/sentinel": "^0.22.0"
+		"@oscarpalmer/atoms": "^0.67.0",
+		"@oscarpalmer/sentinel": "^0.23.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.8.3",
 		"@types/bun": "^1.1.6",
-		"bun": "^1.1.20",
+		"bun": "^1.1.21",
+		"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 +39,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.6.0"
+	"type": "module",
+	"types": "types/index.d.ts",
+	"version": "0.8.0"
 }

package/src/fragment.ts

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

package/src/helpers/dom.ts

@@ -8,7 +8,7 @@ export function createNodes(value: unknown): FragmentNode[] {
 	}
 
 	if (isFragment(value)) {
-		return value.get();
+		return value.get() as FragmentNode[];
 	}
 
 	return [new Text(getString(value))];

package/src/helpers/index.ts

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

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,
@@ -23,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}-->`;
@@ -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,9 +1,3 @@
-export type Fragment = {
-		appendTo(element: Element): void;
-		get(): FragmentNode[];
-		remove(): void;
-	};
-
 export type FragmentData = {
 	expressions: unknown[];
 	nodes: Node[];

package/src/node/attribute/value.ts

@@ -1,8 +1,8 @@
+import {closest} from '@oscarpalmer/atoms/element';
 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',

package/src/node/event.ts

@@ -1,5 +1,15 @@
 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,
@@ -7,9 +17,13 @@ export function mapEvent(
 ): void {
 	element.removeAttribute(name);
 
-	if (typeof value !== 'function') {
-		return;
-	}
+	const [, type, options] = /^@(\w+)(?::([a-z:]+))?$/.exec(name) ?? [];
 
-	// TODO
-}
+	if (typeof value === 'function' && type != null) {
+		element.addEventListener(
+			type,
+			value as EventListener,
+			getOptions(options ?? ''),
+		);
+	}
+}

package/src/node/index.ts

@@ -2,8 +2,8 @@ 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';
+import {setReactiveNode} from './value';
 
 const commentExpression = /^abydon\.(\d+)$/;
 

package/src/node/value.ts

@@ -45,4 +45,4 @@ export function setReactiveNode(comment: Comment, reactive: Reactive): void {
 
 		nodes = undefined;
 	});
-}
+}

package/types/fragment.d.ts

@@ -1,2 +1,17 @@
-import type { Fragment } from './models';
-export declare function createFragment(strings: TemplateStringsArray, expressions: unknown[]): Fragment;
+export declare class Fragment {
+    private readonly $fragment;
+    private readonly data;
+    constructor(strings: TemplateStringsArray, expressions: unknown[]);
+    /**
+     * Appends the fragment to the given element
+     */
+    appendTo(element: Element): void;
+    /**
+     * Gets a list of the fragment's nodes
+     */
+    get(): Node[];
+    /**
+     * Removes the fragment from the DOM
+     */
+    remove(): void;
+}

package/types/helpers/index.d.ts

@@ -1,4 +1,5 @@
-import type { Fragment, FragmentElement, FragmentNode } from '../models';
+import type { Fragment } from '../fragment';
+import type { 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,4 @@
-import type { Fragment, FragmentData } from './models';
+import { Fragment } from './fragment';
+import type { FragmentData } from './models';
 export declare function html(strings: TemplateStringsArray, ...values: unknown[]): Fragment;
 export declare function parse(data: FragmentData): string;

package/types/index.d.cts

@@ -0,0 +1,22 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export declare class Fragment {
+	private readonly $fragment;
+	private readonly data;
+	constructor(strings: TemplateStringsArray, expressions: unknown[]);
+	/**
+	 * Appends the fragment to the given element
+	 */
+	appendTo(element: Element): void;
+	/**
+	 * Gets a list of the fragment's nodes
+	 */
+	get(): Node[];
+	/**
+	 * Removes the fragment from the DOM
+	 */
+	remove(): void;
+}
+export declare function html(strings: TemplateStringsArray, ...values: unknown[]): Fragment;
+
+export {};

package/types/index.d.ts

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

package/types/models.d.ts

@@ -1,8 +1,3 @@
-export type Fragment = {
-    appendTo(element: Element): void;
-    get(): FragmentNode[];
-    remove(): void;
-};
 export type FragmentData = {
     expressions: unknown[];
     nodes: Node[];

package/.bun.ts

@@ -1,32 +0,0 @@
-import * as fs from 'node:fs/promises';
-
-const directory = String(__dirname).replace(/\\/g, '/');
-const isMjs = process.argv.includes('--mjs');
-
-async function getFiles(path: string): Promise<string[]> {
-	const entries = await fs.readdir(path, {withFileTypes: true});
-
-	const files = entries
-		.filter(entry => entry.isFile() && entry.name.endsWith('.ts'))
-		.map(file => `${path}/${file.name}`);
-
-	const folders = entries.filter(entry => entry.isDirectory());
-
-	for (const folder of folders) {
-		files.push(...(await getFiles(`${path}/${folder.name}`)));
-	}
-
-	return files;
-}
-
-getFiles('./src').then(async files => {
-	for (const file of files) {
-		await Bun.build({
-			entrypoints: [`${directory}/${file}`],
-			external: isMjs ? ['*'] : [],
-			naming: isMjs ? '[dir]/[name].mjs' : undefined,
-			outdir: './dist',
-			root: './src',
-		});
-	}
-});

package/.gitattributes

@@ -1 +0,0 @@
-* text=auto eol=lf