r/solidjs

If you were plotting web frameworks in a feature space, what would be on the axes?

Maybe there would be an axis for each of

• runtime ←→ compiletime

• procedural ←→ declarative

• explicit ←→ implicit

• local reasoning ←→ global reasoning (self contained ←→ context-dependent)

• control flow oriented ←→ dataflow oriented

• "one obvious way to do it" ←→ extremely unopinionated and flexible

I'm probably missing some that might be way more useful. I haven't used many frameworks yet.

Which frameworks are the most unique from a, writing-code-in-it-as-a-developer (not implementation) perspective?

And which framework do you find to be the most fun or to have the lowest cognitive load?

I'm working on an open-source project called Arkos - it's a batteries-included backend framework, and I've been building out its realtime WebSocket layer.

The core client (@arkosjs/websockets-client) is a pure TypeScript wrapper around that handles ack/retry/timeout, namespace management, metadata injection, deduplication - all the messy stuff. React bindings are already done and working.

But I need people who actually use these frameworks day-to-day to validate and ship the other adapters:

- Svelte 5 - @/arkosjs/svelte-websockets

- Solid - @/arkosjs/solid-websockets

- Vue 3 - @/arkosjs/vue-websockets

- Angular - @/arkosjs/angular-websockets

The architecture is simple: framework packages are thin adapters that wrap the core client in each framework's reactivity primitives (stores, signals, refs, observables). All the business logic lives in one place.

The target API is consistent across frameworks:

const chat = useGateway("/chat");

chat.on("message", handler); // auto-cleanup on unmount

chat.status; // reactive connection status

chat.user; // reactive authenticated user

const send = chat.useEmit("send_message");

send.emit(data);

send.emit(data, { ack: true }); // with retry/timeout

send.loading; // reactive

send.error; // reactive

The code is already written - I generated reference implementations for all four frameworks (you can see them in the issue below). It just hasn't been tested by someone who actually works with these frameworks. I don't want to ship something that feels wrong to Svelte/Solid/Vue/Angular devs.

What I'm looking for:

- Someone who knows the framework well enough to say "this feels idiomatic" or "here's what you should change"

- Willing to pull the branch, drop it into a minimal app, and verify connect -> emit -> receive works end to end

- Check that cleanup works (no memory leaks), reactivity updates correctly, re-subscription on namespace change works

What you get:

- Contributor credit in the repo

- Influence over how your framework's integration works

- My eternal gratitude

The milestone and all the reference code is here:

Even if you can just code-review the Svelte/Solid/Vue/Angular snippets and point out what's wrong, that's already helpful. Drop a comment or open a PR.

I'm learning SolidJS and ran into a TypeScript typing issue.

In React, this pattern works perfectly and TypeScript understands that billingQuery.data is defined inside the conditional:

{billingQuery.isSuccess && billingQuery.data && (
  <BillingCard billing={billingQuery.data} />
)}

But in SolidJS, when I try the equivalent with <Switch> and <Match>:

tsx

<Switch>
  <Match when={billingQuery.isSuccess && billingQuery.data}>
    <BillingCard billing={billing.data} />
  </Match>
</Switch>

TypeScript throws an error saying billingQuery.data might be undefined or null, even though the when condition logically guarantees it's defined.

I've found workarounds (non-null assertions: <BillingCard billing={billing.data!} />), but I'm wondering:

1. Is there a more idiomatic SolidJS way to handle this pattern?

2. Am I thinking about this wrong coming from React?

Thanks for any insights!