marko 5.39.34 → 5.39.35

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

@@ -1 +1,3 @@
-"use strict";require("./runtime-dom.js").p(require("@marko/runtime-tags/debug/dom").compat);
+"use strict";const runtimeDom = require("./runtime-dom.js");
+runtimeDom.p(require("@marko/runtime-tags/debug/dom").compat);
+exports.f = runtimeDom.f;

package/dist/runtime/helpers/tags-compat/dom-debug.mjs

@@ -1,4 +1,5 @@
 import { compat } from "@marko/runtime-tags/debug/dom";
 
-import { p } from "./runtime-dom.js";
+import { f, p } from "./runtime-dom.js";
 p(compat);
+export { f };

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

@@ -1 +1,3 @@
-"use strict";require("./runtime-dom.js").p(require("@marko/runtime-tags/dom").compat);
+"use strict";const runtimeDom = require("./runtime-dom.js");
+runtimeDom.p(require("@marko/runtime-tags/dom").compat);
+exports.f = runtimeDom.f;

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

@@ -1,4 +1,5 @@
 import { compat } from "@marko/runtime-tags/dom";
 
-import { p } from "./runtime-dom.js";
+import { f, p } from "./runtime-dom.js";
 p(compat);
+export { f };

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

@@ -1,3 +1,3 @@
-"use strict";exports.s = require("./runtime-html.js").p(
-  require("@marko/runtime-tags/debug/html").compat
-);
+"use strict";const runtimeHtml = require("./runtime-html.js");
+exports.s = runtimeHtml.p(require("@marko/runtime-tags/debug/html").compat);
+exports.f = runtimeHtml.f;

package/dist/runtime/helpers/tags-compat/html-debug.mjs

@@ -1,4 +1,5 @@
 import { compat } from "@marko/runtime-tags/debug/html";
 
-import { p } from "./runtime-html.js";
+import { f, p } from "./runtime-html.js";
 export const s = p(compat);
+export { f };

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

@@ -1,3 +1,3 @@
-"use strict";exports.s = require("./runtime-html.js").p(
-  require("@marko/runtime-tags/html").compat
-);
+"use strict";const runtimeHtml = require("./runtime-html.js");
+exports.s = runtimeHtml.p(require("@marko/runtime-tags/html").compat);
+exports.f = runtimeHtml.f;

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

@@ -1,4 +1,5 @@
 import { compat } from "@marko/runtime-tags/html";
 
-import { p } from "./runtime-html.js";
+import { f, p } from "./runtime-html.js";
 export const s = p(compat);
+export { f };

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

@@ -13,7 +13,29 @@ const dynamicTag = require("../dynamic-tag");
 const Component = require("../../components/Component");
 const noopRenderer = require("../serialize-noop").aM_;
 
