[core] Add canvas mode that doesn't rely on vite

[Janpot]

First batch of changes that renders the canvas in the same react tree as the editor instead of loading a page in an iframe. Currently behind a flag EXPERIMENTAL_INLINE_CANVAS because more work is required to make it the main rendering mode. But aiming to already merge this as to avoid accumulating many big architectural changes in one PR.

Now the editor is hosted under the same path as the app:

• /{basepath}/app/pages/... => application
• /{basepath}/editor/pages/... => editor (new)

things that are now fixed

• Both editor and app are now built in the same vite config, meaning we won't get clashing deps optimization anymore
• The canvas is rendered directly in the react tree of the editor, so now pages load immediately in the editor
• typescript works when editor is in dev mode (and it's always in dev mode now during development)

add to the .env file to play with this:

# .env
EXPERIMENTAL_INLINE_CANVAS=1

To do (in follow up):

• fix monaco
• fix expression editor not seeing scope
• change links to new editor url Reroute "open in editor" link in app preview #3207 (comment)
• make tests green proof: [core] Move Monaco setup outside of the library #3206
  • backand basis
    • function editor reload Fix project loading several times #3188
  • code components
    • can create new component Fix test for code components under new editor runtime #3193
  • duplication Correct test urls for canvas tests #3192
  • editor
    • deletelast Correct test urls for canvas tests #3192
    • index
      • code editor autocomplete Fix vm shim in the editor #3189
  • rest basic
    • rest editor basic Fix vm shim in the editor #3189
  • undo redo
    • basic
      • test basic undo redo Fix undo/redo in new canvas implementation #3191
• custom server => remove separate editor command and point users to embedded editor Reroute "open in editor" link in app preview #3207 (comment)
• avoid re-optimizing deps in every test Create predictably named test directories #3194
• remove legacy and simplify

[apedroferreira]

I'm trying this now and it seems like when running pnpm dev the root page (e.g.: http://localhost:3000) doesn't default to the editor? Not sure if that's intentional.

[Janpot]

When I do

pnpm dev

and then

pnpm toolpad dev test/integration/backend-basic/fixture/toolpad --dev

it opens http://localhost:3000/prod/editor/ for me

I have

# .env
EXPERIMENTAL_INLINE_CANVAS=1

[Janpot]

One problem I'm experiencing in this mode is with

pnpm toolpad dev test/visual/components/fixture/toolpad --dev

and then opening http://localhost:3000/prod/editor/app/pages/components
Any component I drag on the page locks the app up completely

[apedroferreira]

When I do

pnpm dev

and then

pnpm toolpad dev test/integration/backend-basic/fixture/toolpad --dev

it opens http://localhost:3000/prod/editor/ for me

I have

# .env
EXPERIMENTAL_INLINE_CANVAS=1

Weird, it's working fine for me when I tried now. Maybe something was wrong on my local environment yesterday...

One problem I'm experiencing in this mode is with

pnpm toolpad dev test/visual/components/fixture/toolpad --dev

and then opening http://localhost:3000/prod/editor/app/pages/components Any component I drag on the page locks the app up completely

Just tried it and it seems to work fine for me?

[Janpot]

Just tried it and it seems to work fine for me?

Make sure to have EXPERIMENTAL_INLINE_CANVAS=1

[apedroferreira]

Just tried it and it seems to work fine for me?

Make sure to have EXPERIMENTAL_INLINE_CANVAS=1

Ah I had forgotten to set the environment variable in the test fixture. Can confirm the issue!