refactor: avoid nullish coalescing operator (??)

packages/compat-v4/src/migrate/non-standard-template-literals/index.ts

@@ -2,6 +2,7 @@ import { types as t } from "@marko/compiler";
 import { diagnosticDeprecate } from "@marko/babel-utils";
 import { parseNonStandardTemplateLiteral } from "./parse";
 
+const nullishHelpers = new WeakMap<t.Hub, t.Identifier>();
 const stringVisitor = {
   StringLiteral,
 } satisfies t.Visitor;
@@ -82,11 +83,7 @@ function StringLiteral(string: t.NodePath<t.StringLiteral>) {
                   templateLiteral.expressions.map((expr) => {
                     return isNotNullish(expr)
                       ? expr
-                      : t.logicalExpression(
-                          "??",
-                          expr as t.Expression,
-                          t.stringLiteral(""),
-                        );
+                      : castNullishToString(string, expr as t.Expression);
                   }),
                 ),
               );
@@ -98,6 +95,40 @@ function StringLiteral(string: t.NodePath<t.StringLiteral>) {
   }
 }
 
+function castNullishToString(string: t.NodePath, expression: t.Expression) {
+  let nullishHelper = nullishHelpers.get(string.hub);
+  if (!nullishHelper) {
+    nullishHelper = string.scope.generateUidIdentifier("toString");
+    nullishHelpers.set(string.hub, nullishHelper);
+    string.hub.file.path.unshiftContainer(
+      "body",
+      t.markoScriptlet(
+        [
+          t.functionDeclaration(
+            nullishHelper,
+            [t.identifier("value")],
+            t.blockStatement([
+              t.returnStatement(
+                t.conditionalExpression(
+                  t.binaryExpression(
+                    "==",
+                    t.identifier("value"),
+                    t.nullLiteral(),
+                  ),
+                  t.stringLiteral(""),
+                  t.identifier("value"),
+                ),
+              ),
+            ]),
+          ),
+        ],
+        true,
+      ),
+    );
+  }
+  return t.callExpression(nullishHelper, [expression]);
+}
+
 function isNotNullish(node: t.Node): boolean {
   switch (node.type) {
     case "ArrayExpression":

tests/fixtures-class/non-standard-template-literals/__snapshots__/auto-migrate.expected/template.marko

@@ -1,3 +1,6 @@
+static function _toString(value) {
+  return value == null ? "" : value;
+}
 static const fromStatic = "${STATIC}";
 $ const fromScriptlet = "${SCRIPLET}";
 $ const a = 1;
@@ -26,12 +29,12 @@ $ const c = 3;
   ${`abc${`d${"}"}e`}f`}
 </div>
 <div id="h">
-  ${`abc${c ?? ""}`}
+  ${`abc${_toString(c)}`}
 </div>
 <div id="i">
-  ${`abc${{
+  ${`abc${_toString({
     x: 1
-  }.missing ?? ""}def`}
+  }.missing)}def`}
 </div>
 $ const handler = console.log;
 <button onClick(handler)/>

tests/fixtures-class/non-standard-template-literals/__snapshots__/dom.expected/template.js

@@ -2,6 +2,9 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "<fixture-dir>/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
+function _toString(value) {
+  return value == null ? "" : value;
+}
 const fromStatic = "${STATIC}";
 import _marko_class_merge from "marko/src/runtime/helpers/class-value.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
@@ -56,14 +59,14 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.be("div", {
     "id": "h"
   }, "8", _component, null, 1);
-  out.t(`abc${c ?? ""}`, _component);
+  out.t(`abc${_toString(c)}`, _component);
   out.ee();
   out.be("div", {
     "id": "i"
   }, "9", _component, null, 1);
-  out.t(`abc${{
+  out.t(`abc${_toString({
     x: 1
-  }.missing ?? ""}def`, _component);
+  }.missing)}def`, _component);
   out.ee();
   const handler = console.log;
   out.e("button", null, "10", _component, 0, 0, {

tests/fixtures-class/non-standard-template-literals/__snapshots__/html.expected/template.js

@@ -2,6 +2,9 @@ import { t as _t } from "marko/src/runtime/html/index.js";
 const _marko_componentType = "<fixture-dir>/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
+function _toString(value) {
+  return value == null ? "" : value;
+}
 const fromStatic = "${STATIC}";
 import _marko_class_merge from "marko/src/runtime/helpers/class-value.js";
 import _marko_attr from "marko/src/runtime/html/helpers/attr.js";
@@ -37,12 +40,12 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.w("abcd}ef");
   out.w("</div>");
   out.w("<div id=h>");
-  out.w(_marko_escapeXml(`abc${c ?? ""}`));
+  out.w(_marko_escapeXml(`abc${_toString(c)}`));
   out.w("</div>");
   out.w("<div id=i>");
-  out.w(_marko_escapeXml(`abc${{
+  out.w(_marko_escapeXml(`abc${_toString({
     x: 1
-  }.missing ?? ""}def`));
+  }.missing)}def`));
   out.w("</div>");
   const handler = console.log;
   out.w(`<button${_marko_props(out, _componentDef, {

tests/fixtures-widget/assign-tag/__snapshots__/auto-migrate.expected/template.marko

@@ -1,7 +1,10 @@
+static function _toString(value) {
+  return value == null ? "" : value;
+}
 $ var firstName = "John";
 $ var lastName = "Smith";
 $ var fullName;
-$ fullName = `${firstName ?? ""} ${lastName ?? ""}`;
+$ fullName = `${_toString(firstName)} ${_toString(lastName)}`;
 <div>
   ${fullName}
 </div>

tests/fixtures-widget/assign-tag/__snapshots__/dom.expected/template.js

@@ -2,6 +2,9 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "<fixture-dir>/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
+function _toString(value) {
+  return value == null ? "" : value;
+}
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/src/runtime/components/registry";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
@@ -10,7 +13,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   var firstName = "John";
   var lastName = "Smith";
   var fullName;
-  fullName = `${firstName ?? ""} ${lastName ?? ""}`;
+  fullName = `${_toString(firstName)} ${_toString(lastName)}`;
   out.be("div", null, "0", _component, null, 0);
   out.t(fullName, _component);
   out.ee();

tests/fixtures-widget/assign-tag/__snapshots__/html.expected/template.js

@@ -2,14 +2,17 @@ import { t as _t } from "marko/src/runtime/html/index.js";
 const _marko_componentType = "<fixture-dir>/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
+function _toString(value) {
+  return value == null ? "" : value;
+}
 import { x as _marko_escapeXml } from "marko/src/runtime/html/helpers/escape-xml.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
   var firstName = "John";
   var lastName = "Smith";
   var fullName;
-  fullName = `${firstName ?? ""} ${lastName ?? ""}`;
+  fullName = `${_toString(firstName)} ${_toString(lastName)}`;
   out.w("<div>");
   out.w(_marko_escapeXml(fullName));
   out.w("</div>");

tests/fixtures-widget/var-tag/__snapshots__/auto-migrate.expected/template.marko

@@ -1,8 +1,11 @@
+static function _toString(value) {
+  return value == null ? "" : value;
+}
 $ var truthy = true;
 $ var falsey = false;
 $ var firstName = "John";
 $ var lastName = "Smith";
-$ var fullName = `${firstName ?? ""} ${lastName ?? ""}`;
+$ var fullName = `${_toString(firstName)} ${_toString(lastName)}`;
 $ if (truthy) {
   var optionalTrue = "a";
 }

tests/fixtures-widget/var-tag/__snapshots__/dom.expected/template.js

@@ -2,6 +2,9 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "<fixture-dir>/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
+function _toString(value) {
+  return value == null ? "" : value;
+}
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/src/runtime/components/registry";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
@@ -11,7 +14,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   var falsey = false;
   var firstName = "John";
   var lastName = "Smith";
-  var fullName = `${firstName ?? ""} ${lastName ?? ""}`;
+  var fullName = `${_toString(firstName)} ${_toString(lastName)}`;
   if (truthy) {
     var optionalTrue = "a";
   }

tests/fixtures-widget/var-tag/__snapshots__/html.expected/template.js

@@ -2,6 +2,9 @@ import { t as _t } from "marko/src/runtime/html/index.js";
 const _marko_componentType = "<fixture-dir>/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
+function _toString(value) {
+  return value == null ? "" : value;
+}
 import { x as _marko_escapeXml } from "marko/src/runtime/html/helpers/escape-xml.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 const _marko_component = {};
@@ -10,7 +13,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   var falsey = false;
   var firstName = "John";
   var lastName = "Smith";
-  var fullName = `${firstName ?? ""} ${lastName ?? ""}`;
+  var fullName = `${_toString(firstName)} ${_toString(lastName)}`;
   if (truthy) {
     var optionalTrue = "a";
   }