wrec 0.20.0 → 0.20.2

package/dist/wrec.js

@@ -1,1105 +0,0 @@
-import DOMPurify from 'dompurify';
-import { getPathValue, setPathValue } from './paths.js';
-// Prevent DOMPurify from removing certain attributes whose names
-// begin with "on" because wrec uses those wire up event listeners.
-// Do not allow "onerror" because that can be used for XSS attacks.
-//TODO: More may need to be added later.
-const safeOnAttrNames = new Set([
-    'onblur',
-    'onchange',
-    'onclick',
-    'onfocus',
-    'oninput',
-    'onkeydown',
-    'onreset',
-    'onsubmit'
-]);
-DOMPurify.addHook('uponSanitizeAttribute', (_node, data) => {
-    const { attrName } = data;
-    const lower = attrName.toLowerCase();
-    if (safeOnAttrNames.has(lower))
-        data.forceKeepAttr = true;
-});
-class WrecError extends Error {
-}
-const CSS_PROPERTY_RE = /([a-zA-Z-]+)\s*:\s*([^;}]+)/g;
-const FIRST_CHAR = 'a-zA-Z_$';
-const OTHER_CHAR = FIRST_CHAR + '0-9';
-const IDENTIFIER = `[${FIRST_CHAR}][${OTHER_CHAR}]*`;
-const HTML_COMMENT_TEXT_RE = /<!--\s*(.*?)\s*-->/;
-const HTML_ELEMENT_TEXT_RE = /<(\w+)(?:\s[^>]*)?>((?:[^<]|<(?!\w))*?)<\/\1>/g;
-const REF_RE = new RegExp(`^this\\.${IDENTIFIER}$`);
-const REFS_RE = new RegExp(`this\\.${IDENTIFIER}(\\.${IDENTIFIER})*`, 'g');
-const REFS_TEST_RE = new RegExp(`this\\.${IDENTIFIER}(\\.${IDENTIFIER})*`);
-// Don't add 'disabled', 'id', or 'name' here!
-const RESERVED_ATTRS = new Set(['class', 'style']);
-const SKIP = 'this.'.length;
-function canDisable(element) {
-    return (element instanceof HTMLButtonElement ||
-        element instanceof HTMLFieldSetElement ||
-        element instanceof HTMLInputElement ||
-        element instanceof HTMLSelectElement ||
-        element instanceof HTMLTextAreaElement ||
-        element instanceof Wrec);
-}
-// This function is not used in this file,
-// but web components created with wrec can use it.
-export function createElement(name, attributes, innerHTML) {
-    const element = document.createElement(name);
-    if (attributes) {
-        for (const [attrName, value] of Object.entries(attributes)) {
-            element.setAttribute(attrName, value);
-        }
-    }
-    if (innerHTML)
-        element.innerHTML = innerHTML;
-    return element;
-}
-const defaultForType = (type) => type === String
-    ? ''
-    : type === Number
-        ? 0
-        : type === Boolean
-            ? false
-            : type === Array
-                ? []
-                : type === Object
-                    ? {}
-                    : undefined;
-// This returns an array of all descendant elements of a given element,
-// including those in nested shadow DOMs.
-function getAllDescendants(root) {
-    const elements = [];
-    let element = root.firstElementChild;
-    while (element) {
-        elements.push(element);
-        if (element.shadowRoot) {
-            elements.push(...getAllDescendants(element.shadowRoot));
-        }
-        // Process light DOM grandchildren.
-        if (element.firstElementChild) {
-            elements.push(...getAllDescendants(element));
-        }
-        element = element.nextElementSibling;
-    }
-    return elements;
-}
-// This takes a string like "this.foo.bar" and returns "foo".
-const getPropName = (str) => str.substring(SKIP).split('.')[0];
-function interpolate(strings, values) {
-    let result = strings[0];
-    values.forEach((value, i) => {
-        result += value + strings[i + 1];
-    });
-    return result;
-}
-function isPrimitive(value) {
-    const t = typeof value;
-    return t === 'string' || t === 'number' || t === 'boolean';
-}
-function isTextArea(element) {
-    return element.localName === 'textarea';
-}
-function isValueElement(element) {
-    const { localName } = element;
-    return localName === 'input' || localName === 'select';
-}
-const removeHtmlComments = (str) => str.replace(/<!--[\s\S]*?-->/g, '');
-// This returns a new string where a specified substring is replaced.
-function replace(full, index, length, replacement) {
-    return full.slice(0, index) + replacement + full.slice(index + length);
-}
-// DOMPurify uses the browser HTML parser which removes elements
-// that are not nested in the required parent element.
-// For example, tr elements are stripped when not inside a table element.
-// wrec needs to insert elements from HTML strings that violate this.
-// This function wraps HTML strings in the required parent element
-// only for the purpose of sanitizing the HTML.
-// It then extracts the required portion of the sanitized result.
-function sanitize(html) {
-    let h = html.trim();
-    let extract = null;
-    // tr elements must be wrapped in table/tbody.
-    if (/^\s*<tr[\s>]/i.test(h)) {
-        h = `<table><tbody>${h}</tbody></table>`;
-        extract = 'tbody';
-        // td or th elements must be wrapped in table/tbody/tr.
-    }
-    else if (/^\s*<(td|th)[\s>]/i.test(h)) {
-        h = `<table><tbody><tr>${h}</tr></tbody></table>`;
-        extract = 'tr';
-        // option elements must be wrapped in select.
-    }
-    else if (/^\s*<option[\s>]/i.test(h)) {
-        h = `<select>${h}</select>`;
-        extract = 'select';
-        // col elements must be wrapped in colgroup.
-    }
-    else if (/^\s*<col[\s>]/i.test(h)) {
-        h = `<table><colgroup>${h}</colgroup></table>`;
-        extract = 'colgroup';
-    }
-    const fragment = DOMPurify.sanitize(h, {
-        ADD_TAGS: ['#comment'],
-        ALLOW_UNKNOWN_PROTOCOLS: true,
-        RETURN_DOM_FRAGMENT: true
-    });
-    if (extract) {
-        const container = fragment.querySelector(extract);
-        if (container)
-            return container.childNodes;
-    }
-    return fragment.childNodes;
-}
-function stringToNumber(str) {
-    const n = Number(str);
-    if (isNaN(n))
-        throw new WrecError(`can't convert "${str}" to a number`);
-    return n;
-}
-function updateAttribute(element, attrName, value) {
-    const [realAttrName, _eventName] = attrName.split(':');
-    // Attributes can only be set to primitive values.
-    if (isPrimitive(value)) {
-        if (typeof value === 'boolean') {
-            if (value) {
-                element.setAttribute(realAttrName, realAttrName);
-            }
-            else {
-                element.removeAttribute(realAttrName);
-            }
-            // Set the corresponding property.
-            // This is essential for the "disabled" attribute and
-            // possibly others like "checked".
-            const propName = Wrec.getPropName(realAttrName);
-            element[propName] = value;
-        }
-        else {
-            // Set the attribute.
-            const currentValue = element.getAttribute(attrName);
-            const newValue = String(value);
-            if (currentValue !== newValue) {
-                element.setAttribute(realAttrName, newValue);
-                if (realAttrName === 'value' && isValueElement(element)) {
-                    element.value = newValue;
-                }
-            }
-        }
-    }
-    else {
-        // Set the corresponding property.
-        const propName = Wrec.getPropName(attrName);
-        element[propName] = value;
-    }
-}
-function updateValue(element, attrName, value) {
-    const [realAttrName, _eventName] = attrName.split(':');
-    if (element instanceof CSSStyleRule) {
-        element.style.setProperty(realAttrName, value); // CSS variable
-    }
-    else {
-        updateAttribute(element, realAttrName, value);
-        if (realAttrName === 'value' && isValueElement(element)) {
-            element.value = value;
-        }
-    }
-}
-// Waits for all custom elements used in a template to be defined.
-async function waitForDefines(template) {
-    // Find all the custom elements used in the template.
-    const customSet = new Set();
-    for (const element of getAllDescendants(template.content)) {
-        const { localName } = element;
-        if (localName.includes('-'))
-            customSet.add(localName);
-    }
-    function getTimeout(tagName) {
-        return new Promise((_, reject) => {
-            setTimeout(() => {
-                const message = `custom element <${tagName}> not defined`;
-                reject(new Error(message));
-            }, 1000);
-        });
-    }
-    // Wait for all the custom elements to be defined.
-    return Promise.all([...customSet].map(async (tagName) => Promise.race([customElements.whenDefined(tagName), getTimeout(tagName)])));
-}
-export class Wrec extends HTMLElement {
-    // There is one instance of `attrToPropMap`, `properties`, `propToAttrMap`,
-    // `propToComputedMap`, and `propToExprsMap` per Wrec subclass,
-    // not one for only the Wrec class.
-    // The instances created here are not used.
-    // Subclass-specific instances are created in the constructor.
-    // This is used to lookup the camelCase property name
-    // that corresponds to a kebab-case attribute name.
-    static attrToPropMap = new Map();
-    // This is used to lookup the kebab-case attribute name
-    // that corresponds to a camelCase property name.
-    static propToAttrMap = new Map();
-    // This can be set in each Wrec subclass.
-    // It describes CSS rules that a web component uses.
-    static css = '';
-    static elementName = '';
-    // Set this to true in Wrec subclasses that need
-    // the ability to contribute data to form submissions.
-    static formAssociated = false;
-    // This must be set in each Wrec subclass.
-    // It describes HTML that a web component renders.
-    static html = '';
-    // This must be set in each Wrec subclass.
-    // It describes all the properties that a web component supports.
-    static properties;
-    // This is a map from properties to arrays of
-    // computed property expressions that use the property.
-    // It is used to update computed properties
-    // when the properties on which they depend are modified.
-    // See the method #updateComputedProperties.
-    // This map cannot be private.
-    static propToComputedMap;
-    // This is a map from properties to expressions that refer to them.
-    // It is the sma for all instances of a component.
-    // This map cannot be private.
-    static propToExprsMap;
-    static template = null;
-    #ctor = this.constructor;
-    // This is a map from expressions to references to them
-    // which can be found in element text content,
-    // attribute values, and CSS property values.
-    // Each component instance needs its own map.
-    #exprToRefsMap = new Map();
-    #formAssoc = {};
-    #formData;
-    // For components that set `formAssociated` to true,
-    // this stores in the initial value of each property
-    // in the formAssociatedCallback method
-    // so they can be restored in the formResetCallback method.
-    #initialValuesMap = {};
-    #internals = null;
-    // This is a map from properties in this web component
-    // to corresponding properties in a parent web component.
-    // This must be an instance property because
-    // each component instance can have its properties mapped
-    // to the properties of different parent components.
-    // This is used to update a parent property
-    // when the corresponding child property value changes.
-    #propToParentPropMap = new Map();
-    static define(elementName) {
-        this.elementName = elementName;
-        customElements.define(elementName, this);
-    }
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-        // Create one instance of `properties`, `propToComputedMap`,
-        // and `propToExprsMap` for each Wrec subclass.
-        const ctor = this.#ctor;
-        if (!ctor.attrToPropMap)
-            ctor.attrToPropMap = new Map();
-        if (!ctor.properties)
-            ctor.properties = {};
-        if (!ctor.propToAttrMap)
-            ctor.propToExprsMap = new Map();
-        if (!ctor.propToComputedMap)
-            ctor.propToComputedMap = new Map();
-        if (!ctor.propToExprsMap)
-            ctor.propToExprsMap = new Map();
-    }
-    attributeChangedCallback(attrName, oldValue, newValue) {
-        if (attrName === 'disabled')
-            this.#disableOrEnable();
-        const propName = Wrec.getPropName(attrName);
-        if (this.#hasProperty(propName)) {
-            // Update the corresponding property.
-            const value = this.#typedValue(propName, String(newValue));
-            this[propName] = value;
-            const formKey = this.#formAssoc[propName];
-            if (formKey)
-                this.setFormValue(formKey, String(value));
-            this.propertyChangedCallback(propName, oldValue, newValue);
-        }
-    }
-    async #buildDOM() {
-        const ctor = this.#ctor;
-        let { template } = ctor;
-        if (!template) {
-            template = ctor.template = document.createElement('template');
-            // Include a CSS rule that respects the "hidden" attribute.
-            // This is a web.dev custom element best practice.
-            let style = `<style>\n    :host([hidden]) { display: none; }`;
-            if (ctor.css)
-                style += ctor.css;
-            style += '</style>\n';
-            let html = ctor.html.trim();
-            // If the HTML string does not start with <,
-            // assume it is a JavaScript expression.
-            if (!html.startsWith('<'))
-                html = `<span><!--${html}--></span>`;
-            template.innerHTML = style + html;
-        }
-        await waitForDefines(template);
-        this.shadowRoot.replaceChildren(template.content.cloneNode(true));
-    }
-    changed(_statePath, componentProp, newValue) {
-        this[componentProp] = newValue;
-    }
-    connectedCallback() {
-        this.#validateAttributes();
-        this.#defineProps();
-        this.#buildDOM().then(() => {
-            if (this.hasAttribute('disabled'))
-                this.#disableOrEnable();
-            this.#wireEvents(this.shadowRoot);
-            this.#makeReactive(this.shadowRoot);
-            this.#computeProps();
-        });
-    }
-    #computeProps() {
-        const ctor = this.#ctor;
-        const { properties } = ctor;
-        for (const [propName, { computed }] of Object.entries(properties)) {
-            if (computed)
-                this[propName] = this.#evaluateInContext(computed);
-        }
-    }
-    #defineProps() {
-        const ctor = this.#ctor;
-        const { observedAttributes, properties } = ctor;
-        for (const [propName, config] of Object.entries(properties)) {
-            this.#defineProp(propName, config, observedAttributes);
-        }
-    }
-    #defineProp(propName, config, observedAttributes) {
-        const attrName = Wrec.getAttrName(propName);
-        const has = this.hasAttribute(attrName);
-        if (config.required && !has) {
-            this.#throw(this, propName, 'is a required attribute');
-        }
-        // This follows the best practice
-        // "Consider checking for properties that may
-        // have been set before the element upgraded."
-        let value = config.value;
-        if (this.hasOwnProperty(propName)) {
-            value = this[propName];
-            delete this[propName];
-        }
-        // Copy the property value to a private property.
-        // The property is replaced below with Object.defineProperty.
-        const { type } = config;
-        const typedValue = type === Boolean
-            ? value || has
-            : observedAttributes.includes(attrName) && has
-                ? this.#typedAttribute(propName, attrName)
-                : value || defaultForType(type);
-        const privateName = '#' + propName;
-        this[privateName] = typedValue;
-        if (config.computed)
-            this.#registerComputedProp(propName, config);
-        Object.defineProperty(this, propName, {
-            enumerable: true,
-            get() {
-                return this[privateName];
-            },
-            set(value) {
-                if (type === Number && typeof value === 'string') {
-                    value = stringToNumber(value);
-                }
-                const oldValue = this[privateName];
-                if (value === oldValue)
-                    return;
-                this.#validateType(propName, type, value);
-                this[privateName] = value;
-                const { state, stateProp } = this.#ctor.properties[propName];
-                if (stateProp)
-                    setPathValue(state, stateProp, value);
-                this.#updateComputedProperties(propName);
-                this.#updateAttribute(propName, type, value, attrName);
-                this.#react(propName);
-                this.#updateParentProperty(propName, value);
-                const formKey = this.#formAssoc[propName];
-                if (formKey)
-                    this.setFormValue(formKey, String(value));
-                this.propertyChangedCallback(propName, oldValue, value);
-                if (config.dispatch) {
-                    this.dispatch('change', {
-                        tagName: this.localName,
-                        property: propName,
-                        oldValue,
-                        value
-                    });
-                }
-            }
-        });
-    }
-    #disableOrEnable() {
-        // Update all descendant form control elements.
-        const isDisabled = this.hasAttribute('disabled');
-        const elements = getAllDescendants(this.shadowRoot);
-        for (const element of elements) {
-            if (canDisable(element))
-                element.disabled = isDisabled;
-        }
-    }
-    disconnectedCallback() {
-        //TODO: Should more cleanup be performed here?
-        this.#exprToRefsMap.clear();
-        this.#initialValuesMap.clear();
-        this.#propToParentPropMap.clear();
-    }
-    dispatch(name, detail) {
-        this.dispatchEvent(new CustomEvent(name, {
-            bubbles: true, // up DOM tree
-            composed: true, // can pass through shadow DOM
-            detail
-        }));
-    }
-    displayIfSet(value, display = 'block') {
-        return `display: ${value ? display : 'none'}`;
-    }
-    #evaluateAttributes(element) {
-        //const isWC = element.localName.includes('-');
-        const isWC = element instanceof Wrec;
-        for (const attrName of element.getAttributeNames()) {
-            const text = element.getAttribute(attrName);
-            // If the attribute value is a single property reference,
-            // configure two-way data binding.
-            const propName = this.#propRefName(element, text);
-            if (propName) {
-                const value = this[propName];
-                if (value === undefined) {
-                    this.#throwInvalidRef(element, attrName, propName);
-                }
-                element[propName] = value;
-                let [realAttrName, eventName] = attrName.split(':');
-                if (realAttrName === 'value') {
-                    if (eventName) {
-                        if (element['on' + eventName] === undefined) {
-                            const msg = 'refers to an unsupported event name';
-                            this.#throw(element, attrName, msg);
-                        }
-                        element.setAttribute(realAttrName, this[propName]);
-                    }
-                    else {
-                        eventName = 'change';
-                    }
-                }
-                // If the element is a wrec web component instance,
-                // save a mapping from the attribute name in this web component
-                // to the property name in that web component.
-                if (isWC) {
-                    element.#propToParentPropMap.set(Wrec.getPropName(realAttrName), propName);
-                }
-            }
-            this.#registerPlaceholders(text, element, attrName);
-        }
-    }
-    #evaluateInContext(expr) {
-        // This approach is safer than using the eval function.
-        const result = new Function('return ' + expr).call(this);
-        return Array.isArray(result) ? result.join('') : result;
-    }
-    #evaluateText(element) {
-        const { localName } = element;
-        if (localName === 'style') {
-            const { sheet } = element;
-            const rules = sheet?.cssRules ?? [];
-            const ruleArray = Array.from(rules);
-            for (const rule of ruleArray) {
-                if (rule.constructor === CSSStyleRule) {
-                    const props = Array.from(rule.style);
-                    for (const prop of props) {
-                        /* WARNING:
-                         * `style` elements in the static html value should be avoided.
-                         * In `style` elements that appear in the static html value,
-                         * property references like `this.value` are not supported.
-                         * They are only supported in the static css value.
-                         * The following does work inside `style` elements:
-                         * .someClass {
-                         *   --color: this.value;
-                         *   color: var(--color);
-                         * }
-                         */
-                        if (prop.startsWith('--')) {
-                            const value = rule.style.getPropertyValue(prop);
-                            this.#registerPlaceholders(value, rule, prop);
-                        }
-                    }
-                }
-            }
-        }
-        else {
-            let commentText = '';
-            if (isTextArea(element)) {
-                this.#registerPlaceholders(element.textContent, element);
-                // When an HTML comment appears in a textarea element,
-                // a text node is created rather than a comment element.
-                const match = element.textContent?.match(HTML_COMMENT_TEXT_RE);
-                if (match)
-                    commentText = match[1];
-            }
-            else {
-                const comment = Array.from(element.childNodes).find(node => node.nodeType === Node.COMMENT_NODE);
-                if (comment)
-                    commentText = comment.textContent?.trim() ?? '';
-            }
-            if (commentText) {
-                // Only add a binding if the element is a "textarea" and
-                // its text content is a single property reference.
-                const propName = this.#propRefName(element, commentText);
-                if (propName && isTextArea(element)) {
-                    element.textContent = this[propName];
-                }
-                else {
-                    this.#registerPlaceholders(commentText, element);
-                }
-            }
-        }
-    }
-    // This method is called automatically if
-    // the component is nested in form element AND
-    // the static property formAssociated is true.
-    // It does things that are only necessary in that situation.
-    formAssociatedCallback() {
-        let fa = this.getAttribute('form-assoc');
-        // If the form-assoc attribute is not set,
-        // but the name attribute is set AND there is a value property,
-        // use those for form association.
-        // This matches the behavior for built-in form control elements like input.
-        if (!fa) {
-            const name = this.getAttribute('name');
-            if (name) {
-                if (this.#hasProperty('value')) {
-                    fa = `value:${name}`;
-                }
-                else {
-                    //TODO: Should this be considered an error?
-                    //throw new WrecError(
-                    //  `can't submit by name because component has no value property`
-                    //);
-                    return; // nothing to submit
-                }
-            }
-            else {
-                return; // nothing to submit
-            }
-        }
-        // Build mapping from component property names to form field names.
-        const formAssoc = {};
-        const pairs = fa.split(',');
-        for (const pair of pairs) {
-            const [key, value] = pair.split(':');
-            formAssoc[key.trim()] = value.trim();
-        }
-        this.#formAssoc = formAssoc;
-        // Prepare for form submissions.
-        this.#formData = new FormData();
-        this.#internals = this.attachInternals();
-        this.#internals.setFormValue(this.#formData);
-        // Build mapping from property names to their initial values
-        // so the containing form can be reset.
-        const propNames = Object.keys(this.#ctor.properties);
-        const map = this.#initialValuesMap;
-        for (const propName of propNames) {
-            map[propName] = this[propName];
-        }
-    }
-    formResetCallback() {
-        const map = this.#initialValuesMap;
-        for (const propName of Object.keys(map)) {
-            let value = map[propName];
-            if (REF_RE.test(value))
-                value = this.#evaluateInContext(value);
-            this[propName] = value;
-        }
-    }
-    static getAttrName(propName) {
-        let attrName = this.propToAttrMap.get(propName);
-        if (!attrName) {
-            attrName = propName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-            this.propToAttrMap.set(propName, attrName);
-        }
-        return attrName;
-    }
-    static getPropName(attrName) {
-        let propName = this.attrToPropMap.get(attrName);
-        if (!propName) {
-            propName = attrName.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
-            this.attrToPropMap.set(attrName, propName);
-        }
-        return propName;
-    }
-    #handleEvents(element, attrName, matches) {
-        if (matches.length !== 1)
-            return;
-        const [match] = matches;
-        if (!REF_RE.test(match))
-            return;
-        const isFormControl = isValueElement(element) || isTextArea(element);
-        let [realAttrName, eventName] = (attrName ?? '').split(':');
-        const shouldListen = (isFormControl && realAttrName === 'value') || isTextArea(element);
-        if (!shouldListen)
-            return;
-        if (eventName) {
-            if (element['on' + eventName] === undefined) {
-                const msg = 'refers to an unsupported event name';
-                this.#throw(element, attrName, msg);
-            }
-        }
-        else {
-            eventName = 'change';
-        }
-        const propName = getPropName(match);
-        element.addEventListener(eventName, (event) => {
-            const { target } = event;
-            if (!target)
-                return;
-            const value = target.value;
-            const { type } = this.#ctor.properties[propName];
-            this[propName] = type === Number ? stringToNumber(value) : value;
-            this.#react(propName);
-        });
-    }
-    #hasProperty(propName) {
-        return Boolean(this.#ctor.properties[propName]);
-    }
-    #makeReactive(root) {
-        const elements = Array.from(root.querySelectorAll('*'));
-        for (const element of elements) {
-            this.#evaluateAttributes(element);
-            // If the element has no child elements, evaluate its text content.
-            if (!element.firstElementChild)
-                this.#evaluateText(element);
-        }
-        /* These lines are useful for debugging.
-        if (this.constructor.name === 'ColorPicker') {
-          console.log('=== this.constructor.name =', this.constructor.name);
-          console.log('propToExprsMap =', this.#ctor.propToExprsMap);
-          console.log('#exprToRefsMap =', this.#exprToRefsMap);
-          console.log('propToComputedMap =', this.#ctor.propToComputedMap);
-          console.log('#propToParentPropMap =', this.#propToParentPropMap);
-          console.log('\n');
-        }
-        */
-    }
-    // formAssociated is only needed when the component is inside a form.
-    #verifyFormAssociated() {
-        if (this.#ctor.formAssociated || this.closest('form') === null)
-            return;
-        const className = this.#ctor.name;
-        throw new WrecError(`inside form, class ${className} requires "static formAssociated = true;"`);
-    }
-    static get observedAttributes() {
-        const keys = Object.keys(this.properties || {}).map(key => Wrec.getAttrName(key));
-        if (!keys.includes('disabled'))
-            keys.push('disabled');
-        return keys;
-    }
-    // Subclasses can override this to add functionality.
-    propertyChangedCallback(_propName, _oldValue, _newValue) { }
-    #propRefName(element, text) {
-        if (!text || !REF_RE.test(text))
-            return;
-        const propName = getPropName(text);
-        if (this[propName] === undefined) {
-            this.#throwInvalidRef(element, '', propName);
-        }
-        return propName;
-    }
-    #react(propName) {
-        // Update all expression references.
-        const ctor = this.#ctor;
-        const map = ctor.propToExprsMap;
-        const exprs = map.get(propName) || [];
-        for (const expr of exprs) {
-            let value = this.#evaluateInContext(expr);
-            const refs = this.#exprToRefsMap.get(expr) ?? [];
-            for (const ref of refs) {
-                if (ref instanceof HTMLElement) {
-                    this.#updateElementContent(ref, value);
-                }
-                else if (ref instanceof CSSStyleRule) {
-                    // We need to handle this case for completeness,
-                    // but a ref is never just a CSSStyleRule.
-                    // It can be an object with element and attrName properties
-                    // where the element is a CSSStyleRule.
-                    // The call to the #registerPlaceholders method
-                    // in the #evaluateText method creates those.
-                    // That case is is handled by the else block below.
-                }
-                else {
-                    const { element, attrName } = ref;
-                    if (element instanceof CSSStyleRule) {
-                        element.style.setProperty(attrName, value);
-                    }
-                    else {
-                        updateValue(element, attrName, value);
-                    }
-                }
-            }
-        }
-    }
-    #registerComputedProp(propName, config) {
-        const { computed, uses } = config;
-        const map = this.#ctor.propToComputedMap;
-        function register(referencedProp, expr) {
-            let computes = map.get(referencedProp);
-            if (!computes) {
-                computes = [];
-                map.set(referencedProp, computes);
-            }
-            // Each element is a tuple of a property name
-            // and an expression that uses the property.
-            computes.push([propName, expr]);
-        }
-        const matches = computed.match(REFS_RE) || [];
-        for (const match of matches) {
-            const referencedProp = match.substring(SKIP);
-            if (this[referencedProp] === undefined) {
-                this.#throwInvalidRef(null, propName, referencedProp);
-            }
-            if (typeof this[referencedProp] !== 'function') {
-                register(referencedProp, computed);
-            }
-        }
-        if (uses) {
-            for (const use of uses.split(',')) {
-                register(use, computed);
-            }
-        }
-    }
-    // WARNING: Do not place untrusted JavaScript expressions
-    // in attribute values or the text content of elements!
-    #registerPlaceholders(text, element, attrName = undefined) {
-        if (!text)
-            return;
-        const matches = this.#validateExpression(element, attrName, text);
-        if (!matches) {
-            // Handle escaped periods in expressions.
-            const value = text.replaceAll('this..', 'this.');
-            if (attrName) {
-                updateValue(element, attrName, value);
-            }
-            else if ('textContent' in element) {
-                element.textContent = value;
-            }
-            return;
-        }
-        const ctor = this.#ctor;
-        matches.forEach(capture => {
-            const propName = getPropName(capture);
-            if (typeof this[propName] === 'function')
-                return;
-            const map = ctor.propToExprsMap;
-            let exprs = map.get(propName);
-            if (!exprs) {
-                exprs = [];
-                map.set(propName, exprs);
-            }
-            if (!exprs.includes(text))
-                exprs.push(text);
-        });
-        // Remove entries for detached elements.
-        for (const [expr, refs] of this.#exprToRefsMap.entries()) {
-            for (const ref of refs) {
-                const element = ref instanceof HTMLElement || ref instanceof CSSStyleRule
-                    ? ref
-                    : ref.element;
-                if (element instanceof CSSStyleRule)
-                    continue;
-                if (!element.isConnected) {
-                    this.#exprToRefsMap.set(expr, refs.filter(r => r !== ref));
-                }
-            }
-        }
-        let refs = this.#exprToRefsMap.get(text);
-        if (!refs) {
-            refs = [];
-            this.#exprToRefsMap.set(text, refs);
-        }
-        refs.push(attrName ? { element, attrName } : element);
-        if (element instanceof HTMLElement) {
-            this.#handleEvents(element, attrName, matches);
-        }
-        const value = this.#evaluateInContext(text);
-        if (attrName) {
-            updateValue(element, attrName, value);
-        }
-        else {
-            this.#updateElementContent(element, value);
-        }
-    }
-    // This follows the best practice
-    // "Do not override author-set, global attributes."
-    setAttributeSafe(name, value) {
-        if (!this.hasAttribute(name))
-            this.setAttribute(name, value);
-    }
-    setFormValue(propName, value) {
-        if (!this.#formData || !isPrimitive(value))
-            return;
-        this.#formData.set(propName, value);
-        this.#internals?.setFormValue(this.#formData);
-    }
-    #throw(element, attrName, message) {
-        const name = element instanceof HTMLElement ? element.localName : 'CSS rule';
-        throw new WrecError(`component ${this.#ctor.elementName}` +
-            (element ? `, element "${name}"` : '') +
-            (attrName ? `, attribute "${attrName}"` : '') +
-            ` ${message}`);
-    }
-    #throwInvalidRef(element, attrName, propName) {
-        this.#throw(element, attrName, `refers to missing property "${propName}"`);
-    }
-    #typedAttribute(propName, attrName) {
-        return this.#typedValue(propName, this.getAttribute(attrName));
-    }
-    #typedValue(propName, stringValue) {
-        if (stringValue?.match(REFS_RE))
-            return stringValue;
-        const ctor = this.#ctor;
-        const { type } = ctor.properties[propName];
-        if (!type)
-            this.#throw(null, propName, 'does not specify its type');
-        if (type === String)
-            return stringValue;
-        if (type === Number)
-            return stringToNumber(stringValue);
-        if (type === Boolean) {
-            if (stringValue === 'true')
-                return true;
-            if (stringValue === 'false' || stringValue === 'null')
-                return false;
-            if (stringValue && stringValue !== propName) {
-                this.#throw(null, propName, 'is a Boolean attribute, so its value ' +
-                    'must match attribute name or be missing');
-            }
-            return stringValue === propName;
-        }
-    }
-    // Updates the matching attribute for a property if there is one.
-    // VS Code thinks this is never called, but it is called by #defineProp.
-    #updateAttribute(propName, type, value, attrName) {
-        if (isPrimitive(value) && this.hasAttribute(attrName)) {
-            const oldValue = type === Boolean
-                ? this.hasAttribute(attrName)
-                : this.#typedAttribute(propName, attrName);
-            if (value !== oldValue)
-                updateAttribute(this, propName, value);
-        }
-    }
-    // Updates all computed properties that reference this property.
-    // VS Code thinks this is never called, but it is called by #defineProp.
-    #updateComputedProperties(propName) {
-        const map = this.#ctor.propToComputedMap;
-        const computes = map.get(propName) || [];
-        for (const [computedName, expr] of computes) {
-            this[computedName] = this.#evaluateInContext(expr);
-        }
-    }
-    #updateElementContent(element, value) {
-        if (value === undefined)
-            return;
-        const isHTML = element instanceof HTMLElement;
-        const t = typeof value;
-        if (t !== 'string' && t !== 'number') {
-            this.#throw(element, undefined, ` computed content is not a string or number`);
-        }
-        if (element instanceof HTMLElement && isTextArea(element)) {
-            element.value = value;
-        }
-        else if (isHTML && t === 'string' && value.trim().startsWith('<')) {
-            //element.innerHTML = value; // This approach allows XSS attacks!
-            const safeValue = sanitize(value);
-            element.replaceChildren(...safeValue);
-            this.#wireEvents(element);
-            // This is necessary in case the new HTML contains JavaScript expressions.
-            this.#makeReactive(element);
-        }
-        else if (isHTML) {
-            element.textContent = value;
-        }
-    }
-    // Update corresponding parent web component property if bound to one.
-    // VS Code thinks this is never called, but it is called by #defineProp.
-    #updateParentProperty(propName, value) {
-        const parentProp = this.#propToParentPropMap.get(propName);
-        if (!parentProp)
-            return;
-        const root = this.getRootNode();
-        if (!(root instanceof ShadowRoot))
-            return;
-        const { host } = root;
-        if (!host)
-            return;
-        const parent = host;
-        parent[parentProp] = value;
-    }
-    /**
-     * @param state - WrecState object
-     * @param map - object whose keys are state properties and
-     *   whose values are component properties
-     */
-    useState(state, map) {
-        if (!map) {
-            // Assume this component has the same properties as the state.
-            map = {};
-            for (const prop of Object.keys(state)) {
-                map[prop] = prop;
-            }
-        }
-        this.#validateStateMap(state, map);
-        for (const [stateProp, componentProp] of Object.entries(map)) {
-            if (this.#hasProperty(componentProp)) {
-                const value = getPathValue(state, stateProp);
-                if (value !== undefined)
-                    this[componentProp] = value;
-                const config = this.#ctor.properties[componentProp];
-                config.state = state;
-                config.stateProp = stateProp;
-            }
-        }
-        state.addListener(this, map);
-    }
-    #validateAttributes() {
-        const ctor = this.#ctor;
-        const propNames = new Set(Object.keys(ctor.properties));
-        for (const propName of propNames) {
-            if (RESERVED_ATTRS.has(propName)) {
-                this.#throw(null, '', `property "${propName}" is not allowed because it is a reserved attribute`);
-            }
-        }
-        for (const attrName of this.getAttributeNames()) {
-            if (attrName === 'class')
-                continue;
-            if (attrName === 'id')
-                continue;
-            if (attrName === 'disabled')
-                continue;
-            if (attrName.startsWith('on'))
-                continue;
-            if (attrName === 'form-assoc') {
-                this.#verifyFormAssociated();
-                continue;
-            }
-            if (!propNames.has(Wrec.getPropName(attrName))) {
-                if (attrName === 'name') {
-                    this.#verifyFormAssociated();
-                    continue;
-                }
-                this.#throw(null, attrName, 'is not a supported attribute');
-            }
-        }
-    }
-    #validateExpression(element, attrName, expr) {
-        const matches = expr.match(REFS_RE);
-        if (!matches)
-            return;
-        matches.forEach(capture => {
-            const propName = getPropName(capture);
-            if (this[propName] === undefined) {
-                this.#throwInvalidRef(element, attrName, propName);
-            }
-        });
-        return matches;
-    }
-    #validateStateMap(state, map) {
-        for (const [statePath, componentProp] of Object.entries(map)) {
-            let value = getPathValue(state, statePath);
-            if (value === undefined) {
-                throw new WrecError(`invalid state path "${statePath}"`);
-            }
-            value = this[componentProp];
-            if (!this.#hasProperty(componentProp)) {
-                this.#throw(null, componentProp, 'refers to missing property in useState map');
-            }
-        }
-    }
-    // When type is an array, this can't validate the type of the array elements.
-    // This is called by #defineProp.
-    #validateType(propName, type, value) {
-        if (value instanceof type)
-            return;
-        let t = typeof value;
-        if (t === 'object') {
-            const { constructor } = value;
-            t = constructor.name;
-            if (constructor !== type) {
-                this.#throw(null, propName, `was set to a ${t}, but must be a ${type.name}`);
-            }
-        }
-        // Handle primitive types.
-        if (t !== type.name.toLowerCase()) {
-            this.#throw(null, propName, `was set to a ${t}, but must be a ${type.name}`);
-        }
-    }
-    #wireEvents(root) {
-        const elements = Array.from(root.querySelectorAll('*'));
-        for (const element of elements) {
-            // We don't want to remove attributes while we are iterating over them.
-            const attributesToRemove = [];
-            for (const attr of Array.from(element.attributes)) {
-                const attrName = attr.name;
-                if (attrName.startsWith('on')) {
-                    let eventName = attrName.slice(2);
-                    eventName =
-                        eventName[0].toLowerCase() + eventName.slice(1).toLowerCase();
-                    const attrValue = attr.value;
-                    this.#validateExpression(element, attrName, attrValue);
-                    let fn;
-                    if (typeof this[attrValue] === 'function') {
-                        fn = (event) => this[attrValue](event);
-                    }
-                    else {
-                        this.#validateExpression(element, attrName, attrValue);
-                        // oxlint-disable-next-line no-eval no-unused-vars
-                        fn = () => this.#evaluateInContext(attrValue);
-                    }
-                    element.addEventListener(eventName, fn);
-                    attributesToRemove.push(attrName);
-                }
-            }
-            for (const attrName of attributesToRemove) {
-                element.removeAttribute(attrName);
-            }
-        }
-    }
-}
-export function css(strings, ...values) {
-    let result = interpolate(strings, values);
-    // Replace JavaScript expressions in CSS property values
-    // with a reference to a CSS variable whose value is the expression.
-    while (true) {
-        const match = CSS_PROPERTY_RE.exec(result);
-        if (!match)
-            break;
-        const propValue = match[2];
-        if (REFS_TEST_RE.test(propValue)) {
-            const propName = match[1];
-            if (!propName.startsWith('--')) {
-                const replacement = `--${propName}: ${propValue};
-      ${propName}: var(--${propName})`;
-                result = replace(result, match.index, match[0].length, replacement);
-            }
-        }
-    }
-    return result;
-}
-export function html(strings, ...values) {
-    let result = interpolate(strings, values);
-    // Replace JavaScript expressions in HTML element text content
-    // with an HTML comment containing the expression.
-    while (true) {
-        const match = HTML_ELEMENT_TEXT_RE.exec(result);
-        // Don't do this in style elements.
-        if (!match || match[1] === 'style')
-            break;
-        const textContent = removeHtmlComments(match[2]);
-        if (REFS_TEST_RE.test(textContent)) {
-            const comment = `<!-- ${textContent.trim()} -->`;
-            const index = match.index + match[0].indexOf('>') + 1;
-            result = replace(result, index, textContent.length, comment);
-        }
-    }
-    return result;
-}
-export { WrecState } from './wrec-state';
-//# sourceMappingURL=wrec.js.map