create-cloesce 0.3.4 → 0.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-cloesce",
   "description": "Create Cloesce App",
-  "version": "0.3.4",
+  "version": "0.5.0",
   "author": "Ben Schreiber <bpschreiber2003@gmail.com>",
   "repository": {
     "url": "https://github.com/bens-schreiber/create-cloesce-app"

package/templates/default/package.json

@@ -1,28 +1,27 @@
 {
-  "name": "cloesce-proj",
+  "name": "examples-weather",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "migrate:wrangler": "wrangler d1 migrations apply db",
+    "migrate:wrangler": "wrangler d1 migrations apply Db",
     "start:dev": "wrangler dev --port 5000",
     "start:web": "vite",
     "test": "vitest"
   },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
   "dependencies": {
-    "cloesce": ">=0.3.0",
+    "cloesce": ">=0.5.0",
     "wrangler": "^4.61.1"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20260131.0",
-    "miniflare": "^4.20260128.0",
-    "vite-tsconfig-paths": "^6.0.5",
-    "vitest": "^4.0.18",
+    "@cloudflare/workers-types": "^4.20250906.0",
+    "@cloudflare/vitest-pool-workers": "^0.16.15",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "module"
+    "vite": "^8.0.10",
+    "vitest": "^4.0.18"
+  }
 }

package/templates/default/src/api/main.ts

@@ -1,12 +1,10 @@
-// Here, we import the generated backend code, which includes all the types
-// defined in the `schema.clo` file
+// Import the generated backend code, which includes all the types defined in the
+// `schema.clo` file.
 import * as clo from "@cloesce/backend.js";
-import { CfReadableStream } from "@cloesce/backend.js";
 
 // The "cloesce" library provides basic types and utilities for building a Cloesce backend
 import { HttpResult } from "cloesce";
 
-
 // To implement the API routes of a model or service defined in `schema.clo`,
 // we can use the `impl` method on it's respective generated namespace.
 //
@@ -15,11 +13,14 @@ import { HttpResult } from "cloesce";
 //
 // The only place where generated code should be directly used is in `impl` blocks like this.
 export const Weather = clo.Weather.impl({
-    async uploadPhoto(self, e, s: CfReadableStream) {
-        // All models have a `Key` namespace which provides utilities for generating
-        // KV and R2 keys for that model.
-        const key = this.Key.photo(self.id);
-        await e.bucket.put(key, s);
+    async uploadPhoto(self, env, stream) {
+        // At runtime, Cloesce "upgrades" the Cloudflare Environment (clo.CfEnv)
+        // to a "Cloesce Environment" (clo.Env) which includes helper methods for
+        // every binding defined in our schema.
+        //
+        // For example, the "photos" template in the "Bucket" R2 binding generates
+        // a helper for uploading files to R2, which we can call like this:
+        await env.Bucket.photos.put(self.id, stream);
     },
 
     downloadPhoto(self) {
@@ -29,43 +30,50 @@ export const Weather = clo.Weather.impl({
             return HttpResult.fail(404, "Photo not found");
         }
         return HttpResult.ok(200, self.photo.body);
-    }
+    },
 });
 
 // `WeatherReport` has no API routes defined.
 //
-// Instead of using the generated namespace directly, we can still create an implementation with `impl`
-// to avoid passing the generated code around the rest of our application.
+// Instead of using the generated namespace directly, (clo.X) create
+// an implementation with an empty object, which provides a cleaner interface for
+// the rest of the codebase.
 export const WeatherReport = clo.WeatherReport.impl({});
 
+
+
 export default {
     async fetch(request: Request, env: clo.Env): Promise<Response> {
-        // preflight
+        const cors = {
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Methods": "GET, POST, PUT, OPTIONS",
+            "Access-Control-Allow-Headers": "Content-Type, Authorization",
+        };
+
         if (request.method === "OPTIONS") {
-            return HttpResult.ok(200, undefined, {
-                "Access-Control-Allow-Origin": "*",
-                "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
-                "Access-Control-Allow-Headers": "Content-Type, Authorization",
-            }).toResponse();
+            // A basic CORS preflight handler
+            return new Response(null, { headers: cors });
         }
 
-        // Run Cloesce app
-        const app = (await clo.cloesce())
-            .register(Weather);
-
-        const result = await app.run(request, env);
+        // The `cloesce` function returns a `CloesceApp` instance,
+        // capable of routing an HTTP request to a model implementation.
+        //
+        // We register any implementations we want to use with `app.register()`.
+        const app = clo.cloesce(env);
+        app.register(Weather, WeatherReport);
 
-        // attach CORS headers
-        result.headers.set("Access-Control-Allow-Origin", "*");
-        result.headers.set(
-            "Access-Control-Allow-Methods",
-            "GET, POST, PUT, DELETE, OPTIONS"
-        );
-        result.headers.set(
-            "Access-Control-Allow-Headers",
-            "Content-Type, Authorization"
-        );
+        // The `app.run()` method will:
+        // 1. Parses the incoming request URL and matches it to a models method
+        // 2. Deserializes and validates the request body and parameters against the schema
+        // 3. Hydrates the model instance (if applicable)
+        // 4. Dispatches to the respective implementation method (e.g. `Weather.uploadPhoto()`)
+        // 5. Returns a Response with the result of the method, serialized according to the schema
+        const result = await app.run(request);
 
+        // Set CORS headers on the response
+        for (const [key, value] of Object.entries(cors)) {
+            result.headers.set(key, value);
+        }
         return result;
-    }
-};
+    },
+};

