Improve formatting

CHANGELOG.md

@@ -6,6 +6,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v0.0.2] - 2024-01-26
+
+### Added
+- Add handling of formatting `values` containing `Element`s, `Array`s, `Date`s, & `Number`s
+
+### Fixed
+- Fix handling non-Node types in `addStyles()` & `replaceStyles()`
+
+### Changed
+- Directly install eslint & rollup as dev dependencies
+
 ## [v0.0.1] - 2024-01-25
 
 Initial Release

README.md

@@ -100,7 +100,7 @@ commit
 
 This library relies on the [Sanitizer API proposal](https://github.com/WICG/sanitizer-api)
 and [Constructable Stylesheets](https://web.dev/articles/constructable-stylesheets).
-At minimum, there **MUST** be a polyfill for [`Element.prototype.setHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML).
+At minimum, there **MUST** be a polyfill for [`Element.prototype.setHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML).
 
 ## Performance/Optimization Tips
 
@@ -244,7 +244,7 @@ const html = createHTMLParser({
   allowAttributes: ['href', 'class', 'id', 'src'],
 });
 
-const css = createCSSParser({ media: '(prefers-color-scheme: dark)', bnaseURI: 'https://cdn.example.com' });
+const css = createCSSParser({ media: '(prefers-color-scheme: dark)', baseURI: 'https://cdn.example.com' });
 
 // `html` & `css` then function as the regular / exported function, but with their
 custom white/black lists / config options.

aegis.js

@@ -1,12 +1,59 @@
+const lang = navigator.language;
+
+const formatDate = 'Intl' in globalThis && Intl.DateTimeFormat instanceof Function
+	? date => new Intl.DateTimeFormat(lang, { dateStyle: 'short', timeStyle: 'short' }).format(date)
+	: date => date.toLocaleString();
+
+const formatArray = 'Intl' in globalThis && Intl.ListFormat instanceof Function
+	? arr => new Intl.ListFormat().format(arr)
+	: arr => arr.join(', ');
+
+const formatNumber = 'Intl' in globalThis && Intl.NumberFormat instanceof Function
+	? num => new Intl.NumberFormat().format(num)
+	: num => num.toString();
+
+const formatEl = el => el.outerHTML;
+
+const stringify = thing => {
+	switch(typeof thing) {
+		case 'string':
+			return thing;
+
+		case 'number':
+			return formatNumber(thing);
+
+		case 'object':
+			if (Array.isArray(thing)) {
+				return formatArray(thing);
+			} else if (thing instanceof Element) {
+				return formatEl(thing);
+			} else if(thing instanceof Date) {
+				return formatDate(thing);
+			} else if (thing === null) {
+				return '';
+			} else {
+				return thing.toString();
+			}
+
+		case 'undefined':
+			return '';
+
+		default:
+			return thing.toString();
+	}
+};
+
 export function text(strings, ...values) {
-	if (! Array.isArray(strings)) {
+	if (typeof strings === 'string') {
+		return text([strings], ...values);
+	} else if (! Array.isArray(strings)) {
 		throw new TypeError('strings must be an array of strings.');
 	} else {
 		let str = '';
 
 		for (let i = 0; i < strings.length; i++) {
 			if (i < values.length) {
-				str += strings[i].toString().concat(values[i]);
+				str += strings[i].toString().concat(stringify(values[i]));
 			} else {
 				str += strings[i].toString();
 			}
@@ -16,10 +63,10 @@ export function text(strings, ...values) {
 	}
 }
 
-export const getUniqueSelector = (prefix = '_aegis-scope') => `${prefix}-${crypto.randomUUID()}`;
-
 const parseStr = args => text.apply(null, args);
 
+export const getUniqueSelector = (prefix = '_aegis-scope') => `${prefix}-${crypto.randomUUID()}`;
+
 export function createStyleSheet(rules, { media, disabled, baseURL } = {}) {
 	const sheet = new CSSStyleSheet({ media, disabled, baseURL });
 	sheet.replaceSync(rules);
@@ -43,7 +90,9 @@ export function createCSSParser({ media, disabled, baseURL } = {}) {
 }
 
 export function replaceStyles(target, ...sheets) {
-	if (target instanceof Document || target instanceof ShadowRoot) {
+	if (! (target instanceof Node)) {
+		throw new TypeError('Expected target to be a Document, DocumentFragment, ShadowRoot, or Element.');
+	} else if (target instanceof Document || target instanceof ShadowRoot) {
 		target.adoptedStyleSheets = sheets;
 	} else if (! (target instanceof Element || DocumentFragment)) {
 		throw new TypeError('Expected target to be a Document, DocumentFragment, ShadowRoot, or Element.');
@@ -57,8 +106,12 @@ export function replaceStyles(target, ...sheets) {
 }
 
 export function addStyles(target, ...sheets) {
-	if (target instanceof Document || target instanceof ShadowRoot) {
+	if (! (target instanceof Node)) {
+		throw new TypeError('Expected target to be a Document, DocumentFragment, ShadowRoot, or Element.');
+	} else if (target instanceof Document || target instanceof ShadowRoot) {
 		replaceStyles(target, ...target.adoptedStyleSheets, ...sheets);
+	} else if (target.shadowRoot instanceof ShadowRoot) {
+		return addStyles(target.shadowRoot, ...sheets);
 	} else {
 		return addStyles(target.getRootNode({ composed: false }), ...sheets);
 	}