vnphanquang/svelte-put

Useful svelte stuff to put in your projects

vnphanquang

Ho Chi Minh, Vietnam

               

🤓 About me

My story

Expand to see more of this

Make this open to see some miracles

You are getting there, keep going!

You do really want to see how this ends, don't you?

Well I have some exciting news to tell you

You just wasted 5 seconds for this crap

Get your butt back to work

Shame on you I have no story

Okay now you are getting me annoyed...

Okay okay, I will tell you my story, geez louise!

It goes like this:

...

My name is Quang Phan. I am a learner and a developer. This is where I dedicate my energy to the open source community.

You are probably bored already so get back to whatever you were doing. See you out there on the field.

In case you want to reach me, find me at vnphanquang on most social platforms.

Cheers!

👍 Current Favorite Technologies

🛠️ Other Languages and Tools

Languages

Frameworks

Databases

Architecture

Build Tools

Toolings

💾 Current Setup

My keyboard: ZSA Moonlander

See my .config here for all my setup.

I mostly use Linux:

• setup with i3wm, polybar - alacritty, tmux, vim,

• but I use Vim plugin with VS Code mostly (hey vim-ers, don't judge me 🧑‍⚖️).

  

I also use mac at work sometimes but only when i am forced too 😂.

📚 Resources that helped me build this profile

• awesome collection of Github profiles for inspiration
• simpleicons for svg icons
• getavataaars for avatar generation
• wakatime, wakatime-vscode and the anmol098/waka-readme-stats github action for the coding stats section at end of this profile.

glhf!

📈 My Statistics

I'm an Early 🐤

🌞 Morning                1578 commits        ██████░░░░░░░░░░░░░░░░░░░   22.65 % 
🌆 Daytime                2127 commits        ████████░░░░░░░░░░░░░░░░░   30.53 % 
🌃 Evening                3143 commits        ███████████░░░░░░░░░░░░░░   45.12 % 
🌙 Night                  118 commits         ░░░░░░░░░░░░░░░░░░░░░░░░░   01.69 % 

📅 I'm Most Productive on Friday

Monday                   1202 commits        ████░░░░░░░░░░░░░░░░░░░░░   17.26 % 
Tuesday                  870 commits         ███░░░░░░░░░░░░░░░░░░░░░░   12.49 % 
Wednesday                713 commits         ███░░░░░░░░░░░░░░░░░░░░░░   10.24 % 
Thursday                 643 commits         ██░░░░░░░░░░░░░░░░░░░░░░░   09.23 % 
Friday                   1354 commits        █████░░░░░░░░░░░░░░░░░░░░   19.44 % 
Saturday                 1185 commits        ████░░░░░░░░░░░░░░░░░░░░░   17.01 % 
Sunday                   999 commits         ████░░░░░░░░░░░░░░░░░░░░░   14.34 % 

📊 This Week I Spent My Time On

🕑︎ Time Zone: Asia/Ho_Chi_Minh

💬 Programming Languages: 
Svelte                   7 hrs 38 mins       █████████████████░░░░░░░░   66.46 % 
TypeScript               1 hr 50 mins        ████░░░░░░░░░░░░░░░░░░░░░   16.01 % 
Other                    31 mins             █░░░░░░░░░░░░░░░░░░░░░░░░   04.62 % 
YAML                     19 mins             █░░░░░░░░░░░░░░░░░░░░░░░░   02.82 % 
Markdown                 17 mins             █░░░░░░░░░░░░░░░░░░░░░░░░   02.50 % 

🔥 Editors: 
VS Code                  11 hrs 30 mins      █████████████████████████   100.00 % 

💻 Operating System: 
Linux                    11 hrs 30 mins      █████████████████████████   100.00 % 

I Mostly Code in JavaScript

JavaScript               23 repos            ██████████░░░░░░░░░░░░░░░   39.66 % 
Svelte                   12 repos            █████░░░░░░░░░░░░░░░░░░░░   20.69 % 
TypeScript               11 repos            █████░░░░░░░░░░░░░░░░░░░░   18.97 % 
Rust                     3 repos             █░░░░░░░░░░░░░░░░░░░░░░░░   05.17 % 
Python                   2 repos             █░░░░░░░░░░░░░░░░░░░░░░░░   03.45 % 

Last Updated on 29/04/2024 00:20:14 UTC

svelte-put's Issues

[avatar] Unit Tests for Avatar Helper

As title. implement unit test for:

• getSizeFromUrl
• gravatar
• uiAvatar

[copy] Implement and publish @svelte-put/copy

@svelte-put/copy for copying text within nodes

• implement, done in 496b842
• publish (after https://github.com/vnphanquang/svelte-put/compare/feat/docs-site is merged)

Typescript Errors

Hi! I've been having a terrible issue with all of our open dialog functions. The types are constantly causing error squiggles despite working just fine. Below are screenshots showing the different errors

Function:

Component TS error:

props TS error

DeleteBorrowers Component:

I'm a smidge clueless as to why there's an issue here. It seems everything should be work and I'm 95% sure it used to all work until an update recently. Thanks for any assistance!

[preprocess-inline-svg] Experimental Typing Extraction

Context

Following @svelte-put/[email protected] in which an experimental typing generator is introduced, this issue is to track the next steps for completing this feature, or whether it should be removed.

[modal] Add Comprehensive Documentation for @svelte-put/modal

• bootstrap ts docs (done in 866c520)
• add entry to playground (c0a06b6)
• make REPL
• add quick start section in README (minimal setup and usage) (#37)
• add customization guidelines (#37)
• add package status and links to monorepo root README (e07ae95)

[select] Enable style customization

Figure out best ways for styling customization:

• classes prop, as in @svelte-put/modal?
• css custonm attributes?

Inspiration:

• https://github.com/rob-balfre/svelte-select
• https://react-select.com/styles

Option to disable moveable programmatically

Hi @vnphanquang, great work on svelte-put!

I'm trying to find a way to disable "moveable" in certain instances programmatically.

I have a moveable canvas and moveable nodes on them. I tried to use the ignore parameter (as described here), but since I load the nodes within another component, it does not seem to work in this case. So, when I move a node, the underlying canvas also moves. So I'm listening to nodes moving and, during this time, would need to disable the grid moveable.

Maybe there is a workaround for this without a disable option?

Thanks!

This is the HTML of the canvas component (the nodes are inside the Graph component and have the class "node"):

<div
	class="canvas"
	class:disabled
	bind:this={canvasElement}
	use:movable={{
		limit: { delta: { x: `${$size.width * 2}px`, y: `${$size.height * 2}px` } },
		ignore: ".node"
	}}
	on:movablestart={onMoveableStart}
	on:movableend={onMoveableEnd}
>
	<Grid {gridElement} />
	<Graph bind:gridElement />
</div>

[preprocess-auto-slug] Unit Tests

Implement testing for preprocess-auto-slug, simple input source code vs processed output?

Submit Project to MadeWithSvelte?

Explore the possibility and eligibility to submit this project to MadeWithSvelte

[modal] Unmount transition should run

Currently in svelte-put/modal, the default unmount animation wouldn't run. Perhaps this stems from the handling of modal store array in ModalPortal? Maybe {#key} will help?

[toc] not rendered if first tocItem is not in view

Hi,

I've an issue with svelte-put/toc. Table of contents is not rendered if first tocItem is not in view on page load.
In my case I'm targeting for h2 elements and first h2 is not in view.

Here is svelte repl with this issue.

[preprocess-auto-slug] Convert package to ESM

Context

svelte.config.js seems to support importing esm package, proven during implementation of process-inline-svg. We should migrate to esm for auto-slug to keep consistency?

Optimize all images

All images should be compressed to webp to save bandwidth

[select] Boostrap `@svelte-put/select`

[resize] Implement an action that wraps ResizeObserver

Context

Using pretty much the same implementation strategy as in @svelte-put/intersect, let's wrap ResizeObserver in @svelte-put/resize

Prior Arts

https://github.com/jnruel/svelte-observe-resize

https://github.com/andrelmlins/svelte-resize-observer

https://github.com/Gennnji/svelte-actions-resize

Notice

Browser Support: https://caniuse.com/resizeobserver
Polyfill: https://www.npmjs.com/package/resize-observer-polyfill

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency postcss-import to v16

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

• chore(deps): update dependency vite to v4.5.1 [security]

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@changesets/changelog-github, @changesets/cli, @floating-ui/dom, @microsoft/api-documenter, @microsoft/api-extractor, @rollup/plugin-typescript, @sveltejs/adapter-cloudflare, @sveltejs/kit, @sveltejs/package, @types/cookie, @types/node, @types/postcss-mixins, clsx, cssnano, dts-buddy, eslint, eslint-plugin-svelte, lint-staged, node, pnpm, postcss, postcss-load-config, postcss-nesting, prettier, prettier-plugin-svelte, prettier-plugin-tailwindcss, publint, rollup, stylelint-config-clean-order, svelte, svelte-check, svelte-highlight, svelte-preprocess, svelte2tsx, tailwindcss, ts-node, turbo, typescript)
• chore(deps): update dependency @sveltejs/adapter-auto to v3
• chore(deps): update dependency @sveltejs/adapter-cloudflare to v3
• chore(deps): update dependency @sveltejs/kit to v2
• chore(deps): update dependency postcss-load-config to v5
• chore(deps): update dependency stylelint to v16
• chore(deps): update dependency stylelint-config-standard to v36
• chore(deps): update dependency tsup to v8
• chore(deps): update github/codeql-action action to v3
• chore(deps): update node.js to v20
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/changesets.yaml

• actions/checkout v4
• pnpm/action-setup v2
• actions/setup-node v4
• changesets/action v1

.github/workflows/codeql.yml

• actions/checkout v4
• github/codeql-action v2
• github/codeql-action v2
• github/codeql-action v2

npm

configs/apirc/package.json

• @microsoft/api-documenter ^7.19.0
• @microsoft/api-extractor ^7.28.6

configs/tsconfig/package.json

package.json

• @changesets/changelog-github ^0.4.8
• @changesets/cli ^2.26.2
• @types/node ^20.9.0
• @vnphanquang/eslint-config ^2.0.0
• @vnphanquang/prettierrc ^1.0.1
• eslint ^8.53.0
• eslint-plugin-svelte ^2.35.0
• lint-staged ^15.0.2
• postcss-html ^1.5.0
• prettier ^3.0.0
• prettier-plugin-svelte ^3.0.3
• prettier-plugin-tailwindcss ^0.4.1
• publint ^0.2.5
• simple-git-hooks ^2.9.0
• stylelint ^15.11.0
• stylelint-config-clean-order ^5.2.0
• stylelint-config-html ^1.1.0
• stylelint-config-standard ^34.0.0
• svelte ^4.2.2
• tslib ^2.6.2
• turbo ^1.10.16
• typescript ^5.2.2
• pnpm >=8.6.0
• node >=18.16.0
• node 18.17.1
• pnpm 8.6.10

packages/actions/clickoutside/package.json

• dts-buddy ^0.4.0

packages/actions/copy/package.json

• dts-buddy ^0.4.0

packages/actions/dragscroll/package.json

• dts-buddy ^0.4.0

packages/actions/inline-svg/package.json

• dts-buddy ^0.4.0

packages/actions/intersect/package.json

• dts-buddy ^0.4.0

packages/actions/lockscroll/package.json

• dts-buddy ^0.4.0

packages/actions/movable/package.json

• dts-buddy ^0.4.0

packages/actions/noti/package.json

• dts-buddy ^0.4.0

packages/actions/resize/package.json

• dts-buddy ^0.4.0

packages/actions/shortcut/package.json

• dts-buddy ^0.4.0

packages/actions/toc/package.json

• dts-buddy ^0.4.0
• svelte ^3.55.0 || ^4.0.0

packages/actions/tooltip/package.json

• dts-buddy ^0.4.0

packages/components/select/package.json

• @microsoft/api-documenter ^7.23.11
• @microsoft/api-extractor ^7.38.2
• @sveltejs/adapter-auto 2.1.1
• @sveltejs/kit 1.27.3
• @sveltejs/package 2.2.2
• npm-run-all ^4.1.5
• svelte ^4.2.2
• svelte-check ^3.5.2
• svelte-preprocess ^5.0.4
• svelte2tsx ^0.6.23
• vite ^4.5.0
• svelte ^3.55.0 || ^4.0.0

packages/misc/avatar/package.json

• md5 ^2.3.0
• @types/md5 ^2.3.5
• dts-buddy ^0.4.0
• svelte ^4.2.2
• svelte ^3.55.0 || ^4.0.0

packages/misc/modal/package.json

• @microsoft/api-documenter ^7.23.11
• @microsoft/api-extractor ^7.38.2
• @sveltejs/adapter-auto 2.1.1
• @sveltejs/kit 1.27.3
• @sveltejs/package 2.2.2
• npm-run-all ^4.1.5
• svelte ^4.2.2
• svelte-check ^3.5.2
• svelte-preprocess ^5.0.4
• svelte2tsx ^0.6.23
• vite ^4.5.0
• svelte ^3.55.0 || ^4.0.0

packages/misc/qr/package.json

• qrcode-generator ^1.4.4
• dts-buddy ^0.4.0

packages/preprocessors/auto-slug/package.json

• github-slugger ^2.0.0
• magic-string ^0.30.5
• svelte-parse-markup ^0.1.2
• @microsoft/api-documenter ^7.23.11
• @microsoft/api-extractor ^7.38.2
• @types/estree ^1.0.5
• npm-run-all ^4.1.5
• svelte ^4.2.2
• tsup ^7.2.0
• svelte ^3.55.0 || ^4.0.0

packages/preprocessors/helpers/package.json

• @types/estree ^1.0.5
• dts-buddy ^0.4.0
• svelte ^3.55.0 || ^4.0.0

packages/preprocessors/inline-svg/package.json

• hast-util-to-html ^9.0.0
• lodash.debounce ^4.0.8
• magic-string ^0.30.5
• svelte-parse-markup ^0.1.2
• svg-parser ^2.0.4
• @microsoft/api-documenter ^7.23.11
• @microsoft/api-extractor ^7.38.2
• @types/estree ^1.0.5
• @types/lodash.debounce ^4.0.9
• @types/svg-parser ^2.0.6
• npm-run-all ^4.1.5
• svelte ^4.2.2
• ts-node ^10.9.1
• tsup ^7.2.0
• typescript ^5.2.2
• vite ^4.5.0
• svelte ^3.55.0 || ^4.0.0

packages/transitions/package.json

• @microsoft/api-documenter ^7.23.11
• @microsoft/api-extractor ^7.38.2
• @rollup/plugin-typescript ^11.1.5
• npm-run-all ^4.1.5
• rollup ^4.3.0
• svelte ^3.55.0 || ^4.0.0

sites/docs/package.json

• clsx ^2.0.0
• cookie ^0.6.0
• mustache ^4.2.0
• static-tree ^1.3.1
• @floating-ui/dom ^1.5.3
• @sveltejs/adapter-cloudflare ^2.3.3
• @sveltejs/kit ^1.27.3
• @tailwindash/triangle ^1.0.5
• @tailwindcss/typography ^0.5.10
• @types/color ^3.0.6
• @types/cookie ^0.5.4
• @types/mustache ^4.2.5
• @types/postcss-mixins ^9.0.3
• autoprefixer ^10.4.16
• color ^4.2.3
• cssnano ^6.0.1
• highlight.js ^11.9.0
• npm-run-all ^4.1.5
• postcss ^8.4.31
• postcss-import ^15.1.0
• postcss-load-config ^4.0.1
• postcss-mixins ^9.0.4
• postcss-nesting ^12.0.1
• svelte ^4.2.2
• svelte-check ^3.5.2
• svelte-highlight ^7.4.1
• svelte-preprocess ^5.0.4
• tailwindcss ^3.3.5
• tiny-glob ^0.2.9
• ts-node ^10.9.1
• vite ^4.5.0

sites/docs/scripts/package.json

---

• Check this box to trigger a request for Renovate to run again on this repository

[intersect] enhance with more events & scroll direction detection

Context

It's more convenient to have an on:intersectleave & on:intersectenter events, especially in use cases to track if element is in view.

Also it's helpful sometimes to know the scrolling direction.

Inspiration might be pooled from https://github.com/maciekgrzybek/svelte-inview/blob/master/src/inview.ts

Todos

• support both axes in direction detection (currently only y)
• add intersectenter & intersectleave events

Erroneous request to '/undefined' when no sources are provided for Avatar

When no sources are provided for the Avatar component an attempt to load an image at /undefined (or whatever you path is + /undefined) is made.

If there ends up being no sources then it should probably just go straight to using the default fallback, rather than waiting for an error on loading /undefined.

I think changing this line

svelte-put/packages/misc/avatar/src/lib/Avatar.svelte

Line 40 in f1293f3

rElement.src = rSrc = sources[currentSourceIndex];

to something like

rElement.src = rSrc = sources[currentSourceIndex] ?? DEFINITIVE_FALLBACK;

is all thats needed.

[select] Support for `async`

Add async support for @svelte-put/select.

Inspiration: https://react-select.com/async

Using variable for data-inline-src returns error

I have an array of strings that has all of my icon names in it.

Whenever trying to use:
<svg data-inline-src=${realIconList[3]} />

I get the error: cannot find svg source for ${realIconList[3]}

[preprocess-inline-svg] support `class:name` syntax

Context

Currently the conditional class shorthand class:name is not parsed after transformation by preprocess-inline-svg. This issue tracks how (or whether it is possible) to resolve this issue.

Potentially, this means syntax that includes : in themselves might suffer from the same issue (more testing needed)?

[modal] Accessibility and `aria` attributes

• explore and adapt to standards / best practice about accessibility for svelte-put/modal
• explore the possibility of using dialog? -> no, explained in README

[docs][toc] make attribute references into tables

Currently the references for Toc Data Attributes at https://svelte-put.vnphanquang.com/docs/toc is a bit hard to follow, and it's not clear whether an attribute can be customizable or readonly. Let's make them into tables for better readability.

Extract @svelte-put/transitions

To be a collection of custom transitions

• slide - extended with horizontal (width) support
• set to private for now

[toc] Add Unit Tests

As title. It's good to have some unit testing for better confidence during each release.

[docs] setup stylelint?

As the title. Setup stylelint that can work with svelte as well, with minimal ruleset

shortcut not working?

I tried to make use of shortcut but it simply doesn't seem to do nothing. I'm simply trying (with appropriate imports and handleK definition):

<div
  use:shortcut={{
    trigger: {
      key: "k",
      callback: handleK,
    },
  }}
/>

but the callback simply never gets called. I tried other keys as well without luck. No errors are visible from the console.

Any ideas what could be wrong or how to debug why it isn't working?

[docs] Render packages in sidebar as flat nav with tags?

Context

Current side navbar lists packages with scoping to category: action, component, preprocessor, misc.

Some package exports more than one categories. For example one might support both an action & a component. For this reason we should list all packages in a flat list, maybe with tags to indicate if a package support which categories?

Perhaps we should also add a filter on top?

[docs] RSS

[select] Support for `creatable`

Add creatable support for @svelte-put/select: allow user to create their own option

Inspiration: https://react-select.com/creatable

Preprocessor for inlining SVG

Context

Very often we need to inline svg as svelte components, typically for color styling. Naive solution is to make a svelte component for each svg, but that's not particularly ergonomic.

Prior Arts

• svelte-inline-svg
  • operates at runtime, can be used for dynamic svg loaded from network, which is versatile and can utilize caching. Although it may not be very performant?
  • wraps with a dedicated Svelte component -> not easy to style without tailwind or global styles.
• vite-plugin-svelte-svg
  • a vite plugin, very minimal, use a ?component enhanced import so
  • has svgo support as a global plugin option, which is a big plus.

Inception

What if we can provide a more minimal interface like this:

<svg data-inline-src="../image.svg" data-inline-svgo-...></svg>

where:

• data-inline-src: a path to the svg asset, relative to the current file
• data-inline-svgo-...: per-case option to transform the svg, typically will be merged with the global config. Ex: data-inline-svgo-removeDimensions for removing width & height, or ="false" to disable (inline each prop here in
• any other attributes will be merged with those in the svg asset

Pros:

• No additional imports
• No wrapping in component -> allow styling and using all other vanila svg attributes

Cons:

• What if data-inline-src is invalid? Error? (JS import is handled by vite so it'll be more easy)
• What about svg loaded from network? Maybe we can also include something like what svelte-inline-svg does, but with an action?? -> lower priority

Can this be a vite plugin instead of a svelte preprocessor?

[toc] Overhaul -> 2.0.0

• don't insert p, use scroll-margin-top instead

• allow inserting a, but recommend using @svelte-put/preprocess-auto-slug instead

• extract utils:

  • observe strategy detection
  • anchor injection
  • get text content exclude injected anchor

  Not necessary for now. Will expand later when needed

• fix duplication in slug auto-slug when code tag is used <- dbeecf8

• add, for auto-slug, automatic skipping files if search matches comments <- abb54f6

• update repl once 2.0 is released

2.0.0 PR: #93

[docs] Scope general info in `Overview` sections

Context

Taking inspiration from GrailUI, let's introduce an Overview group in the left-side that contains general information

Todos

• Add Overview section
• Try setting section as uppercase, ex OVERVIEW
• Move Introduction into OVERVIEW
• Add Design:
  • with type-safe / for typescript user
  • try to be headless whenever possible
  • minimal, few dependencies as possible
• Add Guidelines(?):
  • Action usage notice
  • Typescript support
  • API section?

[movable] Add `screen` limit option

When a modal is dragged around, perhaps the most common use case for the limit option is to limit node within the screen. Therefore, it makes sense to add a built-in screen limit to the action

[toc] Provide a helper / default support for handle click on toc item / anchor & pausing update?

Context

Typically when there's a sticky table of contents, user expects to be able to click on the item to get to a certain section of page.

With current behavior of toc, it is not guaranteed that when item is clicked, the observe mechanism will see the same item as active. For example, the "scrolled-to" section might be only 40% of screen, and the next section is 30% of screen -> the active item now might be the next section, not the clicked-on one.

Explore a possibility to add default support / helper to debounce click on the anchor / toc item.

Things to consider:

• This support should live in the toc action itself rather than createTocStore, because someone might not be using store
• What if user turns of anchor option, no support (let users handle) or expose a helper (what does this helper look like)?

[preprocess-auto-slug] Implement Svelte Processor for Transforming Heading Tag with ID & Anchor

Look into possibility and details of how to make a svelte preprocessor that can:

• add id (generated from text content) as an attribute
• add anchor tag referencing the id generated

Inspiration Pool:

• rehype-autolink-headings
• rehype-slug

Other preprocessors to research:

• svelte-subcomponent-preprocessor
• svelte-preprocess-import-assets
• svelte-preprocess

Tools & Docs:

• magic-string
• svelte/compiler.walk
• svelte preprocess
• svelte-parse-markup
• github-slugger

Todo:

• implementation (initial, quick and dirty, for use in docs site) - done in dfb9367
• embellishment, config options (for public interface) - done in eb17359
• handle computed value, ex: <h2>{string}</h2>
• comprehensive documentation (do later in #61)
• publication
• tests (simple snapshot of input and output svelte sources), with vitest (o later in #69)

[select] Full documentation & REPL

Write comprehensive README.mc for svelte-put/select

Partytown

https://partytown.builder.io/

[avatar] Fix CORS for uiAvatar resolution

fetch to uiAvatar failed with CORS, perhaps consider using picture tag for better native support and also much clearer interface / priority specification?

But if using picture tag, consider passing trials to slot for easy user customization?

[docs] sitemap

[avatar] Automatically resolve alt from email and name if gravatar is string or from src (name / email query params)

As in title

• set alt to gravatar if gravatar prop is string
• extract with regex name= and email= from src prop

[preprocess-inline-svg] Unable to pass "data-inline-src" to a child component

So I'm trying to implement the @svelte-put/preprocess-inline-svg library for static SVG usage in my SvelteKit app.

I would like to use it as a component that has some pre-defined Tailwind style classes applied to it.

<script lang="ts">
	import { twMerge } from "tailwind-merge";

	export let icon = "default";
</script>

<svg class={twMerge(`fill-red-400`, $$props.class)} data-inline-src={icon} />

This gives the following warning: "@svelte-put/preprocess-inline-svg: cannot find svg source for {icon} at /src/lib/components/atoms/Icon.svelte"

When I change the code to the following it works perfectly fine:

<svg... data-inline-src="default" />

It seems like the "data-inline-src" attribute treats everything that comes after the "=" as a string. Is there any way to use a variable value for this?

[movable] Exclude text nodes when click to drag

Right now if no trigger is provided,click event is registered anywhere inside the node. This makes it hard to copy texts. There should be an option to exclude text nodes from the action.

[docs] @svelte-put/toc

Transfer docs from github README to dedicated page at https://svelte-put.vnphanquang.com/docs/toc

toc 2.0.0 PR: #93

[preprocess-inline-svg] Build-time error is thrown when optional config object is omitted in call to `inlineSvg()`

The documentation shares the following example for using preprocess-inline-svg as a SvelteKit preprocessor:

import inlineSvg from '@svelte-put/preprocess-inline-svg';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [
    // input to `inlineSvg` can be either a single object or an array of such
    inlineSvg([
      {
        directories: 'src/assets/icons',
        attributes: {
          class: 'icon',
          width: '20',
          height: '20',
        },
      },
      {
        directories: 'src/assets/pictograms',
      },
    ]),
    // other preprocessors
  ],
};
export default config;

However, the build actually fails with the following error:

error during build:
TypeError: Cannot read properties of undefined (reading 'inlineSrcAttributeName')
    at resolveInlineSvgConfig (file:///home/dmr/Projects/x/node_modules/@svelte-put/preprocess-inline-svg/dist/index.js:89:42)
    at inlineSvg (file:///home/dmr/Projects/x/node_modules/@svelte-put/preprocess-inline-svg/dist/index.js:182:19)
    at file:///home/dmr/Projects/sharethepayband/svelte.config.js?ts=1682704087611:10:3
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async load_config (file:///home/dmr/Projects/x/node_modules/@sveltejs/kit/src/core/config/index.js:70:17)
    at async sveltekit (file:///home/dmr/Projects/x/node_modules/@sveltejs/kit/src/exports/vite/index.js:116:24)
    at async Promise.all (index 0)
    at async asyncFlatten (file:///home/dmr/Projects/x/node_modules/vite/dist/node/chunks/dep-3007b26d.js:12365:16)

unless the optional second argument to inlineSvg() is populated:

		inlineSvg(
			{
				directories: 'static/svgs',
				attributes: {}
			},
			{
			}
		),

The typing in the package also suggested to me that the second parameter is meant to be optional.

[notification] Implement a notification (toast) system

Let's leverage experience from @svelte-put/modal to make a toast / notification push/pop system

Prior Art

Design Factors

• Typescript support is a must
• Prioritize a headless usage over component-based one, if possible
• Allow pull & push just as supported in @svelte-put/modal

[toc] Performance Improvements

Context

As [email protected] was released, almost everything was re-implemented from the ground up. This issue lists potential performance improvement

Todos

• reduce to use only one IntersectionObserver instead of one for each matching elements <- 60c2029
• run observe operations async <- a8cd5c2
• use simple callback instead of store for tracking active element <- d04d44e

[docs] Adhere to a more black-and-white minimal color palette with dark theme

[select] Enable slot customization

Define slots for customization.

Also consider splitting up markup into components for better maintainability? (current Select component is over 500 LOC)

Bootstrap a Documentation Site - Master Issue

Create a dedicated doc site for all documentation and examples, as docs through markdowns in github seems hard to follow

Sites to steal from:

• https://xstate.js.org
• https://daisyui.com/
• https://kit.svelte.dev/
• https://tailwindcss.com/
• https://tanstack.com/table/v8/
• https://docs.astro.build/
• https://turbo.build/repo/docs
• vue/vite eco:
  • https://vitest.dev/
  • https://vuejs.org/
  • https://histoire.dev/
  • https://vitejs.dev/

Todos:

• deploy to vercel?
• domain: svelte-put.vnphanquang.com?
• use MDSvex => yes
• import code as raw string for showing code in examples & documentations (solution: use vite's ?raw import query)
• how to include the extracted api to site automatically (API Reference sections)? ❌❌ -> for now just include link to api on github.
• embedded svelte repl? but what about typescript? -> let's not embed, link through badge or implement dedicated playground in site
• full set of favicons
• manifest.json and full support for PWA
• code block syntax highlighting with svelte-highlight
• reorganize components into atomic design pattern structure

Landing animation inspiration:

• https://codepen.io/jh3y/pen/XWaGEgO?editors=1100
• https://codepen.io/desandro/pen/KRWjzm