marko 5.39.11 → 5.39.13

package/dist/node_modules/@internal/components-beginComponent/index.js

@@ -40,8 +40,13 @@ existingComponentDef)
   }
 
   if (componentsContext.w_) {
+    var forceBoundary = componentsContext.w_;
     componentsContext.w_ = false;
-    isSplitComponent = false;
+    if (forceBoundary === "preserve") {
+      isSplitComponent = true;
+    } else {
+      isSplitComponent = false;
+    }
   } else if (isImplicitComponent === true) {
     // We don't mount implicit components rendered on the server
     // unless the implicit component is nested within a UI component

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

@@ -137,9 +137,24 @@ exports.p = function (domCompat) {
     let host = domCompat.getStartNode(scope);
     let rootNode = host.fragment;
     if (!rootNode) {
+      // An inert/server only class child has no client instance in
+      // ___componentLookup; once it has been re-rendered once it is tracked on
+      // the scope instead.
       const component = scope.bt_ =
-      _n_[scope.m5c];
-      rootNode = component._G_;
+      _n_[scope.m5c] || scope.bt_;
+      if (component) {
+        rootNode = component._G_;
+      } else {
+        // First re-render of such a child: wrap its existing DOM (between the
+        // scope's start and end nodes) in a fragment so the new render can be
+        // morphed in place. The morph + ___initComponents below registers a
+        // component that the branch above reuses for subsequent re-renders.
+        rootNode = _m_(
+          host.nextSibling,
+          domCompat.getEndNode(scope),
+          host.parentNode
+        );
+      }
       host = rootNode.startNode;
       domCompat.setScopeNodes(host, rootNode.startNode, rootNode.endNode);
     }

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

@@ -8,9 +8,11 @@ const {
 const createRenderer = require("../../components/renderer");
 const defaultCreateOut = require("../../createOut");
 const dynamicTag5 = require("../dynamic-tag");
+const PRESERVE_BOUNDARY = "preserve";
 
 exports.p = function (htmlCompat) {
   const writersByGlobal = new WeakMap();
+  const boundaryModeByRenderer = new WeakMap();
   const isMarko6 = (fn) => typeof fn !== "function" || htmlCompat.isTagsAPI(fn);
   const isMarko5 = (fn) =>
   typeof fn !== "function" || !htmlCompat.isTagsAPI(fn);
@@ -172,6 +174,7 @@ exports.p = function (htmlCompat) {
       const state = htmlCompat.ensureState($global);
       const out = defaultCreateOut($global);
       const branchId = htmlCompat.nextScopeId();
+      let forceBoundary = boundaryModeByRenderer.get(tag);
 
       if (renderer5) {
         const componentsContext = T_(out);
@@ -187,6 +190,7 @@ exports.p = function (htmlCompat) {
               key[2] === "-" ? key.slice(3) : key.slice(2).toLowerCase(),
               value]
               );
+              forceBoundary = true;
               value.toJSON = htmlCompat.toJSON(state);
             }
           } else {
@@ -194,11 +198,11 @@ exports.p = function (htmlCompat) {
           }
         }
 
-        componentsContext.w_ = true;
+        componentsContext.w_ = forceBoundary;
         renderer5(input, out);
 
         const componentDef = componentsContext.b_[0];
-        if (componentDef) {
+        if (componentDef && forceBoundary) {
           const rawInput = componentDef.s_.P_;
           const { toJSON: _, ...serializeInput } = rawInput;
           componentDef.s_.X_ = customEvents;
@@ -230,7 +234,10 @@ exports.p = function (htmlCompat) {
     };
   });
 
-  return htmlCompat.register;
+  return function register(id, renderer, boundaryMode) {
+    boundaryModeByRenderer.set(renderer, boundaryMode || true);
+    return htmlCompat.register(id, renderer);
+  };
 };
 
 function concatScripts(a, b) {

package/dist/translator/index.js

@@ -33,9 +33,12 @@ var _loadImport = require("./util/load-import");
 var _optimizeHtmlWrites = require("./util/optimize-html-writes");
 var _optimizeVdomCreate = require("./util/optimize-vdom-create");
 
+
+
+
 var _package2 = require("../../package.json");exports.version = _package2.version;
 
-var _taglib = _interopRequireWildcard(require("./taglib"));exports.optionalTaglibs = _taglib.optionalTaglibs;exports.taglibs = _taglib.default;function _interopRequireWildcard(e, t) {if ("function" == typeof WeakMap) var r = new WeakMap(),n = new WeakMap();return (_interopRequireWildcard = function (e, t) {if (!t && e && e.__esModule) return e;var o,i,f = { __proto__: null, default: e };if (null === e || "object" != typeof e && "function" != typeof e) return f;if (o = t ? n : r) {if (o.has(e)) return o.get(e);o.set(e, f);}for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]);return f;})(e, t);}function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}const tagDiscoveryDirs = exports.tagDiscoveryDirs = ["components"];
+var _taglib = _interopRequireWildcard(require("./taglib"));exports.optionalTaglibs = _taglib.optionalTaglibs;exports.taglibs = _taglib.default;function _interopRequireWildcard(e, t) {if ("function" == typeof WeakMap) var r = new WeakMap(),n = new WeakMap();return (_interopRequireWildcard = function (e, t) {if (!t && e && e.__esModule) return e;var o,i,f = { __proto__: null, default: e };if (null === e || "object" != typeof e && "function" != typeof e) return f;if (o = t ? n : r) {if (o.has(e)) return o.get(e);o.set(e, f);}for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]);return f;})(e, t);}function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}const CLASS_HYDRATION_SELF = "self";const CLASS_HYDRATION_DESCENDANT = "descendant";const tagDiscoveryDirs = exports.tagDiscoveryDirs = ["components"];
 
 
 const preferAPI = exports.preferAPI = "class";
