[exploratory] PoC of Astro island components editable via StackBlitz

Very interesting...

Is this an effort to make it easier to create components? https://developer.stackblitz.com/guides/user-guide/what-is-stackblitz

All I did in #9 was rebased the MR against 0.x. I hoped that would add the Tugboat link under the issue fork, but it hasn't yet.

VERY COOL! 😄

I think the issue summary would benefit tremendously from an update to clarify where what the purpose of this is 🤓

For this POC, we will create an SDC wrapper so our Astro components are registered as Drupal SDCs.

I added a sentence after this explaining that we'll remove these SDC wrappers after #3454519: [META] Support component types other than SDC, block, and code components is done.

Added an "In Summary" bulleted list to the Overview.

@hooroomoo, @xinran, and I met with @lauriii, and here's some UX improvement suggestions based on his feedback:

1. Instead of the Open StackBlitz button, create the StackBlitz iframe when the user clicks on the "Assets" button in XB's left sidebar. However, create this as a hidden iframe. This way it can boot up in the background without it appearing slow to the user.
2. On XB's "Assets" tab, show PreactCounter and SvelteCounter (or whatever their name is in their SDC YAML file).
3. When one of those is clicked, make the StackBlitz iframe visible and tell it to open the corresponding component's source code file in the editor.
4. Within the StackBlitz project, in addition to the index.astro file that's there, add a .astro file for each component containing a usage of that component in order to preview it. For example, pages/preview/PreactCounter.astro and pages/preview/SvelteCounter.astro.
5. For #3 above, it addition to navigating StackBlitz's code editor to the component's source file, also navigate its preview window to the component's preview page.

It would be nice to remove the step where the user has to type npm run build into the terminal. In fact, if we remove this step then perhaps we could even set terminalHeight to 0 or a small number? The user would still need to be able to run npm update if they want to update their dependencies or npm install ... if they want to add additional libraries, but they wouldn't need to do this every time they use the code editor, so ideally we could start the StackBlitz iframe with the terminal as out-of-the-way as possible as long as there's a way for the user to show/expand it when they do want to use it.

Ok, so how can we remove the user needing to type npm run build? Well, what if when the user clicks the "Get Files" button, instead of getting the dist/_astro/* files from the StackBlitz iframe, we instead spin up a separate WebContainer, transfer the project/source files from the StackBlitz instance to the WebContainer instance, then tell the WebContainer to run the build step, and then get the dist/_astro/* files from there?

@bnjmnm mentioned this Astro work in passing at DrupalCon (I was also going on about Astro,) but I wasn't sure exactly where it was bubbling up in XB work until I came across this issue. Super interesting stuff - will be following.

Have you seen Astro's experimental container API? It provides a way to render Astro components in isolation. Based on peeking at the MR I don't think it would really be needed here, but maybe it will spark some other ideas.

There is an Astro in PHP example out there, but I believe it requires node to be running on the same server. Of course, this MR provides access to web containers, so technically that gives us node. I've always wondered if some variation on this would make server rendering Astro components in Drupal possible...

Thanks for #27! Retitling to surface the Astro part in case others are looking for that as well.

npm run build currently encounters 5 errors:

Found 5 errors in 4 files.

Errors  Files
     1  src/components/sidebar/AssetItem.tsx:12
     1  src/components/sidebar/AssetsMenu.tsx:28
     2  src/components/sidebar/PrimaryMenu.tsx:18
     1  src/components/stackblitz/StackBlitzController.tsx:54

It would be great to fix those so that this can be tested in Tugboat. I'm guessing these errors weren't found during development because perhaps they're not triggered during npm run drupaldev.

The work that's been done here, and the video in the issue summary that shows it off, is really great!

We may come back to this at some point, but for now, we're pivoting to #3483267: [exploratory] PoC of Preact+Tailwind components editable via CodeMirror.

#3483267: [exploratory] PoC of Preact+Tailwind components editable via CodeMirror is looking quite promising, and works without relying on any commercial service, so closing this as outdated.