Merge pull request #13 from mbasso/webcomponents

Support WebComponents and improve JS APIs
mbasso · Jan 5, 2018 · ddf9810 · ddf9810
2 parents 0170899 + 6555aa8
commit ddf9810
Show file tree

Hide file tree

Showing 72 changed files with 1,639 additions and 218 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,6 +1,7 @@
 {
   "presets": ["es2015", "stage-0"],
   "plugins": [
+    "macros",
     "dynamic-import-webpack",
     "transform-object-rest-spread",
     "transform-es3-member-expression-literals",

diff --git a/.travis.yml b/.travis.yml
@@ -3,6 +3,7 @@ node_js:
   - "6"
   - "7"
   - "8"
+  - "9"
 install: true
 script:
   - npm install --ignore-scripts

diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ At the beginning asm-dom is born from the idea to test the powerful of WebAssemb
 
 ## Inline Example
 
-```c++
+```
 #include "asm-dom.hpp"
 
 using namespace asmdom;
@@ -42,34 +42,18 @@ int main() {
   Config config = Config();
   init(config);
 
-  VNode* vnode = h("div",
-    Data(
-      Callbacks {
-        {"onclick", [](emscripten::val e) -> bool {
-          emscripten::val::global("console").call<void>("log", emscripten::val("clicked"));
-          return true;
-        }}
-      }
-    ),
-    Children {
-      h("span",
-        Data(
-          Attrs {
-            {"style", "font-weight: bold"}
-          }
-        ),
-        std::string("This is bold")
-      ),
-      h(" and this is just normal text", true),
-      h("a",
-        Data(
-          Attrs {
-            {"href", "/foo"}
-          }
-        ),
-        std::string("I'll take you places!")
-      )
-    }
+  // asm-dom can be used with a JSX like syntax thanks to gccx
+  VNode* vnode = (
+    <div
+      onclick={[](emscripten::val e) -> bool {
+        emscripten::val::global("console").call<void>("log", emscripten::val("clicked"));
+        return true;
+      }}
+    >
+      <span style="font-weight: bold">This is bold</span>
+      and this is just normal text
+      <a href="/foo">I'll take you places!</a>
+    </div>
   );
 
   // Patch into empty DOM element – this modifies the DOM as a side effect
@@ -81,6 +65,7 @@ int main() {
     vnode
   );
 
+  // without gccx
   VNode* newVnode = h("div",
     Data(
       Callbacks {

diff --git a/compiled/asm-dom.a b/compiled/asm-dom.a
diff --git a/compiled/asm-dom.bc b/compiled/asm-dom.bc
diff --git a/compiled/asm-dom.o b/compiled/asm-dom.o
diff --git a/compiled/asmjs/asm-dom.asm.js b/compiled/asmjs/asm-dom.asm.js
diff --git a/compiled/wasm/asm-dom.wasm b/compiled/wasm/asm-dom.wasm
diff --git a/cpp/Diff/diff.cpp b/cpp/Diff/diff.cpp
@@ -59,13 +59,21 @@ namespace asmdom {
 
 		emscripten::val elm = emscripten::val::global("window")["asmDomHelpers"]["nodes"][vnode->elm];
 
+		EM_ASM_({
+			window['asmDomHelpers']['nodes'][$0]['asmDomRaws'] = [];
+		}, vnode->elm);
+
 		for (auto& it : oldVnode->data.props) {
 			if (!vnode->data.props.count(it.first)) {
 				elm.set(it.first.c_str(), emscripten::val::undefined());
 			}
 		}
 
 		for (auto& it : vnode->data.props) {
+			EM_ASM_({
+				window['asmDomHelpers']['nodes'][$0]['asmDomRaws'].push(Module['UTF8ToString']($1));
+			}, vnode->elm, it.first.c_str());
+
 			if (
 				!oldVnode->data.props.count(it.first) ||
 				!it.second.strictlyEquals(oldVnode->data.props.at(it.first)) ||
@@ -82,25 +90,42 @@ namespace asmdom {
 	void diffCallbacks(VNode* __restrict__ const oldVnode, VNode* __restrict__ const vnode) {
 		if (oldVnode->data.callbacks.empty() && vnode->data.callbacks.empty()) return;
 
-		EM_ASM_({
-			window['asmDomHelpers']['nodes'][$0]['asmDomRaws'] = [];
-		}, vnode->elm);
-
 		for (auto& it : oldVnode->data.callbacks) {
 			if (!vnode->data.callbacks.count(it.first)) {
 				EM_ASM_({
-					window['asmDomHelpers']['nodes'][$0][Module['UTF8ToString']($1)] = undefined;
+					var key = Module['UTF8ToString']($1).replace(/^on/, "");
+					var elm = window['asmDomHelpers']['nodes'][$0];
+					elm.removeEventListener(
+						key,
+						window['asmDomHelpers']['eventProxy'],
+						false
+					);
+					delete elm['asmDomEvents'][key];
 				}, vnode->elm, it.first.c_str());
 			}
 		}
 
+		EM_ASM_({
+			var elm = window['asmDomHelpers']['nodes'][$0];
+			elm.asmDomVNode = $1;
+			if (elm['asmDomEvents'] === undefined) {
+				elm['asmDomEvents'] = {};
+			}
+		}, vnode->elm, reinterpret_cast<std::uintptr_t>(vnode));
+
 		for (auto& it : vnode->data.callbacks) {
-			EM_ASM_({
-				var key = Module['UTF8ToString']($2);
-				window['asmDomHelpers']['nodes'][$1][key] =
-					window['asmDomHelpers']['functionCallback']($0, key);
-				window['asmDomHelpers']['nodes'][$1]['asmDomRaws'].push(key);
-			}, reinterpret_cast<std::uintptr_t>(vnode), vnode->elm, it.first.c_str());
+			if (!oldVnode->data.callbacks.count(it.first)) {
+				EM_ASM_({
+					var key = Module['UTF8ToString']($1).replace(/^on/, "");
+					var elm = window['asmDomHelpers']['nodes'][$0];
+					elm.addEventListener(
+						key,
+						window['asmDomHelpers']['eventProxy'],
+						false
+					);
+					elm['asmDomEvents'][key] = window['asmDomHelpers']['eventProxy'];
+				}, vnode->elm, it.first.c_str());
+			}
 		}
 	};
 

diff --git a/cpp/Init/init.cpp b/cpp/Init/init.cpp
@@ -12,10 +12,8 @@ namespace asmdom {
 		#ifndef ASMDOM_JS_SIDE
 
 			EM_ASM(
-				window['asmDomHelpers']['functionCallback'] = function(vnode, callback) {
-					return function(event) {
-						return Module['functionCallback'](vnode, callback, event);
-					};
+				window['asmDomHelpers']['eventProxy'] = function(e) {
+					return Module['functionCallback'](this.asmDomVNode, e.type, e)
 				};
 			);
 

diff --git a/cpp/Patch/patch.cpp b/cpp/Patch/patch.cpp
@@ -201,14 +201,12 @@ namespace asmdom {
 				}
 			}
 		}
-		if (oldStartIdx > oldEndIdx) {
-			if (newEndIdx + 1 <= newCh.size() - 1) {
-				addVNodes(parentElm, newCh[newEndIdx+1]->elm, newCh, newStartIdx, newEndIdx);
+		if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
+			if (oldStartIdx > oldEndIdx) {
+				addVNodes(parentElm, newEndIdx + 1 <= newCh.size() - 1 ? newCh[newEndIdx+1]->elm : 0, newCh, newStartIdx, newEndIdx);
 			} else {
-				addVNodes(parentElm, 0, newCh, newStartIdx, newEndIdx);
+				removeVNodes(oldCh, oldStartIdx, oldEndIdx);
 			}
-		} else if (newStartIdx > newEndIdx) {
-			removeVNodes(oldCh, oldStartIdx, oldEndIdx);
 		}
 		delete oldKeyToIdx;
 		oldKeyToIdx = NULL;

diff --git a/cpp/VNode/VNode.cpp b/cpp/VNode/VNode.cpp
@@ -38,7 +38,12 @@ namespace asmdom {
 	#ifndef ASMDOM_JS_SIDE
 
 		emscripten::val functionCallback(const std::uintptr_t& vnode, const std::string& callback, emscripten::val event) {
-			return emscripten::val(reinterpret_cast<VNode*>(vnode)->data.callbacks[callback](event));
+			Callbacks cbs = reinterpret_cast<VNode*>(vnode)->data.callbacks;
+			std::string cb = callback;
+			if (!cbs.count(callback)) {
+				cb = "on" + cb;
+			}
+			return emscripten::val(cbs[cb](event));
 		};
 
 		EMSCRIPTEN_BINDINGS(function_callback) {

diff --git a/cpp/asm-dom.js b/cpp/asm-dom.js
diff --git a/cpp/domRecycler.js b/cpp/domRecycler.js
@@ -60,11 +60,21 @@ var recycler = {
     i = node.attributes !== undefined ? node.attributes.length : 0;
     while (i--) {
       node.removeAttribute(node.attributes[i].name);
-    }if (node.asmDomRaws !== undefined && node.asmDomRaws.length > 0) {
+    }node.asmDomVNode = undefined;
+    if (node.asmDomRaws !== undefined) {
       node.asmDomRaws.forEach(function (raw) {
         node[raw] = undefined;
       });
-      node.asmDomRaws = [];
+      node.asmDomRaws = undefined;
+    }
+    if (node.asmDomEvents !== undefined) {
+      var keys = Object.keys(node.asmDomEvents);
+      i = keys.length;
+      // eslint-disable-next-line
+      while (i--) {
+        node.removeEventListener(keys[i], node.asmDomEvents[keys[i]], false);
+      }
+      node.asmDomEvents = undefined;
     }
     if (node.textContent !== null && node.textContent !== '') {
       node.textContent = '';