@@ -90,6 +93,7 @@ const analyze = exports.analyze = {
       (0, _babelUtils.resolveRelativePath)(file, filename) :
       filename
       );
+      meta.classHydration = getClassHydrationMode(file);
     }
   },
   MarkoTag(tag) {
@@ -696,4 +700,32 @@ function resolveRelativeTagEntry(file, tagDef) {
   // TODO: support transform and other entries.
   const entry = tagDef.template || tagDef.renderer;
   return entry && (0, _babelUtils.resolveRelativePath)(file, entry);
+}
+
+function getClassHydrationMode(file, visited = new Set()) {
+  const fileName = file.opts.filename;
+  const meta = file.metadata.marko;
+
+  if (Object.hasOwn(meta, "classHydration")) {
+    return meta.classHydration;
+  }
+
+  if (visited.has(fileName)) {
+    return;
+  }
+
+  visited.add(fileName);
+
+  if (meta.component) {
+    return meta.classHydration = CLASS_HYDRATION_SELF;
+  }
+
+  for (const tag of meta.tags) {
+    if (tag.endsWith(".marko")) {
+      const childFile = (0, _babelUtils.loadFileForImport)(file, tag);
+      if (childFile && getClassHydrationMode(childFile, visited)) {
+        return meta.classHydration = CLASS_HYDRATION_DESCENDANT;
+      }
+    }
+  }
 }

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

@@ -165,16 +165,18 @@ const entryBuilder = exports.entryBuilder = {
       }
     }
 
