Fix pnpm format not picking up the svelte plugin

Seems to be a bug with prettier v3: prettier/prettier#15079

client/web-sveltekit/package.json

@@ -12,7 +12,7 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "eslint .",
-    "format": "prettier --plugin-search-dir . --write .",
+    "format": "prettier --config ./prettier.config.js --write . --plugin prettier-plugin-svelte",
     "generate": "pnpm -w generate",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -36,6 +36,7 @@
     "@types/prismjs": "^1.26.0",
     "eslint-plugin-storybook": "^0.6.12",
     "eslint-plugin-svelte3": "^4.0.0",
+    "prettier": "^3.0.0",
     "prettier-plugin-svelte": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

client/web-sveltekit/prettier.config.js

@@ -0,0 +1,7 @@
+import baseConfig from '../../prettier.config.js'
+
+export default {
+  ...baseConfig,
+  plugins: [...(baseConfig.plugins || []), 'prettier-plugin-svelte'],
+  overrides: [...(baseConfig.overrides || []), { files: '*.svelte', options: { parser: 'svelte' } }],
+}

client/web-sveltekit/src/lib/Popover.svelte

@@ -6,7 +6,7 @@
 
     export let placement: Placement = 'bottom'
 
-    const {update, popover} = createPopover()
+    const { update, popover } = createPopover()
 
     let isOpen = false
     let trigger: HTMLElement | null
