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]

🦋 Changeset detected

Latest commit: ff0ab35

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!

[askoufis]

Thanks for the amazing effort! 👏

I gave this a crack a while ago, but didn't get too far. IMO the ultimate version of vite support for playroom would be a plugin, rather than a separate CLI + devserver, though that would likely involve a complete re-architect of playroom, so this is a very welcome addition in the meantime.

Just some minor comments from me.

[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

[askoufis]

Looking good. Just a few more small comments.

[askoufis]

What's the reasoning behind this addition?

[michaeltaranto]

Thanks for putting in this together. I would like to see this progress, but really feel like this would be easier to support if it were broken into separate PRs.

As I see it we have:

• Migrate internals to TS
• JSX support
• Vite support

Currently the utils refactor breaks a public (not documented) API:

import { createUrl } from 'playroom/utils';

We use this to build Playroom links on the Braid docs site.

Also would be keen to explore not having the bundler config, and using the presence of webpackConfig or viteConfig as the decision point. This would avoid breaking existing configs too.

[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! 🎉 ❤️

[mihkeleidast]

Anything we can do to push this forward?

[ccombe]

whatever happened with this PR - webpack is getting very long in the tooth and vite is becoming if not already the standard build tool - what is blocking this change from making it in - other than perhaps a rebase / update to latest versions.

[felixhabib]

@ccombe definitely something we'd love to do soon, but it is a bit involved given how much of the repo has changed since this PR opened. We don't have the capacity to work on it currently

[ccombe]

thanks @felixhabib appreciate the quick response

I see @michaeltaranto suggest attacking this from 2 separate prs with one being
Migrate internals to TS + JSX support

how has that part gone (if at all) maybe it's easier to migrate that first - I imagine some of the simpler migration could be done via AI and then reviewed but would need more scrutiny for the more complicated steps.

[felixhabib]

@ccombe yes, the TS migration has already been completed separately.