Fixes an error that occurs when non-script syntax is written in a script tag in HTML

src/packages/core-parts/finder.ts

@@ -379,30 +379,64 @@ export function findTargetBraceNodesForHtml(
                   value: z.string(),
                 }),
               ),
+              attrs: z.array(
+                z.object({
+                  name: z.string(),
+                  value: z.unknown(),
+                }),
+              ),
             }),
           ) &&
           node.name === 'script'
         ) {
           const textNodeInScript = node.children.at(0);
 
-          if (addon.parseTypescript && textNodeInScript) {
-            const openingTagEndingOffset = node.startSourceSpan.end.offset;
+          if (node.attrs.find((attr) => attr.name === 'lang' && attr.value === 'ts')) {
+            if (addon.parseTypescript && textNodeInScript) {
+              const openingTagEndingOffset = node.startSourceSpan.end.offset;
 
-            const typescriptAst = addon.parseTypescript(textNodeInScript.value, {
-              ...options,
-              parser: 'typescript',
-            });
-            const targetBraceNodesInScript = findTargetBraceNodes(typescriptAst).map<BraceNode>(
-              ({ type, range: [braceNodeRangeStart, braceNodeRangeEnd] }) => ({
-                type,
-                range: [
-                  braceNodeRangeStart + openingTagEndingOffset,
-                  braceNodeRangeEnd + openingTagEndingOffset,
-                ],
-              }),
-            );
+              const typescriptAst = addon.parseTypescript(textNodeInScript.value, {
+                ...options,
+                parser: 'typescript',
+              });
+              const targetBraceNodesInScript = findTargetBraceNodes(typescriptAst).map<BraceNode>(
+                ({ type, range: [braceNodeRangeStart, braceNodeRangeEnd] }) => ({
+                  type,
+                  range: [
+                    braceNodeRangeStart + openingTagEndingOffset,
+                    braceNodeRangeEnd + openingTagEndingOffset,
+                  ],
+                }),
+              );
 
-            braceNodes.push(...targetBraceNodesInScript);
+              braceNodes.push(...targetBraceNodesInScript);
+            }
+          } else if (
+            node.attrs.find(
+              (attr) =>
+                attr.name === 'type' && (attr.value === '' || attr.value === 'text/javascript'),
+            ) ||
+            !node.attrs.find((attr) => attr.name === 'type')
+          ) {
+            if (addon.parseBabel && textNodeInScript) {
+              const openingTagEndingOffset = node.startSourceSpan.end.offset;
+
+              const babelAst = addon.parseBabel(textNodeInScript.value, {
+                ...options,
+                parser: 'babel',
+              });
+              const targetBraceNodesInScript = findTargetBraceNodes(babelAst).map<BraceNode>(
+                ({ type, range: [braceNodeRangeStart, braceNodeRangeEnd] }) => ({
+                  type,
+                  range: [
+                    braceNodeRangeStart + openingTagEndingOffset,
+                    braceNodeRangeEnd + openingTagEndingOffset,
+                  ],
+                }),
+              );
+
+              braceNodes.push(...targetBraceNodesInScript);
+            }
           }
         }
         break;

tests/v2-test/html/script-tag/1tbs.test.ts

@@ -0,0 +1,26 @@
+import { format } from 'prettier';
+import { baseOptions } from 'test-settings';
+import { expect, test } from 'vitest';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import * as thisPlugin from '@/packages/v2-plugin';
+
+import { fixtures } from './fixtures';
+
+const options = {
+  ...baseOptions,
+  plugins: [thisPlugin],
+  parser: 'html',
+  braceStyle: '1tbs',
+};
+
+for (const fixture of fixtures) {
+  test(fixture.name, () => {
+    expect(
+      format(fixture.input, {
+        ...options,
+        ...(fixture.options ?? {}),
+      }),
+    ).toMatchSnapshot();
+  });
+}

tests/v2-test/html/script-tag/__snapshots__/1tbs.test.ts.snap

@@ -0,0 +1,48 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`(1) If a script tag has no type, it is assumed to contain JavaScript code. 1`] = `
+"<script>
+  export function Foo({ children }) {
+    return <div className="lorem ipsum dolor sit amet">{children}</div>;
+  }
+</script>
+"
+`;
+
+exports[`(2) If a script tag has an empty type, it is assumed to contain JavaScript code. 1`] = `
+"<script type="">
+  export function Foo({ children }) {
+    return <div className="lorem ipsum dolor sit amet">{children}</div>;
+  }
+</script>
+"
+`;
+
+exports[`(3) If a script tag has a type of \`text/javascript\`, it is assumed to contain JavaScript code. 1`] = `
+"<script type="text/javascript">
+  export function Foo({ children }) {
+    return <div className="lorem ipsum dolor sit amet">{children}</div>;
+  }
+</script>
+"
+`;
+
+exports[`(4) If a script tag has a \`lang\` attribute whose value is \`ts\`, it is assumed to contain TypeScript code, regardless of type. 1`] = `
+"<script lang="ts" type="anything">
+  interface MyInterface {
+    foo(): string;
+    bar: Array<number>;
+  }
+</script>
+"
+`;
+
+exports[`(5) Otherwise, leave Prettier's output as is. 1`] = `
+"<script type="application/json">
+  {
+    "lorem": "ipsum",
+    "dolor": "sit amet"
+  }
+</script>
+"
+`;

