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/
Just render whatever you need. Wrap my raw modal with your own application-specific modal, applying whatever consistent styles you need.
Speaking of styles, the modal's default styles are global, so override as needed.
Sadly Svelte doesn't yet have a native portal api (!!!) so I had to roll my own. Sadly that means you can't unmount your modal in order to hide it, not that that's a super common requirement (ime, ymmv)
Oh and the modal doesn't have any of the a11y stuff configured, mainly because I don't know how. PR's welcome :)
More to come. Need some demo's, features, dev sandbox within the repo so this can actually be run from within the repo, etc etc.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
TIL there are people with *extremely* strong opinions and attachments to ... chat platforms.
I’m old enough to have had to work with Gmail and g-chat 😳
I fell in love with Slack immediately. And when they added threading?
For all the controversial shit I’ve said, I never expected “Discord’s lack of threading is a crucial defect and their slightly more polished UI doesn’t really matter” to blow up like that 😂🥃👀☠️
Then again maybe the problem is Discord’s designed for real-time chat among gamers, and replacing Slack w/ it just doesn’t make sense to begin with. Just like using Slack (with no blocking) outside a corporate environment may not make sense. Right tools for the right job and such
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 😏
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.
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.
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 😏 🥳 🍺
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
@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 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/