cerxes/csx
3
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

v0.0.8: Fixed issues with event-bindings

Browse Source
This commit is contained in:
Miel Truyen 2020-03-14 20:53:28 +01:00
parent a757ae37b3
commit de0dd21b8d
9 changed files with 241 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/csx/.npmignore
View File

@ -1,4 +1,5 @@
# Don't publish the src containing ESNext proposal's code. Only publish the bundled output in dist/ and the ES6-transpiled src from lib/
src/*
node_modules/*
rollup.config.js
yarn.lock

2
packages/csx/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@cerxes/csx",
"version": "0.0.7",
"version": "0.0.8",
"author": "Miel Truyen <miel.truyen@cerxes.net>",
"description": "CSX is a minimalistic UI-framework inspired by React+JSX for usage with WebComponents.",
"repository": {

7
packages/csx/src/vdom/renderers/nodetree.js
View File

@ -88,7 +88,12 @@ export const NodeTreeRenderer = {
if(!newVal){
host.removeEventListener(eventName, oldVal);
}else{
host.addEventListener(eventName, newVal);
if (oldVal && oldVal !== newVal){
host.removeEventListener(eventName, oldVal);
}
if(newVal !== oldVal){
host.addEventListener(eventName, newVal);
}
}
}else{
// Assumed to be just an attribute

3
tests/index.html
View File

@ -24,6 +24,9 @@
<li>
<a href="./todos-mvc/">Todos MVC</a>
</li>
<li>
<a href="./table/">Tables (arrow functions)</a>
</li>
</ul>
</body>
</html>

10
tests/table/index.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cerxes - CustomElements - SVG</title>
</head>
<body>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>

108
tests/table/index.jsx Normal file
View File

@ -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/>));

19
tests/table/index.scss Normal file
View File

@ -0,0 +1,19 @@
html{
width: 100%;
height: 100%;
}
body{
display: flex;
flex-direction: column;
overflow: auto;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.center-me{
align-self: center;
}

61
tests/table/table-component.jsx Normal file
View File

@ -0,0 +1,61 @@
import {CustomElement, defineElement, Host, prop, state} from "../../packages/csx";
import TableComponentStyle from "./table-component.scss";
let tableId = 0;
@defineElement("tripto-table")
export class TableComponent extends CustomElement {
#columnDefinitions;
@prop()
set columns(value) {
this.#columnDefinitions = value;
}
@state() data;
@prop()
set data(value) {
this.data = value;
}
#tableId = tableId++;
render() {
console.log(`Table render at for ${this.data?.length??0} rows: ${Date.now()}`);
return (
<Host>
<style>{TableComponentStyle}</style>
<style>
{this.#columnDefinitions?.map((col, idx) => (
`#table_${this.#tableId} .cell.cell_${idx} {` +
` flex: ${(col.size ? (`0 0 ${col.size}px`) : `1`)};` +
`}`
))}
</style>
<section className="table" id={`table_${this.#tableId}`}>
<header>
<div className="row">
{this.#columnDefinitions.map((col, idx) => (
<div className={`cell cell_${idx}`}>
{col.headerRender()}
</div>
))}
</div>
</header>
<main>
{this.data?.map(dataRow => (
<div className="row">
{this.#columnDefinitions.map((col, idx) => (
<div className={`cell cell_${idx}`}>
{col.render(dataRow)}
</div>
))}
</div>
))}
</main>
</section>
</Host>
);
}
}

32
tests/table/table-component.scss Normal file
View File

@ -0,0 +1,32 @@
.table {
--box-color: #a0a0a0;
--primary-color: #5f74ff;
--table-background: #e4e4f0;
--box-border: 1px solid #7d7d7d;
border: var(--box-border);
display: block;
header {
color: var(--primary-color);
}
header > .row,
main > .row {
background: var(--table-background);
display: flex;
width: 100%;
line-height: 3em;
border-bottom: var(--box-border);
.cell {
padding: 0 15px;
}
}
main > .row {
&:last-child {
border-bottom: 0;
}
}
}