The Columns component doesn't update its state correctly with the Gen2 Builder.IO SDK. This happens on an empty, brand-new NextJS app, using the latest version of the @builder.io/react-sdk package.
To Reproduce
Steps to reproduce the behavior:
Create a new app with create-next-app --typescript, use the default settings.
Integrate the Gen2 SDK: npm install @builder.io/react-sdk and set up a [[page]] route that gets data from your Builder.IO space. For generateStaticParams get a collection of Builder pages and register their URLs. For the page route, get a single page and render it with the <Content /> component, provided by Builder.IO.
Set http://localhost:3000 as the preview URL for the Page model of the project.
Create a page that uses the Columns component
Try to resize the columns by dragging the provided slider.
Expected behavior
When the "columns slider" is dragged, the size of the columns needs to dynamically resize as the user is dragging.
In reality, the slider does get dragged, and the state of the Builder.IO object does get updated, but the preview on the screen does not. The "Reload preview" button has to manually be pressed in order for the preview to update. I am attaching a video demonstrating both the bugged behavior, in the commit tagged bug-present, as well as the fixed behavior in the commit tagged bug-fixed
This is actually a bug - the generated setCols function is actually never used (and ESLint says as much). The initial value of "cols" is the only value it will ever have during the component's lifetime! When Builder.io users change the size of the component's columns using the visual builder, the rendered result will not change!
In our organization (Dext) we have forked the repo and patched it so that the bug is no longer present.
It simply reverts the usage of "state" and goes back to using getter functions.
It should be noted: We are only interested in the React use-case and have not tested in any other deployment scenarios. We make no guarantees that this is production-ready.
On a personal note: This was really unexpected and took a lot of time to debug.
Thank you for filing such a detailed bug, along with the source of the error and how to solve it. We will investigate whether we can revert the commit as you suggested, and proceed once we have confirmed the solution.
Describe the bug
The
Columns
component doesn't update its state correctly with the Gen2 Builder.IO SDK. This happens on an empty, brand-newNextJS
app, using the latest version of the@builder.io/react-sdk
package.To Reproduce Steps to reproduce the behavior:
create-next-app --typescript
, use the default settings.npm install @builder.io/react-sdk
and set up a[[page]]
route that gets data from your Builder.IO space. ForgenerateStaticParams
get a collection of Builder pages and register their URLs. For the page route, get a single page and render it with the<Content />
component, provided by Builder.IO.http://localhost:3000
as the preview URL for the Page model of the project.Columns
componentThis is a repo with a commit that reproduces the problem: https://github.com/x1024/builder-bug-demo/tree/bug-present
Expected behavior When the "columns slider" is dragged, the size of the columns needs to dynamically resize as the user is dragging. In reality, the slider does get dragged, and the state of the Builder.IO object does get updated, but the preview on the screen does not. The "Reload preview" button has to manually be pressed in order for the preview to update. I am attaching a video demonstrating both the bugged behavior, in the commit tagged
bug-present
, as well as the fixed behavior in the commit taggedbug-fixed
Video
https://github.com/BuilderIO/builder/assets/113459/1087f641-937b-490c-b9a0-682132725251
Proposed solution
As far as I can tell, the issue stems from this commit: https://github.com/BuilderIO/builder/commit/31cbe84a98030f94c82697f4186c3c9cab4d7473
The commit changes a few state vlues of the
Columns
component in theuseStore
Mitosis helper function. Thecols
andgutter
values are changed - instead of getter functions, they are now values: https://github.com/BuilderIO/builder/commit/31cbe84a98030f94c82697f4186c3c9cab4d7473#diff-a964d50f7f336a25c59e6f9ad90b542e0db0cf9f5924ee3637a9a58a6d31f7d1L35In React this translates to the cols/gutter being state (via the
useState
hook) with a default value provided in the component's props:(the actual code in the npm package is minified, but that's what it resolves to)
This is actually a bug - the generated
setCols
function is actually never used (and ESLint says as much). The initial value of "cols" is the only value it will ever have during the component's lifetime! When Builder.io users change the size of the component's columns using the visual builder, the rendered result will not change!In our organization (Dext) we have forked the repo and patched it so that the bug is no longer present.
Here's the commit we ended up with: https://github.com/dext/builder-io/commit/4c3aa87098b8e8bf8eae4c2f4e23ea30e5a43b92
It simply reverts the usage of "state" and goes back to using getter functions. It should be noted: We are only interested in the React use-case and have not tested in any other deployment scenarios. We make no guarantees that this is production-ready.
On a personal note: This was really unexpected and took a lot of time to debug.