marko 5.37.47 → 5.37.48

package/dist/runtime/vdom/vdom.js

@@ -12,7 +12,7 @@ var specialHtmlRegexp = /[&<]/;
 function virtualizeChildNodes(node, vdomParent, ownerComponent) {
   var curChild = node.firstChild;
   while (curChild) {
-    vdomParent.bP_(virtualize(curChild, ownerComponent));
+    vdomParent.bQ_(virtualize(curChild, ownerComponent));
     curChild = curChild.nextSibling;
   }
 }
@@ -20,7 +20,7 @@ function virtualizeChildNodes(node, vdomParent, ownerComponent) {
 function virtualize(node, ownerComponent) {
   switch (node.nodeType) {
     case 1:
-      return VElement.ci_(node, virtualizeChildNodes, ownerComponent);
+      return VElement.cj_(node, virtualizeChildNodes, ownerComponent);
     case 3:
       return new VText(node.nodeValue, ownerComponent);
     case 8:
@@ -43,7 +43,7 @@ function virtualizeHTML(html, ownerComponent) {
 
   while (curChild) {
     virtualized = virtualize(curChild, ownerComponent);
-    if (virtualized) vdomFragment.bP_(virtualized);
+    if (virtualized) vdomFragment.bQ_(virtualized);
     curChild = curChild.nextSibling;
   }
 
@@ -70,19 +70,19 @@ Node_prototype.t = function (value) {
     }
   }
 
-  this.bP_(vdomNode || new VText(value.toString()));
-  return this.ch_();
+  this.bQ_(vdomNode || new VText(value.toString()));
+  return this.ci_();
 };
 
-Node_prototype.bU_ = function () {
-  return this.bP_(new VDocumentFragment());
+Node_prototype.bV_ = function () {
+  return this.bQ_(new VDocumentFragment());
 };
 
-exports.by_ = VComment;
-exports.bz_ = VDocumentFragment;
-exports.bx_ = VElement;
-exports.bA_ = VText;
-exports.bB_ = VComponent;
-exports.bC_ = VFragment;
-exports.ci_ = virtualize;
-exports.bD_ = virtualizeHTML;
+exports.bz_ = VComment;
+exports.bA_ = VDocumentFragment;
+exports.by_ = VElement;
+exports.bB_ = VText;
+exports.bC_ = VComponent;
+exports.bD_ = VFragment;
+exports.cj_ = virtualize;
+exports.bE_ = virtualizeHTML;

package/dist/translator/util/get-component-files.js

@@ -2,7 +2,7 @@
 
 var _escapeRegexp = require("./escape-regexp");
 
-const COMPONENT_FILES_KEY = "cs_";
+const COMPONENT_FILES_KEY = "ct_";
 
 function getComponentFiles({ hub: { file } }) {
   const meta = file.metadata.marko;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marko",
-  "version": "5.37.47",
+  "version": "5.37.48",
   "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
   "keywords": [
     "front-end",

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

@@ -34,7 +34,7 @@ function isNotEmpty(obj) {
 function safeStringify(data) {
   return JSON.stringify(warp10.stringifyPrepare(data)).replace(
     safeJSONRegExp,
-    safeJSONReplacer
+    safeJSONReplacer,
   );
 }
 
@@ -76,7 +76,7 @@ function addComponentsFromContext(componentsContext, componentsToHydrate) {
     var input = component.input || 0;
     var typeName = component.typeName;
     var customEvents = component.___customEvents;
-    var scope = component.___scope;
+    var scope = component.___scope || undefined;
     var bubblingDomEvents = component.___bubblingDomEvents;
 
     var needsState;
@@ -183,9 +183,8 @@ function addComponentsFromContext(componentsContext, componentsToHydrate) {
   }
 }
 
-function getInitComponentsData(out, componentDefs) {
+function getInitComponentsData($global, componentDefs) {
   const len = componentDefs.length;
-  const $global = out.global;
   const isLast = $global.___isLastFlush;
   const didSerializeComponents = $global.___didSerializeComponents;
   const prefix = getRenderId($global);
@@ -251,7 +250,7 @@ function getInitComponentsDataFromOut(out) {
   addComponentsFromContext(componentsContext, componentsToHydrate);
 
   $global.___isLastFlush = true;
-  const data = getInitComponentsData(out, componentsToHydrate);
+  const data = getInitComponentsData($global, componentsToHydrate);
   $global.___isLastFlush = undefined;
 
   if (runtimeId !== DEFAULT_RUNTIME_ID && data) {
@@ -267,26 +266,34 @@ function writeInitComponentsCode(out) {
 
 exports.___getInitComponentsCode = function getInitComponentsCode(
   out,
-  componentDefs
+  componentDefs,
 ) {
-  const initComponentsData =
+  const $global = out.global;
+  return getInitComponentsCodeFromData(
+    $global,
     arguments.length === 2
-      ? getInitComponentsData(out, componentDefs)
-      : getInitComponentsDataFromOut(out);
+      ? getInitComponentsData($global, componentDefs)
+      : getInitComponentsDataFromOut(out),
+  );
+};
 
+function getInitComponentsCodeFromData($global, initComponentsData) {
   if (initComponentsData === undefined) {
     return "";
   }
 
-  const runtimeId = out.global.runtimeId;
+  const runtimeId = $global.runtimeId;
   const componentGlobalKey =
     runtimeId === DEFAULT_RUNTIME_ID ? "MC" : runtimeId + "_C";
 
   return `$${componentGlobalKey}=(window.$${componentGlobalKey}||[]).concat(${safeStringify(
-    initComponentsData
+    initComponentsData,
   )})`;
-};
+}
 
+exports.___getInitComponentsCodeForDefs = function getInitComponentsCodeForDefs($global, defs) {
+  return getInitComponentsCodeFromData($global, getInitComponentsData($global, defs));
+}
 exports.___addComponentsFromContext = addComponentsFromContext;
 exports.writeInitComponentsCode = writeInitComponentsCode;
 

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

@@ -53,7 +53,7 @@ exports.p = function (domCompat) {
       const tagsRenderer = domCompat.resolveRegistered(_.r, global);
       const newNode = domCompat.render(out, component, tagsRenderer, input);
 
-      out.bf(out.___assignedKey, component, !newNode);
+      out.bf("1", component, !newNode);
       if (newNode) {
         out.node({ ___actualize: () => newNode });
       }
@@ -124,7 +124,7 @@ exports.p = function (domCompat) {
   domCompat.init(noopRenderer);
 
   function renderAndMorph(scope, renderer, renderBody, input) {
-    const out = defaultCreateOut();
+    const out = defaultCreateOut(scope.$global);
     let host = domCompat.getStartNode(scope);
     let rootNode = host.fragment;
     if (!rootNode) {
@@ -132,7 +132,7 @@ exports.p = function (domCompat) {
         ___componentLookup[scope.m5c]);
       rootNode = component.___rootNode;
       host = rootNode.startNode;
-      domCompat.setScopeNodes(host, rootNode.endNode);
+      domCompat.setScopeNodes(host, rootNode.startNode, rootNode.endNode);
     }
     const existingComponent = scope.___marko5Component;
     const componentsContext = ___getComponentsContext(out);

package/src/runtime/helpers/tags-compat/runtime-html.js

@@ -1,4 +1,7 @@
-const initComponentsTag = require("../../../core-tags/components/init-components-tag");
+const {
+  ___getInitComponentsCodeForDefs,
+  ___addComponentsFromContext,
+} = require("@internal/components-entry");
 const {
   ___getComponentsContext,
 } = require("../../components/ComponentsContext");
@@ -7,16 +10,45 @@ const defaultCreateOut = require("../../createOut");
 const dynamicTag5 = require("../dynamic-tag");
 
 exports.p = function (htmlCompat) {
+  const outsByGlobal = new WeakMap();
   const isMarko6 = (fn) => htmlCompat.isTagsAPI(fn);
   const isMarko5 = (fn) => !isMarko6(fn);
   const writeHTML = (result) => {
-    const state = result.out._state;
-    const writer = state.writer;
-    state.events.emit("___toString", writer);
-    htmlCompat.writeScript(writer._scripts);
+    const { out } = result;
+    const $global = out.global;
+    const outs = outsByGlobal.get($global);
+    const writer = out._state.writer;
     htmlCompat.write(writer._content);
+    writer._content = "";
+    if (outs) {
+      outs.push(out);
+    } else {
+      outsByGlobal.set($global, [out]);
+    }
   };
 
+  htmlCompat.onFlush((chunk) => {
+    const { $global } = chunk.boundary.state;
+    const outs = outsByGlobal.get($global);
+    if (outs) {
+      chunk.render(() => {
+        const defs = [];
+        outsByGlobal.delete($global);
+        for (const out of outs) {
+          if (out.___components) {
+            ___addComponentsFromContext(out.___components, defs);
+          }
+
+          out._state.events.emit("___toString", out._state.writer);
+          chunk.writeScript(out._state.writer._content);
+          chunk.writeScript(out._state.writer._scripts);
+        }
+
+        chunk.writeScript(___getInitComponentsCodeForDefs($global, defs));
+      });
+    }
+  });
+
   dynamicTag5.___runtimeCompat = function tagsToVdom(
     tagsRenderer,
     renderBody,
@@ -44,9 +76,16 @@ exports.p = function (htmlCompat) {
     function (_, out, componentDef, component) {
       const input = _.i;
       const tagsRenderer = _.r;
-      const willRerender = componentDef._wrr;
-      out.bf(out.___assignedKey, component, willRerender);
-      htmlCompat.render(tagsRenderer, willRerender, out, component, input);
+      const willRerender = componentDef._wrr || htmlCompat.isInResumedBranch();
+      out.bf("1", component, willRerender);
+      htmlCompat.render(
+        tagsRenderer,
+        willRerender,
+        out,
+        component,
+        input,
+        "___toString",
+      );
       out.ef();
     },
     // eslint-disable-next-line no-constant-condition
@@ -64,8 +103,9 @@ exports.p = function (htmlCompat) {
   );
 
   htmlCompat.patchDynamicTag(function getRenderer(scopeId, accessor, tag) {
-    const renderer = tag._ || tag.renderBody || tag;
-    if (isMarko6(renderer)) return renderer;
+    if (!tag || isMarko6(tag._ || tag.content || tag)) {
+      return tag;
+    }
 
     const renderer5 =
       tag._ ||
@@ -79,15 +119,15 @@ exports.p = function (htmlCompat) {
     }
     return (input, ...args) => {
       const out = defaultCreateOut(htmlCompat.$global());
-      const branchId = htmlCompat.peekNextScopeId();
+      const branchId = htmlCompat.nextScopeId();
       let customEvents;
-      htmlCompat.nextScopeId();
 
       if (renderer5) {
-        const normalizedInput = {};
+        const originalInput = input;
+        input = {};
 
-        for (const key in input) {
-          const value = input[key];
+        for (const key in originalInput) {
+          const value = originalInput[key];
           if (/^on[-A-Z]/.test(key)) {
             if (typeof value === "function") {
               (customEvents || (customEvents = [])).push([
@@ -97,23 +137,26 @@ exports.p = function (htmlCompat) {
               value.toJSON = htmlCompat.toJSON;
             }
           } else {
-            normalizedInput[key === "content" ? "renderBody" : key] = value;
+            input[key === "content" ? "renderBody" : key] = value;
           }
         }
-        renderer5(normalizedInput, out);
+      }
+
+      if (renderer5) {
+        renderer5(input, out);
       } else {
         renderBody5(out, input, ...args);
       }
 
       const componentsContext = ___getComponentsContext(out);
-      const component = componentsContext.___components[0];
-      if (component) {
-        component.___component.___customEvents = customEvents;
-        htmlCompat.writeSetScopeForComponent(branchId, component.id);
+      const componentDef = componentsContext.___components[0];
+      if (componentDef) {
+        componentDef.___component.___customEvents = customEvents;
+        componentDef._wrr = true;
+        componentDef.___flags |= 1; // FLAG_WILL_RERENDER_IN_BROWSER
+        htmlCompat.writeSetScopeForComponent(branchId, componentDef.id);
       }
 
-      initComponentsTag({}, out);
-
       let async;
       out.once("finish", (result) => {
         if (!async) {