Format all the files

MuckRock · Dec 12, 2023 · a0086c3 · a0086c3
1 parent 0bdb3e1
commit a0086c3
Show file tree

Hide file tree

Showing 183 changed files with 5,039 additions and 5,002 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,13 +1,14 @@
 {
   "bracketSameLine": false,
+  "plugins": ["prettier-plugin-svelte"],
   "printWidth": 80,
   "semi": true,
   "singleQuote": false,
-  "tabWidth": 2,
-  "trailingComma": "all",
-  "useTabs": false,
   "svelteAllowShorthand": true,
   "svelteIndentScriptAndStyle": true,
-  "svelteSortOrder": "options-scripts-styles-markup",
-  "svelteStrictMode": false
+  "svelteSortOrder": "options-scripts-markup-styles",
+  "svelteStrictMode": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,7 +72,8 @@
     "msw-storybook-addon": "^1.10.0",
     "netlify-plugin-playwright-cache": "^0.0.1",
     "playwright": "^1.39.0",
-    "prettier": "^3.0.2",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "serve": "^14.2.0",
@@ -90,6 +91,8 @@
     "dev": "concurrently \"npm:dev-app\" \"npm:dev-embed\"",
     "dev-app": "cross-env NODE_ENV=development SUPPRESS_WARNINGS=1 webpack serve --config webpack.app.config.js",
     "dev-embed": "cross-env NODE_ENV=development webpack --config webpack.embed.config.js",
+    "format": "prettier --write src",
+    "format:check": "prettier --check src",
     "serve": "serve public -l 80 --single",
     "storybook": "storybook dev -p 6006",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",

diff --git a/src/addons/Drawer.svelte b/src/addons/Drawer.svelte
@@ -56,6 +56,33 @@
   }
 </script>
 