+// Bound in `p` so entry files (dom / dom-debug, cjs / esm) just re-export `f`.
+let resumeClassFunction;
+
+// Rebuilds a hoisted class handler against whichever component the resumed
+// scope names, so it fires without the parent having to rerender.
+exports.f = (id, factory) => {
+  resumeClassFunction(
+    id,
+    (scope) =>
+    function () {
+      // Resolved on call: the tags resume runs before `$MC` creates the class
+      // component this handler belongs to.
+      return factory(
+        _n_[scope.m5h] ||
+        _n_[scope.m5c] ||
+        scope.bs_
+      ).apply(this, arguments);
+    }
+  );
+};
+
 exports.p = function (domCompat) {
+  resumeClassFunction = domCompat.resumeClassFunction;
   dynamicTag.bq_ = function tagsToVdom(
   renderer,
   renderBody,

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

@@ -9,7 +9,14 @@ const createRenderer = require("../../components/renderer");
 const defaultCreateOut = require("../../createOut");
 const dynamicTag5 = require("../dynamic-tag");
 
+// Bound in `p` so entry files (html / html-debug, cjs / esm) just re-export `f`.
+let registerClassFunction;
+
+exports.f = (id, fn, component, out) =>
+registerClassFunction(out.global, id, fn, component.id);
+
 exports.p = function (htmlCompat) {
+  registerClassFunction = htmlCompat.registerClassFunction;
   const writersByGlobal = new WeakMap();
   const boundaryModeByRenderer = new WeakMap();
   const isMarko6 = (fn) => typeof fn !== "function" || htmlCompat.isTagsAPI(fn);
@@ -144,7 +151,9 @@ exports.p = function (htmlCompat) {
         component,
         input,
         writers.tagsAPI,
-        !willRerender && hasBridgedClassEvent(input)
+        !willRerender && (
+        hasBridgedClassEvent(input) ||
+        htmlCompat.hasPendingClassFunctions(out.global))
       );
       out.ef();
     },

package/dist/translator/tag/custom-tag.js

@@ -7,6 +7,9 @@ var _babelUtils = require("@marko/compiler/babel-utils");
 
 
 
+
+
+
 var _loadImport = require("../util/load-import");
 var _withPreviousLocation = _interopRequireDefault(require("../util/with-previous-location"));
 var _dynamicTag = _interopRequireDefault(require("./dynamic-tag"));
@@ -26,6 +29,7 @@ function _default(path, isNullable) {
   let tagIdentifier;
 
   if (node.extra?.featureType === "tags") {
+    registerClassHandlerFunctions(path);
     // A dynamic `<${tagName}>` already references the imported template
     // binding directly; only a static tag name needs to be resolved to one.
     if (_compiler.types.isStringLiteral(name)) {
@@ -131,4 +135,125 @@ function _default(path, isNullable) {
   } else {
     path.replaceWith(customTagRenderCall);
   }
+}
+
+// Hoist direct attribute handlers to a component factory for class→tags resume.
+// Nested functions in object/array attr values are not supported across the boundary.
+function registerClassHandlerFunctions(path) {
+  for (const attr of path.get("attributes")) {
+    if (!attr.isMarkoAttribute()) continue;
+    const valuePath = attr.get("value");
+    if (
+    !valuePath.isFunctionExpression() &&
+    !valuePath.isArrowFunctionExpression())
+    {
+      continue;
+    }
+    const factory = hoistToFactory(valuePath);
+    if (factory) {
+      replaceWithResumable(valuePath, factory);
+    }
+  }
+}
+
+// `input`/`out`/`state`/`$global` only become renderer parameters in `Program.exit`,
+// so at this point they can still look module scoped.
+const RENDER_LOCALS = new Set(["input", "out", "state", "$global"]);
+
+// Only the component survives into the browser; anything else the body closes
+// over belongs to a render frame that resume cannot rebuild.
+function hoistToFactory(fnPath) {
+  const file = (0, _babelUtils.getFile)();
+  const componentId = file._componentInstanceIdentifier;
+  if (!componentId) return null;
+
+  const program = (0, _babelUtils.getProgram)();
+  const outer = new Set();
+
+  for (let scope = fnPath.scope.parent; scope; scope = scope.parent) {
+    for (const name in scope.bindings) {
+      const binding = scope.bindings[name];
+      if (!binding.referencePaths.some((ref) => ref.isDescendant(fnPath))) {
+        continue;
+      }
+
+      if (
+      name === "component" ||
+      name === componentId.name ||
+      binding.identifier === componentId)
+      {
+        outer.add("component");
+      } else if (RENDER_LOCALS.has(name) || binding.scope !== program.scope) {
+        outer.add(name);
+      }
+    }
+    if (scope === program.scope) break;
+  }
+
+  for (const name of outer) {
+    if (name !== "component") return null;
+  }
+
+  const factoryId = program.scope.generateUidIdentifier("marko_class_fn");
+
+  program.pushContainer("body", [
+  _compiler.types.variableDeclaration("const", [
+  _compiler.types.variableDeclarator(
+    factoryId,
+    _compiler.types.arrowFunctionExpression([_compiler.types.cloneNode(componentId)], fnPath.node)
+  )]
+  )]
+  );
+
+  return factoryId;
+}
+
+function replaceWithResumable(fnPath, factoryId) {
+  const file = (0, _babelUtils.getFile)();
+  const { markoOpts } = file;
+  const isHTML = markoOpts.output === "html";
+  const id = _compiler.types.stringLiteral(nextClassFnId());
+  const built = _compiler.types.callExpression(_compiler.types.cloneNode(factoryId), [
+  _compiler.types.cloneNode(file._componentInstanceIdentifier)]
+  );
+  let replacement;
+
+  if (isHTML) {
+    replacement = _compiler.types.callExpression(compatHelper(), [
+    id,
+    built,
+    _compiler.types.cloneNode(file._componentInstanceIdentifier),
+    _compiler.types.identifier("out")]
+    );
+  } else {
+    // Registered once per module so a resumed reference can rebuild the
+    // handler against whichever component instance the scope names.
+    (0, _babelUtils.getProgram)().pushContainer("body", [
+    _compiler.types.expressionStatement(
+      _compiler.types.callExpression(compatHelper(), [id, _compiler.types.cloneNode(factoryId)])
+    )]
+    );
+    replacement = built;
+  }
+
+  fnPath.replaceWith(replacement);
+}
+
+function nextClassFnId() {
+  const file = (0, _babelUtils.getFile)();
+  file._markoClassFnCount = (file._markoClassFnCount || 0) + 1;
+  return `${file.metadata.marko.id}/h${file._markoClassFnCount - 1}`;
+}
+
+function compatHelper() {
+  const file = (0, _babelUtils.getFile)();
+  const { optimize, modules, output } = file.markoOpts;
+  return (0, _babelUtils.importNamed)(
+    file,
+    `marko/${optimize ? "dist" : "src"}/runtime/helpers/tags-compat/${
+    output === "html" ? "html" : "dom"}${
+    optimize ? "" : "-debug"}.${modules === "esm" ? "mjs" : "js"}`,
+    "f",
+    "marko_class_fn"
+  );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marko",
-  "version": "5.39.34",
+  "version": "5.39.35",
   "private": false,
   "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
   "keywords": [
@@ -68,7 +68,7 @@
   "types": "index.d.ts",
   "dependencies": {
     "@marko/compiler": "^5.42.1",
-    "@marko/runtime-tags": "^6.3.36",
+    "@marko/runtime-tags": "^6.3.41",
     "app-module-path": "^2.2.0",
     "argly": "^1.2.0",
     "browser-refresh-client": "1.1.4",
@@ -85,7 +85,7 @@
     "warp10": "^2.1.0"
   },
   "devDependencies": {
-    "marko": "5.39.34"
+    "marko": "5.39.35"
   },
   "engines": {
     "node": ">=22"

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

@@ -1 +1,3 @@
-require("./runtime-dom.js").p(require("@marko/runtime-tags/debug/dom").compat);
+const runtimeDom = require("./runtime-dom.js");
+runtimeDom.p(require("@marko/runtime-tags/debug/dom").compat);
+exports.f = runtimeDom.f;

package/src/runtime/helpers/tags-compat/dom-debug.mjs

@@ -1,4 +1,5 @@
 import { compat } from "@marko/runtime-tags/debug/dom";
 
-import { p } from "./runtime-dom.js";
+import { f, p } from "./runtime-dom.js";
 p(compat);
+export { f };

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

@@ -1 +1,3 @@
-require("./runtime-dom.js").p(require("@marko/runtime-tags/dom").compat);
+const runtimeDom = require("./runtime-dom.js");
+runtimeDom.p(require("@marko/runtime-tags/dom").compat);
+exports.f = runtimeDom.f;

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

@@ -1,4 +1,5 @@
 import { compat } from "@marko/runtime-tags/dom";
 
-import { p } from "./runtime-dom.js";
+import { f, p } from "./runtime-dom.js";
 p(compat);
+export { f };

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

@@ -1,3 +1,3 @@
-exports.s = require("./runtime-html.js").p(
-  require("@marko/runtime-tags/debug/html").compat,
-);
+const runtimeHtml = require("./runtime-html.js");
+exports.s = runtimeHtml.p(require("@marko/runtime-tags/debug/html").compat);
+exports.f = runtimeHtml.f;

package/src/runtime/helpers/tags-compat/html-debug.mjs

@@ -1,4 +1,5 @@
 import { compat } from "@marko/runtime-tags/debug/html";
 
-import { p } from "./runtime-html.js";
+import { f, p } from "./runtime-html.js";
 export const s = p(compat);
+export { f };

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

@@ -1,3 +1,3 @@
-exports.s = require("./runtime-html.js").p(
-  require("@marko/runtime-tags/html").compat,
-);
+const runtimeHtml = require("./runtime-html.js");
+exports.s = runtimeHtml.p(require("@marko/runtime-tags/html").compat);
+exports.f = runtimeHtml.f;

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

@@ -1,4 +1,5 @@
 import { compat } from "@marko/runtime-tags/html";
 
-import { p } from "./runtime-html.js";
+import { f, p } from "./runtime-html.js";
 export const s = p(compat);
+export { f };

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

@@ -13,7 +13,29 @@ const dynamicTag = require("../dynamic-tag");
 const Component = require("../../components/Component");
 const noopRenderer = require("../serialize-noop").___noop;
 
+// Bound in `p` so entry files (dom / dom-debug, cjs / esm) just re-export `f`.
+let resumeClassFunction;
+
+// Rebuilds a hoisted class handler against whichever component the resumed
+// scope names, so it fires without the parent having to rerender.
+exports.f = (id, factory) => {
+  resumeClassFunction(
+    id,
+    (scope) =>
+      function () {
+        // Resolved on call: the tags resume runs before `$MC` creates the class
+        // component this handler belongs to.
+        return factory(
+          ___componentLookup[scope.m5h] ||
+            ___componentLookup[scope.m5c] ||
+            scope.___marko5Component,
+        ).apply(this, arguments);
+      },
+  );
+};
+
 exports.p = function (domCompat) {
+  resumeClassFunction = domCompat.resumeClassFunction;
   dynamicTag.___runtimeCompat = function tagsToVdom(
     renderer,
     renderBody,

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

@@ -9,7 +9,14 @@ const createRenderer = require("../../components/renderer");
 const defaultCreateOut = require("../../createOut");
 const dynamicTag5 = require("../dynamic-tag");
 
+// Bound in `p` so entry files (html / html-debug, cjs / esm) just re-export `f`.
+let registerClassFunction;
+
+exports.f = (id, fn, component, out) =>
+  registerClassFunction(out.global, id, fn, component.id);
+
 exports.p = function (htmlCompat) {
+  registerClassFunction = htmlCompat.registerClassFunction;
   const writersByGlobal = new WeakMap();
   const boundaryModeByRenderer = new WeakMap();
   const isMarko6 = (fn) => typeof fn !== "function" || htmlCompat.isTagsAPI(fn);
@@ -144,7 +151,9 @@ exports.p = function (htmlCompat) {
         component,
         input,
         writers.tagsAPI,
-        !willRerender && hasBridgedClassEvent(input),
+        !willRerender &&
+          (hasBridgedClassEvent(input) ||
+            htmlCompat.hasPendingClassFunctions(out.global)),
       );
       out.ef();
     },

package/src/translator/tag/custom-tag.js

@@ -1,8 +1,11 @@
 import { types as t } from "@marko/compiler";
 import {
   assertNoArgs,
+  getFile,
+  getProgram,
   getTagDef,
   importDefault,
+  importNamed,
   resolveRelativePath,
   resolveTagImport,
 } from "@marko/compiler/babel-utils";
@@ -26,6 +29,7 @@ export default function (path, isNullable) {
   let tagIdentifier;
 
   if (node.extra?.featureType === "tags") {
+    registerClassHandlerFunctions(path);
     // A dynamic `<${tagName}>` already references the imported template
     // binding directly; only a static tag name needs to be resolved to one.
     if (t.isStringLiteral(name)) {
@@ -132,3 +136,124 @@ export default function (path, isNullable) {
     path.replaceWith(customTagRenderCall);
   }
 }
+
+// Hoist direct attribute handlers to a component factory for class→tags resume.
+// Nested functions in object/array attr values are not supported across the boundary.
+function registerClassHandlerFunctions(path) {
+  for (const attr of path.get("attributes")) {
+    if (!attr.isMarkoAttribute()) continue;
+    const valuePath = attr.get("value");
+    if (
+      !valuePath.isFunctionExpression() &&
+      !valuePath.isArrowFunctionExpression()
+    ) {
+      continue;
+    }
+    const factory = hoistToFactory(valuePath);
+    if (factory) {
+      replaceWithResumable(valuePath, factory);
+    }
+  }
+}
+
+// `input`/`out`/`state`/`$global` only become renderer parameters in `Program.exit`,
+// so at this point they can still look module scoped.
+const RENDER_LOCALS = new Set(["input", "out", "state", "$global"]);
+
+// Only the component survives into the browser; anything else the body closes
+// over belongs to a render frame that resume cannot rebuild.
+function hoistToFactory(fnPath) {
+  const file = getFile();
+  const componentId = file._componentInstanceIdentifier;
+  if (!componentId) return null;
+
+  const program = getProgram();
+  const outer = new Set();
+
+  for (let scope = fnPath.scope.parent; scope; scope = scope.parent) {
+    for (const name in scope.bindings) {
+      const binding = scope.bindings[name];
+      if (!binding.referencePaths.some((ref) => ref.isDescendant(fnPath))) {
+        continue;
+      }
+
+      if (
+        name === "component" ||
+        name === componentId.name ||
+        binding.identifier === componentId
+      ) {
+        outer.add("component");
+      } else if (RENDER_LOCALS.has(name) || binding.scope !== program.scope) {
+        outer.add(name);
+      }
+    }
+    if (scope === program.scope) break;
+  }
+
+  for (const name of outer) {
+    if (name !== "component") return null;
+  }
+
+  const factoryId = program.scope.generateUidIdentifier("marko_class_fn");
+
+  program.pushContainer("body", [
+    t.variableDeclaration("const", [
+      t.variableDeclarator(
+        factoryId,
+        t.arrowFunctionExpression([t.cloneNode(componentId)], fnPath.node),
+      ),
+    ]),
+  ]);
+
+  return factoryId;
+}
+
+function replaceWithResumable(fnPath, factoryId) {
+  const file = getFile();
+  const { markoOpts } = file;
+  const isHTML = markoOpts.output === "html";
+  const id = t.stringLiteral(nextClassFnId());
+  const built = t.callExpression(t.cloneNode(factoryId), [
+    t.cloneNode(file._componentInstanceIdentifier),
+  ]);
+  let replacement;
+
+  if (isHTML) {
+    replacement = t.callExpression(compatHelper(), [
+      id,
+      built,
+      t.cloneNode(file._componentInstanceIdentifier),
+      t.identifier("out"),
+    ]);
+  } else {
+    // Registered once per module so a resumed reference can rebuild the
+    // handler against whichever component instance the scope names.
+    getProgram().pushContainer("body", [
+      t.expressionStatement(
+        t.callExpression(compatHelper(), [id, t.cloneNode(factoryId)]),
+      ),
+    ]);
+    replacement = built;
+  }
+
+  fnPath.replaceWith(replacement);
+}
+
+function nextClassFnId() {
+  const file = getFile();
+  file._markoClassFnCount = (file._markoClassFnCount || 0) + 1;
+  return `${file.metadata.marko.id}/h${file._markoClassFnCount - 1}`;
+}
+
+function compatHelper() {
+  const file = getFile();
+  const { optimize, modules, output } = file.markoOpts;
+  return importNamed(
+    file,
+    `marko/${optimize ? "dist" : "src"}/runtime/helpers/tags-compat/${
+      output === "html" ? "html" : "dom"
+    }${optimize ? "" : "-debug"}.${modules === "esm" ? "mjs" : "js"}`,
+    "f",
+    "marko_class_fn",
+  );
+}