Use vite for playground (#84)

devEnv/getAliasesFromTsConfig.d.ts

@@ -1,2 +1,5 @@
-export function getAliasesFromTsConfigForWebpack(): Record<string, string>
 export function getAliasesFromTsConfigForJest(): Record<string, string>
+export function getAliasesFromTsConfigForRollup(): Array<{
+  find: RegExp
+  replacement: string
+}>

devEnv/getAliasesFromTsConfig.js

@@ -2,25 +2,6 @@ const path = require('path')
 
 const monorepoRoot = path.resolve(__dirname, '../')
 
-function getAliasesFromTsConfigForWebpack() {
-  const tsConfigPaths = require('../tsconfig.base.json').compilerOptions.paths
-
-  const aliases = {}
-
-  for (let [key, value] of Object.entries(tsConfigPaths)) {
-    if (key.match(/\*$/)) {
-      key = key.replace(/\/\*$/, '')
-    } else {
-      key = key + '$'
-    }
-    aliases[key] = path.join(monorepoRoot, value[0].replace(/\/\*$/, ''))
-  }
-
-  return aliases
-}
-
-module.exports.getAliasesFromTsConfigForWebpack = getAliasesFromTsConfigForWebpack
-
 function getAliasesFromTsConfigForESLint() {
   const tsConfigPaths = require('../tsconfig.base.json').compilerOptions.paths
 
@@ -56,3 +37,27 @@ function getAliasesFromTsConfigForJest() {
 }
 
 module.exports.getAliasesFromTsConfigForJest = getAliasesFromTsConfigForJest
+
+function getAliasesFromTsConfigForRollup() {
+  const tsConfigPaths = require('../tsconfig.base.json').compilerOptions.paths
+
+  const aliases = []
+
+  for (let [key, value] of Object.entries(tsConfigPaths)) {
+    // like '@theatre/core/*'
+    if (key.match(/\/\*$/)) {
+      key = key.replace(/\/\*$/, '/(.*)')
+    } else {
+      // like '@theatre/core'
+      key = key + '$'
+    }
+    aliases.push({
+      find: new RegExp(key),
+      replacement: path.join(monorepoRoot, value[0].replace(/\/\*$/, '/$1')),
+    })
+  }
+
+  return aliases
+}
+
+module.exports.getAliasesFromTsConfigForRollup = getAliasesFromTsConfigForRollup

packages/playground/devEnv/servePlayground.ts

@@ -1,52 +0,0 @@
-import {existsSync, writeFileSync} from 'fs'
-import path from 'path'
-import {definedGlobals} from '../../../theatre/devEnv/buildUtils'
-
-const playgroundDir = path.join(__dirname, '..')
-
-const port = 8080
-
-const playgroundIndexContent = `
-/**
- * This file is created automatically and won't be comitted to the repo.
- * You can change the import statement and import your own playground code.
- * 
- * Your own playground code should reside in './personal', which is a folder
- * that won't be committed to the repo.
- * 
- * The shared playgrounds which other contributors can use are in the './shared' folder,
- * which are comitted to the repo.
- * 
- * Happy playing!
- * */
-import './shared/r3f-rocket'
-`
-
-const playgroundEntry = path.join(playgroundDir, 'src/index.ts')
-if (!existsSync(playgroundEntry)) {
-  writeFileSync(playgroundEntry, playgroundIndexContent, {encoding: 'utf-8'})
-}
-
-require('esbuild')
-  .serve(
-    {
-      port,
-      servedir: path.join(playgroundDir, 'src'),
-    },
-    {
-      entryPoints: [playgroundEntry],
-      target: ['firefox88'],
-      loader: {
-        '.png': 'file',
-        '.glb': 'file',
-        '.gltf': 'file',
-        '.svg': 'dataurl',
-      },
-      bundle: true,
-      sourcemap: true,
-      define: definedGlobals,
-    },
-  )
-  .then((server: unknown) => {
-    console.log('Playground running at', 'http://localhost:' + port)
-  })

packages/playground/devEnv/vite.config.ts

@@ -0,0 +1,65 @@
+import {defineConfig} from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+import {getAliasesFromTsConfigForRollup} from '../../../devEnv/getAliasesFromTsConfig'
+import {definedGlobals} from '../../../theatre/devEnv/buildUtils'
+import {existsSync, writeFileSync} from 'fs'
+
+/*
+We're using vite instead of the older pure-esbuild setup. The tradeoff is
+that page reloads are much slower (>1s diff), while hot reload of react components
+are instantaneous and of course, they preserve state.
+
+@todo Author feels that the slow reloads are quite annoying and disruptive to flow,
+so if you find a way to make them faster, please do.
+*/
+
+const playgroundDir = path.join(__dirname, '..')
+
+const port = 8080
+
+/**
+ * Creates playground/src/index.ts, since that file isn't committed to the repo.
+ */
+function createPlaygroundIndex() {
+  const playgroundIndexContent = `
+  /**
+   * This file is created automatically and won't be comitted to the repo.
+   * You can change the import statement and import your own playground code.
+   * 
+   * Your own playground code should reside in './personal', which is a folder
+   * that won't be committed to the repo.
+   * 
+   * The shared playgrounds which other contributors can use are in the './shared' folder,
+   * which are comitted to the repo.
+   * 
+   * Happy playing!
+   * */
+  import './shared/r3f-rocket'
+  `
+
+  const playgroundEntry = path.join(playgroundDir, 'src/index.ts')
+  if (!existsSync(playgroundEntry)) {
+    writeFileSync(playgroundEntry, playgroundIndexContent, {encoding: 'utf-8'})
+  }
+}
+createPlaygroundIndex()
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  root: path.join(playgroundDir, './src'),
+  assetsInclude: ['**/*.gltf', '**/*.glb'],
+  server: {
+    port,
+  },
+
+  plugins: [react()],
+  resolve: {
+    /*
+    This will alias paths like `@theatre/core` to `path/to/theatre/core/src/index.ts` and so on,
+    so vite won't treat the monorepo's packages as externals and won't pre-bundle them.
+    */
+    alias: [...getAliasesFromTsConfigForRollup()],
+  },
+  define: definedGlobals,
+})

packages/playground/package.json

@@ -8,7 +8,7 @@
     "dist/**/*"
   ],
   "scripts": {
-    "serve": "node -r esbuild-register devEnv/servePlayground.ts",
+    "serve": "vite --config ./devEnv/vite.config.ts",
     "typecheck": "yarn run build",
     "build": "tsc --build ./tsconfig.json"
   },
@@ -22,9 +22,9 @@
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.6.2",
     "@types/react": "^17.0.9",
-    "esbuild": "^0.12.15",
-    "esbuild-register": "^2.5.0",
+    "@vitejs/plugin-react": "^1.2.0",
     "three": "^0.130.1",
-    "typescript": "^4.4.2"
+    "typescript": "^4.4.2",
+    "vite": "^2.8.4"
   }
 }

packages/playground/src/index.html

@@ -15,6 +15,6 @@
   <body>
     <div id="root"></div>
 
-    <script src="./index.js"></script>
+    <script type="module" src="./index.ts"></script>
   </body>
 </html>