v0.0.15: Function components

2020-06-09 00:25:27 +02:00
parent 0da07549e7
commit 15506fe890
12 changed files with 1266 additions and 577 deletions
--- a/examples/index.html
+++ b/examples/index.html
@@ -30,6 +30,9 @@
    <li>
        <a href="./table-2/">Tables 2 (Key-prop)</a>
    </li>
+    <li>
+        <a href="./inheritance/">Inheritance</a>
+    </li>
 </ul>
 </body>
 </html>
--- a/examples/inheritance/index.html
+++ b/examples/inheritance/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Cerxes - CustomElements - SVG</title>
+</head>
+    <body>
+        <script type="text/javascript" src="./index.js"></script>
+    </body>
+</html>
--- a/examples/inheritance/index.jsx
+++ b/examples/inheritance/index.jsx
@@ -0,0 +1,34 @@
+import {render, defineElement, prop, CustomElement} from "../../packages/csx";
+
+@defineElement('base-component-2')
+class BaseComponent extends CustomElement{
+    @prop()
+    name;
+    
+    render(){
+        return (
+            <div>
+                <label>Value is</label>
+                <div>{this.name}</div>
+            </div>
+        )
+    }
+}
+@defineElement('extended-component-2')
+class ExtendedComponent extends BaseComponent{
+    @prop()
+    set name(value){
+        super.name = `Hi my name is ${value??""}`;
+    }
+    get name(){
+        return super.name;
+    }
+}
+
+let test = render(<ExtendedComponent name="John Johnson"/>);
+
+document.body.appendChild(test);
+
+
+
+