feat(oxfmt): Support html-in-js substitution

apps/oxfmt/.gitignore

@@ -1,5 +1,5 @@
 /node_modules/
 /dist/
-/conformance/fixtures/prettier/
-/conformance/fixtures/vue-vben-admin/
+/conformance/fixtures/**
+!/conformance/fixtures/edge-cases
 *.node

apps/oxfmt/conformance/download-fixtures.js

@@ -19,6 +19,11 @@ const sources = [
     repo: "vbenjs/vue-vben-admin/packages",
     version: "main",
   },
+  {
+    name: "webawesome",
+    repo: "shoelace-style/webawesome/packages/webawesome/src/components",
+    version: "next",
+  },
   // {
   //   name: "plugin-svelte",
   //   repo: "sveltejs/prettier-plugin-svelte/tests",

apps/oxfmt/conformance/fixtures/edge-cases/html-in-js/as-const.ts

@@ -0,0 +1,6 @@
+const HTML_WITH_CONST = /* HTML */ `
+<div>
+<h1>foo</h1>
+  <p>foo</p>
+</div>
+` as const;

apps/oxfmt/conformance/fixtures/edge-cases/html-in-js/css-in-html-in-js.js

@@ -0,0 +1,13 @@
+// CSS in <style> tags is formatted (sub-formatter runs regardless of `parentParser`).
+const styleTag = /* HTML */ `<style>.foo { color: red; font-size: 16px; display: flex; align-items: center; justify-content: center; }</style>`;
+
+// CSS in style="" attributes is NOT formatted (`parentParser` blocks attribute-level sub-formatters).
+const styleAttr = /* HTML */ `<div style="color: red; font-size: 16px; display: flex; align-items: center; justify-content: center;">hello</div>`;
+
+// Both combined: <style> tag is formatted, style="" attribute is left as-is.
+const both = /* HTML */ `<div style="color: red; font-size: 16px;"><style>.bar { background: blue; margin: 0; padding: 10px 20px; }</style><p>hello</p></div>`;
+
+// With expressions
+function d(color) {
+	return /* HTML */ `<style>.dynamic { color: ${color}; }</style><p style="color: ${color};">${color}</p>`;
+}

apps/oxfmt/conformance/fixtures/edge-cases/html-in-js/last-argument-expansion.js

@@ -0,0 +1,11 @@
+// Tagged: html`...`
+foo(html`<div><p>bar</p>foo</div>`);
+foo(html` <div><p>bar</p>foo</div> `);
+const a = b => html`<div><p>bar</p>foo</div>`;
+const c = b => html` <div><p>bar</p>foo</div> `;
+
+// Comment: /* HTML */ `...`
+foo(/* HTML */ `<div><p>bar</p>foo</div>`);
+foo(/* HTML */ ` <div><p>bar</p>foo</div> `);
+const e = b => /* HTML */ `<div><p>bar</p>foo</div>`;
+const g = b => /* HTML */ ` <div><p>bar</p>foo</div> `;

apps/oxfmt/conformance/run.ts

@@ -78,6 +78,30 @@ const categories: Category[] = [
       "styled-components.js": "`Xxx.extend` not recognized as tag",
     },
   },
+  {
+    name: "html-in-js",
+    sources: [
+      {
+        dir: join(PRETTIER_FIXTURES_DIR, "js/multiparser-html"),
+        ext: ".js",
+        excludes: ["format.test.js"],
+      },
+      {
+        dir: join(FIXTURES_DIR, "webawesome"),
+        ext: ".ts",
+      },
+      { dir: join(EDGE_CASES_DIR, "html-in-js") },
+    ],
+    optionSets: [{ printWidth: 80 }, { printWidth: 100, htmlWhitespaceSensitivity: "ignore" }],
+    notes: {
+      "issue-10691.js":
+        "js-in-html(`<script>`)-in-js needs lot more work; Please see oxc_formatter/src/print/template/embed/html.rs",
+      "relative-time/relative-time.test.ts":
+        "html-in-js: Need to solve `label({ embed, hug }))` + `shouldExpandLastArg`",
+      "slider/slider.ts":
+        "`@decorator` + union type: https://github.com/oxc-project/oxc/issues/20519",
+    },
+  },
   {
     name: "xxx-in-js-comment",
     sources: [
@@ -94,9 +118,7 @@ const categories: Category[] = [
       { dir: join(EDGE_CASES_DIR, "xxx-in-js-comment") },
     ],
     optionSets: [{ printWidth: 80 }],
-    notes: {
-      "comment-inside.js": "html embed expressions not yet implemented",
-    },
+    notes: {},
   },
 ];
 

apps/oxfmt/conformance/snapshots/conformance.snap.md

