u2ui 1.0.0 → 1.4.5

package/u2/tools/baseElement.js

@@ -1,95 +1,217 @@
-
-export class BaseElement extends HTMLElement {
-
-    constructor() {
-        super();
-        if (typeof this.childListChangedCallback === 'function') {
-            this.mutationObserver = new MutationObserver((mutations) => {
-                this.childListChangedCallback(mutations);
-            });
-        }
-    }
-    connectedCallback() {
-        this.mutationObserver?.observe(this, {childList:true});
-        this.scheduleRender();
-    }
-    disconnectedCallback() {
-        this.mutationObserver?.disconnect();
-    }
-
-    static _initBase() {
-
-        /* properties */
-        this.attributesMap ??= new Map();
-        this.propertiesMap ??= new Map();
-
-        for (const [key, options] of Object.entries(this.properties)) {
-            if (options.attribute === true) options.attribute = key;
-            options.property = key;
-            this.propertiesMap.set(key, options);
-            Object.defineProperty(this.prototype, key, {
-                get() {
-                    return this['_' + key];
-                },
-                set(value) {
-                    this['_' + key] = value;
-                    if (options.attribute && options.reflect) {
-                        const attrVal = propToAttr(value, options);
-                        attrVal == null ? this.removeAttribute(options.attribute) : this.setAttribute(options.attribute, attrVal);
-                    }
-                    this.requestUpdate();
-                }
-            });
-            if (options.attribute) this.attributesMap.set(options.attribute, options);
-        }
-
-        /* only once */
-        this._initBase = null;
-    }
-
-    static get observedAttributes() {
-        this._initBase?.();
-        return [...this.attributesMap.keys()];
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue === newValue) return;
-        const config = this.constructor.attributesMap.get(name);
-        const propValue = attrToProp(newValue, config);
-        const propName = config.property;
-        if (this['_'+propName] !== propValue) this[propName] = propValue;
-    }
-
-    requestUpdate() {
-        this.scheduledRender();
-    }
-
-    scheduledRender() {
-        if ( this._isRendering ) return;
-        this._isRendering = true;
-        requestAnimationFrame(() => {
-            this._isRendering = false;
-            this.render();
-        });
-    }
-
-    locales() { // todo? for tables i should check col and colgroup https://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#alignment-inheritance
-        let langEl = this.closest('[lang]')||document.documentElement;
-        return Intl.getCanonicalLocales([langEl.lang, ...navigator.languages,'en']);
-    }
-}
-
-
-
-function attrToProp(value, {type}) {
-    if (type === 'boolean') return value != null;
-    if (type === 'number') return parseFloat(value);
-    if (type === 'tokens') return new Set(value.split(' '));
-    return value;
-}
-function propToAttr(value, {type}) {
-    if (type === 'boolean') return value ? '' : null;
-    if (type === 'number') return value.toString();
-    if (type === 'tokens') return [...value].join(' ');
-    return String(value);
-}
+export class BaseElement extends HTMLElement {
+    #mutationObserver = null;
+    #isFirstConnect = true;
+    #isRendering = false;
+
+    static _initBase() {
+        this.attributesMap ??= new Map();
+        this.propertiesMap ??= new Map();
+
+        const props = this.properties || {};
+
+        for (const [key, options] of Object.entries(props)) {
+            // Normalize options
+            if (options.attribute === true) options.attribute = key;
+            options.property = key;
+
+            this.propertiesMap.set(key, options);
+
+            // Create property getter/setter
+            Object.defineProperty(this.prototype, key, {
+                get() {
+                    return this['_' + key];
+                },
+                set(value) {
+                    const oldValue = this['_' + key];
+                    this['_' + key] = value;
+
+                    // Reflect to attribute if needed
+                    if (options.attribute && options.reflect) {
+                        const attrVal = propToAttr(value, options);
+                        attrVal == null ? this.removeAttribute(options.attribute) : this.setAttribute(options.attribute, attrVal);
+                    }
+
+                    // Trigger render
+                    if (oldValue !== value) {
+                        //this.requestUpdate();
+
+                        // Call onChange callback if defined
+                        if (options.onChange) {
+                            options.onChange.call(this, value, oldValue);
+                        }
+                    }
+                },
+                enumerable: true,
+                configurable: true
+            });
+
+            // Map attribute name to config
+            if (options.attribute) { this.attributesMap.set(options.attribute, options); }
+
+            // Set default value
+            if (options.default !== undefined) { this.prototype['_' + key] = options.default; }
+        }
+
+        // Only run once
+        this._initBase = null;
+    }
+
+    static get observedAttributes() {
+        this._initBase?.();
+        return [...(this.attributesMap?.keys() || [])];
+    }
+
+    static _sheet;
+
+    constructor() {
+        super();
+
+        const shadow = this.constructor.shadow;
+        if (shadow) {
+            this.attachShadow({ mode: 'open' });
+            this.shadowRoot.innerHTML = shadow;
+        }
+
+        if (this.constructor.css) {
+            if (!this.constructor._sheet) {
+                const s = new CSSStyleSheet();
+                s.replaceSync(this.constructor.css);
+                this.constructor._sheet = s;
+            }
+            this.shadowRoot.adoptedStyleSheets = [this.constructor._sheet];
+        }
+
+        this.#wrapLifecycleCallbacks();
+    }
+
+
+    #wrapCallback(name) {
+        const originalMethod = Object.getPrototypeOf(this)[name];
+        const baseMethod = BaseElement.prototype[name];
+        if (originalMethod && originalMethod !== baseMethod) {
+            this['_' + 'user' + name[0].toUpperCase() + name.slice(1)] = originalMethod.bind(this);
+        }
+    }
+    #wrapLifecycleCallbacks() {
+        this.#wrapCallback('connectedCallback');
+        this.#wrapCallback('disconnectedCallback');
+        this.#wrapCallback('attributeChangedCallback');
+    }
+
+    connectedCallback() {
+        // BaseElement Logik IMMER zuerst
+        if (typeof this.childrenCallback === 'function') {
+            this.#setupMutationObserver();
+        }
+
+        if (this.#isFirstConnect && this.firstConnectedCallback) {
+            this.firstConnectedCallback();
+            this.#isFirstConnect = false;
+        }
+
+        this.requestUpdate();
+
+        // Dann Subklassen-Callback falls vorhanden
+        if (this._userConnectedCallback) {
+            this._userConnectedCallback();
+        }
+    }
+
+    disconnectedCallback() {
+        // BaseElement Cleanup IMMER zuerst
+        this.#mutationObserver?.disconnect();
+
+        // Dann Subklassen-Callback falls vorhanden
+        if (this._userDisconnectedCallback) {
+            this._userDisconnectedCallback();
+        }
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+
+        // BaseElement Logik IMMER zuerst
+        const config = this.constructor.attributesMap?.get(name);
+        if (config) {
+
+            const propValue = attrToProp(newValue, config);
+            const propName = config.property;
+            if (this['_' + propName] !== propValue) {
+                this[propName] = propValue;
+            }
+            this.requestUpdate();
+        }
+
+        // Dann Subklassen-Callback falls vorhanden
+        if (this._userAttributeChangedCallback) {
+            this._userAttributeChangedCallback(name, oldValue, newValue);
+        }
+    }
+
+    #setupMutationObserver() {
+        this.#mutationObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach(node => {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            this.childrenCallback(node, 'added');
+                        }
+                    });
+
+                    mutation.removedNodes.forEach(node => {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            this.childrenCallback(node, 'removed');
+                        }
+                    });
+                }
+            }
+        });
+        this.#mutationObserver.observe(this, { childList: true, subtree: false });
+    }
+
+    // Render scheduling
+    requestUpdate() {
+        if (this.#isRendering) return;
+        this.#isRendering = true;
+
+        requestAnimationFrame(() => {
+            this.#isRendering = false;
+            if (this.render) { this.render(); }
+        });
+    }
+
+    // Helper: Query im Shadow DOM
+    $(selector) { return this.shadowRoot?.querySelector(selector); }
+    $$(selector) { return this.shadowRoot?.querySelectorAll(selector); }
+
+    // Helper: Dispatch Custom Event
+    emit(eventName, detail = null, options = {}) {
+        const event = new CustomEvent(eventName, {
+            detail,
+            bubbles: true,
+            composed: true,
+            ...options
+        });
+        return this.dispatchEvent(event);
+    }
+
+    // Helper: Locales für Internationalisierung
+    locales() {
+        const langEl = this.closest('[lang]') || document.documentElement;
+        return Intl.getCanonicalLocales([langEl.lang, ...navigator.languages, 'en']);
+    }
+}
+
+// Type conversion helpers
+function attrToProp(value, { type }) {
+    if (type === 'boolean') return value != null;
+    if (type === 'number') return value ? parseFloat(value) : 0;
+    return type === 'tokens' ? new Set(value?.split(' ') || []) : value;
+}
+
+function propToAttr(value, { type }) {
+    if (type === 'boolean') return value ? '' : null;
+    if (type === 'number') return String(value);
+    if (type === 'tokens') return [...value].join(' ');
+    return value == null ? null : String(value);
+}

