Simplify to use vite for building playground library (#3403)

Using rollup wasn't working super well when running in watch mode with
the playground-website package refresh and needed some restart.

Unfortunatelly can't seem to find a good way to just run `pnpm start` in
`/playground-website` and have that working so still have to do `pnpm
watch` in `/playground` as well.

.chronus/changes/playground-vite-2024-4-20-21-21-23.md

@@ -0,0 +1,8 @@
+---
+# Change versionKind to one of: internal, fix, dependencies, feature, deprecation, breaking
+changeKind: internal
+packages:
+  - "@typespec/playground"
+---
+
+Simplify to use vite for building playground library

packages/playground/package.json

@@ -43,16 +43,16 @@
       "types": "./dist/src/react/viewers/index.d.ts",
       "default": "./dist/react/viewers/index.js"
     },
-    "./style.css": "./dist/index.css",
-    "./styles.css": "./dist/index.css"
+    "./style.css": "./dist/style.css",
+    "./styles.css": "./dist/style.css"
   },
   "engines": {
     "node": ">=18.0.0"
   },
   "scripts": {
     "clean": "rimraf ./dist ./dist-dev ./temp ./typespecContents.json",
-    "build": "rollup --config rollup.config.ts --configPlugin typescript --failAfterWarnings 2>&1",
-    "watch": "rollup --config rollup.config.ts --configPlugin typescript --watch",
+    "build": "vite build",
+    "watch": "vite build --watch",
     "copy-css": "copyfiles -u 1 src/**/*.module.css dist/src",
     "preview": "npm run build && vite preview",
     "start": "vite",
@@ -91,10 +91,6 @@
   "devDependencies": {
     "@babel/core": "^7.24.5",
     "@playwright/test": "^1.44.0",
-    "@rollup/plugin-commonjs": "~25.0.7",
-    "@rollup/plugin-json": "~6.1.0",
-    "@rollup/plugin-node-resolve": "~15.2.3",
-    "@rollup/plugin-typescript": "~11.1.6",
     "@types/debounce": "~1.2.4",
     "@types/node": "~18.11.19",
     "@types/react": "~18.3.2",
@@ -106,10 +102,8 @@
     "copyfiles": "~2.4.1",
     "cross-env": "~7.0.3",
     "rimraf": "~5.0.7",
-    "rollup": "~4.17.2",
-    "rollup-plugin-postcss": "~4.0.2",
-    "rollup-plugin-visualizer": "~5.12.0",
     "typescript": "~5.4.5",
-    "vite": "^5.2.11"
+    "vite": "^5.2.11",
+    "vite-plugin-dts": "^3.9.1"
   }
 }

packages/playground/src/index.ts

@@ -1,5 +1,5 @@
 export { createBrowserHost } from "./browser-host.js";
 export { registerMonacoDefaultWorkersForVite } from "./monaco-worker.js";
 export { registerMonacoLanguage } from "./services.js";
-export { StateStorage, UrlStateStorage, createUrlStateStorage } from "./state-storage.js";
+export { createUrlStateStorage, type StateStorage, type UrlStateStorage } from "./state-storage.js";
 export type { BrowserHost, PlaygroundSample } from "./types.js";

packages/playground/src/react/footer/index.ts

@@ -1,8 +1,8 @@
-export { FooterItem, FooterItemProps } from "./footer-item.js";
+export { FooterItem, type FooterItemProps } from "./footer-item.js";
 export {
   FooterVersionItem,
   FooterVersionItemProps,
   VersionSelectorProps,
   VersionSelectorVersion,
 } from "./footer-version-item.js";
-export { Footer, FooterProps } from "./footer.js";
+export { Footer, type FooterProps } from "./footer.js";

packages/playground/src/react/index.ts

@@ -2,12 +2,12 @@ export { usePlaygroundContext } from "./context/index.js";
 export {
   Footer,
   FooterItem,
-  FooterItemProps,
-  FooterProps,
   FooterVersionItem,
-  FooterVersionItemProps,
-  VersionSelectorProps,
-  VersionSelectorVersion,
+  type FooterItemProps,
+  type FooterProps,
+  type FooterVersionItemProps,
+  type VersionSelectorProps,
+  type VersionSelectorVersion,
 } from "./footer/index.js";
 export { Playground } from "./playground.js";
 export type { PlaygroundProps, PlaygroundSaveData } from "./playground.js";

packages/playground/vite.config.ts

@@ -1,27 +1,52 @@
 import react from "@vitejs/plugin-react";
+import { readFileSync } from "fs";
+import { dirname, resolve } from "path";
+import { fileURLToPath } from "url";
 import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const packageJson = JSON.parse(readFileSync(resolve(__dirname, "package.json")).toString());
+const dependencies = Object.keys(packageJson.dependencies);
+const externals = [
+  ...dependencies,
+  "swagger-ui-dist/swagger-ui-es-bundle.js",
+  "swagger-ui-dist/swagger-ui.css",
+  "@typespec/bundler/vite",
+  "react-dom/client",
+  "react/jsx-runtime",
+  "vite",
+  "@vitejs/plugin-react",
+  "fs/promises",
+];
 
 const config = defineConfig({
-  base: "./",
   build: {
     target: "esnext",
+    minify: false,
     chunkSizeWarningLimit: 3000,
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          monaco: ["monaco-editor"],
-        },
+    lib: {
+      entry: {
+        index: "src/index.ts",
+        "react/index": "src/react/index.ts",
+        "react/viewers/index": "src/react/viewers/index.tsx",
+        "tooling/index": "src/tooling/index.ts",
+        "vite/index": "src/vite/index.ts",
       },
+      formats: ["es"],
+    },
+
+    rollupOptions: {
+      external: externals,
     },
   },
   esbuild: {
     logOverride: { "this-is-undefined-in-esm": "silent" },
   },
   assetsInclude: [/\.tsp$/],
-  optimizeDeps: {
-    exclude: ["swagger-ui"],
-  },
-  plugins: [react({})],
+  optimizeDeps: {},
+  plugins: [react({}), dts()],
   server: {
     fs: {
       strict: false,