@lushly-dev/fast-element 3.0.1-preview.0 → 3.0.1-preview.1

package/dist/esm/components/attributes.js

@@ -0,0 +1,219 @@
+import { DOM } from "../dom.js";
+import { isString } from "../interfaces.js";
+import { Observable } from "../observation/observable.js";
+import { Updates } from "../observation/update-queue.js";
+import { createMetadataLocator } from "../platform.js";
+const booleanMode = "boolean";
+const reflectMode = "reflect";
+/**
+ * Metadata used to configure a custom attribute's behavior.
+ * @public
+ */
+export const AttributeConfiguration = Object.freeze({
+    /**
+     * Locates all attribute configurations associated with a type.
+     */
+    locate: createMetadataLocator(),
+});
+/**
+ * A {@link ValueConverter} that converts to and from `boolean` values.
+ * @remarks
+ * Used automatically when the `boolean` {@link AttributeMode} is selected.
+ * @public
+ */
+export const booleanConverter = {
+    toView(value) {
+        return value ? "" : null;
+    },
+    fromView(value) {
+        return !!value;
+    },
+};
+/**
+ * A {@link ValueConverter} that converts to and from `boolean` values. `null`, `undefined`, `""`,
+ * and `void` values are converted to `null`.
+ * @public
+ */
+export const nullableBooleanConverter = {
+    toView(value) {
+        return typeof value === "boolean" ? value.toString() : "";
+    },
+    fromView(value) {
+        return [null, undefined, void 0].includes(value)
+            ? null
+            : booleanConverter.fromView(value);
+    },
+};
+function toNumber(value) {
+    if (value === null || value === undefined) {
+        return null;
+    }
+    const number = value * 1;
+    return isNaN(number) ? null : number;
+}
+/**
+ * A {@link ValueConverter} that converts to and from `number` values.
+ * @remarks
+ * This converter allows for nullable numbers, returning `null` if the
+ * input was `null`, `undefined`, or `NaN`.
+ * @public
+ */
+export const nullableNumberConverter = {
+    toView(value) {
+        const output = toNumber(value);
+        return output ? output.toString() : output;
+    },
+    fromView: toNumber,
+};
+/**
+ * An implementation of {@link Accessor} that supports reactivity,
+ * change callbacks, attribute reflection, and type conversion for
+ * custom elements.
+ * @public
+ */
+export class AttributeDefinition {
+    /**
+     * Creates an instance of AttributeDefinition.
+     * @param Owner - The class constructor that owns this attribute.
+     * @param name - The name of the property associated with the attribute.
+     * @param attribute - The name of the attribute in HTML.
+     * @param mode - The {@link AttributeMode} that describes the behavior of this attribute.
+     * @param converter - A {@link ValueConverter} that integrates with the property getter/setter
+     * to convert values to and from a DOM string.
+     */
+    constructor(Owner, name, attribute = name.toLowerCase(), mode = reflectMode, converter) {
+        this.guards = new Set();
+        this.Owner = Owner;
+        this.name = name;
+        this.attribute = attribute;
+        this.mode = mode;
+        this.converter = converter;
+        this.fieldName = `_${name}`;
+        this.callbackName = `${name}Changed`;
+        this.hasCallback = this.callbackName in Owner.prototype;
+        if (mode === booleanMode && converter === void 0) {
+            this.converter = booleanConverter;
+        }
+    }
+    /**
+     * Sets the value of the attribute/property on the source element.
+     * @param source - The source element to access.
+     * @param newValue - The value to set the attribute/property to.
+     */
+    setValue(source, newValue) {
+        const oldValue = source[this.fieldName];
+        const converter = this.converter;
+        if (converter !== void 0) {
+            newValue = converter.fromView(newValue);
+        }
+        if (oldValue !== newValue) {
+            source[this.fieldName] = newValue;
+            this.tryReflectToAttribute(source);
+            if (this.hasCallback) {
+                source[this.callbackName](oldValue, newValue);
+            }
+            source.$fastController.notify(this.name);
+        }
+    }
+    /**
+     * Gets the value of the attribute/property on the source element.
+     * @param source - The source element to access.
+     */
+    getValue(source) {
+        Observable.track(source, this.name);
+        return source[this.fieldName];
+    }
+    /** @internal */
+    onAttributeChangedCallback(element, value) {
+        if (this.guards.has(element)) {
+            return;
+        }
+        this.guards.add(element);
+        if (this.mode === booleanMode) {
+            // Native HTML boolean attribute semantics: presence of the attribute
+            // (any string value, including "") means `true`; `null` (the value
+            // passed by the platform on `removeAttribute`) means `false`.
+            this.setValue(element, value !== null);
+        }
+        else {
+            this.setValue(element, value);
+        }
+        this.guards.delete(element);
+    }
+    tryReflectToAttribute(element) {
+        const mode = this.mode;
+        const guards = this.guards;
+        if (guards.has(element) || mode === "fromView") {
+            return;
+        }
+        Updates.enqueue(() => {
+            guards.add(element);
+            const latestValue = element[this.fieldName];
+            switch (mode) {
+                case reflectMode: {
+                    const converter = this.converter;
+                    DOM.setAttribute(element, this.attribute, converter !== void 0
+                        ? converter.toView(latestValue)
+                        : latestValue);
+                    break;
+                }
+                case booleanMode:
+                    DOM.setBooleanAttribute(element, this.attribute, latestValue);
+                    break;
+            }
+            guards.delete(element);
+        });
+    }
+    /**
+     * Collects all attribute definitions associated with the owner.
+     * @param Owner - The class constructor to collect attribute for.
+     * @param attributeLists - Any existing attributes to collect and merge with those associated with the owner.
+     * @internal
+     */
+    static collect(Owner, ...attributeLists) {
+        const attributes = [];
+        attributeLists.push(AttributeConfiguration.locate(Owner));
+        for (let i = 0, ii = attributeLists.length; i < ii; ++i) {
+            const list = attributeLists[i];
+            if (list === void 0) {
+                continue;
+            }
+            for (let j = 0, jj = list.length; j < jj; ++j) {
+                const config = list[j];
+                if (isString(config)) {
+                    attributes.push(new AttributeDefinition(Owner, config));
+                }
+                else {
+                    attributes.push(new AttributeDefinition(Owner, config.property, config.attribute, config.mode, config.converter));
+                }
+            }
+        }
+        return attributes;
+    }
+}
+export function attr(configOrTarget, prop) {
+    let config;
+    function decorator($target, $prop) {
+        if (arguments.length > 1) {
+            // Non invocation:
+            // - @attr
+            // Invocation with or w/o opts:
+            // - @attr()
+            // - @attr({...opts})
+            config.property = $prop;
+        }
+        AttributeConfiguration.locate($target.constructor).push(config);
+    }
+    if (arguments.length > 1) {
+        // Non invocation:
+        // - @attr
+        config = {};
+        decorator(configOrTarget, prop);
+        return;
+    }
+    // Invocation with or w/o opts:
+    // - @attr()
+    // - @attr({...opts})
+    config = configOrTarget === void 0 ? {} : configOrTarget;
+    return decorator;
+}

package/dist/esm/components/definition-schema-transforms.js

@@ -0,0 +1,23 @@
+const definitionSchemaTransformsKey = Symbol("definitionSchemaTransforms");
+let schemaTransformOrder = 0;
+export function setDefinitionSchemaTransform(definition, key, transform, priority) {
+    var _a;
+    const target = definition;
+    const transforms = ((_a = target[definitionSchemaTransformsKey]) !== null && _a !== void 0 ? _a : (target[definitionSchemaTransformsKey] = []));
+    const existingIndex = transforms.findIndex(record => record.key === key);
+    if (existingIndex !== -1) {
+        transforms.splice(existingIndex, 1);
+    }
+    transforms.push({
+        key,
+        transform,
+        order: schemaTransformOrder++,
+        priority,
+    });
+    transforms.sort((a, b) => a.priority - b.priority || a.order - b.order);
+}
+export function getDefinitionSchemaTransforms(definition) {
+    var _a;
+    const transforms = definition === null || definition === void 0 ? void 0 : definition[definitionSchemaTransformsKey];
+    return (_a = transforms === null || transforms === void 0 ? void 0 : transforms.map(record => record.transform)) !== null && _a !== void 0 ? _a : [];
+}