Replace Grapes with Craft.js

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

https://user-images.githubusercontent.com/370612/208251748-492a68fd-4c0d-4ce9-ae2a-619e4fb1a99b.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

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

Trying to run this locally- I get error when trying to run or build locally - Are the files here sufficient for testing the module locally ? Output of yarn dev-

 yarn start
yarn run v1.22.19
$ npm run start:next

> destack-workspace@1.0.0 start:next
> cd dev/nextjs-project && npm start

> next-destack-example@0.1.0 start
> next start

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
Error: Could not find a production build in the '/home/bhanu/web/pg_aexy/@app/destack/dev/nextjs-project/.next' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id
    at Server.readBuildId (/home/bhanu/web/pg_aexy/@app/destack/dev/nextjs-project/node_modules/next/dist/next-server/server/next-server.js:151:355)
    at new Server (/home/bhanu/web/pg_aexy/@app/destack/dev/nextjs-project/node_modules/next/dist/next-server/server/next-server.js:3:120)
    at NextServer.createServer (/home/bhanu/web/pg_aexy/@app/destack/dev/nextjs-project/node_modules/next/dist/server/next.js:1:2935)
    at async /home/bhanu/web/pg_aexy/@app/destack/dev/nextjs-project/node_modules/next/dist/server/next.js:1:3360
npm ERR! Lifecycle script `start` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: next-destack-example@0.1.0 
npm ERR!   at location: /home/bhanu/web/pg_aexy/@app/destack/dev/nextjs-project 
npm ERR! Lifecycle script `start:next` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: destack-workspace@1.0.0 
npm ERR!   at location: /home/bhanu/web/pg_aexy/@app/destack 
error Command failed with exit code 1.

Output of yarn build -


yarn run v1.22.19
$ npm run build:next

> destack-workspace@1.0.0 build:next
> cd lib/destack && npm run build && cd ../../dev/nextjs-project && npm run build

> destack@1.0.3 build
> rollup -c

src/index.tsx → build/browser...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/index.tsx (5:9)
3: import RenderFromEditor from './editor/FrameFromEditor'
4: 
5: import { ThemeProvider } from './store'
            ^
6: 
7: import './styles/app.css'
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/home/bhanu/web/pg_aexy/@app/destack/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Module.error (/home/bhanu/web/pg_aexy/@app/destack/node_modules/rollup/dist/shared/rollup.js:12560:16)
    at Module.tryParse (/home/bhanu/web/pg_aexy/@app/destack/node_modules/rollup/dist/shared/rollup.js:12937:25)
    at Module.setSource (/home/bhanu/web/pg_aexy/@app/destack/node_modules/rollup/dist/shared/rollup.js:12842:24)
    at ModuleLoader.addModuleSource (/home/bhanu/web/pg_aexy/@app/destack/node_modules/rollup/dist/shared/rollup.js:22090:20)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

npm ERR! Lifecycle script `build` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: destack@1.0.3 
npm ERR!   at location: /home/bhanu/web/pg_aexy/@app/destack/lib/destack 
npm ERR! Lifecycle script `build:next` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: destack-workspace@1.0.0 
npm ERR!   at location: /home/bhanu/web/pg_aexy/@app/destack 
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

LiveDuo / destack