[exploratory] StackBlitz PoC

Very interesting...

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

@cosmicdreams Yup, we are exploring StackBlitz as a way for people to create their own JS components within XB

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.

effulgentsia → closed merge request !324

effulgentsia → reopened merge request !324

VERY COOL! 😄

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

Updating screenshot

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 🌱 [META] Support component types other than SDC Needs work is done.

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

Don't mind me... just updating the screenshot that has Svelte and Preact specific colors in the text...

@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.

Pushed commit that lists astro components in assets menu (#2) from comment #23.

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.
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 needing to 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?

UX improvements from #23 is almost all addressed. One issue is the vm.preview.setUrl doesn't get set properly on the initial open. Will look into more tomorrow

@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.

i haven't dug into this yet but the aggregation of js/css files currently has to be turned off to get our astro components to show up within the XB preview. This can be turned off at /admin/config/development/performance

effulgentsia → closed merge request !324

effulgentsia → reopened merge request !324

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.

Will try to look at the dragging issue tom

Do drupal issues not allow video tags? Wasn't able to attach the demo to the issue summary but see #39 📌 [exploratory] StackBlitz PoC Active

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 ✨ [exploratory] PoC of Preact+Tailwind components editable via CodeMirror or Monaco Active .

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