marko 4.24.6 → 4.26.0

package/src/{runtime/components/init-components-browser.js → node_modules/@internal/components-registry/index-browser.js}

@@ -1,28 +1,162 @@
-"use strict";
 var complain = "MARKO_DEBUG" && require("complain");
 var warp10Finalize = require("warp10/finalize");
-var eventDelegation = require("./event-delegation");
-var win = window;
-var defaultDocument = document;
-var createFragmentNode = require("../vdom/morphdom/fragment")
-  .___createFragmentNode;
-var componentsUtil = require("./util-browser");
+var queueMicrotask = require("../../../runtime/queueMicrotask");
+var defineComponent = require("../../../runtime/components/defineComponent");
+var eventDelegation = require("../../../runtime/components/event-delegation");
+var createFragmentNode =
+  require("../../../runtime/vdom/morphdom/fragment").___createFragmentNode;
+var ComponentDef = require("../../../runtime/components/ComponentDef");
+var domData = require("../../../runtime/components/dom-data");
+var componentsUtil = require("@internal/components-util");
 var componentLookup = componentsUtil.___componentLookup;
 var addComponentRootToKeyedElements =
   componentsUtil.___addComponentRootToKeyedElements;
-var ComponentDef = require("./ComponentDef");
-var registry = require("./registry");
-var domData = require("./dom-data");
 var keyedElementsByComponentId = domData.___ssrKeyedElementsByComponentId;
 var componentsByDOMNode = domData.___componentByDOMNode;
 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 FLAG_IS_LEGACY = 4;
