svelte-bricks 0.1.7 → 0.2.0

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

@@ -14,27 +14,27 @@
 
 <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 idKey = `id`;
 export let getId = (item) => {
-    if (typeof item === `string`)
-        return 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) => {
@@ -58,12 +58,16 @@ $: itemsToCols = items.reduce((cols, item, idx) => {
             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))}
-          <slot {idx} {item} />
+          <slot {idx} {item}>
+            <span>{item}</span>
+          </slot>
         {/each}
       {/if}
     </div>

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

@@ -1,19 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
 declare class __sveltets_Render<Item> {
     props(): {
-        items: Item[];
-        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;
+        duration?: number | undefined;
+        gap?: number | undefined;
+        getId?: ((item: Item) => string | number) | undefined;
         idKey?: string | undefined;
-        getId?: ((item: Item) => unknown) | undefined;
+        items: Item[];
+        masonryHeight?: number | undefined;
+        masonryWidth?: number | undefined;
+        maxColWidth?: number | undefined;
+        minColWidth?: number | undefined;
+        style?: string | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
@@ -25,9 +25,9 @@ declare class __sveltets_Render<Item> {
         };
     };
 }
-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 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.7",
+  "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.326",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
-    "eslint": "^8.15.0",
+    "@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": "^19.0.0",
-    "mdsvex": "^0.10.5",
-    "prettier": "^2.6.2",
-    "prettier-plugin-svelte": "^2.7.0",
-    "svelte": "^3.48.0",
-    "svelte-check": "^2.7.0",
-    "svelte-github-corner": "^0.1.0",
-    "svelte-preprocess": "^4.10.6",
-    "svelte2tsx": "^0.5.9",
-    "typescript": "^4.6.4",
-    "vite": "^2.9.8",
-    "vitest": "^0.12.3"
+    "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 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.
+**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,19 +66,87 @@ h)
 
 Additional optional props are:
 
-- `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.
-- `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/index.d.ts

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

package/index.js

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