u2ui 1.0.0

package/u2/tools/ce-inspector.js

@@ -0,0 +1,308 @@
+import '../../el/code/code.js';
+import '../../el/tabs/tabs.js';
+import '../../attr/confirm/confirm.js';
+import {EventsExplorer} from './eventsExplorer.js';
+import {dump, domRender} from 'https://cdn.jsdelivr.net/gh/nuxodin/dump.js@main/mod.min.js';
+
+const baseCss = import.meta.resolve('../../css/classless/full.css');
+const codeCss = import.meta.resolve('../../el/code/code.css');
+const tabsCss = import.meta.resolve('../../el/tabs/tabs.css');
+const tableCss = import.meta.resolve('../../class/table/table.css');
+
+
+import {attributes} from 'https://cdn.jsdelivr.net/gh/nuxodin/item.js@main/drivers/htmlElementAttributes.js';
+import {effect} from 'https://cdn.jsdelivr.net/gh/nuxodin/item.js@main/item.js';
+import {render, html, htmlFor} from 'https://unpkg.com/uhtml@4.4.7/keyed.js';
+
+class CeInspector extends HTMLElement {
+    constructor() {
+        super();
+        const shadow = this.attachShadow({ mode: 'open' });
+
+        shadow.innerHTML = 
+            `<style>
+            @import "${baseCss}";
+            @import "${tabsCss}";
+            @import "${codeCss}";
+            @import "${tableCss}";
+            u2-code {
+                font-size:13px;
+            }
+            slot {
+                padding: 1em;
+                box-shadow: 0 0 1em rgba(0,0,0,.1);
+                display: grid;
+                align-items: center;
+                text-align:center;
+                min-height: 10rem;
+                margin-bottom: 2rem;
+                position:relative;
+            }
+            </style>
+            <slot></slot>
+            <u2-tabs>
+                <h2>Contents (HTML)</h2>
+                <u2-code id=code trim editable></u2-code>
+                <h2>Attributes</h2>
+                <div>
+                    <table class="u2-table -Flex -NoSideGaps -Fields">
+                        <tbody id=attributes>
+                    </table>
+                </div>
+                <h2>CSS Variables</h2>
+                <form>
+                    <table class="u2-table -Flex -NoSideGaps -Fields">
+                        <tbody id=cssProperties>
+                    </table>
+                </form>
+                <h2>CSS Parts</h2>
+                <form>
+                    <table class="u2-table -Flex -NoSideGaps -Fields">
+                        <tbody id=cssParts>
+                    </table>
+                </form>
+                </div>
+                <h2>Events</h2>
+                <div id=events></div>
+            </u2-tabs>
+            `;
+        this.createUi();
+    }
+    async createUi() {
+        const manifest = await this.manifest();
+        const shadow = this.shadowRoot;
+
+        const ce = this._element;
+
+        /* code */
+        const codeEl = shadow.getElementById('code');
+        codeEl.value = ce.innerHTML;
+        codeEl.setForeignElement(ce);
+
+        /* events */
+        const eventsEl = shadow.getElementById('events');
+        const events = manifest.modules[0].declarations[0].events?.map(e => e.name);
+        eventsEl.closest('u2-tabs > *').previousElementSibling.hidden = !events?.length;
+        if (events?.length) {
+            const eExplorer = new EventsExplorer(eventsEl, ce, events);
+            eExplorer.start();
+        }
+
+        /* data */
+        // const dataEl = shadow.getElementById('data');
+        // dataEl.innerHTML = dump(ce, {depth:2, xcustomRender:domRender, inherited:false});
+
+        /* attributes */
+        const attributesEl = shadow.getElementById('attributes');
+        const attrSchemes = manifest.modules[0].declarations[0].attributes;
+        const root = attributes(ce);
+        attrSchemes.push({
+            name: 'style',
+            description: 'Inline style',
+        });
+        attrSchemes.forEach(attr => {
+            const {input,datalist} = toInput(attr);
+            input.oninput = ({target}) => {
+                if (target.type === 'checkbox' && !target.checked) {
+                    root.item(attr.name).remove();
+                } else {
+                    root.item(attr.name).set(target.value);
+                }
+            }
+            attr.input = input;
+            attr.datalist = datalist;
+        });
+        effect(() => {
+            render(attributesEl, html`
+                ${attrSchemes.map(attr => {
+                    const item = root.item(attr.name);
+                    console.log(item.value)
+                    //attr.input.value = item.value ?? null;
+                    if (attr.input.type==='checkbox') {
+                        attr.input.checked = item.value !== null;
+                    } else {
+                        attr.input.value = item.value ?? '';
+                    }
+                    return html`
+                        <tr>
+                            <td style="flex-basis:15rem; flex-grow:4">
+                                ${item.key}
+                                <br><small>${attr?.description ?? ''}</small>
+                            <td style="flex-basis:9rem">
+                                ${attr.input} ${attr.datalist}
+                            ${/*<td style="flex:0 0 auto"><button style="all:unset" onclick="${()=>{item.remove()}}" u2-confirm><u2-ico>delete</u2-ico></button>*/null}
+                    `;
+                })}
+            `);
+        });
+
+        // const attributesEl = shadow.getElementById('attributes');
+        // const attributes = manifest.modules[0].declarations[0].attributes;
+        // attributes?.length && attributes.forEach(attr => {
+        //     const tr = document.createElement('tr');
+        //     attributesEl.appendChild(tr);
+            
+        //     const {input, datalist} = toInput(attr);
+        //     input.addEventListener('input', () => {
+        //         if (input.type === 'checkbox') {
+        //             input.checked ? ce.setAttribute(attr.name, '') : ce.removeAttribute(attr.name);
+        //         } else {
+        //             input.value === '' ? ce.removeAttribute(attr.name) : ce.setAttribute(attr.name, input.value);
+        //         }
+        //     });
+        //     if (attr['u2-type'] === 'boolean') {
+        //         input.checked = ce.hasAttribute(attr.name);
+        //     } else {
+        //         input.value = ce.getAttribute(attr.name);
+        //     }
+        //     tr.innerHTML = 
+        //         `<td style="flex-basis:15rem; flex-grow:4">
+        //             ${attr.name}<br><small>${attr.description ?? ''}</small>
+        //         <td style="flex-basis:9rem">`;
+        //     tr.lastElementChild.appendChild(input);
+        //     if (datalist) tr.lastElementChild.appendChild(datalist);
+        // });
+
+        attributesEl.closest('u2-tabs > *').previousElementSibling.hidden = !attributes?.length;
+
+        /* css */
+        const cssPropertiesEl = shadow.getElementById('cssProperties');
+        const css = manifest.modules[0].declarations[0].cssProperties;
+        css?.length && css.forEach(prop => {
+            const tr = document.createElement('tr');
+            cssPropertiesEl.appendChild(tr);
+            const {input, datalist} = toInput(prop);
+            input.addEventListener('input', () => {
+                if (input.value === '') {
+                    ce.style.removeProperty(prop.name);
+                } else {
+                    ce.style.setProperty(prop.name, input.value);
+                }
+            });
+            input.value = ce.style.getPropertyValue(prop.name);
+
+            tr.innerHTML = 
+                `<td style="flex-basis:15rem; flex-grow:4">
+                    ${prop.name}<br><small>${prop.description ?? ''}</small>
+                <td style="flex-basis:9rem">`;
+            tr.lastElementChild.appendChild(input);
+            if (datalist) tr.lastElementChild.appendChild(datalist);
+        });
+        cssPropertiesEl.closest('u2-tabs > *').previousElementSibling.hidden = !css?.length;
+
+        const cssPartsEl = shadow.getElementById('cssParts');
+        const parts = manifest.modules[0].declarations[0].cssParts;
+        parts?.length && parts.forEach(part => {
+            if (!part.name) return;
+            const tr = document.createElement('tr');
+            tr.style.setProperty('align-items', 'center');
+            cssPartsEl.appendChild(tr);
+            tr.innerHTML = 
+                `<td style="flex-basis:15rem; flex-grow:4">
+                    ${part.name}<br><small>${part.description ?? ''}</small>
+                <td style="flex-basis:9rem">
+                    <u2-code name="${part.name}" editable style="padding:.6em; border:1px solid; min-width:10rem; min-height:3rem"></u2-code>
+                `;
+        });
+        if (!ce.id) ce.id = 'ce-' + Math.random().toString(36).substring(2);
+        const style = document.createElement('style');
+        ce.after(style);
+        cssPartsEl.closest('form').addEventListener('input', function(e) {
+            // u2-code can not participate in form submission for now
+            // so we need to get its value manually
+            let css = `#${ce.id} { \n`;
+            this.querySelectorAll('u2-code').forEach(code => {
+                if (!code.value.trim()) return;
+                css += ` &::part(${code.getAttribute('name')}) {${code.value}}\n`;
+            });
+            css += '\n}';
+            style.textContent = css;
+        });
+        cssPartsEl.closest('u2-tabs > *').previousElementSibling.hidden = !parts?.length;
+
+        // /* random settings */
+        // shadow.getElementById('random').addEventListener('click', () => {
+        //     attributes?.length && attributes.forEach(attr => {
+        //         const value = chooseRandom(attr);
+        //         if (value === undefined) return;
+        //         if (value===false) ce.removeAttribute(attr.name);
+        //         else ce.setAttribute(attr.name, value);
+        //     });
+        //     css?.length && css.forEach(prop => {
+        //         const value = chooseRandom(prop);
+        //         if (value === undefined) return;
+        //         ce.style.setProperty(prop.name, value);                
+        //     });
+        //     parts?.length && parts.forEach(part => {
+        //         if (!part.name) return;
+        //         const code = shadow.querySelector(`u2-code[name="${part.name}"]`);
+        //         if (!code) return;
+        //     });
+        // });
+        // function chooseRandom(data) {
+        //     if (Array.isArray(data.u2Examples)) {
+        //         return data.u2Examples[Math.floor(Math.random() * data.u2Examples.length)];
+        //     }
+        //     if (data['u2-type'] === 'boolean') {
+        //         return Math.random() > .5;
+        //     }
+        //     if (data['u2-type'] === 'number') {
+        //         return Math.random() * 100;
+        //     }
+        //     if (Array.isArray(data['u2-type'])) {
+        //         return data['u2-type'][Math.floor(Math.random() * data['u2-type'].length)];
+        //     }
+        // }
+        
+    }
+    async manifest() {
+        let url = this.getAttribute('manifest');
+        if (!url.startsWith('http')) {
+            url = new URL(url, document.baseURI).href;
+        }
+        return await fetch(url).then(r => r.json());
+    }
+    connectedCallback() {
+        this._element = this.firstElementChild;
+    }
+
+}
+
+customElements.define('ce-inspector', CeInspector);
+
+
+
+function toInput(attr) {
+    let input = document.createElement('input');
+    if (attr['u2-type'] === 'boolean') input.type = 'checkbox';
+    if (Array.isArray(attr['u2-type'])) {
+        input = document.createElement('select');
+        let option = document.createElement('option');
+        option.value = '';
+        option.text = '---';
+        input.appendChild(option);
+        attr['u2-type'].forEach(o => {
+            let option = document.createElement('option');
+            option.value = o;
+            option.text = o;
+            input.appendChild(option);
+        });
+    }
+    input.name = attr.name;
+    let datalist = null;
+    if (attr.u2Examples) {
+        datalist = document.createElement('datalist');
+        datalist.id = 'dl-' + Math.random().toString(36).substring(2);
+        attr.u2Examples.forEach(e => {
+            const option = document.createElement('option');
+            option.value = e;
+            datalist.appendChild(option);
+        });
+        input.setAttribute('list', datalist.id);
+    }
+    //input.placeholder = a;
+    return {
+        input,
+        datalist
+    }
+}

