https://github.com/rodneylab/svelte-each

Using Svelte each blocks: how to loop on array-like objects in Svelte + simplify your code using const & style directives and destructuring.
https://github.com/rodneylab/svelte-each

demo each svelte sveltekit

Last synced: 5 days ago
JSON representation

Using Svelte each blocks: how to loop on array-like objects in Svelte + simplify your code using const & style directives and destructuring.

• Host: GitHub
• URL: https://github.com/rodneylab/svelte-each
• Owner: rodneylab
• License: bsd-3-clause
• Created: 2022-03-25T21:08:06.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-27T16:28:01.000Z (6 months ago)
• Last Synced: 2024-05-28T00:48:08.276Z (6 months ago)
• Topics: demo, each, svelte, sveltekit
• Language: Svelte
• Homepage:
• Size: 401 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: .github/SECURITY.md

Awesome Lists containing this project

README

        




  

    

  





  Svelte #each



# svelte-each

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/rodneylab/svelte-each)

Demo code: colour palette app which helps explain Svelte each blocks as well as const directives, destructuring within each blocks and style directives. The code accompanies the video post on using each blocks in Svelte. If you have any questions, please drop a comment at the bottom of that page.

## Building and previewing the site

If you're seeing this, you've probably already done this step. Congrats!

```bash

git clone https://github.com/rodneylab/svelte-each.git

cd svelte-each

pnpm install # or npm install

pnpm run dev

```

## Building

```bash

pnpm run build

```

> You can preview the built app with `pnpm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.

Feel free to jump into the [Rodney Lab matrix chat room](https://matrix.to/#/%23rodney:matrix.org).