feat(devcontainers): add the ability to use GitHub Codespaces and VS Code remote containers

[andrewbrey]

For Hacktoberfest, I have been adding GitHub Codespaces / VS Code Remote Containers configuration for OSS projects to make it easier for contributors to the project to get up and running with the correct developer setup. Including the appropriate configuration for a project allows contributors to work entirely within a web browser via GH Codespaces, or inside of fully, and correctly configured containers on their own computer with VS Code Remote Containers (both of these use the same configuration, as GH Codespaces leverages the Remote Containers features under the hood).

For the melt-ui project, this configuration includes the following:

• Preinstalled Node LTS
• Preinstalled ESLint, Prettier, Tailwind CSS, and Svelte extensions
• Preinstalled playwright dependencies
• Automation of the pnpm install when the devcontainer is first created

Basically everything needed for a contributor to open the project after a fresh clone and be immediately productive, either locally with VS Code or remotely with GitHub Codespaces!

Note

This devcontainer is based off of the Microsoft-provided "node" Docker image, which is based off the Debian12 Docker image. Playwright only started to support Firefox for Debian12 in playwright@1.37.0 (ref) which is one minor version greater than the version of playwright in the pnpm-lock.yml for melt-ui. Due to the fact that the package.json specified ^1.36.0 for playwright and version 1.37.0 is semver-compatible with the specified version, I have updated to the latest semver-compatible version in my changes here, specifically 1.39.0.

I have run all playwright tests inside the devcontainer both headlessly and non-headlessly and have confirmed that everything still works correctly. I would have preferred to make no changes besides adding this configuration, but since the version bump was so small and only to a semver-compatible version, I decided it was worth it so that everything works inside the devcontainer, including playwright tests.

For reference, here are some other repositories for whom I've opened PRs to do the same:

• feat(devcontainer): add the ability to use GitHub Codespaces and VS Code remote containers AnilSeervi/inspirational-quotes#19
• feat(devcontainer): enable dev environments in GH Codespaces and VS Code remote containers Icon-Shelf/icon-shelf#135 (note that this one is a GUI electron app, but it's still possible to containerize it and do development in the cloud on GH Codespaces!)
• [Req]: GH Codespaces / VS Code Remote Container Configuration developertools-tech/developertools.tech#36
• feat(devcontainers): add the ability to use GitHub Codespaces and VS Code remote containers date-fns/date-fns#3551
• feat(devcontainers): add the ability to use GitHub Codespaces and VS Code remote containers floating-ui/floating-ui#2606
• feat(devcontainers): add the ability to use GitHub Codespaces and VS Code remote containers EveryBoard/EveryBoard#155
• feat(devcontainers): add the ability to use GitHub Codespaces and VS Code remote containers compiler-explorer/compiler-explorer#5631
• feat(devcontainers): add the ability to use GitHub Codespaces and VS Code remote containers JamesLMilner/terra-draw#108

[changeset-bot]

⚠️ No Changeset found

Latest commit: b2dc90c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[TGlide]

Thank you for the PR! And wow, that's quite the comprehensive description. Thank you for the eye to detail 🧡