package/u2/tools/baseElement.test.html

@@ -1,119 +1,139 @@
-<!DOCTYPE HTML>
-<html lang=en>
-<head>
-    <meta charset="utf-8">
-    <meta name=viewport content="width=device-width">
-    <title>Test</title>
-    <!--script src="../../u2/tests/test-init.js" type=module></script-->
-
-    <script src="../../u2/auto.js" type=module></script>
-
-    <link rel=stylesheet href="../../css/classless/full.css">
-    <link rel=stylesheet href="../../css/classless/simple.css">
-
-
-<body>
-
-<section>
-
-    <script type=module>
-    import {dump, domRender} from 'https://cdn.jsdelivr.net/gh/nuxodin/dump.js@x.x/mod.min.js';
-    import './ce-inspector.js';
-
-    import {BaseElement} from './baseElement.js';
-
-    class TestElement extends BaseElement {
-
-        static properties = {
-            number: {
-                attribute: true,
-                type: 'number',
-            },
-            boolean: {
-                attribute: true,
-                type: 'boolean',
-            },
-            string: {
-                attribute: true,
-                type: 'string',
-            },
-            tokens: {
-                attribute: true,
-                type: 'tokens',
-            },
-            propAttr: {
-                attribute: 'prop-attr',
-                type: 'string',
-            },
-        }
-
-        constructor() {
-            super();
-            this.attachShadow({mode: 'open'});
-        }
-
-        connectedCallback() {
-            this.shadowRoot.innerHTML = `
-            <style>
-            :host {
-                display: block;
-                border: 1px solid;
-                padding: 1em;
-            }
-            slot {
-                display: block;
-                border: 1px solid;
-                padding: 1em;
-            }
-            </style>
-            Slot:<slot></slot>
-            <div id=data></div>
-            `;
-        }
-        render() {
-            this.renderCount = (this.renderCount ?? 0) + 1;
-
-            const propsObj = {};
-            Object.entries(this.constructor.properties).forEach( ([name, config]) => {
-                propsObj[name] = {
-                    value: this[name],
-                    type: config.type,
-                    attribute: config.attribute,
-                    attributeValue: this.getAttribute(config.attribute),
-                };
-            });
-
-
-            this.shadowRoot.getElementById('data').innerHTML = `
-            <h3>Properties</h3>
-            ${dump(propsObj)}
-            <h3>el.locales()</h3>
-            ${dump(this.locales())}
-
-            <h3>el.innerHTML</h3>
-            ${dump(this.innerHTML)}
-            <h3>Metrics</h3>
-            <div>${this.renderCount}</div>
-            `;
-
-
-        }
-    }
-    customElements.define('test-element', TestElement);
-    </script>
-
-
-</section>
-
-<div id="wrapper">
-
-<test-element id=testEl number="1234.567" boolean string="hello World" tokens="a b c" prop-attr="test">
-    Content
-</test-element>
-
-</div>
-
-outer:
-<u2-code trim editable element="wrapper"></u2-code>
-inner:
-<u2-code trim editable element="testEl"></u2-code>
+<!DOCTYPE HTML>
+<html lang=en>
+
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width">
+    <title>Test</title>
+    <!--script src="../../u2/tests/test-init.js" type=module></script-->
+
+    <script src="../../u2/auto.js" type=module></script>
+
+    <link rel=stylesheet href="../../css/classless/full.css">
+    <link rel=stylesheet href="../../css/classless/simple.css">
+
+
+<body>
+
+    <section>
+
+        <script type=module>
+            import { dump, domRender } from 'https://cdn.jsdelivr.net/gh/nuxodin/dump.js@x.x/mod.min.js';
+            import './ce-inspector.js';
+
+            import { BaseElement } from './baseElement.js';
+
+            class TestElement extends BaseElement {
+                static css =
+                    `:host {
+                display: block;
+                border: 1px solid;
+                padding: 1em;
+            }
+            slot {
+                display: block;
+                border: 1px solid;
+                padding: 1em;
+            }`;
+                static shadow = 'Slot:<slot></slot><div id=data></div>';
+                static properties = {
+                    number: {
+                        attribute: true,
+                        type: 'number',
+                        reflect: true,
+                    },
+                    boolean: {
+                        attribute: true,
+                        type: 'boolean',
+                        reflect: true,
+                    },
+                    string: {
+                        attribute: true,
+                        type: 'string',
+                        reflect: true,
+                    },
+                    tokens: {
+                        attribute: true,
+                        type: 'tokens',
+                        reflect: true,
+                    },
+                    propAttr: {
+                        attribute: 'prop-attr',
+                    },
+                    lang: {
+                        attribute: true,
+                    }
+                }
+
+                constructor() {
+                    super();
+                }
+
+                render() {
+                    this.renderCount = (this.renderCount ?? 0) + 1;
+
+                    const propsObj = {};
+                    Object.entries(this.constructor.properties).forEach(([name, config]) => {
+                        propsObj[name] = {
+                            value: this[name],
+                            type: config.type,
+                            attribute: config.attribute,
+                            attributeValue: this.getAttribute(config.attribute),
+                        };
+                    });
+
+                    this.$('#data').innerHTML = `
+            <h3>Properties</h3>
+            ${dump(propsObj)}
+            <h3>el.locales()</h3>
+            ${dump(this.locales())}
+
+            <h3>el.innerHTML</h3>
+            ${dump(this.innerHTML)}
+            <h3>Metrics</h3>
+            <div>Render count: ${this.renderCount}</div>
+            `;
+
+                }
+            }
+            customElements.define('test-element', TestElement);
+        </script>
+
+
+    </section>
+
+    <div id="wrapper">
+
+        <test-element id=testEl number="1234.567" boolean string="hello World" tokens="a b c" prop-attr="test">
+            Content
+        </test-element>
+
+    </div>
+
+    <h4>Attributes</h4>
+    <form oninput="testEl.setAttribute(event.target.name, event.target.value)">
+        <u2-fields>
+            <input name="number">
+            <input name="boolean">
+            <input name="string">
+            <input name="tokens">
+            <input name="propAttr">
+            <input name="lang">
+        </u2-fields>
+    </form>
+
+    <h4>Properties</h4>
+    <form oninput="testEl[event.target.name] = event.target.value">
+        <u2-fields>
+            <input name="number">
+            <input name="boolean">
+            <input name="string">
+            <input name="tokens">
+            <input name="propAttr">
+        </u2-fields>
+    </form>
+
+    outer:
+    <u2-code trim editable element="wrapper"></u2-code>
+    inner:
+    <u2-code trim editable element="testEl"></u2-code>