feat(deps)!: upgrade prettier to v3 (#133)

carbon-design-system · Nov 10, 2024 · 11d086e · 11d086e
1 parent 747faa9
commit 11d086e
Show file tree

Hide file tree

Showing 20 changed files with 72 additions and 62 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "acorn": "^8.12.1",
     "comment-parser": "^1.4.1",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "rollup": "^2.79.1",
     "rollup-plugin-svelte": "^7.2.2",
     "svelte": "^4.2.19",
@@ -27,8 +27,8 @@
   "devDependencies": {
     "@types/bun": "^1.1.12",
     "@types/jest": "^29.5.13",
-    "@types/prettier": "^2.7.3",
-    "prettier-plugin-svelte": "^2.10.1"
+    "@types/prettier": "^3.0.0",
+    "prettier-plugin-svelte": "^3.2.7"
   },
   "bin": {
     "sveld": "cli.js"

diff --git a/playground/bun.lockb b/playground/bun.lockb
diff --git a/playground/index.html b/playground/index.html
@@ -1,16 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" theme="g100" style="color-scheme: dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="description" content="Generate TypeScript definitions for your Svelte components." />
+  </head>
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
-  <meta name="description" content="Generate TypeScript definitions for your Svelte components." />
-</head>
-
-<body>
-  <script type="module" src="./src/index.ts">
-  </script>
-</body>
-
-</html>
+  <body>
+    <script type="module" src="./src/index.ts"></script>
+  </body>
+</html>
diff --git a/playground/package.json b/playground/package.json
@@ -12,7 +12,7 @@
     "carbon-components-svelte": "^0.85.4",
     "carbon-preprocess-svelte": "^0.11.7",
     "codemirror": "^5.65.18",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "svelte-highlight": "^7.7.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.10"

diff --git a/playground/src/TabMarkdown.svelte b/playground/src/TabMarkdown.svelte
@@ -2,12 +2,13 @@
   export let parsed_component = {};
   export let moduleName = "";
 
-  import plugin from "prettier/parser-markdown";
-  import prettier from "prettier/standalone";
+  import pluginMarkdown from "prettier/plugins/markdown";
+  import { format } from "prettier/standalone";
   import writeMarkdown from "../../src/writer/writer-markdown";
   import CodeHighlighter from "./CodeHighlighter.svelte";
 
   let markdown = "";
+  let code = "";
 
   $: components = new Map([[moduleName, { ...parsed_component, moduleName }]]);
   $: writeMarkdown(components, { write: false })
@@ -17,10 +18,18 @@
     .catch((error) => {
       console.log(error);
     });
-  $: code = prettier.format(markdown, {
-    parser: "markdown",
-    plugins: [plugin],
-  });
+  $: {
+    format(markdown, {
+      parser: "markdown",
+      plugins: [pluginMarkdown],
+    })
+      .then((formatted) => {
+        code = formatted;
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }
 </script>
 
 <CodeHighlighter noWrap language="markdown" {code} />
diff --git a/playground/src/TabTypeScript.svelte b/playground/src/TabTypeScript.svelte
@@ -2,8 +2,9 @@
   export let parsed_component = {};
   export let moduleName = "";
 
-  import plugin from "prettier/parser-typescript";
-  import prettier from "prettier/standalone";
+  import pluginTypeScript from "prettier/plugins/typescript";
+  import pluginEstree from "prettier/plugins/estree";
+  import { format } from "prettier/standalone";
   import { writeTsDefinition } from "../../src/writer/writer-ts-definitions";
   import CodeHighlighter from "./CodeHighlighter.svelte";
   import TabContentOverlay from "./TabContentOverlay.svelte";
@@ -15,15 +16,17 @@
     moduleName,
   });
   $: {
-    try {
-      prettier_error = null;
-      code = prettier.format(code, {
-        parser: "typescript",
-        plugins: [plugin],
+    prettier_error = null;
+    format(code, {
+      parser: "typescript",
+      plugins: [pluginTypeScript, pluginEstree],
+    })
+      .then((formatted) => {
+        code = formatted;
+      })
+      .catch((error) => {
+        prettier_error = error;
       });
-    } catch (error) {
-      prettier_error = error;
-    }
   }
 </script>
 

diff --git a/playground/src/index.ts b/playground/src/index.ts
@@ -1,4 +1,4 @@
 import "carbon-components-svelte/css/all.css";
 import App from "./App.svelte";
 
-new App({ target: document.body });
+new App({ target: document.body });
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
@@ -11,7 +11,7 @@
     "skipLibCheck": true,
     "strict": true,
     "target": "ESNext",
-    "verbatimModuleSyntax": true,
+    "verbatimModuleSyntax": true
   },
   "include": ["src"]
 }
diff --git a/src/ComponentParser.ts b/src/ComponentParser.ts
@@ -554,7 +554,7 @@ export default class ComponentParser {
 
             const additional_tags =
               comment[0]?.tags.filter(
-                (tag) => !["type", "extends", "restProps", "slot", "event", "typedef"].includes(tag.tag)
+                (tag) => !["type", "extends", "restProps", "slot", "event", "typedef"].includes(tag.tag),
               ) ?? [];
 
             if (additional_tags.length > 0 && description === undefined) {

diff --git a/src/writer/Writer.ts b/src/writer/Writer.ts
@@ -11,9 +11,10 @@ export default class Writer {
     this.options = options;
   }
 
-  public format(raw: any) {
+  public async format(raw: any) {
     try {
-      return prettier.format(raw, this.options);
+      const result = await prettier.format(raw, this.options);
+      return result;
     } catch (error) {
       console.error(error);
       return raw;
@@ -22,6 +23,6 @@ export default class Writer {
 
   public async write(filePath: string, raw: any) {
     await fsp.mkdir(path.parse(filePath).dir, { recursive: true });
-    await fsp.writeFile(filePath, this.format(raw));
+    await fsp.writeFile(filePath, await this.format(raw));
   }
 }
diff --git a/src/writer/WriterMarkdown.ts b/src/writer/WriterMarkdown.ts
@@ -83,7 +83,7 @@ export default class WriterMarkdown extends Writer {
         .map(({ array, raw }) => {
           return `${array.join(" ")} - [${raw}](#${raw.toLowerCase().replace(/\`/g, "").replace(/\s+/g, "-")})`;
         })
-        .join("\n")
+        .join("\n"),
     );
 
     return this.source;

diff --git a/src/writer/writer-markdown.ts b/src/writer/writer-markdown.ts
@@ -72,7 +72,7 @@ export default async function writeMarkdown(components: ComponentDocs, options:
         "raw",
         `\`\`\`ts\n${getTypeDefs({
           typedefs: component.typedefs,
-        })}\n\`\`\`\n\n`
+        })}\n\`\`\`\n\n`,
       );
     }
 
@@ -91,8 +91,8 @@ export default async function writeMarkdown(components: ComponentDocs, options:
             `| ${prop.name} | ${prop.isRequired ? "Yes" : "No"} | ${`<code>${prop.kind}</code>`} | ${
               prop.reactive ? "Yes" : "No"
             } | ${formatPropType(prop.type)} | ${formatPropValue(prop.value)} | ${formatPropDescription(
-              prop.description
-            )} |\n`
+              prop.description,
+            )} |\n`,
           );
         });
     } else {
@@ -106,8 +106,8 @@ export default async function writeMarkdown(components: ComponentDocs, options:
         document.append(
           "raw",
           `| ${slot.default ? MD_TYPE_UNDEFINED : slot.name} | ${slot.default ? "Yes" : "No"} | ${formatSlotProps(
-            slot.slot_props
-          )} | ${formatSlotFallback(slot.fallback)} |\n`
+            slot.slot_props,
+          )} | ${formatSlotFallback(slot.fallback)} |\n`,
         );
       });
     } else {
@@ -123,7 +123,7 @@ export default async function writeMarkdown(components: ComponentDocs, options:
           "raw",
           `| ${event.name} | ${event.type} | ${
             event.type === "dispatched" ? formatEventDetail(event.detail) : MD_TYPE_UNDEFINED
-          } |\n`
+          } |\n`,
         );
       });
     } else {

diff --git a/tests/Writer.test.ts b/tests/Writer.test.ts
@@ -6,33 +6,33 @@ describe("Writer", () => {
     global.console.error = jest.fn();
   });
 
-  test("TypeScript", () => {
+  test("TypeScript", async () => {
     const consoleError = jest.spyOn(console, "error");
     const writer = new Writer({ parser: "typescript", printWidth: 120 });
 
-    expect(writer.format("interface I {a:boolean}")).toEqual("interface I {\n  a: boolean;\n}\n");
+    expect(await writer.format("interface I {a:boolean}")).toEqual("interface I {\n  a: boolean;\n}\n");
     expect(consoleError).toHaveBeenCalledTimes(0);
     // Invalid JSON should emit Prettier parsing error
-    expect(writer.format("a:boolean}")).toEqual("a:boolean}");
+    expect(await writer.format("a:boolean}")).toEqual("a:boolean}");
     expect(consoleError).toHaveBeenCalledTimes(1);
   });
 
-  test("JSON", () => {
+  test("JSON", async () => {
     const consoleError = jest.spyOn(console, "error");
     const writer = new Writer({ parser: "json", printWidth: 80 });
 
-    expect(writer.format("{a:null}")).toEqual('{ "a": null }\n');
+    expect(await writer.format("{a:null}")).toEqual('{ "a": null }\n');
 
     expect(consoleError).toHaveBeenCalledTimes(0);
     // Invalid JSON should emit Prettier parsing error
-    expect(writer.format("a:null")).toEqual("a:null");
+    expect(await writer.format("a:null")).toEqual("a:null");
     expect(consoleError).toHaveBeenCalledTimes(1);
   });
 
-  test("Markdown", () => {
+  test("Markdown", async () => {
     const writer = new Writer({ parser: "markdown", printWidth: 80 });
 
-    expect(writer.format("## text")).toEqual("## text\n");
-    expect(writer.format({ a: null })).toEqual({ a: null });
+    expect(await writer.format("## text")).toEqual("## text\n");
+    expect(await writer.format({ a: null })).toEqual({ a: null });
   });
 });
diff --git a/tests/__snapshots__/fixtures.test.ts.snap b/tests/__snapshots__/fixtures.test.ts.snap
@@ -1385,7 +1385,7 @@ export type GenericsMultipleProps<Row, Header> = {
 
 export default class GenericsMultiple<
   Row extends DataTableRow = DataTableRow,
-  Header extends DataTableRow = DataTableRow
+  Header extends DataTableRow = DataTableRow,
 > extends SvelteComponentTyped<
   GenericsMultipleProps<Row, Header>,
   Record<string, any>,

diff --git a/tests/e2e/carbon/types/DataTable/DataTable.svelte.d.ts b/tests/e2e/carbon/types/DataTable/DataTable.svelte.d.ts
@@ -187,7 +187,7 @@ export type DataTableProps<Row> = Omit<$RestProps, keyof $Props<Row>> &
   $Props<Row>;
 
 export default class DataTable<
-  Row extends DataTableRow = DataTableRow
+  Row extends DataTableRow = DataTableRow,
 > extends SvelteComponentTyped<
   DataTableProps<Row>,
   {

diff --git a/tests/e2e/glob/types/button/Button.svelte.d.ts b/tests/e2e/glob/types/button/Button.svelte.d.ts
@@ -9,7 +9,7 @@ export declare function computeTreeLeafDepth(): any;
  * Finds the nearest parent tree node
  */
 export declare function findParentTreeNode(
-  node: HTMLElement
+  node: HTMLElement,
 ): null | HTMLElement;
 
 type $RestProps = SvelteHTMLElements["button"];

diff --git a/tests/fixtures.test.ts b/tests/fixtures.test.ts
@@ -54,7 +54,7 @@ describe("fixtures (TypeScript)", async () => {
       filePath,
       source: fixtures_map.get(filePath)!,
     });
-    const api_ts = writer.format(writeTsDefinition({ ...metadata, ...parsed_component }));
+    const api_ts = await writer.format(writeTsDefinition({ ...metadata, ...parsed_component }));
 
     // Snapshot the output; if the test fails, output has changed.
     expect(api_ts).toMatchSnapshot();

diff --git a/tests/fixtures/generics-multiple/output.d.ts b/tests/fixtures/generics-multiple/output.d.ts
@@ -26,7 +26,7 @@ export type GenericsMultipleProps<Row, Header> = {
 
 export default class GenericsMultiple<
   Row extends DataTableRow = DataTableRow,
-  Header extends DataTableRow = DataTableRow
+  Header extends DataTableRow = DataTableRow,
 > extends SvelteComponentTyped<
   GenericsMultipleProps<Row, Header>,
   Record<string, any>,

diff --git a/tests/writer-ts-definitions.test.ts b/tests/writer-ts-definitions.test.ts
@@ -16,7 +16,7 @@ describe("writerTsDefinition", () => {
             ts: "interface MyTypedef { [key: string]: boolean; }",
           },
         ],
-      })
+      }),
     ).toEqual("export interface MyTypedef { [key: string]: boolean; }");
 
     const parsed_output: ParsedComponent = {
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,7 @@ describe("writerTsDefinition", () => { @@
                 ts: "interface MyTypedef { [key: string]: boolean; }",
               },
             ],
-          })
+          }),
         ).toEqual("export interface MyTypedef { [key: string]: boolean; }");
         const parsed_output: ParsedComponent = {
@@ Expand Down @@