package/templates/default/src/schema/schema.clo

@@ -1,105 +1,117 @@
-// `env` describes the resources in a wrangler configuration that the API can access.
-// It does not replace the wrangler config, but does result in a generated version.
-env {
-    // The `d1` block describes all D1 database bindings
-    d1 {
-        db
-        // db2
-    }
-    
-    // The `r2` block describes all R2 bucket bindings
-    r2 {
-        bucket
-        // bucket2
+// We are able to define any number of R2 bindings in our schema,
+// which are Cloudflare Workers S3-compatible object storage buckets.
+//
+// Each R2 binding compiles to both a Wrangler binding definition as well as
+// helper methods for interacting with the bucket at runtime.
+r2 Bucket {
+    // The "photos" template directly states:
+    // - "with this parameter, at this key, store a value"
+    photos(id: int) {
+        "weather/photos/{id}.jpg"
     }
 }
 
-// If a model is to be stored in a D1 database as a table, it must be decorated with `[use <binding>]`
-// The `list`, `get`, and `save` operations are used to generate CRUD operations for the model.
-// Optionally, these tags can be combined, e.g. `[use db, list, get, save]`
-[use db]
-[use list, save, get]
-model WeatherReport {
-    // The `primary` block describes the primary key of the table.
-    // It can be composed of several fields. Any number of primary blocks can be defined,
-    // which all together make up one primary key.
+// D1 is Cloudflares serverless SQL database. Define any number
+// of bindings in the schema under a `d1` block, which compiles to Wrangler bindings
+// and provides a basis for a Model to generate SQL tables for.
+d1 {
+    Db
+    // db2
+    // ...
+}
+
+// `WeatherReport` is specifically denoted as `for Db`, which means it can source
+// data from the `WeatherReport` table in the `Db` D1 database.
+//
+// Any Model can be annotated with a `crud` tag, which generates basic API
+// functionality for the specified methods.
+//
+// CRUD implementations always exist on the backend, but with the `crud` tag,
+// they are exposed to the client as well.
+[crud list, save, get]
+model WeatherReport for Db {
+    // Every SQLite database backed Model must have a 
+    // `primary` key block, directly translating to a PRIMARY KEY in the generated SQL table.
     primary {
         id: int
     }
     
-    // A `nav` block describes a relationship between two models.
-    // In this case, it is a one-to-many relationship between WeatherReport and Weather,
-    // where WeatherReport has many Weathers. 
+    // Cloesce can model relationships between Models with a `nav` block,
+    // which states:
+    // - "`Weather` has `weatherReportId` which is an FK to myself, JOIN to me at runtime"
     //
-    // This works because the field `weatherReportId` in the Weather model is a foreign key that 
-    // references the `id` field in the WeatherReport model.
-    //
-    // This will resolve to a navigation field named `weatherEntries` in the WeatherReport model, 
-    // which is an array of Weather objects.
-    nav (Weather::weatherReportId) {
+    // This is an example of a 1:M relationship.
+    nav Weather::weatherReportId {
         weatherEntries
     }
     
-    // All fields that are not apart of a block are just regular fields in the table.
-    title: string
-    description: string
+    column {
+        title: string
+        description: string
+    }
 }
 
-[use db]
-[use get, list, save]
-model Weather {
+[crud get, list, save]
+model Weather for Db {
     primary {
         id: int
     }
     
-    // A `foreign` block describes a one to one relationship between two models.
-    // It translates directly to a foreign key constraint in the database (`weatherReportId` references `id` in WeatherReport).
-    foreign (WeatherReport::id) {
+    // A Foreign Key block directly translates
+    // to a SQLite FOREIGN KEY constraint to the referenced table,
+    // and inherits the type of the referenced column (in this case, int).
+    foreign WeatherReport::id {
         weatherReportId
-        
-        
-        // A `nav` block inside a `foreign` block generates a navigation field,
-        // meaning the backend and client will have a WeatherReport object named `weatherReport` nested inside the Weather model.
-        nav {
-            weatherReport
-        }
+    }
+
+    // A navigation block can also be 1:1. This states:
+    // - "`Weather` has `weatherReportId` which is an FK to `WeatherReport`, JOIN to `WeatherReport` at runtime"
+    nav WeatherReport::id(weatherReportId) {
+        weatherReport
     }
     
-    r2 (bucket, "weather/photos/{id}.jpg") {
+    // SQL isnt the only source of data for a Model. Reference an R2 binding
+    // with an `r2` block, which states:
+    // - "at runtime, this field is hydrated from the `photos` template of the `Bucket` R2 binding,
+    //   using my column `id` as the parameter"
+    r2 Bucket::photos(id) {
         photo
     }
     
-    dateTime: date
-    location: string
-    temperature: int
-    condition: string
+    column {
+        dateTime: date
+        location: string
+        temperature: int
+        condition: string
+    }
 }
 
-// An `api` block describes what endpoints must be implemented in the backend
-// and generated in the client. Many blocks can be defined, but they all together make up one API.
-//
-// All endpoints in Cloesce are HTTP endpoints.
 api Weather {
-    // If `self` is passed as an argument, it means the endpoint requires an
-    // instantiated Weather object to be hydrated on the backend before the endpoint can be executed.
+    // This method translates to an HTTP POST endpoint at /Weather/:id/uploadPhoto, accepting a
+    // stream as the body of the request.
+    //
+    // Because this method is marked as `self`, Cloesce will hydrate the respective `Weather` instance
+    // at runtime, allowing us to access all fields of the model.
     //
-    // In this case, `uploadPhoto` accepts the Wrangler environment (dependency injected),
-    // and a stream (the photo to be uploaded).
-    post uploadPhoto(self, e: env, s: stream) -> void
+    // The `inject` tag allows us to specify any bindings we want access to in the implementation of this method.
+    // No other parameters will be injected at runtime, so we must specify all bindings we want to use.
+    [inject Bucket]
+    post uploadPhoto(self, s: stream)
     
-    // By default, Cloesce will hydrate a `self` instance with all 1:1, KV, R2,
-    // and the near side of 1:M/M:M relationships.
+    // This method translates to an HTTP GET endpoint at /Weather/:id/downloadPhoto.
     //
-    // To avoid overfetching, a `source` tag can be used on `self`, which uses the
-    // specified data source instead. In this case, `downloadPhoto` will only hydrate the `photo` field.
-    // (NOTE: The Weather table is always queried to hydrate columns, regardless of the source.)
+    // Because this method is marked as `self`, Cloesce will hydrate the respective `Weather` instance.
+    // However, we don't need the entire Weather instance to download the photo-- just the `id`.
+    // To avoid unnecessary hydration, we can specify a `source` for this method, which states:
+    // - "for this method, hydrate `self` using this source instead of the default"
     get downloadPhoto([source R2Only] self) -> stream
 }
 
-// A `source` block describes a data souce that can be used throughout
-// a Cloesce program to hydrate and list models.
+// A Data Source block states:
+// - "for this method, only hydrate the specified fields, and ignore the rest"
 //
-// In this case, the include tree has only the `photo` field of `Weather`.
+// Only R2, KV, and Nav fields can be specified in the include tree. All scalar
+// fields are brought by default.
 source R2Only for Weather {
     include {
         photo

package/templates/default/src/web/index.html

@@ -1,203 +1,205 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cloesce Project</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: system-ui, sans-serif;
-            background: #f5f5f5;
-            padding: 20px;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            background: white;
-            border-radius: 8px;
-            overflow: hidden;
-        }
-
-        h1 {
-            background: linear-gradient(135deg, #1e3a8a, #1e40af);
-            color: white;
-            padding: 24px;
-            font-size: 24px;
-        }
-
-        .sections-wrapper {
-            padding: 20px;
-        }
-
-        .section {
-            border: 1px solid #e5e7eb;
-            margin-bottom: 16px;
-            border-radius: 6px;
-            overflow: hidden;
-        }
-
-        h2 {
-            color: #1f2937;
-            font-size: 14px;
-            padding: 12px 16px;
-            background: #f9fafb;
-            border-left: 4px solid #3b82f6;
-            display: flex;
-            align-items: center;
-        }
-
-        .section-content {
-            padding: 20px;
-            background: white;
-        }
-
-        .form-group {
-            margin-bottom: 16px;
-        }
-
-        label {
-            display: block;
-            margin-bottom: 6px;
-            color: #374151;
-            font-size: 13px;
-            font-weight: 600;
-        }
-
-        input,
-        textarea {
-            width: 100%;
-            padding: 8px 10px;
-            border: 1px solid #d1d5db;
-            border-radius: 4px;
-            font-size: 13px;
-        }
-
-        button {
-            background: #3b82f6;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 13px;
-            font-weight: 600;
-        }
-
-        .output {
-            margin-top: 16px;
-            padding: 12px;
-            background: #1f2937;
-            border-radius: 4px;
-            min-height: 50px;
-            font-family: monospace;
-            font-size: 12px;
-            color: #e5e7eb;
-            white-space: pre-wrap;
-            word-break: break-word;
-        }
-
-        .success {
-            color: #10b981;
-            font-weight: 600;
-        }
-
-        .error {
-            color: #ef4444;
-            font-weight: 600;
-        }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: system-ui, sans-serif;
+        background: #f5f5f5;
+        padding: 20px;
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        background: white;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      h1 {
+        background: linear-gradient(135deg, #1e3a8a, #1e40af);
+        color: white;
+        padding: 24px;
+        font-size: 24px;
+      }
+
+      .sections-wrapper {
+        padding: 20px;
+      }
+
+      .section {
+        border: 1px solid #e5e7eb;
+        margin-bottom: 16px;
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      h2 {
+        color: #1f2937;
+        font-size: 14px;
+        padding: 12px 16px;
+        background: #f9fafb;
+        border-left: 4px solid #3b82f6;
+        display: flex;
+        align-items: center;
+      }
+
+      .section-content {
+        padding: 20px;
+        background: white;
+      }
+
+      .form-group {
+        margin-bottom: 16px;
+      }
+
+      label {
+        display: block;
+        margin-bottom: 6px;
+        color: #374151;
+        font-size: 13px;
+        font-weight: 600;
+      }
+
+      input,
+      textarea {
+        width: 100%;
+        padding: 8px 10px;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        font-size: 13px;
+      }
+
+      button {
+        background: #3b82f6;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 13px;
+        font-weight: 600;
+      }
+
+      .output {
+        margin-top: 16px;
+        padding: 12px;
+        background: #1f2937;
+        border-radius: 4px;
+        min-height: 50px;
+        font-family: monospace;
+        font-size: 12px;
+        color: #e5e7eb;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      .success {
+        color: #10b981;
+        font-weight: 600;
+      }
+
+      .error {
+        color: #ef4444;
+        font-weight: 600;
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="container">
-        <h1>⛅ Cloesce Project - Weather Report Manager</h1>
-        <div class="sections-wrapper">
-            <div class="section">
-                <h2>List All Reports</h2>
-                <div class="section-content">
-                    <button onclick="listReports()">Get All Reports</button>
-                    <div id="list-output" class="output"></div>
-                </div>
+      <h1>⛅ Cloesce Project - Weather Report Manager</h1>
+      <div class="sections-wrapper">
+        <div class="section">
+          <h2>List All Reports</h2>
+          <div class="section-content">
+            <button onclick="listReports()">Get All Reports</button>
+            <div id="list-output" class="output"></div>
+          </div>
+        </div>
+        <div class="section">
+          <h2>Create/Update Report</h2>
+          <div class="section-content">
+            <div class="form-group">
+              <label>Title:</label>
+              <input type="text" id="save-title" placeholder="e.g., Weekly Weather Summary" />
+            </div>
+            <div class="form-group">
+              <label>Description:</label>
+              <textarea
+                id="save-desc"
+                rows="3"
+                placeholder="e.g., Weather report for the week"
+              ></textarea>
+            </div>
+            <button onclick="saveReport()">Save Report</button>
+            <div id="save-output" class="output"></div>
+          </div>
+        </div>
+        <div class="section">
+          <h2>Add Weather Entry to Report</h2>
+          <div class="section-content">
+            <div class="form-group">
+              <label>Report ID:</label>
+              <input type="number" id="entry-report-id" placeholder="Enter report ID" required />
             </div>
-            <div class="section">
-                <h2>Create/Update Report</h2>
-                <div class="section-content">
-                    <div class="form-group">
-                        <label>Title:</label>
-                        <input type="text" id="save-title" placeholder="e.g., Weekly Weather Summary">
-                    </div>
-                    <div class="form-group">
-                        <label>Description:</label>
-                        <textarea id="save-desc" rows="3" placeholder="e.g., Weather report for the week"></textarea>
-                    </div>
-                    <button onclick="saveReport()">Save Report</button>
-                    <div id="save-output" class="output"></div>
-                </div>
+            <div class="form-group">
+              <label>Location:</label>
+              <input type="text" id="entry-location" placeholder="e.g., Seattle, WA" />
             </div>
-            <div class="section">
-                <h2>Add Weather Entry to Report</h2>
-                <div class="section-content">
-                    <div class="form-group">
-                        <label>Report ID:</label>
-                        <input type="number" id="entry-report-id" placeholder="Enter report ID" required>
-                    </div>
-                    <div class="form-group">
-                        <label>Location:</label>
-                        <input type="text" id="entry-location" placeholder="e.g., Seattle, WA">
-                    </div>
-                    <div class="form-group">
-                        <label>Temperature (°F):</label>
-                        <input type="number" id="entry-temp" placeholder="e.g., 72">
-                    </div>
-                    <div class="form-group">
-                        <label>Condition:</label>
-                        <input type="text" id="entry-condition" placeholder="e.g., Sunny, Cloudy, Rainy">
-                    </div>
-                    <div class="form-group">
-                        <label>Date/Time:</label>
-                        <input type="datetime-local" id="entry-datetime">
-                    </div>
-                    <button onclick="addWeatherEntry()">Add Weather Entry</button>
-                    <div id="entry-output" class="output"></div>
-                </div>
+            <div class="form-group">
+              <label>Temperature (°F):</label>
+              <input type="number" id="entry-temp" placeholder="e.g., 72" />
             </div>
-            <div class="section">
-                <h2>Upload Photo to Weather Entry</h2>
-                <div class="section-content">
-                    <div class="form-group">
-                        <label>Weather Entry ID:</label>
-                        <input type="number" id="upload-id" placeholder="Enter weather entry ID">
-                    </div>
-                    <div class="form-group">
-                        <label>Photo File:</label>
-                        <input type="file" id="upload-file" accept="image/*">
-                    </div>
-                    <button onclick="uploadPhoto()">Upload Photo</button>
-                    <div id="upload-output" class="output"></div>
-                </div>
+            <div class="form-group">
+              <label>Condition:</label>
+              <input type="text" id="entry-condition" placeholder="e.g., Sunny, Cloudy, Rainy" />
             </div>
-            <div class="section">
-                <h2>Download Photo from Weather Entry</h2>
-                <div class="section-content">
-                    <div class="form-group">
-                        <label>Weather Entry ID:</label>
-                        <input type="number" id="download-id" placeholder="Enter weather entry ID">
-                    </div>
-                    <button onclick="downloadPhoto()">Download Photo</button>
-                    <div id="download-output" class="output"></div>
-                </div>
+            <div class="form-group">
+              <label>Date/Time:</label>
+              <input type="datetime-local" id="entry-datetime" />
             </div>
+            <button onclick="addWeatherEntry()">Add Weather Entry</button>
+            <div id="entry-output" class="output"></div>
+          </div>
         </div>
+        <div class="section">
+          <h2>Upload Photo to Weather Entry</h2>
+          <div class="section-content">
+            <div class="form-group">
+              <label>Weather Entry ID:</label>
+              <input type="number" id="upload-id" placeholder="Enter weather entry ID" />
+            </div>
+            <div class="form-group">
+              <label>Photo File:</label>
+              <input type="file" id="upload-file" accept="image/*" />
+            </div>
+            <button onclick="uploadPhoto()">Upload Photo</button>
+            <div id="upload-output" class="output"></div>
+          </div>
+        </div>
+        <div class="section">
+          <h2>Download Photo from Weather Entry</h2>
+          <div class="section-content">
+            <div class="form-group">
+              <label>Weather Entry ID:</label>
+              <input type="number" id="download-id" placeholder="Enter weather entry ID" />
+            </div>
+            <button onclick="downloadPhoto()">Download Photo</button>
+            <div id="download-output" class="output"></div>
+          </div>
+        </div>
+      </div>
     </div>
     <script type="module" src="index.ts"></script>
-</body>
-
-</html>
+  </body>
+</html>

package/templates/default/src/web/index.ts

@@ -1,127 +1,123 @@
-// All client code is generated under `@cloesce/client.js`.
-// Be careful to not use any imports under `@cloesce/backend.js` in the client.
-import { Weather, WeatherReport } from '@cloesce/client.js';
+import { Weather, WeatherReport } from "@cloesce/client.js";
 
 declare global {
-    interface Window {
-        listReports: () => Promise<void>;
-        saveReport: () => Promise<void>;
-        addWeatherEntry: () => Promise<void>;
-        uploadPhoto: () => Promise<void>;
-        downloadPhoto: () => Promise<void>;
-    }
+  interface Window {
+    listReports: () => Promise<void>;
+    saveReport: () => Promise<void>;
+    addWeatherEntry: () => Promise<void>;
+    uploadPhoto: () => Promise<void>;
+    downloadPhoto: () => Promise<void>;
+  }
 }
 
 const getValue = (id: string) => (document.getElementById(id) as HTMLInputElement).value;
 
 const showResult = (outputId: string, result: any) => {
-    const output = document.getElementById(outputId)!;
-    const status = result.ok ? 'success' : 'error';
-    const icon = result.ok ? '✓' : '✗';
-    const data = result.ok && result.data ? `\n${JSON.stringify(result.data, null, 2)}` : '';
-    output.innerHTML = `<div class="${status}">${icon} ${result.ok ? 'Success' : 'Error'} (${result.status})</div>${result.message || data}`;
+  const output = document.getElementById(outputId)!;
+  const status = result.ok ? "success" : "error";
+  const icon = result.ok ? "✓" : "✗";
+  const data = result.ok && result.data ? `\n${JSON.stringify(result.data, null, 2)}` : "";
+  output.innerHTML = `<div class="${status}">${icon} ${result.ok ? "Success" : "Error"} (${result.status})</div>${result.message || data}`;
 };
 
 window.listReports = async () => {
-    const result = await WeatherReport.$list({
-        lastSeen_id: 0,
-        limit: 100
-    })
-    showResult('list-output', result);
+  const result = await WeatherReport.$list(0, 100);
+  showResult("list-output", result);
 };
 
 window.saveReport = async () => {
-    const title = getValue('save-title');
-    const description = getValue('save-desc');
+  const title = getValue("save-title");
+  const description = getValue("save-desc");
 
-    if (!title) {
-        document.getElementById('save-output')!.innerHTML = '<div class="error">Please enter a title</div>';
-        return;
-    }
+  if (!title) {
+    document.getElementById("save-output")!.innerHTML =
+      '<div class="error">Please enter a title</div>';
+    return;
+  }
 
-    const result = await WeatherReport.$save({ title, description });
-    showResult('save-output', result);
+  const result = await WeatherReport.$save({ title, description });
+  showResult("save-output", result);
 };
 
 window.addWeatherEntry = async () => {
-    const reportId = parseInt(getValue('entry-report-id'));
-
-    if (!reportId) {
-        document.getElementById('entry-output')!.innerHTML = '<div class="error">Please enter a report ID</div>';
-        return;
-    }
-
-    const getResult = await WeatherReport.$get({
-        id: reportId
-    });
-    if (!getResult.ok) {
-        showResult('entry-output', getResult);
-        return;
-    }
-
-    const report = getResult.data!;
-    const newEntry = {
-        weatherReportId: reportId,
-        location: getValue('entry-location') || '',
-        temperature: parseFloat(getValue('entry-temp')) || 0,
-        condition: getValue('entry-condition') || '',
-        dateTime: getValue('entry-datetime') ? new Date(getValue('entry-datetime')) : new Date()
-    };
-
-    const result = await WeatherReport.$save({
-        id: report.id,
-        title: report.title,
-        description: report.description,
-        weatherEntries: [...(report.weatherEntries || []), newEntry]
-    });
-
-    showResult('entry-output', result);
+  const reportId = parseInt(getValue("entry-report-id"));
+
+  if (!reportId) {
+    document.getElementById("entry-output")!.innerHTML =
+      '<div class="error">Please enter a report ID</div>';
+    return;
+  }
+
+  const getResult = await WeatherReport.$get(reportId);
+  if (!getResult.ok) {
+    showResult("entry-output", getResult);
+    return;
+  }
+
+  const report = getResult.data!;
+  const newEntry = {
+    weatherReportId: reportId,
+    location: getValue("entry-location") || "",
+    temperature: parseFloat(getValue("entry-temp")) || 0,
+    condition: getValue("entry-condition") || "",
+    dateTime: getValue("entry-datetime") ? new Date(getValue("entry-datetime")) : new Date(),
+  };
+
+  const result = await WeatherReport.$save({
+    id: report.id,
+    title: report.title,
+    description: report.description,
+    weatherEntries: [...(report.weatherEntries || []), newEntry],
+  });
+
+  showResult("entry-output", result);
 };
 
 window.uploadPhoto = async () => {
-    const id = parseInt(getValue('upload-id'));
-    const fileInput = document.getElementById('upload-file') as HTMLInputElement;
-    const output = document.getElementById('upload-output')!;
-
-    if (!id) {
-        output.innerHTML = '<div class="error">Please enter a weather entry ID</div>';
-        return;
-    }
-
-    if (!fileInput.files?.[0]) {
-        output.innerHTML = '<div class="error">Please select a file</div>';
-        return;
-    }
-
-    const buffer = await fileInput.files[0].arrayBuffer();
-    const weather = new Weather();
-    weather.id = id;
-
-    const result = await weather.uploadPhoto(new Uint8Array(buffer));
-    showResult('upload-output', result);
+  const id = parseInt(getValue("upload-id"));
+  const fileInput = document.getElementById("upload-file") as HTMLInputElement;
+  const output = document.getElementById("upload-output")!;
+
+  if (!id) {
+    output.innerHTML = '<div class="error">Please enter a weather entry ID</div>';
+    return;
+  }
+
+  if (!fileInput.files?.[0]) {
+    output.innerHTML = '<div class="error">Please select a file</div>';
+    return;
+  }
+
+  const buffer = await fileInput.files[0].arrayBuffer();
+  const weather = new Weather();
+  weather.id = id;
+
+  const result = await weather.uploadPhoto(new Uint8Array(buffer));
+  showResult("upload-output", result);
 };
 
 window.downloadPhoto = async () => {
-    const id = parseInt(getValue('download-id'));
-
-    if (!id) {
-        document.getElementById('download-output')!.innerHTML = '<div class="error">Please enter a weather entry ID</div>';
-        return;
-    }
-
-    const weather = new Weather();
-    weather.id = id;
-    const result = await weather.downloadPhoto();
-
-    if (result.ok && result.data) {
-        const blob = await result.data.blob();
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `weather-photo-${id}.jpg`;
-        a.click();
-        URL.revokeObjectURL(url);
-    }
-
-    showResult('download-output', result);
-};
+  const id = parseInt(getValue("download-id"));
+
+  if (!id) {
+    document.getElementById("download-output")!.innerHTML =
+      '<div class="error">Please enter a weather entry ID</div>';
+    return;
+  }
+
+  const weather = new Weather();
+  weather.id = id;
+  const result = await weather.downloadPhoto();
+
+  if (result.ok && result.data) {
+    const blob = await result.data.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `weather-photo-${id}.jpg`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  showResult("download-output", result);
+};

package/templates/default/src/web/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": [],
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "paths": {
+      "@cloesce/*": ["../../.cloesce/*"],
+    },
+    "noEmit": true,
+  },
+  "include": ["*.ts"],
+}

package/templates/default/test/setup.ts

@@ -0,0 +1,28 @@
+import { env } from "cloudflare:workers";
+import { applyD1Migrations, type D1Migration } from "cloudflare:test";
+import { beforeAll, inject } from "vitest";
+import * as clo from "../.cloesce/backend.js";
+
+declare module "vitest" {
+  interface ProvidedContext {
+    migrations: D1Migration[];
+  }
+}
+
+declare global {
+  namespace Cloudflare {
+    interface Env extends clo.CfEnv {}
+  }
+}
+
+beforeAll(async () => {
+  const migrations = inject("migrations");
+  await applyD1Migrations(env.db, migrations);
+  await clo.cloesce(env).forceLoad();
+});
+
+export function upgraded() {
+  return clo.upgradeEnv(env);
+}
+
+export { env };

package/templates/default/test/weather.test.ts

@@ -1,80 +1,38 @@
-import { Miniflare } from "miniflare";
-import { describe, test, expect, beforeAll } from "vitest";
-import { Weather, WeatherReport } from "@api/main.js"
-import { cloesce } from "@cloesce/backend.js";
-
-async function createTestEnv() {
-    const mf = new Miniflare({
-        modules: true,
-        script: `export default { async fetch() { return new Response("Hello!"); } }`,
-        d1Databases: ["db"],
-        r2Buckets: ["bucket"],
-    });
-
-    const db = await mf.getD1Database("db");
-    const bucket = await mf.getR2Bucket("bucket");
-    const env = { db, bucket } as any;
-
-    // Run any necessary migrations
-    // TODO: Does Cloudflare have a way to do this automatically in tests?
-    await db.prepare(`
---- New Models
-CREATE TABLE IF NOT EXISTS "WeatherReport" (
-  "id" integer PRIMARY KEY,
-  "title" text NOT NULL,
-  "description" text NOT NULL
-);
-
-CREATE TABLE IF NOT EXISTS "Weather" (
-  "id" integer PRIMARY KEY,
-  "weatherReportId" integer NOT NULL,
-  "dateTime" text NOT NULL,
-  "location" text NOT NULL,
-  "temperature" integer NOT NULL,
-  "condition" text NOT NULL,
-  FOREIGN KEY ("weatherReportId") REFERENCES "WeatherReport" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
-);
-
---- Cloesce Temporary Table
-CREATE TABLE IF NOT EXISTS "_cloesce_tmp" (
-  "path" text PRIMARY KEY,
-  "primary_key" text NOT NULL
-);
-  `).run();
-
-    return env;
-}
-
-beforeAll(() => cloesce());
-
-// Here we will test our Cloesce models against a Miniflare environment.
-// This does not use any client stubs; it interacts directly with the Miniflare instance.
-describe("Miniflare Integration Tests", () => {
-    test("Download a thumbnail", async () => {
-        // Arrange
-        const env = await createTestEnv();
-        const testData = "test-data";
-
-        const report = (await WeatherReport.Orm.save(env, {
-            title: "Test Report",
-            description: "This is a test weather report.",
-            weatherEntries: [{
-                dateTime: new Date(),
-                location: "Test Location",
-                temperature: 25,
-                condition: "Sunny"
-            }]
-        }))!;
-
-        await Weather.uploadPhoto(report.weatherEntries[0], env, testData as any);
-
-        // Act
-        const weatherEntries = (await Weather.Default.list(env, 0, 100))!;
-        const photo = Weather.downloadPhoto(weatherEntries[0]);
-
-        // Assert
-        expect(photo.ok).toBe(true);
-        const downloadedText = await new Response(photo.data as any).text();
-        expect(downloadedText).toBe(testData);
-    });
-});
+import { describe, test, expect } from "vitest";
+import { Weather, WeatherReport } from "@api/main.js";
+import { upgraded } from "./setup.js";
+
+// This does not use any client stubs; it interacts directly with the bound D1/R2 instances.
+describe("Cloudflare Workers Integration Tests", () => {
+  test("Download a thumbnail", async () => {
+    // Arrange
+    const env = upgraded();
+    const testData = "test-data";
+
+    const report = (
+      await WeatherReport.Orm.save(env, {
+        title: "Test Report",
+        description: "This is a test weather report.",
+        weatherEntries: [
+          {
+            dateTime: new Date(),
+            location: "Test Location",
+            temperature: 25,
+            condition: "Sunny",
+          },
+        ],
+      })
+    ).value!;
+
+    await Weather.uploadPhoto(report.weatherEntries[0], env, testData as any);
+
+    // Act
+    const weatherEntries = (await Weather.Default.list(env, 0, 100)).data!;
+    const photo = Weather.downloadPhoto(weatherEntries[0]);
+
+    // Assert
+    expect(photo.ok).toBe(true);
+    const downloadedText = await new Response(photo.data as any).text();
+    expect(downloadedText).toBe(testData);
+  });
+});

package/templates/default/tsconfig.json

@@ -1,24 +1,18 @@
 {
-  // Visit https://aka.ms/tsconfig to read more about this file
   "compilerOptions": {
-    "module": "node20",
+    "module": "NodeNext",
     "target": "ES2020",
-    "moduleResolution": "node16",
-    "types": [],
+    "moduleResolution": "nodenext",
+    "types": ["@cloudflare/workers-types", "@cloudflare/vitest-pool-workers/types"],
     "skipLibCheck": true,
 
-    // Cloesce required options
-    "resolveJsonModule": true,
-    "strict": true,
-    "strictPropertyInitialization": false,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
     "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
     "paths": {
       "@api/*": ["./src/api/*"],
       "@cloesce/*": ["./.cloesce/*"],
     },
     "outDir": "dist",
   },
-  "include": [".cloesce/*.ts", "src/**/*.ts", "test/**/*.ts"],
+  "include": [".cloesce/*.ts", "src/api/**/*.ts", "tests/**/*.ts", "migrations/**/*.ts"],
 }

package/templates/default/vite.config.ts

@@ -1,7 +1,9 @@
 import { defineConfig } from "vite";
-import tsconfigPaths from "vite-tsconfig-paths";
+import { fileURLToPath } from "url";
 
 export default defineConfig({
-    plugins: [tsconfigPaths()],
-    root: "./src/web"
+  root: "./src/web",
+  resolve: {
+    alias: { "@cloesce": fileURLToPath(new URL("./.cloesce", import.meta.url)) },
+  },
 });

package/templates/default/vitest.config.ts

@@ -1,6 +1,25 @@
 import { defineConfig } from "vitest/config";
-import tsconfigPaths from "vite-tsconfig-paths";
+import { cloudflareTest, readD1Migrations } from "@cloudflare/vitest-pool-workers";
+import { fileURLToPath } from "url";
+
+const resolve = (p: string) => fileURLToPath(new URL(p, import.meta.url));
 
 export default defineConfig({
-    plugins: [tsconfigPaths()]
-});
+  resolve: {
+    alias: {
+      "@cloesce": resolve("./.cloesce"),
+      "@api": resolve("./src/api"),
+    },
+  },
+  plugins: [
+    cloudflareTest({
+      main: "./src/api/main.ts",
+      wrangler: { configPath: "./wrangler.jsonc" },
+    }),
+  ],
+  test: {
+    provide: {
+      migrations: await readD1Migrations("./migrations/db"),
+    },
+  },
+});