Show / hide
@svelte-put
includes several packages that have self-managed release cycles, listed below. Check out their corresponding README for more details.
Package | Short Description | Version | 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 |
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.
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.
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
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...
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
- separate helper methods & implement unit tests
- add field test for svelte kit (integration)
- CI workflow (github action)