feat: all vnodes have owner components (#1517)

marko-js · Feb 27, 2020 · cb42609 · cb42609
1 parent 78c565c
commit cb42609
Show file tree

Hide file tree

Showing 29 changed files with 68 additions and 62 deletions.
diff --git a/packages/marko/src/compiler/ast/Text/vdom/TextVDOM.js b/packages/marko/src/compiler/ast/Text/vdom/TextVDOM.js
@@ -58,6 +58,7 @@ class TextVDOM extends Node {
     let builder = writer.builder;
     let args = this.arguments;
     let escape = this.escape;
+    let isStatic = this.isStatic;
 
     var funcName = escape ? "t" : "h";
 
@@ -76,6 +77,10 @@ class TextVDOM extends Node {
         writer.write(arg);
       }
 
+      if (!isStatic) {
+        writer.write(", component");
+      }
+
       writer.write(")");
     }
 

diff --git a/packages/marko/src/core-tags/core/html-comment-tag.js b/packages/marko/src/core-tags/core/html-comment-tag.js
@@ -11,7 +11,8 @@ module.exports = function codeGenerator(elNode, codegen) {
     [
       Array.from(body.slice(1)).reduce((expr, current) => {
         return builder.binaryExpression(expr, "+", current.argument);
-      }, body[0].argument)
+      }, body[0].argument),
+      builder.identifier("component")
     ]
   );
 };
