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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/csx-custom-elements/src/custom-element/custom-element.js
View File

@ -0,0 +1,8 @@
/**
* This CustomElement class is to avoid having to do an ugly workaround in every custom-element:
* Which would be replacing 'HTMLElement' with '(class extends HTMLElement{})'
*
* Also, it is a good starting point for implementing render() functionality, listening to props, state changes, events and whatnot (use decorators)
*/
export class CustomElement extends HTMLElement {}

18
packages/csx-custom-elements/src/custom-element/define-element.js Normal file
View File

@ -0,0 +1,18 @@
/**
* The decorators proposal has changed since @babel implemented it. This code will need to change at some point...
*/
export function defineElement(tagName, options) {
return function decorator(target){
// Register the tagName as a custom-element with the browser
window.customElements.define(tagName, target, options);
// Define the chosen tagName on the class itself so our vdom.render-function knows what DOM-Element to create
Object.defineProperty(target, 'tagName', {
value: tagName,
writable: false,
enumerable: false,
configurable: false
});
}
}

3
packages/csx-custom-elements/src/custom-element/index.js
View File

@ -1 +1,2 @@
export * from './custom-element'
export * from './define-element';
export * from './custom-element';

4
packages/csx-custom-elements/src/vdom/render.js
View File

@ -30,12 +30,12 @@ export function render(vnode, opts = {}) {
} = opts;
if(VNODE_EXCLUDE[vnode]) return undefined;
console.log(vnode);
if(vnode instanceof Object){
// Type
if(!host) host = document.createElement(vnode.type);
let tagName = vnode.type instanceof Object? vnode.type.tagName : vnode.type;
if(!host) host = document.createElement(tagName);
// Props
if (vnode.props) {

51
rollup.config.js
View File

@ -9,7 +9,53 @@ import sass from "rollup-plugin-sass";
// `npm run dev` -> `production` is false
const production = !process.env.ROLLUP_WATCH;
export default {
export default [
// Basic test
{
input: 'test/basic/index.jsx',
output: {
file: 'public/basic/index.js',
format: 'iife', // immediately-invoked function expression — suitable for <script> tags
sourcemap: true
},
plugins: [
sass(),
babel(), // babel
resolve(), // node_modules
commonjs(), // CJS-modules
production && terser(), // minify, but only in production
copy({
targets: [
{ src: 'test/basic/index.html', dest: 'public/basic' }
],
copyOnce: true
})
]
},
// Todos MVC
{
input: 'test/todos-mvc/index.jsx',
output: {
file: 'public/todos-mvc/index.js',
format: 'iife', // immediately-invoked function expression — suitable for <script> tags
sourcemap: true
},
plugins: [
sass(),
babel(), // babel
resolve(), // node_modules
commonjs(), // CJS-modules
production && terser(), // minify, but only in production
copy({
targets: [
{ src: 'test/todos-mvc/index.html', dest: 'public/todos-mvc' }
],
copyOnce: true
})
]
},
// Tests index-page
{
input: 'test/index.jsx',
output: {
file: 'public/index.js',
@ -29,4 +75,5 @@ export default {
copyOnce: true
})
]
};
}
];

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>
));
}
}

17
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>
<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;
}