ankurrsinghal / svelte-legos Goto Github PK

Make the lib separate from the docs as the deps of the docs is affecting the libs.

The internal imports among the utilities are causing the error.

It's getting difficult to communicate among contributors, so need a discord server to communicate better.

I'm of the opinion that actions should be renamed to drop the "Action" label from imports. This is because the use: syntax indicates that it is an action. Here is also the thread on Twitter discussing the possibility of renaming stores into readable and writable variants. https://twitter.com/ankurpsinghal/status/1637505767757455365?s=46&t=vXFY1pu_gVqC1tnNxYJ_Ow

Below are the different options versus currently.

//Current
import { hoverAction } from "svelte-legos";

//suggested
import { hover } from "svelte-legos";

This gives us

<div use:hoverAction on:hover={handler} />

//versus 

<div use:hover on:hover={handler} />

In terms of stores, appending Store isn't bad but as per the thread maybe explicitly stating readable/writable would be better.

The options are

import { hoverStore } from "svelte-legos";

//versus

//This one seems to make the most sense to me
import { readableHover } from "svelte-legos";

//or maybe

import { hoverReadable } from "svelte-legos";

Github action for building docs on pushing the commit to master, currently the docs sits in AWS S3.

notifyAction, alertAction, messageAction and tooltipAction all handles Popper logic separately, need to refactor all this in one place.

Getting Uncaught Error: Interval is not a safe integer on the intervalFnStore demo page when the input is cleared, then after pausing I can’t resume again.

Resize with aspect ratio 1:1 when shift key is on in actions/resizeable.

Can't import confettiAction like the docs says

Getting the followed error

useElementVisibility docs page currently does not scroll enough in the x and y direction to show the complete working of the hook.

notifyAction only has a default UI, we need to create custom notification types like success, warning, danger etc.

While going through the different features, I got lost a few times because the current page isn’t highlighted in the menu. Maybe the link could be in bold?

Could you add a Prettier config file? My default config is different from yours, it’s making it quite hard to contribute

TBD

intervalStore asks for time value but it should default to 1000 ms when time is not provided.

When we explore around the docs, clicking pages for different actions and stores the page reloads fully, it should adapt to SPA mode after hydrating.

useWindowScroll docs page currently does not scroll enough in x and y direction to show complete working of the hook.

The height of the text area for a split second is 3 lines and then goes to what it should be (1 line) causing layout shift

Currently tooltip has top-left, top-center, top-right placements, need to implement, all the other placements as well.

Hi! Came across this package recently and loved the idea. I have a bunch of actions/stores/transitions etc for Svelte I've written over the years and I think this is the perfect place for them!

So, what's the proposal?

I propose we add a new handlers and transitions module(s) to the codebase. For example, we can provide easy and intuitive handlers for common use cases, such as keyboard shortcuts!

Here is an example I've written for a shortcutHandler function:

import type { EventHandler } from "../lib/shared/utils/types";

export type KeyboardShortcut = {
	key: string;
	ctrl?: boolean;
	alt?: boolean;
    description?: string;
	shift?: boolean;
	condition?: boolean;
	fn: () => void;
}

export const shortcutHandler: EventHandler<KeyboardEvent, KeyboardShortcut[]> = (event, shortcuts) => {
	shortcuts.forEach((shortcut) => {
        if (
            event.key === shortcut.key &&
            event.ctrlKey === shortcut.ctrl &&
            event.altKey === shortcut.alt &&
            event.shiftKey === shortcut.shift &&
            (shortcut.condition === undefined || shortcut.condition)
        ) {
            shortcut.fn();
        }
    });
}

and we can consume it like so:

<script lang="ts">
    import { shortcutHandler, type KeyboardShortcut } from '.';
    
    const SHORTCUTS = [
        {
            key: 'a',
            description: 'Add a new item',
            fn: () => alert('Add a new item'),
        },
        {
            key: 'k',
            description: 'Show dialog',
            ctrl: true,
            fn: () => alert('Show dialog'),
        },
        {
            key: 's',
            description: 'Save',
            ctrl: true,
            fn: () => alert('Save'),
        }
    ] satisfies KeyboardShortcut[];
</script>

<svelte:window on:keydown={(e) => shortcutHandler(e, SHORTCUTS)} />

Same thing applies for transitions, for example - here is a "growShrinkTransition":

interface GrowShrinkParams extends TransitionParams {opacity: boolean;}

export const growShrink = (node: Element, params: GrowShrinkParams): TransitionConfig => {
    return {
        delay: params.delay || 0,
        duration: params.duration || 400,
        easing: params.easing || sineInOut,
        css: (t, u) => `
            ${params.opacity ? `opacity: ${t};` : ""}
            width: ${t};
        `
    };
};

and so on.

Let me know what everybody thinks! I also have some ideas for refactoring the frontend (for example, we really should be loading the stores, actions etc in the layout's load function instead of subsequently loading them again in a sub-page's load function and only using the loaded directories files to get the length of the total utilities etc)

I just tried the tooltips and they will lost their position, if the devtools-window is resized.
On MacOS with FF.

Reported by,

https://twitter.com/lasarkolja/status/1636716269255684098

Most of the examples in the docs make it seems like you can use the actions on Components...this is simply not permitted in svelte. This can lead inexperienced devs to wonder how they can make their custom button component draggable. I understand it is for simplicity but a bit of markup never killed anyone....I'd say the correct thing to do is update the examples.

Currently the tooltipAction creates separate DOM nodes for all the tooltips. Can we do it better by resuing only single DOM node and changing it in realtime?

Suggestion from Twitter

Have you considered making your docs one long page instead of different pages, like SvelteKit docs? I think it would improve discoverability, especially when checking it out in mobile.
Either way, super cool library, can't wait to try it out!

I'm takling discovery from a user standpoint eg. being able to scroll through all the components to see what the library offers quick and easy 

Link ↓
https://twitter.com/cnrdev/status/1637492355556077570

Currently the core module textareaAutoSizeAction uses already supports min and max, we just have to map params from actions to the module.

hotKeyAction suits more in place of shortAction for shortAction.

Currently, the element can be resized only via corners, enable resizing via edges as well in corresponding directions.

Suggestion from Twitter:-
https://twitter.com/corsterupdate/status/1636733386491404288

I think this is great, but perhaps it should stick to only very simple actions, or at least state (for some) that they are a "barebones" implementation of the associated action. Something like "drag" have independent libraries for a reason.

Need to give users an option to provide timeout time to hide the messages and notifications.

I think adding testing to the actions and stores could be a great idea.

Currently the actions only provide destroy, they should be able to handle the update requests as well.

Props like timer in the timerStore should be a writable so that it can be bounded to input elements.

Hooks do not exist in Svelte. They are a React feature. Please consider renaming all these by removing the use from the action name.

Compare: use:counter and use:useCounter.