search

codesandbox / codesandbox-client

An online IDE for rapid web development
https://codesandbox.io
Other
13.08k stars 2.28k forks source link

Astro Support #5958

Open natemoo-re opened 3 years ago

natemoo-re commented 3 years ago

🌈 Feature

👋🏻 Hey, thanks for all your work on CodeSandbox—it is a great platform!

I'm a core maintainer of Astro and while it's still very early for our tool, we'd love to be able to use CodeSandbox to speed up our development cycle! Hosted issue reproductions and forkable documentation examples would be invaluable for our team.

The good news is, Astro mostly works in our template! There are a few features that would make this even better.

​ Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://hugb3-12321.sse.codesandbox.io') does not match the recipient window's origin ('https://hugb3.sse.codesandbox.io').
C @ codesandbox.io/stati…39463744f3b89f84a:1

Please let me know if there's anything you need from our end—we'd love to be able to integrate CodeSanbox into our onboarding experience and documentation as much as possible.

sarah11918 commented 3 years ago

Hope this is OK, but I'm adding one more important incompatibility to the list:

Thanks for any assistance!

CompuIves commented 3 years ago

First of all, Astro is really cool, I looked into it recently and I was very impressed with how lightweight it is. I'm looking into the questions, and I can already answer some:

Support for .astro files.

Yep, we can make this work! We need to install the VSCode extension in CodeSandbox, and it should probably work then. Syntax highlighting is something that we can definitely add. @danilowoz do you perhaps have time to look into this? It would mean that we need to regenerate the extension bundle.

Mapping .astro files to Current Module View

As I understand right now you use a container sandbox to run Astro projects, right? Right now we have "Current Module View" only for client sandboxes (sandboxes that solely run in the browser using our bundler). But what would be really interesting if we could show the possible paths in the preview navigation bar. This is something that we're thinking about (and have some designs of), but we haven't started implementation on it.

HMR doesn't seem to work. Is there something we need to update on our end?

Hmm, yes, this is weird. @lbogdan do you perhaps know what could be going wrong here?

a key function of Astro requires file names that include a special character

Valid point! Let me see if I can do something about that now... Opened a PR here: #5989!

natemoo-re commented 3 years ago

Thanks so much for the response! Excited to get the ball rolling on these. 😄

We do use a container sandbox to run Astro projects, so that limitation makes sense.

danilowoz commented 3 years ago

@natemoo-re we just merged the syntax highlight implementation! 🎉 Let me know if you find any issues there.

natemoo-re commented 3 years ago

@danilowoz Amazing, thanks so much! It's working perfectly for me.

Just curious about the implementation, can upstream changes be pulled in automatically? If not, is there a preferred way to communicate when there are upstream syntax changes? I can add an item to our release checklist to make sure to make a PR against this repo as well.

danilowoz commented 3 years ago

Awesome! So, as it still needs a manual process to update the VSCode extensions, the best way to do it is just to let us know through a GitHub issue or ping us in any channel.

lbogdan commented 3 years ago

Regarding HMR, it looks the HMR client is trying to connect to a wrong websocket URL:

image

It's probably because it assumes the devserver can be accessed on http://localhost:12321, which is not the case with CodeSandbox.