svelte-bricks - npm Package Compare versions

Comparing version 0.1.7 to 0.2.0

package.json

@@ -5,28 +5,42 @@ {
   "author": "Janosh Riebesell <[e-mail]>",
-  "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"
   },
@@ -43,6 +57,16 @@ "keywords": [
   "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"
+  ]
+}

readme.md

 <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
@@ -12,11 +12,10 @@ </h1>
 [![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.
+Naive implementation in Svelte without column balancing. **[Live demo](https://janosh.github.io/svelte-bricks)**
 
-**[Live demo](https://svelte-bricks.netlify.app)**
-
 </div>
@@ -27,3 +26,3 @@
 ```sh
-yarn add -D svelte-bricks
+npm install --dev svelte-bricks
 ```
@@ -62,3 +61,3 @@
 
-**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.
 
@@ -73,16 +72,84 @@ **Hint**: Balanced columns can be achieved even with this simple implementation if masonry items are allowed to stretch to the column height.
 
-- `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
@@ -89,0 +156,0 @@

Fixed alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11144

15.66%

Number of low quality alerts

1

-50%

Number of lines in readme file

163

69.79%

Worsened metrics

Dependency count

1

Infinity%

Dev dependency count

19

5.56%

Dependency changes

• + Added

  svelte@^3.57.0

• + Added

  svelte@3.59.2
  (transitive)