Replace Grapes with Craft.js

[LiveDuo]

Overview

This PR replaces Grapes.js with Craft.js as briefly discussed in #22 . With this merge we expect to enabled a Destack specific editor with custom UI/UX and easier debugging for issues (due to the use of react for the editor too and typescript support).

Beta Testing

There a new starter project on destack-starter-beta for people willing to beta test the new version and Craft.js.

The New Editor

Screen.Recording.2022-11-11.at.5.19.51.PM.3.mov

Tradeoffs

Although we get a custom editor with better debugging there's a significant change in the architecture. That's because Grapes.js stores the pages in HTML form and Craft.js stores them in a custom serialised object and then renders them to HTML.

In short, there's no CSS styling for components by default and there's should be implemented from scratch. I think for now that's ok because the main focus of the editor is to use ready-made components (and just change the text, picture, links and buttons). In the tradeoff between simplicity and customisability Destack aims to be as simple first and then bring as many customisability features as possible.

As the new editor is made with React.js, is been transpiled the first time Destack is loaded in a new project. This transpilation adds around 5 seconds the first time Destack is loaded in development. There are ways to pre-transpile Destack and avoid the extra lag. I think for now is acceptable but it's something that needs to be figured out in the future.

Moving forward

• Wait a few days/weeks for people to test out the released beta version
• Fix e2e tests are not yet compatible with Craft.js (added support for Playwright)
• Pre-transpile Destack to avoid the ~5 seconds lag for new projects (enabled Tailwind JIT and more tree-shaking)