docs: omit Prettier from client JS

docs/package-lock.json

@@ -33,9 +33,15 @@
         "flatpickr": "4.6.9"
       },
       "devDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^3.1.2",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/svelte": "^5.2.6",
+        "@testing-library/user-event": "^14.5.2",
         "autoprefixer": "^10.4.8",
         "carbon-components": "10.58.12",
         "carbon-icons-svelte": "^12.1.0",
+        "carbon-preprocess-svelte": "^0.11.7",
+        "jsdom": "^25.0.1",
         "postcss": "^8.4.16",
         "prettier": "^3.3.3",
         "prettier-plugin-svelte": "^3.2.8",
@@ -45,7 +51,8 @@
         "svelte": "^4.2.10",
         "svelte-check": "^4.0.6",
         "tinyglobby": "^0.2.10",
-        "typescript": "^5.6.3"
+        "typescript": "^5.6.3",
+        "vitest": "^2.1.5"
       }
     },
     "node_modules/@ampproject/remapping": {

docs/src/components/ComponentApi.svelte

@@ -127,7 +127,6 @@
                       <svelte:component
                         this={AsyncPreviewTypeScript}
                         type="inline"
-                        noFormat
                         code={typeMap[type]}
                       />
                     </div>
@@ -138,7 +137,6 @@
                       <svelte:component
                         this={AsyncPreviewTypeScript}
                         type="inline"
-                        noFormat
                         code={type}
                       />
                     </div>
@@ -152,7 +150,6 @@
                       <svelte:component
                         this={AsyncPreviewTypeScript}
                         type="inline"
-                        noFormat
                         code={type}
                       />
                     </div>
@@ -179,8 +176,7 @@
                   <svelte:component
                     this={AsyncPreviewTypeScript}
                     type="inline"
-                    noFormat
+                    code={prop.value}
-                    code={prop.value.replace(/\s+/g, " ")}
                   />
                 {/if}
               {:else if prop.value === undefined}
@@ -189,7 +185,6 @@
                 <svelte:component
                   this={AsyncPreviewTypeScript}
                   type="inline"
-                  noFormat
                   code={prop.value}
                 />
               {/if}
@@ -220,21 +215,41 @@
 <h2 id="typedefs">Typedefs</h2>
 
 {#if component.typedefs.length > 0}
-  <svelte:component
+  <div class="my-layout-01-03">
-    this={AsyncPreviewTypeScript}
+    <svelte:component
-    code={component.typedefs.map((t) => t.ts).join(";\n\n")}
+      this={AsyncPreviewTypeScript}
-  />
+      code={component.typedefs.map((t) => t.ts).join("\n")}
+    />
+  </div>
 {:else}
   <p class="my-layout-01-03">No typedefs.</p>
 {/if}
 
 <h2 id="slots">Slots</h2>
 {#if component.slots.length > 0}
-  <UnorderedList class="my-layout-01-03">
+  <StructuredList class="my-layout-01-03">
-    {#each component.slots as slot (slot.name)}
+    <StructuredListHead>
-      <ListItem>{slot.default ? "default" : slot.name}</ListItem>
+      <StructuredListRow>
-    {/each}
+        <StructuredListCell>Slot name</StructuredListCell>
-  </UnorderedList>
+        <StructuredListCell>Slot detail</StructuredListCell>
+      </StructuredListRow>
+    </StructuredListHead>
+    <StructuredListBody>
+      {#each component.slots as slot (slot.name)}
+        <StructuredListRow>
+          <StructuredListCell>
+            <strong>{slot.default ? "default" : slot.name}</strong>
+          </StructuredListCell>
+          <StructuredListCell>
+            <svelte:component
+              this={AsyncPreviewTypeScript}
+              code={slot.slot_props}
+            />
+          </StructuredListCell>
+        </StructuredListRow>
+      {/each}
+    </StructuredListBody>
+  </StructuredList>
 {:else}
   <p class="my-layout-01-03">No slots.</p>
 {/if}
@@ -273,7 +288,7 @@
           <StructuredListCell>
             <svelte:component
               this={AsyncPreviewTypeScript}
-              code={"type EventDetail = " + event.detail}
+              code={event.detail}
             />
           </StructuredListCell>
           <StructuredListCell>
@@ -317,12 +332,7 @@
     </div>
   {/if}
   {#if full_code}
-    <svelte:component
+    <svelte:component this={AsyncPreviewTypeScript} code={full_code} />
-      this={AsyncPreviewTypeScript}
-      code={full_code.startsWith("()")
-        ? `const ${full_code_prop} = ` + full_code
-        : full_code}
-    />
   {/if}
 </Modal>
 

docs/src/components/Preview.svelte

@@ -35,7 +35,8 @@
   {/if}
   <div class="preview-viewer" class:framed>
     {#if framed}
-      <iframe loading="lazy" title={src.split("/").pop()} src={themedSrcUrl}></iframe>
+      <iframe loading="lazy" title={src.split("/").pop()} src={themedSrcUrl}
+      ></iframe>
     {:else}
       <slot />
     {/if}

docs/src/components/PreviewTypeScript.svelte

@@ -1,30 +1,14 @@
 <script>
   export let code = "";
-  export let noFormat = false;
   export let type = "multi";
 
   import { CodeSnippet } from "carbon-components-svelte";
-  import { format } from "prettier/standalone";
   import { highlight } from "prismjs";
   import "prismjs/components/prism-typescript";
-  import plugin from "prettier/parser-typescript";
   import copy from "clipboard-copy";
 
-  let formattedCode = "";
-  let highlightedCode = "";
-
-  $: {
-    try {
-      formattedCode = noFormat
-        ? code
-        : format(code, { parser: "typescript", plugins: [plugin] });
-    } catch (e) {
-      formattedCode = code;
-    }
-  }
-
   $: highlightedCode = highlight(
-    formattedCode,
+    code,
     Prism.languages.typescript,
     "typescript",
   );
@@ -32,19 +16,14 @@
 
 {#if type === "multi"}
   <div class="code-override">
-    <CodeSnippet type="multi" code={formattedCode} {copy}>
+    <CodeSnippet type="multi" {code} {copy}>
       {@html highlightedCode}
     </CodeSnippet>
   </div>
 {/if}
 
 {#if type === "inline"}
-  <CodeSnippet
+  <CodeSnippet type="inline" class="code-override-inline" {code} {copy}>
-    type="inline"
-    class="code-override-inline"
-    code={formattedCode}
-    {copy}
-  >
     {@html highlightedCode}
   </CodeSnippet>
 {/if}