Tweet

More from @AdamRackis

Adam Rackis

@AdamRackis

17 Nov

I haven't said this in awhile, but I just published some open source! svelte-helpers isn't much yet, but it's something.

Has some helpers to enable spring animations in transitions, and also a declarative Modal component.

github.com/arackaf/svelte…

1/

@Rich_Harris

First, huge thanks to @Rich_Harris for the helping hand with the spring functions. He laid out a clear path, along with some sample code that was incredibly helpful, and mostly bug-free 😘

The Modal is influenced by my React years. The API is completely declarative. Render the <Modal>, give it content & an open prop, and it'll show when needed.

Unlike other Svelte modals I've seen I don't even try to let you configure a close button, ok button, etc etc

2/

Read 7 tweets

Adam Rackis

@AdamRackis

13 Nov

I'm finally scratching the surface of how much simpler application code becomes with Svelte. I never expected such a stark difference, yet here we are.

React hook to track an element's height, vs the Svelte equivalent—it's amazing how much simpler things get with a compile step.

Usage is equally simple.

Get a "ref" to the element via screenshot #1 (el is just a variable declared with let - lmao this feels like cheating)

Then ... just use it. That's screenshot #2

Oh but you don't want the initial display of the thing you're animating to slide down, right? On initial render it should just be there, fully formed (if open)?

That's easy too, since Svelte uses regular JavaScript, which is way easier than algebraic effects 😏

Read 7 tweets

Adam Rackis

@AdamRackis

23 Oct

I know I've been heavy on the Svelte hype lately. Some folks have been asking for specifics, which is pretty reasonable. So while my League Client patches, here's a thread of actual Svelte features that make me happy.

1: Uni-directional prop flow as religion is a shitty religion.

A solid component model, with props being passed downward is great. That was the huge value proposition of React. But there are times when this over-complicates matters.

We've all been there. We have some state that a child component needs to control. So what do we do? We define the state in the parent, and pass a setter, or reducer to the child, which the child then calls with the new value. We've all done this a million times.

Read 15 tweets

Adam Rackis

@AdamRackis

22 Oct

@ken_wheeler

The nicest surprise with Svelte has been the tooling. I expected it to be raw, but, and I swear on @ken_wheeler's finest bourbon I'm not exaggerating, it's better than React.

Auto complete on Svelte attributes, auto import when you use a component, etc. All *without* TypeScript.

And yeah I know the auto-import thing works with React. Usually. If you're using default exports it's often a crap shoot. It's incredibly reliable with Svelte.

And the attribute completions even include warnings if you reference an action that's not defined, etc. Top notch 🍺

And of course by "tooling" I mean the. VS Code plugin. Install that bitch and you're done.

Read 4 tweets

Adam Rackis

@AdamRackis

21 Oct

My plan for migrating micro-graphql-react to Svelte was to fork the repo, then use a rusty machete to hack away the complicated bullshit I spent months adding for Suspense support. That'd leave it 98% React agnostic.

Then swap out React, for Svelte.

It appears to work 😏 🥳 🍺

@Rich_Harris

The main challenge was ... webpack. If webpack doesn't have .mjs at the front of the extensions array, bad things happen to the writeable store, coming from

var internal = require('../internal');

(webpack hard codes undefined)

/cc @Rich_Harris - maybe add a warning?

And that's it. Now begins the real work, of migrating all the tests from React over to Svelte.

If you're by chance one of the few users of the original react version, don't worry - I'll still be supporting it.

Read 4 tweets

Adam Rackis

@AdamRackis

3 Aug

@acdlite

@acdlite Has this been elaborated anywhere? I'm trying to see what the rules are for mutating refs within a data-fetching hook. CM interrupting renders + data-fetching asynchrony makes this ... hard.

My worry is something like the following:

1/

@acdlite

@acdlite useQuery hook called, "currentQuery" ref is updated

render is interrupted

Can that same render be re-run but...with older state? That's not possible, is it? Except with useTransition, but in that case the new-state renders / old-state renders are in separate trees?

2/

@acdlite

@acdlite Ever be humanly possible for:

useQuery existing w/ data for query "A"

useQuery called with query "B"

currentQuery.current set to "B"—fetch()

useQuery re-renders w/ old query state "A"

ref set to "A"

promise for "B" resolves—wrongly thinks it's outdated bc mismatching ref

Read 6 tweets

Share this page!

Adam Rackis

Try unrolling a thread yourself!

More from @AdamRackis

Adam Rackis

Adam Rackis

Adam Rackis

Adam Rackis

Adam Rackis

Adam Rackis

Did Thread Reader help you today?

Like this author's thread?