create-shallot 0.3.9 → 0.5.0

package/index.ts

@@ -42,6 +42,14 @@ writeFileSync(
 `,
 );
 
+writeFileSync(
+    join(dir, ".gitignore"),
+    `node_modules/
+dist/
+build/
+`,
+);
+
 writeFileSync(
     join(dir, "package.json"),
     JSON.stringify(
@@ -50,9 +58,34 @@ writeFileSync(
             version: "0.0.0",
             private: true,
             type: "module",
-            scripts: { dev: "vite" },
+            scripts: {
+                dev: "vite",
+                build: "vite build",
+                preview: "vite preview",
+            },
             dependencies: { "@dylanebert/shallot": "latest" },
-            devDependencies: { vite: "^8.0.0" },
+            devDependencies: { typescript: "^5.9.3", vite: "^8.0.0" },
+        },
+        null,
+        2,
+    ) + "\n",
+);
+
+writeFileSync(
+    join(dir, "tsconfig.json"),
+    JSON.stringify(
+        {
+            compilerOptions: {
+                target: "ESNext",
+                module: "ESNext",
+                moduleResolution: "bundler",
+                lib: ["ESNext", "DOM", "DOM.Iterable"],
+                types: ["@webgpu/types", "vite/client"],
+                strict: true,
+                noEmit: true,
+                skipLibCheck: true,
+            },
+            include: ["src"],
         },
         null,
         2,
@@ -66,11 +99,11 @@ writeFileSync(
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <link rel="icon" type="image/svg+xml" href="./icon.svg" />
         <title>${name}</title>
         <style>
             * { box-sizing: border-box; margin: 0; padding: 0; }
-            body { background: #0a0a0a; overflow: hidden; }
+            body { background: #0c0a09; overflow: hidden; }
             canvas { display: block; width: 100vw; height: 100vh; }
         </style>
     </head>
@@ -87,19 +120,44 @@ writeFileSync(
     `import { defineConfig } from "vite";
 
 export default defineConfig({
+    base: "./",
     server: { port: 3000 },
-    build: { target: "esnext" },
+    build: {
+        target: "esnext",
+        outDir: "dist",
+        emptyOutDir: true,
+    },
 });
 `,
 );
 
 writeFileSync(
     join(dir, "src/lib.ts"),
-    `import { OrbitPlugin, type Config } from "@dylanebert/shallot";
+    `import { type Config, Part, quat, type State, type System, Transform } from "@dylanebert/shallot";
+
+// A system is plain data: an \`update\` the engine runs each frame. This one spins
+// every Part around Y. It runs in the standalone app but not the editor — \`shallot .\`
+// builds in edit mode, where unannotated systems are skipped, so the cube stays put
+// and editable there. Delete it (and the plugin entry below) for a static scene.
+let angle = 0;
+const SpinSystem: System = {
+    group: "simulation",
+    update(state: State) {
+        angle = (angle + state.time.deltaTime * 45) % 360;
+        const q = quat(0, angle, 0);
+        for (const eid of state.query([Part, Transform])) {
+            Transform.rot.set(eid, q.x, q.y, q.z, q.w);
+        }
+    },
+};
 
+// The project definition, shared by the standalone app (src/main.ts) and the shallot
+// editor (\`shallot .\`). The default plugins (render, lit surface, orbit camera) stay
+// on; the spin plugin adds our one system. The scene lives here too, so main.ts stays
+// untouched as the project grows.
 export const config: Config = {
-    plugins: [OrbitPlugin],
-    scene: "/scenes/demo.scene",
+    plugins: [{ name: "spin", systems: [SpinSystem] }],
+    scene: "scenes/scene.scene",
 };
 `,
 );
@@ -109,21 +167,28 @@ writeFileSync(
     `import { run } from "@dylanebert/shallot";
 import { config } from "./lib";
 
-const state = await run(config);
+// One config source (src/lib.ts) drives both this standalone build and the editor. The camera
+// auto-binds to the page's <canvas>.
+const { dispose } = await run(config);
 
+// HMR re-runs this module — dispose the old State + RAF loop or each reload stacks another.
 if (import.meta.hot) {
-    import.meta.hot.dispose(() => state.dispose());
+    import.meta.hot.dispose(() => dispose());
 }
 `,
 );
 
 writeFileSync(
-    join(dir, "public/scenes/demo.scene"),
+    join(dir, "public/scenes/scene.scene"),
     `<scene>
-    <a id="camera" camera fxaa orbit tonemap transform />
-    <a ambient-light />
-    <a directional-light />
-    <a id="cube" part="shape: box; color: 0xc77b58" transform />
+    <a ambient-light="color: 0xd0dcec; intensity: 0.5" />
+    <a directional-light="direction: -0.4 -1 -0.55; color: 0xfff4e0; intensity: 1.1" />
+
+    <!-- the camera auto-binds to the page's <canvas>; drag to orbit, scroll to zoom -->
+    <a camera sear orbit="distance: 5; yaw: 0.6; pitch: 0.25" transform />
+
+    <!-- a Part is the engine's drop-in renderable: a mesh (default "cube") wearing a surface (default "default", lit) -->
+    <a part transform="pos: 0 0 0" color="rgba: 0.85 0.55 0.35 1" />
 </scene>
 `,
 );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-shallot",
-    "version": "0.3.9",
+    "version": "0.5.0",
     "type": "module",
     "bin": "./index.ts",
     "files": ["index.ts"],