v0.0.8: Fixed issues with event-bindings

tests/table/index.jsx

@@ -0,0 +1,108 @@
+import {render, CustomElement, defineElement, Host, prop, state} from "../../packages/csx";
+import style from "./index.scss";
+import {TableComponent} from "./table-component";
+
+@defineElement("table-tester")
+class TableTester extends CustomElement{
+    
+    
+    /**
+     *
+     * @type {({[headerRender]: (function(): string), render: (function(User): *), [size]: number})[]}
+     */
+    #columnDefinitions = [
+        {
+            headerRender: () => "Id",
+            render: (u) => u.userId,
+            size: 110
+        },
+        {
+            headerRender: () => "Email",
+            render: (u) => u.identity?.email,
+        },
+        {
+            headerRender: () => "FirstName",
+            render: (u) => u.identity?.firstName,
+            size: 160
+        },
+        {
+            headerRender: () => "LastName",
+            render: (u) => u.identity?.lastName,
+            size: 160
+        },
+        {
+            headerRender: () => "...",
+            render: (u) => {
+                let d = new Date();
+                return (<button onClick={(ev) => this.testMe(ev, u, d)}>test me</button>)
+            },
+            size: 110
+        },
+    ];
+    
+    @state()
+    users = [];
+    
+    render(){
+        
+        return <TableComponent
+                columns={this.#columnDefinitions}
+                data={this.users}
+        />
+    }
+    
+    connectedCallback() {
+        super.connectedCallback();
+        
+        setTimeout(()=>this.load(), 0);
+        setTimeout(()=>this.load(), 50);
+        setTimeout(()=>this.load(), 100);
+        setTimeout(()=>this.load(), 150);
+        setTimeout(()=>this.load(), 200);
+        setTimeout(()=>this.load(), 250);
+        
+        this.interval = setInterval(()=>this.load(), 3000);
+    }
+    
+    interval;
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if(this.interval) {
+            clearInterval(this.interval);
+        }
+    }
+    
+    load(){
+        let users = [];
+        
+        let rndFirstNames = ['Loes', 'Johnny', 'Maria', 'Jezus', 'Philippe', 'Filip', 'Annie'];
+        let rndLastNames = ['Peeters', 'Wachters', 'Jannsens', 'De Schaetzen', 'Becks', 'Konings', 'De Clerk'];
+        
+        for(let i = 0; i < 5; ++i){
+            let first = rndFirstNames[Math.floor(rndFirstNames.length*Math.random())];
+            let last = rndLastNames[Math.floor(rndLastNames.length*Math.random())];
+            users.push({
+                userId: (Math.random()*99999).toString(36).slice(-6).toUpperCase(),
+                identity: {
+                    firstName: first,
+                    lastName: last,
+                    email: `${first}.${last}@example.com`.toLocaleLowerCase()
+                }
+            })
+        }
+        
+        this.users = users;
+    }
+    
+    lastClear = new Date();
+    testMe = (ev, u, d)=>{
+        if((new Date()).getTime() - this.lastClear.getTime() > 20){
+            console.log("\n\n");
+            this.lastClear = new Date();
+        }
+        console.log("I should only show up once per click:", d.getTime());
+    }
+}
+
+document.body.appendChild(render(<style>{style}</style>));
+document.body.appendChild(render(<TableTester/>));