vnphanquang / svelte-put Goto Github PK

View Code? Open in Web Editor NEW

730.0 6.0 20.0 18.44 MB

Useful svelte stuff to put in your projects

Home Page: https://svelte-put.vnphanquang.com

JavaScript 29.80% TypeScript 17.57% HTML 0.47% CSS 0.42% Svelte 51.74%

svelte svelte-action sveltejs typescript npm action component vite preprocess svelte-kit

svelte-put's Introduction

@svelte-put

Useful svelte stuff to put in your projects

Documentation

See the dedicated documentation page here.

Packages

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

Package	Short Description	Changelog
@svelte-put/avatar	component & utilities for avatar	Changelog
@svelte-put/clickoutside	event for clicking outside node	Changelog
@svelte-put/cloudflare-turnstile	event for clicking outside node	Changelog
@svelte-put/copy	copy text to clipboard	Changelog
@svelte-put/dragscroll	add drag-to-scroll behavior	Changelog
@svelte-put/intersect	wrapper for IntersectionObserver	Changelog
@svelte-put/inline-svg	dynamically inline SVGs	Changelog
@svelte-put/lockscroll	lock scroll, hide scrollbar	Changelog
@svelte-put/modal	type-safe async modal builder	Changelog
@svelte-put/movable	move node on mousedown	Changelog
@svelte-put/noti	type-safe & headless async notification builder	Changelog
@svelte-put/preprocess-auto-slug	auto add `id` and anchor to selected nodes	Changelog
@svelte-put/preprocess-inline-svg	inline static SVGs at build time	Changelog
@svelte-put/qr	render QR as `img` or `svg`	Changelog
@svelte-put/resize	wrapper for ResizeObserver	Changelog
@svelte-put/shortcut	add keyboard shortcuts to node	Changelog
@svelte-put/toc	action & utilities for building table of contents	Changelog
@svelte-put/tooltip	type-safe headless tooltip builder	Changelog

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

svelte-put's People

Contributors

Stargazers

Watchers

svelte-put's Issues

[select] Full documentation & REPL

Write comprehensive README.mc for svelte-put/select

[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:

Other preprocessors to research:

Tools & Docs:

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)

[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.

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.

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

Extract @svelte-put/transitions

To be a collection of custom transitions

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

[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.

[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

[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?

[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][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.

[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

[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] sitemap

[docs] RSS

[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.

[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)

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]}

[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] 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)?

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?

[toc] Add Unit Tests

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

[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)

[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.

[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

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.

[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)?

[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

[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?

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?

[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

[select] Support for `creatable`

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

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

[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?

[preprocess-auto-slug] Unit Tests

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

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!

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

[select] Support for `async`

Add async support for @svelte-put/select.

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

[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)

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

[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?

Partytown

https://partytown.builder.io/

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:

Todos:

Landing animation inspiration:

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>

[docs] setup stylelint?

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

[select] Enable style customization

Figure out best ways for styling customization:

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

Inspiration:

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

[avatar] Unit Tests for Avatar Helper

As title. implement unit test for:

getSizeFromUrl
gravatar
uiAvatar

[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

Optimize all images

All images should be compressed to webp to save bandwidth

vnphanquang / svelte-put Goto Github PK

svelte-put's Introduction

Documentation

Packages

Contributing

svelte-put's People

Contributors

Stargazers

Watchers

Forkers

svelte-put's Issues

Context

Rate-Limited

Other Branches

Open

Detected dependencies

Context

Todos

Context

Todos

Context

Context

Context

Prior Arts

Inception

Context

Todos

Context

Context

Prior Art

Design Factors

Context

Prior Arts

Notice

Recommend Projects

Recommend Topics

Recommend Org

Jobs