feat: all vnodes have owner components (#1517)

(cherry picked from commit cb42609)

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);
     }
 

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;
 }
 

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;
 }
 

packages/marko/src/runtime/vdom/VElement.js

@@ -83,7 +83,7 @@ function VElement(
   flags,
   props
 ) {
-  this.___VNode(childCount);
+  this.___VNode(childCount, ownerComponent);
 
   var constId;
 
@@ -93,7 +93,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;
@@ -234,7 +233,7 @@ VElement.___removePreservedAttributes = function(attrs) {
   return attrs;
 };
 
-function virtualizeElement(node, virtualizeChildNodes) {
+function virtualizeElement(node, virtualizeChildNodes, ownerComponent) {
   var attributes = node.attributes;
   var attrCount = attributes.length;
 
@@ -266,7 +265,7 @@ function virtualizeElement(node, virtualizeChildNodes) {
     tagName,
     attrs,
     null /*key*/,
-    null /*ownerComponent*/,
+    ownerComponent,
     0 /*child count*/,
     0 /*flags*/,
     null /*props*/
@@ -275,7 +274,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;

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;
 }
 

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;
 

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;
 }
 

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;
   }
 

packages/translator-default/src/text/index[vdom].js

@@ -7,6 +7,6 @@ export default function(path) {
   const { node } = path;
 
   path.replaceWith(
-    withPreviousLocation(write("t", t.stringLiteral(decode(node.value))), node)
+    withPreviousLocation(write("t", t.stringLiteral(decode(node.value)), t.identifier("component")), node)
   );
 }

packages/translator-default/test/fixtures/at-tag-inside-if-tag/vdom-expected.js

@@ -20,7 +20,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
     _thing = {
       "x": 1,
       "renderBody": out => {
-        out.t("Hello");
+        out.t("Hello", component);
       }
     };
   }

packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/vdom-expected.js

@@ -14,17 +14,17 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
     "header": {
       "class": "my-header",
       "renderBody": out => {
-        out.t("Header content");
+        out.t("Header content", component);
       }
     },
     "footer": {
       "class": "my-footer",
       "renderBody": out => {
-        out.t("Footer content");
+        out.t("Footer content", component);
       }
     }
   }), out => {
-    out.t("Body content");
+    out.t("Body content", component);
   }, null, null, _component, "0");
 }, {
   t: _marko_componentType,

packages/translator-default/test/fixtures/at-tags-dynamic/vdom-expected.js

@@ -27,7 +27,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
           color
         },
         "renderBody": out => {
-          out.t("foo");
+          out.t("foo", component);
         }
       });
     } else {
@@ -36,7 +36,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
           color
         },
         "renderBody": out => {
-          out.t("bar");
+          out.t("bar", component);
         }
       });
     }
@@ -84,7 +84,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
   _rows2.push({
     "row": -1,
     "renderBody": out => {
-      out.t("Outside");
+      out.t("Outside", component);
     }
   });
 

packages/translator-default/test/fixtures/at-tags/vdom-expected.js

@@ -17,7 +17,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
   _hello_tag({
     "foo": {
       "renderBody": out => {
-        out.t("Foo!");
+        out.t("Foo!", component);
       }
     }
   }, out, _component, "0");

packages/translator-default/test/fixtures/attr-class/vdom-expected.js

@@ -54,7 +54,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
         d
       }],
       "renderBody": out => {
-        out.t("Hello");
+        out.t("Hello", component);
       }
     }
   }), null, null, null, _component, "5");

packages/translator-default/test/fixtures/attr-style/vdom-expected.js

@@ -56,7 +56,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
         color: "green"
       },
       "renderBody": out => {
-        out.t("Hello");
+        out.t("Hello", component);
       }
     }
   }), null, null, null, _component, "6");

packages/translator-default/test/fixtures/cdata/vdom-expected.js

@@ -10,9 +10,9 @@ const _marko_componentType = _marko_registerComponent("Yf6hG3qo", () => _marko_t
 
 _marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
   out.be("div", null, "0", component, null, 0);
-  out.t("Here is a CDATA section: ");
+  out.t("Here is a CDATA section: ", component);
   out.t(" < > & ");
-  out.t(" with all kinds of unescaped text.");
+  out.t(" with all kinds of unescaped text.", component);
   out.ee();
 }, {
   t: _marko_componentType,