@oscarpalmer/abydon 0.3.0 → 0.5.0

package/dist/index.js

@@ -34,22 +34,167 @@ 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: [],
+    values: []
+  };
+  const instance = Object.create({
+    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);
+      }
+      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 html(strings, ...values) {
-  const parsed = parse(strings, values);
-  const templated = createTemplate(parsed);
-  return getNodes(templated);
+function getFragment(nodes) {
+  const fragment3 = document.createDocumentFragment();
+  fragment3.append(...nodes);
+  return fragment3;
 }
-var parse = function(parts, values) {
-  const { length } = parts;
+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);
+}
+function parse(data) {
+  const { length } = data.strings;
   let template = "";
   for (let index = 0;index < length; index += 1) {
-    const part = parts[index];
-    const value = values[index];
-    template += isNullableOrWhitespace(value) ? part : `${part}${value}`;
+    template += handleExpression(data, data.strings[index], data.expressions[index]);
   }
   return template;
-};
+}
 export {
-  html
+  html2 as html
 };

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.3.0"
+	"version": "0.5.0"
 }

package/src/fragment.ts

@@ -0,0 +1,63 @@
+import {createTemplate, getNodes} from './helpers/dom';
+import {getFragment, parse} from './html';
+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[],
+): Fragment {
+	const data: FragmentData = {
+		expressions,
+		strings,
+		nodes: [],
+		values: [],
+	};
+
+	const instance = Object.create({
+		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);
+			}
+
+			return getFragment(data.nodes);
+		},
+		remove(): void {
+			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);
+		},
+	});
+
+	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,26 +1,62 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
-import {createTemplate, getNodes} from './helpers/dom';
+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,
 	...values: unknown[]
-): Node[] {
-	const parsed = parse(strings, values);
-	const templated = createTemplate(parsed);
-
-	return getNodes(templated);
+): Fragment {
+	return createFragment(strings, values);
 }
 
-function parse(parts: TemplateStringsArray, values: unknown[]): string {
-	const {length} = parts;
+export function parse(data: FragmentData): string {
+	const {length} = data.strings;
 
 	let template = '';
 
 	for (let index = 0; index < length; index += 1) {
-		const part = parts[index];
-		const value = values[index];
-
-		template += isNullableOrWhitespace(value) ? part : `${part}${value}`;
+		template += handleExpression(
+			data,
+			data.strings[index],
+			data.expressions[index],
+		);
 	}
 
 	return template;

package/src/index.ts

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

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

@@ -0,0 +1,12 @@
+export type Fragment = {
+    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 +1,4 @@
-export declare function html(strings: TemplateStringsArray, ...values: unknown[]): Node[];
+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/index.d.ts

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

package/types/node/index.d.ts

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