@oscarpalmer/abydon 0.14.0 → 0.16.0

package/src/node/attribute/value.ts

@@ -1,11 +1,10 @@
 import type {PlainObject} from '@oscarpalmer/atoms/models';
-import {getString} from '@oscarpalmer/atoms/string';
 import {isReactive} from '@oscarpalmer/mora';
 import {
 	isBooleanAttribute,
 	setAttribute as setAttr,
+	setProperty,
 } from '@oscarpalmer/toretto/attribute';
-import type {HTMLOrSVGElement} from '@oscarpalmer/toretto/models';
 import {
 	ATTRIBUTE_CLASS_PREFIX_LENGTH,
 	EXPRESSION_ATTRIBUTE_CLASS,
@@ -14,14 +13,20 @@ import {
 } from '../../constants';
 import type {FragmentData} from '../../models';
 
+function getCallback(element: HTMLElement | SVGElement, name: string) {
+	if (isBooleanAttribute(name) && name in element) {
+		return name === 'checked' ? updateChecked : updateProperty;
+	}
+
+	return name === 'value' ? updateValue : setAttr;
+}
+
 export function setAttribute(
 	data: FragmentData,
-	element: HTMLOrSVGElement,
+	element: HTMLElement | SVGElement,
 	name: string,
 	value: unknown,
 ): void {
-	element.removeAttribute(name);
-
 	switch (true) {
 		case EXPRESSION_ATTRIBUTE_CLASS.test(name):
 			setClasses(data, element, name, value);
@@ -39,7 +44,7 @@ export function setAttribute(
 
 function setClasses(
 	data: FragmentData,
-	element: HTMLOrSVGElement,
+	element: HTMLElement | SVGElement,
 	name: string,
 	value: unknown,
 ): void {
@@ -62,7 +67,7 @@ function setClasses(
 
 function setStyle(
 	data: FragmentData,
-	element: HTMLOrSVGElement,
+	element: HTMLElement | SVGElement,
 	name: string,
 	value: unknown,
 ): void {
@@ -76,10 +81,7 @@ function setStyle(
 		if (value == null || value === false || (value === true && unit == null)) {
 			element.style.removeProperty(property);
 		} else {
-			element.style.setProperty(
-				property,
-				value === true ? unit : getString(value),
-			);
+			element.style.setProperty(property, value === true ? unit : String(value));
 		}
 	}
 
@@ -92,21 +94,11 @@ function setStyle(
 
 function setValue(
 	data: FragmentData,
-	element: HTMLOrSVGElement,
+	element: HTMLElement | SVGElement,
 	name: string,
 	value: unknown,
 ): void {
-	let callback: (
-		element: HTMLOrSVGElement,
-		name: string,
-		value: unknown,
-	) => void;
-
-	if (isBooleanAttribute(name) && name in element) {
-		callback = name === 'selected' ? updateSelected : updateProperty;
-	} else {
-		callback = setAttr;
-	}
+	const callback = getCallback(element, name);
 
 	if (isReactive(value)) {
 		data.mora.subscribers.add(
@@ -119,25 +111,40 @@ function setValue(
 	}
 }
 
-function updateProperty(
-	element: HTMLOrSVGElement,
-	name: string,
-	value: unknown,
-): void {
-	(element as unknown as PlainObject)[name] = value === true;
+function updateChecked(element: HTMLElement | SVGElement, name: string, value: unknown): void {
+	updateElement('change', 'checked', element, name, value, value === true);
 }
 
-function updateSelected(
-	element: HTMLOrSVGElement,
+function updateElement(
+	event: string,
+	property: string,
+	element: HTMLElement | SVGElement,
 	name: string,
 	value: unknown,
+	next: unknown,
 ): void {
-	const select = element.closest('select') as HTMLSelectElement;
-	const options = [...(select?.options ?? [])];
-
-	if (select != null && options.includes(element as HTMLOptionElement)) {
-		select.dispatchEvent(new Event('change', {bubbles: true}));
+	if (!(property in element) || (element as unknown as PlainObject)[property] === next) {
+		return;
 	}
 
-	updateProperty(element, name, value);
+	setAttr(element, name, value);
+
+	(element as unknown as PlainObject)[property] = next;
+
+	element.dispatchEvent(new Event(event, {bubbles: true}));
+}
+
+function updateProperty(element: HTMLElement | SVGElement, name: string, value: unknown): void {
+	setProperty(element, name, value === true);
+}
+
+function updateValue(element: HTMLElement | SVGElement, name: string, value: unknown): void {
+	updateElement(
+		element instanceof HTMLSelectElement ? 'change' : 'input',
+		'value',
+		element,
+		name,
+		value,
+		String(value),
+	);
 }

package/src/node/event.ts

@@ -1,50 +1,43 @@
-import type {HTMLOrSVGElement} from '@oscarpalmer/toretto/models';
+import {on} from '@oscarpalmer/toretto/event';
 import {
-	ABORT_CONTROLLERS,
+	EVENT_DEFAULTS,
+	EXPRESSION_EVENT_CHANGE_TYPES,
 	EXPRESSION_EVENT_NAME,
-	REASON_EVENT_REMOVED,
+	EXPRESSION_EVENT_OPTIONS_ACTIVE,
+	EXPRESSION_EVENT_OPTIONS_CAPTURE,
+	EXPRESSION_EVENT_OPTIONS_ONCE,
 } from '../constants';
 
-function getController(element: HTMLOrSVGElement): AbortController {
-	let controller = ABORT_CONTROLLERS.get(element);
-
-	if (controller == null) {
-		controller = new AbortController();
-
-		ABORT_CONTROLLERS.set(element, controller);
-	}
-
-	return controller;
-}
-
 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')),
+		capture: parts.some(part => EXPRESSION_EVENT_OPTIONS_CAPTURE.test(part)),
+		once: parts.some(part => EXPRESSION_EVENT_OPTIONS_ONCE.test(part)),
+		passive: !parts.some(part => EXPRESSION_EVENT_OPTIONS_ACTIVE.test(part)),
 	};
 }
 
-export function mapEvent(
-	element: HTMLOrSVGElement,
-	name: string,
-	value: unknown,
-): void {
-	element.removeAttribute(name);
+function getType(element: HTMLElement | SVGElement, type: string): string {
+	if (type !== 'on') {
+		return type;
+	}
 
-	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name) ?? [];
+	if (element instanceof HTMLInputElement) {
+		if (EXPRESSION_EVENT_CHANGE_TYPES.test(element.type)) {
+			return 'change';
+		}
 
-	if (typeof value === 'function' && type != null) {
-		element.addEventListener(type, value as EventListener, {
-			...getOptions(options ?? ''),
-			signal: getController(element).signal,
-		});
+		return element.type === 'submit' ? 'submit' : 'input';
 	}
+
+	return EVENT_DEFAULTS[element.tagName] ?? type;
 }
 
-export function removeEvents(element: HTMLOrSVGElement): void {
-	ABORT_CONTROLLERS.get(element)?.abort(REASON_EVENT_REMOVED);
-	ABORT_CONTROLLERS.delete(element);
+export function mapEvent(element: HTMLElement | SVGElement, name: string, value: unknown): void {
+	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name) ?? [];
+
+	if (type != null && typeof value === 'function') {
+		on(element, getType(element, type), value as EventListener, getOptions(options ?? ''));
+	}
 }

package/src/node/index.ts

@@ -1,15 +1,16 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import {computed, isReactive} from '@oscarpalmer/mora';
+import {computed, isReactive, type Reactive} from '@oscarpalmer/mora';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
-import {EXPRESSION_COMMENT_CONTENT} from '../constants';
-import {isFragment} from '../helpers';
+import {EXPRESSION_ABYDON_CONTENT} from '../constants';
+import {handleFragments} from '../fragments';
+import {isFragment, isFragments} from '../helpers';
 import {createNodes} from '../helpers/dom';
 import type {FragmentData} from '../models';
 import {mapAttributes} from './attribute';
 import {setReactiveValue} from './value';
 
 function mapNode(data: FragmentData, comment: Comment): void {
-	const matches = EXPRESSION_COMMENT_CONTENT.exec(comment.textContent ?? '');
+	const matches = EXPRESSION_ABYDON_CONTENT.exec(comment.textContent ?? '');
 	const value = matches == null ? null : data.values[+matches[1]];
 
 	if (value != null) {
@@ -45,6 +46,11 @@ function mapValue(data: FragmentData, comment: Comment, value: unknown): void {
 			setComputedValue(data, comment, value as GenericCallback);
 			break;
 
+		case isFragments(value):
+			handleFragments(value, false);
+			setReactiveValue(data, comment, value.items as Reactive<unknown[], unknown>);
+			break;
+
 		case isReactive(value):
 			setReactiveValue(data, comment, value);
 			break;
@@ -55,11 +61,7 @@ function mapValue(data: FragmentData, comment: Comment, value: unknown): void {
 	}
 }
 
-function replaceComment(
-	data: FragmentData,
-	comment: Comment,
-	value: unknown,
-): void {
+function replaceComment(data: FragmentData, comment: Comment, value: unknown): void {
 	const item = data.items.find(item => item.nodes?.includes(comment));
 	const nodes = createNodes(value);
 
@@ -71,11 +73,7 @@ function replaceComment(
 	comment.replaceWith(...nodes);
 }
 
-function setComputedValue(
-	data: FragmentData,
-	comment: Comment,
-	callback: GenericCallback,
-): void {
+function setComputedValue(data: FragmentData, comment: Comment, callback: GenericCallback): void {
 	const value = computed(callback);
 
 	data.mora.values.add(value);

package/src/node/value.ts

@@ -10,8 +10,8 @@ import type {FragmentData, FragmentItem} from '../models';
 //
 
 type Identifiers = {
-	next: unknown[];
-	previous: (unknown | undefined)[];
+	next: Set<unknown>;
+	previous: Set<unknown>;
 };
 
 type BaseItems = {
@@ -33,8 +33,7 @@ function addToArray(
 ): void {
 	let position = nodes[0];
 
-	const before =
-		added && !identifiers.previous.includes(items.templates[0].identifier);
+	const before = added && !identifiers.previous.has(items.templates[0].identifier);
 
 	const next = items.next.flatMap(fragment =>
 		fragment.get().flatMap(node => ({
@@ -48,7 +47,7 @@ function addToArray(
 	for (let index = 0; index < length; index += 1) {
 		const node = next[index];
 
-		if (!(added && identifiers.previous.includes(node.identifier))) {
+		if (!(added && identifiers.previous.has(node.identifier))) {
 			if (index === 0 && before) {
 				position.before(node.value);
 			} else {
@@ -67,9 +66,7 @@ function handleArray(
 ): Partial<FragmentItem> {
 	const next = items.templates.map(
 		template =>
-			items.fragments?.find(
-				fragment => fragment.identifier === template.identifier,
-			) ?? template,
+			items.fragments?.find(fragment => fragment.identifier === template.identifier) ?? template,
 	);
 
 	const comparison = compareArrays(items.fragments ?? [], items.templates);
@@ -79,9 +76,7 @@ function handleArray(
 	}
 
 	const toRemove =
-		items.fragments?.filter(
-			fragment => !identifiers.next.includes(fragment.identifier),
-		) ?? [];
+		items.fragments?.filter(fragment => !identifiers.next.has(fragment.identifier)) ?? [];
 
 	const {length} = toRemove;
 
@@ -105,6 +100,18 @@ function removeFragments(fragments: Fragment[] | undefined): void {
 	}
 }
 
+function replaceText(item: FragmentItem, comment: Comment, isNullable: boolean): void {
+	let to: ChildNode[];
+
+	if (isNullable) {
+		to = [comment];
+	} else {
+		to = item.text == null ? [] : [item.text];
+	}
+
+	replaceNodes(item.nodes ?? [], to);
+}
+
 function setArray(
 	item: FragmentItem,
 	comment: Comment,
@@ -116,9 +123,7 @@ function setArray(
 		};
 	}
 
-	let templates = value.filter(
-		item => isFragment(item) && item.identifier != null,
-	) as Fragment[];
+	let templates = value.filter(item => isFragment(item) && item.identifier != null) as Fragment[];
 
 	const next = templates.map(fragment => fragment.identifier) as unknown[];
 	const previous = item.fragments?.map(fragment => fragment.identifier) ?? [];
@@ -129,11 +134,7 @@ function setArray(
 
 	const noTemplates = templates.length === 0;
 
-	if (
-		noTemplates ||
-		item.nodes == null ||
-		previous.some(identifier => identifier == null)
-	) {
+	if (noTemplates || item.nodes == null || previous.some(identifier => identifier == null)) {
 		return {
 			fragments: noTemplates ? undefined : templates,
 			nodes: setNodes(
@@ -148,8 +149,8 @@ function setArray(
 
 	return handleArray(
 		{
-			next,
-			previous,
+			next: new Set(next),
+			previous: new Set(previous),
 		},
 		{
 			templates,
@@ -159,11 +160,7 @@ function setArray(
 	);
 }
 
-function setNodes(
-	item: FragmentItem,
-	comment: Comment,
-	next: ChildNode[],
-): ChildNode[] {
+function setNodes(item: FragmentItem, comment: Comment, next: ChildNode[]): ChildNode[] {
 	if (item.nodes == null) {
 		if (comment.parentNode != null) {
 			replaceNodes([comment], next);
@@ -203,27 +200,23 @@ export function setReactiveValue(
 	);
 }
 
-function setReactiveValueForArray(
-	item: FragmentItem,
-	comment: Comment,
-	value: unknown[],
-): void {
+function setReactiveValueForArray(item: FragmentItem, comment: Comment, value: unknown[]): void {
 	const result = setArray(item, comment, value);
 
 	item.fragments = typeof result === 'boolean' ? undefined : result?.fragments;
 
 	if (typeof result === 'boolean') {
-		item.nodes = result ? item.text == null ? [] : [item.text] : undefined;
+		if (result) {
+			item.nodes = item.text == null ? [] : [item.text];
+		} else {
+			item.nodes = undefined;
+		}
 	} else {
 		item.nodes = result?.nodes;
 	}
 }
 
-function setReactiveValueForSingle(
-	item: FragmentItem,
-	comment: Comment,
-	value: unknown,
-): void {
+function setReactiveValueForSingle(item: FragmentItem, comment: Comment, value: unknown): void {
 	const valueIsFragment = isFragment(value);
 
 	item.fragments = valueIsFragment ? [value] : undefined;
@@ -235,11 +228,7 @@ function setReactiveValueForSingle(
 	}
 }
 
-function setText(
-	item: FragmentItem,
-	comment: Comment,
-	value: unknown,
-): ChildNode[] | undefined {
+function setText(item: FragmentItem, comment: Comment, value: unknown): ChildNode[] | undefined {
 	const isNullable = isNullableOrWhitespace(value);
 
 	if (item.text != null) {
@@ -249,7 +238,7 @@ function setText(
 	let result = false;
 
 	if (item.nodes != null) {
-		replaceNodes(item.nodes, isNullable ? [comment] : item.text == null ? [] : [item.text]);
+		replaceText(item, comment, isNullable);
 
 		result = !isNullable;
 	} else if (isNullable && comment.parentNode == null) {
@@ -264,5 +253,7 @@ function setText(
 
 	removeFragments(item.fragments);
 
-	return result ? item.text == null ? [] : [item.text] : undefined;
+	if (result) {
+		return item.text == null ? [] : [item.text];
+	}
 }

package/src/parse.ts

@@ -1,11 +1,8 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import {EXPRESSION_ABYDON_ATTRIBUTE_FULL} from './constants';
 import type {FragmentData} from './models';
 
-function handleExpression(
-	data: FragmentData,
-	prefix: string,
-	expression: unknown,
-): string {
+function handleExpression(data: FragmentData, prefix: string, expression: unknown): string {
 	if (Array.isArray(expression)) {
 		const {length} = expression;
 
@@ -18,13 +15,8 @@ function handleExpression(
 		return `${prefix}${expressions}`;
 	}
 
-	if (
-		typeof expression === 'function' ||
-		(typeof expression === 'object' && expression != null)
-	) {
-		const index = data.values.push(expression) - 1;
-
-		return `${prefix}<!--abydon.${index}-->`;
+	if (typeof expression === 'function' || (typeof expression === 'object' && expression != null)) {
+		return transformExpression(prefix, data.values.push(expression) - 1);
 	}
 
 	return isNullableOrWhitespace(expression) ? prefix : `${prefix}${expression}`;
@@ -40,15 +32,21 @@ export function parse(data: FragmentData): string {
 	data.template = '';
 
 	for (let index = 0; index < length; index += 1) {
-		data.template += handleExpression(
-			data,
-			data.strings[index],
-			data.expressions[index],
-		);
+		data.template += handleExpression(data, data.strings[index], data.expressions[index]);
 	}
 
+	data.template = data.template.replaceAll(EXPRESSION_ABYDON_ATTRIBUTE_FULL, transformAttribute);
+
 	data.expressions = [];
 	data.strings = [] as never;
 
 	return data.template;
 }
+
+function transformAttribute(_: string, name: string, index: string): string {
+	return `_${name}="@abydon.${index}@"`;
+}
+
+function transformExpression(prefix: string, index: number): string {
+	return `${prefix}<!--abydon.${index}-->`;
+}

package/types/constants.d.ts

@@ -1,9 +1,17 @@
-export declare const ABORT_CONTROLLERS: WeakMap<HTMLOrSVGElement, AbortController>;
 export declare const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
+export declare const EVENT_DEFAULTS: Record<string, string>;
+export declare const EXPRESSION_ABYDON_ATTRIBUTE_FULL: RegExp;
+export declare const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX: RegExp;
+export declare const EXPRESSION_ABYDON_CONTENT: RegExp;
 export declare const EXPRESSION_ATTRIBUTE_CLASS: RegExp;
 export declare const EXPRESSION_ATTRIBUTE_STYLE_FULL: RegExp;
 export declare const EXPRESSION_ATTRIBUTE_STYLE_PREFIX: RegExp;
-export declare const EXPRESSION_COMMENT_FULL: RegExp;
-export declare const EXPRESSION_COMMENT_CONTENT: RegExp;
+export declare const EXPRESSION_EVENT_CHANGE_TYPES: RegExp;
 export declare const EXPRESSION_EVENT_NAME: RegExp;
-export declare const REASON_EVENT_REMOVED = "Event removed as element was removed from document by Abydon";
+export declare const EXPRESSION_EVENT_OPTIONS_ACTIVE: RegExp;
+export declare const EXPRESSION_EVENT_OPTIONS_CAPTURE: RegExp;
+export declare const EXPRESSION_EVENT_OPTIONS_ONCE: RegExp;
+export declare const EXPRESSION_EVENT_PREFIX: RegExp;
+export declare const EXPRESSION_PERIOD: RegExp;
+export declare const NAME_FRAGMENT = "$fragment";
+export declare const NAME_FRAGMENTS = "$fragments";

package/types/fragment.d.ts

@@ -1,18 +1,38 @@
+import type { FragmentConfiguration } from './models';
 export declare class Fragment {
     #private;
+    /**
+     * Fragment identifier
+     */
     get identifier(): unknown;
     constructor(strings: TemplateStringsArray, expressions: unknown[]);
     /**
-     * Appends the fragment to the given element
+     * Append the fragment to the given element
+     * @param element Element to append to
      */
     appendTo(element: Element): void;
     /**
-     * Gets a list of the fragment's nodes
+     * Configure the fragment
+     * @param configuration Configuration options
+     * @returns Fragment
+     */
+    configure(configuration: FragmentConfiguration): Fragment;
+    /**
+     * Get a list of the fragment's nodes
+     * @returns List of nodes
      */
     get(): ChildNode[];
+    /**
+     * Set an identifier for the fragment
+     *
+     * _An identifier can be used to uniquely identify a fragment,
+     * which helps prevent re-rendering in certain scenarios._
+     * @param identifier Identifier
+     * @returns Fragment
+     */
     identify(identifier: unknown): Fragment;
     /**
-     * Removes the fragment from the DOM
+     * Remove the fragment from the DOM
      */
     remove(): void;
 }

package/types/fragments.d.ts

@@ -0,0 +1,13 @@
+import { type ReactiveArray } from '@oscarpalmer/mora';
+import type { Fragment } from './fragment';
+import type { FragmentsState } from './models';
+export declare class Fragments {
+    #private;
+    /**
+     * Fragment items
+     */
+    get items(): ReactiveArray<Fragment>;
+    constructor(items: ReactiveArray<unknown>, identify: (item: unknown) => unknown, fragment: (item: unknown) => Fragment);
+}
+export declare function handleFragments(item: Fragments | FragmentsState, remove: boolean): void;
+export declare function initializeFragments(state: FragmentsState): void;

package/types/helpers/index.d.ts

@@ -1,3 +1,5 @@
 import type { Fragment } from '../fragment';
+import type { Fragments } from '../fragments';
 export declare function compareArrays(first: unknown[], second: unknown[]): 'added' | 'dissimilar' | 'removed';
 export declare function isFragment(value: unknown): value is Fragment;
+export declare function isFragments(value: unknown): value is Fragments;

package/types/index.d.ts

@@ -1,5 +1,20 @@
 import '@oscarpalmer/mora';
+import type { ReactiveArray } from '@oscarpalmer/mora';
 import { Fragment } from './fragment';
-export declare function html(strings: TemplateStringsArray, ...values: unknown[]): Fragment;
+import { Fragments } from './fragments';
+/**
+ * Create Fragments from a reactive array
+ * @param array Reactive array
+ * @param identify Function to identify item
+ * @param fragment Function to create fragment from item
+ * @returns Fragments
+ */
+export declare function fragments<Item>(array: ReactiveArray<Item>, identify: (item: Item) => unknown, fragment: (item: Item) => Fragment): Fragments;
+/**
+ * Create Fragment from a template
+ * @returns Fragment
+ */
+export declare function html(template: TemplateStringsArray, ...values: unknown[]): Fragment;
 export * from '@oscarpalmer/mora';
 export type { Fragment } from './fragment';
+export type { Fragments } from './fragments';

package/types/models.d.ts

@@ -1,16 +1,38 @@
-import type { Reactive } from '@oscarpalmer/mora';
+import type { Reactive, ReactiveArray, Unsubscribe } from '@oscarpalmer/mora';
 import type { Fragment } from './fragment';
+export type FragmentConfiguration = {
+    /**
+     * Should the template be cached? _(defaults to `true`)_
+     */
+    cache?: boolean;
+    /**
+     * Identifier for the fragment
+     *
+     * _(An identifier can be used to uniquely identify a fragment,
+     * which helps prevent re-rendering in certain scenarios)_
+     */
+    identifier?: unknown;
+};
 export type FragmentData = {
     expressions: unknown[];
-    identifier?: unknown;
     items: FragmentItem[];
     mora: MoraData;
     strings: TemplateStringsArray;
+    template?: string;
     values: unknown[];
 };
 export type FragmentItem = {
     fragments?: Fragment[];
-    nodes: ChildNode[];
+    nodes?: ChildNode[];
+    text?: Text;
+};
+export type FragmentsState = {
+    array: ReactiveArray<unknown>;
+    fragment: (item: unknown) => Fragment;
+    identify: (item: unknown) => unknown;
+    instances: Record<string, Fragment>;
+    mapped: ReactiveArray<Fragment>;
+    subscriber: Unsubscribe | undefined;
 };
 type MoraData = {
     subscribers: Set<() => void>;

package/types/node/attribute/index.d.ts

@@ -1,3 +1,2 @@
-import type { HTMLOrSVGElement } from '@oscarpalmer/toretto/models';
 import type { FragmentData } from '../../models';
-export declare function mapAttributes(data: FragmentData, element: HTMLOrSVGElement): void;
+export declare function mapAttributes(data: FragmentData, element: HTMLElement | SVGElement): void;

package/types/node/attribute/value.d.ts

@@ -1,3 +1,2 @@
-import type { HTMLOrSVGElement } from '@oscarpalmer/toretto/models';
 import type { FragmentData } from '../../models';
-export declare function setAttribute(data: FragmentData, element: HTMLOrSVGElement, name: string, value: unknown): void;
+export declare function setAttribute(data: FragmentData, element: HTMLElement | SVGElement, name: string, value: unknown): void;