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

v0.0.11: Added unit-tests, solved the key={...} problem, updated the build/watch configuration of CSX to be able to build minified and non-minified bundle outputs, as well as a CJS version of lib/ (for consuming in Node-environment, like Jest). The previous tests were renamed to examples, and should still need to be updated.

Browse Source
This commit is contained in:
Miel Truyen
2020-04-14 11:54:30 +02:00
parent 05f0e66a42
commit b95e5506d2
121 changed files with 3406 additions and 4929 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/basic/index.html Normal file
View File

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

32
examples/basic/index.jsx Normal file
View File

@@ -0,0 +1,32 @@
import {render} from "../../packages/csx";
import style from "./index.scss";
import {ExamplePage} from "./page";
document.body.appendChild(render(<style>{style}</style>));
document.body.appendChild(render(<div class="center-me" iCanDoUpperCaseAttrs={ "yes" }>
<h1>I am a title!</h1>
</div>));
//document.body.appendChild(render(<example-page />));
document.body.appendChild(render(<ExamplePage pageWidth={200} />));
/**
* Continuation suggestionss:
* - style-attribute untested
* - Want a way to toggle classes: <Host class={{'bq-checkbox': true, 'checked': this.isChecked}}> could do
* - Supporting fragments <>...</>?
*/
// Private vars are visible, because of loose mode, not desirable...
class PrivTest{
#privatevar = 1;
get someVar(){
console.log(Object.getOwnPropertyDescriptors(this));
return this.#privatevar;
}
}
let a = new PrivTest();
console.log(a);
console.log(a.someVar);
let preRenderedText = render("I can prerender text-nodes");
document.body.appendChild(render(preRenderedText));

19
examples/basic/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;
}

32
examples/basic/page.jsx Normal file
View File

@@ -0,0 +1,32 @@
import {defineElement, render, CustomElement, prop, state} from "../../packages/csx";
@defineElement('example-page')
export class ExamplePage extends CustomElement{
@prop({reflect: true, attr: 'page-width'})
set pageWidth(value){
if(value!==this.#pageWidth){
this.#pageWidth = value;
}
}
get pageWidth(){
return this.#pageWidth;
}
#pageWidth = undefined;
render(){
return <div className="page" style={{width: `${this.pageWidth}px`}}>
<h1>This page is an example!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit enim, lacinia in pellentesque ut, fermentum quis risus. Vivamus condimentum turpis ac mattis blandit. Ut scelerisque nulla suscipit, rhoncus justo eget, pulvinar ligula. Donec vel orci dolor. Etiam non neque non lorem venenatis tincidunt. Cras tristique mauris ut leo imperdiet, in bibendum elit ultricies. Morbi et felis sed arcu efficitur aliquam.<br/>
Nam ornare scelerisque vestibulum. In porta non risus a tristique. Donec tincidunt diam sed dictum iaculis. In faucibus placerat justo, ut pulvinar tortor hendrerit viverra. Aliquam erat volutpat. Quisque euismod leo at eros fringilla varius. Nam et vulputate nunc. Nunc mattis purus eu massa lacinia posuere.<br/>
In fermentum hendrerit purus non mollis. Duis vel leo nibh. Praesent at odio suscipit, consequat lorem quis, posuere lorem. Donec molestie sodales feugiat. Ut in nisi vel est luctus tristique non eget elit. Donec accumsan quam id scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu lacus convallis elit eleifend tristique id et sapien. Mauris cursus a enim ut scelerisque. Morbi auctor nisl sem, id dignissim lectus condimentum non. Ut tellus lacus, volutpat eget porttitor et, vulputate pharetra nunc. Donec nec ligula est. Donec eget odio tincidunt, laoreet mi sit amet, euismod odio. Donec vitae dignissim leo, nec ultricies quam.<br/>
Proin efficitur arcu sit amet congue commodo. Suspendisse non tristique libero. Maecenas tempor arcu ac felis posuere, eu gravida metus euismod. Vivamus hendrerit nisl id venenatis sodales. Phasellus pharetra arcu a arcu aliquam faucibus. Etiam sodales ligula nisl, sit amet posuere turpis ultricies id. Donec euismod nunc eros, at euismod neque tempor a. Nullam felis eros, imperdiet ac arcu id, lobortis lobortis tellus. Duis mollis sodales leo, et tincidunt enim pretium luctus.<br/>ulputate lorem.
</p>
</div>
}
connectedCallback() {
super.connectedCallback();
}
}