svelte-bricks 0.1.6 → 0.2.0

package/{Masonry.svelte → dist/Masonry.svelte}

@@ -12,34 +12,36 @@
   }
 </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;
-export let maxColWidth = 500;
-export let gap = 20;
-export let masonryWidth = 0;
-export let masonryHeight = 0;
 export let animate = true;
-export let style = ``;
-export let duration = 200;
 export { className as class };
 export let columnClass = ``;
+export let duration = 200;
+export let gap = 20;
+// 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 getId = (item) => {
+    if (typeof item === `number`)
+        return item;
+    if (typeof item === `string`)
+        return item;
+    return item[idKey];
+};
+export let idKey = `id`;
+export let items;
+export let masonryHeight = 0;
+export let masonryWidth = 0;
+export let maxColWidth = 500;
+export let minColWidth = 330;
+export let style = ``;
 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,18 +52,22 @@ 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 }}
             animate:flip={{ duration }}
           >
-            <slot {idx} {item} />
+            <slot {idx} {item}>
+              <span>{item}</span>
+            </slot>
           </div>
         {/each}
       {:else}
-        {#each col as [item, idx] (getId(item) || idx)}
-          <slot {idx} {item} />
+        {#each col as [item, idx] (getId(item))}
+          <slot {idx} {item}>
+            <span>{item}</span>
+          </slot>
         {/each}
       {/if}
     </div>

package/dist/Masonry.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+declare class __sveltets_Render<Item> {
+    props(): {
+        animate?: boolean | undefined;
+        class?: string | undefined;
+        columnClass?: string | undefined;
+        duration?: number | undefined;
+        gap?: number | undefined;
+        getId?: ((item: Item) => string | number) | undefined;
+        idKey?: string | undefined;
+        items: Item[];
+        masonryHeight?: number | undefined;
+        masonryWidth?: number | undefined;
+        maxColWidth?: number | undefined;
+        minColWidth?: number | undefined;
+        style?: string | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            idx: number;
+            item: Item;
+        };
+    };
+}
+export type MasonryProps<Item> = ReturnType<__sveltets_Render<Item>['props']>;
+export type MasonryEvents<Item> = ReturnType<__sveltets_Render<Item>['events']>;
+export type MasonrySlots<Item> = ReturnType<__sveltets_Render<Item>['slots']>;
+export default class Masonry<Item> extends SvelteComponentTyped<MasonryProps<Item>, MasonryEvents<Item>, MasonrySlots<Item>> {
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default, default as Masonry } from './Masonry.svelte';

package/dist/index.js

@@ -0,0 +1 @@
+export { default, default as Masonry } from './Masonry.svelte';

package/package.json

@@ -2,32 +2,46 @@
   "name": "svelte-bricks",
   "description": "Simple masonry implementation without column balancing",
   "author": "Janosh Riebesell <janosh.riebesell@gmail.com>",
-  "homepage": "https://svelte-bricks.netlify.app",
+  "homepage": "https://janosh.github.io/svelte-bricks",
   "repository": "https://github.com/janosh/svelte-bricks",
   "license": "MIT",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "type": "module",
-  "svelte": "Masonry.svelte",
+  "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-bricks/issues",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "package": "svelte-package",
+    "serve": "vite build && vite preview",
+    "check": "svelte-check --ignore dist",
+    "test": "vitest test",
+    "changelog": "npx auto-changelog --package --output changelog.md --hide-credit --commit-limit false"
+  },
+  "dependencies": {
+    "svelte": "^3.57.0"
+  },
   "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",
-    "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-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"
+    "@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"
   },
   "keywords": [
     "svelte",
@@ -39,8 +53,18 @@
     "access": "public"
   },
   "exports": {
-    "./package.json": "./package.json",
-    "./Masonry.svelte": "./Masonry.svelte",
-    ".": "./index.js"
-  }
-}
+    "./Masonry.svelte": {
+      "types": "./dist/Masonry.svelte.d.ts",
+      "svelte": "./dist/Masonry.svelte",
+      "default": "./dist/Masonry.svelte"
+    },
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ]
+}

package/readme.md

@@ -1,7 +1,7 @@
 <div class="hide-in-docs">
 
 <h1 align="center">
-  <img src="https://raw.githubusercontent.com/janosh/svelte-bricks/main/static/favicon.svg" alt="Svelte Bricks" height=60>
+  <img src="https://raw.githubusercontent.com/janosh/svelte-bricks/main/static/favicon.svg" alt="Logo" height=60>
   <br>&ensp;Svelte Bricks
 </h1>
 
