,
): void {
@@ -19,8 +19,8 @@ export function hookAttributeSlotsUp (
for (const element of attributeSlots) {
const { captureProps } = element.dataset;
- const values = new ElementData;
- for (const {name, value} of element.attributes) {
+ const values = new ElementData();
+ for (const { name, value } of element.attributes) {
const propIndex = resolveSlotPropIndex(value);
// skip if attribute wasn't slotted
@@ -36,13 +36,13 @@ export function hookAttributeSlotsUp (
const [namespace, attributeName] = parseAttributeName(name);
values[namespace].set(attributeName, attrVal);
}
-
+
elementDataStore.set(element, values);
if (!captureProps) {
assignElementData(
element,
values,
- {elementDataAlreadySet: true},
+ { elementDataAlreadySet: true },
);
}
}
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/_assignElementData.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/_assignElementData.ts
index 7f28869..a6ba2d3 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/_assignElementData.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/_assignElementData.ts
@@ -1,24 +1,24 @@
-import { attribute } from "./attribute.js";
-import { destiny } from "./destiny.js";
-import { prop } from "./prop.js";
-import { on } from "./on.js";
-import { elementDataStore } from "../../../../componentLogic/elementData.js";
-import { validNamespaces } from "../elementData/isValidNamespace.js";
-import { emplace } from "../../../../utils/mapEmplace.js";
-import { concat } from "../../../../utils/mapConcat.js";
-import type { TElementData } from "../elementData/TElementData.js";
+import { attribute } from "./attribute.ts";
+import { destiny } from "./destiny.ts";
+import { prop } from "./prop.ts";
+import { on } from "./on.ts";
+import { elementDataStore } from "../../../../componentLogic/elementData.ts";
+import { validNamespaces } from "../elementData/isValidNamespace.ts";
+import { emplace } from "../../../../utils/mapEmplace.ts";
+import { concat } from "../../../../utils/mapConcat.ts";
+import type { TElementData } from "../elementData/TElementData.ts";
/**
* Takes care of hooking up data to an element.
- *
+ *
* @param element Element to assign it on
* @param data What to assign
*/
-export function assignElementData (
+export function assignElementData(
element: HTMLElement,
data: TElementData,
options: {
- elementDataAlreadySet?: boolean,
+ elementDataAlreadySet?: boolean;
} = {},
): void {
if (!options.elementDataAlreadySet) {
@@ -32,7 +32,7 @@ export function assignElementData (
);
}
return oldData;
- }
+ },
});
}
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/attribute.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/attribute.ts
index 3ca6d61..6e60e16 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/attribute.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/attribute.ts
@@ -1,16 +1,16 @@
-import { doOrBind } from "../doOrBind.js";
-import type { TElementData } from "../elementData/TElementData.js";
+import { doOrBind } from "../doOrBind.ts";
+import type { TElementData } from "../elementData/TElementData.ts";
/**
* Handler for normal non-namespaced attributes. Behaves like normal HTML.
- *
- * Example usage:
+ *
+ * Example usage:
* ```html
* I'm red!
*
* ```
*/
-export function attribute (
+export function attribute(
attributes: TElementData["attribute"],
element: HTMLElement,
): void {
@@ -19,7 +19,7 @@ export function attribute (
element,
key,
value,
- value => element.setAttribute(key, String(value)),
+ (value) => element.setAttribute(key, String(value)),
);
}
}
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destiny.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destiny.ts
index 653c635..e35518a 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destiny.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destiny.ts
@@ -1,13 +1,13 @@
-import { destinyRef } from "./destinyRef.js";
-import { destinyUnmount } from "./destinyUnmount.js";
-import { destinyMount } from "./destinyMount.js";
-import { destinyProps } from "./destinyProps.js";
-import { destinyData } from "./destinyData.js";
-import { throwExpression } from "../../../../utils/throwExpression.js";
-import type { TElementData } from "../elementData/TElementData.js";
+import { destinyRef } from "./destinyRef.ts";
+import { destinyUnmount } from "./destinyUnmount.ts";
+import { destinyMount } from "./destinyMount.ts";
+import { destinyProps } from "./destinyProps.ts";
+import { destinyData } from "./destinyData.ts";
+import { throwExpression } from "../../../../utils/throwExpression.ts";
+import type { TElementData } from "../elementData/TElementData.ts";
const opMap: {
- readonly [key: string]: (element: HTMLElement, value: unknown) => void,
+ readonly [key: string]: (element: HTMLElement, value: unknown) => void;
} = {
ref: destinyRef,
mount: destinyMount,
@@ -19,12 +19,15 @@ const opMap: {
/**
* Handler for destiny-namespaced attributes. See referenced methods for details.
*/
-export function destiny (
+export function destiny(
data: TElementData["destiny"],
element: HTMLElement,
): void {
for (const [key, value] of data) {
- const op = opMap[key] ?? throwExpression(`Invalid property "destiny:${key}" on element:\n${element.outerHTML}.`);
+ const op = opMap[key] ??
+ throwExpression(
+ `Invalid property "destiny:${key}" on element:\n${element.outerHTML}.`,
+ );
op(element, value);
}
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyData.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyData.ts
index bfae2db..44ce07e 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyData.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyData.ts
@@ -1,15 +1,17 @@
-import { describeType } from "../../../../utils/describeType.js";
-import { assignElementData } from "./_assignElementData.js";
-import { ElementData } from "../elementData/ElementData.js";
+import { describeType } from "../../../../utils/describeType.ts";
+import { assignElementData } from "./_assignElementData.ts";
+import { ElementData } from "../elementData/ElementData.ts";
-export function destinyData (
+export function destinyData(
element: HTMLElement,
input: unknown,
): void {
if (typeof input === "undefined") return;
if (typeof input !== "object" || !input) {
- throw new TypeError(`Invalid value ${describeType(input)} provided for destiny:data`);
+ throw new TypeError(
+ `Invalid value ${describeType(input)} provided for destiny:data`,
+ );
}
assignElementData(
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyMount.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyMount.ts
index a7e1512..e88432c 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyMount.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyMount.ts
@@ -1,8 +1,8 @@
/**
- * `destiny:mount` takes a callback function, which will be called
+ * `destiny:mount` takes a callback function, which will be called
* once the element has been created.
- *
- * Example usage:
+ *
+ * Example usage:
* ```html
* element.animate(
@@ -12,7 +12,7 @@
* }> This will fade in!
* ```
*/
-export function destinyMount (
+export function destinyMount(
element: HTMLElement,
value: unknown,
): void {
@@ -20,8 +20,9 @@ export function destinyMount (
throw new TypeError("Value of destiny:mount must be a function");
}
queueMicrotask( // wait for stack to clear
- () => queueMicrotask( // let other microtasks run first
- () => void value(element),
- ),
+ () =>
+ queueMicrotask( // let other microtasks run first
+ () => void value(element),
+ ),
);
}
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyProps.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyProps.ts
index 2fd5f92..d0b98a9 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyProps.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyProps.ts
@@ -1,25 +1,27 @@
-import { prop } from "./prop.js";
-import { describeType } from "../../../../utils/describeType.js";
-import { ElementData } from "../elementData/ElementData.js";
-import { elementDataStore } from "../../../../componentLogic/elementData.js";
-import { emplace } from "../../../../utils/mapEmplace.js";
-import { concat } from "../../../../utils/mapConcat.js";
+import { prop } from "./prop.ts";
+import { describeType } from "../../../../utils/describeType.ts";
+import { ElementData } from "../elementData/ElementData.ts";
+import { elementDataStore } from "../../../../componentLogic/elementData.ts";
+import { emplace } from "../../../../utils/mapEmplace.ts";
+import { concat } from "../../../../utils/mapConcat.ts";
-export function destinyProps (
+export function destinyProps(
element: HTMLElement,
input: unknown,
): void {
if (typeof input !== "object" || !input) {
- throw new TypeError(`Incorrect attribute value type ${describeType(input)} provided for destiny:props`);
+ throw new TypeError(
+ `Incorrect attribute value type ${
+ describeType(input)
+ } provided for destiny:props`,
+ );
}
const map = (
- input instanceof Map
- ? input
- : new Map(Object.entries(input))
+ input instanceof Map ? input : new Map(Object.entries(input))
);
emplace(elementDataStore, element, {
- insert: () => new ElementData({prop: map}),
+ insert: () => new ElementData({ prop: map }),
update: (oldData) => (concat(oldData.prop, map), oldData),
});
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyRef.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyRef.ts
index 5a51ad4..8ffb7eb 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyRef.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyRef.ts
@@ -1,12 +1,12 @@
-import { Ref } from "../../../../componentLogic/Ref.js";
-import { ReactiveValue } from "../../../../reactive/ReactiveValue/_ReactiveValue.js";
-import { isObject } from "../../../../typeChecks/isObject.js";
+import { Ref } from "../../../../componentLogic/Ref.ts";
+import { ReactiveValue } from "../../../../reactive/ReactiveValue/_ReactiveValue.ts";
+import { isObject } from "../../../../typeChecks/isObject.ts";
/**
* `destiny:ref` prop allows you to to give a `ReactiveValue` to
* the templater, which will then store the created element into
* it once render is complete.
- *
+ *
* Example usage:
* ```js
* const ref = new ReactiveValue;
@@ -20,16 +20,18 @@ import { isObject } from "../../../../typeChecks/isObject.js";
* `;
* ```
*/
-export function destinyRef (
+export function destinyRef(
element: HTMLElement,
value: unknown,
): void {
if (!((value instanceof ReactiveValue) || (value instanceof Ref))) {
- throw new TypeError(`Attribute value for destiny:ref must be a ReactiveValue, but it was [${
- isObject(value)
- ? `${value.constructor.name} (Object)`
- : `${String(value)} (${typeof value})`
- }] in \n${element.outerHTML}`);
+ throw new TypeError(
+ `Attribute value for destiny:ref must be a ReactiveValue, but it was [${
+ isObject(value)
+ ? `${value.constructor.name} (Object)`
+ : `${String(value)} (${typeof value})`
+ }] in \n${element.outerHTML}`,
+ );
}
queueMicrotask(() => {
value.value = element;
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyUnmount.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyUnmount.ts
index e00c1c3..f7fba1d 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyUnmount.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/destinyUnmount.ts
@@ -1,12 +1,12 @@
-import { deferredElements } from "../../../deferredElements.js";
+import { deferredElements } from "../../../deferredElements.ts";
/**
* `destiny:unmount` takes a callback function which will be called
- * when the element is about to be removed from DOM. If the
+ * when the element is about to be removed from DOM. If the
* callback returns a promise, that promise will be awaited on
* and the element is removed once it resolves.
- *
- * Example usage:
+ *
+ * Example usage:
* ```html
* {
@@ -15,12 +15,12 @@ import { deferredElements } from "../../../deferredElements.js";
* {duration: 300, fill: "forwards"},
* );
* anim.play();
- * return anim.finished; // Element is removed once the animation finishes
+ * return anim.finished; // Element is removed once the animation finishes
* }
* }> This will fade out!
* ```
*/
-export function destinyUnmount (
+export function destinyUnmount(
element: HTMLElement,
value: unknown,
): void {
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/on.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/on.ts
index 2ce42f3..a4ef8d7 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/on.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/assignElementData/on.ts
@@ -1,20 +1,20 @@
-import type { TElementData } from "../elementData/TElementData.js";
+import type { TElementData } from "../elementData/TElementData.ts";
/**
* `on:` adds an event listener. It either takes a
* callback function, or an array containing a callback
* function and options.
- *
+ *
* Example usage:
* ```html
* alert("Hi!")}>Click me!
- *
+ *
* ` takes in any property and assigns it to the element in JS.
- *
+ *
* For example, to assign a Date object to a date input (`input.valueAsDate = new Date`), you can do:
* ```html
* ();
- on = new Map();
- destiny = new Map();
+ prop = new Map();
+ on = new Map();
+ destiny = new Map();
attribute = new Map();
- constructor (
+ constructor(
data?: Partial,
) {
if (data) Object.assign(this, data);
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/TElementData.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/TElementData.ts
index cc04e38..6cc4ede 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/TElementData.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/TElementData.ts
@@ -1,5 +1,5 @@
-import type { TNamespace } from "./TNamespace.js";
+import type { TNamespace } from "./TNamespace.ts";
export type TElementData = {
- readonly [Key in TNamespace]: Map
+ readonly [Key in TNamespace]: Map;
};
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/TNamespace.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/TNamespace.ts
index 686da32..08a191a 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/TNamespace.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/TNamespace.ts
@@ -1,3 +1,3 @@
-import type { validNamespaces } from "./isValidNamespace.js";
+import type { validNamespaces } from "./isValidNamespace.ts";
export type TNamespace = typeof validNamespaces[number];
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/isValidNamespace.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/isValidNamespace.ts
index 9bff03f..973890b 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/isValidNamespace.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/isValidNamespace.ts
@@ -1,14 +1,14 @@
-import type { TNamespace } from "./TNamespace.js";
+import type { TNamespace } from "./TNamespace.ts";
export const validNamespaces = ["attribute", "prop", "on", "destiny"] as const;
-export function isValidNamespace (
+export function isValidNamespace(
input: string,
): input is TNamespace {
return validNamespaces.includes(input as TNamespace);
}
-export function isValidAttributePair (
+export function isValidAttributePair(
input: ReadonlyArray,
): input is [TNamespace, string] {
return input.length === 2 && isValidNamespace(input[0]!);
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/matchChangeWatcher.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/matchChangeWatcher.ts
index cce830d..b18ea51 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/matchChangeWatcher.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/matchChangeWatcher.ts
@@ -11,9 +11,8 @@ export type TWatchedAttribute = keyof typeof propToWatcherMap;
* Figures out if and what event listener needs to be attached to a DOM element based on the name of an attribute.
* @param attributeName the attribute name to be used for determining the event listener type
*/
-export function matchChangeWatcher (
+export function matchChangeWatcher(
attributeName: string,
): typeof propToWatcherMap[TWatchedAttribute] | "" {
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
return propToWatcherMap[attributeName as TWatchedAttribute] ?? "";
}
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/parseAttributeName.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/parseAttributeName.ts
index daa99d1..62b23aa 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/parseAttributeName.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/parseAttributeName.ts
@@ -1,10 +1,10 @@
-import { isValidAttributePair } from "./elementData/isValidNamespace.js";
-import type { TNamespace } from "./elementData/TNamespace.js";
+import { isValidAttributePair } from "./elementData/isValidNamespace.ts";
+import type { TNamespace } from "./elementData/TNamespace.ts";
-export function parseAttributeName (
+export function parseAttributeName(
input: string,
): [TNamespace, string] {
- const split = input.split(":");
+ const split = input.split(":");
if (split.length === 1) {
split.unshift("attribute");
}
diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/resolveSlotPropIndex.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/resolveSlotPropIndex.ts
index e12b16e..638aff8 100644
--- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/resolveSlotPropIndex.ts
+++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/resolveSlotPropIndex.ts
@@ -1,9 +1,7 @@
-export function resolveSlotPropIndex (
+export function resolveSlotPropIndex(
value: string,
): number {
return (
- value.startsWith("__internal_")
- ? Number(value.slice(11, -1))
- : -1
+ value.startsWith("__internal_") ? Number(value.slice(11, -1)) : -1
);
}
diff --git a/src/parsing/hookSlotsUp/hookContentSlotsUp/_hookContentSlotsUp.ts b/src/parsing/hookSlotsUp/hookContentSlotsUp/_hookContentSlotsUp.ts
index 775ce61..56a5e04 100644
--- a/src/parsing/hookSlotsUp/hookContentSlotsUp/_hookContentSlotsUp.ts
+++ b/src/parsing/hookSlotsUp/hookContentSlotsUp/_hookContentSlotsUp.ts
@@ -1,20 +1,20 @@
-import { valueToFragment } from "./toFragment/valueToFragment.js";
-import { Slot } from "../../Slot.js";
-import { SlotArray } from "../../SlotArray.js";
-import { ReadonlyReactiveValue } from "../../../reactive/ReactiveValue/_ReadonlyReactiveValue.js";
-import { ReadonlyReactiveArray } from "../../../reactive/ReactiveArray/_ReadonlyReactiveArray.js";
+import { valueToFragment } from "./toFragment/valueToFragment.ts";
+import { Slot } from "../../Slot.ts";
+import { SlotArray } from "../../SlotArray.ts";
+import { ReadonlyReactiveValue } from "../../../reactive/ReactiveValue/_ReadonlyReactiveValue.ts";
+import { ReadonlyReactiveArray } from "../../../reactive/ReactiveArray/_ReadonlyReactiveArray.ts";
/**
* Goes through all the elements in a template that are flagged with the `destiny:content` attribute and figures out how the DOM needs to be updated if any of the given props are reactive.
* @param templ A template element that has been processed by `resolveSlots()`.
* @param props Any items that were slotted into the HTML template
*/
-export function hookContentSlotsUp (
+export function hookContentSlotsUp(
templ: DocumentFragment,
props: Array,
): void {
const contentSlots = Object.values(
- templ.querySelectorAll("[destiny\\:content]")
+ templ.querySelectorAll("[destiny\\:content]"),
) as unknown as Array;
for (const contentSlot of contentSlots) {
@@ -22,7 +22,7 @@ export function hookContentSlotsUp (
const item = props[Number(index)];
if (item instanceof ReadonlyReactiveValue) {
const slot = new Slot(contentSlot);
- item.bind(value => {
+ item.bind((value) => {
slot.update(valueToFragment(value));
}, {
dependents: [slot],
diff --git a/src/parsing/hookSlotsUp/hookContentSlotsUp/toFragment/arrayToFragment.ts b/src/parsing/hookSlotsUp/hookContentSlotsUp/toFragment/arrayToFragment.ts
index 916a4da..89d77bb 100644
--- a/src/parsing/hookSlotsUp/hookContentSlotsUp/toFragment/arrayToFragment.ts
+++ b/src/parsing/hookSlotsUp/hookContentSlotsUp/toFragment/arrayToFragment.ts
@@ -1,19 +1,19 @@
-import { shouldBeRendered } from "../../stringifyValue.js";
-import { valueToFragment } from "./valueToFragment.js";
+import { shouldBeRendered } from "../../stringifyValue.ts";
+import { valueToFragment } from "./valueToFragment.ts";
/**
* Converts an array of items into a `DocumentFragment`.
* @param values The items to be converted
*/
-export function arrayToFragment (
+export function arrayToFragment(
values: Array,
): DocumentFragment {
- const fragment = new DocumentFragment;
+ const fragment = new DocumentFragment();
fragment.append(
...values
- .filter(shouldBeRendered)
- .map(valueToFragment),
+ .filter(shouldBeRendered)
+ .map(valueToFragment),
);
return fragment;
diff --git a/src/parsing/hookSlotsUp/hookContentSlotsUp/toFragment/nodeToFragment.ts b/src/parsing/hookSlotsUp/hookContentSlotsUp/toFragment/nodeToFragment.ts
index ede6eb3..61497d7 100644
--- a/src/parsing/hookSlotsUp/hookContentSlotsUp/toFragment/nodeToFragment.ts
+++ b/src/parsing/hookSlotsUp/hookContentSlotsUp/toFragment/nodeToFragment.ts
@@ -2,10 +2,10 @@
* Converts a `Node` into a `DocumentFragment`.
* @param node The `Node` to be converted
*/
-export function nodeToFragment (
+export function nodeToFragment(
node: Node,
): DocumentFragment {
- const fragment = new DocumentFragment;
+ const fragment = new DocumentFragment();
fragment.append(node);
return fragment;
}
diff --git a/src/parsing/hookSlotsUp/hookContentSlotsUp/toFragment/valueToFragment.ts b/src/parsing/hookSlotsUp/hookContentSlotsUp/toFragment/valueToFragment.ts
index 995971f..e52f730 100644
--- a/src/parsing/hookSlotsUp/hookContentSlotsUp/toFragment/valueToFragment.ts
+++ b/src/parsing/hookSlotsUp/hookContentSlotsUp/toFragment/valueToFragment.ts
@@ -1,13 +1,13 @@
-import { arrayToFragment } from "./arrayToFragment.js";
-import { nodeToFragment } from "./nodeToFragment.js";
-import { stringifyValue } from "../../stringifyValue.js";
-import { TemplateResult } from "../../../TemplateResult.js";
+import { arrayToFragment } from "./arrayToFragment.ts";
+import { nodeToFragment } from "./nodeToFragment.ts";
+import { stringifyValue } from "../../stringifyValue.ts";
+import { TemplateResult } from "../../../TemplateResult.ts";
/**
* A polymorphic helper which figures out the type of the input and determines a suitable way to convert it into a `DocumentFragment`.
* @param value The item to be converted into a `DocumentFragment`
*/
-export function valueToFragment (
+export function valueToFragment(
value: unknown,
): DocumentFragment {
if (value instanceof TemplateResult) {
diff --git a/src/parsing/hookSlotsUp/stringifyValue.ts b/src/parsing/hookSlotsUp/stringifyValue.ts
index d83a167..d20b704 100644
--- a/src/parsing/hookSlotsUp/stringifyValue.ts
+++ b/src/parsing/hookSlotsUp/stringifyValue.ts
@@ -10,13 +10,11 @@ export const shouldBeRendered = (
): boolean => !nonRenderedValues.has(input);
/**
- * Converts a value that is about to be rendered in DOM into a string representation. `boolean`s and _nullish_ values are not rendered by design.
- * @param input
+ * Converts a value that is about to be rendered in DOM into a string representation. `boolean`s and _nullish_ values are not rendered by design.
+ * @param input
*/
export const stringifyValue = (
input: unknown,
): string => (
- shouldBeRendered(input)
- ? String(input)
- : ""
+ shouldBeRendered(input) ? String(input) : ""
);
diff --git a/src/parsing/parseAsNewDocument.ts b/src/parsing/parseAsNewDocument.ts
index a8a8aa7..d86287a 100644
--- a/src/parsing/parseAsNewDocument.ts
+++ b/src/parsing/parseAsNewDocument.ts
@@ -1,6 +1,6 @@
-import { namespaces } from "./parseString.js";
+import { namespaces } from "./parseString.ts";
-export function parseAsNewDocument (
+export function parseAsNewDocument(
string: string,
): Document {
return new DOMParser().parseFromString(
diff --git a/src/parsing/parseInSafari.ts b/src/parsing/parseInSafari.ts
index 3aace47..b096866 100644
--- a/src/parsing/parseInSafari.ts
+++ b/src/parsing/parseInSafari.ts
@@ -1,18 +1,18 @@
-import { getXmlErrorMessage } from "./getXmlErrorMessage.js";
-import { parseAsNewDocument } from "./parseAsNewDocument.js";
+import { getXmlErrorMessage } from "./getXmlErrorMessage.ts";
+import { parseAsNewDocument } from "./parseAsNewDocument.ts";
-export function parseInSafari (
+export function parseInSafari(
templateElement: HTMLTemplateElement,
string: string,
): void {
const parsed = parseAsNewDocument(string).firstElementChild;
if (parsed?.firstElementChild?.nodeName.toLowerCase() === "parsererror") {
- throw new SyntaxError(`An error occurred when parsing the following XML:\n${
- string
- }\nwhich resulted in the following message:\n${
- getXmlErrorMessage(parsed)
- }`);
+ throw new SyntaxError(
+ `An error occurred when parsing the following XML:\n${string}\nwhich resulted in the following message:\n${
+ getXmlErrorMessage(parsed)
+ }`,
+ );
}
templateElement.content.append(...parsed?.childNodes ?? []);
diff --git a/src/parsing/parseString.ts b/src/parsing/parseString.ts
index 7fb6805..d51cb83 100644
--- a/src/parsing/parseString.ts
+++ b/src/parsing/parseString.ts
@@ -1,9 +1,9 @@
-import { getXmlErrorMessage } from "./getXmlErrorMessage.js";
-import { parseAsNewDocument } from "./parseAsNewDocument.js";
-import { parseInSafari } from "./parseInSafari.js";
+import { getXmlErrorMessage } from "./getXmlErrorMessage.ts";
+import { parseAsNewDocument } from "./parseAsNewDocument.ts";
+import { parseInSafari } from "./parseInSafari.ts";
-// eslint-disable-next-line @typescript-eslint/quotes
-export const namespaces = `xmlns="http://www.w3.org/1999/xhtml" xmlns:on="p:u" xmlns:prop="p:u" xmlns:destiny="p:u"`;
+export const namespaces =
+ `xmlns="http://www.w3.org/1999/xhtml" xmlns:on="p:u" xmlns:prop="p:u" xmlns:destiny="p:u"`;
const xmlDocument = new DOMParser().parseFromString(
`,
): void {
type TSlot = TUnpreparedContentSlot["slots"][number] | undefined;
- contentSlots.forEach(contentSlot => {
+ contentSlots.forEach((contentSlot) => {
const raw = contentSlot.node.textContent ?? "";
const nodes = contentSlot.slots.flatMap((slot, i, a) => [
new Text(raw.slice((a[i - 1] as TSlot)?.end ?? 0, slot.start)),
diff --git a/src/parsing/resolveSlots.ts b/src/parsing/resolveSlots.ts
index fb071a2..f064227 100644
--- a/src/parsing/resolveSlots.ts
+++ b/src/parsing/resolveSlots.ts
@@ -1,13 +1,13 @@
-import { isTextNode } from "../typeChecks/isTextNode.js";
-import { isElement } from "../typeChecks/isElement.js";
-import { prepareContentSlots } from "./prepareContentSlots.js";
-import type { TUnpreparedContentSlot } from "./TUnpreparedContentSlot.js";
+import { isTextNode } from "../typeChecks/isTextNode.ts";
+import { isElement } from "../typeChecks/isElement.ts";
+import { prepareContentSlots } from "./prepareContentSlots.ts";
+import type { TUnpreparedContentSlot } from "./TUnpreparedContentSlot.ts";
/**
* Figures out from a freshly parsed `HTMLTemplate` where slots are located so they can be quickly hooked up with values.
* @param template the template element to be processed
*/
-export function resolveSlots (
+export function resolveSlots(
template: HTMLTemplateElement,
): void {
const walker = document.createTreeWalker(
@@ -20,7 +20,7 @@ export function resolveSlots (
if (isTextNode(node)) {
const matches = node.wholeText.matchAll(
/"__internal_([0-9]+)_"/gu,
- ) as IterableIterator;
+ ) as IterableIterator;
const fragment = {
node,
slots: [...matches].map((match) => ({
@@ -33,7 +33,7 @@ export function resolveSlots (
contentSlots.push(fragment);
}
} else if (isElement(node)) {
- for (const {value} of node.attributes) {
+ for (const { value } of node.attributes) {
if (value.includes("__internal_")) {
node.setAttribute("destiny:attr", "");
}
diff --git a/src/reactive/ReactiveArray/TArrayValueType.ts b/src/reactive/ReactiveArray/TArrayValueType.ts
index 7ec86cd..aa1a67f 100644
--- a/src/reactive/ReactiveArray/TArrayValueType.ts
+++ b/src/reactive/ReactiveArray/TArrayValueType.ts
@@ -1,9 +1,8 @@
-import type { TSpecialCaseObject } from "../reactiveProperties/specialCaseObjects.js";
-import type { TReactiveValueType } from "../types/TReactiveValueType.js";
-import type { TPrimitive } from "../types/TPrimitive.js";
+import type { TSpecialCaseObject } from "../reactiveProperties/specialCaseObjects.ts";
+import type { TReactiveValueType } from "../types/TReactiveValueType.ts";
+import type { TPrimitive } from "../types/TPrimitive.ts";
export type TArrayValueType = (
- T extends TPrimitive | TSpecialCaseObject
- ? T
- : TReactiveValueType
+ T extends TPrimitive | TSpecialCaseObject ? T
+ : TReactiveValueType
);
diff --git a/src/reactive/ReactiveArray/TMask.ts b/src/reactive/ReactiveArray/TMask.ts
index 87cd2fb..db93396 100644
--- a/src/reactive/ReactiveArray/TMask.ts
+++ b/src/reactive/ReactiveArray/TMask.ts
@@ -1,3 +1,3 @@
-import type { TMaskEntry } from "./TMaskEntry.js";
+import type { TMaskEntry } from "./TMaskEntry.ts";
export type TMask = Array;
diff --git a/src/reactive/ReactiveArray/TMaskEntry.ts b/src/reactive/ReactiveArray/TMaskEntry.ts
index 43ab8d8..6a7bb21 100644
--- a/src/reactive/ReactiveArray/TMaskEntry.ts
+++ b/src/reactive/ReactiveArray/TMaskEntry.ts
@@ -1,4 +1,4 @@
export type TMaskEntry = {
- index: number,
- show: boolean,
+ index: number;
+ show: boolean;
};
diff --git a/src/reactive/ReactiveArray/TReactiveArrayCallback.ts b/src/reactive/ReactiveArray/TReactiveArrayCallback.ts
index fbde277..fe3b61d 100644
--- a/src/reactive/ReactiveArray/TReactiveArrayCallback.ts
+++ b/src/reactive/ReactiveArray/TReactiveArrayCallback.ts
@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
export type TReactiveArrayCallback = (
index: number,
deleteCount: number,
diff --git a/src/reactive/ReactiveArray/TUnwrapReactiveArray.ts b/src/reactive/ReactiveArray/TUnwrapReactiveArray.ts
index 8bc0b83..247e4b1 100644
--- a/src/reactive/ReactiveArray/TUnwrapReactiveArray.ts
+++ b/src/reactive/ReactiveArray/TUnwrapReactiveArray.ts
@@ -1,7 +1,6 @@
-import type { ReadonlyReactiveArray } from "./_ReadonlyReactiveArray.js";
+import type { ReadonlyReactiveArray } from "./_ReadonlyReactiveArray.ts";
export type TUnwrapReactiveArray
- ? V
- : Input
+ Input extends ReadonlyReactiveArray ? V
+ : Input
);
diff --git a/src/reactive/ReactiveArray/_ReactiveArray.ts b/src/reactive/ReactiveArray/_ReactiveArray.ts
index d1168c1..07b4385 100644
--- a/src/reactive/ReactiveArray/_ReactiveArray.ts
+++ b/src/reactive/ReactiveArray/_ReactiveArray.ts
@@ -1,8 +1,8 @@
-import { ReadonlyReactiveArray } from "./_ReadonlyReactiveArray.js";
-import { splicers } from "./splicers.js";
-import { internalArrays } from "./internalArrays.js";
-import type { TArrayValueType } from "./TArrayValueType.js";
-import type { ReadonlyReactiveValue } from "../ReactiveValue/_ReadonlyReactiveValue.js";
+import { ReadonlyReactiveArray } from "./_ReadonlyReactiveArray.ts";
+import { splicers } from "./splicers.ts";
+import { internalArrays } from "./internalArrays.ts";
+import type { TArrayValueType } from "./TArrayValueType.ts";
+import type { ReadonlyReactiveValue } from "../ReactiveValue/_ReadonlyReactiveValue.ts";
/**
* `ReactiveArray`s are reactive values that contain multiple values which can be updated and whose updates can be listened to. In general, `ReactiveArray`s behave very similar to native `Array`s. The main difference is, that most primitive values are given as `ReactiveValue`s and any immutable methods will return a new `ReadonlyReactiveArray`, whose values are tied to the original `ReactiveArray`. The class also provides a few custom convenience methods.
@@ -13,8 +13,8 @@ export class ReactiveArray extends ReadonlyReactiveArray {
/** Cache for readonly getter */
#readonly: ReadonlyReactiveArray | undefined = undefined;
- /** Readonly version of the instance that can't be mutated from the outside, but will be updated as the original instance updates. */
- get readonly (): ReadonlyReactiveArray {
+ /** Readonly version of the instance that can't be mutated from the outside, but will be updated as the original instance updates. */
+ get readonly(): ReadonlyReactiveArray {
return this.#readonly ?? (this.#readonly = (() => {
const newArray = new ReadonlyReactiveArray();
this.bind(
@@ -28,34 +28,33 @@ export class ReactiveArray extends ReadonlyReactiveArray {
})());
}
- constructor (...input: ReadonlyArray) {
+ constructor(...input: ReadonlyArray) {
super(...input);
this.#value = internalArrays.get(this);
}
-
- splice (
+ splice(
start: number,
deleteCount?: number,
...items: Array>
): Array> {
return splicers.get(this)(start, deleteCount, ...items);
}
-
+
/**
* Works just like `Array::copyWithin()`. Returns the this object after shallow-copying a section of the array identified by start and end to the same array starting at position target
- *
+ *
* @param target Index where to start copying to. If target is negative, it is treated as length+target where length is the length of the array.
- * @param start Where to start copying from. If start is negative, it is treated as length+start. Default: `0`.
+ * @param start Where to start copying from. If start is negative, it is treated as length+start. Default: `0`.
* @param end Where to stop copying from. If end is negative, it is treated as length+end. Default: `this.length.value`
*/
- copyWithin (
+ copyWithin(
target: number,
start = 0,
end = this.#value.length,
): this {
- const {length} = this.#value;
+ const { length } = this.#value;
target = (target + length) % length;
start = (start + length) % length;
end = (end + length) % length;
@@ -73,15 +72,15 @@ export class ReactiveArray extends ReadonlyReactiveArray {
);
return this;
}
-
+
/**
* Works similar to `Array::fill()`, except inserted values are made recursively reactive. The section identified by start and end is filled with `value`. **Note** that inserted object values are not cloned, which may cause unintended behavior.
- *
+ *
* @param value value to fill array section with
* @param start index to start filling the array at. If start is negative, it is treated as length+start where length is the length of the array.
* @param end index to stop filling the array at. If end is negative, it is treated as length+end.
*/
- fill (
+ fill(
value: InputType | TArrayValueType,
start = 0,
end = this.#value.length,
@@ -90,26 +89,30 @@ export class ReactiveArray extends ReadonlyReactiveArray {
this.splice(
start,
length,
- ...Array.from({length}, () => value),
+ ...Array.from({ length }, () => value),
);
return this;
}
-
+
/**
* Equivalent to Array::filter(), except that it mutates the array in place. Removes the elements of the array that don't meet the condition specified in the callback function.
*
* @param callback The filter method calls the callback function once for each element in the array to determine if it should be removed.
*/
- mutFilter (
- callback: (value: TArrayValueType, index: number, array: Array>) => boolean,
+ mutFilter(
+ callback: (
+ value: TArrayValueType,
+ index: number,
+ array: Array>,
+ ) => boolean,
): this {
this.#value
- .flatMap((v, i, a) => callback(v, i, a) ? [] : i)
+ .flatMap((v, i, a) => callback(v, i, a) ? [] : i)
.reduce>(
(acc, indexToDelete) => {
const [first] = acc;
if (!first || first[0] + first[1] !== indexToDelete) {
- acc.unshift([indexToDelete, 1]);
+ acc.unshift([indexToDelete, 1]);
} else {
first[1]++;
}
@@ -117,30 +120,31 @@ export class ReactiveArray extends ReadonlyReactiveArray {
},
[],
)
- .forEach(args => {
+ .forEach((args) => {
this.splice(...args);
});
return this;
}
-
+
/**
* Similar to `Array::map`, except that it mutates the array in place. Calls a defined callback function on each element of an array, and assigns the resulting element if it's different from the old one.
*
* @param callback The map method calls the callback function one time for each element in the array.
*/
- mutMap (
- callback: (value: TArrayValueType, index: number, array: Array>) => TArrayValueType,
+ mutMap(
+ callback: (
+ value: TArrayValueType,
+ index: number,
+ array: Array>,
+ ) => TArrayValueType,
): this {
this.#value
.flatMap((v, i, a) => {
const newValue = callback(v, i, a);
- return newValue === v
- ? []
- : {index: i, value: newValue}
- ;
+ return newValue === v ? [] : { index: i, value: newValue };
})
.reduce>]>>(
- (acc, {index, value}) => {
+ (acc, { index, value }) => {
if (!acc.length || acc[0]![0] + acc[0]![1] !== index) {
acc.unshift([index, 1, value]);
} else {
@@ -151,63 +155,66 @@ export class ReactiveArray extends ReadonlyReactiveArray {
},
[],
)
- .forEach(args => {
+ .forEach((args) => {
this.splice(...args);
});
return this;
}
-
+
/**
* Works just like `Array::pop()`. Removes the last element from an array and returns it.
*/
- pop (): TArrayValueType | undefined {
+ pop(): TArrayValueType | undefined {
return this.splice(-1, 1)[0];
}
-
+
/**
* Similar to `Array::push()`. Appends new element(s) to an array, and returns the new length of the array as a reactive number.
*/
- push (
+ push(
...items: Array
): ReadonlyReactiveValue {
this.splice(this.#value.length, 0, ...items);
-
+
return this.length;
}
-
+
/**
* Works just like `Array::reverse()`. Reverses the elements of the array in place.
*/
- reverse (): this {
+ reverse(): this {
this.value = this.value.reverse();
-
+
return this;
}
-
+
/**
* Works just like `Array.shift()`. Removes the first element from an array and returns it.
*/
- shift (): TArrayValueType | undefined {
+ shift(): TArrayValueType | undefined {
return this.splice(0, 1)[0];
}
-
+
/**
* Works just like `Array::sort()`. Sorts the array.
- *
+ *
* @param compareFn Specifies a function that defines the sort order. It is expected to return a negative value if first argument is less than second argument, zero if they're equal and a positive value otherwise. If omitted, the array elements are converted to strings, then sorted according to each character's Unicode code point value.
*/
- sort (
- compareFn?: ((a: TArrayValueType, b: TArrayValueType) => number),
+ sort(
+ compareFn?: ((
+ a: TArrayValueType,
+ b: TArrayValueType,
+ ) => number),
): this {
this.value = this.value.sort(compareFn);
-
+
return this;
}
/**
* Similar to `Array::unshift()`. Returns the new length after the item(s) have been inserted.
*/
- unshift (
+ unshift(
...items: Array
): ReadonlyReactiveValue {
this.splice(0, 0, ...items);
diff --git a/src/reactive/ReactiveArray/_ReadonlyReactiveArray.ts b/src/reactive/ReactiveArray/_ReadonlyReactiveArray.ts
index 2b87fc9..d9c3891 100644
--- a/src/reactive/ReactiveArray/_ReadonlyReactiveArray.ts
+++ b/src/reactive/ReactiveArray/_ReadonlyReactiveArray.ts
@@ -1,38 +1,41 @@
-import { ReactiveArray } from "./_ReactiveArray.js";
-import { weaklyHeldDependencies, stronglyHeldDependencies } from "./arrayDependencyCaches.js";
-import { makeNonPrimitiveItemsReactive } from "./makeNonPrimitiveItemsReactive.js";
-import { internalArrays } from "./internalArrays.js";
-import { splicers } from "./splicers.js";
-import { flatten } from "./flatten.js";
-import { updateFilteredArray } from "./updateFilteredArray.js";
-import { computed, computedConsumer } from "../computed.js";
-import { ReactiveValue } from "../ReactiveValue/_ReactiveValue.js";
-import { internalSetReactiveValue } from "../ReactiveValue/internalSetReactiveValue.js";
-import { ReadonlyReactiveValue } from "../ReactiveValue/_ReadonlyReactiveValue.js";
-import { concatIterators } from "../../utils/concatIterators.js";
-import { throwExpression } from "../../utils/throwExpression.js";
-import { IterableWeakMap } from "../../utils/IterableWeakMap.js";
-import { WeakMultiRef } from "../../utils/WeakMultiRef.js";
-import type { TReactiveArrayCallback } from "./TReactiveArrayCallback.js";
-import type { TArrayUpdateArguments } from "./TArrayUpdateArguments.js";
-import type { TUnwrapReactiveArray } from "./TUnwrapReactiveArray.js";
-import type { TArrayValueType } from "./TArrayValueType.js";
-import type { TReactiveEntity } from "../types/TReactiveEntity.js";
-import type { TMask } from "./TMask.js";
+import { ReactiveArray } from "./_ReactiveArray.ts";
+import {
+ stronglyHeldDependencies,
+ weaklyHeldDependencies,
+} from "./arrayDependencyCaches.ts";
+import { makeNonPrimitiveItemsReactive } from "./makeNonPrimitiveItemsReactive.ts";
+import { internalArrays } from "./internalArrays.ts";
+import { splicers } from "./splicers.ts";
+import { flatten } from "./flatten.ts";
+import { updateFilteredArray } from "./updateFilteredArray.ts";
+import { computed, computedConsumer } from "../computed.ts";
+import { ReactiveValue } from "../ReactiveValue/_ReactiveValue.ts";
+import { internalSetReactiveValue } from "../ReactiveValue/internalSetReactiveValue.ts";
+import { ReadonlyReactiveValue } from "../ReactiveValue/_ReadonlyReactiveValue.ts";
+import { concatIterators } from "../../utils/concatIterators.ts";
+import { throwExpression } from "../../utils/throwExpression.ts";
+import { IterableWeakMap } from "../../utils/IterableWeakMap.ts";
+import { WeakMultiRef } from "../../utils/WeakMultiRef.ts";
+import type { TReactiveArrayCallback } from "./TReactiveArrayCallback.ts";
+import type { TArrayUpdateArguments } from "./TArrayUpdateArguments.ts";
+import type { TUnwrapReactiveArray } from "./TUnwrapReactiveArray.ts";
+import type { TArrayValueType } from "./TArrayValueType.ts";
+import type { TReactiveEntity } from "../types/TReactiveEntity.ts";
+import type { TMask } from "./TMask.ts";
/**
* `ReadonlyReactiveArray`s are reactive values that contain multiple values and whose updates can be listened to. In general, `ReadonlyReactiveArray`s behave very similar to native `ReadonlyArray`s. The main difference is, that most primitive values are given as `ReactiveValue`s and methods will return a new `ReadonlyReactiveArray`, whose values are tied to the original `ReadonlyReactiveArray`. The class also provides a few custom convenience methods.
*/
- export class ReadonlyReactiveArray {
+export class ReadonlyReactiveArray {
/** An Array containing the current values of the ReactiveArray */
readonly #__value: Array>;
/** A getter for an Array containing the current values of the ReactiveArray. Notifies computed values when it's being accessed. */
- get #value (): Array> {
+ get #value(): Array> {
if (computedConsumer) {
- const {fn, consumer} = computedConsumer;
+ const { fn, consumer } = computedConsumer;
consumer.dependencies.set(this, fn);
this.#consumers.set(
- consumer,
+ consumer,
fn,
);
@@ -46,15 +49,19 @@ import type { TMask } from "./TMask.js";
readonly #indices: Array>;
/** A Set containing all the callbacks to be called whenever the ReadonlyReactiveArray is updated */
- readonly #callbacks: Set>> = new Set;
+ readonly #callbacks: Set>> =
+ new Set();
- // eslint-disable-next-line @typescript-eslint/ban-types
- readonly #consumers = new IterableWeakMap>>();
+ // deno-lint-ignore ban-types People can pass literally anything into ReactiveArray
+ readonly #consumers = new IterableWeakMap<
+ object,
+ TReactiveArrayCallback>
+ >();
/** Size of the ReactiveArray as a ReactiveValue */
readonly #length: ReadonlyReactiveValue;
- constructor (
+ constructor(
...input: Array
) {
this.#__value = makeNonPrimitiveItemsReactive(
@@ -72,21 +79,23 @@ import type { TMask } from "./TMask.js";
/**
* When the object is attempted to be serialized using JSON.serialize(), the current value of `this.value` is returned.
*/
- toJSON (): Array> {
+ toJSON(): Array> {
return this.value;
}
/**
* Iterates over the values of the array, similar to how regular Arrays can be iterated over.
*/
- *[Symbol.iterator] (): Iterable> {
+ *[Symbol.iterator](): Iterable> {
yield* this.#value;
}
/**
* Iterates over the updates to the array. Can be used with for-await-of.
*/
- async *[Symbol.asyncIterator] (): AsyncIterable>> {
+ async *[Symbol.asyncIterator](): AsyncIterable<
+ TArrayUpdateArguments>
+ > {
while (true) {
yield await this.#nextUpdate();
}
@@ -95,36 +104,40 @@ import type { TMask } from "./TMask.js";
/**
* Returns a promise that resolves when the next update fires, with the values the event fired with.
*/
- #nextUpdate (): Promise>> {
- return new Promise<[number, number, ...Array>]>(resolve => {
- const cb: TReactiveArrayCallback> = (...props) => {
- resolve(props);
- this.#callbacks.delete(cb);
- };
- this.#callbacks.add(cb);
- });
+ #nextUpdate(): Promise>> {
+ return new Promise<[number, number, ...Array>]>(
+ (resolve) => {
+ const cb: TReactiveArrayCallback> = (
+ ...props
+ ) => {
+ resolve(props);
+ this.#callbacks.delete(cb);
+ };
+ this.#callbacks.add(cb);
+ },
+ );
}
/**
* The length of the ReactiveArray, as a ReactiveValue which updates as the array is modified.
*/
- get length (): ReadonlyReactiveValue {
+ get length(): ReadonlyReactiveValue {
return this.#length;
}
/**
* Returns the current values of the ReactiveArray as a regular Array.
*/
- get value (): Array> {
+ get value(): Array> {
return this.#value.slice(0);
}
/**
* Replaces all the current values of the array with values of the provided array.
- *
+ *
* @param items array of items to replace the current ones with.
*/
- set value (
+ set value(
items: ReadonlyArray>,
) {
this.#splice(
@@ -136,16 +149,14 @@ import type { TMask } from "./TMask.js";
/**
* An alternative to using backet syntax `arr[index]` to access values. Bracket notation requires the Proxy, which slows down propety accesses, while this doesn't.
- *
+ *
* @param index index at which you want to access a value
*/
- get (
+ get(
index: number,
): TArrayValueType | undefined {
const i = (
- index < 0
- ? this.#value.length + index
- : index
+ index < 0 ? this.#value.length + index : index
);
return this.#value[i];
@@ -153,11 +164,11 @@ import type { TMask } from "./TMask.js";
/**
* An alternative to using backet syntax `arr[index] = value` to set values. Bracket notation requires the Proxy, which slows down propety accesses, while this doesn't.
- *
+ *
* @param index index at which you want to set a value
* @param value value you want to set at the specified index
*/
- set (
+ set(
index: number,
value: InputType,
): this {
@@ -169,22 +180,29 @@ import type { TMask } from "./TMask.js";
/**
* Returns the arguments that a full, forced, update would for a callback. I.E. first item in the array is the index (`0`), second argument is delte count (current array length), and 3...n are the items currently in the array.
*/
- #argsForFullUpdate (): Parameters>> {
+ #argsForFullUpdate(): Parameters<
+ TReactiveArrayCallback>
+ > {
return [0, this.#value.length, ...this.#value];
}
-
+
/**
* Creates a new `ReactiveValue` which is bound to the array it's called on. The value of the `ReactiveValue` is determined by the callback function provided, and is called every time theh array updates to update the value of the returned `ReactiveValue`.
- *
+ *
* @param callback The function to be called when the array is updated. It's called with `(startIndex, deleteCount, ...addedItems)`.
*/
- pipe <
+ pipe<
F extends TReactiveArrayCallback, ReturnType>,
- > (
+ >(
callback: F,
): ReadonlyReactiveValue> {
- const reactor = new ReadonlyReactiveValue(callback(...this.#argsForFullUpdate()));
- const fn = () => internalSetReactiveValue.get(reactor)(callback(...this.#argsForFullUpdate()));
+ const reactor = new ReadonlyReactiveValue(
+ callback(...this.#argsForFullUpdate()),
+ );
+ const fn = () =>
+ internalSetReactiveValue.get(reactor)(
+ callback(...this.#argsForFullUpdate()),
+ );
reactor.dependencies.set(this, fn);
this.#consumers.set(
reactor,
@@ -196,16 +214,16 @@ import type { TMask } from "./TMask.js";
/**
* Adds a listener to the array, which is called when the array is modified in some capacity.
- *
+ *
* @param callback The function to be called when the array is updated. It's called with `(startIndex, deleteCount, ...addedItems)`.
* @param noFirstRun Default: false. Determines whether the callback function should be called once when the listener is first added.
*/
- bind (
+ bind(
callback: TReactiveArrayCallback>,
options: {
- noFirstRun?: boolean,
- // eslint-disable-next-line @typescript-eslint/ban-types
- dependents?: ReadonlyArray,
+ noFirstRun?: boolean;
+ // deno-lint-ignore ban-types People can pass literally anything into ReactiveArray
+ dependents?: ReadonlyArray;
} = {},
): this {
if (!options.noFirstRun) {
@@ -226,10 +244,10 @@ import type { TMask } from "./TMask.js";
/**
* Removes a listener that was added using `ReactiveArray::bind()`.
- *
+ *
* @param callback The callback function to be unbound (removed from the array's update callbacks). Similar to EventListeners, it needs to be a reference to the same callaback function that was previously added.
*/
- unbind (
+ unbind(
callback: TReactiveArrayCallback>,
): this {
this.#callbacks.delete(callback);
@@ -238,31 +256,37 @@ import type { TMask } from "./TMask.js";
return this;
}
- /**
- * Similar to `Array::splice()`. Added items are implicitly made recursively reactive.
- *
- * @param start Where to start modifying the array
- * @param deleteCount How many items to remove
- * @param items Items to add to the array
- */
- #splice (
+ /**
+ * Similar to `Array::splice()`. Added items are implicitly made recursively reactive.
+ *
+ * @param start Where to start modifying the array
+ * @param deleteCount How many items to remove
+ * @param items Items to add to the array
+ */
+ #splice(
start: number,
deleteCount: number = this.#value.length - start,
...items: Array>
): Array> {
if (start > this.#value.length) {
- throw new RangeError(`Out of bounds assignment: tried to assign to index ${start}, but array length was only ${this.#value.length}. Sparse arrays are not allowed. Consider using .push() instead.`);
+ throw new RangeError(
+ `Out of bounds assignment: tried to assign to index ${start}, but array length was only ${this.#value.length}. Sparse arrays are not allowed. Consider using .push() instead.`,
+ );
}
-
+
this.#adjustIndices(start, deleteCount, items);
const reactiveItems = makeNonPrimitiveItemsReactive(items, this);
- const deletedItems = this.#value.splice(start, deleteCount, ...reactiveItems);
+ const deletedItems = this.#value.splice(
+ start,
+ deleteCount,
+ ...reactiveItems,
+ );
this.#dispatchUpdateEvents(start, deleteCount, reactiveItems);
-
+
return deletedItems;
}
-
- #dispatchUpdateEvents (
+
+ #dispatchUpdateEvents(
start: number,
deleteCount: number,
newItems: ReadonlyArray> = [],
@@ -275,15 +299,15 @@ import type { TMask } from "./TMask.js";
callback(start, deleteCount, ...newItems);
}
}
-
+
/**
* Updates the indices of each item whose index changed due to the update. Indices of removed items will become `-1`. Also inserts in new indices as `ReactiveValue` for any added items.
- *
+ *
* @param start Index at which the ReactiveArray started changing
* @param deleteCount How many items were deleted
* @param items Items that were added
*/
- #adjustIndices (
+ #adjustIndices(
start: number,
deleteCount: number,
items: ReadonlyArray>,
@@ -294,7 +318,7 @@ import type { TMask } from "./TMask.js";
this.#indices[i]!.value += shiftedBy;
}
}
-
+
const removedIndices = this.#indices.splice(
start,
deleteCount,
@@ -308,7 +332,7 @@ import type { TMask } from "./TMask.js";
/**
* Force the the array to dispatch events to its callback. The event will simply say `0` items were removed at index `0`, with `0` items added. No equivalent on native Array prototype.
*/
- update (): this {
+ update(): this {
this.#dispatchUpdateEvents(0, 0);
return this;
@@ -317,27 +341,29 @@ import type { TMask } from "./TMask.js";
/**
* Similar to `Array::filter()`, except that it returns a `ReadonlyReactiveArray`, which is updated as the originating array is mutated. If you don't want this begavior, use `ReadonlyReactiveArray.prototype.value.filter()` instead.
*/
- filter (
+ filter(
callback: (
value: TArrayValueType,
index: number,
array: Array>,
) => boolean,
+ // deno-lint-ignore no-explicit-any People can pass literally anything into ReactiveArray
dependencies: ReadonlyArray> = [],
): ReadonlyReactiveArray> {
-
- const filteredArray: ReactiveArray> = new ReactiveArray;
+ const filteredArray: ReactiveArray> =
+ new ReactiveArray();
const maskArray: TMask = [];
- dependencies.forEach(dependency => {
+ dependencies.forEach((dependency) => {
dependency.bind(
- () => updateFilteredArray(
- callback,
- this.#value,
- filteredArray,
- maskArray,
- ),
+ () =>
+ updateFilteredArray(
+ callback,
+ this.#value,
+ filteredArray,
+ maskArray,
+ ),
{
noFirstRun: true,
dependents: [filteredArray],
@@ -356,14 +382,14 @@ import type { TMask } from "./TMask.js";
);
}
- const lastInMask = maskArray.slice(0, start).reverse().find(v => v.show);
+ const lastInMask = maskArray.slice(0, start).reverse().find((v) =>
+ v.show
+ );
const newItems: Array> = [];
let currentIndex = (lastInMask?.index ?? -1);
- const deletedMaskEntries =
- deletes
+ const deletedMaskEntries = deletes
? maskArray.splice(start, deletes)
- : []
- ;
+ : [];
for (const [i, item] of items.entries()) {
const sourceIndex = start + i;
const showThis = callback(item, sourceIndex, this.#value);
@@ -380,7 +406,8 @@ import type { TMask } from "./TMask.js";
}
}
- const deletedItemCount = deletedMaskEntries.filter(v => v.show).length;
+ const deletedItemCount =
+ deletedMaskEntries.filter((v) => v.show).length;
if (newItems.length || deletedItemCount) {
filteredArray.#splice(
(lastInMask?.index ?? -1) + 1,
@@ -399,16 +426,18 @@ import type { TMask } from "./TMask.js";
dependents: [filteredArray],
},
);
-
+
return filteredArray.readonly;
}
/**
* Similar to `Array::flat()`, except that it does **not** accept a depth parameter, and it returns a `ReadonlyReactiveArray` which gets gets updated with new values as the originating array is updated.
- *
+ *
* ! This metod does not optimize changes. When source canges in any way, it recomputes every value, even when it theoretically wouldn't need to.
*/
- flat (): ReadonlyReactiveArray>> {
+ flat(): ReadonlyReactiveArray<
+ TUnwrapReactiveArray>
+ > {
const newArray = new ReactiveArray(...flatten(this.#value));
this.bind(
() => newArray.value = flatten(this.#value),
@@ -419,13 +448,13 @@ import type { TMask } from "./TMask.js";
);
return newArray.readonly;
}
-
+
/**
* Similar to `Array::flatMap()`, except that it returns a `ReadonlyReactiveArray`, which gets gets updated with new values as the originating array is updated. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.flatMap()` instead.
- *
+ *
* ! This metod does not optimize changes. When source canges in any way, it recomputes every value, even when it theoretically wouldn't need to.
*/
- flatMap (
+ flatMap(
callback: (
value: TArrayValueType,
index: number,
@@ -449,7 +478,7 @@ import type { TMask } from "./TMask.js";
/**
* Similar to `Array::map()`, except that it returns a `ReadonlyReactiveArray`, which gets gets updated with mapped values as the originating array is updated. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.map()` instead.
*/
- map (
+ map(
callback: (
value: TArrayValueType,
index: ReadonlyReactiveValue,
@@ -458,12 +487,14 @@ import type { TMask } from "./TMask.js";
): ReadonlyReactiveArray {
const cb = (
v: TArrayValueType,
- i: number
- ) => callback(
- v,
- this.#indices[i]?.readonly ?? throwExpression("Internal error: lost track of index"),
- this,
- );
+ i: number,
+ ) =>
+ callback(
+ v,
+ this.#indices[i]?.readonly ??
+ throwExpression("Internal error: lost track of index"),
+ this,
+ );
const newArray = new ReadonlyReactiveArray(
...this.#value.map(cb),
@@ -473,13 +504,14 @@ import type { TMask } from "./TMask.js";
index,
deleteCount,
...values
- ) => splicers.get(newArray)(
- index,
- deleteCount,
- ...values.map(
- (v, i) => cb(v, i + index),
+ ) =>
+ splicers.get(newArray)(
+ index,
+ deleteCount,
+ ...values.map(
+ (v, i) => cb(v, i + index),
+ ),
),
- ),
);
return newArray;
@@ -488,16 +520,16 @@ import type { TMask } from "./TMask.js";
/**
* Returns a new reactive array with all the values of the array it's called on, without any of its callbacks. The new array is not tied to the original one in any capacity. This is a custom method, and an equivalent is not available in native Arrays.
*/
- clone (): ReactiveArray> {
+ clone(): ReactiveArray> {
return new ReactiveArray(...this.#value);
}
/**
* Similar to `Array::slice()`, except that it returns a `ReadonlyReactiveArray`, whose values are bound to the orignating array. Furthermore, if the orignating array gets items inserted or removed in the range of the spliced section (inclusive), those items will get inserted to the returned array as well. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.slice()` instead.
- *
+ *
* **Note:** `ReactiveArray::slice(0)` is not a suitable way to clone a reactive array. The output array is readonly, and values from the original array are piped into it. Use `ReactiveArray::clone()` instead.
*/
- slice (
+ slice(
start = 0,
end = this.#value.length - 1,
): ReadonlyReactiveArray> {
@@ -514,11 +546,11 @@ import type { TMask } from "./TMask.js";
}
/**
- * Similar to `Array::indexOf()`, except that it returns a `ReadonlyReactiveValue`, which is updated as the array changes. The array is not searched again when the array changes. If nothing is found, `ReadonlyReactiveValue<-1>` is returned, and it will never change. If something _is_ found, the index of that specific item will be kept up to date even when items are added or removed in a way that changes its index. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.indexOf()` instead.
- *
+ * Similar to `Array::indexOf()`, except that it returns a `ReadonlyReactiveValue`, which is updated as the array changes. The array is not searched again when the array changes. If nothing is found, `ReadonlyReactiveValue<-1>` is returned, and it will never change. If something _is_ found, the index of that specific item will be kept up to date even when items are added or removed in a way that changes its index. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.indexOf()` instead.
+ *
* **NOTE:** _This method should **not** be used for checking if an array includes something: use `ReactiveArray::includes()` instead._
*/
- indexOf (
+ indexOf(
...args: Parameters>["indexOf"]>
): ReadonlyReactiveValue {
const index = this.#value.indexOf(...args);
@@ -528,7 +560,7 @@ import type { TMask } from "./TMask.js";
/**
* Similar to `Array::lastIndexOf()`, except that it returns a `ReadonlyReactiveValue`, which is updated as the array changes. The array is not searched again when the array changes. If nothing is found, `ReadonlyReactiveValue<-1>` is returned, and it will never change. If something _is_ found, the index of that specific item will be kept up to date even when items are added or removed in a way that changes its index. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.lastIndexOf()` instead.
*/
- lastIndexOf (
+ lastIndexOf(
...args: Parameters>["lastIndexOf"]>
): ReadonlyReactiveValue {
const index = this.#value.lastIndexOf(...args);
@@ -538,7 +570,7 @@ import type { TMask } from "./TMask.js";
/**
* Similar to `Array::join()`, except that it returns a `ReadonlyReactiveValue`, which is updated as the array changes. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.join()` instead.
*/
- join (
+ join(
...args: Parameters>["join"]>
): ReadonlyReactiveValue {
return this.pipe(
@@ -549,7 +581,7 @@ import type { TMask } from "./TMask.js";
/**
* Similar to `Array::every()`, except that it returns a `ReadonlyReactiveValue`, which is updated as the array changes. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.every()` instead.
*/
- every (
+ every(
...args: Parameters>["every"]>
): ReadonlyReactiveValue {
return this.pipe(
@@ -560,7 +592,7 @@ import type { TMask } from "./TMask.js";
/**
* Similar to `Array::some()`, except that it returns a `ReadonlyReactiveValue`, which is updated as the array changes. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.some()` instead.
*/
- some (
+ some(
...args: Parameters>["some"]>
): ReadonlyReactiveValue {
return this.pipe(
@@ -571,7 +603,7 @@ import type { TMask } from "./TMask.js";
/**
* Returns a `ReadonlyReactiveValue`, which is set to true when the callback returns true for some, but not all items in the array. Is updated as the array updates. This is a custom method, and a non-reactive variant is not available on the native Array prototype.
*/
- exclusiveSome (
+ exclusiveSome(
cb: (
value: TArrayValueType,
index: number,
@@ -592,7 +624,7 @@ import type { TMask } from "./TMask.js";
/**
* Behaves akin to `Array::forEach()`, except will call the callback on newly added items as they're added. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.forEach()` instead.
*/
- forEach (
+ forEach(
...args: Parameters>["forEach"]>
): void {
this.bind(
@@ -607,25 +639,29 @@ import type { TMask } from "./TMask.js";
/**
* Similar to `Array::reduce()`, except that its return value is a `ReadonlyReactiveValue` and will be reevaluated every time the array changes. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.reduce()` for a non-reactive result.
*/
- reduce (
+ reduce(
...args: Parameters>["reduce"]>
- ): ReadonlyReactiveValue>["reduce"]>> {
+ ): ReadonlyReactiveValue<
+ ReturnType>["reduce"]>
+ > {
return this.pipe(() => this.#value.reduce(...args));
}
/**
* Similar to `Array::reduceRight()`, except that its return value is a `ReadonlyReactiveValue` and will be reevaluated every time the array changes. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.reduceRight()` for a non-reactive result.
*/
- reduceRight (
+ reduceRight(
...args: Parameters>["reduceRight"]>
- ): ReadonlyReactiveValue>["reduceRight"]>> {
+ ): ReadonlyReactiveValue<
+ ReturnType>["reduceRight"]>
+ > {
return this.pipe(() => this.#value.reduceRight(...args));
}
/**
* Works just like `Array::find()`. Doesn't return a reactive value.
*/
- find (
+ find(
...args: Parameters>["find"]>
): ReturnType>["find"]> {
return this.#value.find(...args);
@@ -634,20 +670,23 @@ import type { TMask } from "./TMask.js";
/**
* Similar to `Array::findIndex`, except that it returns a `ReactiveValue` whose value is updated if the index of the item changes as other items are added or removed from the array. The array is not searched again as it's mutated, however. If nothing is found, `ReadonlyReactiveValue<-1>` is returned, and its value will never be updated. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.findIndex()` instead.
*/
- findIndex (
+ findIndex(
...args: Parameters>["findIndex"]>
- ): ReadonlyReactiveValue>["findIndex"]>> {
+ ): ReadonlyReactiveValue<
+ ReturnType>["findIndex"]>
+ > {
const index = this.#value.findIndex(...args);
return index === -1
? new ReadonlyReactiveValue(-1)
- : this.#indices[index]?.readonly ?? throwExpression("Internal error: lost track of index");
+ : this.#indices[index]?.readonly ??
+ throwExpression("Internal error: lost track of index");
}
/**
* Works similar to `Array::entries()`. The difference is that it returns a `ReadonlyReactiveArray` containing the entries and is updated as the original array is updated. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.entries()` for an iterator of non-reactive values instead.
*/
- entries (): ReadonlyReactiveArray<[
+ entries(): ReadonlyReactiveArray<[
index: ReadonlyReactiveValue,
value: TArrayValueType,
]> {
@@ -658,7 +697,8 @@ import type { TMask } from "./TMask.js";
const newArray = new ReactiveArray(
...this.#value.map((value, i): TEntryType => [
- this.#indices[i]?.readonly ?? throwExpression("Internal error: lost track of index"),
+ this.#indices[i]?.readonly ??
+ throwExpression("Internal error: lost track of index"),
value,
]),
);
@@ -668,7 +708,8 @@ import type { TMask } from "./TMask.js";
index,
deleteCount,
...addedItems.map((value, i): TEntryType => [
- this.#indices[index + i]?.readonly ?? throwExpression("Internal error: lost track of index"),
+ this.#indices[index + i]?.readonly ??
+ throwExpression("Internal error: lost track of index"),
value,
]),
);
@@ -685,17 +726,18 @@ import type { TMask } from "./TMask.js";
/**
* Works similar to `Array::keys()`. The difference is that it returns a `ReadonlyReactiveArray` containing the keys and is updated as the original array is updated. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.keys()` for an iterator of non-reactive values instead.
*/
- keys (): ReadonlyReactiveArray> {
+ keys(): ReadonlyReactiveArray> {
const newArray = new ReactiveArray(
- ...this.#indices.map(index => index.readonly),
+ ...this.#indices.map((index) => index.readonly),
);
this.bind(
(index, deleteCount, ...addedItems) => {
newArray.#splice(
index,
deleteCount,
- ...addedItems.map((_, i) =>
- this.#indices[index + i]?.readonly ?? throwExpression("Internal error: lost track of index")
+ ...addedItems.map((_, i) =>
+ this.#indices[index + i]?.readonly ??
+ throwExpression("Internal error: lost track of index")
),
);
},
@@ -711,7 +753,7 @@ import type { TMask } from "./TMask.js";
/**
* Works similar to `Array::values()`. The difference is that it returns a `ReadonlyReactiveArray` containing the values and is updated as the original array is updated. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.values()` for an iterator of non-reactive values instead.
*/
- values (): ReadonlyReactiveArray> {
+ values(): ReadonlyReactiveArray> {
const newArray = new ReactiveArray(...this.#value.values());
this.bind(
(index, deleteCount, ...addedItems) => {
@@ -729,7 +771,7 @@ import type { TMask } from "./TMask.js";
/**
* Works similar to `Array::includes()`. The difference is that it returns a `ReadonlyReactiveValue` containing the result and is updated as the original array is updated. If you don't want this behavior, use `ReadonlyReactiveArray.prototype.value.includes()` for a plain boolean instead.
*/
- includes (
+ includes(
...args: Parameters>["includes"]>
): ReadonlyReactiveValue {
return this.pipe(
@@ -739,34 +781,37 @@ import type { TMask } from "./TMask.js";
/**
* Conbines the array with one or more other arrays, or other values.
- *
+ *
* Similar to `Array::concat()`, except that it returns a `ReadonlyReactiveArray`. It accepts arrays, `ReactiveArray`s, `ReactiveValue`s, or other items as parameters. Any `ReactiveArray`s or `ReactiveValue`s will be tracked, and the resulting `ReadonlyReactiveArray` will be updated whenever they get updated.
- *
+ *
* @param items The items to be tacked onto the original array.
*/
concat<
U,
K extends TArrayValueType | U,
- > (
+ >(
...items: Array | ReactiveValue | ReactiveArray>
): ReadonlyReactiveArray> {
- const newArray = this.clone() as ReactiveArray