feat(compiler): Implement constant propagation for template literals

Template literals consisting entirely of constant values will be inlined to a string literal,
effectively replacing the backticks with a double quote.

This is done primarily to make the resulting instruction a string literal, so it can be
processed further in constant propatation. So this is now correctly simplified to `true`:
```js
`` === "" // now true
`a${1}` === "a1"
```

If a template literal contains a non-constant value, the entire literal is left as-is.
Transforming a template literal to one that has only partially inlined is something
that can be improved upon in the future.

Author: nikeee

compiler/packages/babel-plugin-react-compiler/src/Optimization/ConstantPropagation.ts

@@ -472,6 +472,52 @@ function evaluateInstruction(
       }
       return null;
     }
+    case "TemplateLiteral": {
+      if (value.quasis.some((q) => q.cooked === undefined)) {
+        return null;
+      }
+
+      if (value.subexprs.length === 0) {
+        const result: InstructionValue = {
+          kind: "Primitive",
+          value: value.quasis.map((q) => q.cooked).join(""),
+          loc: value.loc,
+        };
+        instr.value = result;
+        return result;
+      }
+
+      const subExpressionValues = value.subexprs.map((subExpr) =>
+        read(constants, subExpr)
+      );
+
+      let resultString = value.quasis[0].cooked;
+      let quasiIndex = 1;
+      for (const subExprValue of subExpressionValues) {
+        if (!subExprValue) {
+          return null;
+        }
+        if (subExprValue.kind !== "Primitive") {
+          return null;
+        }
+        if (subExprValue.value === null || subExprValue.value === undefined) {
+          return null;
+        }
+
+        const suffix = value.quasis[quasiIndex].cooked;
+        resultString += subExprValue.value.toString() + suffix;
+        ++quasiIndex;
+      }
+
+      const result: InstructionValue = {
+        kind: "Primitive",
+        value: resultString,
+        loc: value.loc,
+      };
+
+      instr.value = result;
+      return result;
+    }
     case "PropertyLoad": {
       const objectValue = read(constants, value.object);
       if (objectValue !== null) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.expect.md

@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+import { Stringify } from "shared-runtime";
+
+function foo() {
+  return <Stringify value={{
+    a: `` === "",
+    b: `a${1}b`,
+    c: ` abc \u0041\n\u000a\ŧ`,
+    d: `abc${1}def`,
+    e: `abc${1}def${2}`,
+    f: `abc${1}def${2}ghi`,
+    g: `a${1 + 3}b${``}c${"d" + `e${2 + 4}f`}`,
+    h: `1${2}${Math.sin(0)}`,
+  }} />
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <Stringify
+        value={{
+          a: true,
+          b: "a1b",
+          c: " abc A\n\n\u0167",
+          d: "abc1def",
+          e: "abc1def2",
+          f: "abc1def2ghi",
+          g: "a4bcde6f",
+          h: `1${2}${Math.sin(0)}`,
+        }}
+      />
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":{"a":true,"b":"a1b","c":" abc A\n\nŧ","d":"abc1def","e":"abc1def2","f":"abc1def2ghi","g":"a4bcde6f","h":"120"}}</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.js

@@ -0,0 +1,24 @@
+import { Stringify } from "shared-runtime";
+
+function foo() {
+  return (
+    <Stringify
+      value={{
+        a: `` === "",
+        b: `a${1}b`,
+        c: ` abc \u0041\n\u000a\ŧ`,
+        d: `abc${1}def`,
+        e: `abc${1}def${2}`,
+        f: `abc${1}def${2}ghi`,
+        g: `a${1 + 3}b${``}c${"d" + `e${2 + 4}f`}`,
+        h: `1${2}${Math.sin(0)}`,
+      }}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/labeled-break-within-label-switch.expect.md

@@ -40,16 +40,16 @@ function useHook(cond) {
     log = [];
     switch (CONST_STRING0) {
       case CONST_STRING0: {
-        log.push(`@A`);
+        log.push("@A");
         bb0: {
           if (cond) {
             break bb0;
           }
 
-          log.push(`@B`);
+          log.push("@B");
         }
 
-        log.push(`@C`);
+        log.push("@C");
       }
     }
     $[0] = cond;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequential-destructuring-assignment-to-scope-declarations.expect.md

@@ -97,7 +97,7 @@ function foo(name) {
   const t0 = `${name}!`;
   let t1;
   if ($[0] !== t0) {
-    t1 = { status: `<status>`, text: t0 };
+    t1 = { status: "<status>", text: t0 };
     $[0] = t0;
     $[1] = t1;
   } else {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequential-destructuring-both-mixed-local-and-scope-declaration.expect.md

@@ -102,7 +102,7 @@ function foo(name) {
   const t0 = `${name}!`;
   let t1;
   if ($[0] !== t0) {
-    t1 = { status: `<status>`, text: t0 };
+    t1 = { status: "<status>", text: t0 };
     $[0] = t0;
     $[1] = t1;
   } else {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/template-literal.expect.md

@@ -20,7 +20,7 @@ function componentB(props) {
 ```javascript
 function componentA(props) {
   let t = `hello ${props.a}, ${props.b}!`;
-  t = t + ``;
+  t = t + "";
   return t;
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unlabeled-break-within-label-switch.expect.md

@@ -40,14 +40,14 @@ function useHook(cond) {
     log = [];
     bb0: switch (CONST_STRING0) {
       case CONST_STRING0: {
-        log.push(`@A`);
+        log.push("@A");
         if (cond) {
           break bb0;
         }
 
-        log.push(`@B`);
+        log.push("@B");
 
-        log.push(`@C`);
+        log.push("@C");
       }
     }
     $[0] = cond;