@oscarpalmer/atoms 0.68.0 → 0.69.0

package/dist/js/element/attribute.mjs

@@ -0,0 +1,61 @@
+// src/js/element/attribute.ts
+function isBadAttribute(name, value) {
+  return onPrefix.test(name) || sourcePrefix.test(name) && valuePrefix.test(value);
+}
+function isBooleanAttribute(name) {
+  return booleanAttributes.includes(name.toLowerCase());
+}
+function isEmptyNonBooleanAttribute(name, value) {
+  return !booleanAttributes.includes(name) && value.trim().length === 0;
+}
+function isInvalidBooleanAttribute(name, value) {
+  if (!booleanAttributes.includes(name)) {
+    return true;
+  }
+  const normalised = value.toLowerCase().trim();
+  return !(normalised.length === 0 || normalised === name || name === "hidden" && normalised === "until-found");
+}
+function setAttribute(element, name, value) {
+  if (value == null) {
+    element.removeAttribute(name);
+  } else {
+    element.setAttribute(name, typeof value === "string" ? value : JSON.stringify(value));
+  }
+}
+var booleanAttributes = Object.freeze([
+  "async",
+  "autofocus",
+  "autoplay",
+  "checked",
+  "controls",
+  "default",
+  "defer",
+  "disabled",
+  "formnovalidate",
+  "hidden",
+  "inert",
+  "ismap",
+  "itemscope",
+  "loop",
+  "multiple",
+  "muted",
+  "nomodule",
+  "novalidate",
+  "open",
+  "playsinline",
+  "readonly",
+  "required",
+  "reversed",
+  "selected"
+]);
+var onPrefix = /^on/i;
+var sourcePrefix = /^(href|src|xlink:href)$/i;
+var valuePrefix = /(data:text\/html|javascript:)/i;
+export {
+  setAttribute,
+  isInvalidBooleanAttribute,
+  isEmptyNonBooleanAttribute,
+  isBooleanAttribute,
+  isBadAttribute,
+  booleanAttributes
+};

package/dist/js/element/index.js

@@ -17,6 +17,59 @@ function getTextDirection(element) {
   return getComputedStyle?.(element)?.direction === "rtl" ? "rtl" : "ltr";
 }
 
