npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@theofficialurban/svelte-utils

v1.3.2

Published

A compilation of useful components and other utilities. This package is intended for myself and not really intended to be anything concrete, I will be happy to fix anything or even take some requests if asked.

Downloads

4

Readme

A compilation of useful components and other utilities. This package is intended for myself and not really intended to be anything concrete, I will be happy to fix anything or even take some requests if asked.

Components & Utilities

  • ConfirmationButton - A barebones confirmation button
  • Form Component - A Form Wrapper
  • Table Component - Table component

Table Component

Props

  • rows: T[] - Table Rows extends Record<string,unknown>
  • columns: TableColumn<T> - Table Columns

Snippets

  • cell: Snippet<{row: T, column: TableColumn<T>}> - A snippet for each cell
  • cols: Snippet<TableColumn<T>> - Snippet for each header
  • label: Snippet<null> - Label for the table

Slots

  • thead - Table Head gets columns passed
  • default - Table Body
  • tfoot - Table Footer
<script lang="ts">
    import { Table } from '@theofficialurban/svelte-utils';
    import type { TableColumn } from '@theofficialurban/svelte-utils';
    // Rows can have any Record<string, unknown> Shape
    type Row = { name: string; city: string };
    const rows: Row[] = [
        { name: 'Josh', city: 'Los Angeles' },
        { name: 'Dave', city: 'Portland' }
    ];

    const columns: TableColumn<Row>[] = [
        // Column #1 'Name' for 'name' key
        { title: 'Name', key: 'name' },
        // Column #2 'City' for 'city' key
        { title: 'City', key: 'city' }
    ];