@@ -9,21 +9,20 @@
 
 [![Tests](https://github.com/janosh/svelte-bricks/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/svelte-bricks/actions/workflows/test.yml)
 [![NPM version](https://img.shields.io/npm/v/svelte-bricks?color=blue&logo=NPM)](https://npmjs.com/package/svelte-bricks)
-[![Netlify Status](https://api.netlify.com/api/v1/badges/c3213069-e3cc-45ef-a446-b2358b9a35fb/deploy-status)](https://app.netlify.com/sites/svelte-bricks/deploys)
+[![GitHub Pages](https://github.com/janosh/svelte-bricks/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/janosh/svelte-bricks/actions/workflows/gh-pages.yml)
 [![pre-commit.ci status](https://results.pre-commit.ci/badge/github/janosh/svelte-bricks/main.svg)](https://results.pre-commit.ci/latest/github/janosh/svelte-bricks/main)
+[![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=stackblitz)](https://stackblitz.com/github/janosh/svelte-bricks)
 
 </h4>
 
-Naive implementation in Svelte without column balancing.
-
-**[Live demo](https://svelte-bricks.netlify.app)**
+Naive implementation in Svelte without column balancing. **[Live demo](https://janosh.github.io/svelte-bricks)**
 
 </div>
 
 ## Installation
 
 ```sh
-yarn add -D svelte-bricks
+npm install --dev svelte-bricks
 ```
 
 ## Usage
@@ -57,7 +56,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**: If `items` is an array of objects, this component tries to access an `id` property on each item. This value is used to tell items apart in the keyed `{#each}` block that creates 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, pass `idKey="some-uniq-key`. Or pass a function `getId = (item: Item) => string | number` that maps 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,17 +66,87 @@ h)
 
 Additional optional props are:
 
-- `items: any[]`: 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`).
-- `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.
-- `class: string = ''`: Applies to the outer `div` wrapping all masonry columns. For use with CSS frameworks like Tailwind.
-- `columnClass: string = ''`: Applies to each column `div`.
+1. ```ts
+   animate: boolean = true
+   ```
+
+   Whether to [FLIP-animate](https://svelte.dev/tutorial/animate) masonry items when viewport resizing or other events cause `items` to rearrange.
+
+1. ```ts
+   class: string = ``
+   ```
+
+   Applies to the outer `div` wrapping all masonry columns. For use with CSS frameworks like Tailwind.
+
+1. ```ts
+   columnClass: string = ``
+   ```
+
+   Applies to each column `div`.
+
+1. ```ts
+   duration: number = 200
+   ```
+
+   Transition duration in milli seconds when masonry items are rearranged or added/removed. Set to 0 to disable transitions.
+
+1. ```ts
+   gap: number = 20
+   ```
+
+   Gap between columns and items within each column in `px`.
+
+1. ```ts
+   getId = (item: Item): string | number => {
+     if (typeof item === `number`) return item
+     if (typeof item === `string`) return item
+     return item[idKey]
+   }
+   ```
+
+   Custom function that maps masonry items to unique IDs of type `string` or `number`.
+
+1. ```ts
+   idKey: string = `id`
+   ```
+
+   Name of the attribute to use as identifier if items are objects.
+
+1. ```ts
+   items: Item[]
+   ```
+
+   The only required prop are the list of items to render where `Item = $$Generic` is a generic type which usually will be `object` but can also be simple types `string` or `number`.
+
+1. ```ts
+   masonryHeight: number = 0
+   ```
+
+   The masonry `div`s height in `px`.
+
+1. ```ts
+   masonryWidth: number = 0
+   ```
+
+   The masonry `div`s width in `px`.
+
+1. ```ts
+   maxColWidth: number = 500
+   ```
+
+   Maximum column width in `px`.
+
+1. ```ts
+   minColWidth: number = 330
+   ```
+
+   Minimum column width in `px`.
+
+1. ```ts
+   style: string = ``
+   ```
+
+   Inline styles that will be applied to the top-level `div.masonry`.
 
 ## Styling
 

package/Masonry.svelte.d.ts

@@ -1,35 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        items: (string | number | {
-            id: string | number;
-        })[];
-        minColWidth?: number | undefined;
-        maxColWidth?: number | undefined;
-        gap?: number | undefined;
-        masonryWidth?: number | undefined;
-        masonryHeight?: number | undefined;
-        animate?: boolean | undefined;
-        style?: string | undefined;
-        duration?: number | undefined;
-        class?: string | undefined;
-        columnClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            idx: number;
-            item: string | number | {
-                id: string | number;
-            };
-        };
-    };
-};
-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 {};

package/index.d.ts

@@ -1 +0,0 @@
-export { default } from './Masonry.svelte';

package/index.js

@@ -1 +0,0 @@
-export { default } from './Masonry.svelte';