Warn if maxColWidth < minColWidth (#33)

* warn if maxColWidth < minColWidth

* test warning for maxColWidth < minColWidth

* update deps

.pre-commit-config.yaml

@@ -7,7 +7,7 @@ default_install_hook_types: [pre-commit, commit-msg]
 
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.4.0
+    rev: v4.5.0
     hooks:
       - id: check-case-conflict
       - id: check-symlinks
@@ -18,7 +18,7 @@ repos:
       - id: trailing-whitespace
 
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.0.3
+    rev: v4.0.0-alpha.8
     hooks:
       - id: prettier
         args: [--write] # edit files in-place
@@ -28,13 +28,14 @@ repos:
           - svelte
 
   - repo: https://github.com/codespell-project/codespell
-    rev: v2.2.5
+    rev: v2.2.6
     hooks:
       - id: codespell
         stages: [commit, commit-msg]
+        args: [--check-filenames]
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.49.0
+    rev: v8.56.0
     hooks:
       - id: eslint
         types: [file]

package.json

@@ -20,28 +20,28 @@
     "changelog": "npx auto-changelog --package --output changelog.md --hide-credit --commit-limit false"
   },
   "dependencies": {
-    "svelte": "^4.2.2"
+    "svelte": "^4.2.8"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.27.1",
-    "@sveltejs/package": "^2.2.2",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
-    "eslint": "^8.52.0",
-    "eslint-plugin-svelte": "^2.34.0",
-    "jsdom": "^22.1.0",
+    "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/kit": "^2.0.6",
+    "@sveltejs/package": "^2.2.5",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-svelte": "^2.35.1",
+    "jsdom": "^23.0.1",
     "mdsvex": "^0.11.0",
-    "prettier": "^3.0.3",
-    "prettier-plugin-svelte": "^3.0.3",
-    "svelte-check": "^3.5.2",
-    "svelte-preprocess": "^5.0.4",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.1.2",
+    "svelte-check": "^3.6.2",
+    "svelte-preprocess": "^5.1.3",
     "svelte-toc": "^0.5.6",
     "svelte-zoo": "^0.4.9",
-    "svelte2tsx": "^0.6.23",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vitest": "^0.34.6"
+    "svelte2tsx": "^0.6.27",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vitest": "^1.1.0"
   },
   "keywords": [
     "svelte",

src/lib/Masonry.svelte

@@ -6,11 +6,11 @@
   export let calcCols = (
     masonryWidth: number,
     minColWidth: number,
-    gap: number
+    gap: number,
   ): number => {
     return Math.min(
       items.length,
-      Math.floor((masonryWidth + gap) / (minColWidth + gap)) || 1
+      Math.floor((masonryWidth + gap) / (minColWidth + gap)) || 1,
     )
   }
   export { className as class }
@@ -32,6 +32,12 @@
   export let minColWidth: number = 330
   export let style: string = ``
 
+  $: if (maxColWidth < minColWidth) {
+    console.warn(
+      `svelte-bricks: maxColWidth (${maxColWidth}) < minColWidth (${minColWidth}).`
+    )
+  }
+
   type Item = $$Generic
   let className = ``
 
@@ -41,7 +47,7 @@
       cols[idx % cols.length].push([item, idx])
       return cols
     },
-    Array(nCols).fill(null).map(() => []) // prettier-ignore
+    Array(nCols).fill(null).map(() => []), // prettier-ignore
   )
 </script>
 

tests/masonry.test.ts

@@ -1,6 +1,6 @@
 import Masonry from '$lib'
 import { tick } from 'svelte'
-import { beforeEach, describe, expect, test } from 'vitest'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
 
 const n_items = 30
 const indices = [...Array(n_items).keys()]
@@ -79,4 +79,20 @@ describe(`Masonry`, () => {
 
     expect(masonry.calcCols(masonryWidth, minColWidth, gap)).toBe(expected_cols)
   })
+
+  test(`warns if maxColWidth is less than minColWidth`, () => {
+    const minColWidth = 50
+    const maxColWidth = 40
+    console.warn = vi.fn()
+
+    new Masonry({
+      target: document.body,
+      props: { items: indices, minColWidth, maxColWidth },
+    })
+
+    expect(console.warn).toHaveBeenCalledWith(
+      `svelte-bricks: maxColWidth (${maxColWidth}) < minColWidth (${minColWidth}).`,
+    )
+    expect(console.warn).toHaveBeenCalledTimes(1)
+  })
 })

tsconfig.json

@@ -6,10 +6,6 @@
     "target": "esnext",
     "moduleResolution": "bundler",
 
-    // Svelte Preprocess cannot figure out whether you have a value or a type, so tell TypeScript
-    // to enforce using `import type` instead of `import` for Types.
-    "importsNotUsedAsValues": "error",
-
     // To have warnings/errors of the Svelte compiler at the correct position,
     // enable source maps by default.
     "sourceMap": true,