</script>
<!-- Then just pass these to the component -->
<Table {rows} {columns}>

    <!-- Data Object = {row: Row, column: Column} -->

    {#snippet cell({row, column}: {row: Row, column: TableColumn<Row>})}
        <td>{row[column.key]}</td>
    {/snippet}

    <!-- Column gets passed the 'Column' object -->

    {#snippet cols(col: TableColumn<Row>)}
        <th>{col.title}</th>
    {/snippet}

</Table>

Form Component

A simple wrapper for async forms with Svelte's built in use:enhance

Components:

  • Body - Form Body
  • Control - Input Control
  • Input - A form input
  • Select - Form Select
  • Textarea - Form Textarea
import Form from '@theofficialurban/svelte-utils';

Form.Body

Top Level Wrapper

Props extends HTMLFormAttributes:

  • form?: ActionResult | null - The form return from page props for use:enhance
  • submitFn?: SubmitFunction | undefined - A custom function to be passed to use:enhance={submitFn}

Slots:

  • title - Form Title Slot
  • default - Inside slot for the form
  • submit - Submit Button Slot

Example

<Form.Body method="POST" action="/" {form}>
	<Form.Control>
		<label slot="label">My Label</label>
		<Form.Input name="inputName" id="inputId" />
	</Form.Control>
	<!-- Submit Button Added Automatically Unless Overwritten -->
</Form.Body>

Form.Control

A control for an input, includes a slot for a label

Props extends HTMLDivAttributes:

  • Extends Default HTMLDivAttributes

Slots:

  • label - Label Slot

See Above Example

Form.Select

A form select input element

Props extends HTMLSelectAttributes:

  • options: T[] - Options, T extends Record<string,unknown>
  • displayKey: keyof T - Key to display
  • valueKey: keyof T - Key for the option value No Slots

Example:

<script lang="ts">
	import Form from '@theofficialurban/svelte-utils';
	type Option = { name: string; city: string };
	let options: Option[] = [{ name: 'Josh', city: 'Los Angeles' }];
</script>
<Form.Body ...>
	<Form.Control>
		<label slot="label">My Select</label>
		<!-- Option #1 - Display: Josh, Value: Los Angeles -->
		<Form.Select {options} displayKey="name" valueKey="city" />
	</Form.Control>
</Form.Body>

Form.Input

Props extends HTMLInputAttributes

Example

<script lang="ts">
	import Form from '@theofficialurban/svelte-utils';
</script>
<Form.Body ...>
	<Form.Control>
		<label slot="label">My Input</label>
		<Form.Input name=".." id=".." placeholder=".." />
	</Form.Control>
</Form.Body>

Form.Textarea

Props extends HTMLTextareaAttributes

  • toggleHTML?: boolean - Toggleable HTML Preview

Slots

  • default - Textarea
  • preview - HTML Preview
<script lang="ts">
	import Form from '@theofficialurban/svelte-utils';
</script>
<Form.Body ...>
	<Form.Control>
		<label slot="label">My Input</label>
		<Form.Textarea name=".." id=".." placeholder=".." />
	</Form.Control>
</Form.Body>

GradientText

A simple Gradient Text Component

Props

  • element
    • span
    • h1
    • h2
    • h3
    • p
    • div
  • --size = font-size
  • --weight = font-weight
  • --from --to = Stop 1 and Stop 2
  • --font = font-family
<script lang="ts">
	import { GradientText } from '@theofficialurban/svelte-utils';
</script>

<GradientText element="span" --from="red" --to="blue"> Hello World </GradientText>

ConfirmationButton

Types

type ClickEvent = MouseEvent & { currentTarget: EventTarget & HTMLButtonElement };
type OnConfirm = (itemId: string, e: ClickEvent) => Promise<void> | void;
type OnDecline = (itemId: string, e: ClickEvent) => Promise<void> | void;

Props

  • onconfirm - On Confirm Event
  • ondecline - On Decline Event
  • text - Prompt Text

Example

<script lang="ts">
	import { ConfirmationButton } from '@theofficialurban/svelte-utils';
</script>
<ConfirmationButton text="Please Confirm"> Click Me </ConfirmationButton>

Typewriter Effect

import { typewriter } from '@theofficialurban/svelte-utils';

Float Effect

Parameters

  • options: TweenedOptions<number> - Options for the tween
  • floatDistance: number = The distance for the bounce (usually -10 works)

Types

export type FloatEffect<T extends Element = Element> = (
	options: TweenedOptions<number>,
	floatDistance: number
) => FloatEffectReturn<T>;

export type FloatEffectReturn<T extends Element = Element> = {
	effect: Action<T, number>;
	store: Tweened<number>;
};
<script lang="ts">
	import { useFloatingEffect } from '@theofficialurban/svelte-utils';
	const { effect, store } = useFloatingEffect({ duration: 1000 }, -10);
</script>
<div use:effect="{$store}">Floating Effect</div>

SVGBounce

Properties

  • extends SVGAttributes (width, height, etc..)
  • springOpts?: SpringOpts
  • bounceDistance?: number - PX translate for bounce effect
  • css?: CSSFunction (node: SVGElement, bStore: Spring<number>, bVal: number) => string; (Should return the style string)
  • trigger?: [inEvent: string, outEvent: string] (['pointerenter', 'pointerleave'])
<script lang="ts">
	import { SVGBounce } from '@theofficialurban/svelte-utils';
	const cssFn = (n, s, v) => {
		return `translate: translateY(${v}px);`;
	};
</script>
<SVGBounce css="{cssFn}">
	   
	<path
		transition:draw
		stroke="blue"
		stroke-width="{3}"
		d="M807.7 951h-449V192L643.8 87l163.9 105z"
		fill="#F7D4FF"
	></path>
</SVGBounce>

Modal Async. Rendering Modal

Modal.Wrapper

Provides loading for a promise

Props

  • promise - Promise to await

Slots

  • loading - Loading

Modal.List

Props modal - An array (may require cast for TS)

Slots (Snippets)

  • children(item: T[])
<script lang="ts">
	import { Modal } from '@theofficialurban/svelte-utils';
</script>
// Slot: loading // Value = Promise Awaited Return
<Modal.Wrapper {promise} let:value>
	    <span slot="loading">Loading....</span>    
	<Modal.List modal="{value" as ({name: string}[])}>
		        {#snippet children(item: {name: string})}        
		<li>{item.name}</li>
		        {/snippet}    
	</Modal.List>
</Modal.Wrapper>