@svelte-put

Useful svelte stuff to put in your projects

Show / hide

@svelte-put

Packages

@svelte-put includes several packages that have self-managed release cycles, listed below. Check out their corresponding README for more details.

Svelte Actions

Package	Short Description	Changelog	Docs	REPL
@svelte-put/movable	move node on mousedown	Changelog	Docs	REPL
@svelte-put/intersect	wrapper for IntersectionObserver	Changelog	Docs	REPL
@svelte-put/clickoutside	event for clicking outside node	Changelog	Docs	REPL
@svelte-put/shortcut	add keyboard shortcuts to node	Changelog	Docs
@svelte-put/toc	action & component for building table of contents	Changelog	Docs	REPL

Miscellaneous

Package	Short Description	Version	Changelog	Docs	REPL
@svelte-put/avatar	component & utilities for avatar		Changelog	Docs	REPL

Note:

REPLs are copies from playground code. See the Playground section for more info.
Documentation markdowns are generated with @microsoft/api-extractor & @microsoft/api-documenter.

In the Pipeline

These are some packages that will be added in the future (as soon as I find time, and the implementation has matured & become generic enough).

Package	Category	Short Description
@svelte-put/popover	action	trigger tooltip & detailed popover, using popperjs
@svelte-put/modal	utility	open async modal (that you can call programmatically and `await`)
@svelte-put/noti	utility	fire async toast-like notification
@svelte-put/inputcache	action	cache & restore value of input into/from local/session storage

Names for those packages may change.

Playground

If you want to play around to see what's available. Follow these steps:

Clone repo

git clone https://github.com/vnphanquang/svelte-put.git

or with ssh

git clone git@github.com:vnphanquang/svelte-put.git

Make sure you have pnpm and node compatible with what is specified in the engines section of the root package.json. Node version can also be managed with pnpm instead of nvm.
```
pnpm env use --global lts
```
Install dependencies
```
pnpm install
```
Build all packages

run at root:
```
pnpm build
```

Run playground (svelte-kit)

run at root:

pnpm dev --filter=@svelte-put/svelte-kit

or run at project directory

cd apps/svelte-kit
pnpm dev

See playground at localhost:3000

Inspiration & Acknowledgement

This is a collection of useful svelte utilities extracted from my real world projects that might be helpful for yours too.

There is already a great pool of svelte actions collected by Shawn and other contributors that you should check out. There might be some duplication here and there. However:

Shawn's project aims to be a source for RFCs into svelte; I believe the stuff I am putting here should stay in user land.
I prefer having separate packages for their dedicated purposes (instead of one package that exports everything).
I want to incrementally include more than just actions in this collection.

For those reasons, a monorepo seems like a good fit, hence this project.

Why the name "svelte-put"?

Because I needed to come up quickly with a name short enough & easy to remember, and it was late at night as my creativity was running low. use was the first option but no longer available in the npm registry. put came up next in mind and I stuck with it...

Contributing

Read Contribution Guide

This project is a monorepo using turborepo under the hood. Familiarity with turborepo is not required but encouraged.

For a quick start, run the script below at project root to see what commands are available.

pnpm turbo

Todos

separate helper methods & implement unit tests
add field test for svelte kit (integration)
CI workflow (github action)

ak4zh/svelte-put