Merge pull request #376 from MuckRock/281-svelte-ordering

Standard Svelte ordering
MuckRock · Dec 12, 2023 · 5418057 · 5418057
2 parents dd3ec70 + 8754545
commit 5418057
Show file tree

Hide file tree

Showing 189 changed files with 5,039 additions and 5,076 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/Makefile b/Makefile
@@ -46,30 +46,6 @@ prettier-check:
 prettier:
 	prettier --write --plugin-search-dir=. src
 
-browser-test:
-	docker compose -f local.builder.yml run --rm browser-test
-
-browser-test-staging:
-	docker compose -f local.builder.yml run --rm browser-test-staging
-
-browser-test-direct:
-	node tests/functional/suites/noindex.js
-
-browser-test-direct-all:
-	BROWSER=firefox node tests/functional/suites/noindex.js
-	#BROWSER=chromium node tests/functional/suites/noindex.js
-	BROWSER=webkit node tests/functional/suites/noindex.js
-
-# Set BROWSER to change the browser. e.g. BROWSER=chromium make browser-test-headful
-browser-test-headful:
-	DEBUG=yes node tests/functional/suites/noindex.js
-
-browser-test-headful-staging:
-	DEBUG=yes node tests/functional/suites/noindex.js --envfile .env.staging
-
-browser-test-debug:
-	DEBUG=yes node debug tests/functional/suites/noindex.js
-
 clean:
 	# delete Webpack chunks
 	rm -f public/index.html public/[0-9]*.*.* public/bundle.*.js public/bundle.*.css public/bundle.*.txt public/*.map public/*.*.js

diff --git a/browser-test-all.sh b/browser-test-all.sh
diff --git a/browser-test-package.json b/browser-test-package.json
diff --git a/browser-test.Dockerfile b/browser-test.Dockerfile
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/plugins/test/index.js b/plugins/test/index.js
diff --git a/plugins/test/manifest.yml b/plugins/test/manifest.yml
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>