Compat Fixes

.changeset/big-brooms-matter.md

@@ -0,0 +1,5 @@
+---
+"marko": patch
+---
+
+Optimize preserve-tag implementation to use browser remap again.

.changeset/blue-boats-sell.md

@@ -0,0 +1,5 @@
+---
+"marko": patch
+---
+
+Fix issue where marko-widger renderers were not bound to the correct "this".

packages/marko/src/core-tags/components/preserve-tag.js

@@ -1,81 +1 @@
-var ComponentsContext = require("../../runtime/components/ComponentsContext");
-var getComponentsContext = ComponentsContext.___getComponentsContext;
-
-module.exports = function render(input, out) {
-  var isComponent = !input.n;
-  var shouldPreserve = !("i" in input) || input.i;
-  var componentsContext = out.___components;
-
-  if (typeof document === "object") {
-    var isHydrate =
-      componentsContext && componentsContext.___globalContext.___isHydrate;
-    var ownerComponent = out.___assignedComponentDef.___component;
-    var referenceComponent = ownerComponent;
-    var key = out.___assignedKey;
-    var checkKey = key;
-
-    if (key[0] !== "@") {
-      var parentComponent = componentsContext.___componentDef.___component;
-      if (ownerComponent !== parentComponent) {
-        referenceComponent = parentComponent;
-        checkKey += ":" + ownerComponent.id;
-      }
-    }
-
-    var isPreserved =
-      shouldPreserve &&
-      (isHydrate || referenceComponent.___keyedElements[checkKey]);
-
-    if (isComponent) {
-      out.bf(key, ownerComponent, shouldPreserve);
-
-      if (!isPreserved && input.renderBody) {
-        input.renderBody(out);
-      }
-
-      out.ef();
-    } else {
-      if (isPreserved) {
-        if (input.b) {
-          out.___parent.___preserveBody = true;
-        } else {
-          out.beginElement("", null, key, ownerComponent);
-          out.___parent.___preserve = true;
-          out.endElement();
-        }
-      } else if (input.renderBody) {
-        input.renderBody(out);
-      }
-    }
-  } else {
-    if (isComponent) {
-      out.bf(
-        out.___assignedKey,
-        out.___assignedComponentDef.___component,
-        true
-      );
-    }
-
-    if (input.renderBody) {
-      if (shouldPreserve) {
-        var parentPreserved = false;
-
-        if (componentsContext) {
-          parentPreserved = componentsContext.___isPreserved;
-        } else {
-          componentsContext = getComponentsContext(out);
-        }
-
-        componentsContext.___isPreserved = true;
-        input.renderBody(out);
-        componentsContext.___isPreserved = parentPreserved;
-      } else {
-        input.renderBody(out);
-      }
-    }
-
-    if (isComponent) {
-      out.ef();
-    }
-  }
-};
+module.exports = require("@internal/preserve-tag");

packages/marko/src/node_modules/@internal/preserve-tag/index-browser.js

@@ -0,0 +1,45 @@
+module.exports = function render(input, out) {
+  var isComponent = !input.n;
+  var shouldPreserve = !("i" in input) || input.i;
+  var componentsContext = out.___components;
+  var isHydrate =
+    componentsContext && componentsContext.___globalContext.___isHydrate;
+  var ownerComponent = out.___assignedComponentDef.___component;
+  var referenceComponent = ownerComponent;
+  var key = out.___assignedKey;
+  var checkKey = key;
+
+  if (key[0] !== "@") {
+    var parentComponent = componentsContext.___componentDef.___component;
+    if (ownerComponent !== parentComponent) {
+      referenceComponent = parentComponent;
+      checkKey += ":" + ownerComponent.id;
+    }
+  }
+
+  var isPreserved =
+    shouldPreserve &&
+    (isHydrate || referenceComponent.___keyedElements[checkKey]);
+
+  if (isComponent) {
+    out.bf(key, ownerComponent, shouldPreserve);
+
+    if (!isPreserved && input.renderBody) {
+      input.renderBody(out);
+    }
+
+    out.ef();
+  } else {
+    if (isPreserved) {
+      if (input.b) {
+        out.___parent.___preserveBody = true;
+      } else {
+        out.beginElement("", null, key, ownerComponent);
+        out.___parent.___preserve = true;
+        out.endElement();
+      }
+    } else if (input.renderBody) {
+      input.renderBody(out);
+    }
+  }
+};

packages/marko/src/node_modules/@internal/preserve-tag/index.js

@@ -0,0 +1,34 @@
+var ComponentsContext = require("../../../runtime/components/ComponentsContext");
+var getComponentsContext = ComponentsContext.___getComponentsContext;
+
+module.exports = function render(input, out) {
+  var isComponent = !input.n;
+  var shouldPreserve = !("i" in input) || input.i;
+  var componentsContext = out.___components;
+
+  if (isComponent) {
+    out.bf(out.___assignedKey, out.___assignedComponentDef.___component, true);
+  }
+
+  if (input.renderBody) {
+    if (shouldPreserve) {
+      var parentPreserved = false;
+
+      if (componentsContext) {
+        parentPreserved = componentsContext.___isPreserved;
+      } else {
+        componentsContext = getComponentsContext(out);
+      }
+
+      componentsContext.___isPreserved = true;
+      input.renderBody(out);
+      componentsContext.___isPreserved = parentPreserved;
+    } else {
+      input.renderBody(out);
+    }
+  }
+
+  if (isComponent) {
+    out.ef();
+  }
+};

packages/marko/src/node_modules/@internal/preserve-tag/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "./index.js",
+  "browser": "./index-browser.js",
+  "exports": {
+    ".": {
+      "worker": "./index.js",
+      "browser": "./index-browser.js",
+      "default": "./index.js"
+    }
+  }
+}

packages/marko/src/runtime/components/legacy/defineRenderer-legacy.js

@@ -148,7 +148,7 @@
   renderer.template = template;
 
   makeRenderable(renderer, renderer);
-  renderer.render = renderer.render.bind(this);
+  renderer.render = renderer.render.bind(renderer);
 
   return renderer;
 };