playground now has a shared folder and a personal folder

packages/playground/devEnv/servePlayground.ts

@@ -1,3 +1,4 @@
+import {existsSync, writeFileSync} from 'fs'
 import path from 'path'
 import {definedGlobals} from '../../../theatre/devEnv/buildUtils'
 
@@ -5,6 +6,27 @@ 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(
     {
@@ -12,7 +34,7 @@ require('esbuild')
       servedir: path.join(playgroundDir, 'src'),
     },
     {
-      entryPoints: [path.join(playgroundDir, 'src/index.tsx')],
+      entryPoints: [playgroundEntry],
       target: ['firefox88'],
       loader: {
         '.png': 'file',
@@ -26,5 +48,5 @@ require('esbuild')
     },
   )
   .then((server: unknown) => {
-    console.log('serving', 'http://localhost:' + port)
+    console.log('Playground running at', 'http://localhost:' + port)
   })