Fixed misleading binding in usage example snippet (#24)

* updated readme.md usage snippet to correctly implement usage of Masonry component

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* pre-commit autoupdate

* migrate .eslintrc.yml to new eslint-plugin-svelte

* fix svelte/valid-compile a11y-no-static-element-interactions

* remove |local transition modifiers (now default in svelte 4)

* update deps

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Janosh Riebesell <janosh.riebesell@gmail.com>

.eslintrc.yml

@@ -1,28 +1,27 @@
-root: true
 env:
   browser: true
-  es2020: true
   node: true
-parser: '@typescript-eslint/parser'
-parserOptions:
-  sourceType: module
-  ecmaVersion: latest
-plugins: [svelte3, '@typescript-eslint']
 extends:
+  - plugin:svelte/recommended
   - eslint:recommended
   - plugin:@typescript-eslint/recommended
 overrides:
   - files: ['*.svelte']
-    processor: svelte3/svelte3
-settings:
-  svelte3/typescript: true
+    parser: svelte-eslint-parser
+    parserOptions:
+      parser: '@typescript-eslint/parser'
 rules:
   indent: [error, 2, SwitchCase: 1]
   '@typescript-eslint/quotes': [error, backtick, avoidEscape: true]
   semi: [error, never]
   linebreak-style: [error, unix]
   no-console: [error, allow: [warn, error]]
   no-var: error
-  # allow triple slash for typescript file referencing https://git.io/JCeqO
-  spaced-comment: [error, always, { markers: [/] }]
   '@typescript-eslint/no-inferrable-types': off
+  '@typescript-eslint/no-unused-vars':
+    [error, { argsIgnorePattern: ^_, varsIgnorePattern: ^_ }]
+  svelte/no-at-html-tags: off
+  no-inner-declarations: off
+ignorePatterns: [build/, dist/]
+globals:
+  $$Generic: readonly

.pre-commit-config.yaml

@@ -18,7 +18,7 @@ repos:
       - id: trailing-whitespace
 
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.0.0-alpha.4
+    rev: v3.0.2
     hooks:
       - id: prettier
         args: [--write] # edit files in-place
@@ -28,21 +28,23 @@ repos:
           - svelte
 
   - repo: https://github.com/codespell-project/codespell
-    rev: v2.2.2
+    rev: v2.2.5
     hooks:
       - id: codespell
         stages: [commit, commit-msg]
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.31.0
+    rev: v8.47.0
     hooks:
       - id: eslint
         types: [file]
-        files: \.(svelte|js|ts)$
+        args: [--fix]
+        files: \.(js|ts|svelte)$
         additional_dependencies:
           - eslint
           - svelte
           - typescript
-          - eslint-plugin-svelte3
+          - eslint-plugin-svelte
           - '@typescript-eslint/eslint-plugin'
           - '@typescript-eslint/parser'
+          - svelte-eslint-parser

package.json

@@ -20,28 +20,28 @@
     "changelog": "npx auto-changelog --package --output changelog.md --hide-credit --commit-limit false"
   },
   "dependencies": {
-    "svelte": "^3.57.0"
+    "svelte": "^4.2.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^2.0.1",
-    "@sveltejs/kit": "^1.13.0",
-    "@sveltejs/package": "^2.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
-    "eslint": "^8.36.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "jsdom": "^21.1.1",
-    "mdsvex": "^0.10.6",
-    "prettier": "^2.8.6",
-    "prettier-plugin-svelte": "^2.10.0",
-    "svelte-check": "^3.1.4",
-    "svelte-preprocess": "^5.0.3",
-    "svelte-toc": "^0.5.4",
-    "svelte-zoo": "^0.4.3",
-    "svelte2tsx": "^0.6.10",
-    "typescript": "^5.0.2",
-    "vite": "^4.2.1",
-    "vitest": "^0.29.7"
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.23.0",
+    "@sveltejs/package": "^2.2.1",
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
+    "eslint": "^8.47.0",
+    "eslint-plugin-svelte": "^2.33.0",
+    "jsdom": "^22.1.0",
+    "mdsvex": "^0.11.0",
+    "prettier": "^3.0.2",
+    "prettier-plugin-svelte": "^3.0.3",
+    "svelte-check": "^3.5.0",
+    "svelte-preprocess": "^5.0.4",
+    "svelte-toc": "^0.5.5",
+    "svelte-zoo": "^0.4.9",
+    "svelte2tsx": "^0.6.20",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.2"
   },
   "keywords": [
     "svelte",

readme.md

@@ -49,8 +49,8 @@ h)
   {maxColWidth}
   {gap}
   let:item
-  bind:width
-  bind:height
+  bind:masonryWidth={width}
+  bind:masonryHeight={height}
 >
   <Some {item} />
 </Masonry>

src/app.css

@@ -27,6 +27,7 @@ pre code {
   background-color: transparent;
 }
 pre {
+  position: relative;
   border-radius: 1ex;
   font-size: 0.75em;
 }

src/app.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>Svelte Bricks</title>

src/lib/Masonry.svelte

@@ -46,8 +46,8 @@
       {#if animate}
         {#each col as [item, idx] (getId(item))}
           <div
-            in:fade|local={{ delay: 100, duration }}
-            out:fade|local={{ delay: 0, duration }}
+            in:fade={{ delay: 100, duration }}
+            out:fade={{ delay: 0, duration }}
             animate:flip={{ duration }}
           >
             <slot {idx} {item}>

src/site/Box.svelte

@@ -22,6 +22,8 @@
   on:keyup={flip}
   class:flipped
   class:slide-flip={slide_flip}
+  role="grid"
+  tabindex="0"
 >
   <!-- background: {bg} must be applied to the p tags, not the div as backface-visibility: hidden would hide text on backface -->
   <p style="background: {bg};">

tests/masonry.test.ts

@@ -21,7 +21,7 @@ describe(`Masonry`, () => {
       const items = document.querySelectorAll(`div.masonry > div.col > *`)
 
       expect(items.length).toBe(n_items)
-    }
+    },
   )
 
   test(`attaches class props correctly`, async () => {
@@ -31,7 +31,7 @@ describe(`Masonry`, () => {
     })
 
     const items = document.querySelectorAll(
-      `div.masonry.foo > div.col.bar > div`
+      `div.masonry.foo > div.col.bar > div`,
     )
 
     expect(items.length).toBe(n_items)
@@ -61,7 +61,7 @@ describe(`Masonry`, () => {
     const outer_masonry_div = document.querySelector(`div.masonry > div.col`)
 
     expect(outer_masonry_div?.getAttribute(`style`)).toContain(
-      `gap: ${gap}px; max-width: ${maxColWidth}px;`
+      `gap: ${gap}px; max-width: ${maxColWidth}px;`,
     )
   })
 })