Multiple test-projects

packages/csx-custom-elements/src/custom-element/custom-element.js

@@ -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 {}
+

packages/csx-custom-elements/src/custom-element/define-element.js

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

packages/csx-custom-elements/src/custom-element/index.js

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

packages/csx-custom-elements/src/vdom/render.js

@@ -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) {

rollup.config.js

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

test/basic/index.html

@@ -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>

test/basic/index.jsx

@@ -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
+ */

test/basic/page.js

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

test/index.html

@@ -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>

test/index.jsx

@@ -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...) **/

test/todos-mvc/index.html

@@ -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>

test/todos-mvc/index.jsx

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

test/todos-mvc/index.scss

@@ -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;
+}