marko 5.37.48 → 5.37.50

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

@@ -50,7 +50,7 @@ exports.p = function (domCompat) {
   const TagsCompat = createRenderer(
     function (_, out, componentDef, component) {
       const input = Array.isArray(_.i) ? _.i : [_.i];
-      const tagsRenderer = domCompat.resolveRegistered(_.r, global);
+      const tagsRenderer = domCompat.resolveRegistered(_.r, out.global);
       const newNode = domCompat.render(out, component, tagsRenderer, input);
 
       out.bf("1", component, !newNode);

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

@@ -10,43 +10,55 @@ const defaultCreateOut = require("../../createOut");
 const dynamicTag5 = require("../dynamic-tag");
 
 exports.p = function (htmlCompat) {
-  const outsByGlobal = new WeakMap();
+  const writersByGlobal = new WeakMap();
   const isMarko6 = (fn) => htmlCompat.isTagsAPI(fn);
   const isMarko5 = (fn) => !isMarko6(fn);
-  const writeHTML = (result) => {
-    const { out } = result;
-    const $global = out.global;
-    const outs = outsByGlobal.get($global);
-    const writer = out._state.writer;
+  const writeClassAPIResultToTagsAPI = (result) => {
+    const { writer } = result.out._state;
     htmlCompat.write(writer._content);
-    writer._content = "";
-    if (outs) {
-      outs.push(out);
-    } else {
-      outsByGlobal.set($global, [out]);
-    }
+    htmlCompat.writeScript(writer._script);
+    writer._content = writer._scripts = "";
   };
+  const flushScripts = ($global, flushDefs) => {
+    const writers = writersByGlobal.get($global);
+    if (!writers) return "";
 
-  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.b_) {
-            __(out.b_, defs);
-          }
+    const { classAPI, tagsAPI } = writers;
+    let scripts = "";
+    let componentDefs = flushDefs;
 
-          out._state.events.emit("c_", out._state.writer);
-          chunk.writeScript(out._state.writer._content);
-          chunk.writeScript(out._state.writer._scripts);
-        }
+    if (classAPI.length) {
+      componentDefs = flushDefs ? flushDefs.concat(classAPI) : classAPI;
+      writers.classAPI = [];
+    }
 
-        chunk.writeScript(_g_($global, defs));
-      });
+    if (componentDefs) {
+      scripts = _g_($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.bo_ = function tagsToVdom(
@@ -58,22 +70,39 @@ exports.p = function (htmlCompat) {
       return tagsRenderer;
     }
 
-    if (!tagsRenderer && renderBody) {
-      renderBody.toJSON = htmlCompat.toJSON;
-    }
-
-    return (input, out) =>
-    TagsCompat(
-      args ?
-      { i: args, r: (args) => (tagsRenderer || renderBody)(...args) } :
-      { i: input, r: tagsRenderer || renderBody },
-      out
-    );
+    return (input, out) => {
+      if (!tagsRenderer && renderBody) {
+        renderBody.toJSON = htmlCompat.toJSON(
+          htmlCompat.ensureState(out.global)
+        );
+      }
+      TagsCompat(
+        args ?
+        { i: args, r: (args) => (tagsRenderer || renderBody)(...args) } :
+        { i: input, r: tagsRenderer || renderBody },
+        out
+      );
+    };
   };
 
   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("c_", (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 || htmlCompat.isInResumedBranch();
@@ -83,8 +112,8 @@ exports.p = function (htmlCompat) {
         willRerender,
         out,
         component,
-        input, "c_"
-
+        input,
+        writers.tagsAPI
       );
       out.ef();
     },
@@ -118,7 +147,15 @@ exports.p = function (htmlCompat) {
       htmlCompat.registerRenderBody(renderBody5);
     }
     return (input, ...args) => {
-      const out = defaultCreateOut(htmlCompat.$global());
+      // tags to class
+      const $global = htmlCompat.$global();
+      const state = 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;
 
@@ -134,7 +171,7 @@ exports.p = function (htmlCompat) {
               key[2] === "-" ? key.slice(3) : key.slice(2).toLowerCase(),
               value]
               );
-              value.toJSON = htmlCompat.toJSON;
+              value.toJSON = htmlCompat.toJSON(state);
             }
           } else {
             input[key === "content" ? "renderBody" : key] = value;
@@ -159,9 +196,15 @@ exports.p = function (htmlCompat) {
 
       let async;
       out.once("finish", (result) => {
+        if (result.out.b_) {
+          __(
+            result.out.b_,
+            writers.classAPI
+          );
+        }
         if (!async) {
           async = false;
-          writeHTML(result);
+          writeClassAPIResultToTagsAPI(result);
         }
       });
 
@@ -169,10 +212,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;
+}

package/dist/translator/index.js

@@ -428,32 +428,44 @@ const translate = exports.translate = {
         );
       }
 
-      path.pushContainer(
-        "body",
-        _compiler.types.expressionStatement(
-          _compiler.types.assignmentExpression(
-            "=",
-            templateRendererMember,
-            _compiler.types.callExpression(rendererIdentifier, [
-            _compiler.types.functionExpression(
-              null,
-              [
-              _compiler.types.identifier("input"),
-              _compiler.types.identifier("out"),
-              file._componentDefIdentifier,
-              file._componentInstanceIdentifier,
-              _compiler.types.identifier("state"),
-              _compiler.types.identifier("$global")],
-
-              renderBlock.node
-            ),
-            _compiler.types.objectExpression(templateRenderOptionsProps),
-            componentIdentifier]
-            )
-          )
+      let rendererAssignment = _compiler.types.assignmentExpression(
+        "=",
+        templateRendererMember,
+        _compiler.types.callExpression(rendererIdentifier, [
+        _compiler.types.functionExpression(
+          null,
+          [
+          _compiler.types.identifier("input"),
+          _compiler.types.identifier("out"),
+          file._componentDefIdentifier,
+          file._componentInstanceIdentifier,
+          _compiler.types.identifier("state"),
+          _compiler.types.identifier("$global")],
+
+          renderBlock.node
+        ),
+        _compiler.types.objectExpression(templateRenderOptionsProps),
+        componentIdentifier]
         )
       );
 
+      if (!isHTML && componentBrowserFile && !meta.implicitSplitComponent) {
+        rendererAssignment = _compiler.types.assignmentExpression(
+          "=",
+          _compiler.types.memberExpression(
+            (0, _babelUtils.importDefault)(
+              file,
+              (0, _babelUtils.resolveRelativePath)(file, componentBrowserFile),
+              "marko_split_component"
+            ),
+            _compiler.types.identifier("renderer")
+          ),
+          rendererAssignment
+        );
+      }
+
+      path.pushContainer("body", _compiler.types.expressionStatement(rendererAssignment));
+
       if (meta.implicitSplitComponent && isHTML) {
         renderBlock.unshiftContainer(
           "body",

package/dist/translator/util/add-dependencies.js

@@ -43,7 +43,7 @@ const lassoDepPrefix = "package: ";var _default =
 };exports.default = _default;
 
 const entryBuilder = exports.entryBuilder = {
-  build(entryFile) {
+  build(entryFile, exportInit) {
     const state = entryFile[kEntryState];
     if (!state) {
       throw entryFile.path.buildCodeFrameError(
@@ -53,6 +53,7 @@ const entryBuilder = exports.entryBuilder = {
     const { markoOpts } = entryFile;
     const entryMarkoMeta = entryFile.metadata.marko;
     const { body } = state;
+    let didExportInit = false;
     entryMarkoMeta.watchFiles = [...state.watchFiles];
     entryMarkoMeta.deps = [...state.lassoDeps];
 
@@ -69,19 +70,29 @@ const entryBuilder = exports.entryBuilder = {
 
       body.unshift(markoComponentsImport);
 
-      if (markoOpts.hydrateInit) {
+      if (markoOpts.hydrateInit || exportInit) {
+        const initExpression = _compiler.types.callExpression(
+          initId,
+          markoOpts.runtimeId ? [_compiler.types.stringLiteral(markoOpts.runtimeId)] : []
+        );
         markoComponentsImport.specifiers.push(
           _compiler.types.importSpecifier(initId, initId)
         );
+
         body.push(
-          _compiler.types.expressionStatement(
-            _compiler.types.callExpression(
-              initId,
-              markoOpts.runtimeId ? [_compiler.types.stringLiteral(markoOpts.runtimeId)] : []
-            )
-          )
+          exportInit ?
+          _compiler.types.exportDefaultDeclaration(
+            _compiler.types.arrowFunctionExpression([], initExpression)
+          ) :
+          _compiler.types.expressionStatement(initExpression)
         );
       }
+    } else if (exportInit) {
+      body.push(
+        _compiler.types.exportDefaultDeclaration(
+          _compiler.types.arrowFunctionExpression([], _compiler.types.blockStatement([]))
+        )
+      );
     }
 
     return body;

package/package.json

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

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

@@ -50,7 +50,7 @@ exports.p = function (domCompat) {
   const TagsCompat = createRenderer(
     function (_, out, componentDef, component) {
       const input = Array.isArray(_.i) ? _.i : [_.i];
-      const tagsRenderer = domCompat.resolveRegistered(_.r, global);
+      const tagsRenderer = domCompat.resolveRegistered(_.r, out.global);
       const newNode = domCompat.render(out, component, tagsRenderer, input);
 
       out.bf("1", component, !newNode);

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

@@ -10,43 +10,55 @@ const defaultCreateOut = require("../../createOut");
 const dynamicTag5 = require("../dynamic-tag");
 
 exports.p = function (htmlCompat) {
-  const outsByGlobal = new WeakMap();
+  const writersByGlobal = new WeakMap();
   const isMarko6 = (fn) => htmlCompat.isTagsAPI(fn);
   const isMarko5 = (fn) => !isMarko6(fn);
-  const writeHTML = (result) => {
-    const { out } = result;
-    const $global = out.global;
-    const outs = outsByGlobal.get($global);
-    const writer = out._state.writer;
+  const writeClassAPIResultToTagsAPI = (result) => {
+    const { writer } = result.out._state;
     htmlCompat.write(writer._content);
-    writer._content = "";
-    if (outs) {
-      outs.push(out);
-    } else {
-      outsByGlobal.set($global, [out]);
-    }
+    htmlCompat.writeScript(writer._script);
+    writer._content = writer._scripts = "";
   };
+  const flushScripts = ($global, flushDefs) => {
+    const writers = writersByGlobal.get($global);
+    if (!writers) return "";
 
-  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);
-          }
+    const { classAPI, tagsAPI } = writers;
+    let scripts = "";
+    let componentDefs = flushDefs;
 
-          out._state.events.emit("___toString", out._state.writer);
-          chunk.writeScript(out._state.writer._content);
-          chunk.writeScript(out._state.writer._scripts);
-        }
+    if (classAPI.length) {
+      componentDefs = flushDefs ? flushDefs.concat(classAPI) : classAPI;
+      writers.classAPI = [];
+    }
 
-        chunk.writeScript(___getInitComponentsCodeForDefs($global, defs));
-      });
+    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(
@@ -58,22 +70,39 @@ exports.p = function (htmlCompat) {
       return tagsRenderer;
     }
 
-    if (!tagsRenderer && renderBody) {
-      renderBody.toJSON = htmlCompat.toJSON;
-    }
-
-    return (input, out) =>
+    return (input, out) => {
+      if (!tagsRenderer && renderBody) {
+        renderBody.toJSON = htmlCompat.toJSON(
+          htmlCompat.ensureState(out.global),
+        );
+      }
       TagsCompat(
         args
           ? { i: args, r: (args) => (tagsRenderer || renderBody)(...args) }
           : { i: input, r: tagsRenderer || renderBody },
         out,
       );
+    };
   };
 
   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 || htmlCompat.isInResumedBranch();
@@ -84,7 +113,7 @@ exports.p = function (htmlCompat) {
         out,
         component,
         input,
-        "___toString",
+        writers.tagsAPI,
       );
       out.ef();
     },
@@ -118,7 +147,15 @@ exports.p = function (htmlCompat) {
       htmlCompat.registerRenderBody(renderBody5);
     }
     return (input, ...args) => {
-      const out = defaultCreateOut(htmlCompat.$global());
+      // tags to class
+      const $global = htmlCompat.$global();
+      const state = 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;
 
@@ -134,7 +171,7 @@ exports.p = function (htmlCompat) {
                 key[2] === "-" ? key.slice(3) : key.slice(2).toLowerCase(),
                 value,
               ]);
-              value.toJSON = htmlCompat.toJSON;
+              value.toJSON = htmlCompat.toJSON(state);
             }
           } else {
             input[key === "content" ? "renderBody" : key] = value;
@@ -159,9 +196,15 @@ exports.p = function (htmlCompat) {
 
       let async;
       out.once("finish", (result) => {
+        if (result.out.___components) {
+          ___addComponentsFromContext(
+            result.out.___components,
+            writers.classAPI,
+          );
+        }
         if (!async) {
           async = false;
-          writeHTML(result);
+          writeClassAPIResultToTagsAPI(result);
         }
       });
 
@@ -169,10 +212,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;
+}

package/src/translator/index.js

@@ -428,32 +428,44 @@ export const translate = {
         );
       }
 
-      path.pushContainer(
-        "body",
-        t.expressionStatement(
-          t.assignmentExpression(
-            "=",
-            templateRendererMember,
-            t.callExpression(rendererIdentifier, [
-              t.functionExpression(
-                null,
-                [
-                  t.identifier("input"),
-                  t.identifier("out"),
-                  file._componentDefIdentifier,
-                  file._componentInstanceIdentifier,
-                  t.identifier("state"),
-                  t.identifier("$global"),
-                ],
-                renderBlock.node,
-              ),
-              t.objectExpression(templateRenderOptionsProps),
-              componentIdentifier,
-            ]),
+      let rendererAssignment = t.assignmentExpression(
+        "=",
+        templateRendererMember,
+        t.callExpression(rendererIdentifier, [
+          t.functionExpression(
+            null,
+            [
+              t.identifier("input"),
+              t.identifier("out"),
+              file._componentDefIdentifier,
+              file._componentInstanceIdentifier,
+              t.identifier("state"),
+              t.identifier("$global"),
+            ],
+            renderBlock.node,
           ),
-        ),
+          t.objectExpression(templateRenderOptionsProps),
+          componentIdentifier,
+        ]),
       );
 
+      if (!isHTML && componentBrowserFile && !meta.implicitSplitComponent) {
+        rendererAssignment = t.assignmentExpression(
+          "=",
+          t.memberExpression(
+            importDefault(
+              file,
+              resolveRelativePath(file, componentBrowserFile),
+              "marko_split_component",
+            ),
+            t.identifier("renderer"),
+          ),
+          rendererAssignment,
+        );
+      }
+
+      path.pushContainer("body", t.expressionStatement(rendererAssignment));
+
       if (meta.implicitSplitComponent && isHTML) {
         renderBlock.unshiftContainer(
           "body",

package/src/translator/util/add-dependencies.js

@@ -43,7 +43,7 @@ export default (entryFile, isHydrate) => {
 };
 
 export const entryBuilder = {
-  build(entryFile) {
+  build(entryFile, exportInit) {
     const state = entryFile[kEntryState];
     if (!state) {
       throw entryFile.path.buildCodeFrameError(
@@ -53,6 +53,7 @@ export const entryBuilder = {
     const { markoOpts } = entryFile;
     const entryMarkoMeta = entryFile.metadata.marko;
     const { body } = state;
+    let didExportInit = false;
     entryMarkoMeta.watchFiles = [...state.watchFiles];
     entryMarkoMeta.deps = [...state.lassoDeps];
 
@@ -69,19 +70,29 @@ export const entryBuilder = {
 
       body.unshift(markoComponentsImport);
 
-      if (markoOpts.hydrateInit) {
+      if (markoOpts.hydrateInit || exportInit) {
+        const initExpression = t.callExpression(
+          initId,
+          markoOpts.runtimeId ? [t.stringLiteral(markoOpts.runtimeId)] : [],
+        );
         markoComponentsImport.specifiers.push(
           t.importSpecifier(initId, initId),
         );
+
         body.push(
-          t.expressionStatement(
-            t.callExpression(
-              initId,
-              markoOpts.runtimeId ? [t.stringLiteral(markoOpts.runtimeId)] : [],
-            ),
-          ),
+          exportInit
+            ? t.exportDefaultDeclaration(
+                t.arrowFunctionExpression([], initExpression),
+              )
+            : t.expressionStatement(initExpression),
         );
       }
+    } else if (exportInit) {
+      body.push(
+        t.exportDefaultDeclaration(
+          t.arrowFunctionExpression([], t.blockStatement([])),
+        ),
+      );
     }
 
     return body;