package/u2/tools/ce-inspector.test.html

@@ -0,0 +1,66 @@
+<!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"> 
+
+    <script src="./ce-inspector.js" type=module async></script>
+
+<body>
+
+<section>
+
+    <style>
+        body {
+            place-content: start stretch;
+            --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
+        }
+    </style>
+
+
+<ce-inspector manifest="../../el/ico/manifest.json">
+    <u2-ico icon="thumb_up"></u2-ico>
+</ce-inspector>
+
+<ce-inspector manifest="../../el/carousel/manifest.json">
+    <u2-carousel mode="fade">
+        <div>
+            Slide 1
+        </div>
+        <div>
+            Slide 2
+        </div>
+        <div>
+            Slide 3
+        </div>
+    </u2-carousel>
+</ce-inspector>
+
+<ce-inspector manifest="../../el/number/manifest.json">
+    <u2-number>1234.567</u2-number>
+</ce-inspector>
+
+
+<ce-inspector manifest="../../el/code/manifest.json">
+    <u2-code editable trim>
+        <style>
+            u2-number {
+                font-weight:bold;
+            }
+        </style>
+    </u2-code>
+</ce-inspector>
+
+<ce-inspector manifest="../../el/tooltip/manifest.json">
+    <u2-tooltip tabindex="-1">Tooltip test</u2-tooltip>
+</ce-inspector>
+
+
+</section>

