chore(playground): migrate formatting to editor component

mdn · Dec 11, 2024 · be7f2a2 · be7f2a2
1 parent c94cafa
commit be7f2a2
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 29 deletions.
diff --git a/client/src/playground/editor.js b/client/src/playground/editor.js
@@ -108,6 +108,48 @@ export class PlayEditor extends LitElement {
     ];
   }
 
+  async format() {
+    const prettier = await import("prettier/standalone");
+    const config = (() => {
+      switch (this.language) {
+        case "javascript":
+          return {
+            parser: "babel",
+            plugins: [
+              import("prettier/plugins/babel"),
+              // XXX Using .mjs until https://github.com/prettier/prettier/pull/15018 is deployed
+              import("prettier/plugins/estree.mjs"),
+            ],
+          };
+        case "html":
+          return {
+            parser: "html",
+            plugins: [
+              import("prettier/plugins/html"),
+              import("prettier/plugins/postcss"),
+              import("prettier/plugins/babel"),
+              // XXX Using .mjs until https://github.com/prettier/prettier/pull/15018 is deployed
+              import("prettier/plugins/estree.mjs"),
+            ],
+          };
+        case "css":
+          return {
+            parser: "css",
+            plugins: [import("prettier/plugins/postcss")],
+          };
+        default:
+          return undefined;
+      }
+    })();
+    if (config) {
+      const plugins = await Promise.all(config.plugins);
+      this.value = await prettier.format(this.value, {
+        parser: config.parser,
+        plugins,
+      });
+    }
+  }
+
   /** @param {PropertyValues} changedProperties */
   willUpdate(changedProperties) {
     if (

diff --git a/client/src/playground/index.tsx b/client/src/playground/index.tsx
@@ -1,13 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import useSWRImmutable from "swr/immutable";
-import prettier from "prettier/standalone";
-import prettierPluginBabel from "prettier/plugins/babel";
-import prettierPluginCSS from "prettier/plugins/postcss";
-// XXX Using .mjs until https://github.com/prettier/prettier/pull/15018 is deployed
-import prettierPluginESTree from "prettier/plugins/estree.mjs";
-import prettierPluginHTML from "prettier/plugins/html";
-
 import { Button } from "../ui/atoms/button";
 import { ReactPlayEditor, PlayEditor } from "./editor";
 import { SidePlacement } from "../ui/organisms/placement";
@@ -296,33 +289,17 @@ export default function Playground() {
   };
 
   const format = async () => {
-    const { html, css, js } = getEditorContent();
-
     try {
-      const formatted = {
-        html: await prettier.format(html, {
-          parser: "html",
-          plugins: [
-            prettierPluginHTML,
-            prettierPluginCSS,
-            prettierPluginBabel,
-            prettierPluginESTree,
-          ],
-        }),
-        css: await prettier.format(css, {
-          parser: "css",
-          plugins: [prettierPluginCSS],
-        }),
-        js: await prettier.format(js, {
-          parser: "babel",
-          plugins: [prettierPluginBabel, prettierPluginESTree],
-        }),
-      };
-      setEditorContent(formatted);
+      await Promise.all([
+        htmlRef.current?.format(),
+        cssRef.current?.format(),
+        jsRef.current?.format(),
+      ]);
     } catch (e) {
       console.error(e);
     }
   };
+
   const share = useCallback(async () => {
     const { url, id } = await save(getEditorContent());
     setSearchParams([["id", id]], { replace: true });