Initial version to monorepo-setup to start experimenting with, featuring a fork of @babel JSX-transformation, and a crude VDOM>DOM rendering-step. The Custom-Elements part is just a placeholder at this point but ready to be populated with base-classes and decorators.

2019-10-21 23:22:25 +02:00
commit 8ae591810a
23 changed files with 10101 additions and 0 deletions
--- a/test/.babelrc
+++ b/test/.babelrc
@@ -0,0 +1,23 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "node": "current"
+      }
+    }]
+  ],
+  "plugins": [
+    [ "@babel/plugin-proposal-decorators", { "legacy": true }],
+    [ "@babel/plugin-proposal-class-properties", { "loose":  true } ],
+    [ "@babel/plugin-proposal-private-methods", {"loose":  true } ],
+    [ "@babel/plugin-proposal-optional-chaining" ],
+    [ "@babel/plugin-proposal-nullish-coalescing-operator" ],
+    [ "@babel/plugin-proposal-export-namespace-from" ],
+    [ "@babel/plugin-proposal-export-default-from" ],
+    [ "../packages/babel-plugin-transform-csx-jsx/dist", {
+        //"pragma": "render",
+        //"pragmaFrag": "render",
+        "throwIfNamespace": false
+    }]
+  ]
+}
--- a/test/index.html
+++ b/test/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>
--- a/test/index.jsx
+++ b/test/index.jsx
@@ -0,0 +1,28 @@
+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: to be investigated further... is 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?)
+ *  - Nothing stops us from using
+ */
+
+/**
+ * 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
+ */
--- a/test/index.scss
+++ b/test/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;
+}