create-cloesce 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+# Create Cloesce App
+
+Creates a Cloesce application from a template.

package/dist/cli.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+"use strict";var m=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var d=(e,r,t,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of c(r))!f.call(e,o)&&o!==t&&a(e,o,{get:()=>r[o],enumerable:!(s=l(r,o))||s.enumerable});return e};var v=(e,r,t)=>(t=e!=null?m(u(e)):{},d(r||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e));var i=require("create-create-app"),n=require("path"),p=v(require("fs")),w=(0,n.resolve)(__dirname,"..","templates"),y=`
+To build your Cloesce project, run:
+- npm run build
+- npm run migrate:cloesce Initial
+- npm run migrate:wrangler
+
+To start your Cloesce project in development mode, in seperate terminals, run:
+- npm run start:dev
+- npm run start:web
+`;(0,i.create)("create-cloesce",{templateRoot:w,promptForLicense:!1,promptForDescription:!1,promptForEmail:!1,promptForAuthor:!1,skipNpmInstall:!0,defaultLicense:"UNLICENSED",after:async({installNpmPackage:e,packageDir:r})=>{p.default.mkdirSync((0,n.resolve)(r,"migrations")),await e("cloesce wrangler"),await e("@cloudflare/workers-types miniflare vite-tsconfig-paths vitest typescript",!0)},caveat:y});

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "create-cloesce",
+  "description": "Create Cloesce App",
+  "version": "0.0.1",
+  "author": "Ben Schreiber <bpschreiber2003@gmail.com>",
+  "scripts": {
+    "build": "tsup src/cli.ts --minify",
+    "dev": "tsup src/cli.ts --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "bin": "dist/cli.js",
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "devDependencies": {
+    "@types/node": "^17.0.29",
+    "tsup": "^5.12.1",
+    "typescript": "^4.6.3"
+  },
+  "license": "Apache-2.0",
+  "dependencies": {
+    "create-create-app": "^7.3.0"
+  }
+}

package/templates/default/cloesce.config.json

@@ -0,0 +1,7 @@
+{
+    "paths": [
+        "./src/data"
+    ],
+    "workersUrl": "http://localhost:5000/api",
+    "migrationsPath": "./migrations"
+}

package/templates/default/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "cloesce-proj",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "cloesce compile && wrangler build",
+    "migrate:cloesce": "cloesce migrate",
+    "migrate:wrangler": "wrangler d1 migrations apply db",
+    "start:dev": "wrangler dev --port 5000",
+    "start:web": "vite",
+    "test": "vitest"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs"
+}

package/templates/default/src/data/main.cloesce.ts

@@ -0,0 +1,46 @@
+import { WranglerEnv, CloesceApp, HttpResult } from "cloesce/backend";
+import { D1Database, R2Bucket, ExecutionContext } from "@cloudflare/workers-types";
+
+/**
+ * Compiles to the Wrangler configuration file, defining bindings
+ * for the Cloudflare Worker environment.
+ */
+@WranglerEnv
+export class Env {
+    db: D1Database;
+    bucket: R2Bucket;
+    myVariable: string;
+}
+
+// Basic main entry point for a Cloesce App.
+// Does not need to be defined if no customizations are required.
+export default async function main(
+    request: Request,
+    env: Env,
+    app: CloesceApp,
+    _ctx: ExecutionContext): Promise<Response> {
+    // preflight
+    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();
+    }
+
+    // Run Cloesce app
+    const result = await app.run(request, env);
+
+    // 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"
+    );
+
+    return result;
+}

package/templates/default/src/data/models.cloesce.ts

