Add vite support

[TheMightyPenguin]

Description

Adds vite support. The motivation here:

• To make Playroom easier to adopt. People can pick this up and use it in a TS + React app without any config when using vite as the bundler, they may just need to add a plugin for their CSS solution and that's it.
• Many newer apps build with NextJS/Vite may not have webpack explicitly, so if someone wants to install Playroom now they won't have to deal with webpack. (e.g. the NextJS app may use webpack behind the curtain but the user probably does not want to deal with a webpack config).

Changes mode.

This is a chunky PR (sorry about that), here's an overview of the changes:

• Refactors the code for the React playroom app to TypeScript. This was done as these files needed to be renamed to .jsx to be supported in Vite, so I thought it would be a good idea to convert these to TypeScript as I was changing these. This also adds a few improvements, like typings for the user defined aliased modules that are used in the codebase.
• Adds a bundler option to playroom config. This option is required, and should be either 'vite' or 'webpack'.
• Adds the viteConfig option to playroom config. This is a function that returns the user Vite configuration.
• Adds a default vite config, following the rules we have in the default webpack config (react support, and this supports TS out of the box 🎉 )

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: ff0ab35a3304a1b6d59436fc4667fba03be882c8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | -------- | ----- | | playroom | Minor |

Not sure what this means? Click here to learn what changesets are.

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

[TheMightyPenguin]

@michaeltaranto this is ready for review! ran cypress tests locally and they are passing

[TheMightyPenguin]

@michaeltaranto @askoufis any updates here? 👀 I just rebased the PR as it had some conflicts

[TheMightyPenguin]

@michaeltaranto @askoufis following up here!

[TheMightyPenguin]

@askoufis would you elaborate more on this plugin idea? (I am guessing it means there would be a plugin system and there would be webpack, vite plugins and so on)

Also thanks for the review! gonna get to attending it this weekend!

[askoufis]

@askoufis would you elaborate more on this plugin idea? (I am guessing it means there would be a plugin system and there would be webpack, vite plugins and so on)

Also thanks for the review! gonna get to attending it this weekend!

Yeah something like that. Basically, rather than playroom being a CLI that spins up a dev server, it would be a plugin that would integrate with bundlers like webpack and vite, using their dev servers to host the playroom site.

[TheMightyPenguin]

@askoufis love that idea, agree on getting this in as a temporary solution and I'd love to get more involved in that 👀

[TheMightyPenguin]

@askoufis attended comments! still need to do some more testing, will also add the viteConfig key to the vite fixture, but other changes should remain mostly the same now

[simon-v-swyftx]

Thanks very much @TheMightyPenguin ! I was trying to find some prior art for playroom config with tailwindcss/postcss support, unfortunately the projects I found were out of date or I simply couldn’t get it working with the same/like configuration. But I pointed to your branch and worked right out of the box! :tada: :heart: