u2ui 1.0.0

package/u2/experiments/u2Element.test.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang=en>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Demo Page | U2-Design-System</title>
+        <script src="./test-init.js" type=module async></script>
+        <script src="../auto.js" type=module async></script>
+
+
+<body>
+
+
+    <script type=module>
+        import {U2Element} from './u2Element.js';
+
+        class myEl extends U2Element {
+            // static outerSheets = [
+            //     import.meta.resolve('./u2Element.css'),
+            // ];
+            // static shadowSheets = [
+            //     import.meta.resolve('./../../css/norm/norm.css'),
+            //     import.meta.resolve('./../../css/base/base.css'),
+            // ];
+            static outerCss = 'display:block';
+            static css = ' slot { background:red; display:inline-block; } ';
+            static shadow = 'Hi <slot></slot>';
+            onClick(event) {
+                console.log({
+                    event,
+                    scope: this,
+                })
+                alert('clicked (view console)');
+            }
+        }
+
+        console.log(myEl.prototype)
+
+        customElements.define('my-el', myEl);
+
+    </script>
+
+
+<my-el id="el1">My Element</my-el>
+<my-el>My Element 2</my-el>
+
+

package/u2/old-stuff/IterableWeakMap/mod.js

@@ -0,0 +1,70 @@
+// IterableWeakSet not complete: https://gist.github.com/seanlinsley/bc10378fd311d75cf6b5e80394be813d
+
+export class IterableWeakMap {
+    #weakMap = new WeakMap();
+    #refSet = new Set();
+    #finalizationGroup = new FinalizationRegistry(IterableWeakMap.#cleanup);
+
+    static #cleanup({ set, ref }) {
+        set.delete(ref);
+    }
+
+    constructor(iterable) {
+        for (const [key, value] of iterable) {
+            this.set(key, value);
+        }
+    }
+
+    set(key, value) {
+        const ref = new WeakRef(key);
+
+        this.#weakMap.set(key, { value, ref });
+        this.#refSet.add(ref);
+        this.#finalizationGroup.register(key, {
+            set: this.#refSet,
+            ref
+        }, ref);
+    }
+
+    get(key) {
+        const entry = this.#weakMap.get(key);
+        return entry && entry.value;
+    }
+
+    delete(key) {
+        const entry = this.#weakMap.get(key);
+        if (!entry) {
+            return false;
+        }
+
+        this.#weakMap.delete(key);
+        this.#refSet.delete(entry.ref);
+        this.#finalizationGroup.unregister(entry.ref);
+        return true;
+    }
+
+    *[Symbol.iterator]() {
+        for (const ref of this.#refSet) {
+            const key = ref.deref();
+            if (!key) continue;
+            const { value } = this.#weakMap.get(key);
+            yield [key, value];
+        }
+    }
+
+    entries() {
+        return this[Symbol.iterator]();
+    }
+
+    *keys() {
+        for (const [key, value] of this) {
+            yield key;
+        }
+    }
+
+    *values() {
+        for (const [key, value] of this) {
+            yield value;
+        }
+    }
+}

package/u2/old-stuff/css/onStyleSheet/mod.js

@@ -0,0 +1,114 @@
+import {SelectorObserver} from '../../../js/SelectorObserver/SelectorObserver.js';
+
+const sheets = new WeakSet();
+const elements = new WeakSet();
+
+const start = performance.now();
+
+async function foundElement(el, byDebug){
+    console.log('found new Element by '+byDebug, el, performance.now()-start+'ms');
+    if (elements.has(el)) return; // what if element order changes?
+    el.setAttribute('crossorigin','');
+    elements.add(el);
+    const sheet = await elSheetReady(el);
+    checkSheet(el.sheet);
+}
+
+/*
+document.styleSheets has the right order of sheets, but imported sheets are not included
+*/
+for (let sheet of document.styleSheets) {
+    if (!sheet.ownerNode) console.warn('are root-sheets without ownerNode possible?');
+    foundElement(sheet.ownerNode, 'document.styleSheets');
+}
+for (let sheet of document.adoptedStyleSheets) {
+    if (sheet.ownerNode) console.warn('adoptedStyleSheets with a ownerNode possible?');
+    foundElement(sheet.ownerNode, 'document.adoptedStyleSheets');
+}
+
+/*
+sometimes the load-event comes before mutationobserver? not really
+- first big .css?
+has to listen on document, window triggers on document-load
+*/
+document.addEventListener('load',({target})=>{
+    foundElement(target, 'load')
+    if (!elements.has(target)) console.warn('load was first!!!');
+    // console.log('triggered load', target, e);
+    // if (target.tagName !== 'LINK') return;
+    // if (target.rel !== 'stylesheet') return;
+    // foundElement(target)
+},true);
+
+new SelectorObserver({
+    on: el => {
+        // checks all styleSheets and importRules, todo store urls global and check all if used url found
+        // console.log(el.sheet)
+        foundElement(el, 'SelectorObserver')
+        //checkAllSheets();
+    },
+}).observe('link[rel="stylesheet"], style');
+
+
+function checkSheet(sheet){
+    let rules = false;
+    try { rules = sheet.cssRules; } catch {}  // firefox fails sometimes if we access sheet.cssRules immediate after found it, really?
+    console.log('sheet found', rules?'rules accessible':'rules fail', sheet)
+    if (sheets.has(sheet)) console.error('sheet already added!?');
+    sheets.add(sheet);
+    rules && checkImportRules(rules);
+}
+function checkImportRules(rules){
+    for (let rule of rules) {
+        if (rule instanceof CSSImportRule) {
+            checkSheet(rule.styleSheet);
+        } else continue; // or break? are they always first?
+    }
+}
+
+
+/*
+const urls = {};
+function checkAllSheets(){
+    for (let sheet of document.styleSheets) checkSheet(sheet);
+}
+function checkSheet(sheet){
+    console.log('sheet',sheet)
+    try { // firefox fails sometimes if we access sheet.cssRules immediate after found it
+        checkImportRules(sheet.cssRules);
+    } catch (e) {
+        //console.log('fail',sheet, e) //
+    }
+    if (!sheet.href) return;
+    console.log(urls)
+    if (medialistHas(sheet.media, 'once')) {
+        sheet.disabled = !!urls[sheet.href];
+        urls[sheet.href] = 1;
+    }
+
+}
+function checkImportRules(rules){
+    for (let rule of rules) {
+        if (rule instanceof CSSImportRule) checkSheet(rule.styleSheet);
+    }
+}
+function medialistHas(mediaList, wanted){
+    for (let medium of mediaList) if (medium === wanted) return true;
+}
+*/
+
+/* utils */
+
+function elSheetReady(el){
+    return new Promise(function(resolve, reject){
+        if (el.sheet) resolve(el.sheet);
+        el.addEventListener('load',()=>{
+            if (el.sheet) resolve(el.sheet);
+            else {
+                console.log('no sheet yet', el);
+                reject('no sheet!');
+            }
+        },{once:true})
+        setTimeout(()=>reject('timeout'),2000)
+    })
+}

package/u2/old-stuff/css/onStyleSheet/monkeypatches.js

@@ -0,0 +1,28 @@
+
+const sheetProto = CSSStyleSheet.prototype;
+
+// sheetProto.addRule
+// sheetProto.deleteRule
+// sheetProto.insertRule
+// sheetProto.removeRule
+// sheetProto.replace
+// sheetProto.media
+// //sheetProto.disabled ??
+
+
+const elProto = HTMLElement.prototype
+elProto.style // ??
+elProto.setAttribute //  ??
+
+
+// document.adoptedStyleSheets
+
+
+const styleProto = CSSStyleDeclaration.prototype
+
+// styleProto.cssText
+// styleProto.getPropertyPriority
+// styleProto.getPropertyValue
+// //styleProto.item ??
+// styleProto.removeProperty
+// styleProto.setProperty

package/u2/old-stuff/css/onStyleSheet/test/include.css

@@ -0,0 +1,19 @@
+
+@charset "UTF-8";
+body {
+    --background:blue;
+
+    --test:blue
+    asdf
+}
+
+
+{}
+
+a{
+    background: black;
+}
+
+@me🎆dia {
+    background: black;
+}

package/u2/old-stuff/css/onStyleSheet/test/style-has-include.css

@@ -0,0 +1,6 @@
+@import url(./include.css);
+
+body {
+    x:y;
+    background:transparent;
+}

package/u2/old-stuff/css/onStyleSheet/test/style-no-include.css

@@ -0,0 +1,3 @@
+body {
+    background:transparent;
+}

package/u2/old-stuff/css/onStyleSheet/test/test.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang=en>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>u2-ico Test</title>
+
+        <link rel=stylesheet href="./style-has-include.css" id=aLink media=screen>
+        <link rel=stylesheet href="./style-no-include.css" >
+
+        <link rel=stylesheet href="../../../css/norm/norm.css" crossorigin>
+        <link rel=stylesheet href="../../../css/base/base.css">
+
+    </head>
+<body>
+
+<style id=aStyle>
+.style {
+    before:x;
+}
+</style>
+
+<script type=module>
+import '../mod.js';
+
+setTimeout(function(){
+
+    console.assert(aLink.sheet.media.item(0) === 'screen', {errorMsg: 'sheet has the mediaList of its element'});
+
+
+    console.log('dynamic add <link rel=stylesheet> elements')
+    placeholder.innerHTML =
+        `<link rel=stylesheet href="./style-has-include.css">
+         <link rel=stylesheet href="./style-no-include.css">`;
+},3000)
+</script>
+
+
+<style>
+.style {
+    after:x;
+}
+</style>
+
+
+
+<div id=placeholder>
+</div>

package/u2/old-stuff/css/parser/mod.js

@@ -0,0 +1,182 @@
+// similiar:
+// https://github.com/anatoo/fnparse.js
+// https://github.com/francisrstokes/arcsecond
+
+
+export function stringIterator(string) {
+    let pos = {line:0, column:0, position:0};
+
+    return object({
+        pointer:0,
+        char:string[0],
+        async next(){
+            ++this.pointer;
+            this.char = string[this.pointer];
+
+            // ++pos.position;
+            // ++pos.column;
+            // if (this.char === "\n") { ++pos.line; pos.column = 0; }
+
+            return this.char !== undefined;
+        },
+        async at(pointer){
+            return string[pointer];
+        },
+        take(start, end) {
+            return string.slice(start, end);
+            /* // remove used part to save memory, only root consumers?
+            let part = string.slice(start, end);
+            string = string.substring(end);
+            this.pointer = 0;
+            return part;
+            */
+        },
+        /*
+        position(){
+            return pos;
+        }
+        */
+        //lookOut(offset) { return string[this.pointer+offset]; }, // char att offset relative to position
+    });
+}
+
+
+
+
+var errorConsumer = fnConsumer(async strIter=>{
+    await strIter.next();
+}, 'no expected');
+
+
+export async function tokenize(consumers, strIter, parent) { // startedAt needed?
+    var tokens = [];
+    let activeToken = null;
+
+    consumers.push(errorConsumer)
+
+    while (strIter.char !== undefined) {
+
+        let oldPos = strIter.pointer; // check if moved
+
+        for (let consumer of consumers) {
+            let consumed = await consumer(strIter);
+            if (consumed) {
+                activeToken = token(strIter, {...consumed, parent, prev:activeToken});
+                console.log(activeToken)
+                tokens.push(activeToken);
+                break;
+            }
+        }
+
+        if (oldPos === strIter.pointer) {
+            console.warn('strIter position not moved! zzz?');
+            await strIter.next();
+        }
+
+    }
+    return tokens;
+}
+function token(strIter, data){
+    var obj = Object.create(null);
+    Object.assign(obj, data);
+    obj.text = strIter.take(obj.start, obj.end);
+    return obj;
+}
+
+
+
+/* consumer generators */
+
+export function charsConsumer(chars, name) {
+    const set = new Set(chars);
+    return fnConsumer(async strIter=>{
+        while (set.has(strIter.char) &&  await strIter.next());
+    }, name??chars);
+}
+export function fnConsumer(fn, name) {
+    name ??= fn.name;
+    return async strIter=>{
+        let start = strIter.pointer;
+        var data = await fn(strIter);
+        if (start !== strIter.pointer) return Object.assign({name, start, end:strIter.pointer}, data);
+    }
+}
+export function startEndConsumer(start, end, escape, name){
+    name ??= start;
+    var startLen = start.length;
+    return fnConsumer(async function(strIter){
+        if (! await matchStart(strIter, start)) return;
+        for (let i=startLen; i>1; i--) await strIter.next();
+        while (await strIter.next()){
+
+            if (await strIter.at(strIter.pointer-1) === escape) continue; // only works as singel char end
+
+            if (await matchEnd(strIter, end)) {
+                await strIter.next(); // move to the next char
+                return;
+            }
+        }
+    }, name);
+}
+
+
+/* helpers */
+
+export async function matchStart(strIter, str){
+    var pos = 0;
+    while (str[pos] === await strIter.at(strIter.pointer + pos)) {
+        if (str[++pos] === undefined) return true;
+    }
+}
+export async function matchEnd(strIter, str){
+    let length = str.length-1;
+    var pos = length;
+    while (str[pos] === await strIter.at(strIter.pointer - (length-pos))) {
+        if (--pos === -1) return true;
+    }
+}
+
+
+
+export function object(obj){
+    return Object.setPrototypeOf(obj,null);
+}
+
+
+
+
+/*
+async function stringInterator(stream){
+    const reader = stream.getReader();
+    let result = '';
+    let streamDone = false;
+
+    async function read(){
+        let state = await reader.read();
+        streamDone = state.done;
+        obj.string += state.value;
+    }
+
+    const obj = object({
+        string: '',
+        position: -1,
+        async next(){
+            ++this.pointer;
+            if (this.string[this.pointer] === undefined) {
+                if (!streamDone) await read();
+                this.char = string[this.pointer];
+            }
+            return this.char !== undefined;
+        },
+        async at(position){
+            while(1) {
+                let char = this.string[position];
+                if (char !== undefined) return char;
+                if (streamDone) return false;
+                await read();
+            }
+        }
+    });
+    return obj;
+}
+*/

