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

Fixed a bug relating to custom-elements's first vnode where render(){ return <div class="example" /> } would set the example-class on the custom-element itself.

Browse Source 
Added support for className and style similar to react
Cleaned up some comments
Reworked how tests are built in order to add a new test "pdf" which was a small side-project where previous mentioned bug showed up, it's an example using HTML to create a PDF for printing
This commit is contained in:
Miel Truyen
2019-12-21 21:48:38 +01:00
parent 93fb6927ca
commit 4ca54727f1
56 changed files with 2397 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
tests/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>

18
tests/basic/index.jsx Normal file
View File

@@ -0,0 +1,18 @@
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 />));
/**
* Continuation suggestionss:
* - style-attribute untested
* - Want a way to toggle classes: <Host class={{'bq-checkbox': true, 'checked': this.isChecked}}> could do
* - Supporting fragments <>...</>?
*/

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

12
tests/basic/page.jsx Normal file
View File

@@ -0,0 +1,12 @@
import {defineElement, render, CustomElement} from "../../packages/csx";
@defineElement('example-page')
export class ExamplePage extends CustomElement{
connectedCallback() {
this.appendChild(render(
<div class="page">
<h1>This page is an example!</h1>
</div>
));
}
}