Fix embedded template literal idempotency (#19725)

tests/config/format-test/failed-format-tests.js

@@ -25,8 +25,6 @@ const unstableTests = new Map(
     "typescript/satisfies-operators/comments-unstable.ts",
     "jsx/comments/in-attributes.js",
     "typescript/import-type/long-module-name/long-module-name4.ts",
-    // Unstable due to lack of indent information
-    "js/multiparser-comments/comment-inside.js",
     [
       "typescript/method-chain/object/issue-17239.ts",
       (options) => options.objectWrap !== "collapse",

tests/format/js/embeded/indention/19518.js

@@ -0,0 +1,36 @@
+const t = html`
+  <ol>
+    ${items.map(
+      (entry) => html`
+        <li>
+          ${entry.children
+            ? html`
+                <ol>
+                  ${entry.children.map(
+                    (child) => html`<li>${child.title}</li>`,
+                  )}
+                </ol>
+              `
+            : entry.title}
+        </li>
+      `,
+    )}
+  </ol>
+`;
+
+export function foo() {
+  return html`
+    <div>
+              <pre>${JSON.stringify({
+                  a: 1,
+                  b: 2,
+                })}</pre>
+    </div>
+  `;
+}
+
+const a = html`
+          ${{
+              c: y,
+          }}
+`;

tests/format/js/embeded/indention/__snapshots__/format.test.js.snap

@@ -0,0 +1,236 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`19518.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+const t = html\`
+  <ol>
+    \${items.map(
+      (entry) => html\`
+        <li>
+          \${entry.children
+            ? html\`
+                <ol>
+                  \${entry.children.map(
+                    (child) => html\`<li>\${child.title}</li>\`,
+                  )}
+                </ol>
+              \`
+            : entry.title}
+        </li>
+      \`,
+    )}
+  </ol>
+\`;
+
+export function foo() {
+  return html\`
+    <div>
+              <pre>\${JSON.stringify({
+                  a: 1,
+                  b: 2,
+                })}</pre>
+    </div>
+  \`;
+}
+
+const a = html\`
+          \${{
+              c: y,
+          }}
+\`;
+
+=====================================output=====================================
+const t = html\`
+  <ol>
+    \${items.map(
+      (entry) => html\`
+        <li>
+          \${
+            entry.children
+              ? html\`
+                  <ol>
+                    \${entry.children.map(
+                      (child) => html\`<li>\${child.title}</li>\`,
+                    )}
+                  </ol>
+                \`
+              : entry.title
+          }
+        </li>
+      \`,
+    )}
+  </ol>
+\`;
+
+export function foo() {
+  return html\`
+    <div>
+      <pre>
+\${JSON.stringify({
+          a: 1,
+          b: 2,
+        })}</pre>
+    </div>
+  \`;
+}
+
+const a = html\`
+  \${{
+    c: y,
+  }}
+\`;
+
+================================================================================
+`;
+
+exports[`indention.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+_ = \`
+  line
+                  \${
+                    a
+                    // comment
+                    + b}
+  line
+\`;
+
+_ = String.raw\`
+  line
+                  \${
+                    a
+                    // comment
+                    + b}
+  line
+\`;
+
+_ =  css\`
+  a{
+    color:
+                  \${
+                    a
+                    // comment
+                    + b}
+    ;
+  }
+\`;
+
+_ =  html\`
+  <div>
+                  \${
+                    a
+                    // comment
+                    + b}
+  </div>
+\`;
+
+_ =  gql\`
+
+                  \${
+                    a
+                    // comment
+                    + b}
+
+\`;
+
+=====================================output=====================================
+_ = \`
+  line
+                  \${
+                    a +
+                    // comment
+                    b
+                  }
+  line
+\`;
+
+_ = String.raw\`
+  line
+                  \${
+                    a +
+                    // comment
+                    b
+                  }
+  line
+\`;
+
+_ = css\`
+  a {
+    color: \${
+      a +
+      // comment
+      b
+    };
+  }
+\`;
+
+_ = html\`
+  <div>
+    \${
+      a +
+      // comment
+      b
+    }
+  </div>
+\`;
+
+_ = gql\`
+  \${
+    a +
+    // comment
+    b
+  }
+\`;
+
+================================================================================
+`;
+
+exports[`indention-2.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+_ = html\`
+  <div>
+                      \${
+                        a + //
+                        b
+                      }
+  </div>
+  <div><div><div><div>
+                      \${
+                        a + //
+                        b
+                      }
+  </div></div></div></div>
+\`
+
+=====================================output=====================================
+_ = html\`
+  <div>
+    \${
+      a + //
+      b
+    }
+  </div>
+  <div>
+    <div>
+      <div>
+        <div>
+          \${
+            a + //
+            b
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+\`;
+
+================================================================================
+`;

tests/format/js/embeded/indention/format.test.js

@@ -0,0 +1 @@
+runFormatTest(import.meta, ["babel", "flow", "typescript"]);

tests/format/js/embeded/indention/indention-2.js

@@ -0,0 +1,14 @@
+_ = html`
+  <div>
+                      ${
+                        a + //
+                        b
+                      }
+  </div>
+  <div><div><div><div>
+                      ${
+                        a + //
+                        b
+                      }
+  </div></div></div></div>
+`

tests/format/js/embeded/indention/indention.js

@@ -0,0 +1,46 @@
+_ = `
+  line
+                  ${
+                    a
+                    // comment
+                    + b}
+  line
+`;
+
+_ = String.raw`
+  line
+                  ${
+                    a
+                    // comment
+                    + b}
+  line
+`;
+
+_ =  css`
+  a{
+    color:
+                  ${
+                    a
+                    // comment
+                    + b}
+    ;
+  }
+`;
+
+_ =  html`
+  <div>
+                  ${
+                    a
+                    // comment
+                    + b}
+  </div>
+`;
+
+_ =  gql`
+
+                  ${
+                    a
+                    // comment
+                    + b}
+
+`;

tests/format/js/multiparser-comments/__snapshots__/format.test.js.snap

@@ -84,9 +84,9 @@ html\`\${
 }\`;
 html\`
   \${
-  foo
-  /* comment */
-}
+    foo
+    /* comment */
+  }
 \`;
 
 graphql\`
@@ -97,9 +97,9 @@ graphql\`
 \`;
 graphql\`
   \${
-  foo
-  /* comment */
-}
+    foo
+    /* comment */
+  }
 \`;
 
 css\`
@@ -110,9 +110,9 @@ css\`
 \`;
 css\`
   \${
-  foo
-  /* comment */
-}
+    foo
+    /* comment */
+  }
 \`;
 
 markdown\`\${

tests/format/jsx/template/__snapshots__/format.test.js.snap

@@ -63,8 +63,8 @@ parsers: ["babel", "typescript", "flow"]
 <style jsx>{\`
   .class {
     flex-direction: column\${
-      long_cond && long_cond && long_cond ? "-reverse" : ""
-    };
+        long_cond && long_cond && long_cond ? "-reverse" : ""
+      };
   }
 \`}</style>;
 <style jsx>{\`