more svelte action ideas

[swyxio]

https://mobile.twitter.com/lihautan/status/1350083142833487874/photo/1

[swyxio]

devon govett suggests the hooks from his React Aria package https://github.com/adobe/react-spectrum/tree/main/packages/@react-aria/interactions/src

[dkzlv]

Since Svelte does not have a way to forward all the events from a DOM node (e.g., on:* — which I think is so bad it should never be shipped to Svelte) we're stuck with UI Kits that forward everything by hand.

I came up with an action, that will open up an react-alike API for events.

Child.svelte

<script>
	import { subscribeToEvents } from './utils.js';
	
	export let events;
</script>

<div use:subscribeToEvents={events}>
	Hey
</div>

Parent.svelte:

<script>
	import Child from './Child.svelte';
	
	const events = new Map();
	events.set('mouseover', () => console.log('mouseover'))
	events.set('click', () => console.log('click'))
</script>

<Child {events} />

I can update it to look better, but the idea stands.

[swyxio]

thank you for suggesting! this usecase looks a bit a bit abstract imo. mostly useful for library builders? would prefer to document in recipes then unless there is more popular demand.

[dkzlv]

@sw-yx I'm on the same page with you. I came up with this action while discussing Svelte's potential with React folks, I have yet to find a single use-case in my real-world practice for it.

But I was told by the same React folks that every major company creates an in-house UI Kit, and being unable to work with events predictably pushes them away from adopting Svelte. I'm not sure if this belongs in this repo, recipes, tutorials or whatever. For now other guy from the same chat put the solution on the corresponding feature request on Svelte's main repo, hopefully it'll help someone.

[jthegedus]

Is there a way to extract the active link action from svelte-spa-router https://github.com/ItalyPaleAle/svelte-spa-router#highlight-active-links

[swyxio]

@jthegedus this maaaybe could be interesting - do you think most routers would have an opinion on how to do active links though?

i'm sure if we wanted to we could extract it, just want to make sure it is useful by most. i think this is ok...

[dkzlv]

Beautiful idea! Revising how I achieved this in my project can't help but think an action would be more reusable.

But just compare the code required for this task. It's monstrous for a reusable solution and barely 4 LOC for a sapper-specific one. Makes me think if it would really be useful.

[jthegedus]

do you think most routers would have an opinion on how to do active links though

Most routers will certainly have an opinionated way of doing this. The fact that not all routers come with this action standard is the real issue. Is there a way to ensure that SvelteKit/all Svelte routers come with this action? Although Sapper only needs a 4LOC implementation as @dkzlv notes, it's 4 lines people have to lookup, understand, implement, and maintain as the router changes over time. I just want use:active everywhere 😅

[swyxio]

i think its a valid thing to want. i have no insider info on what sveltekit will offer. we definitely dont have any dictat on what routers will have this action.

You know what - I'll add this to readme for now. can add if we have popular demand/once sveltekit comes out and doesnt have it.