felangel / bloc.js

A predictable state management library that helps implement the BLoC design pattern in JavaScript

Hi there 👋

I'm a software engineer at Shorebird in Chicago, IL 🌆

• 🧱 I’m currently working on BrickHub
• 🔭 I maintain the bloc library
• ☕ I’m learning how to make latte art
• 🧑‍💻 I’m looking to collaborate on open source projects
• 💬 Ask me about Flutter and Dart.
• 😄 Pronouns: he/him/his
• ⚡ Fun fact: I have a pet bunny named Coco 🐰

Open Source Projects

Github Stats

bloc.js's Issues

BLoCs for the global state

State not changing

Hi

Please can you assist me with an issue I'm still facing. I am still new to your Flutter_bloc package. I have adapted your Todo app tut to a simple home page that uses a floating action button to dynamically add a custom light button to Home. I have removed all the other features such as the bottom tab and filters as they are not needed. The problem I'm facing is the state never actually updates from the BlocBuilder on the home screen which in turn never allows the ListView builder to build the buttons. This is in spite of the fact that I've provided the Bloc very high up on the Widget tree.

I Have attached my project.
cntl_app.zip

I will really appreciate your feedback as I've
been trying to figure this out for quite some time

Thanks!

bloc.js cubit

Hi Felix,

Just wondering if you are planning to add Cubit to the .js package! It's my preferred way of using the Bloc package (coming from Flutter) and makes things a lot more concise.

Just an inquiry - thanks!

package.json for react-bloc package has the wrong typings path

package.json for react-bloc package has the wrong typings path

https://github.com/felangel/bloc.js/blob/master/packages/react-bloc/package.json Ln 16
"typings": "dist/types/react-bloc.d.ts", should be "typings": "dist/types/lib/react-bloc.d.ts",

BlocProvider API Pull Request

Is your feature request related to a problem? Please describe.
BlocProvider API for react similar to the one provided in flutter_bloc

Describe the solution you'd like
I have a WIP on my branch. Would love to receive feedback, and if it can be merged in bloc.js

Describe alternatives you've considered
Additional wrapper component BlocConsumer to use BlocContext

Additional context
Pull Request: [https://github.com//pull/29]

[Question] How to proper test bloc.js

As a continuation of previous issue, There some async blocs.

What are the possible ways to write verification tests that with the given initial state and input event I will get known number of output states, ended with some specific one?

Update API to modern Dart implementation

Is your feature request related to a problem? Please describe.
Bringing the modern v8.x Bloc Dart implementation to Bloc.js, specifically the bloc package. A separate issue and pull request can be made for react-bloc updates.

Describe the solution you'd like
Most of the desired API already exists as a WIP in a separate repository that I've created. I'd like to incrementally merge those API changes, as well as build related changes that may need to happen in the least invasive way possible. Certain dev dependencies may need to be updated such as linting, bundling, and transpiling dependencies, ex: tslint has been deprecated since 2019, which can be replaced with eslint.

Describe alternatives you've considered
none

Additional context
Pull request: #107

Proof of Concept: https://codesandbox.io/p/github/jacobtipp/bloc-state/beta?file=%2Fexamples%2Fbloc-todos%2Fsrc%2Fmain.tsx

Moving builder and condition into a "use" hook (maybe useBlocBuilder) for react-bloc

Hi Felix!

Thanks for your port of the bloc library to React! I have a feature suggestion due to the limitations I'm facing with <BlocBuilder ... />

Is your feature request related to a problem? Please describe.
<BlocBuilder .../> is great, but it has some limitations:

• every component that needs access to the bloc <BlocBuilder bloc={<how_do_i_easily_get_this_bloc>} ... /> in the tree must be prop-drilled down, OR passed via useContext. The problem with useContext is that it doesn't update when bloc state changes (not sure why it behaves like this). For example:

 const authBloc = useContext(AuthBlocContext);
 console.log(authBloc.state)

 // somewhere else in app
 authBloc.add(AuthEvent.logIn)

this does not trigger the console.log to show the new state. However, if I use a <BlocBuilder bloc={<bloc_from_useContext>}/> component and pass the authBloc in from the useContext, I get the most updated state. But using authBloc.state directly from the context won't give me the newest state. This has implications, for example:

• not easy to access the bloc state outside of the render body. For example, it is not easy to access the state in a useEffect hook (in Flutter, we can just use context to access the most updated version of the Bloc in initState)
• Finally, another drawback of <BlocBuilder .../> is that we are relying on a renderProp to use the state which is not a huge problem, but it is undesirable

Describe the solution you'd like
If we had a useBlocBuilder hook instead of a <BlocBuilder ... /> component like so:

const [bloc, state]= useBlocBuilder(AuthBloc, {
  condition: (previous, current) => { 
    // some logic here
  }
})

useEffect(() => {
  // easily access bloc state here with `state`
}, []}

return (
  <div>{
    // do stuff with state 
    // call events with bloc.add
  }</div>
)

On top of this, we could also have a useBlocListener hook

Not only is this much more react-ish, it's more concise and easier to use (in my opinion). AND, it still preserves the "spirit" of bloc library by using BlocBuilders, having conditions, etc.

What's the roadmap?

Hey @felangel ! First of all I wanna say a big thanks for the bloc implementation for Dart. I've been doing some of my apps in flutter lately and man your BloC is amazing to work with.

I am currently working on creating a state machine for machine for another one of my projects and wondered if it makes sense to use BloC for (plain) typescript as well, this is why I stumbled upon this project. It seems though that BloC for typescript is not a thing that has people convinced of it's value yet.

So my questions are:

1. Given that this bloc implementation is already pretty of rigid (from my humble understanding at least), are there plans for major versions right now?
2. And lastly, imagining that dart bloc takes most of your time in terms of maintaining and updating, what could we do to help? :)

Again big thanks for this amazing package.

SSR state hydration

Thanks for doing a Javascript fork! Had a crack at it myself (https://github.com/tim-smart/bloc-js) but would be great to switch to a project that has a bigger community behind it (and I don't want to maintain it lol).

It would be awesome if you could support state hydration with this library, as it would help with creating apps that make use of Server-Side-Rendering. This is a non-issue with Flutter obviously, which will probably mean a different API to the Dart equivalent.

Here is a Next.js example https://github.com/tim-smart/nextjs-bloc-js-example

Let me know what you think!

[Question] Replace AsyncIterableIterator with rxjs-based approach

Thanks for your package, trying to adopt BLoC idea for the angular and find your implementation very helpful!
I have a question/proposal

1. Have you considered making mapEventToStream not async-based but rxjs aka Observable-based?
   Sometimes there are situations when you would like to cancel some state changes and switch to the new one (eg what switchMap doing)

Also an Angular has async pipe for subscribing and fetching the data from stream so state property in BLoC can be also /or published as stateSubject.asObservable() instead of state subject.value

2. https://github.com/felangel/bloc.js/blob/master/packages/bloc/lib/src/bloc.ts#L82 lacks unsubscribe, not sure about memory leaks for that.

3. What are the possibility to raise a new event when it comes outside of the component and BLoC? Eg I have a button with AsOfDate on top of my screen and have a list of items, each of them has its own bloc. Basically I would like to handle button click in TopComponent, send AsOfDateClickedEvent to TopComponentBloc and immediately catch this event in ListItemsBloc to fetch the data from server and pass it via Observable to the ListItemsComponent.
   Blocs should not know about each other, they should operate via some bus I think.

Package status

Hi @felangel , do I understand correctly that this repository isn't supported?
Perhaps you can recommend something similar.
I'm trying react native after flutter and would like to use something similar to a BLoC.