tests/v2-test/html/script-tag/__snapshots__/allman.test.ts.snap

@@ -0,0 +1,52 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`(1) If a script tag has no type, it is assumed to contain JavaScript code. 1`] = `
+"<script>
+  export function Foo({ children })
+  {
+    return <div className="lorem ipsum dolor sit amet">{children}</div>;
+  }
+</script>
+"
+`;
+
+exports[`(2) If a script tag has an empty type, it is assumed to contain JavaScript code. 1`] = `
+"<script type="">
+  export function Foo({ children })
+  {
+    return <div className="lorem ipsum dolor sit amet">{children}</div>;
+  }
+</script>
+"
+`;
+
+exports[`(3) If a script tag has a type of \`text/javascript\`, it is assumed to contain JavaScript code. 1`] = `
+"<script type="text/javascript">
+  export function Foo({ children })
+  {
+    return <div className="lorem ipsum dolor sit amet">{children}</div>;
+  }
+</script>
+"
+`;
+
+exports[`(4) If a script tag has a \`lang\` attribute whose value is \`ts\`, it is assumed to contain TypeScript code, regardless of type. 1`] = `
+"<script lang="ts" type="anything">
+  interface MyInterface
+  {
+    foo(): string;
+    bar: Array<number>;
+  }
+</script>
+"
+`;
+
+exports[`(5) Otherwise, leave Prettier's output as is. 1`] = `
+"<script type="application/json">
+  {
+    "lorem": "ipsum",
+    "dolor": "sit amet"
+  }
+</script>
+"
+`;

tests/v2-test/html/script-tag/__snapshots__/stroustrup.test.ts.snap

@@ -0,0 +1,48 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`(1) If a script tag has no type, it is assumed to contain JavaScript code. 1`] = `
+"<script>
+  export function Foo({ children }) {
+    return <div className="lorem ipsum dolor sit amet">{children}</div>;
+  }
+</script>
+"
+`;
+
+exports[`(2) If a script tag has an empty type, it is assumed to contain JavaScript code. 1`] = `
+"<script type="">
+  export function Foo({ children }) {
+    return <div className="lorem ipsum dolor sit amet">{children}</div>;
+  }
+</script>
+"
+`;
+
+exports[`(3) If a script tag has a type of \`text/javascript\`, it is assumed to contain JavaScript code. 1`] = `
+"<script type="text/javascript">
+  export function Foo({ children }) {
+    return <div className="lorem ipsum dolor sit amet">{children}</div>;
+  }
+</script>
+"
+`;
+
+exports[`(4) If a script tag has a \`lang\` attribute whose value is \`ts\`, it is assumed to contain TypeScript code, regardless of type. 1`] = `
+"<script lang="ts" type="anything">
+  interface MyInterface {
+    foo(): string;
+    bar: Array<number>;
+  }
+</script>
+"
+`;
+
+exports[`(5) Otherwise, leave Prettier's output as is. 1`] = `
+"<script type="application/json">
+  {
+    "lorem": "ipsum",
+    "dolor": "sit amet"
+  }
+</script>
+"
+`;

