svelte-bricks 0.1.6 → 0.1.7

package/Masonry.svelte

@@ -12,7 +12,7 @@
   }
 </style>
 
-<script >import { flip } from 'svelte/animate';
+<script>import { flip } from 'svelte/animate';
 import { fade } from 'svelte/transition';
 export let items;
 export let minColWidth = 330;
@@ -25,21 +25,23 @@ export let style = ``;
 export let duration = 200;
 export { className as class };
 export let columnClass = ``;
+// On non-primitive types, we need a property to tell masonry items apart. This component
+// hard-codes the name of this property to 'id'. See https://svelte.dev/tutorial/keyed-each-blocks.
+export let idKey = `id`;
+export let getId = (item) => {
+    if (typeof item === `string`)
+        return item;
+    if (typeof item === `number`)
+        return item;
+    return item[idKey];
+};
 let className = ``;
 $: nCols = Math.min(items.length, Math.floor(masonryWidth / (minColWidth + gap)) || 1);
 $: itemsToCols = items.reduce((cols, item, idx) => {
     cols[idx % cols.length].push([item, idx]);
     return cols;
-}, Array(nCols)
-    .fill(null)
-    .map(() => []));
-function getId(item) {
-    if (typeof item === `string`)
-        return item;
-    if (typeof item === `number`)
-        return item;
-    return item.id;
-}
+}, Array(nCols).fill(null).map(() => []) // prettier-ignore
+);
 </script>
 <div
   class="masonry {className}"
@@ -50,7 +52,7 @@ function getId(item) {
   {#each itemsToCols as col}
     <div class="col {columnClass}" style="gap: {gap}px; max-width: {maxColWidth}px;">
       {#if animate}
-        {#each col as [item, idx] (getId(item) || idx)}
+        {#each col as [item, idx] (getId(item))}
           <div
             in:fade|local={{ delay: 100, duration }}
             out:fade|local={{ delay: 0, duration }}
@@ -60,7 +62,7 @@ function getId(item) {
           </div>
         {/each}
       {:else}
-        {#each col as [item, idx] (getId(item) || idx)}
+        {#each col as [item, idx] (getId(item))}
           <slot {idx} {item} />
         {/each}
       {/if}

package/Masonry.svelte.d.ts

@@ -1,9 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        items: (string | number | {
-            id: string | number;
-        })[];
+declare class __sveltets_Render<Item> {
+    props(): {
+        items: Item[];
         minColWidth?: number | undefined;
         maxColWidth?: number | undefined;
         gap?: number | undefined;
@@ -14,22 +12,22 @@ declare const __propDef: {
         duration?: number | undefined;
         class?: string | undefined;
         columnClass?: string | undefined;
+        idKey?: string | undefined;
+        getId?: ((item: Item) => unknown) | undefined;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
+    slots(): {
         default: {
             idx: number;
-            item: string | number | {
-                id: string | number;
-            };
+            item: Item;
         };
     };
-};
-export declare type MasonryProps = typeof __propDef.props;
-export declare type MasonryEvents = typeof __propDef.events;
-export declare type MasonrySlots = typeof __propDef.slots;
-export default class Masonry extends SvelteComponentTyped<MasonryProps, MasonryEvents, MasonrySlots> {
+}
+export declare type MasonryProps<Item> = ReturnType<__sveltets_Render<Item>['props']>;
+export declare type MasonryEvents<Item> = ReturnType<__sveltets_Render<Item>['events']>;
+export declare type MasonrySlots<Item> = ReturnType<__sveltets_Render<Item>['slots']>;
+export default class Masonry<Item> extends SvelteComponentTyped<MasonryProps<Item>, MasonryEvents<Item>, MasonrySlots<Item>> {
 }
 export {};

package/package.json

@@ -5,29 +5,29 @@
   "homepage": "https://svelte-bricks.netlify.app",
   "repository": "https://github.com/janosh/svelte-bricks",
   "license": "MIT",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "svelte": "Masonry.svelte",
   "bugs": "https://github.com/janosh/svelte-bricks/issues",
   "devDependencies": {
     "@sveltejs/adapter-static": "^1.0.0-next.29",
-    "@sveltejs/kit": "^1.0.0-next.310",
-    "@typescript-eslint/eslint-plugin": "^5.18.0",
-    "@typescript-eslint/parser": "^5.18.0",
-    "eslint": "^8.13.0",
-    "eslint-plugin-svelte3": "^3.4.1",
+    "@sveltejs/kit": "^1.0.0-next.326",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
+    "eslint": "^8.15.0",
+    "eslint-plugin-svelte3": "^4.0.0",
     "jsdom": "^19.0.0",
     "mdsvex": "^0.10.5",
     "prettier": "^2.6.2",
     "prettier-plugin-svelte": "^2.7.0",
-    "svelte": "^3.47.0",
-    "svelte-check": "^2.6.0",
+    "svelte": "^3.48.0",
+    "svelte-check": "^2.7.0",
     "svelte-github-corner": "^0.1.0",
-    "svelte-preprocess": "^4.10.5",
-    "svelte2tsx": "^0.5.8",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.1",
-    "vitest": "^0.9.3"
+    "svelte-preprocess": "^4.10.6",
+    "svelte2tsx": "^0.5.9",
+    "typescript": "^4.6.4",
+    "vite": "^2.9.8",
+    "vitest": "^0.12.3"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -57,7 +57,7 @@ h)
 </Masonry>
 ```
 
-**Note**: On non-primitive types, i.e. if `items` is an array of objects, this component requires that each object have a key named `'id'` that contains a unique primitive value. This value is used to identify each item in the keyed `{#each}` block that renders the masonry layout. Without this, Svelte could not avoid duplicates when new items are added nor maintain order when existing ones are rearranged. Read the [Svelte docs](https://svelte.dev/tutorial/keyed-each-blocks) for details.
+**Note**: On non-primitive items, i.e. if `items` is an array of objects, this component by default tries to access a key named `'id'` on each item. This value is used to tell items apart in the keyed `{#each}` block that renders the masonry layout. Without it, Svelte could not avoid duplicates when new items are added or existing ones rearranged. Read the [Svelte docs](https://svelte.dev/tutorial/keyed-each-blocks) for details. To change the name of the identifier key, use the `idKey` prop. You can also pass in a custom function as `getId` that should map items to unique IDs.
 
 **Hint**: Balanced columns can be achieved even with this simple implementation if masonry items are allowed to stretch to the column height.
 
@@ -67,12 +67,14 @@ h)
 
 Additional optional props are:
 
-- `items: any[]`: required
+- `items: (string | number | object)[]`: required
 - `minColWidth: number = 330` (in `px`)
 - `maxColWidth: number = 500` (in `px`)
 - `gap: number = 20` (in `px`)
 - `masonryWidth: number = 0`: Bound to the masonry `div`s width (in `px`).
 - `masonryHeight: number = 0`: Bound to the masonry `div`s height (in `px`).
+- `idKey: string = 'id'`: Name of the attribute to use as identifier if items are objects.
+- `getId: (item) => string | number`: Custom function that maps masonry items to unique IDs.
 - `animate: boolean = true`: Whether to [FLIP-animate](https://svelte.dev/tutorial/animate) masonry items when viewport resizing or other events cause `items` to rearrange.
 - `style: string = ''`: Inline styles that will be applied to the top-level `div.masonry`.
 - `duration: number = 200`: Transition duration in milli seconds when masonry items are rearranged or added/removed. Set to 0 to disable transitions.