App shell

[psrpinto]

This PR sets up the "scaffolding" for the reimagined extension, as discussed between myself and @akirk. The extension is now structured so that there's an App (where our code lives), with Playground running next to it. This PR only sets up the basic foundations, it does not do anything useful yet.

Some considerations:

• I went with React as it felt appropriate since:
  • We're building a single page app that exists entirely in the frontend
  • React is already extensively used in the WordPress ecosystem (e.g. Block Editor)
• The navigation is driven by react-router, which in essence maps URLs to components
  • react-router is widely used in React projects
• The app remembers what screen is open, so when it reloads it goes to the correct screen.

Screen captures

Note that Playground only re-renders when the session changes, which is what we want. That's not visible in this recording because there are currently no other pages to transition to, but I've tested this with a dummy page and can confirm Playground does not re-render when transitioning between pages in the same session.

Screen.Recording.2024-08-30.at.19.21.20.mov

The data in local storage looks like this:

[akirk]

Looks very promising already! Some observations: we reload the playground iframe as a whole, I think'd be better if we keep the iframe around in the wp-admin tab and the preview iframe is one that links to the right localhost/scope:0.1234 URL for the playground. That should make it easier to avoid reloading of playground. (I know you mentioned this in your description but in my local testing I saw playground load several times._ Also we should already load playground in the background as the app starts so that in the optimum case the user never sees the playground loading screen.

Also we should show the preview section below the app section if the sidebar is not wide enough.

[psrpinto]

we should show the preview section below the app section if the sidebar is not wide enough.

Opened #21 to track this.

we should already load playground in the background as the app starts so that in the optimum case the user never sees the playground loading screen.

Opened #22.

keep the iframe around in the wp-admin tab and the preview iframe is one that links to the right localhost/scope:0.1234 URL for the playground.

Agree, I will do so in the next PR.