Upgrade to prettier 3

BrianMitchL · Apr 18, 2024 · 1246a6e · 1246a6e
1 parent d5243f0
commit 1246a6e
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 162 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,4 @@
 {
   "plugins": ["prettier-plugin-svelte"],
-  "pluginSearchDirs": ["."],
   "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,8 +24,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test:unit": "vitest",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write .",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
     "prettier-staged": "pretty-quick --staged"
   },
   "exports": {
@@ -61,9 +61,9 @@
     "eslint-plugin-svelte": "^2.37.0",
     "eslint-plugin-testing-library": "^5.11.1",
     "jsdom": "^24.0.0",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.1",
-    "pretty-quick": "^3.3.1",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.3",
+    "pretty-quick": "^4.0.0",
     "publint": "^0.1.16",
     "simple-git-hooks": "^2.11.1",
     "svelte": "^4.2.15",

diff --git a/src/app.css b/src/app.css
@@ -2,9 +2,19 @@
   /* use the browser default styles for most things, including colors */
   color-scheme: light dark;
 
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
   --background-color: #ffffff;

diff --git a/src/app.html b/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/src/lib/CompareImage.svelte b/src/lib/CompareImage.svelte
@@ -168,8 +168,10 @@
     border: var(--handle-border-width, 0.125rem) solid
       var(--slider-color, #ffffff);
     border-radius: 100%;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    box-shadow:
+      0 3px 1px -2px rgba(0, 0, 0, 0.2),
+      0 2px 2px 0 rgba(0, 0, 0, 0.14),
+      0 1px 5px 0 rgba(0, 0, 0, 0.12);
     color: var(--slider-color, #ffffff);
     width: var(--handle-size, 2.5rem);
     height: var(--handle-size, 2.5rem);
@@ -191,8 +193,10 @@
     border: var(--handle-border-width, 0.125rem) solid
       var(--slider-color, #ffffff);
     border-radius: 100%;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    box-shadow:
+      0 3px 1px -2px rgba(0, 0, 0, 0.2),
+      0 2px 2px 0 rgba(0, 0, 0, 0.14),
+      0 1px 5px 0 rgba(0, 0, 0, 0.12);
     color: var(--slider-color, #ffffff);
     width: var(--handle-size, 2.5rem);
     height: var(--handle-size, 2.5rem);

diff --git a/src/tests/CompareImage.spec.ts b/src/tests/CompareImage.spec.ts
@@ -17,7 +17,7 @@ const yellow6x10 =
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function renderHelper(
   component: ComponentType = CompareImage,
-  props?: Record<string, unknown>
+  props?: Record<string, unknown>,
 ) {
   const view = render(component, {
     imageLeftSrc: orange,
@@ -111,7 +111,7 @@ describe("CompareImage", () => {
 
     expect(screen.getByRole("slider")).toHaveValue("50");
     expect(screen.getByTestId("svelte-compare-image")).toHaveStyle(
-      "--slider-position: 50%"
+      "--slider-position: 50%",
     );
 
     await fireEvent.change(screen.getByRole("slider"), {
@@ -125,15 +125,15 @@ describe("CompareImage", () => {
     });
 
     expect(screen.getByTestId("svelte-compare-image")).toHaveStyle(
-      "--slider-position: 20%"
+      "--slider-position: 20%",
     );
   });
 
   it("has an accessible label for the slider", async () => {
     renderHelper();
 
     expect(screen.getByRole("slider")).toHaveAccessibleName(
-      "Set the visibility of one image over the other. 0 is full visibility of the second image and 100 is full visibility of the first image. Any amount in-between is a left/right cutoff at the percentage of the slider."
+      "Set the visibility of one image over the other. 0 is full visibility of the second image and 100 is full visibility of the first image. Any amount in-between is a left/right cutoff at the percentage of the slider.",
     );
   });