onlook-dev / onlook

The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.
https://onlook.dev
Apache License 2.0
3.75k stars 232 forks source link

[feat] Warn on pasting if out of scope #763

Open Kitenite opened 1 week ago

Kitenite commented 1 week ago

Describe the feature

When pasting, a code block can have dependencies that no longer exist outside of its scope. In this case, we should detect and warn the user if pasting the code block will cause an issue.

This can be a simple check on if the component field on the templateNode and the destination's templateNode is the same. Though this does not handle cases where the dependencies are generated inside a lambda. Example:

<div>
    {a.map((b: string) => <p>{b}</p>)}
</div>

In this case, moving p anywhere will cause a problem.

Related user convo: https://discord.com/channels/1258534787279355975/1299391079489212416/1304485766491148439