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

Multiple test-projects

Browse Source
This commit is contained in:
Miel Truyen
2019-10-22 19:21:01 +02:00
parent afdffe57f9
commit 31cfda50f5
14 changed files with 205 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

30
test/basic/index.jsx Normal file
View File

@@ -0,0 +1,30 @@
import {render} from "../../packages/csx-custom-elements";
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 />));
/**
* Findings:
* - JSX does not allow dot-notation in attributes: language error
* - Current code lower-cases attributes that result: this a limitation of setAttribute
* - React uses on<EventName> to capture events and the IDE auto-suggests using this (can we generalize this approach for customEvents?)
*/
/**
* Continuation suggestionss:
* - ref={...} does not work yet
* - style-attribute untested
* - Want a way to toggle classes: <Host class={{'bq-checkbox': true, 'checked': this.isChecked}}> could do
* - Need to support update an existing DOM-tree to a VNode-tree
* - Need to support the key-attribute for lists (linking with previous to have an idea how to update DOM-tree efficiently, are we going atomico/react/prect style diffing with a Virtual-DOM?)
* - <Host> and <ShadowDom> special handlers
* - Supporting fragments <>...</>?
* - Try working towards a simple ToDo-MVC application
*/

0
test/index.scss → test/basic/index.scss
View File

12
test/basic/page.js Normal file
View File

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

21
test/index.html
View File

@@ -2,9 +2,22 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cerxes - CustomElements</title>
<title>CSX - CE Tests</title>
<style type="text/css">
html{ width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-items:center; }
body{ flex: 1 1 auto;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-items:center; }
ul { list-style-type: none;font-size: 1.5em; }
li{ padding: .5em; }
</style>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
<body>
<ul>
<li>
<a href="./basic/">Basic testing</a>
</li>
<li>
<a href="./todos-mvc/">Todos MVC</a>
</li>
</ul>
</body>
</html>

28
test/index.jsx
View File

@@ -1,27 +1 @@
import {render} from "../packages/csx-custom-elements/lib";
import style from "./index.scss";
document.body.appendChild(render(<style>{style}</style>));
document.body.appendChild(render(<div class="center-me" iCanDoUpperCaseAttrs={ "yes" }>
<h1>I am a title!</h1>
</div>));
/**
* Findings:
* - JSX does not allow dot-notation in attributes: language error
* - Current code lower-cases attributes that result: this a limitation of setAttribute
* - React uses on<EventName> to capture events and the IDE auto-suggests using this (can we generalize this approach for customEvents?)
*/
/**
* Continuation suggestionss:
* - ref={...} does not work yet
* - style-attribute untested
* - Want a way to toggle classes: <Host class={{'bq-checkbox': true, 'checked': this.isChecked}}> could do
* - Need to support update an existing DOM-tree to a VNode-tree
* - Need to support the key-attribute for lists (linking with previous to have an idea how to update DOM-tree efficiently, are we going atomico/react/prect style diffing with a Virtual-DOM?)
* - <Host> and <ShadowDom> special handlers
* - Supporting fragments <>...</>?
* - Try working towards a simple ToDo-MVC application
*/
/** I don't do nothing! (but it might later...) **/

10
test/todos-mvc/index.html Normal file
View File

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

9
test/todos-mvc/index.jsx Normal file
View File

@@ -0,0 +1,9 @@
import {render} from "../../packages/csx-custom-elements";
import style from "./index.scss";
// Replace this with an example implementation of the Todos-MVC app
// look for inspiration here: https://github.com/shprink/web-components-todo
document.body.appendChild(render(<style>{style}</style>));
document.body.appendChild(render(<div class="center-me">
<h1>Todos MVC</h1>
</div>));

19
test/todos-mvc/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;
}