Destack v3 - the road to simplicity

[LiveDuo]

Around a year ago I started working on https://github.com/LiveDuo/destack/issues/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 https://github.com/LiveDuo/destack/issues/55 https://github.com/LiveDuo/destack/issues/94 https://github.com/LiveDuo/destack/issues/1
• Easier to rendered dynamic content (for blogs) https://github.com/LiveDuo/destack/issues/49 https://github.com/LiveDuo/destack/issues/8
• Allows to bring back the online editor https://github.com/LiveDuo/destack/issues/102 https://github.com/LiveDuo/destack/issues/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.