Both LayerChart and Svelte UX docs are now running with Svelte 5, which are testaments to how well the @sveltejs maintainers focused on backwards compatibility 🫶
The plan for both libraries is to maintain Svelte 3-5 compatibility through their 1.x releases, but begin the migration to Svelte 5 and leverage runes, snippets, etc in 2.x.
I plan to start the migration *soon* once I wrap a few other priorities, and will deploy incremental `next` releases as progress is made.
Thanks again for all the hard work maintainers and contributors! @Rich_Harris@dummdidumm_@trueadm@BenjaminMcCann@evilpingwin@PaoloRicciuti (sorry I couldn't find everyone on here).
📣 Simplified Notification with enhancements
@SvelteUX has improved the Notification component by supporting simple props for title, description, icon, and actions, support for theme colors (success, danger, etc), and added variant support (default, fill).
https://t.co/uxojQW2XKN
⚠️ Much improved Typescript and A11y support in @SvelteUX and @LayerChart
A considerable effort was made to improve both projects Typescript and A11y support, with progress to continue (especially during the Svelte 5 migration).
Never again will either project pollute your console!
Running `svelte-check` as part of CI and having documented locations via `@ts-expect-error` and `svelte-ignore` helps enable incremental improvement.
I would appreciate any PRs to reduce these further 🫶
Even better, by leveraging `<SpringValue {value} let:value>` from Svelte UX, you can easily add spring value transitions to the segments without any pain.
See the video for a before/after demonstration 👇
Benefits of <SpringValue> instead of using a `spring()` store value...
✔︎ Spring store values (ex. `const value = spring(50)`) do not play well with `bind:value` inputs. With SpringValue, you still use a simple variable (ex. `let value = 50`). See this REPL: https://t.co/mERNqcHxNx
✔︎ Simple drop in. No need to create a new variable - just wrap a component tree where you want the value to tween and ghost `value` within the component, and voilà, spring ✨magic✨
https://t.co/Otq5DqNY5G
Blown away by the responses Svelte UX and @LayerChart received on @Reddit. Already the 1st and 4th highest posts ▲ in /r/sveltejs for October and were only posted 2 and 3 days ago. LayerChart is only about 10 upvotes from 2nd.
Reading all the positive comments and appreciating the effort that went into each was my favorite part.
→https://t.co/bdidEkb18Y
→https://t.co/OgG0enF6Kt
I've setup a discord server for @LayerChart and Svelte UX to create a community to help with development and answer questions. https://t.co/wfPEjuhFat
I need to setup more channels for better organizatione, but I've already had a handful of people asking for such.
I keep pretty busy (young kids and work), but will do my best to answer questions, and let you know the direction I see both libraries going.
✨ Gooey - a new Svelte UX component
Continuing to explore SVG filter effects to produce interesting and delightful flourishes.
Leveraging `<feColorMatrix>` along with some blurring (ex. svg `<feGaussianBlur>`, css `filter: blur()`, svelte `transition:blur`) produces a fun "gooey" effect. This works by using feColorMatrix to define a threshold of the alpha (blur) as opaque, with the rest becoming fully transparent.
Useful to create text morphing, rounded contiguous text backgrounds, gooey dots, and more.
👇 Keep reading for videos of each example with code, or just view the docs.
→ https://t.co/WKc9z5ulQr
→ https://t.co/oLEC1xuaSD
Just added <Shine> component to Svelte UX. It complements the <Tilt> component well (adds some additional depth to the effect).
I'm going to kick around the API a little more, as well as the spotlight action, and then push a new release in the next day or so.
- https://t.co/BHvieq5QKA
- https://t.co/4r3LBZNpSV
Introducing 💻 svelte-ux (https://t.co/cZr7mx3vcz) and 📊 LayerChart (https://t.co/Vmxx6W0ngN)
Over the past 2 years I've been creating these Svelte libraries as I built highly interactive and visual applications, and they are close to 1.0 releases.
@SvelteSociety
1/4