Find a stable and convenient way to generate draggable element keys

[Inwerpsel]

My initial idea was to use the component name, which works, but only fully in the dev build. The algorithm is currently adapted to just barely work on the prod build, but the keys are not stable when the source code changes (hence the bug label).

2 options:

• Make the component name work somehow for the prod build (either by suggesting build config to not shorten these names, or by extracting the name at compile time and keeping names short)
• Use another way to get a unique and stable key (but ideally not require it on every component)

https://github.com/Inwerpsel/use-theme-editor/blob/23bc2eaf07c4ec44ff3b1d2a5361a61e8c95bcea/src/components/movable/DispatchedElement.js#L10-L29

Simply setting up config to preserve component names if they are inside of an Area element seems the best way. The "lost" minification is made up for by the fact that otherwise a string would have to be passed anyway with similar contents.

[Inwerpsel]

The current elements now have stable identifiers, though not yet in the most convenient way.

Rather than preserving the function name during compilation, I added a string to the function object with this name. This was just done manually in all instances, but could be changed to a compilation step with the same or similar result. Alternatively it could stay a separate string to avoid name changes invalidating the position or need to have a migration.

For inline elements, I found you can always pass and read the id attribute, even on Fragments.