+<svelte:window on:keydown={onKeyPress} />
+
+{#if visible}
+  <div
+    transition:slide|global={{ axis: "x" }}
+    class="drawer {anchor}"
+    class:visible
+    tabindex="-1"
+    role="dialog"
+  >
+    <slot name="close-button">
+      <button
+        type="button"
+        class="close"
+        title={$_("drawer.close")}
+        aria-label={$_("drawer.close")}
+        on:click={() => close()}
+      >
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </slot>
+    <div bind:this={dialog} role="document" class="container">
+      <slot name="content" />
+    </div>
+  </div>
+{/if}
+
 <style>
   .drawer {
     background-color: var(--menuBg, white);
@@ -116,30 +143,3 @@
     overflow-y: scroll;
   }
 </style>
-
-<svelte:window on:keydown={onKeyPress} />
-
-{#if visible}
-  <div
-    transition:slide|global={{ axis: "x" }}
-    class="drawer {anchor}"
-    class:visible
-    tabindex="-1"
-    role="dialog"
-  >
-    <slot name="close-button">
-      <button
-        type="button"
-        class="close"
-        title={$_("drawer.close")}
-        aria-label={$_("drawer.close")}
-        on:click={() => close()}
-      >
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </slot>
-    <div bind:this={dialog} role="document" class="container">
-      <slot name="content" />
-    </div>
-  </div>
-{/if}
diff --git a/src/addons/Paginator.svelte b/src/addons/Paginator.svelte
@@ -17,15 +17,6 @@
   }
 </script>
 
-<style>
-  .paginator {
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    width: 100%;
-  }
-</style>
-
 <div class="paginator">
   <Button disabled={!has_previous} on:click={previous}>
     {$_("paginator.previous")}
@@ -35,3 +26,12 @@
     {$_("paginator.next")}
   </Button>
 </div>
+
+<style>
+  .paginator {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+  }
+</style>
diff --git a/src/addons/Popularity.svelte b/src/addons/Popularity.svelte
@@ -5,20 +5,6 @@
   export let useCount: number;
 </script>
 
-<style>
-  .container {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-  }
-  .icon {
-    fill: var(--primary, #4294f0);
-  }
-  .icon svg {
-    display: block;
-  }
-</style>
-
 <div class="container" title={useCount.toString()}>
   <span class="icon">
     <svg width="18px" height="16px" viewBox="0 0 18 16">
@@ -33,3 +19,17 @@
     {nFormatter(useCount, 1)}
   </span>
 </div>
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .icon {
+    fill: var(--primary, #4294f0);
+  }
+  .icon svg {
+    display: block;
+  }
+</style>
diff --git a/src/addons/browser/AddOnList.svelte b/src/addons/browser/AddOnList.svelte
@@ -25,6 +25,31 @@
   $: empty = !(items && items.length > 0);
 </script>
 
+<div class="list" class:empty class:loading class:error>
+  {#if loading}
+    <!-- Loading state -->
+    <Loader active center big pad />
+    <p>{$_("addonBrowserDialog.loading")}</p>
+  {:else if error}
+    <!-- Error state -->
+    <div class="icon"><Error /></div>
+    <p>{error}</p>
+    {#if reload}<Button action on:click={reload}
+        >{$_("addonBrowserDialog.retry")}</Button
+      >{/if}
+  {:else if empty}
+    <!-- Empty state -->
+    <div class="icon"><EmptyResults /></div>
+    <p>{$_("addonBrowserDialog.empty")}</p>
+  {:else}
+    <ul>
+      {#each items as addon (addon.id)}
+        <li><ListItem {addon} /></li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
 <style>
   .list {
     flex: 1 1 auto;
@@ -63,28 +88,3 @@
     list-style-type: none;
   }
 </style>
-
-<div class="list" class:empty class:loading class:error>
-  {#if loading}
-    <!-- Loading state -->
-    <Loader active center big pad />
-    <p>{$_("addonBrowserDialog.loading")}</p>
-  {:else if error}
-    <!-- Error state -->
-    <div class="icon"><Error /></div>
-    <p>{error}</p>
-    {#if reload}<Button action on:click={reload}
-        >{$_("addonBrowserDialog.retry")}</Button
-      >{/if}
-  {:else if empty}
-    <!-- Empty state -->
-    <div class="icon"><EmptyResults /></div>
-    <p>{$_("addonBrowserDialog.empty")}</p>
-  {:else}
-    <ul>
-      {#each items as addon (addon.id)}
-        <li><ListItem {addon} /></li>
-      {/each}
-    </ul>
-  {/if}
-</div>
diff --git a/src/addons/browser/AddOnListItem.svelte b/src/addons/browser/AddOnListItem.svelte
@@ -15,6 +15,48 @@
   $: isPremium = addon?.parameters?.categories?.includes("premium") ?? false;
 </script>
 
+<a class="addon-link" href={url}>
+  <div class="container" id={addon.repository}>
+    <div class="row">
+      <div class="center-self">
+        <AddOnPin {addon} />
+      </div>
+      <div class="stretch">
+        <h3 class="addon-name">{addon.name}</h3>
+      </div>
+      <div class="metadata">
+        {#if author?.name}
+          <p class="author">
+            <a
+              href="http://github.com/{addon.repository}"
+              target="_blank"
+              rel="noopener noreferrer"
+              title={$_("addonBrowserDialog.viewsource")}>{author.name}</a
+            >
+          </p>
+        {/if}
+        {#if addon.usage}
+          <AddOnPopularity useCount={addon.usage} />
+        {/if}
+        {#if isPremium}
+          <span class="badge"
+            ><Badge
+              label="Premium"
+              badgeColor="var(--premium)"
+              labelColor="var(--darkgray)"
+            >
+              <Credit badge slot="icon" color="var(--darkgray)" />
+            </Badge></span
+          >
+        {/if}
+      </div>
+    </div>
+    {#if description}
+      <div class="description">{@html description}</div>
+    {/if}
+  </div>
+</a>
+
 <style>
   .addon-link:hover .container {
     background-color: var(--menuBg);
@@ -81,45 +123,3 @@
     margin: 0;
   }
 </style>
-
-<a class="addon-link" href={url}>
-  <div class="container" id={addon.repository}>
-    <div class="row">
-      <div class="center-self">
-        <AddOnPin {addon} />
-      </div>
-      <div class="stretch">
-        <h3 class="addon-name">{addon.name}</h3>
-      </div>
-      <div class="metadata">
-        {#if author?.name}
-          <p class="author">
-            <a
-              href="http://github.com/{addon.repository}"
-              target="_blank"
-              rel="noopener noreferrer"
-              title={$_("addonBrowserDialog.viewsource")}>{author.name}</a
-            >
-          </p>
-        {/if}
-        {#if addon.usage}
-          <AddOnPopularity useCount={addon.usage} />
-        {/if}
-        {#if isPremium}
-          <span class="badge"
-            ><Badge
-              label="Premium"
-              badgeColor="var(--premium)"
-              labelColor="var(--darkgray)"
-            >
-              <Credit badge slot="icon" color="var(--darkgray)" />
-            </Badge></span
-          >
-        {/if}
-      </div>
-    </div>
-    {#if description}
-      <div class="description">{@html description}</div>
-    {/if}
-  </div>
-</a>