search

jacobtipp / bloc-state

Modern FlutterBloc ecosystem for TypeScript/React
https://jacobtipp.github.io/bloc-state/
MIT License
13 stars 0 forks source link

BlocBuilder equivalent component for react-bloc #75

Closed fakalit closed 9 months ago

fakalit commented 9 months ago

First of all, let me share my thanks for attempting to undertake a huge project like this. We are in a situation where we need to port a huge flutter application that makes very extensive use of most of the unported packages and newer features of the bloc ecosystem to js and react, and bloc-state has been a life saver.

One question (as the first one of potential many others), I would like to know if anything similar to the BlocBuilder pattern within react-bloc package is available or in the works. It seems like while listening to a bloc to handle side-effects are possible, there is no component that enables rebuilding according to changing state. Is this by design?

Best

jacobtipp commented 9 months ago

Hi there! @fakalit 👋

You are correct, there is no BlocBuilder or BlocConsumer components atm. My main focus for this project started with porting the latest Bloc/Cubit v8.0.0 implementations from Dart so that event transformers and concurrency could be used.

As far as react-bloc, my main focus was to provide an API that is focused on modern React features such as hooks, error boundaries, and suspense. BlocProvider/MultiBlocProvider, RepositoryProvider/MultiRepositoryProvider, and BlocListener are the only components that I've created as of now, while hooks can be used to accomplish most rendering conditions without a BlocBuilder.

If this is a feature you wish to see, I'll be sure to add BlocBuilder and BlocConsumer ASAP.

Just to note, this project is experimental, there are some hurdles that I'm encountering while working with Bloc and React. Working with observable streams in react is a bit challenging, Context in Flutter is not the same as in react so features like context.read(), context.watch(), context.select() are not available, but hooks have allowed me to overcome most of these differences.

While BlocProvider works, and is very similar to the FlutterBloc implementation, it is not compatible with SSR (server side rendering) and some changes will need to be made to accommodate for it.

If you have any other questions, encounter any bugs, or need assistance, be sure to let me know! I'll be adding a static documentation site soon.

jacobtipp commented 9 months ago

@fakalit I've added BlocBuilder in the latest release of @jacobtipp/react-bloc@3.4.0 https://github.com/jacobtipp/bloc-state/pull/77

Here's an example ◀️

jacobtipp commented 9 months ago

@fakalit I've added BlocConsumer in the latest release of @jacobtipp/react-bloc@3.5.0 https://github.com/jacobtipp/bloc-state/pull/78

The example above has been updated to showcase the BlocConsumer component.

fakalit commented 9 months ago

Oh this was much quicker than I expected :) many thanks for providing both components with such promptness.

I'm aware of the experimental nature of the project, but also overall code quality and attention to detail (the use of modern react features included) for a project at this stage of its life is so impressive, that I felt confident in using it as a dependency. If this project didn't exist, our only other alternative was to build a similar project internally considering how extensively the concurrency and hydration packages were used in our original codebase. And that surely wasn't going to be any less experimental.

We have an additional dependency injection framework in use, so challanges around BlocProvider has no urgency, but I can't appreciate the newly added BlocBuilder and BlocConsumer components. I would also be delighted to test the bloc-base as a whole against our use cases, and help with bug fixes etc where possible.

jacobtipp commented 9 months ago

Oh this was much quicker than I expected :) many thanks for providing both components with such promptness.

I'm aware of the experimental nature of the project, but also overall code quality and attention to detail (the use of modern react features included) for a project at this stage of its life is so impressive, that I felt confident in using it as a dependency. If this project didn't exist, our only other alternative was to build a similar project internally considering how extensively the concurrency and hydration packages were used in our original codebase. And that surely wasn't going to be any less experimental.

We have an additional dependency injection framework in use, so challanges around BlocProvider has no urgency, but I can't appreciate the newly added BlocBuilder and BlocConsumer components. I would also be delighted to test the bloc-base as a whole against our use cases, and help with bug fixes etc where possible.

I know mixins aren't as friendly in Typescript as they are in flutter but the Hydration/Replay packages should work the same as they do in flutter and can be composed together.

Feel free to post any bugs or issues if you encounter them! I'll be closing this issue now.

jacobtipp commented 9 months ago

@fakalit I just realized you mentioned that you don't use BlocProvider. As of right now, all hooks/components in @jacobtipp/react-bloc depend on the context provided from BlocProvider, but I can add an update that allows you to provide your own instance of a Bloc to use these hooks/components.

If that's something you think you'll need feel free to let me know.

fakalit commented 9 months ago

Well, we can always use BlocProvider in the cases where we're using the newly-released BlocBuilder component, but of course more options would be always be appreciated. Please feel free to go ahead with your existing roadmap with prioritising this feature as you see fit.