@@ -0,0 +1,65 @@
+import { GET, POST, HttpResult, IncludeTree, Integer, Model, R2, Inject } from "cloesce/backend";
+import { R2ObjectBody, ReadableStream } from "@cloudflare/workers-types";
+import { Env } from "./main.cloesce";
+
+@Model()
+export class Weather {
+    // Cloesce interprets this is a primary key.
+    // Optionally, decorate with @PrimaryKey
+    id: Integer;
+
+    // Foreign key to WeatherReport
+    // Optionally, decorate with @ForeignKey
+    weatherReportId: Integer;
+
+    // Navigation property to weatherReportId
+    // Optionally, decorate with @OneToOne<Weather>(w => w.weatherReportId)
+    weatherReport: WeatherReport | undefined;
+
+    dateTime: Date;
+    location: string;
+    temperature: number;
+    condition: string;
+
+    @R2("weather/photo/{id}", "bucket")
+    photo: R2ObjectBody | undefined;
+
+    // Hydrates the photo when the client calls "withPhoto"
+    static readonly withPhoto: IncludeTree<Weather> = {
+        photo: {}
+    }
+
+    @POST
+    async uploadPhoto(@Inject env: Env, stream: ReadableStream): Promise<HttpResult<void>> {
+        await env.bucket.put(`weather/photo/${this.id}`, stream);
+        return HttpResult.ok(200);
+    }
+
+    @GET
+    downloadPhoto(): HttpResult<ReadableStream> {
+        if (!this.photo) {
+            return HttpResult.fail(404, "Photo not found");
+        }
+        return HttpResult.ok(200, this.photo.body);
+    }
+}
+
+@Model(["GET", "LIST", "SAVE"])
+export class WeatherReport {
+    // Cloesce assumes this is a primary key.
+    // Optionally, decorate with @PrimaryKey
+    id: Integer;
+
+    title: string;
+    description: string;
+
+    // Cloesce assumes this is a foreign key to Weather.weatherReportId
+    // Optionally, or if multiple FKs exist, decorate with
+    // @OneToMany<Weather>(w => w.weatherReportId)
+    weatherEntries: Weather[];
+
+    // Hydrates the weatherEntries when the client calls "withWeatherEntries"
+    static readonly withWeatherEntries: IncludeTree<WeatherReport> = {
+        weatherEntries: {}
+    }
+}

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

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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;
+        }
+    </style>
+</head>
+
+<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>
+            </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="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>
+            <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>

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

@@ -0,0 +1,120 @@
+import { Weather, WeatherReport } from '@generated/client';
+
+declare global {
+    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}`;
+};
+
+window.listReports = async () => {
+    const result = await WeatherReport.LIST("withWeatherEntries");
+    showResult('list-output', result);
+};
+
+window.saveReport = async () => {
+    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;
+    }
+
+    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(reportId, "withWeatherEntries");
+    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]
+    }, "withWeatherEntries");
+
+    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), "withPhoto");
+    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("withPhoto");
+
+    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/test/weather.test.ts

@@ -0,0 +1,82 @@
+import { Miniflare } from "miniflare";
+import { describe, test, expect, beforeAll } from "vitest";
+import { Orm, CloesceApp } from "cloesce/backend";
+import { cidl, constructorRegistry } from "@generated/workers";
+import { Weather, WeatherReport } from "@data/models.cloesce";
+
+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(`
+    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" real NOT NULL,
+      "condition" text NOT NULL,
+      FOREIGN KEY ("weatherReportId") REFERENCES "WeatherReport" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+    );
+    CREATE TABLE IF NOT EXISTS "_cloesce_tmp" ("path" text PRIMARY KEY, "id" integer NOT NULL);
+  `).run();
+
+    return { env, orm: Orm.fromEnv(env) };
+}
+
+// Cloesce must be initialized before utilizing any ORM features.
+// It takes in the generated Cloesce Interface Definition Language (CIDL)
+// and the generated constructor registry. Both may be imported from
+// "@generated/workers" as shown above.
+beforeAll(() => CloesceApp.init(cidl as any, constructorRegistry));
+
+// 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, orm } = await createTestEnv();
+        const testData = "test-data";
+
+        const report = await orm.upsert(
+            WeatherReport,
+            {
+                title: "Test Report",
+                description: "This is a test weather report.",
+                weatherEntries: [{
+                    dateTime: new Date(),
+                    location: "Test Location",
+                    temperature: 25,
+                    condition: "Sunny"
+                }]
+            },
+            WeatherReport.withWeatherEntries
+        );
+
+        await report!.weatherEntries[0].uploadPhoto(env, testData as any);
+
+        // Act
+        const weatherEntries = await orm.list(Weather, Weather.withPhoto);
+        const photo = weatherEntries[0].downloadPhoto();
+
+        // 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

@@ -0,0 +1,24 @@
+{
+  // Visit https://aka.ms/tsconfig to read more about this file
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "node",
+    "types": [],
+    "skipLibCheck": true,
+
+    // Cloesce required options
+    "resolveJsonModule": true,
+    "strict": true,
+    "strictPropertyInitialization": false,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "allowSyntheticDefaultImports": true,
+    "paths": {
+      "@data/*": ["./src/data/*"],
+      "@generated/*": ["./.generated/*"],
+    },
+    "outDir": "dist",
+  },
+  "include": [".generated/*.ts", "src/**/*.ts", "test/**/*.ts"],
+}

package/templates/default/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+    plugins: [tsconfigPaths()],
+    root: "./src/web"
+});

package/templates/default/wrangler.toml

@@ -0,0 +1 @@
+main = ".generated/workers.ts"