init sandbox preview with vite

Author: softmarshmallow

sandbox/README.md

@@ -0,0 +1,15 @@
+# Web preview for source code
+
+## ES Preview with Vite
+
+- Go to Directory: [`preview/es`](./es/)
+
+## Flutter Preview with Flutter Daemon ([gridaco/flutter](https://github.com/gridaco/flutter))
+
+- Go to Repository: [gridaco/flutter](https://github.com/gridaco/flutter)
+
+## Testing & Capabilities
+
+- .env loading
+- monorepo
+- nextjs

sandbox/demos/react/src/App.tsx

@@ -5,6 +5,7 @@ const App: React.FC = () => {
   return (
     <div>
       <h1>Hello, world!</h1>
+      <p>Test component for vite</p>
     </div>
   );
 };

sandbox/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@scenes/sandbox-daemon",
+  "version": "0.0.0",
+  "author": "Grida Inc.",
+  "homepage": "https://github.com/gridaco/code",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "vite": "^4.3.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20.2.3",
+    "ts-node": "^10.9.1",
+    "tsup": "^6.7.0",
+    "typescript": "^5.0.4"
+  }
+}

sandbox/src/index.ts

@@ -0,0 +1,26 @@
+import path from "path";
+import { createServer } from "vite";
+
+async function main({ root }: { root: string }) {
+  const s = await createServer({
+    configFile: false,
+    root: root,
+    base: "/s/",
+    // server: {
+    //   middlewareMode: true,
+    // },
+  });
+
+  // file change
+  s.watcher.on("change", (file) => {
+    console.log("change", file);
+  });
+
+  s.listen();
+}
+
+const root = path.join(__dirname, "../demos/react");
+console.log("running", root, "with vite");
+main({
+  root: root,
+});

sandbox/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "esModuleInterop": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

sandbox/tsup.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+});