Description
Around a year ago I started working on #22 to migrate the project to the Craft.js editor. This change brought a lot of flexibility with customising the editor and was a great intermediate step towards a better version of Destack.
But it was not the endgame for this project. We could do better.
Craft.js has one major restriction, that's storing the state in JSON files. While that might be a good thing to have for many projects using Craft, storing the state in HTML files can bring many benefits that I could not ignore.
1. State in HTML files
Some of the benefits of using HTML instead of such as:
- Inspecting the created page
- Custom scripts in the HTML
- Simplifies supporting custom tailwind components How to add another component #55 Enable custom HTML markup #94 Custom components #1
- Easier to rendered dynamic content (for blogs) Can I pull data from an API? #49 A blog component(and editor)? #8
- Allows to bring back the online editor using destack as theming/theme builder for react/next site #102 How to deploy the project with editor #101
2. Minimal codebase and bundle size
The new codebase is only a fraction of the Craft.js codebase editor.tsx. That might sound counterintuitive - how can replacing a library with custom code reduce the overall codebase? One of the reasons is that the Craft.js version needed an HTML parser Child.tsx to convert the HTML components to the Craft format.
On the other hand not having Craft.js (and the html-node-parser) in the bundle can reduce the bundle size quite a bit dependencies.md. The @craftjs/core and @craftjs/layers footprint is about 65kb and the html-node-parser library is 73kb more.
This issue is created for tracking the feature and discussion.