A bird.

Global State in Multi-Framework Environment


Introduction

What we wanna achieve here is to combine multiple libraries and frameworks under an umbrella of a meta framework, Astro and manage a state with XState globally distributed across the whole application in the client-side.




Prerequisites

After clonning the project from here, let's set the Node.js as version 20 via nvm and run `pnpm install` and see what happens. Then we need to run the app itself by running `pnpm dev` in the terminal. Then go hit to "http://localhost:4321" and you will see the app running.


Setting Up the Astro Project

Provide step-by-step instructions for setting up an Astro project. Include any necessary installations and configurations.


Integrating XState into the Astro App

I've preferred to create a separate folder as `states` and created a JS file like `global.js`. Within the file, we have these:



React, Vue (3) and Svelte Integration

For letting React to be used within an Astro application, we need the @astro/react plugin and other several configurations within astro.config.js file. Let's do the same for all other 2, Vue and Svelte as well.



Testing & Simulating the Application & the State

Let's now run the app and you can see how it works with the global state updated every time once you click a button within a specific island component in Astro.


Conclusion

Beyond the hype within Frontend Engieering field is sometimes ridiculously easy to resist and find better and really nice ways to achieve decoupled UI strategies. That's one of them and hope we will be going on in the next article with how to separate each component here inside their own scopes as a monorepo but with their own CI/CD pipelines and so on... For the previous article, you can go check here: MicroApps at Scale in the Age of Meta Frameworks


Additional Resources

Here are the links you can go deeper about how it can be achieved and more...