diff --git a/packages/marko/src/runtime/vdom/AsyncVDOMBuilder.js b/packages/marko/src/runtime/vdom/AsyncVDOMBuilder.js
@@ -116,32 +116,36 @@ var proto = (AsyncVDOMBuilder.prototype = {
     return this;
   },
 
-  text: function(text) {
+  text: function(text, ownerComponent) {
     var type = typeof text;
 
     if (type != "string") {
       if (text == null) {
         return;
       } else if (type === "object") {
         if (text.toHTML) {
-          return this.h(text.toHTML());
+          return this.h(text.toHTML(), ownerComponent);
         }
       }
 
       text = text.toString();
     }
 
-    this.___parent.___appendChild(new VText(text));
+    this.___parent.___appendChild(new VText(text, ownerComponent));
     return this;
   },
 
-  comment: function(comment) {
-    return this.node(new VComment(comment));
+  comment: function(comment, ownerComponent) {
+    return this.node(new VComment(comment, ownerComponent));
   },
 
-  html: function(html) {
+  html: function(html, ownerComponent) {
     if (html != null) {
-      var vdomNode = virtualizeHTML(html, this.___document || document);
+      var vdomNode = virtualizeHTML(
+        html,
+        this.___document || document,
+        ownerComponent
+      );
       this.node(vdomNode);
     }
 

diff --git a/packages/marko/src/runtime/vdom/VComment.js b/packages/marko/src/runtime/vdom/VComment.js
@@ -1,8 +1,8 @@
 var VNode = require("./VNode");
 var inherit = require("raptor-util/inherit");
 
-function VComment(value) {
-  this.___VNode(-1 /* no children */);
+function VComment(value, ownerComponent) {
+  this.___VNode(-1 /* no children */, ownerComponent);
   this.___nodeValue = value;
 }
 

diff --git a/packages/marko/src/runtime/vdom/VComponent.js b/packages/marko/src/runtime/vdom/VComponent.js
@@ -2,10 +2,9 @@ var VNode = require("./VNode");
 var inherit = require("raptor-util/inherit");
 
 function VComponent(component, key, ownerComponent, preserve) {
-  this.___VNode(null /* childCount */);
+  this.___VNode(null /* childCount */, ownerComponent);
   this.___key = key;
   this.___component = component;
-  this.___ownerComponent = ownerComponent;
   this.___preserve = preserve;
 }
 

diff --git a/packages/marko/src/runtime/vdom/VElement.js b/packages/marko/src/runtime/vdom/VElement.js
@@ -93,7 +93,7 @@ function VElement(
   flags,
   props
 ) {
-  this.___VNode(childCount);
+  this.___VNode(childCount, ownerComponent);
 
   var constId;
 
@@ -103,7 +103,6 @@ function VElement(
 
   this.___key = key;
   this.___flags = flags || 0;
-  this.___ownerComponent = ownerComponent;
   this.___attributes = attrs || EMPTY_OBJECT;
   this.___properties = props || EMPTY_OBJECT;
   this.___nodeName = tagName;
@@ -244,7 +243,7 @@ VElement.___removePreservedAttributes = function(attrs) {
   return attrs;
 };
 
-function virtualizeElement(node, virtualizeChildNodes) {
+function virtualizeElement(node, virtualizeChildNodes, ownerComponent) {
   var attributes = node.attributes;
   var attrCount = attributes.length;
 
@@ -276,7 +275,7 @@ function virtualizeElement(node, virtualizeChildNodes) {
     tagName,
     attrs,
     null /*key*/,
-    null /*ownerComponent*/,
+    ownerComponent,
     0 /*child count*/,
     0 /*flags*/,
     null /*props*/
@@ -285,7 +284,7 @@ function virtualizeElement(node, virtualizeChildNodes) {
   if (vdomEl.___nodeName === "textarea") {
     vdomEl.___valueInternal = node.value;
   } else if (virtualizeChildNodes) {
-    virtualizeChildNodes(node, vdomEl);
+    virtualizeChildNodes(node, vdomEl, ownerComponent);
   }
 
   return vdomEl;

diff --git a/packages/marko/src/runtime/vdom/VFragment.js b/packages/marko/src/runtime/vdom/VFragment.js
@@ -6,9 +6,8 @@ var inherit = require("raptor-util/inherit");
 var createFragmentNode = require("./morphdom/fragment").___createFragmentNode;
 
 function VFragment(key, ownerComponent, preserve) {
-  this.___VNode(null /* childCount */);
+  this.___VNode(null /* childCount */, ownerComponent);
   this.___key = key;
-  this.___ownerComponent = ownerComponent;
   this.___preserve = preserve;
 }
 

diff --git a/packages/marko/src/runtime/vdom/VNode.js b/packages/marko/src/runtime/vdom/VNode.js
@@ -2,17 +2,16 @@
 function VNode() {}
 
 VNode.prototype = {
-  ___VNode: function(finalChildCount) {
+  ___VNode: function(finalChildCount, ownerComponent) {
     this.___finalChildCount = finalChildCount;
     this.___childCount = 0;
     this.___firstChildInternal = null;
     this.___lastChild = null;
     this.___parentNode = null;
     this.___nextSiblingInternal = null;
+    this.___ownerComponent = ownerComponent;
   },
 
-  ___ownerComponent: null,
-
   get ___firstChild() {
     var firstChild = this.___firstChildInternal;
 

diff --git a/packages/marko/src/runtime/vdom/VText.js b/packages/marko/src/runtime/vdom/VText.js
@@ -1,8 +1,8 @@
 var VNode = require("./VNode");
 var inherit = require("raptor-util/inherit");
 
-function VText(value) {
-  this.___VNode(-1 /* no children */);
+function VText(value, ownerComponent) {
+  this.___VNode(-1 /* no children */, ownerComponent);
   this.___nodeValue = value;
 }
 

diff --git a/packages/marko/src/runtime/vdom/vdom.js b/packages/marko/src/runtime/vdom/vdom.js
@@ -9,32 +9,32 @@ var VFragment = require("./VFragment");
 var defaultDocument = typeof document != "undefined" && document;
 var specialHtmlRegexp = /[&<]/;
 
-function virtualizeChildNodes(node, vdomParent) {
+function virtualizeChildNodes(node, vdomParent, ownerComponent) {
   var curChild = node.firstChild;
   while (curChild) {
-    vdomParent.___appendChild(virtualize(curChild));
+    vdomParent.___appendChild(virtualize(curChild, ownerComponent));
     curChild = curChild.nextSibling;
   }
 }
 
-function virtualize(node) {
+function virtualize(node, ownerComponent) {
   switch (node.nodeType) {
     case 1:
-      return VElement.___virtualize(node, virtualizeChildNodes);
+      return VElement.___virtualize(node, virtualizeChildNodes, ownerComponent);
     case 3:
-      return new VText(node.nodeValue);
+      return new VText(node.nodeValue, ownerComponent);
     case 8:
-      return new VComment(node.nodeValue);
+      return new VComment(node.nodeValue, ownerComponent);
     case 11:
       var vdomDocFragment = new VDocumentFragment();
-      virtualizeChildNodes(node, vdomDocFragment);
+      virtualizeChildNodes(node, vdomDocFragment, ownerComponent);
       return vdomDocFragment;
   }
 }
 
-function virtualizeHTML(html, doc) {
+function virtualizeHTML(html, doc, ownerComponent) {
   if (!specialHtmlRegexp.test(html)) {
-    return new VText(html);
+    return new VText(html, ownerComponent);
   }
 
   var container = doc.createElement("body");
@@ -43,7 +43,7 @@ function virtualizeHTML(html, doc) {
 
   var curChild = container.firstChild;
   while (curChild) {
-    vdomFragment.___appendChild(virtualize(curChild));
+    vdomFragment.___appendChild(virtualize(curChild, ownerComponent));
     curChild = curChild.nextSibling;
   }
 

diff --git a/packages/marko/test/api-compiler/fixtures/compileFileForBrowser-callback.js/expected.js b/packages/marko/test/api-compiler/fixtures/compileFileForBrowser-callback.js/expected.js
@@ -14,7 +14,7 @@ function render(input, out, __component, component, state) {
 
   out.t("Hello ");
 
-  out.t(data.name);
+  out.t(data.name, component);
 
   out.t("!");
 }

diff --git a/packages/marko/test/api-compiler/fixtures/compileFileForBrowser.js/expected.js b/packages/marko/test/api-compiler/fixtures/compileFileForBrowser.js/expected.js
@@ -14,7 +14,7 @@ function render(input, out, __component, component, state) {
 
   out.t("Hello ");
 
-  out.t(data.name);
+  out.t(data.name, component);
 
   out.t("!");
 }

diff --git a/packages/marko/test/api-compiler/fixtures/compileForBrowser-callback.js/expected.js b/packages/marko/test/api-compiler/fixtures/compileForBrowser-callback.js/expected.js
@@ -14,7 +14,7 @@ function render(input, out, __component, component, state) {
 
   out.t("Hello ");
 
-  out.t(data.name);
+  out.t(data.name, component);
 
   out.t("!");
 }

diff --git a/packages/marko/test/api-compiler/fixtures/compileForBrowser.js/expected.js b/packages/marko/test/api-compiler/fixtures/compileForBrowser.js/expected.js
@@ -14,7 +14,7 @@ function render(input, out, __component, component, state) {
 
   out.t("Hello ");
 
-  out.t(data.name);
+  out.t(data.name, component);
 
   out.t("!");
 }

diff --git a/packages/marko/test/compiler/fixtures-vdom-deprecated/control-flow/expected.js b/packages/marko/test/compiler/fixtures-vdom-deprecated/control-flow/expected.js
@@ -26,7 +26,7 @@ function render(input, out, __component, component, state) {
 
   out.t("Hello ");
 
-  out.t(input.name);
+  out.t(input.name, component);
 
   out.t("! ");
 
@@ -39,7 +39,7 @@ function render(input, out, __component, component, state) {
       var $keyScope$0 = "[" + (($for$0++) + "]");
 
       out.e("li", null, "1" + $keyScope$0, component, 1)
-        .t(color);
+        .t(color, component);
     });
 
     out.ee();
@@ -56,7 +56,7 @@ function render(input, out, __component, component, state) {
       var $keyScope$1 = "[" + (($for$1++) + "]");
 
       out.e("li", null, "4" + $keyScope$1, component, 1)
-        .t(color);
+        .t(color, component);
     });
 
     out.ee();

diff --git a/packages/marko/test/compiler/fixtures-vdom/macro-in-loop/expected.js b/packages/marko/test/compiler/fixtures-vdom/macro-in-loop/expected.js
@@ -19,12 +19,12 @@ function render(input, out, __component, component, state) {
     var $keyScope$0 = "[" + (($for$0++) + "]");
 
     out.e("div", null, "0" + $keyScope$0, component, 1)
-      .t(i);
+      .t(i, component);
 
     function macro_renderTree(out, node) {
       out.t("Name: ");
 
-      out.t(node.name);
+      out.t(node.name, component);
 
       out.t(" Children: ");
 

diff --git a/packages/marko/test/compiler/fixtures-vdom/script-placeholders/expected.js b/packages/marko/test/compiler/fixtures-vdom/script-placeholders/expected.js
@@ -19,13 +19,13 @@ function render(input, out, __component, component, state) {
   var data = input;
 
   out.e("script", null, null, null, 1)
-    .t(("\n    var x = \"" + input.value) + "\";\n");
+    .t(("\n    var x = \"" + input.value) + "\";\n", component);
 
   out.e("script", null, null, null, 1)
-    .t(("\n    var x = " + JSON.stringify(input.value)) + "\n");
+    .t(("\n    var x = " + JSON.stringify(input.value)) + "\n", component);
 
   out.e("script", null, null, null, 1)
-    .t(("" + input.a) + input.b);
+    .t(("" + input.a) + input.b, component);
 
   out.n(marko_node0, component);
 }

diff --git a/packages/marko/test/compiler/fixtures-vdom/simple/expected.js b/packages/marko/test/compiler/fixtures-vdom/simple/expected.js
@@ -22,7 +22,7 @@ function render(input, out, __component, component, state) {
 
   out.t("Hello ");
 
-  out.t(input.name);
+  out.t(input.name, component);
 
   out.t("! ");
 
@@ -35,7 +35,7 @@ function render(input, out, __component, component, state) {
       var $keyScope$0 = "[" + (($for$0++) + "]");
 
       out.e("li", null, "1" + $keyScope$0, component, 1)
-        .t(color);
+        .t(color, component);
     });
 
     out.ee();

diff --git a/.../marko/test/components-compilation/fixtures-vdom/component-with-import-static/expected.js b/.../marko/test/components-compilation/fixtures-vdom/component-with-import-static/expected.js
@@ -19,7 +19,7 @@ function render(input, out, __component, component, state) {
   var data = input;
 
   out.e("div", null, "0", component, 1)
-    .t(counter++);
+    .t(counter++, component);
 }
 
 marko_template._ = marko_renderer(render, {

diff --git a/...ges/marko/test/vdom-compiler/fixtures-deprecated/attrs-dynamic-object-literal/expected.js b/...ges/marko/test/vdom-compiler/fixtures-deprecated/attrs-dynamic-object-literal/expected.js
@@ -18,7 +18,7 @@ function render(input, out, __component, component, state) {
       hello: "world"
     }), null, null, 3)
     .t("Hello ")
-    .t(name)
+    .t(name, component)
     .t("!");
 }
 

diff --git a/packages/marko/test/vdom-compiler/fixtures-deprecated/attrs-dynamic/expected.js b/packages/marko/test/vdom-compiler/fixtures-deprecated/attrs-dynamic/expected.js
@@ -20,7 +20,7 @@ function render(input, out, __component, component, state) {
 
   out.e("div", marko_attrs(attrs), null, null, 3)
     .t("Hello ")
-    .t(name)
+    .t(name, component)
     .t("!");
 }
 

diff --git a/packages/marko/test/vdom-compiler/fixtures-deprecated/simple/expected.js b/packages/marko/test/vdom-compiler/fixtures-deprecated/simple/expected.js
@@ -22,15 +22,15 @@ function render(input, out, __component, component, state) {
 
   out.e("h1", null, null, null, 3)
     .t("Hello ")
-    .t(input.name)
+    .t(input.name, component)
     .t("!");
 
   if (input.colors.length) {
     out.be("ul");
 
     marko_forOf(input.colors, function(color) {
       out.e("li", null, null, null, 1)
-        .t(color);
+        .t(color, component);
     });
 
     out.ee();

diff --git a/packages/marko/test/vdom-compiler/fixtures/attr-class-expression/expected.js b/packages/marko/test/vdom-compiler/fixtures/attr-class-expression/expected.js
@@ -23,7 +23,7 @@ function render(input, out, __component, component, state) {
       ]))
     }, null, null, 3, 1)
     .t("Hello ")
-    .t(name)
+    .t(name, component)
     .t("!");
 }