chore(playground): upgrade prettier to v3

carbon-design-system · Nov 10, 2024 · 9426e65 · 9426e65
1 parent f2dd9a2
commit 9426e65
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 17 deletions.
diff --git a/playground/bun.lockb b/playground/bun.lockb
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>