marko 5.37.47 → 5.37.49

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.49",
   "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,15 +10,56 @@ const defaultCreateOut = require("../../createOut");
 const dynamicTag5 = require("../dynamic-tag");
 
 exports.p = function (htmlCompat) {
+  const writersByGlobal = 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 writeClassAPIResultToTagsAPI = (result) => {
+    const { writer } = result.out._state;
     htmlCompat.write(writer._content);
+    htmlCompat.writeScript(writer._script);
+    writer._content = writer._scripts = "";
   };
+  const flushScripts = ($global, flushDefs) => {
+    const writers = writersByGlobal.get($global);
+    if (!writers) return "";
+
+    const { classAPI, tagsAPI } = writers;
+    let scripts = "";
+    let componentDefs = flushDefs;
+
+    if (classAPI.length) {
+      componentDefs = flushDefs ? flushDefs.concat(classAPI) : classAPI;
+      writers.classAPI = [];
+    }
+
+    if (componentDefs) {
+      scripts = ___getInitComponentsCodeForDefs($global, componentDefs);
+    }
+
+    if (tagsAPI.length) {
+      const [chunk] = tagsAPI;
+      for (let i = 1; i < tagsAPI.length; i++) {
+        chunk.append(tagsAPI[i]);
+      }
+
+      if (!chunk.boundary.done) {
+        throw new Error(
+          "Cannot serialize promise across tags/class compat layer.",
+        );
+      }
+
+      scripts = concatScripts(chunk.flushScript().scripts, scripts);
+      writers.tagsAPI = [];
+    }
+
+    return scripts;
+  };
+
+  htmlCompat.onFlush((chunk) => {
+    chunk.render(() => {
+      chunk.writeScript(flushScripts(chunk.boundary.state.$global));
+    });
+  });
 
   dynamicTag5.___runtimeCompat = function tagsToVdom(
     tagsRenderer,
@@ -42,11 +86,33 @@ exports.p = function (htmlCompat) {
   const TagsCompatId = "tags-compat";
   const TagsCompat = createRenderer(
     function (_, out, componentDef, component) {
+      // class to tags
+      const $global = out.global;
+      let writers = writersByGlobal.get($global);
+      if (!writers) {
+        writersByGlobal.set($global, (writers = { classAPI: [], tagsAPI: [] }));
+        out.prependListener("___toString", (writer) => {
+          const defs = writer._data?.componentDefs;
+          const scripts = flushScripts($global, defs);
+          if (scripts) {
+            if (defs) writer._data.componentDefs = undefined;
+            writer.script(scripts);
+          }
+        });
+      }
+
       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,
+        writers.tagsAPI,
+      );
       out.ef();
     },
     // eslint-disable-next-line no-constant-condition
@@ -64,8 +130,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._ ||
@@ -78,16 +145,24 @@ exports.p = function (htmlCompat) {
       htmlCompat.registerRenderBody(renderBody5);
     }
     return (input, ...args) => {
-      const out = defaultCreateOut(htmlCompat.$global());
-      const branchId = htmlCompat.peekNextScopeId();
+      // tags to class
+      const $global = htmlCompat.$global();
+      htmlCompat.ensureState($global);
+      let writers = writersByGlobal.get($global);
+      if (!writers) {
+        writersByGlobal.set($global, (writers = { classAPI: [], tagsAPI: [] }));
+      }
+
+      const out = defaultCreateOut($global);
+      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,28 +172,37 @@ 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 (result.out.___components) {
+          ___addComponentsFromContext(
+            result.out.___components,
+            writers.classAPI,
+          );
+        }
         if (!async) {
           async = false;
-          writeHTML(result);
+          writeClassAPIResultToTagsAPI(result);
         }
       });
 
@@ -126,10 +210,14 @@ exports.p = function (htmlCompat) {
 
       if (async !== false) {
         async = true;
-        htmlCompat.fork(scopeId, accessor, out, writeHTML);
+        htmlCompat.fork(scopeId, accessor, out, writeClassAPIResultToTagsAPI);
       }
     };
   });
 
   return htmlCompat.registerRenderer;
 };
+
+function concatScripts(a, b) {
+  return a ? (b ? a + ";" + b : a) : b;
+}