+// src/js/element/attribute.ts
+function isBadAttribute(name, value) {
+  return onPrefix.test(name) || sourcePrefix.test(name) && valuePrefix.test(value);
+}
+function isBooleanAttribute(name) {
+  return booleanAttributes.includes(name.toLowerCase());
+}
+function isEmptyNonBooleanAttribute(name, value) {
+  return !booleanAttributes.includes(name) && value.trim().length === 0;
+}
+function isInvalidBooleanAttribute(name, value) {
+  if (!booleanAttributes.includes(name)) {
+    return true;
+  }
+  const normalised = value.toLowerCase().trim();
+  return !(normalised.length === 0 || normalised === name || name === "hidden" && normalised === "until-found");
+}
+function setAttribute(element, name, value) {
+  if (value == null) {
+    element.removeAttribute(name);
+  } else {
+    element.setAttribute(name, typeof value === "string" ? value : JSON.stringify(value));
+  }
+}
+var booleanAttributes = Object.freeze([
+  "async",
+  "autofocus",
+  "autoplay",
+  "checked",
+  "controls",
+  "default",
+  "defer",
+  "disabled",
+  "formnovalidate",
+  "hidden",
+  "inert",
+  "ismap",
+  "itemscope",
+  "loop",
+  "multiple",
+  "muted",
+  "nomodule",
+  "novalidate",
+  "open",
+  "playsinline",
+  "readonly",
+  "required",
+  "reversed",
+  "selected"
+]);
+var onPrefix = /^on/i;
+var sourcePrefix = /^(href|src|xlink:href)$/i;
+var valuePrefix = /(data:text\/html|javascript:)/i;
 // src/js/element/closest.ts
 function calculateDistance(origin, target) {
   if (origin === target || origin.parentElement === target) {
@@ -236,6 +289,11 @@ function updateStyleProperty(element, key, value2) {
 export {
   setStyles,
   setData,
+  setAttribute,
+  isInvalidBooleanAttribute,
+  isEmptyNonBooleanAttribute,
+  isBooleanAttribute,
+  isBadAttribute,
   getTextDirection,
   getElementUnderPointer,
   getData,
@@ -243,6 +301,7 @@ export {
   findElements,
   findElement,
   closest,
+  booleanAttributes,
   findElements as $$,
   findElement as $
 };

package/dist/js/element/index.mjs

@@ -17,6 +17,7 @@ function getTextDirection(element) {
   return getComputedStyle?.(element)?.direction === "rtl" ? "rtl" : "ltr";
 }
 
+export * from "./attribute";
 export * from "./closest";
 export * from "./data";
 export * from "./find";

package/dist/js/html/index.js

@@ -0,0 +1,124 @@
+// src/js/is.ts
+function isPlainObject(value2) {
+  if (typeof value2 !== "object" || value2 === null) {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(value2);
+  return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in value2) && !(Symbol.iterator in value2);
+}
+
+// src/js/element/attribute.ts
+function isBadAttribute(name, value2) {
+  return onPrefix.test(name) || sourcePrefix.test(name) && valuePrefix.test(value2);
+}
+function isEmptyNonBooleanAttribute(name, value2) {
+  return !booleanAttributes.includes(name) && value2.trim().length === 0;
+}
+function isInvalidBooleanAttribute(name, value2) {
+  if (!booleanAttributes.includes(name)) {
+    return true;
+  }
+  const normalised = value2.toLowerCase().trim();
+  return !(normalised.length === 0 || normalised === name || name === "hidden" && normalised === "until-found");
+}
+var booleanAttributes = Object.freeze([
+  "async",
+  "autofocus",
+  "autoplay",
+  "checked",
+  "controls",
+  "default",
+  "defer",
+  "disabled",
+  "formnovalidate",
+  "hidden",
+  "inert",
+  "ismap",
+  "itemscope",
+  "loop",
+  "multiple",
+  "muted",
+  "nomodule",
+  "novalidate",
+  "open",
+  "playsinline",
+  "readonly",
+  "required",
+  "reversed",
+  "selected"
+]);
+var onPrefix = /^on/i;
+var sourcePrefix = /^(href|src|xlink:href)$/i;
+var valuePrefix = /(data:text\/html|javascript:)/i;
+// src/js/html/sanitise.ts
+function sanitise(value2, options) {
+  return sanitiseNodes(Array.isArray(value2) ? value2 : [value2], {
+    sanitiseBooleanAttributes: options?.sanitiseBooleanAttributes ?? true
+  });
+}
+function sanitiseAttributes(element2, attributes, options) {
+  const { length } = attributes;
+  for (let index = 0;index < length; index += 1) {
+    const { name, value: value2 } = attributes[index];
+    if (isBadAttribute(name, value2) || isEmptyNonBooleanAttribute(name, value2)) {
+      element2.removeAttribute(name);
+    } else if (options.sanitiseBooleanAttributes && isInvalidBooleanAttribute(name, value2)) {
+      element2.setAttribute(name, "");
+    }
+  }
+}
+function sanitiseNodes(nodes, options) {
+  const { length } = nodes;
+  for (let index = 0;index < length; index += 1) {
+    const node = nodes[index];
+    if (node instanceof Element) {
+      sanitiseAttributes(node, [...node.attributes], options);
+    }
+    sanitiseNodes([...node.childNodes], options);
+  }
+  return nodes;
+}
+
+// src/js/html/index.ts
+function createTemplate(html) {
+  const template2 = document.createElement("template");
+  template2.innerHTML = html;
+  templates[html] = template2;
+  return template2;
+}
+function getNodes(node) {
+  return /^documentfragment$/i.test(node.constructor.name) ? [...node.childNodes] : [node];
+}
+function getTemplate(value2) {
+  if (value2.trim().length === 0) {
+    return;
+  }
+  let template2;
+  if (/^[\w-]+$/.test(value2)) {
+    template2 = document.querySelector(`#${value2}`);
+  }
+  if (template2 instanceof HTMLTemplateElement) {
+    return template2;
+  }
+  return templates[value2] ?? createTemplate(value2);
+}
+function html(value2, sanitisation) {
+  const options = sanitisation == null || sanitisation === true ? {} : isPlainObject(sanitisation) ? { ...sanitisation } : null;
+  const template2 = value2 instanceof HTMLTemplateElement ? value2 : typeof value2 === "string" ? getTemplate(value2) : null;
+  if (template2 == null) {
+    return [];
+  }
+  const cloned = template2.content.cloneNode(true);
+  const scripts = cloned.querySelectorAll("script");
+  const { length } = scripts;
+  for (let index = 0;index < length; index += 1) {
+    scripts[index].remove();
+  }
+  cloned.normalize();
+  return options != null ? sanitise(getNodes(cloned), options) : getNodes(cloned);
+}
+var templates = {};
+export {
+  sanitise,
+  html
+};

package/dist/js/html/index.mjs

@@ -0,0 +1,46 @@
+// src/js/html/index.ts
+import {isPlainObject} from "../is";
+import {sanitise as sanitise2} from "./sanitise";
+function createTemplate(html) {
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  templates[html] = template;
+  return template;
+}
+function getNodes(node) {
+  return /^documentfragment$/i.test(node.constructor.name) ? [...node.childNodes] : [node];
+}
+function getTemplate(value) {
+  if (value.trim().length === 0) {
+    return;
+  }
+  let template;
+  if (/^[\w-]+$/.test(value)) {
+    template = document.querySelector(`#${value}`);
+  }
+  if (template instanceof HTMLTemplateElement) {
+    return template;
+  }
+  return templates[value] ?? createTemplate(value);
+}
+function html(value, sanitisation) {
+  const options = sanitisation == null || sanitisation === true ? {} : isPlainObject(sanitisation) ? { ...sanitisation } : null;
+  const template = value instanceof HTMLTemplateElement ? value : typeof value === "string" ? getTemplate(value) : null;
+  if (template == null) {
+    return [];
+  }
+  const cloned = template.content.cloneNode(true);
+  const scripts = cloned.querySelectorAll("script");
+  const { length } = scripts;
+  for (let index = 0;index < length; index += 1) {
+    scripts[index].remove();
+  }
+  cloned.normalize();
+  return options != null ? sanitise2(getNodes(cloned), options) : getNodes(cloned);
+}
+
+export * from "./sanitise";
+var templates = {};
+export {
+  html
+};

package/dist/js/html/sanitise.mjs

@@ -0,0 +1,36 @@
+// src/js/html/sanitise.ts
+import {
+isBadAttribute,
+isEmptyNonBooleanAttribute,
+isInvalidBooleanAttribute
+} from "../element";
+function sanitise(value, options) {
+  return sanitiseNodes(Array.isArray(value) ? value : [value], {
+    sanitiseBooleanAttributes: options?.sanitiseBooleanAttributes ?? true
+  });
+}
+function sanitiseAttributes(element2, attributes, options) {
+  const { length } = attributes;
+  for (let index = 0;index < length; index += 1) {
+    const { name, value } = attributes[index];
+    if (isBadAttribute(name, value) || isEmptyNonBooleanAttribute(name, value)) {
+      element2.removeAttribute(name);
+    } else if (options.sanitiseBooleanAttributes && isInvalidBooleanAttribute(name, value)) {
+      element2.setAttribute(name, "");
+    }
+  }
+}
+function sanitiseNodes(nodes, options) {
+  const { length } = nodes;
+  for (let index = 0;index < length; index += 1) {
+    const node = nodes[index];
+    if (node instanceof Element) {
+      sanitiseAttributes(node, [...node.attributes], options);
+    }
+    sanitiseNodes([...node.childNodes], options);
+  }
+  return nodes;
+}
+export {
+  sanitise
+};

package/dist/js/index.js

@@ -1271,6 +1271,59 @@ function getTextDirection(element) {
   return getComputedStyle?.(element)?.direction === "rtl" ? "rtl" : "ltr";
 }
 
+// src/js/element/attribute.ts
+function isBadAttribute(name, value2) {
+  return onPrefix.test(name) || sourcePrefix.test(name) && valuePrefix.test(value2);
+}
+function isBooleanAttribute(name) {
+  return booleanAttributes.includes(name.toLowerCase());
+}
+function isEmptyNonBooleanAttribute(name, value2) {
+  return !booleanAttributes.includes(name) && value2.trim().length === 0;
+}
+function isInvalidBooleanAttribute(name, value2) {
+  if (!booleanAttributes.includes(name)) {
+    return true;
+  }
+  const normalised = value2.toLowerCase().trim();
+  return !(normalised.length === 0 || normalised === name || name === "hidden" && normalised === "until-found");
+}
+function setAttribute(element, name, value2) {
+  if (value2 == null) {
+    element.removeAttribute(name);
+  } else {
+    element.setAttribute(name, typeof value2 === "string" ? value2 : JSON.stringify(value2));
+  }
+}
+var booleanAttributes = Object.freeze([
+  "async",
+  "autofocus",
+  "autoplay",
+  "checked",
+  "controls",
+  "default",
+  "defer",
+  "disabled",
+  "formnovalidate",
+  "hidden",
+  "inert",
+  "ismap",
+  "itemscope",
+  "loop",
+  "multiple",
+  "muted",
+  "nomodule",
+  "novalidate",
+  "open",
+  "playsinline",
+  "readonly",
+  "required",
+  "reversed",
+  "selected"
+]);
+var onPrefix = /^on/i;
+var sourcePrefix = /^(href|src|xlink:href)$/i;
+var valuePrefix = /(data:text\/html|javascript:)/i;
 // src/js/element/closest.ts
 function calculateDistance(origin, target) {
   if (origin === target || origin.parentElement === target) {
@@ -1657,6 +1710,74 @@ function getPosition(event) {
   }
   return typeof x === "number" && typeof y === "number" ? { x, y } : undefined;
 }
+// src/js/html/sanitise.ts
+function sanitise(value2, options) {
+  return sanitiseNodes(Array.isArray(value2) ? value2 : [value2], {
+    sanitiseBooleanAttributes: options?.sanitiseBooleanAttributes ?? true
+  });
+}
+function sanitiseAttributes(element2, attributes, options) {
+  const { length } = attributes;
+  for (let index = 0;index < length; index += 1) {
+    const { name, value: value2 } = attributes[index];
+    if (isBadAttribute(name, value2) || isEmptyNonBooleanAttribute(name, value2)) {
+      element2.removeAttribute(name);
+    } else if (options.sanitiseBooleanAttributes && isInvalidBooleanAttribute(name, value2)) {
+      element2.setAttribute(name, "");
+    }
+  }
+}
+function sanitiseNodes(nodes, options) {
+  const { length } = nodes;
+  for (let index = 0;index < length; index += 1) {
+    const node = nodes[index];
+    if (node instanceof Element) {
+      sanitiseAttributes(node, [...node.attributes], options);
+    }
+    sanitiseNodes([...node.childNodes], options);
+  }
+  return nodes;
+}
+
+// src/js/html/index.ts
+function createTemplate(html) {
+  const template3 = document.createElement("template");
+  template3.innerHTML = html;
+  templates[html] = template3;
+  return template3;
+}
+function getNodes(node) {
+  return /^documentfragment$/i.test(node.constructor.name) ? [...node.childNodes] : [node];
+}
+function getTemplate(value2) {
+  if (value2.trim().length === 0) {
+    return;
+  }
+  let template3;
+  if (/^[\w-]+$/.test(value2)) {
+    template3 = document.querySelector(`#${value2}`);
+  }
+  if (template3 instanceof HTMLTemplateElement) {
+    return template3;
+  }
+  return templates[value2] ?? createTemplate(value2);
+}
+function html(value2, sanitisation) {
+  const options = sanitisation == null || sanitisation === true ? {} : isPlainObject(sanitisation) ? { ...sanitisation } : null;
+  const template3 = value2 instanceof HTMLTemplateElement ? value2 : typeof value2 === "string" ? getTemplate(value2) : null;
+  if (template3 == null) {
+    return [];
+  }
+  const cloned = template3.content.cloneNode(true);
+  const scripts = cloned.querySelectorAll("script");
+  const { length } = scripts;
+  for (let index = 0;index < length; index += 1) {
+    scripts[index].remove();
+  }
+  cloned.normalize();
+  return options != null ? sanitise(getNodes(cloned), options) : getNodes(cloned);
+}
+var templates = {};
 // src/js/logger.ts
 if (globalThis._atomic_logging == null) {
   globalThis._atomic_logging = true;
@@ -1998,20 +2119,20 @@ function delay(time, timeout) {
 }
 
 // src/js/timer/is.ts
-function is11(pattern, value3) {
+function is12(pattern, value3) {
   return pattern.test(value3?.$timer);
 }
 function isRepeated(value3) {
-  return is11(/^repeat$/, value3);
+  return is12(/^repeat$/, value3);
 }
 function isTimer(value3) {
-  return is11(/^repeat|wait$/, value3);
+  return is12(/^repeat|wait$/, value3);
 }
 function isWaited(value3) {
-  return is11(/^wait$/, value3);
+  return is12(/^wait$/, value3);
 }
 function isWhen(value3) {
-  return is11(/^when$/, value3) && typeof value3.then === "function";
+  return is12(/^when$/, value3) && typeof value3.then === "function";
 }
 // src/js/timer/when.ts
 function when(condition, options) {
@@ -2138,6 +2259,8 @@ export {
   setValue,
   setStyles,
   setData,
+  setAttribute,
+  sanitise,
   round,
   repeat,
   queue,
@@ -2168,14 +2291,19 @@ export {
   isNullableOrEmpty,
   isNullable,
   isKey,
+  isInvalidBooleanAttribute,
   isHexColour,
   isHSLColour,
   isFocusableElement,
+  isEmptyNonBooleanAttribute,
   isEmpty,
   isColour,
+  isBooleanAttribute,
+  isBadAttribute,
   isArrayOrPlainObject,
   insert,
   indexOf,
+  html,
   groupBy,
   getValue,
   getTextDirection,
@@ -2221,6 +2349,7 @@ export {
   chunk,
   capitalise,
   camelCase,
+  booleanAttributes,
   between,
   average,
   RGBColour,

package/dist/js/index.mjs

@@ -6,6 +6,7 @@ export * from "./element/index";
 export * from "./emitter";
 export * from "./event";
 export * from "./function";
+export * from "./html/index";
 export * from "./is";
 export * from "./logger";
 export * from "./math";

package/package.json

@@ -82,6 +82,12 @@
 			"import": "./dist/js/function.mjs",
 			"require": "./dist/js/function.js"
 		},
+		"./html": {
+			"types": "./types/html/index.d.ts",
+			"bun": "./src/js/html/index.ts",
+			"import": "./dist/js/html/index.mjs",
+			"require": "./dist/js/html/index.js"
+		},
 		"./is": {
 			"types": "./types/is.d.ts",
 			"bun": "./src/js/is.ts",
@@ -186,5 +192,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.cts",
-	"version": "0.68.0"
+	"version": "0.69.0"
 }

package/src/js/element/attribute.ts

@@ -0,0 +1,99 @@
+/**
+ * List of boolean attributes
+ */
+export const booleanAttributes = Object.freeze([
+	'async',
+	'autofocus',
+	'autoplay',
+	'checked',
+	'controls',
+	'default',
+	'defer',
+	'disabled',
+	'formnovalidate',
+	'hidden',
+	'inert',
+	'ismap',
+	'itemscope',
+	'loop',
+	'multiple',
+	'muted',
+	'nomodule',
+	'novalidate',
+	'open',
+	'playsinline',
+	'readonly',
+	'required',
+	'reversed',
+	'selected',
+]);
+
+const onPrefix = /^on/i;
+const sourcePrefix = /^(href|src|xlink:href)$/i;
+const valuePrefix = /(data:text\/html|javascript:)/i;
+
+/**
+ * Is the attribute considered bad and potentially harmful?
+ */
+export function isBadAttribute(name: string, value: string): boolean {
+	return (
+		onPrefix.test(name) || (sourcePrefix.test(name) && valuePrefix.test(value))
+	);
+}
+
+/**
+ * Is the attribute a boolean attribute?
+ */
+export function isBooleanAttribute(name: string): boolean {
+	return booleanAttributes.includes(name.toLowerCase());
+}
+
+/**
+ * Is the attribute empty and not a boolean attribute?
+ */
+export function isEmptyNonBooleanAttribute(
+	name: string,
+	value: string,
+): boolean {
+	return !booleanAttributes.includes(name) && value.trim().length === 0;
+}
+
+/**
+ * - Is the attribute an invalid boolean attribute?
+ * - I.e., its value is not empty or the same as its name?
+ */
+export function isInvalidBooleanAttribute(
+	name: string,
+	value: string,
+): boolean {
+	if (!booleanAttributes.includes(name)) {
+		return true;
+	}
+
+	const normalised = value.toLowerCase().trim();
+
+	return !(
+		normalised.length === 0 ||
+		normalised === name ||
+		(name === 'hidden' && normalised === 'until-found')
+	);
+}
+
+/**
+ * - Sets an attribute for an element
+ * - If the value is nullable, the attribute is removed
+ */
+export function setAttribute(
+	element: Element,
+	name: string,
+	value: unknown,
+): void {
+	if (value == null) {
+		element.removeAttribute(name);
+	} else {
+		element.setAttribute(
+			name,
+			typeof value === 'string' ? value : JSON.stringify(value),
+		);
+	}
+}

package/src/js/element/index.ts

@@ -41,6 +41,7 @@ export function getTextDirection(element: Element): TextDirection {
 	) as TextDirection;
 }
 
+export * from './attribute';
 export * from './closest';
 export * from './data';
 export * from './find';