-    for (const tag of fileMeta.tags) {
-      if (tag.endsWith(".marko")) {
-        visitChild(tag);
-      } else if (/^@lasso\/marko-taglib\//.test(tag)) {
-        state.hasComponents = true;
-      } else {
-        const importedTemplates = tryGetTemplateImports(file, tag);
-        if (importedTemplates) {
-          for (const templateFile of importedTemplates) {
-            visitChild(templateFile);
+    if (fileMeta.classHydration) {
+      for (const tag of fileMeta.tags) {
+        if (tag.endsWith(".marko")) {
+          visitChild(tag);
+        } else if (/^@lasso\/marko-taglib\//.test(tag)) {
+          state.hasComponents = true;
+        } else {
+          const importedTemplates = tryGetTemplateImports(file, tag);
+          if (importedTemplates) {
+            for (const templateFile of importedTemplates) {
+              visitChild(templateFile);
+            }
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marko",
-  "version": "5.39.11",
+  "version": "5.39.13",
   "private": false,
   "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
   "keywords": [
@@ -71,7 +71,7 @@
   },
   "dependencies": {
     "@marko/compiler": "^5.39.66",
-    "@marko/runtime-tags": "^6.1.17",
+    "@marko/runtime-tags": "^6.1.19",
     "app-module-path": "^2.2.0",
     "argly": "^1.2.0",
     "browser-refresh-client": "1.1.4",

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

@@ -40,8 +40,13 @@ module.exports = function beginComponent(
   }
 
   if (componentsContext.___forceBoundary) {
+    var forceBoundary = componentsContext.___forceBoundary;
     componentsContext.___forceBoundary = false;
-    isSplitComponent = false;
+    if (forceBoundary === "preserve") {
+      isSplitComponent = true;
+    } else {
+      isSplitComponent = false;
+    }
   } else if (isImplicitComponent === true) {
     // We don't mount implicit components rendered on the server
     // unless the implicit component is nested within a UI component

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

@@ -137,9 +137,24 @@ exports.p = function (domCompat) {
     let host = domCompat.getStartNode(scope);
     let rootNode = host.fragment;
     if (!rootNode) {
+      // An inert/server only class child has no client instance in
+      // ___componentLookup; once it has been re-rendered once it is tracked on
+      // the scope instead.
       const component = (scope.___marko5Component =
-        ___componentLookup[scope.m5c]);
-      rootNode = component.___rootNode;
+        ___componentLookup[scope.m5c] || scope.___marko5Component);
+      if (component) {
+        rootNode = component.___rootNode;
+      } else {
+        // First re-render of such a child: wrap its existing DOM (between the
+        // scope's start and end nodes) in a fragment so the new render can be
+        // morphed in place. The morph + ___initComponents below registers a
+        // component that the branch above reuses for subsequent re-renders.
+        rootNode = ___createFragmentNode(
+          host.nextSibling,
+          domCompat.getEndNode(scope),
+          host.parentNode,
+        );
+      }
       host = rootNode.startNode;
       domCompat.setScopeNodes(host, rootNode.startNode, rootNode.endNode);
     }

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

@@ -8,9 +8,11 @@ const {
 const createRenderer = require("../../components/renderer");
 const defaultCreateOut = require("../../createOut");
 const dynamicTag5 = require("../dynamic-tag");
+const PRESERVE_BOUNDARY = "preserve";
 
 exports.p = function (htmlCompat) {
   const writersByGlobal = new WeakMap();
+  const boundaryModeByRenderer = new WeakMap();
   const isMarko6 = (fn) => typeof fn !== "function" || htmlCompat.isTagsAPI(fn);
   const isMarko5 = (fn) =>
     typeof fn !== "function" || !htmlCompat.isTagsAPI(fn);
@@ -172,6 +174,7 @@ exports.p = function (htmlCompat) {
       const state = htmlCompat.ensureState($global);
       const out = defaultCreateOut($global);
       const branchId = htmlCompat.nextScopeId();
+      let forceBoundary = boundaryModeByRenderer.get(tag);
 
       if (renderer5) {
         const componentsContext = ___getComponentsContext(out);
@@ -187,6 +190,7 @@ exports.p = function (htmlCompat) {
                 key[2] === "-" ? key.slice(3) : key.slice(2).toLowerCase(),
                 value,
               ]);
+              forceBoundary = true;
               value.toJSON = htmlCompat.toJSON(state);
             }
           } else {
@@ -194,11 +198,11 @@ exports.p = function (htmlCompat) {
           }
         }
 
-        componentsContext.___forceBoundary = true;
+        componentsContext.___forceBoundary = forceBoundary;
         renderer5(input, out);
 
         const componentDef = componentsContext.___components[0];
-        if (componentDef) {
+        if (componentDef && forceBoundary) {
           const rawInput = componentDef.___component.___input;
           const { toJSON: _, ...serializeInput } = rawInput;
           componentDef.___component.___customEvents = customEvents;
@@ -230,7 +234,10 @@ exports.p = function (htmlCompat) {
     };
   });
 
-  return htmlCompat.register;
+  return function register(id, renderer, boundaryMode) {
+    boundaryModeByRenderer.set(renderer, boundaryMode || true);
+    return htmlCompat.register(id, renderer);
+  };
 };
 
 function concatScripts(a, b) {

package/src/translator/index.js

@@ -33,6 +33,9 @@ import { analyzeLoadImport } from "./util/load-import";
 import { optimizeHTMLWrites } from "./util/optimize-html-writes";
 import { analyzeStaticVDOM } from "./util/optimize-vdom-create";
 
+const CLASS_HYDRATION_SELF = "self";
+const CLASS_HYDRATION_DESCENDANT = "descendant";
+
 export { version } from "../../package.json";
 export const tagDiscoveryDirs = ["components"];
 export { optionalTaglibs, default as taglibs } from "./taglib";
@@ -90,6 +93,7 @@ export const analyze = {
           ? resolveRelativePath(file, filename)
           : filename,
       );
+      meta.classHydration = getClassHydrationMode(file);
     },
   },
   MarkoTag(tag) {
@@ -697,3 +701,31 @@ function resolveRelativeTagEntry(file, tagDef) {
   const entry = tagDef.template || tagDef.renderer;
   return entry && resolveRelativePath(file, entry);
 }
+
+function getClassHydrationMode(file, visited = new Set()) {
+  const fileName = file.opts.filename;
+  const meta = file.metadata.marko;
+
+  if (Object.hasOwn(meta, "classHydration")) {
+    return meta.classHydration;
+  }
+
+  if (visited.has(fileName)) {
+    return;
+  }
+
+  visited.add(fileName);
+
+  if (meta.component) {
+    return (meta.classHydration = CLASS_HYDRATION_SELF);
+  }
+
+  for (const tag of meta.tags) {
+    if (tag.endsWith(".marko")) {
+      const childFile = loadFileForImport(file, tag);
+      if (childFile && getClassHydrationMode(childFile, visited)) {
+        return (meta.classHydration = CLASS_HYDRATION_DESCENDANT);
+      }
+    }
+  }
+}

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

@@ -165,16 +165,18 @@ export const entryBuilder = {
       }
     }
 
-    for (const tag of fileMeta.tags) {
-      if (tag.endsWith(".marko")) {
-        visitChild(tag);
-      } else if (/^@lasso\/marko-taglib\//.test(tag)) {
-        state.hasComponents = true;
-      } else {
-        const importedTemplates = tryGetTemplateImports(file, tag);
-        if (importedTemplates) {
-          for (const templateFile of importedTemplates) {
-            visitChild(templateFile);
+    if (fileMeta.classHydration) {
+      for (const tag of fileMeta.tags) {
+        if (tag.endsWith(".marko")) {
+          visitChild(tag);
+        } else if (/^@lasso\/marko-taglib\//.test(tag)) {
+          state.hasComponents = true;
+        } else {
+          const importedTemplates = tryGetTemplateImports(file, tag);
+          if (importedTemplates) {
+            for (const templateFile of importedTemplates) {
+              visitChild(templateFile);
+            }
           }
         }
       }