marko 5.33.17 → 5.33.19

package/dist/node_modules/@internal/components-registry/index-browser.js

@@ -12,8 +12,9 @@ var req = require("@internal/require");
 var componentLookup = componentsUtil._k_;
 var addComponentRootToKeyedElements =
 componentsUtil._l_;
-var keyedElementsByComponentId = domData._m_;
-var componentsByDOMNode = domData._n_;
+var keysByDOMNode = domData._m_;
+var keyedElementsByComponentId = domData._n_;
+var componentsByDOMNode = domData._o_;
 var serverComponentRootNodes = {};
 var serverRenderedMeta = {};
 var win = window;
@@ -118,7 +119,7 @@ function getComponentClass(typeName, isLegacy) {
   }
 
   // Make the component "type" accessible on each component instance
-  ComponentClass.prototype._o_ = typeName;
+  ComponentClass.prototype._p_ = typeName;
 
   // eslint-disable-next-line no-constant-condition
 
@@ -221,7 +222,7 @@ function indexServerComponentBoundaries(node, runtimeId, stack) {
     } else if (node.nodeType === 1) {
       // HTML element node
       var markoKey = node.getAttribute("data-marko-key");
-      var markoProps = componentsUtil._p_(node);
+      var markoProps = componentsUtil._q_(node);
       if (markoKey) {
         var separatorIndex = markoKey.indexOf(" ");
         ownerId = markoKey.substring(separatorIndex + 1);
@@ -233,12 +234,14 @@ function indexServerComponentBoundaries(node, runtimeId, stack) {
           keyedElementsByComponentId[ownerId] || (
           keyedElementsByComponentId[ownerId] = {});
         }
+
+        keysByDOMNode.set(node, markoKey);
         keyedElements[markoKey] = node;
       }
       if (markoProps) {
         Object.keys(markoProps).forEach(function (key) {
           if (key.slice(0, 2) === "on") {
-            eventDelegation._q_(key.slice(2));
+            eventDelegation._r_(key.slice(2));
           }
         });
       }
@@ -306,13 +309,13 @@ function initComponent(componentDef, host) {
     return; // legacy
   }
 
-  component._r_();
+  component._s_();
   component.B_ = host;
 
-  var isExisting = componentDef._s_;
+  var isExisting = componentDef._t_;
 
   if (isExisting) {
-    component._t_();
+    component._u_();
   }
 
   var domEvents = componentDef._b_;
@@ -340,15 +343,15 @@ function initComponent(componentDef, host) {
     });
 
     if (eventListenerHandles.length) {
-      component._u_ = eventListenerHandles;
+      component._v_ = eventListenerHandles;
     }
   }
 
-  if (component._v_) {
-    component._w_();
-  } else {
-    component._v_ = true;
+  if (component._w_) {
     component._x_();
+  } else {
+    component._w_ = true;
+    component._y_();
   }
 }
 