package/u2/old-stuff/css/parser/parser_old/mod.js

@@ -0,0 +1,128 @@
+import { stringGenerator } from "./util.js";
+
+
+
+const tokens = {
+    anyChar: {
+        match:(char)=>{
+            return true
+        }
+    },
+    whiteSpace(strGen){
+        return strGen.cha === ' ' || strGen.cha === "\n" || strGen.cha === "\t";
+    },
+}
+
+
+export function parse(str) {
+    const strGen = stringGenerator(str);
+    walkParser(stylesheet, strGen)
+}
+
+function walkParser(parser, strGen){
+
+    let startOuter = strGen.position;
+    let endOuter = null;
+
+    if (parser.start) startOuter -= parser.start.length;
+
+    let char = strGen.current();
+    do {
+        if (parser.end && parser.end.match(char)) {
+            endOuter = strGen.position + 1;
+            break; // reached end
+        }
+        if (parser.contains) for (let subParser of parser.contains) {
+            if (subParser.start.match(char)) {
+                // todo: reset all subparser starts?
+                strGen.next()
+                walkParser(subParser, strGen); // continue in subParser if start matches
+            }
+        }
+    } while(char = strGen.next());
+
+    endOuter ??= strGen.position;
+
+    var outer = strGen.string.slice(startOuter, endOuter);
+    console.log('----' + parser.name + ': ---- ');
+    console.dir('`'+outer+'`');
+}
+
+
+const comment   = parser('comment',  '/*', [], '*/');
+const slComment = parser('comment',  '//', [], "\n");
+
+/*
+const comment = {
+    name:'comment'
+    start:'/*',
+    end:'* /',
+};
+const slComment = {
+    name:'slComment'
+    start:'//',
+    endBefore:"\n",
+}
+const dqString = {
+    name:'string double-quote'
+    start:'"',
+    end:'"',
+}
+*/
+
+
+
+const stringDEscape  = parser('string dq escape',  '\\', [],'"');
+const stringSEscape  = parser('string sq escape',  '\\', [],"'");
+//const stringD        = parser('string dq',  '"', [stringDEscape],'"');
+
+const stringD        = parser('string dq',  '"', ['\\"'],'"');
+const stringS        = parser('string sq',  "'", [stringSEscape],"'");
+
+const stylesheet  = parser('stylesheet',  '', [comment,slComment] );
+
+/*
+const comment  = parser('comment',  '/*', [], '* /');
+
+const stringDEscape  = parser('string dq escape',  '\\', [],'"');
+const stringSEscape  = parser('string sq escape',  '\\', [],"'");
+const stringD        = parser('string dq',  '"', [stringDEscape],'"');
+const stringS        = parser('string sq',  "'", [stringSEscape],"'");
+
+const block       = parser('block',       '{',  [stringS],'}');
+const selector    = parser('selector',    '.',  [comment], '{');
+const declaration = parser('declaration', '',   [block,stringS,stringD],';');
+const rule        = parser('rule',        '',   [selector, declaration, comment], '}');
+const atStatement = parser('at-statment', '@',  [stringD, stringS], ';');
+const atBlock     = parser('at-block',    '@',  [stringS, block],'}');
+const stylesheet  = parser('stylesheet',  '',   [comment, atStatement, atBlock, rule], '}');
+*/
+
+
+
+
+/*
+stylesheetRule = {
+    contains:[whiteSpace,atRule,rule],
+}
+*/
+function parser(name, start, contains, end){
+    if (!contains) contains = [];
+    if (!Array.isArray(contains)) contains = [contains];
+    return {
+        name,
+        contains,
+        start: toToken(start),
+        end: end&&toToken(end),
+    }
+}
+
+
+function toToken(token){
+    if (token === '') return tokens.anyChar;
+    return stringGenerator(token);
+    if (typeof token === 'string' && token.lenght > 1) {
+        return stringGenerator(token);
+    }
+    if (token.match) return token;
+}

package/u2/old-stuff/css/parser/parser_old/test.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang=en>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>parser</title>
+
+
+        <script="./mod.js"></script>
+    </head>
+<body>
+
+
+<script type=module>
+
+import {parse} from './mod.js';
+
+// parse(
+// `@import \'xy\\\'z\';
+// .a /* test */ {
+//     b:x;
+//     a:var(--test);
+// }
+// /* x */
+// hallo welt
+// /*  * / */
+// test`
+// );
+
+let str = `a /* /* \\*/ b
+//sl
+x
+`
+console.log(str)
+
+parse(str);
+
+
+
+
+
+
+</script>