Bloom is an experimental approach to managing front-end state using Web Components and Asynchronous Generators. Under the hood, it uses bloom-router a

Search code, repositories, users, issues, pull requests...

submited by
Style Pass
2024-12-23 14:00:07

Bloom is an experimental approach to managing front-end state using Web Components and Asynchronous Generators. Under the hood, it uses bloom-router and webjsx.

If you want to dive right into code, here's an HN Homepage example on StackBlitz. This article might be interesting: https://webjsx.org/bloom/

A component in Bloom is defined with the component function, which takes three parameters: the component's name, an asynchronous generator function (or a regular function), and an optional default properties object. The generator function is where the rendering logic is implemented, yielding views dynamically as the component's state changes. The optional properties object can be used to initialize default settings for the component.

In this example, the while (true) loop enables continuous rendering, with the yield keyword producing new views whenever the state changes. The component.render() method is called to trigger these updates, ensuring that the UI reflects the latest state (in this case, the current count).

In cases where a component’s output does not need to update dynamically, you can return a static JSX view right away. This is ideal for simpler components where the content is either fixed or determined only once. For example:

Leave a Comment