tests/v2-test/html/script-tag/allman.test.ts

@@ -0,0 +1,26 @@
+import { format } from 'prettier';
+import { baseOptions } from 'test-settings';
+import { expect, test } from 'vitest';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import * as thisPlugin from '@/packages/v2-plugin';
+
+import { fixtures } from './fixtures';
+
+const options = {
+  ...baseOptions,
+  plugins: [thisPlugin],
+  parser: 'html',
+  braceStyle: 'allman',
+};
+
+for (const fixture of fixtures) {
+  test(fixture.name, () => {
+    expect(
+      format(fixture.input, {
+        ...options,
+        ...(fixture.options ?? {}),
+      }),
+    ).toMatchSnapshot();
+  });
+}

tests/v2-test/html/script-tag/fixtures.ts

@@ -0,0 +1,70 @@
+import type { Fixture } from 'test-settings';
+
+export const fixtures: Omit<Fixture, 'output'>[] = [
+  {
+    name: '(1) If a script tag has no type, it is assumed to contain JavaScript code.',
+    input: `
+<script>
+export function Foo({ children }) {
+  return (
+    <div className="lorem ipsum dolor sit amet">
+      {children}
+    </div>
+  );
+}
+</script>
+`,
+    options: {},
+  },
+  {
+    name: '(2) If a script tag has an empty type, it is assumed to contain JavaScript code.',
+    input: `
+<script type="">
+export function Foo({ children }) {
+  return (
+    <div className="lorem ipsum dolor sit amet">
+      {children}
+    </div>
+  );
+}
+</script>
+`,
+    options: {},
+  },
+  {
+    name: '(3) If a script tag has a type of `text/javascript`, it is assumed to contain JavaScript code.',
+    input: `
+<script type="text/javascript">
+export function Foo({ children }) {
+  return (
+    <div className="lorem ipsum dolor sit amet">
+      {children}
+    </div>
+  );
+}
+</script>
+`,
+    options: {},
+  },
+  {
+    name: '(4) If a script tag has a `lang` attribute whose value is `ts`, it is assumed to contain TypeScript code, regardless of type.',
+    input: `
+<script lang="ts" type="anything">
+interface MyInterface { foo(): string, bar: Array<number> }
+</script>
+`,
+    options: {},
+  },
+  {
+    name: "(5) Otherwise, leave Prettier's output as is.",
+    input: `
+<script type="application/json">
+{
+lorem: "ipsum",
+'dolor': 'sit amet',
+}
+</script>
+`,
+    options: {},
+  },
+];

tests/v2-test/html/script-tag/stroustrup.test.ts

@@ -0,0 +1,26 @@
+import { format } from 'prettier';
+import { baseOptions } from 'test-settings';
+import { expect, test } from 'vitest';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import * as thisPlugin from '@/packages/v2-plugin';
+
+import { fixtures } from './fixtures';
+
+const options = {
+  ...baseOptions,
+  plugins: [thisPlugin],
+  parser: 'html',
+  braceStyle: 'stroustrup',
+};
+
+for (const fixture of fixtures) {
+  test(fixture.name, () => {
+    expect(
+      format(fixture.input, {
+        ...options,
+        ...(fixture.options ?? {}),
+      }),
+    ).toMatchSnapshot();
+  });
+}