@@ -30,7 +30,7 @@
 
 <slot {toggle} {registerTrigger} />
 {#if trigger && isOpen}
-    <div use:popover={{target: trigger, options: {placement}}} use:onClickOutside on:click-outside={clickOutside}>
+    <div use:popover={{ target: trigger, options: { placement } }} use:onClickOutside on:click-outside={clickOutside}>
         <slot name="content" {toggle} />
     </div>
 {/if}

client/web-sveltekit/src/lib/Timestamp.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-    function formatDate(date: Date, options: {utc?: boolean}): string {
+    function formatDate(date: Date, options: { utc?: boolean }): string {
         if (options.utc) {
             date = addMinutes(date, date.getTimezoneOffset())
         }
@@ -16,30 +16,30 @@
 </script>
 
 <script lang="ts">
-    import { addMinutes, format, formatDistance, formatDistanceStrict } from "date-fns/esm"
-    import { currentDate } from "./stores"
-    import Tooltip from "./Tooltip.svelte"
+    import { addMinutes, format, formatDistance, formatDistanceStrict } from 'date-fns/esm'
+    import { currentDate } from './stores'
+    import Tooltip from './Tooltip.svelte'
 
     /** The date (if string, in ISO 8601 format). */
-    export let date: Date|string
+    export let date: Date | string
 
     /** Use exact timestamps (i.e. omit "less than", "about", etc.) */
-    export let strict: boolean|undefined = undefined
+    export let strict: boolean | undefined = undefined
 
     /** Show absolute timestamp and show relative timestamp in label*/
-    export let showAbsolute: boolean|undefined = undefined
+    export let showAbsolute: boolean | undefined = undefined
 
     /** Show an appropriate suffix, e.g. 'ago' */
     export let addSuffix: boolean = true
 
     /** Show time in UTC */
-    export let utc: boolean|undefined = undefined
+    export let utc: boolean | undefined = undefined
 
     $: dateObj = typeof date === 'string' ? new Date(date) : date
-    $: formattedDate = formatDate(dateObj, {utc})
-    $: relativeDate = (strict ? formatDistanceStrict : formatDistance)(dateObj, $currentDate, {addSuffix})
+    $: formattedDate = formatDate(dateObj, { utc })
+    $: relativeDate = (strict ? formatDistanceStrict : formatDistance)(dateObj, $currentDate, { addSuffix })
 </script>
 
 <Tooltip tooltip={showAbsolute ? relativeDate : formattedDate}>
-    <span class="timestamp" data-testid="timestamp">{showAbsolute ? formattedDate : relativeDate}
-</Tooltip>
+    <span class="timestamp" data-testid="timestamp">{showAbsolute ? formattedDate : relativeDate} </span></Tooltip
+>

client/web-sveltekit/src/lib/Tooltip.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" context="module">
     import type { Placement } from '@popperjs/core'
-    import {placements} from '@popperjs/core'
+    import { placements } from '@popperjs/core'
 
-    export type {Placement}
-    export {placements}
+    export type { Placement }
+    export { placements }
 </script>
 
 <script lang="ts">
@@ -25,7 +25,7 @@
     export let alwaysVisible = false
 
     const id = uniqueID('tooltip')
-    const {update, popover} = createPopover()
+    const { update, popover } = createPopover()
 
     let visible = false
     let container: HTMLElement
@@ -75,19 +75,18 @@
     <slot />
 </div>
 {#if (alwaysVisible || visible) && target}
-    <div role="tooltip" {id} use:popover={{target, options}}>
+    <div role="tooltip" {id} use:popover={{ target, options }}>
         {tooltip}
         <div data-popper-arrow />
     </div>
 {/if}
 
-
 <style lang="scss">
     .container {
         display: contents;
     }
 
-    [role="tooltip"] {
+    [role='tooltip'] {
         --tooltip-font-size: 0.75rem; // 12px
         --tooltip-line-height: 1.02rem; // 16.32px / 16px, per Figma
         --tooltip-max-width: 256px;

client/web-sveltekit/src/lib/repo/GitReference.svelte

@@ -17,7 +17,10 @@
     </td>
     <td colspan={behind || ahead ? 1 : 2}>
         <a href={ref.url}>
-            <small>Updated {#if authorDate}<Timestamp date={authorDate} strict/>{/if} by {authorName}</small></a>
+            <small
+                >Updated {#if authorDate}<Timestamp date={authorDate} strict />{/if} by {authorName}</small
+            ></a
+        >
     </td>
     {#if ahead || behind}
         <td class="diff">

client/web-sveltekit/src/lib/wildcard/Badge.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-    import classNames from "classnames"
+    import classNames from 'classnames'
     import styles from './Badge.module.scss'
 
     export const BADGE_VARIANTS = [
@@ -13,10 +13,10 @@
         'outlineSecondary',
     ] as const
 
-    export type BadgeVariantType = typeof BADGE_VARIANTS[number]
+    export type BadgeVariantType = (typeof BADGE_VARIANTS)[number]
 
     export function badgeClassName(variant: BadgeVariantType, small?: boolean, pill?: boolean): string {
-        return classNames(styles.badge, styles[variant], {[styles.small]: small, [styles.pill]: pill})
+        return classNames(styles.badge, styles[variant], { [styles.small]: small, [styles.pill]: pill })
     }
 </script>
 
@@ -28,11 +28,11 @@
     /**
      * Allows modifying the size of the badge. Supports a smaller variant.
      */
-    export let small: boolean|undefined = undefined
+    export let small: boolean | undefined = undefined
     /**
      * Render the badge as a rounded pill
      */
-    export let pill: boolean|undefined = undefined
+    export let pill: boolean | undefined = undefined
 
     $: cls = badgeClassName(variant, small, pill)
 </script>

client/web-sveltekit/src/lib/wildcard/Button.svelte

@@ -7,9 +7,9 @@
     import { type BUTTON_DISPLAY, type BUTTON_SIZES, type BUTTON_VARIANTS, getButtonClassName } from './Button'
 
     interface $$Props extends HTMLButtonAttributes {
-        variant?: typeof BUTTON_VARIANTS[number]
-        size?: typeof BUTTON_SIZES[number]
-        display?: typeof BUTTON_DISPLAY[number]
+        variant?: (typeof BUTTON_VARIANTS)[number]
+        size?: (typeof BUTTON_SIZES)[number]
+        display?: (typeof BUTTON_DISPLAY)[number]
         outline?: boolean
     }
 

client/web-sveltekit/src/lib/wildcard/ButtonGroup.svelte

@@ -3,7 +3,7 @@
 
     import { type BUTTON_GROUP_DIRECTION, styles } from './Button'
 
-    export let direction: typeof BUTTON_GROUP_DIRECTION[number] = 'horizontal'
+    export let direction: (typeof BUTTON_GROUP_DIRECTION)[number] = 'horizontal'
 
     $: className = classNames(styles.btnGroup, direction === 'vertical' && styles.btnGroupVertical)
 </script>

client/web-sveltekit/src/stories/BadgeExample.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-    import Badge, { BADGE_VARIANTS } from "$lib/wildcard/Badge.svelte"
+    import Badge, { BADGE_VARIANTS } from '$lib/wildcard/Badge.svelte'
 </script>
 
 <h2>Default</h2>
 <table>
     <thead>
-        <tr><th>Variant</th><th></th><th>pill=true</th><th>small=true</th><th>pill=true small=true</tr>
+        <tr><th>Variant</th><th></th><th>pill=true</th><th>small=true</th><th>pill=true small=true</th></tr>
     </thead>
     <tbody>
-    {#each BADGE_VARIANTS as variant}
-        <tr>
-            <th>{variant}</th>
-            <td><Badge {variant}>Badge</Badge> </td>
-            <td><Badge {variant} pill>Badge</Badge></td>
-            <td><Badge {variant} small>Badge</Badge></td>
-            <td><Badge {variant} pill small>Badge</Badge></td>
-        </tr>
-    {/each}
+        {#each BADGE_VARIANTS as variant}
+            <tr>
+                <th>{variant}</th>
+                <td><Badge {variant}>Badge</Badge> </td>
+                <td><Badge {variant} pill>Badge</Badge></td>
+                <td><Badge {variant} small>Badge</Badge></td>
+                <td><Badge {variant} pill small>Badge</Badge></td>
+            </tr>
+        {/each}
     </tbody>
 </table>
 
@@ -26,7 +26,8 @@
 </Badge>
 
 <style lang="scss">
-    td, th {
+    td,
+    th {
         padding: 0.5rem;
     }
 </style>

client/web-sveltekit/src/stories/TimestampExample.svelte

@@ -1,32 +1,33 @@
 <script lang="ts">
-    import Timestamp from "$lib/Timestamp.svelte"
-    import {faker} from "@faker-js/faker"
-    import type { ComponentProps } from "svelte"
+    import Timestamp from '$lib/Timestamp.svelte'
+    import { faker } from '@faker-js/faker'
+    import type { ComponentProps } from 'svelte'
 
     const date = faker.date.recent()
     const cases: [string, Partial<ComponentProps<Timestamp>>][] = [
         ['default', {}],
-        ['no ago', {addSuffix: false}],
-        ['strict', {strict: true}],
-        ['utc', {utc: true}],
-        ['absolute', {showAbsolute: true}],
-        ['no ago, strict', {addSuffix: false, strict: true}],
-        ['absolute, utc', {showAbsolute: true, utc: true}],
+        ['no ago', { addSuffix: false }],
+        ['strict', { strict: true }],
+        ['utc', { utc: true }],
+        ['absolute', { showAbsolute: true }],
+        ['no ago, strict', { addSuffix: false, strict: true }],
+        ['absolute, utc', { showAbsolute: true, utc: true }],
     ]
 </script>
 
 <h2>Timestamp props</h2>
 <table>
     {#each cases as [title, props]}
-    <tr>
-        <th>{title}</th>
-        <td><Timestamp {date} {...props} /></td>
-</tr>
+        <tr>
+            <th>{title}</th>
+            <td><Timestamp {date} {...props} /></td>
+        </tr>
     {/each}
 </table>
 
 <style lang="scss">
-    td, th {
+    td,
+    th {
         padding: 0.5rem;
     }
 </style>

client/web-sveltekit/src/stories/TooltipExample.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Tooltip, {type Placement} from "$lib/Tooltip.svelte"
+    import Tooltip, { type Placement } from '$lib/Tooltip.svelte'
 
     const placements: Placement[] = ['auto', 'top', 'left', 'bottom', 'right']
     let count = 0
@@ -23,16 +23,17 @@
 
 <h2>Tooltip placement</h2>
 <table>
-{#each placements as placement }
-    <tr>
-        <th>{placement}</th>
-        <td><Tooltip tooltip="Tooltip" {placement} alwaysVisible><span>Trigger</span></Tooltip></td>
-    </tr>
-{/each}
+    {#each placements as placement}
+        <tr>
+            <th>{placement}</th>
+            <td><Tooltip tooltip="Tooltip" {placement} alwaysVisible><span>Trigger</span></Tooltip></td>
+        </tr>
+    {/each}
 </table>
 
 <style lang="scss">
-    td, th {
+    td,
+    th {
         padding: 2rem;
     }
 </style>