nanostores VS xstate

[1] Nano Stores GitHub. https://github.com/nanostores/nanostores

I build a lot of micro sites, but I still use frameworks — like Deno (node alternative), Hono (for APIs), and Alpine.js (for tiny lightweight sites).

you don't have to though!

if you want to do more pure vanilla, understanding signals is really useful — this basically powers svelte's runs and react's hooks and whatever.

I love nanostores, a 286 byte (!) state manager that lets you build highly reactive pages w/o the weight: https://github.com/nanostores/nanostores

flexible tools like tinybase (https://github.com/tinyplex/tinybase) and unstorage (https://github.com/unjs/unstorage) are also super useful

tools like this lets you build highly reactive, engaging sites that load for under 50-100kb

use a shared state manager like nanostores

I retrieved access to files the directory of words using the Astro.glob() function super easily (too bad I couldn't talk about how powerful this function is; how glad I am it existed out-the-box in Astro and how much ease it brought into the flow of getting this search engine up and running) and plugged the returned array of word objects into a $dictionary state (maybe I should call this a store) powered by nanostore (another beautiful stuff right there)

In its docs, Astro recommends nanostores, but I’ve used effector in the past. And LOVED IT. So I’ve used it for this project as well.

Nanostores explanation

vidstack is very light on technical details but starts with a concise intro and a screenshot, as well as relevant links: https://github.com/vidstack/player

payload is well-structured in general: https://github.com/payloadcms/payload

nanostores starts out with an intro and telling code examples, followed by lots of technical details: https://github.com/nanostores/nanostores

Nanostores and Reatom are also great, fast atomic libs

Astro handles multi-framework components (React, Vue, etc) and they recommend using the nanostores library for shared state.

Glad to see statecharts still getting attention!

I created XState, a JS/TS library for authoring, executing, and visualizing state machines/statecharts: https://github.com/statelyai/xstate

I've been working on it for 10+ years. The main thing I've learned is that statecharts are most valuable when they're treated as executable behavior, not just documentation.

That doesn't mean you need to use them everywhere or model everything with them. They're most useful when you have behavior where the answer to "what happens next?" depends on both the current state & the event. A statechart can act as an oracle for questions like: "Given I'm in this state, when this event happens, what is the next state, and what effects should run?"

I'm close to releasing an alpha of the next major version of XState, focused on better ergonomics, type safety, and composability, as well as a new visualizer/editor.

There's also an open-source basic statechart visualizer here: https://sketch.stately.ai

For the formal/spec side, SCXML is worth reading: https://www.w3.org/TR/scxml

Also worth reading the original paper by David Harel: https://www.weizmann.ac.il/math/harel/sites/math.harel/files...

Think Xstate[0] machines are a little more intuitive than the conditional value structuring displayed here in the examplen, but it is an interesting idea indeed.

[0]: https://github.com/statelyai/xstate?tab=readme-ov-file#super...

If you want to learn more about the ideas behind XState, please check the official documentation

Child states! Literally what I'm working on. If the application is active it needs to have a window opened and attached. I can easily use `if (isActive)` but things get very complicated when I have to have logic for `if (windowAttached === true)`. Xstate (https://github.com/statelyai/xstate) is very verbose with a lot of boilerplate. I hope this approach is worth it is the application becomes more and more complicated.

  states: {

For now, the project is published under xstate-ngx. However, we're planning to move it into the official XState monorepo once discussions are finalized and your feedback has been implemented. You can track the progress and discussions in the related PR.

XState is a powerful library with comprehensive documentation. Keeping the documentation handy while building your next app with XState will be invaluable.