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