@@ -364,7 +367,7 @@ function initClientRendered(componentDefs, host) {
   if (!host) host = document;
   // Ensure that event handlers to handle delegating events are
   // always attached before initializing any components
-  eventDelegation._y_(host);
+  eventDelegation._z_(host);
   var len = componentDefs.length;
   var componentDef;
   var i;
@@ -477,15 +480,15 @@ function initServerRendered(renderedComponents, host) {
   // Ensure that event handlers to handle delegating events are
   // always attached before initializing any components
   indexServerComponentBoundaries(host, runtimeId);
-  eventDelegation._y_(host);
+  eventDelegation._z_(host);
 
   if (renderedComponents.g) {
-    meta._z_ = renderedComponents.g;
+    meta._A_ = renderedComponents.g;
   }
 
   if (renderedComponents.t) {
-    meta._A_ = meta._A_ ?
-    meta._A_.concat(renderedComponents.t) :
+    meta._B_ = meta._B_ ?
+    meta._B_.concat(renderedComponents.t) :
     renderedComponents.t;
   }
 
@@ -493,7 +496,7 @@ function initServerRendered(renderedComponents, host) {
   // and return an array of functions to mount these components
   (renderedComponents.w || []).
   map(function (componentDef) {
-    var typeName = meta._A_[componentDef[1]];
+    var typeName = meta._B_[componentDef[1]];
 
     return registered[typeName] ||
     document.readyState === "complete" ||
@@ -508,10 +511,10 @@ function initServerRendered(renderedComponents, host) {
 }
 
 function tryHydrateComponent(rawDef, meta, host, runtimeId) {
-  var componentDef = ComponentDef._B_(
+  var componentDef = ComponentDef._C_(
     rawDef,
+    meta._B_,
     meta._A_,
-    meta._z_,
     exports
   );
   var mount = hydrateComponentAndGetMount(componentDef, host);
@@ -549,12 +552,12 @@ function hydrateComponentAndGetMount(componentDef, host) {
   if (rootNode) {
     delete serverComponentRootNodes[componentId];
 
-    component._C_ = rootNode;
+    component._D_ = rootNode;
     componentsByDOMNode.set(rootNode, component);
 
     if (componentDef.u_ & FLAG_WILL_RERENDER_IN_BROWSER) {
       component.B_ = host;
-      renderResult = component._D_(component.O_, true);
+      renderResult = component._E_(component.O_, true);
       trackComponent(componentDef);
       return function mount() {
         renderResult.afterInsert(host);
@@ -581,9 +584,9 @@ function tryInvoke(fn) {
 }
 
 exports.r = register;
-exports._E_ = createComponent;
-exports._F_ = getComponentClass;
+exports._F_ = createComponent;
+exports._G_ = getComponentClass;
 exports.U_ = win.$initComponents = initServerRendered;
 
-require("../../../runtime/components/ComponentsContext")._G_ =
+require("../../../runtime/components/ComponentsContext")._H_ =
 initClientRendered;

package/dist/node_modules/@internal/components-registry/index.js

@@ -40,5 +40,5 @@ scope)
   return new ServerComponent(id, input, out, typeName, customEvents, scope);
 }
 
-exports._H_ = true;
-exports._E_ = createComponent;
+exports._I_ = true;
+exports._F_ = createComponent;

package/dist/node_modules/@internal/components-util/index-browser.js

@@ -1,6 +1,6 @@
 "use strict";var domData = require("../../../runtime/components/dom-data");
-var componentsByDOMNode = domData._n_;
-var keysByDOMNode = domData._I_;
+var componentsByDOMNode = domData._o_;
+var keysByDOMNode = domData._m_;
 var vElementsByDOMNode = domData._J_;
 var vPropsByDOMNode = domData._K_;
 var markoUID = window.$MUID || (window.$MUID = { i: 0 });
@@ -174,6 +174,6 @@ exports._P_ = destroyComponentForNode;
 exports._Q_ = destroyNodeRecursive;
 exports._R_ = nextComponentIdProvider;
 exports._S_ = attachBubblingEvent;
-exports._p_ = getMarkoPropsFromEl;
+exports._q_ = getMarkoPropsFromEl;
 exports._l_ = addComponentRootToKeyedElements;
 exports._T_ = normalizeComponentKey;

package/dist/node_modules/@internal/components-util/index.js

@@ -63,7 +63,7 @@ extraArgs)
 }
 
 exports._R_ = nextComponentIdProvider;
-exports._H_ = true;
+exports._I_ = true;
 exports._S_ = attachBubblingEvent;
 exports._P_ = function noop() {};
 exports._Q_ = function noop() {};

package/dist/node_modules/@internal/preserve-tag/index-browser.js

@@ -19,7 +19,8 @@
 
   var isPreserved =
   shouldPreserve && (
-  isHydrate || referenceComponent.K_[checkKey]);
+  isComponent && isHydrate ||
+  referenceComponent.K_[checkKey]);
 
   if (isComponent) {
     out.bf(key, ownerComponent, shouldPreserve);

package/dist/runtime/components/Component.js

@@ -17,8 +17,8 @@ require("./ComponentsContext").S_;
 var domData = require("./dom-data");
 var eventDelegation = require("./event-delegation");
 var updateManager = require("./update-manager");
-var componentsByDOMNode = domData._n_;
-var keyedElementsByComponentId = domData._m_;
+var componentsByDOMNode = domData._o_;
+var keyedElementsByComponentId = domData._n_;
 var CONTEXT_KEY = "__subtree_context__";
 
 var hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -127,8 +127,8 @@ function processUpdateHandlers(component, stateChanges, oldState) {
       handlerMethod.call(component, newValue, oldValue);
     });
 
-    component._w_();
-    component._r_();
+    component._x_();
+    component._s_();
   }
 
   return true;
@@ -169,15 +169,15 @@ function Component(id) {
   EventEmitter.call(this);
   this.id = id;
   this.z_ = null;
-  this._C_ = null;
+  this._D_ = null;
   this.ah_ = null;
-  this._u_ = null;
+  this._v_ = null;
   this.X_ = null; // Used to keep track of bubbling DOM events for components rendered on the server
   this.V_ = null;
   this.W_ = null;
   this.ai_ = null;
   this.O_ = undefined;
-  this._v_ = false;
+  this._w_ = false;
   this.aj_ = undefined;
   this.I_ = false;
   this._a_ = false;
@@ -304,7 +304,7 @@ Component.prototype = componentProto = {
       return;
     }
 
-    var root = this._C_;
+    var root = this._D_;
 
     this._M_();
 
@@ -332,12 +332,12 @@ Component.prototype = componentProto = {
     this.an_();
     this.I_ = true;
 
-    componentsByDOMNode.set(this._C_, undefined);
+    componentsByDOMNode.set(this._D_, undefined);
 
-    this._C_ = null;
+    this._D_ = null;
 
     // Unsubscribe from all DOM events
-    this._t_();
+    this._u_();
 
     var subscriptions = this.ah_;
     if (subscriptions) {
@@ -488,7 +488,7 @@ Component.prototype = componentProto = {
       }
     }
 
-    this._r_();
+    this._s_();
   },
 
   get at_() {
@@ -498,13 +498,13 @@ Component.prototype = componentProto = {
 
   },
 
-  _r_: function () {
+  _s_: function () {
     this.ak_ = false;
     this._a_ = false;
     this.ai_ = null;
     var state = this.z_;
     if (state) {
-      state._r_();
+      state._s_();
     }
   },
 
@@ -523,16 +523,16 @@ Component.prototype = componentProto = {
     var input = this.ai_ || this.O_;
 
     updateManager.ax_(function () {
-      self._D_(input, false).afterInsert(self.B_);
+      self._E_(input, false).afterInsert(self.B_);
     });
 
-    this._r_();
+    this._s_();
   },
 
-  _D_: function (input, isHydrate) {
+  _E_: function (input, isHydrate) {
     var host = this.B_;
     var globalData = this.aj_;
-    var rootNode = this._C_;
+    var rootNode = this._D_;
     var renderer = this.Q_;
     var createOut = renderer.createOut || defaultCreateOut;
     var out = createOut(globalData);
@@ -557,16 +557,16 @@ Component.prototype = componentProto = {
   },
 
   aA_: function () {
-    var root = this._C_;
+    var root = this._D_;
     root.remove();
     return root;
   },
 
-  _t_: function () {
-    var eventListenerHandles = this._u_;
+  _u_: function () {
+    var eventListenerHandles = this._v_;
     if (eventListenerHandles) {
       eventListenerHandles.forEach(removeListener);
-      this._u_ = null;
+      this._v_ = null;
     }
   },
 
@@ -592,7 +592,7 @@ Component.prototype = componentProto = {
   },
 
   get el() {
-    return walkFragments(this._C_);
+    return walkFragments(this._D_);
   },
 
   get els() {
@@ -602,7 +602,7 @@ Component.prototype = componentProto = {
 
 
 
-    return (this._C_ ? this._C_.nodes : []).filter(
+    return (this._D_ ? this._D_.nodes : []).filter(
       function (el) {
         return el.nodeType === ELEMENT_NODE;
       }
@@ -620,12 +620,12 @@ Component.prototype = componentProto = {
     this.aD_("render", out);
   },
 
-  _w_() {
+  _x_() {
     this.onUpdate && this.onUpdate();
     this.aD_("update");
   },
 
-  _x_() {
+  _y_() {
     this.onMount && this.onMount();
     this.aD_("mount");
   },

package/dist/runtime/components/ComponentDef.js

@@ -5,7 +5,7 @@ var w10Noop = require("warp10/constants").NOOP;
 var componentUtil = require("@internal/components-util");
 var attachBubblingEvent = componentUtil._S_;
 var addDelegatedEventHandler =
-require("./event-delegation")._q_;
+require("./event-delegation")._r_;
 var KeySequence = require("./KeySequence");
 var EMPTY_OBJECT = {};
 
@@ -26,7 +26,7 @@ function ComponentDef(component, componentId, componentsContext) {
 
   this._b_ = undefined; // An array of DOM events that need to be added (in sets of three)
 
-  this._s_ = false;
+  this._t_ = false;
 
   this.t_ = false;
   this.u_ = 0;
@@ -81,14 +81,14 @@ ComponentDef.prototype = {
     return attachBubblingEvent(this, handlerMethodName, isOnce, extraArgs);
   },
 
-  get _o_() {
-    return this.s_._o_;
+  get _p_() {
+    return this.s_._p_;
   }
 };
 
 ComponentDef.prototype.nk = ComponentDef.prototype.aL_;
 
-ComponentDef._B_ = function (o, types, global, registry) {
+ComponentDef._C_ = function (o, types, global, registry) {
   var id = o[0];
   var typeName = types[o[1]];
   var input = o[2] || null;
@@ -102,7 +102,7 @@ ComponentDef._B_ = function (o, types, global, registry) {
 
   var component =
   typeName /* legacy */ &&
-  registry._E_(typeName, id, isLegacy);
+  registry._F_(typeName, id, isLegacy);
 
   // Prevent newly created component from being queued for update since we area
   // just building it from the server info

package/dist/runtime/components/ComponentsContext.js

@@ -38,7 +38,7 @@ ComponentsContext.prototype = {
   ae_: function (host) {
     var componentDefs = this.b_;
 
-    ComponentsContext._G_(componentDefs, host);
+    ComponentsContext._H_(componentDefs, host);
 
     this.r_.emit("aN_");
 

package/dist/runtime/components/State.js

@@ -27,7 +27,7 @@ function State(component) {
 }
 
 State.prototype = {
-  _r_: function () {
+  _s_: function () {
     var self = this;
 
     self.ak_ = false;

package/dist/runtime/components/dom-data.js

@@ -1,8 +1,8 @@
 "use strict";module.exports = {
   _K_: new WeakMap(),
   _J_: new WeakMap(),
-  _n_: new WeakMap(),
+  _o_: new WeakMap(),
   aU_: new WeakMap(),
-  _I_: new WeakMap(),
-  _m_: {}
+  _m_: new WeakMap(),
+  _n_: {}
 };

package/dist/runtime/components/event-delegation.js

@@ -1,7 +1,7 @@
 "use strict";var componentsUtil = require("@internal/components-util");
 var runtimeId = componentsUtil._O_;
 var componentLookup = componentsUtil._k_;
-var getMarkoPropsFromEl = componentsUtil._p_;
+var getMarkoPropsFromEl = componentsUtil._q_;
 
 var TEXT_NODE = 3;
 
@@ -136,8 +136,8 @@ exports.aT_ = noop;
 exports.am_ = noop;
 exports.aQ_ = delegateEvent;
 exports.aR_ = getEventFromEl;
-exports._q_ = addDelegatedEventHandler;
-exports._y_ = function (host) {
+exports._r_ = addDelegatedEventHandler;
+exports._z_ = function (host) {
   Object.keys(delegatedEvents).forEach(function (eventType) {
     addDelegatedEventHandlerToHost(eventType, host);
   });

package/dist/runtime/components/legacy/renderer-legacy.js

@@ -65,9 +65,9 @@ function createRendererFunc(templateRenderFunc, componentProps) {
       }
     }
 
-    if (registry._H_ && typeName) {
+    if (registry._I_ && typeName) {
       if (renderingLogic) delete renderingLogic.onRender;
-      component = registry._E_(
+      component = registry._F_(
         renderingLogic,
         id,
         input,
@@ -93,7 +93,7 @@ function createRendererFunc(templateRenderFunc, componentProps) {
         if (isRerender) {
           // Look in in the DOM to see if a component with the same ID and type already exists.
           component = componentLookup[id];
-          if (component && component._o_ !== typeName) {
+          if (component && component._p_ !== typeName) {
             component = undefined;
           }
         }
@@ -104,7 +104,7 @@ function createRendererFunc(templateRenderFunc, componentProps) {
           isExisting = false;
           // We need to create a new instance of the component
           if (typeName) {
-            component = registry._E_(typeName, id);
+            component = registry._F_(typeName, id);
           }
         }
       }
@@ -143,15 +143,15 @@ function createRendererFunc(templateRenderFunc, componentProps) {
     var vComponentNode = out.aa_;
 
     componentDef.s_ = isFakeComponent ? null : component;
-    componentDef._s_ = isExisting;
+    componentDef._t_ = isExisting;
     componentDef.y_ = true;
 
     componentDef.t = function (typeName) {
       if (typeName) {
-        if (registry._H_) {
+        if (registry._I_) {
           var oldComponent = component;
           if (renderingLogic) delete renderingLogic.onRender;
-          component = registry._E_(
+          component = registry._F_(
             renderingLogic || {},
             id,
             input,
@@ -183,7 +183,7 @@ function createRendererFunc(templateRenderFunc, componentProps) {
             this
           );
         } else {
-          vComponentNode.s_ = component = registry._E_(
+          vComponentNode.s_ = component = registry._F_(
             typeName,
             component.id
           );
@@ -194,7 +194,7 @@ function createRendererFunc(templateRenderFunc, componentProps) {
       return component;
     };
 
-    if (!registry._H_) {
+    if (!registry._I_) {
       component.L_ && component.L_();
     }
 
@@ -210,7 +210,7 @@ function createRendererFunc(templateRenderFunc, componentProps) {
     );
 
     if (customEvents && componentDef.s_) {
-      if (registry._H_) {
+      if (registry._I_) {
         componentDef.V_ = customEvents;
         componentDef.W_ = ownerComponentId;
       } else {

package/dist/runtime/components/renderer.js

@@ -7,7 +7,7 @@ var componentLookup = componentsUtil._k_;
 
 var ComponentsContext = require("./ComponentsContext");
 var getComponentsContext = ComponentsContext.S_;
-var isServer = componentsUtil._H_ === true;
+var isServer = componentsUtil._I_ === true;
 
 var COMPONENT_BEGIN_ASYNC_ADDED_KEY = "$wa";
 
@@ -123,7 +123,7 @@ renderingLogic)
       // we don't need to match up the UI component with a previously
       // rendered component already mounted to the DOM. We also create
       // a lightweight ServerComponent
-      component = registry._E_(
+      component = registry._F_(
         renderingLogic,
         id,
         input,
@@ -141,7 +141,7 @@ renderingLogic)
         if (
         isRerender && (
         component = componentLookup[id]) &&
-        component._o_ !== typeName)
+        component._p_ !== typeName)
         {
           // Destroy the existing component since
           component.destroy();
@@ -153,7 +153,7 @@ renderingLogic)
         } else {
           isExisting = false;
           // We need to create a new instance of the component
-          component = registry._E_(typeName, id);
+          component = registry._F_(typeName, id);
 
           if (shouldApplySplitMixins === true) {
             shouldApplySplitMixins = false;
@@ -192,7 +192,7 @@ renderingLogic)
             // node to track that it is a preserve marker
             out.bb_(component);
             globalComponentsContext.q_[id] = true;
-            component._r_(); // The component is no longer dirty so reset internal flags
+            component._s_(); // The component is no longer dirty so reset internal flags
             return;
           }
         }
@@ -211,7 +211,7 @@ renderingLogic)
       isImplicitComponent
     );
 
-    componentDef._s_ = isExisting;
+    componentDef._t_ = isExisting;
 
     // Render the template associated with the component using the final template
     // data that we constructed

package/dist/runtime/helpers/tags-compat/runtime-dom.js

@@ -144,7 +144,7 @@ exports.p = function (domCompat) {
     let rootNode = host.fragment;
     if (!rootNode) {
       const component = scope.marko5Component = _k_[scope.m5c];
-      rootNode = component._C_;
+      rootNode = component._D_;
       host = rootNode.startNode;
       domCompat.setScopeNodes(host, rootNode.endNode);
     }
@@ -183,7 +183,7 @@ exports.p = function (domCompat) {
         getRootNode(host)
       );
       const component = componentDefs[0].s_;
-      component._C_ = rootNode;
+      component._D_ = rootNode;
       component.O_ = input[0];
       component.V_ = customEvents;
       scope.marko5Component = component;

package/dist/runtime/html/AsyncStream.js

@@ -597,7 +597,12 @@ var proto = AsyncStream.prototype = {
     var str =
     "<" +
     tagName +
-    markoAttr(this, componentDef, props, key) +
+    markoAttr(
+      this,
+      componentDef,
+      props,
+      key && key[0] === "@" ? key : undefined
+    ) +
     attrsHelper(elementAttrs);
 
     if (selfClosingTags.voidElements.indexOf(tagName) !== -1) {

package/dist/runtime/html/helpers/data-marko.js

@@ -23,7 +23,7 @@ module.exports = function dataMarko(out, componentDef, props, key) {
       }
     }
 
-    if (key && key[0] === "@") {
+    if (key) {
       result +=
       ' data-marko-key="' +
       escapeDoubleQuotes(

package/dist/runtime/vdom/VElement.js

@@ -224,7 +224,7 @@ function virtualizeElement(node, virtualizeChildNodes, ownerComponent) {
       var attrName = attr.name;
       if (!xmlnsRegExp.test(attrName)) {
         if (attrName === "data-marko") {
-          props = componentsUtil._p_(node);
+          props = componentsUtil._q_(node);
         } else if (attr.namespaceURI === NS_XLINK) {
           attrs[ATTR_XLINK_HREF] = attr.value;
         } else {

package/dist/runtime/vdom/VFragment.js

@@ -1,6 +1,6 @@
 "use strict";var inherit = require("raptor-util/inherit");
 var domData = require("../components/dom-data");
-var keysByDOMNode = domData._I_;
+var keysByDOMNode = domData._m_;
 var vElementByDOMNode = domData._J_;
 var createFragmentNode = require("./morphdom/fragment")._j_;
 var VNode = require("./VNode");

package/dist/runtime/vdom/hot-reload.js

@@ -4,7 +4,7 @@ var updateManager = require("../components/update-manager");
 var runtime = require(".");
 
 var createTemplate = runtime.t;
-var createComponent = registry._E_;
+var createComponent = registry._F_;
 var registered = {};
 var instancesByType = {};
 var queue;
@@ -31,7 +31,7 @@ exports.t = runtime.t = function (typeName) {
         }
 
         queue.push(function () {
-          var newProto = registry._F_(typeName).prototype;
+          var newProto = registry._G_(typeName).prototype;
           instances.forEach(function (instance) {
             if (hasLifecycleChanged(instance.__proto__, newProto)) {
               var renderer = instance.Q_;
@@ -46,7 +46,7 @@ exports.t = runtime.t = function (typeName) {
 
               instance.cn_ = true;
               instance.an_();
-              instance._v_ = false;
+              instance._w_ = false;
 
               if (instance.ah_) {
                 instance.ah_.removeAllListeners();
@@ -55,7 +55,7 @@ exports.t = runtime.t = function (typeName) {
             }
 
             instance.__proto__ = newProto;
-            instance._D_(
+            instance._E_(
               instance.O_, false).
             afterInsert(instance.B_);
           });
@@ -71,7 +71,7 @@ exports.t = runtime.t = function (typeName) {
   }
 };
 
-registry._E_ = function (typeName, id) {
+registry._F_ = function (typeName, id) {
   var instances = instancesByType[typeName];
   var instance = createComponent(typeName, id);
 

package/dist/runtime/vdom/morphdom/index.js

@@ -13,8 +13,8 @@ var fragment = require("./fragment");
 var helpers = require("./helpers");
 var virtualizeElement = VElement.cf_;
 var morphAttrs = VElement.cg_;
-var keysByDOMNode = domData._I_;
-var componentByDOMNode = domData._n_;
+var keysByDOMNode = domData._m_;
+var componentByDOMNode = domData._o_;
 var vElementByDOMNode = domData._J_;
 var detachedByDOMNode = domData.aU_;
 
@@ -104,7 +104,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
   ownerComponent,
   parentComponent)
   {
-    var rootNode = component._C_ = insertBefore(
+    var rootNode = component._D_ = insertBefore(
       createFragmentNode(),
       referenceNode,
       referenceNodeParentEl
@@ -126,7 +126,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
   }
 
   function morphComponent(component, vComponent) {
-    morphChildren(component._C_, vComponent, component);
+    morphChildren(component._D_, vComponent, component);
   }
 
   var detachedNodes = [];
@@ -181,7 +181,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
         {
           if (isHydrate) {
             var rootNode = beginFragmentNode(curFromNodeChild, fromNode);
-            component._C_ = rootNode;
+            component._D_ = rootNode;
             componentByDOMNode.set(rootNode, component);
 
             if (ownerComponent && curToNodeKey) {
@@ -214,7 +214,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             );
           }
         } else {
-          if (matchingFromComponent._C_ !== curFromNodeChild) {
+          if (matchingFromComponent._D_ !== curFromNodeChild) {
             if (
             curFromNodeChild && (
             fromComponent = componentByDOMNode.get(curFromNodeChild)) &&
@@ -224,7 +224,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             {
               // The component associated with the current real DOM node was not rendered
               // so we should just remove it out of the real DOM by destroying it
-              curFromNodeChild = nextSibling(fromComponent._C_);
+              curFromNodeChild = nextSibling(fromComponent._D_);
               destroyComponent(fromComponent);
               continue;
             }
@@ -232,7 +232,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             // We need to move the existing component into
             // the correct location
             insertBefore(
-              matchingFromComponent._C_,
+              matchingFromComponent._D_,
               curFromNodeChild,
               fromNode
             );
@@ -596,9 +596,9 @@ function morphdom(fromNode, toNode, host, componentsContext) {
               curFromNodeType === TEXT_NODE &&
               toNextSibling.bW_ === TEXT_NODE &&
               curFromNodeValue.startsWith(curToNodeValue) &&
-              toNextSibling.cm_.startsWith(
-                curFromNodeValue.slice(curToNodeValue.length)
-              ))
+              curFromNodeValue.
+              slice(curToNodeValue.length).
+              startsWith(toNextSibling.cm_))
               {
                 // In hydrate mode we can use splitText to more efficiently handle
                 // adjacent text vdom nodes that were merged.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marko",
-  "version": "5.33.17",
+  "version": "5.33.19",
   "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
   "keywords": [
     "front-end",
@@ -64,8 +64,8 @@
     "build": "babel ./src --out-dir ./dist --extensions .js --copy-files --config-file ../../babel.config.js --env-name=production"
   },
   "dependencies": {
-    "@marko/compiler": "^5.35.12",
-    "@marko/translator-default": "^5.32.14",
+    "@marko/compiler": "^5.35.14",
+    "@marko/translator-default": "^5.32.16",
     "app-module-path": "^2.2.0",
     "argly": "^1.2.0",
     "browser-refresh-client": "1.1.4",

package/src/node_modules/@internal/components-registry/index-browser.js

@@ -12,6 +12,7 @@ var req = require("@internal/require");
 var componentLookup = componentsUtil.___componentLookup;
 var addComponentRootToKeyedElements =
   componentsUtil.___addComponentRootToKeyedElements;
+var keysByDOMNode = domData.___keyByDOMNode;
 var keyedElementsByComponentId = domData.___ssrKeyedElementsByComponentId;
 var componentsByDOMNode = domData.___componentByDOMNode;
 var serverComponentRootNodes = {};
@@ -233,6 +234,8 @@ function indexServerComponentBoundaries(node, runtimeId, stack) {
             keyedElementsByComponentId[ownerId] ||
             (keyedElementsByComponentId[ownerId] = {});
         }
+
+        keysByDOMNode.set(node, markoKey);
         keyedElements[markoKey] = node;
       }
       if (markoProps) {

package/src/node_modules/@internal/preserve-tag/index-browser.js

@@ -19,7 +19,8 @@ module.exports = function render(input, out) {
 
   var isPreserved =
     shouldPreserve &&
-    (isHydrate || referenceComponent.___keyedElements[checkKey]);
+    ((isComponent && isHydrate) ||
+      referenceComponent.___keyedElements[checkKey]);
 
   if (isComponent) {
     out.bf(key, ownerComponent, shouldPreserve);

package/src/runtime/html/AsyncStream.js

@@ -597,7 +597,12 @@ var proto = (AsyncStream.prototype = {
     var str =
       "<" +
       tagName +
-      markoAttr(this, componentDef, props, key) +
+      markoAttr(
+        this,
+        componentDef,
+        props,
+        key && key[0] === "@" ? key : undefined,
+      ) +
       attrsHelper(elementAttrs);
 
     if (selfClosingTags.voidElements.indexOf(tagName) !== -1) {

package/src/runtime/html/helpers/data-marko.js

@@ -23,7 +23,7 @@ module.exports = function dataMarko(out, componentDef, props, key) {
       }
     }
 
-    if (key && key[0] === "@") {
+    if (key) {
       result +=
         ' data-marko-key="' +
         escapeDoubleQuotes(

package/src/runtime/vdom/morphdom/index.js

@@ -596,9 +596,9 @@ function morphdom(fromNode, toNode, host, componentsContext) {
                 curFromNodeType === TEXT_NODE &&
                 toNextSibling.___nodeType === TEXT_NODE &&
                 curFromNodeValue.startsWith(curToNodeValue) &&
-                toNextSibling.___nodeValue.startsWith(
-                  curFromNodeValue.slice(curToNodeValue.length),
-                )
+                curFromNodeValue
+                  .slice(curToNodeValue.length)
+                  .startsWith(toNextSibling.___nodeValue)
               ) {
                 // In hydrate mode we can use splitText to more efficiently handle
                 // adjacent text vdom nodes that were merged.