-// var FLAG_OLD_HYDRATE_NO_CREATE = 8;
+
+var registered = {};
+var loaded = {};
+var componentTypes = {};
+var deferredDefs;
+var pendingDefs;
+
+function register(type, def) {
+  var pendingForType;
+  if (pendingDefs) {
+    pendingForType = pendingDefs[type];
+  }
+  registered[type] = def;
+  delete loaded[type];
+  delete componentTypes[type];
+
+  if (pendingForType) {
+    delete pendingDefs[type];
+    queueMicrotask(function () {
+      pendingForType.forEach(function (args) {
+        tryHydrateComponent(args[0], args[1], args[2], args[3])();
+      });
+    });
+  }
+
+  return type;
+}
+
+function addPendingDef(def, type, meta, host, runtimeId) {
+  if (!pendingDefs) {
+    pendingDefs = {};
+
+    // eslint-disable-next-line no-constant-condition
+    if ("MARKO_DEBUG") {
+      document.addEventListener("load", function () {
+        var pendingComponentIds = Object.keys(pendingDefs);
+        if (pendingComponentIds.length) {
+          complain(
+            "Marko templates were never loaded for: " + pendingComponentIds
+          );
+        }
+      });
+    }
+  }
+  (pendingDefs[type] = pendingDefs[type] || []).push([
+    def,
+    meta,
+    host,
+    runtimeId
+  ]);
+}
+
+function load(typeName, isLegacy) {
+  var target = loaded[typeName];
+  if (!target) {
+    target = registered[typeName];
+
+    if (target) {
+      target = target();
+    } else if (isLegacy) {
+      target = exports.___legacy.load(typeName);
+    } else {
+      target = loader(typeName);
+      // eslint-disable-next-line no-constant-condition
+      if ("MARKO_DEBUG") {
+        complain(
+          "Looks like you used `require:` in your browser.json to load a component.  This requires that Marko has knowledge of how lasso generates paths and will be removed in a future version.  `marko-dependencies:/path/to/template.marko` should be used instead."
+        );
+      }
+    }
+
+    if (!target) {
+      throw Error("Component not found: " + typeName);
+    }
+
+    loaded[typeName] = target;
+  }
+
+  return target;
+}
+
+function getComponentClass(typeName, isLegacy) {
+  var ComponentClass = componentTypes[typeName];
+
+  if (ComponentClass) {
+    return ComponentClass;
+  }
+
+  ComponentClass = load(typeName, isLegacy);
+
+  ComponentClass = ComponentClass.Component || ComponentClass;
+
+  if (!ComponentClass.___isComponent) {
+    ComponentClass = defineComponent(ComponentClass, ComponentClass.renderer);
+  }
+
+  // Make the component "type" accessible on each component instance
+  ComponentClass.prototype.___type = typeName;
+
+  // eslint-disable-next-line no-constant-condition
+  if ("MARKO_DEBUG") {
+    var classNameMatch =
+      /\/([^/]+?)(?:\/index|\/template|)(?:\.marko|\.component(?:-browser)?|)$/.exec(
+        typeName
+      );
+    var className = classNameMatch ? classNameMatch[1] : "AnonymousComponent";
+    className = className.replace(/-(.)/g, function (g) {
+      return g[1].toUpperCase();
+    });
+    className = className
+      .replace(/\$\d+\.\d+\.\d+$/, "")
+      .replace(/^[^a-z$_]/i, "_$&")
+      .replace(/[^0-9a-z$_]+/gi, "_");
+    className = className[0].toUpperCase() + className.slice(1);
+    // eslint-disable-next-line no-unused-vars
+    try {
+      var OldComponentClass = ComponentClass;
+      eval(
+        "ComponentClass = function " +
+          className +
+          "(id, doc) { OldComponentClass.call(this, id, doc); }"
+      );
+      ComponentClass.prototype = OldComponentClass.prototype;
+    } catch (e) {
+      /** ignore error */
+    }
+  }
+
+  componentTypes[typeName] = ComponentClass;
+
+  return ComponentClass;
+}
+
+function createComponent(typeName, id, isLegacy) {
+  var ComponentClass = getComponentClass(typeName, isLegacy);
+  return new ComponentClass(id);
+}
 
 function indexServerComponentBoundaries(node, runtimeId, stack) {
   var componentId;
@@ -105,7 +239,7 @@ function indexServerComponentBoundaries(node, runtimeId, stack) {
         keyedElements[markoKey] = node;
       }
       if (markoProps) {
-        Object.keys(markoProps).forEach(function(key) {
+        Object.keys(markoProps).forEach(function (key) {
           if (key.slice(0, 2) === "on") {
             eventDelegation.___addDelegatedEventHandler(key.slice(2));
           }
@@ -130,7 +264,7 @@ function invokeComponentEventHandler(component, targetMethodName, args) {
 function addEventListenerHelper(el, eventType, isOnce, listener) {
   var eventListener = listener;
   if (isOnce) {
-    eventListener = function(event) {
+    eventListener = function (event) {
       listener(event);
       el.removeEventListener(eventType, eventListener);
     };
@@ -152,20 +286,23 @@ function addDOMEventListeners(
   extraArgs,
   handles
 ) {
-  var removeListener = addEventListenerHelper(el, eventType, isOnce, function(
-    event
-  ) {
-    var args = [event, el];
-    if (extraArgs) {
-      args = extraArgs.concat(args);
-    }
+  var removeListener = addEventListenerHelper(
+    el,
+    eventType,
+    isOnce,
+    function (event) {
+      var args = [event, el];
+      if (extraArgs) {
+        args = extraArgs.concat(args);
+      }
 
-    invokeComponentEventHandler(component, targetMethodName, args);
-  });
+      invokeComponentEventHandler(component, targetMethodName, args);
+    }
+  );
   handles.push(removeListener);
 }
 
-function initComponent(componentDef, doc) {
+function initComponent(componentDef, host) {
   var component = componentDef.___component;
 
   if (!component || !component.___isComponent) {
@@ -173,7 +310,7 @@ function initComponent(componentDef, doc) {
   }
 
   component.___reset();
-  component.___document = doc;
+  component.___host = host;
 
   var isExisting = componentDef.___isExisting;
 
@@ -185,7 +322,7 @@ function initComponent(componentDef, doc) {
   if (domEvents) {
     var eventListenerHandles = [];
 
-    domEvents.forEach(function(domEventArgs) {
+    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];
@@ -226,12 +363,11 @@ function initComponent(componentDef, doc) {
  * 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, doc) {
+function initClientRendered(componentDefs, host) {
+  if (!host) host = document;
   // Ensure that event handlers to handle delegating events are
   // always attached before initializing any components
-  eventDelegation.___init(doc);
-
-  doc = doc || defaultDocument;
+  eventDelegation.___init(host);
   var len = componentDefs.length;
   var componentDef;
   var i;
@@ -243,7 +379,7 @@ function initClientRendered(componentDefs, doc) {
 
   for (i = len; i--; ) {
     componentDef = componentDefs[i];
-    initComponent(componentDef, doc);
+    initComponent(componentDef, host);
   }
 }
 
@@ -251,7 +387,7 @@ function initClientRendered(componentDefs, doc) {
  * This method initializes all components that were rendered on the server by iterating over all
  * of the component IDs.
  */
-function initServerRendered(renderedComponents, doc) {
+function initServerRendered(renderedComponents, host) {
   var type = typeof renderedComponents;
   var globalKey = "$";
   var runtimeId;
@@ -266,13 +402,31 @@ function initServerRendered(renderedComponents, doc) {
 
     renderedComponents = win[globalKey];
 
+    // eslint-disable-next-line no-constant-condition
+    if ("MARKO_DEBUG") {
+      if (
+        renderedComponents &&
+        renderedComponents.i !== undefined &&
+        renderedComponents.i !== componentsUtil.___runtimeId
+      ) {
+        console.warn(
+          "Multiple instances of Marko have attached to the same runtime id. This could mean that more than one copy of Marko is loaded on the page, or that the script containing Marko has executed more than once."
+        );
+      }
+    }
+
     var fakeArray = (win[globalKey] = {
       r: runtimeId,
       concat: initServerRendered
     });
 
+    // eslint-disable-next-line no-constant-condition
+    if ("MARKO_DEBUG") {
+      fakeArray.i = componentsUtil.___runtimeId;
+    }
+
     if (renderedComponents && renderedComponents.forEach) {
-      renderedComponents.forEach(function(renderedComponent) {
+      renderedComponents.forEach(function (renderedComponent) {
         fakeArray.concat(renderedComponent);
       });
     }
@@ -285,10 +439,10 @@ function initServerRendered(renderedComponents, doc) {
 
   if (isFromSerializedGlobals) {
     runtimeId = this.r;
-    doc = defaultDocument;
+    host = document;
   } else {
     runtimeId = renderedComponents.r || DEFAULT_RUNTIME_ID;
-    doc = doc || defaultDocument;
+    if (!host) host = document;
 
     // eslint-disable-next-line no-constant-condition
     if ("MARKO_DEBUG") {
@@ -300,7 +454,7 @@ function initServerRendered(renderedComponents, doc) {
 
   // eslint-disable-next-line no-constant-condition
   if ("MARKO_DEBUG") {
-    if (doc !== defaultDocument) {
+    if (host !== document) {
       complain(
         "Passing a document other than the current document to `require('marko/components).init` is deprecated."
       );
@@ -325,8 +479,8 @@ function initServerRendered(renderedComponents, doc) {
 
   // Ensure that event handlers to handle delegating events are
   // always attached before initializing any components
-  indexServerComponentBoundaries(doc, runtimeId);
-  eventDelegation.___init(doc);
+  indexServerComponentBoundaries(host, runtimeId);
+  eventDelegation.___init(host);
 
   if (renderedComponents.g) {
     meta.___globals = renderedComponents.g;
@@ -340,39 +494,13 @@ function initServerRendered(renderedComponents, doc) {
 
   // hydrate components top down (leaf nodes last)
   // and return an array of functions to mount these components
-  var deferredDefs;
   (renderedComponents.w || [])
-    .map(function(componentDef) {
-      componentDef = ComponentDef.___deserialize(
-        componentDef,
-        meta.___types,
-        meta.___globals,
-        registry
-      );
-
-      var mount = hydrateComponentAndGetMount(componentDef, doc);
+    .map(function (componentDef) {
+      var typeName = meta.___types[componentDef[1]];
 
-      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];
-          doc.addEventListener("DOMContentLoaded", function() {
-            indexServerComponentBoundaries(doc, runtimeId);
-            deferredDefs
-              .map(function(componentDef) {
-                return hydrateComponentAndGetMount(componentDef, doc);
-              })
-              .reverse()
-              .forEach(tryInvoke);
-          });
-        }
-      }
-
-      return mount;
+      return registered[typeName] || document.readyState === "complete"
+        ? tryHydrateComponent(componentDef, meta, host, runtimeId)
+        : addPendingDef(componentDef, typeName, meta, host, runtimeId);
     })
     .reverse()
     .forEach(tryInvoke);
@@ -380,7 +508,40 @@ function initServerRendered(renderedComponents, doc) {
   return this;
 }
 
-function hydrateComponentAndGetMount(componentDef, doc) {
+function tryHydrateComponent(rawDef, meta, host, runtimeId) {
+  var componentDef = ComponentDef.___deserialize(
+    rawDef,
+    meta.___types,
+    meta.___globals,
+    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.___component;
   var rootNode = serverComponentRootNodes[componentId];
@@ -393,18 +554,18 @@ function hydrateComponentAndGetMount(componentDef, doc) {
     componentsByDOMNode.set(rootNode, component);
 
     if (componentDef.___flags & FLAG_WILL_RERENDER_IN_BROWSER) {
-      component.___document = doc;
+      component.___host = host;
       renderResult = component.___rerender(component.___input, true);
       trackComponent(componentDef);
       return function mount() {
-        renderResult.afterInsert(doc);
+        renderResult.afterInsert(host);
       };
     } else {
       trackComponent(componentDef);
     }
 
     return function mount() {
-      initComponent(componentDef, doc);
+      initComponent(componentDef, host);
     };
   }
 }
@@ -420,5 +581,9 @@ function tryInvoke(fn) {
   if (fn) fn();
 }
 
-exports.___initClientRendered = initClientRendered;
-exports.___initServerRendered = initServerRendered;
+exports.r = register;
+exports.___createComponent = createComponent;
+exports.___getComponentClass = getComponentClass;
+exports.___initServerRendered = win.$initComponents = initServerRendered;
+
+require("../../../runtime/components/ComponentsContext").___initClientRendered = initClientRendered;

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

@@ -0,0 +1,44 @@
+"use strict";
+const copyProps = require("raptor-util/copyProps");
+const constructorCache = new Map();
+const BaseServerComponent = require("../../../runtime/components/ServerComponent");
+
+function createServerComponentClass(renderingLogic) {
+  var renderingLogicProps =
+    typeof renderingLogic === "function"
+      ? renderingLogic.prototype
+      : renderingLogic;
+
+  class ServerComponent extends BaseServerComponent {}
+
+  copyProps(renderingLogicProps, ServerComponent.prototype);
+
+  return ServerComponent;
+}
+function createComponent(
+  renderingLogic,
+  id,
+  input,
+  out,
+  typeName,
+  customEvents,
+  scope
+) {
+  let ServerComponent;
+
+  if (renderingLogic) {
+    ServerComponent = constructorCache.get(renderingLogic);
+
+    if (!ServerComponent) {
+      ServerComponent = createServerComponentClass(renderingLogic);
+      constructorCache.set(renderingLogic, ServerComponent);
+    }
+  } else {
+    ServerComponent = BaseServerComponent;
+  }
+
+  return new ServerComponent(id, input, out, typeName, customEvents, scope);
+}
+
+exports.___isServer = true;
+exports.___createComponent = createComponent;

package/src/node_modules/@internal/components-registry/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "./index.js",
+  "browser": "./index-browser.js",
+  "exports": {
+    ".": {
+      "worker": "./index.js",
+      "browser": "./index-browser.js",
+      "default": "./index.js"
+    }
+  }
+}

package/src/{runtime/components/util-browser.js → node_modules/@internal/components-util/index-browser.js}

@@ -1,4 +1,4 @@
-var domData = require("./dom-data");
+var domData = require("../../../runtime/components/dom-data");
 var componentsByDOMNode = domData.___componentByDOMNode;
 var keysByDOMNode = domData.___keyByDOMNode;
 var vElementsByDOMNode = domData.___vElementByDOMNode;
@@ -8,12 +8,13 @@ var runtimeId = markoUID.i++;
 
 var componentLookup = {};
 
-var defaultDocument = document;
 var EMPTY_OBJECT = {};
 
-function getComponentForEl(el, doc) {
+function getComponentForEl(el, host) {
   var node =
-    typeof el == "string" ? (doc || defaultDocument).getElementById(el) : el;
+    typeof el == "string"
+      ? ((host ? host.ownerDocument : host) || document).getElementById(el)
+      : el;
   var component;
   var vElement;
 
@@ -141,13 +142,13 @@ function addComponentRootToKeyedElements(
 
 // eslint-disable-next-line no-constant-condition
 if ("MARKO_DEBUG") {
-  var warnNodeRemoved = function(event) {
+  var warnNodeRemoved = function (event) {
     var fragment = event.target.fragment;
     if (fragment) {
       var baseError = new Error(
         "Fragment boundary marker removed.  This will cause an error when the fragment is updated."
       );
-      fragment.___markersRemovedError = function(message) {
+      fragment.___markersRemovedError = function (message) {
         var error = new Error(message + " Boundary markers missing.");
 
         baseError.stack = baseError.stack.replace(/.*warnNodeRemoved.*\n/, "");
@@ -158,11 +159,11 @@ if ("MARKO_DEBUG") {
       };
     }
   };
-  exports.___startDOMManipulationWarning = function() {
-    document.addEventListener("DOMNodeRemoved", warnNodeRemoved);
+  exports.___startDOMManipulationWarning = function (host) {
+    host.addEventListener("DOMNodeRemoved", warnNodeRemoved);
   };
-  exports.___stopDOMManipulationWarning = function() {
-    document.removeEventListener("DOMNodeRemoved", warnNodeRemoved);
+  exports.___stopDOMManipulationWarning = function (host) {
+    host.removeEventListener("DOMNodeRemoved", warnNodeRemoved);
   };
 }
 

package/src/{runtime/components/util.js → node_modules/@internal/components-util/index.js}

@@ -1,7 +1,5 @@
 var FLAG_WILL_RERENDER_IN_BROWSER = 1;
 // var FLAG_HAS_RENDER_BODY = 2;
-// var FLAG_IS_LEGACY = 4;
-// var FLAG_OLD_HYDRATE_NO_CREATE = 8;
 
 function nextComponentIdProvider(out) {
   var prefix = out.global.componentIdPrefix || out.global.widgetIdPrefix || "s"; // "s" is for server (we use "b" for the browser)

package/src/node_modules/@internal/components-util/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "./index.js",
+  "browser": "./index-browser.js",
+  "exports": {
+    ".": {
+      "worker": "./index.js",
+      "browser": "./index-browser.js",
+      "default": "./index.js"
+    }
+  }
+}

package/src/node_modules/@internal/create-readable/index-browser.js

@@ -0,0 +1,30 @@
+var encoder = new TextEncoder();
+var noop = function () {};
+
+module.exports = function (data) {
+  // eslint-disable-next-line no-undef
+  var transformStream = new TransformStream();
+  var writer = transformStream.writable.getWriter();
+  var facade = {
+    write: function (string) {
+      writer.write(encoder.encode(string));
+    },
+    end: function () {
+      writer.close();
+    }
+  };
+  var out = this.createOut(
+    data && data.$global,
+    facade,
+    undefined,
+    this.___shouldBuffer
+  );
+  out.once("error", err => {
+    facade.write = facade.end = noop;
+    writer.abort(err);
+  });
+  this.render(data, out);
+  out.end();
+
+  return transformStream.readable;
+};

package/src/node_modules/@internal/create-readable/index.js

@@ -0,0 +1,57 @@
+var stream = require("stream");
+
+var OutgoingMessageProto = require("http").OutgoingMessage.prototype;
+if (String(OutgoingMessageProto.flush).indexOf("deprecated") !== -1) {
+  // Yes, we are monkey-patching http. This method should never have been added and it was introduced on
+  // the iojs fork. It was quickly deprecated and I'm 99% sure no one is actually using it.
+  // See:
+  // - https://github.com/marko-js/async-writer/issues/3
+  // - https://github.com/nodejs/node/issues/2920
+  //
+  // This method causes problems since marko looks for the flush method and calls it found.
+  // The `res.flush()` method is introduced by the [compression](https://www.npmjs.com/package/compression)
+  // middleware, but, otherwise, it should typically not exist.
+  delete OutgoingMessageProto.flush;
+}
+
+class Readable extends stream.Readable {
+  constructor(template, data) {
+    super();
+    this.___template = template;
+    this.___data = data;
+    this.___rendered = false;
+  }
+
+  write(data) {
+    if (data != null) {
+      this.push(data);
+    }
+  }
+
+  end() {
+    this.push(null);
+  }
+
+  _read() {
+    if (this.___rendered) {
+      return;
+    }
+
+    this.___rendered = true;
+    var template = this.___template;
+    var data = this.___data;
+    var globalData = data && data.$global;
+    var out = this.___template.createOut(
+      globalData,
+      this,
+      undefined,
+      template.___shouldBuffer
+    );
+    template.render(data, out);
+    out.end();
+  }
+}
+
+module.exports = function (data) {
+  return new Readable(this, data);
+};

package/src/node_modules/@internal/create-readable/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "./index.js",
+  "browser": "./index-browser.js",
+  "exports": {
+    ".": {
+      "worker": "./index-browser.js",
+      "browser": "./index-browser.js",
+      "default": "./index.js"
+    }
+  }
+}