Frame - Changes in props are "lost"

[ankri]

Describe the bug When we change the props of <Frame /> e.g. data, the internal data will not update. I just wanted to ask if this was intentional. Because there are alternatives: One way would be to re-render the <Frame /> by changing its key or by updating it via a Helper Component which calls actions.deserialize.

I wanted to implement a Live Preview Feature. tl;dr - I've got a working solution (codesandbox) using a dedicated component which calls actions.deserialize.

To Reproduce But my first attempt was something like this (codesandbox). Setting data from outside of the <Editor /> and passing it to <Frame />.

There's a useEffect missing to listen for changes in data to update the ref. https://github.com/prevwong/craft.js/blob/develop/packages/core/src/render/Frame.tsx#L27-L30

But I could understand if this was a design decision to only allow updating the data via actions.deserialize.

Other question: I would like to write a guide for the official documentation on how to implement the Live Preview Feature. Should I open a PR?

Your environment

Software	Version(s)
craft.js	beta.13

[chenchenalex]

same issue, it looks like frame will not updates the UI if data prop changed

[prevwong]

The original intention was to have data and children to specify the initial editor state. I suppose we could have these props be reactive and trigger deserialize when they're updated.

I would like to write a guide for the official documentation on how to implement the Live Preview Feature. Should I open a PR?

Sure, go for it

[ghost]

@prevwong do you have plan to trigger deserialize under the hood when props changes? I mean in future releases?