marko 5.24.0 → 5.25.1

package/dist/runtime/components/entry/index-browser.js

@@ -1,11 +1,7 @@
-"use strict";var initComponents = require("../init-components");
-require("../ComponentsContext")._S_ =
-initComponents._S_;
+"use strict";var registry = require("../registry");
 
 exports.getComponentForEl = require("../util").ai_;
-exports.init = window.$initComponents = initComponents.aj_;
-
-var registry = require("../registry");
+exports.init = registry.aj_;
 exports.register = function (id, component) {
   registry.r(id, function () {
     return component;

package/dist/runtime/components/registry/index-browser.js

@@ -1,12 +1,30 @@
 "use strict";
+var warp10Finalize = require("warp10/finalize");
 var queueMicrotask = require("../../queueMicrotask");
 var defineComponent = require("../defineComponent");
-var initComponents = require("../init-components");
-require("../entry");
+var eventDelegation = require("../event-delegation");
+var createFragmentNode =
+require("../../vdom/morphdom/fragment").ap_;
+var ComponentDef = require("../ComponentDef");
+var domData = require("../dom-data");
+var componentsUtil = require("../util");
+var componentLookup = componentsUtil.D_;
+var addComponentRootToKeyedElements =
+componentsUtil.aq_;
+var keyedElementsByComponentId = domData.G_;
+var componentsByDOMNode = domData.F_;
+var serverComponentRootNodes = {};
+var serverRenderedMeta = {};
+var win = window;
+
+var DEFAULT_RUNTIME_ID = "M";
+var FLAG_WILL_RERENDER_IN_BROWSER = 1;
+// var FLAG_HAS_RENDER_BODY = 2;
 
 var registered = {};
 var loaded = {};
 var componentTypes = {};
+var deferredDefs;
 var pendingDefs;
 
 function register(type, def) {
@@ -22,12 +40,7 @@ function register(type, def) {
     delete pendingDefs[type];
     queueMicrotask(function () {
       pendingForType.forEach(function (args) {
-        initComponents.av_(
-        args[0],
-        args[1],
-        args[2],
-        args[3])();
-
+        tryHydrateComponent(args[0], args[1], args[2], args[3])();
       });
     });
   }
@@ -59,10 +72,6 @@ function addPendingDef(def, type, meta, host, runtimeId) {
 
 }
 
-function isRegistered(type) {
-  return Boolean(registered[type]);
-}
-
 function load(typeName) {
   var target = loaded[typeName];
   if (!target) {
@@ -118,11 +127,6 @@ function getComponentClass(typeName) {
 
 
 
-
-
-
-
-
 
 
 
@@ -139,8 +143,428 @@ function createComponent(typeName, id) {
   return new ComponentClass(id);
 }
 
+function indexServerComponentBoundaries(node, runtimeId, stack) {
+  var componentId;
+  var ownerId;
+  var ownerComponent;
+  var keyedElements;
+  var nextSibling;
+  var runtimeLength = runtimeId.length;
+  stack = stack || [];
+
+  node = node.firstChild;
+  while (node) {
+    nextSibling = node.nextSibling;
+    if (node.nodeType === 8) {
+      // Comment node
+      var commentValue = node.nodeValue;
+      if (commentValue.slice(0, runtimeLength) === runtimeId) {
+        var firstChar = commentValue[runtimeLength];
+
+        if (firstChar === "^" || firstChar === "#") {
+          stack.push(node);
+        } else if (firstChar === "/") {
+          var endNode = node;
+          var startNode = stack.pop();
+          var rootNode;
+
+          if (startNode.parentNode === endNode.parentNode) {
+            rootNode = createFragmentNode(startNode.nextSibling, endNode);
+          } else {
+            rootNode = createFragmentNode(
+            endNode.parentNode.firstChild,
+            endNode);
+
+          }
+
+          componentId = startNode.nodeValue.substring(runtimeLength + 1);
+          firstChar = startNode.nodeValue[runtimeLength];
+
+          if (firstChar === "^") {
+            var parts = componentId.split(/ /g);
+            var key = parts[2];
+            ownerId = parts[1];
+            componentId = parts[0];
+            if (ownerComponent = componentLookup[ownerId]) {
+              keyedElements = ownerComponent.k_;
+            } else {
+              keyedElements =
+              keyedElementsByComponentId[ownerId] || (
+              keyedElementsByComponentId[ownerId] = {});
+            }
+            addComponentRootToKeyedElements(
+            keyedElements,
+            key,
+            rootNode,
+            componentId);
+
+          }
+
+          serverComponentRootNodes[componentId] = rootNode;
+
+          startNode.parentNode.removeChild(startNode);
+          endNode.parentNode.removeChild(endNode);
+        }
+      }
+    } else if (node.nodeType === 1) {
+      // HTML element node
+      var markoKey = node.getAttribute("data-marko-key");
+      var markoProps = componentsUtil.an_(node);
+      if (markoKey) {
+        var separatorIndex = markoKey.indexOf(" ");
+        ownerId = markoKey.substring(separatorIndex + 1);
+        markoKey = markoKey.substring(0, separatorIndex);
+        if (ownerComponent = componentLookup[ownerId]) {
+          keyedElements = ownerComponent.k_;
+        } else {
+          keyedElements =
+          keyedElementsByComponentId[ownerId] || (
+          keyedElementsByComponentId[ownerId] = {});
+        }
+        keyedElements[markoKey] = node;
+      }
+      if (markoProps) {
+        Object.keys(markoProps).forEach(function (key) {
+          if (key.slice(0, 2) === "on") {
+            eventDelegation._E_(key.slice(2));
+          }
+        });
+      }
+      indexServerComponentBoundaries(node, runtimeId, stack);
+    }
+
+    node = nextSibling;
+  }
+}
+
+function invokeComponentEventHandler(component, targetMethodName, args) {
+  var method = component[targetMethodName];
+  if (!method) {
+    throw Error("Method not found: " + targetMethodName);
+  }
+
+  method.apply(component, args);
+}
+
+function addEventListenerHelper(el, eventType, isOnce, listener) {
+  var eventListener = listener;
+  if (isOnce) {
+    eventListener = function (event) {
+      listener(event);
+      el.removeEventListener(eventType, eventListener);
+    };
+  }
+
+  el.addEventListener(eventType, eventListener, false);
+
+  return function remove() {
+    el.removeEventListener(eventType, eventListener);
+  };
+}
+
+function addDOMEventListeners(
+component,
+el,
+eventType,
+targetMethodName,
+isOnce,
+extraArgs,
+handles)
+{
+  var removeListener = addEventListenerHelper(
+  el,
+  eventType,
+  isOnce,
+  function (event) {
+    var args = [event, el];
+    if (extraArgs) {
+      args = extraArgs.concat(args);
+    }
+
+    invokeComponentEventHandler(component, targetMethodName, args);
+  });
+
+  handles.push(removeListener);
+}
+
+function initComponent(componentDef, host) {
+  var component = componentDef.h_;
+
+  component.J_();
+  component.Y_ = host;
+
+  var isExisting = componentDef._H_;
+
+  if (isExisting) {
+    component._c_();
+  }
+
+  var domEvents = componentDef._G_;
+  if (domEvents) {
+    var eventListenerHandles = [];
+
+    domEvents.forEach(function (domEventArgs) {
+      // The event mapping is for a direct DOM event (not a custom event and not for bubblign dom events)
+
+      var eventType = domEventArgs[0];
+      var targetMethodName = domEventArgs[1];
+      var eventEl = component.k_[domEventArgs[2]];
+      var isOnce = domEventArgs[3];
+      var extraArgs = domEventArgs[4];
+
+      addDOMEventListeners(
+      component,
+      eventEl,
+      eventType,
+      targetMethodName,
+      isOnce,
+      extraArgs,
+      eventListenerHandles);
+
+    });
+
+    if (eventListenerHandles.length) {
+      component.N_ = eventListenerHandles;
+    }
+  }
+
+  if (component.S_) {
+    component.I_();
+  } else {
+    component.S_ = true;
+    component._A_();
+  }
+}
+
+/**
+ * This method is used to initialized components associated with UI components
+ * rendered in the browser. While rendering UI components a "components context"
+ * is added to the rendering context to keep up with which components are rendered.
+ * When ready, the components can then be initialized by walking the component tree
+ * in the components context (nested components are initialized before ancestor components).
+ * @param  {Array<marko-components/lib/ComponentDef>} componentDefs An array of ComponentDef instances
+ */
+function initClientRendered(componentDefs, host) {
+  if (!host) host = document;
+  // Ensure that event handlers to handle delegating events are
+  // always attached before initializing any components
+  eventDelegation.ao_(host);
+  var len = componentDefs.length;
+  var componentDef;
+  var i;
+
+  for (i = len; i--;) {
+    componentDef = componentDefs[i];
+    trackComponent(componentDef);
+  }
+
+  for (i = len; i--;) {
+    componentDef = componentDefs[i];
+    initComponent(componentDef, host);
+  }
+}
+
+/**
+ * This method initializes all components that were rendered on the server by iterating over all
+ * of the component IDs.
+ */
+function initServerRendered(renderedComponents, host) {
+  var type = typeof renderedComponents;
+  var globalKey = "$";
+  var runtimeId;
+
+  if (type !== "object") {
+    if (type === "string") {
+      runtimeId = renderedComponents;
+      globalKey += runtimeId + "_C";
+    } else {
+      globalKey += (runtimeId = DEFAULT_RUNTIME_ID) + "C";
+    }
+
+    renderedComponents = win[globalKey];
+
+    // eslint-disable-next-line no-constant-condition
+
+
+
+
+
+
+
+
+
+
+
+
+    var fakeArray = win[globalKey] = {
+      r: runtimeId,
+      concat: initServerRendered
+    };
+
+    // eslint-disable-next-line no-constant-condition
+
+
+
+
+    if (renderedComponents && renderedComponents.forEach) {
+      renderedComponents.forEach(function (renderedComponent) {
+        fakeArray.concat(renderedComponent);
+      });
+    }
+
+    return fakeArray;
+  }
+
+  var isFromSerializedGlobals = this.concat === initServerRendered;
+  renderedComponents = warp10Finalize(renderedComponents);
+
+  if (isFromSerializedGlobals) {
+    runtimeId = this.r;
+    host = document;
+  } else {
+    runtimeId = renderedComponents.r || DEFAULT_RUNTIME_ID;
+    if (!host) host = document;
+
+    // eslint-disable-next-line no-constant-condition
+
+
+
+
+
+  }
+
+  // eslint-disable-next-line no-constant-condition
+
+
+
+
+
+
+
+
+  var prefix = renderedComponents.p || "";
+  var meta = serverRenderedMeta[prefix];
+  var isLast = renderedComponents.l;
+
+  if (meta) {
+    if (isLast) {
+      delete serverRenderedMeta[prefix];
+    }
+  } else {
+    meta = {};
+
+    if (!isLast) {
+      serverRenderedMeta[prefix] = meta;
+    }
+  }
+
+  // Ensure that event handlers to handle delegating events are
+  // always attached before initializing any components
+  indexServerComponentBoundaries(host, runtimeId);
+  eventDelegation.ao_(host);
+
+  if (renderedComponents.g) {
+    meta.ar_ = renderedComponents.g;
+  }
+
+  if (renderedComponents.t) {
+    meta.as_ = meta.as_ ?
+    meta.as_.concat(renderedComponents.t) :
+    renderedComponents.t;
+  }
+
+  // hydrate components top down (leaf nodes last)
+  // and return an array of functions to mount these components
+  (renderedComponents.w || []).
+  map(function (componentDef) {
+    var typeName = meta.as_[componentDef[1]];
+
+    return registered[typeName] ?
+    tryHydrateComponent(componentDef, meta, host, runtimeId) :
+    addPendingDef(componentDef, typeName, meta, host, runtimeId);
+  }).
+  reverse().
+  forEach(tryInvoke);
+
+  return this;
+}
+
+function tryHydrateComponent(rawDef, meta, host, runtimeId) {
+  var componentDef = ComponentDef._P_(
+  rawDef,
+  meta.as_,
+  meta.ar_,
+  exports);
+
+  var mount = hydrateComponentAndGetMount(componentDef, host);
+
+  if (!mount) {
+    // hydrateComponentAndGetMount will return false if there is not rootNode
+    // for the component.  If this is the case, we'll wait until the
+    // DOM has fully loaded to attempt to init the component again.
+    if (deferredDefs) {
+      deferredDefs.push(componentDef);
+    } else {
+      deferredDefs = [componentDef];
+      document.addEventListener("DOMContentLoaded", function () {
+        indexServerComponentBoundaries(host, runtimeId);
+        deferredDefs.
+        map(function (componentDef) {
+          return hydrateComponentAndGetMount(componentDef, host);
+        }).
+        reverse().
+        forEach(tryInvoke);
+        deferredDefs = undefined;
+      });
+    }
+  }
+
+  return mount;
+}
+
+function hydrateComponentAndGetMount(componentDef, host) {
+  var componentId = componentDef.id;
+  var component = componentDef.h_;
+  var rootNode = serverComponentRootNodes[componentId];
+  var renderResult;
+
+  if (rootNode) {
+    delete serverComponentRootNodes[componentId];
+
+    component.L_ = rootNode;
+    componentsByDOMNode.set(rootNode, component);
+
+    if (componentDef._J_ & FLAG_WILL_RERENDER_IN_BROWSER) {
+      component.Y_ = host;
+      renderResult = component._q_(component.R_, true);
+      trackComponent(componentDef);
+      return function mount() {
+        renderResult.afterInsert(host);
+      };
+    } else {
+      trackComponent(componentDef);
+    }
+
+    return function mount() {
+      initComponent(componentDef, host);
+    };
+  }
+}
+
+function trackComponent(componentDef) {
+  var component = componentDef.h_;
+  if (component) {
+    componentLookup[component.id] = component;
+  }
+}
+
+function tryInvoke(fn) {
+  if (fn) fn();
+}
+
 exports.r = register;
-exports.aw_ = getComponentClass;
 exports._Q_ = createComponent;
-exports.at_ = isRegistered;
-exports.au_ = addPendingDef;
+exports.at_ = getComponentClass;
+exports.aj_ = win.$initComponents = initServerRendered;
+
+require("../ComponentsContext")._S_ = initClientRendered;

package/dist/runtime/components/registry/index.js

@@ -40,5 +40,5 @@ scope)
   return new ServerComponent(id, input, out, typeName, customEvents, scope);
 }
 
-exports.ax_ = true;
+exports.au_ = true;
 exports._Q_ = createComponent;

package/dist/runtime/components/renderer.js

@@ -5,7 +5,7 @@ var ComponentsContext = require("./ComponentsContext");
 var getComponentsContext = ComponentsContext.o_;
 var registry = require("./registry");
 var copyProps = require("raptor-util/copyProps");
-var isServer = componentsUtil.ax_ === true;
+var isServer = componentsUtil.au_ === true;
 var beginComponent = require("./beginComponent");
 var endComponent = require("./endComponent");
 
@@ -42,7 +42,7 @@ function handleBeginAsync(event) {
   asyncOut.c(
   parentOut.g_,
   parentOut.i_,
-  parentOut.ay_);
+  parentOut.av_);
 
 }
 
@@ -106,7 +106,7 @@ renderingLogic)
       // that were provided.
       if (parentComponentDef) {
         // console.log('componentArgs:', componentArgs);
-        customEvents = out.ay_;
+        customEvents = out.av_;
 
         if (key != null) {
           id = resolveComponentKey(key.toString(), parentComponentDef);
@@ -190,7 +190,7 @@ renderingLogic)
             // We put a placeholder element in the output stream to ensure that the existing
             // DOM node is matched up correctly when using morphdom. We flag the VElement
             // node to track that it is a preserve marker
-            out.az_(component);
+            out.aw_(component);
             globalComponentsContext._V_[id] = true;
             component.J_(); // The component is no longer dirty so reset internal flags
             return;

package/dist/runtime/components/update-manager.js

@@ -4,7 +4,7 @@ var updatesScheduled = false;
 var batchStack = []; // A stack of batched updates
 var unbatchedQueue = []; // Used for scheduled batched updates
 
-var setImmediate = require("../setImmediate").aA_;
+var setImmediate = require("../setImmediate").ax_;
 
 /**
  * This function is called when we schedule the update of "unbatched"
@@ -54,7 +54,7 @@ function batchUpdate(func) {
   // batched update completes we invoke the "afterUpdate"
   // event listeners.
   var batch = {
-    aB_: null
+    ay_: null
   };
 
   batchStack.push(batch);
@@ -65,8 +65,8 @@ function batchUpdate(func) {
     try {
       // Update all of the components that where queued up
       // in this batch (if any)
-      if (batch.aB_) {
-        updateComponents(batch.aB_);
+      if (batch.ay_) {
+        updateComponents(batch.ay_);
       }
     } finally {
       // Now that we have completed the update of all the components
@@ -89,10 +89,10 @@ function queueComponentUpdate(component) {
     // We default the batch queue to null to avoid creating an Array instance
     // unnecessarily. If it is null then we create a new Array, otherwise
     // we push it onto the existing Array queue
-    if (batch.aB_) {
-      batch.aB_.push(component);
+    if (batch.ay_) {
+      batch.ay_.push(component);
     } else {
-      batch.aB_ = [component];
+      batch.ay_ = [component];
     }
   } else {
     // We are not within a batched update. We need to schedule a batch update

package/dist/runtime/components/util/index-browser.js

@@ -27,7 +27,7 @@ function getComponentForEl(el, host) {
         component = componentsByDOMNode.get(node);
       }
     } else if (vElement = vElementsByDOMNode.get(node)) {
-      component = vElement.aC_;
+      component = vElement.az_;
     }
 
     if (component) {
@@ -103,7 +103,7 @@ function getMarkoPropsFromEl(el) {
   var virtualProps;
 
   if (vElement) {
-    virtualProps = vElement.aD_;
+    virtualProps = vElement.aA_;
   } else {
     virtualProps = vPropsByDOMNode.get(el);
     if (!virtualProps) {
@@ -170,10 +170,10 @@ componentId)
 exports.am_ = runtimeId;
 exports.D_ = componentLookup;
 exports.ai_ = getComponentForEl;
-exports.aE_ = destroyComponentForNode;
+exports.aB_ = destroyComponentForNode;
 exports.E_ = destroyNodeRecursive;
 exports._U_ = nextComponentIdProvider;
 exports._D_ = attachBubblingEvent;
 exports.an_ = getMarkoPropsFromEl;
 exports.aq_ = addComponentRootToKeyedElements;
-exports.aF_ = normalizeComponentKey;
+exports.aC_ = normalizeComponentKey;

package/dist/runtime/components/util/index.js

@@ -53,9 +53,9 @@ extraArgs)
 }
 
 exports._U_ = nextComponentIdProvider;
-exports.ax_ = true;
+exports.au_ = true;
 exports._D_ = attachBubblingEvent;
-exports.aE_ = function noop() {};
+exports.aB_ = function noop() {};
 exports.E_ = function noop() {};
 
 // eslint-disable-next-line no-constant-condition

package/dist/runtime/createOut.js

@@ -8,6 +8,6 @@ function createOut(globalData) {
   return actualCreateOut(globalData);
 }
 
-createOut.aG_ = setCreateOut;
+createOut.aD_ = setCreateOut;
 
 module.exports = createOut;

package/dist/runtime/dom-insert.js

@@ -1,12 +1,12 @@
 "use strict";var extend = require("raptor-util/extend");
 var componentsUtil = require("./components/util");
-var destroyComponentForNode = componentsUtil.aE_;
+var destroyComponentForNode = componentsUtil.aB_;
 var destroyNodeRecursive = componentsUtil.E_;
 var helpers = require("./vdom/morphdom/helpers");
 
-var insertBefore = helpers.aH_;
-var insertAfter = helpers.aI_;
-var removeChild = helpers.aJ_;
+var insertBefore = helpers.aE_;
+var insertAfter = helpers.aF_;
+var removeChild = helpers.aG_;
 
 function resolveEl(el) {
   if (typeof el == "string") {

package/dist/runtime/helpers/_change-case.js

@@ -6,7 +6,7 @@ var dashToCamelLookup = Object.create(null);
 /**
  * Helper for converting camelCase to dash-case.
  */
-exports.aK_ = function camelToDashCase(name) {
+exports.aH_ = function camelToDashCase(name) {
   var nameDashed = camelToDashLookup[name];
   if (!nameDashed) {
     nameDashed = camelToDashLookup[name] = name.
@@ -24,7 +24,7 @@ exports.aK_ = function camelToDashCase(name) {
 /**
  * Helper for converting dash-case to camelCase.
  */
-exports.aL_ = function dashToCamelCase(name) {
+exports.aI_ = function dashToCamelCase(name) {
   var nameCamel = dashToCamelLookup[name];
   if (!nameCamel) {
     nameCamel = dashToCamelLookup[name] = name.replace(