@@ -58,14 +58,34 @@
 | :--- | :--- |
 | [styled-components.js](diffs/css-in-js/styled-components.js.md) | `Xxx.extend` not recognized as tag |
 
-## xxx-in-js-comment
+## html-in-js
 
-### Option 1: 4/5 (80.00%)
+### Option 1: 181/184 (98.37%)
 
 ```json
 {"printWidth":80}
 ```
 
 | File | Note |
 | :--- | :--- |
-| [comment-inside.js](diffs/xxx-in-js-comment/comment-inside.js.md) | html embed expressions not yet implemented |
+| [issue-10691.js](diffs/html-in-js/issue-10691.js.md) | js-in-html(`<script>`)-in-js needs lot more work; Please see oxc_formatter/src/print/template/embed/html.rs |
+| [relative-time/relative-time.test.ts](diffs/html-in-js/relative-time__relative-time.test.ts.md) | html-in-js: Need to solve `label({ embed, hug }))` + `shouldExpandLastArg` |
+| [slider/slider.ts](diffs/html-in-js/slider__slider.ts.md) | `@decorator` + union type: https://github.com/oxc-project/oxc/issues/20519 |
+
+### Option 2: 183/184 (99.46%)
+
+```json
+{"printWidth":100,"htmlWhitespaceSensitivity":"ignore"}
+```
+
+| File | Note |
+| :--- | :--- |
+| [issue-10691.js](diffs/html-in-js/issue-10691.js.md) | js-in-html(`<script>`)-in-js needs lot more work; Please see oxc_formatter/src/print/template/embed/html.rs |
+
+## xxx-in-js-comment
+
+### Option 1: 5/5 (100.00%)
+
+```json
+{"printWidth":80}
+```

apps/oxfmt/conformance/snapshots/diffs/html-in-js/issue-10691.js.md

@@ -0,0 +1,115 @@
+# issue-10691.js
+
+> js-in-html(`<script>`)-in-js needs lot more work; Please see oxc_formatter/src/print/template/embed/html.rs
+
+## Option 1
+
+`````json
+{"printWidth":80}
+`````
+
+### Diff
+
+`````diff
+===================================================================
+--- prettier
++++ oxfmt
+@@ -1,7 +1,9 @@
+ export default function include_photoswipe(gallery_selector = ".my-gallery") {
+-  return /* HTML */ ` <script>
+-    window.addEventListener("load", () =>
+-      initPhotoSwipeFromDOM("${gallery_selector}"),
+-    );
+-  </script>`;
++  return /* HTML */ `
++    <script>
++      window.addEventListener("load", () =>
++        initPhotoSwipeFromDOM("${gallery_selector}"),
++      );
++    </script>
++  `;
+ }
+
+`````
+
+### Actual (oxfmt)
+
+`````js
+export default function include_photoswipe(gallery_selector = ".my-gallery") {
+  return /* HTML */ `
+    <script>
+      window.addEventListener("load", () =>
+        initPhotoSwipeFromDOM("${gallery_selector}"),
+      );
+    </script>
+  `;
+}
+
+`````
+
+### Expected (prettier)
+
+`````js
+export default function include_photoswipe(gallery_selector = ".my-gallery") {
+  return /* HTML */ ` <script>
+    window.addEventListener("load", () =>
+      initPhotoSwipeFromDOM("${gallery_selector}"),
+    );
+  </script>`;
+}
+
+`````
+
+## Option 2
+
+`````json
+{"printWidth":100,"htmlWhitespaceSensitivity":"ignore"}
+`````
+
+### Diff
+
+`````diff
+===================================================================
+--- prettier
++++ oxfmt
+@@ -1,7 +1,9 @@
+ export default function include_photoswipe(gallery_selector = ".my-gallery") {
+   return /* HTML */ `
+     <script>
+-      window.addEventListener("load", () => initPhotoSwipeFromDOM("${gallery_selector}"));
++      window.addEventListener("load", () =>
++        initPhotoSwipeFromDOM("${gallery_selector}"),
++      );
+     </script>
+   `;
+ }
+
+`````
+
+### Actual (oxfmt)
+
+`````js
+export default function include_photoswipe(gallery_selector = ".my-gallery") {
+  return /* HTML */ `
+    <script>
+      window.addEventListener("load", () =>
+        initPhotoSwipeFromDOM("${gallery_selector}"),
+      );
+    </script>
+  `;
+}
+
+`````
+
+### Expected (prettier)
+
+`````js
+export default function include_photoswipe(gallery_selector = ".my-gallery") {
+  return /* HTML */ `
+    <script>
+      window.addEventListener("load", () => initPhotoSwipeFromDOM("${gallery_selector}"));
+    </script>
+  `;
+}
+
+`````