Generated .props.json in react-sdk added huge amount of unused data to
app bundle.
Here I loaded only what's used, validated generated data and covered
meta with strict types.
As you can see this heavily reduced app size
du -ck public/build
2800
2336
Here "include" often have list of extensions and forgotten .tsx so such
modules are left unchecked. Replaced with just "src" which consider all
typescript extensions.
Ideally stop using tsc to build artifacts, switch to esbuild and remove
complex configuration from all tsconfig.json.
Eslint always had issues finding unused variables. And it's usually
required two more plugins beside builtin functionality to handle this
case.
Typescript has this builtin and handles all cases out of the box. Also
it works faster and more responsive in ide than eslint.
Ref https://github.com/webstudio-is/webstudio-designer/issues/400
- added superscript
- added subscript
- added clear formatting, used same trick as with span
- refactored interop to cover more options with less code
- convert newlines to linebreaks instead of paragraphs when convert
instances to lexical tree
Ref https://github.com/webstudio-is/webstudio-designer/issues/400
- added span component to sdk
- added span support to text editor toolbar
Lexical has a great utility $patchStyleText which does exaactly what we
need, split selection into stylable element. Though there is a catch. It
requires to apply some styles. We do styling lazily and with clases so
it doesn't fit to trigger split. To workaroud it I instead patch with
css custom property which does not affect styling and considered a
trigger for lexical.
<img width="248" alt="image"
src="https://user-images.githubusercontent.com/5635476/201028529-0e5ec32e-a00a-43b0-899c-671f0edcad5b.png">
isNew and createInstance flags makes state management more complex.
Instead tree of instances updates should be idempotent.
This will let us do more straightforward mapping from lexical nodes
to designer tree.