@oscarpalmer/abydon 0.4.0 → 0.5.0

package/dist/index.js

@@ -34,28 +34,156 @@ function getNodes(node) {
   return /^documentfragment$/i.test(node.constructor.name) ? [...node.childNodes] : [node];
 }
 
+// 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/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/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);
+  }
+};
+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 (node instanceof Element) {
+    }
+    if (node.hasChildNodes()) {
+      mapNodes(data, [...node.childNodes]);
+    }
+  }
+}
+var mapReactive = function(comment, value10) {
+};
+var mapValue = function(comment, value10) {
+  switch (true) {
+    case value10 instanceof Node:
+      comment.replaceWith(value10);
+      return;
+    case isFragment(value10):
+      comment.replaceWith(value10.get());
+      break;
+    case isReactive(value10):
+      mapReactive(comment, value10);
+      break;
+    case typeof value10 === "function":
+      mapValue(comment, value10());
+      return;
+    case typeof value10 === "object":
+      comment.replaceWith(new Text(getString(value10)));
+      break;
+  }
+};
+var commentExpression = /^abydon\.(\d+)$/;
+
 // src/fragment.ts
 function createFragment(strings, expressions) {
   const data = {
     expressions,
     strings,
-    nodes: []
+    nodes: [],
+    values: []
   };
   const instance = Object.create({
-    append(parent) {
-      if (data.nodes.length > 0) {
-        return parent.append(...data.nodes);
+    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 getFragment(data.nodes);
+    },
+    remove() {
+      const { length } = data.nodes;
+      for (let index = 0;index < length; index += 1) {
+        const node2 = data.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);
+      data.nodes.splice(0, data.nodes.length);
     }
   });
+  Object.defineProperty(instance, "$fragment", {
+    value: true
+  });
   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) {
+  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}`;
+};
 function html2(strings, ...values) {
   return createFragment(strings, values);
 }
@@ -63,9 +191,7 @@ function parse(data) {
   const { length } = data.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(data, data.strings[index], data.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.5.0"
 }

package/src/fragment.ts

@@ -1,14 +1,17 @@
 import {createTemplate, getNodes} from './helpers/dom';
-import {parse} from './html';
+import {getFragment, parse} from './html';
+import {mapNodes} from './node';
 
 export type Fragment = {
-	append(parent: Node): void;
+	get(): DocumentFragment;
+	remove(): void;
 };
 
 export type FragmentData = {
 	expressions: unknown[];
 	nodes: Node[];
 	strings: TemplateStringsArray;
+	values: unknown[];
 };
 
 export function createFragment(
@@ -19,22 +22,42 @@ export function createFragment(
 		expressions,
 		strings,
 		nodes: [],
+		values: [],
 	};
 
 	const instance = Object.create({
-		append(parent: ParentNode) {
-			if (data.nodes.length > 0) {
-				return parent.append(...data.nodes);
+		get(): Node {
+			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 getFragment(data.nodes);
+		},
+		remove(): void {
+			const {length} = data.nodes;
 
-			data.nodes.splice(0, data.nodes.length, ...getNodes(templated));
+			for (let index = 0; index < length; index += 1) {
+				const node = data.nodes[index];
+
+				node.parentNode?.removeChild(node);
+			}
 
-			parent.append(...data.nodes);
+			data.nodes.splice(0, data.nodes.length);
 		},
 	});
 
+	Object.defineProperty(instance, '$fragment', {
+		value: true,
+	});
+
 	return instance;
 }
+
+export function isFragment(value: unknown): value is Fragment {
+	return typeof value === 'object' && value != null && '$fragment' in value;
+}

package/src/html.ts

@@ -1,5 +1,43 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
-import {createFragment, type FragmentData, type Fragment} from './fragment';
+import {type Fragment, type FragmentData, createFragment} from './fragment';
+
+export function getFragment(nodes: Node[]): DocumentFragment {
+	const fragment = document.createDocumentFragment();
+
+	fragment.append(...nodes);
+
+	return fragment;
+}
+
+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 +52,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/node/index.ts

@@ -0,0 +1,64 @@
+import {getString} from '@oscarpalmer/atoms/string';
+import {isReactive, type Reactive} from '@oscarpalmer/sentinel';
+import {type FragmentData, isFragment} from '../fragment';
+
+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 (node instanceof Element) {
+			// Attributes
+		}
+
+		if (node.hasChildNodes()) {
+			mapNodes(data, [...node.childNodes]);
+		}
+	}
+}
+
+function mapReactive(comment: Comment, value: Reactive): void {
+	// ?
+}
+
+function mapValue(comment: Comment, value: unknown): void {
+	switch (true) {
+		case value instanceof Node:
+			comment.replaceWith(value);
+			return;
+
+		case isFragment(value):
+			comment.replaceWith(value.get());
+			break;
+
+		case isReactive(value):
+			mapReactive(comment, value);
+			break;
+
+		case typeof value === 'function':
+			mapValue(comment, value());
+			return;
+
+		case typeof value === 'object':
+			comment.replaceWith(new Text(getString(value)));
+			break;
+	}
+}

package/types/fragment.d.ts

@@ -1,9 +1,12 @@
 export type Fragment = {
-    append(parent: Node): void;
+    get(): DocumentFragment;
+    remove(): void;
 };
 export type FragmentData = {
     expressions: unknown[];
     nodes: Node[];
     strings: TemplateStringsArray;
+    values: unknown[];
 };
 export declare function createFragment(strings: TemplateStringsArray, expressions: unknown[]): Fragment;
+export declare function isFragment(value: unknown): value is Fragment;

package/types/html.d.ts

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

package/types/node/index.d.ts

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