package/u2/tools/ce-manfest-from-element.js

@@ -0,0 +1,207 @@
+// similiar: https://github.com/Polymer/tools/tree/master/packages/analyzer
+
+// hooks
+{
+    /*
+    const aEL = EventTarget.prototype.addEventListener;
+    EventTarget.prototype.addEventListener = function(...args){
+        !this.__events && (this.__events = []);
+        this.__events.push(args[0]);
+        return aEL.apply(this, args);
+    }
+    */
+    // collect all dispatched events
+    window.__dispatchedEvents = new Set();
+    const dE = EventTarget.prototype.dispatchEvent;
+    EventTarget.prototype.dispatchEvent = function(...args){
+        const ev = args[0];
+        if (!ev.detail || !ev.detail.__test) {
+            //!this.__events && (this.__events = {});
+            //this.__events[args[0].type] = 1;
+            __dispatchedEvents.add(args[0].type);
+        }
+        return dE.apply(this, args);
+    }
+
+    // requested css properties
+    const gCS = getComputedStyle;
+    window.getComputedStyle = function(...args){
+        style = gCS.apply(this, args);
+        style._computedFor = args[0];
+        return style;
+    }
+    const gPV = CSS2Properties.prototype.getPropertyValue;
+    CSS2Properties.prototype.getPropertyValue = function(...args){
+        // collect requested properties args[0]
+        const computedFor = this._computedFor;
+        if (computedFor) {
+            !computedFor.__requestedProperties && (computedFor.__requestedProperties = []);
+            computedFor.__requestedProperties.push(args[0]);
+        }
+        return gPV.apply(this, args);
+    }
+}
+
+
+function fromElement(el) {
+
+    // el.outerHTML = el.outerHTML; // trigger changes
+
+    const tagName = el.tagName.toLowerCase();
+    var klass = el.constructor;
+
+
+    // better: walk stylsheets and search for `xy-element { --x:y; };`
+    var cps = Object.values(getComputedStyle(el)).filter(style=>{
+        if (!style.startsWith) return;
+        if (style.startsWith('--'+tagName)) return true;
+    });
+    const cssProperties = cps.map(name=>{
+        return {
+            name,
+            default:'',
+            summary:'',
+            description:'',
+        }
+    });
+
+    var attris = klass.observedAttributes;
+    var attributes = (attris??[]).map(attr=>{
+        return {
+            name:attr,
+            summary:'',
+            description:'',
+            inheritedFrom:null,
+            type: null,
+            default:'',
+            fieldName:null
+        };
+    });
+
+
+    // events
+    // trigger different native events
+    function triggerNativeEvents(){
+        const options = {bubbles:true, detail:{__test:1}};
+        const eNames = ['click','mouseover','mouseenter','keydown','drop','input','change','focus','blur'];
+        const containEls = el.querySelectorAll('*');
+        const shadowEls = el.shadowRoot ? el.shadowRoot.querySelectorAll('*') : [];
+        eNames.forEach(eName=>{
+            el.dispatchEvent(new CustomEvent(eName, options));
+            containEls.forEach(el=>el.dispatchEvent(new CustomEvent(eName, options)))
+            shadowEls.forEach(el=>el.dispatchEvent(new CustomEvent(eName, options)))
+        })
+    }
+    // trigger native events to collect custom events
+    triggerNativeEvents();
+    // listen for every collected events
+    var triggeredEvents = new Set();
+    for (let eventName of __dispatchedEvents) {
+        el.addEventListener(eventName,()=>triggeredEvents.add(eventName));
+    }
+    // again trigger native events to collect them on my custom element
+    triggerNativeEvents();
+
+    const events = [...triggeredEvents].map(name=>{
+    //const events = Object.keys(el.__events??[]).map(name=>{
+        return {
+            name,
+            summary: '',
+            description: '',
+            type: null,
+            inheritedFrom: null,
+        }
+    });
+
+    // slots
+    var slotEls = el.shadowRoot ? el.shadowRoot.querySelectorAll('slot') : [];
+    const slots = Array.from(slotEls).map(el=>{
+        return {
+            name: el.name,
+            summary: '',
+            description: '',
+        };
+    })
+
+
+    // CSS Shadow Parts
+    var partEls = el.shadowRoot ? el.shadowRoot.querySelectorAll('[part]') : [];
+    const cssParts = Array.from(partEls).map(el=>{
+        return {
+            name: el.getAttribute('part'),
+            summary: '',
+            description: '',
+        };
+    })
+
+
+    // members
+    const membersObj = {}
+    let proto = klass.prototype
+    while (1) {
+        Object.entries(Object.getOwnPropertyDescriptors(proto)).map(([name, desc])=>{
+            if (membersObj[name]) return;
+            if (name === 'connectedCallback') return;
+            if (name === 'disconnectedCallback') return;
+            if (name === 'attributeChangedCallback') return;
+
+            const writeable = !desc.value && desc.set;
+            const readable = !desc.value && desc.get;
+            const obj = {
+                name,
+                summary: (readable?'readable':'')+' '+(readable?'writable':''),
+                description: '',
+                static: false,
+                privacy: 'public',
+                //inheritedFrom: null,
+                //source : null,
+            };
+            if (desc.value && typeof desc.value === 'function') {
+                obj.kind = 'method';
+                // obj.parameters: Parameter[];
+                // obj.return = {
+                //   type = Type,
+                //   description = string,
+                // };
+            } else {
+                obj.kind = 'field';
+                // obj.type = Type;
+                // obj.default = string;
+            }
+            membersObj[name] = obj;
+        })
+        proto = Object.getPrototypeOf(proto);
+        if (!proto) break;
+        if (proto === HTMLElement.prototype) break;
+        if (proto[Symbol.toStringTag] === 'HTMLElement') break;
+        if (proto === Object.prototype) break;
+    };
+    const members = Object.values(membersObj);
+
+
+    return {
+        /* ce extends classLikes */
+        name: klass.name || tagName,
+        summary: klass.formAssociated ? 'form element' : '',
+        description: '',
+        //superclass: null,
+        //mixins: [],
+        members,
+        source: 'https://',
+
+        tagName,
+        attributes,
+        events,
+        slots,
+        cssParts,
+        cssProperties,
+        demos:[{
+            url: location.href,
+            description: document.title,
+            source: '',
+        }],
+        customElement:true,
+
+    };
+
+}