create-fff-app 0.1.0

package/template/schema.sql

@@ -0,0 +1,25 @@
+-- fff-stack starter schema
+-- Deploy with: wrangler d1 execute fff-stack-db --file=schema.sql
+
+CREATE TABLE IF NOT EXISTS users (
+  id         TEXT PRIMARY KEY,
+  name       TEXT NOT NULL,
+  created_at TEXT NOT NULL DEFAULT (datetime('now'))
+);
+
+CREATE INDEX IF NOT EXISTS idx_users_created_at ON users(created_at);
+
+CREATE TABLE IF NOT EXISTS posts (
+  id           TEXT PRIMARY KEY,
+  author_id    TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  title        TEXT NOT NULL,
+  slug         TEXT NOT NULL UNIQUE,
+  body         TEXT NOT NULL,
+  published_at TEXT,
+  created_at   TEXT NOT NULL DEFAULT (datetime('now')),
+  updated_at   TEXT NOT NULL DEFAULT (datetime('now'))
+);
+
+CREATE INDEX IF NOT EXISTS idx_posts_slug       ON posts(slug);
+CREATE INDEX IF NOT EXISTS idx_posts_author_id  ON posts(author_id);
+CREATE INDEX IF NOT EXISTS idx_posts_created_at ON posts(created_at);

package/template/src/client/App.fs

@@ -0,0 +1,55 @@
+module App.Client.App
+
+open FffStack.Client
+open Fable.Core
+open Browser
+open Browser.Types
+
+// ── Island registry ────────────────────────────────────────────────────────────
+
+let private registry = System.Collections.Generic.Dictionary<string, Component>()
+
+/// Returns the first mounted instance of the named island, if any.
+let findIsland<'T when 'T :> Component> (name: string) : 'T option =
+    match registry.TryGetValue(name) with
+    | true, c -> c :?> 'T |> Some
+    | _       -> None
+
+// ── Island mounting ────────────────────────────────────────────────────────────
+
+let private ensureId (el: HTMLElement) (name: string) : string =
+    if el.id <> "" then el.id
+    else
+        let id = sprintf "island-%s" (name.ToLower())
+        el.id <- id
+        id
+
+let private mountOne (el: HTMLElement) : unit =
+    let name = el?dataset?island |> string
+    let id   = ensureId el name
+    // Add islands here when needed:
+    // | "MyComponent" -> Some (upcast MyComponent(id))
+    let instance : Component option =
+        match name with
+        | unknown ->
+            console.warn (sprintf "[fff-stack] Unknown island: %s" unknown)
+            None
+    instance |> Option.iter (fun comp ->
+        if int el.children.length > 0 then comp.Hydrate()
+        else comp.Mount()
+        if not (registry.ContainsKey(name)) then
+            registry.[name] <- comp)
+
+/// Mount every [data-island] element in the current page.
+let mountIslands () =
+    let nodes = document.querySelectorAll "[data-island]"
+    for i in 0 .. int nodes.length - 1 do
+        mountOne (nodes.item(float i) :?> HTMLElement)
+
+// ── Entry point ────────────────────────────────────────────────────────────────
+
+let init () =
+    mountIslands ()
+    Nav.init mountIslands  // client-side navigation; re-mounts islands after page swap
+
+do init ()

package/template/src/client/Client.fsproj

@@ -0,0 +1,24 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <RootNamespace>App.Client</RootNamespace>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <Compile Include="Nav.fs" />
+    <Compile Include="App.fs" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Fable.Promise" Version="3.*" />
+    <PackageReference Include="Fable.Fetch" Version="2.*" />
+    <PackageReference Include="Fable.Browser.Dom" Version="2.*" />
+    <PackageReference Include="Fable.Browser.Event" Version="1.*" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="FffStack.Client" Version="0.1.0" />
+  </ItemGroup>
+
+</Project>

package/template/src/client/Nav.fs

@@ -0,0 +1,75 @@
+module App.Client.Nav
+
+open Fable.Core
+open Fable.Core.JsInterop
+open Browser
+open Browser.Types
+
+// ── Client-side navigation ────────────────────────────────────────────────────
+// Intercepts same-origin link clicks, fetches the target page with fetch(),
+// swaps <main> content, and updates history — no full page reload.
+// Falls back to normal navigation for external links, downloads, or errors.
+
+let private mainSelector = "main"
+let private navSelector  = ".site-nav"
+
+let mutable private onNavigated : (unit -> unit) = ignore
+
+/// Update the active state of navigation links based on the new pathname.
+let private updateNav (pathname: string) =
+    let nodes = document.querySelectorAll (sprintf "%s a" navSelector)
+    for i in 0 .. int nodes.length - 1 do
+        let a = nodes.item(float i) :?> HTMLAnchorElement
+        let href = a.getAttribute "href"
+        if href = pathname then a.classList.add "active"
+        else                    a.classList.remove "active"
+
+/// Fetch a page and swap just its <main> content into the current page.
+let private navigate (url: string) : JS.Promise<unit> =
+    promise {
+        let! resp = Fetch.fetch url []
+        let ok : bool = resp?ok
+        if not ok then
+            window.location.href <- url
+        else
+            let! htmlObj = resp?text()
+            let html = string htmlObj
+            let parser : obj  = emitJsExpr () "new DOMParser()"
+            let doc    : obj  = emitJsExpr (parser, html) "$0.parseFromString($1, 'text/html')"
+            let newMain : obj = doc?querySelector(mainSelector)
+            let curMain : obj = document?querySelector(mainSelector)
+            if not (isNull newMain) && not (isNull curMain) then
+                curMain?innerHTML <- newMain?innerHTML
+                let uri : obj    = emitJsExpr (url, window.location.href) "new URL($0, $1)"
+                let pathname : string = uri?pathname
+                window.history.pushState(null, "", pathname)
+                updateNav pathname
+                onNavigated()
+            else
+                window.location.href <- url
+    }
+
+/// Intercept clicks on same-origin links.
+let private onClick (e: Event) =
+    let el = e.target :?> HTMLElement
+    match el.closest "a" with
+    | None -> ()
+    | Some a ->
+        let anchor = a :?> HTMLAnchorElement
+        let isSameOrigin : bool = anchor?origin |> string = window.location.origin
+        let isPlainClick  = not (e?metaKey || e?ctrlKey || e?shiftKey || e?altKey)
+        let hasNoTarget   = anchor.target = "" || anchor.target = "_self"
+        let hasNoDownload = anchor.getAttribute "download" |> isNull
+        if isSameOrigin && isPlainClick && hasNoTarget && hasNoDownload then
+            e.preventDefault()
+            navigate anchor.href |> ignore
+
+/// Handle the browser back/forward buttons.
+let private onPopState (_e: Event) =
+    navigate window.location.href |> ignore
+
+/// Initialise client-side navigation. Pass mountIslands as callback to re-mount islands after navigation.
+let init (mountFn: unit -> unit) =
+    onNavigated <- mountFn
+    document.addEventListener ("click",   onClick)
+    window.addEventListener   ("popstate", onPopState)

package/template/src/server/Domain/Employees/Employee.fs

@@ -0,0 +1,34 @@
+namespace App.Server.Domain.Employees
+
+// ── Value objects ──────────────────────────────────────────────────────────────
+
+type EmployeeName = private EmployeeName of string
+
+module EmployeeName =
+    let create (raw: string) =
+        let t = raw.Trim()
+        if   t.Length < 2   then Error "Name must be at least 2 characters"
+        elif t.Length > 100 then Error "Name must be at most 100 characters"
+        else Ok (EmployeeName t)
+    let value (EmployeeName n) = n
+
+type WorkEmail = private WorkEmail of string
+
+module WorkEmail =
+    let create (raw: string) =
+        let t = raw.Trim().ToLowerInvariant()
+        if not (t.Contains "@") || t.Length < 5 then Error "Invalid email address"
+        else Ok (WorkEmail t)
+    let value (WorkEmail e) = e
+
+// ── Entity ─────────────────────────────────────────────────────────────────────
+
+type Employee = {
+    id:         string
+    name:       string
+    email:      string
+    department: string
+    role:       string
+    status:     string   // "active" | "inactive"
+    joinedAt:   string
+}

package/template/src/server/Endpoints/Employees/Routes.fs

@@ -0,0 +1,35 @@
+module App.Server.Endpoints.Employees.Routes
+
+open FffStack.Server
+open Fable.Core.JsInterop
+open App.Server.Workflows.Employees
+
+let register (router: Router) : unit =
+    router
+
+        .Get("/api/employees", fun ctx ->
+            promise {
+                let db = Env.requireD1 ctx.Env "DB"
+                let! employees = getAll db
+                return Response.json (employees |> List.toArray)
+            })
+
+        .Post("/api/employees", fun ctx ->
+            promise {
+                let db   = Env.requireD1 ctx.Env "DB"
+                let! body = ctx.Request.json<{| name: string; email: string; department: string; role: string; status: string |}>()
+                match! create db body.name body.email body.department body.role body.status with
+                | Error e -> return Response.badRequest e
+                | Ok emp  -> return Response.created emp
+            })
+
+        .Delete("/api/employees/:id", fun ctx ->
+            promise {
+                let id = ctx.Params.["id"]
+                let db = Env.requireD1 ctx.Env "DB"
+                let! ok = delete db id
+                if ok then return Response.noContent ()
+                else return Response.notFound (sprintf "Employee '%s' not found" id)
+            })
+
+    |> ignore

package/template/src/server/Endpoints/Pages/About.fjsx

@@ -0,0 +1,66 @@
+<section class="card">
+  <div class="card-label">About</div>
+  <h2>fff-stack</h2>
+  <p class="about-lead">
+    A fullstack F# framework for <strong>Cloudflare Workers</strong>,
+    D1, and R2. Write your entire application — client, server, and
+    templates — in F#. Zero JavaScript by hand.
+  </p>
+
+  <h3>Architecture</h3>
+  <ul class="about-list">
+    <li>
+      <strong>FJSX</strong> — Svelte-style templates compiled to
+      optimised DOM operations. No virtual DOM.
+    </li>
+    <li>
+      <strong>F# Client Runtime</strong> — class-based components
+      with <code>OnMount</code> / <code>OnUpdate</code> /
+      <code>OnDispose</code> lifecycle hooks.
+    </li>
+    <li>
+      <strong>F# Server Runtime</strong> — chainable Router,
+      D1/R2 bindings, Validation DSL, and Middleware pipeline.
+    </li>
+    <li>
+      <strong>Islands Architecture</strong> — the server renders
+      full HTML; client JavaScript only hydrates interactive islands.
+    </li>
+  </ul>
+
+  <h3>Quick Start</h3>
+  <pre class="code-block"><code>bunx create-fff-app my-app
+cd my-app &amp;&amp; bun run demo      # dev server (no .NET needed)
+bun dev                         # full stack with wrangler
+wrangler deploy                 # ship to Cloudflare</code></pre>
+</section>
+
+<section class="card">
+  <div class="card-label">Stack</div>
+  <div class="stack-grid">
+    <div class="stack-item">
+      <span class="stack-name">Language</span>
+      <span class="stack-value">F# (Fable → JS)</span>
+    </div>
+    <div class="stack-item">
+      <span class="stack-name">Runtime</span>
+      <span class="stack-value">Cloudflare Workers</span>
+    </div>
+    <div class="stack-item">
+      <span class="stack-name">Database</span>
+      <span class="stack-value">Cloudflare D1 (SQLite)</span>
+    </div>
+    <div class="stack-item">
+      <span class="stack-name">Storage</span>
+      <span class="stack-value">Cloudflare R2</span>
+    </div>
+    <div class="stack-item">
+      <span class="stack-name">Templates</span>
+      <span class="stack-value">FJSX (custom compiler)</span>
+    </div>
+    <div class="stack-item">
+      <span class="stack-name">Dev Tool</span>
+      <span class="stack-value">Bun</span>
+    </div>
+  </div>
+</section>

package/template/src/server/Endpoints/Pages/EmployeeEdit.fjsx

@@ -0,0 +1,66 @@
+<section class="card">
+  <div class="list-header">
+    <h1>Edit Employee</h1>
+    <a href="/" class="btn btn-ghost btn-sm">← Back to list</a>
+  </div>
+
+  <form method="POST" action="/employees/update">
+    <input type="hidden" name="id" value={this.id} />
+    <div class="form-row">
+      <div class="form-group">
+        <label for="name">Full Name</label>
+        <input type="text" id="name" name="name" value={this.name} required />
+      </div>
+      <div class="form-group">
+        <label for="email">Work Email</label>
+        <input type="email" id="email" name="email" value={this.email} required />
+      </div>
+    </div>
+    <div class="form-row">
+      <div class="form-group">
+        <label for="department">Department</label>
+        <select id="department" name="department" required>
+          {#each this.departments as dept}
+          {#if dept.isSelected}
+          <option value={dept.value} selected="selected">{dept.value}</option>
+          {:else}
+          <option value={dept.value}>{dept.value}</option>
+          {/if}
+          {/each}
+        </select>
+      </div>
+      <div class="form-group">
+        <label for="role">Job Title</label>
+        <input type="text" id="role" name="role" value={this.role} required />
+      </div>
+    </div>
+    <div class="form-group">
+      <label>Status</label>
+      <div class="radio-group">
+        {#if this.statusIsActive}
+        <label class="form-checkbox">
+          <input type="radio" name="status" value="active" checked />
+          Active
+        </label>
+        <label class="form-checkbox">
+          <input type="radio" name="status" value="inactive" />
+          Inactive
+        </label>
+        {:else}
+        <label class="form-checkbox">
+          <input type="radio" name="status" value="active" />
+          Active
+        </label>
+        <label class="form-checkbox">
+          <input type="radio" name="status" value="inactive" checked />
+          Inactive
+        </label>
+        {/if}
+      </div>
+    </div>
+    <div class="form-actions">
+      <button type="submit" class="btn btn-primary">Save Changes</button>
+      <a href="/" class="btn btn-secondary">Cancel</a>
+    </div>
+  </form>
+</section>

package/template/src/server/Endpoints/Pages/EmployeeList.fjsx

@@ -0,0 +1,54 @@
+<section class="card">
+  <div class="list-header">
+    <h1>Employees</h1>
+    <a href="/employees/new" class="btn btn-primary">Add Employee</a>
+  </div>
+
+  <div class="stat-bar">
+    <span class="badge badge-neutral">{this.total} Total</span>
+    <span class="badge badge-success">{this.active} Active</span>
+  </div>
+
+  {#if this.isEmpty}
+  <p class="empty-state">No employees yet. Add the first one using the button above.</p>
+  {:else}
+  <table class="data-table">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Email</th>
+        <th>Department</th>
+        <th>Job Title</th>
+        <th>Status</th>
+        <th>Joined</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each this.employees as emp}
+      <tr>
+        <td class="font-medium">{emp.name}</td>
+        <td class="text-muted">{emp.email}</td>
+        <td>{emp.department}</td>
+        <td>{emp.role}</td>
+        <td>
+          {#if emp.isActive}
+          <span class="badge badge-success">Active</span>
+          {:else}
+          <span class="badge badge-neutral">Inactive</span>
+          {/if}
+        </td>
+        <td class="text-muted text-mono">{emp.joinedAt}</td>
+        <td class="actions">
+          <a href={emp.editUrl} class="btn btn-ghost btn-sm">Edit</a>
+          <form method="POST" action="/employees/delete">
+            <input type="hidden" name="id" value={emp.id} />
+            <button type="submit" class="btn btn-ghost btn-sm" style="color:var(--fff-danger)">Remove</button>
+          </form>
+        </td>
+      </tr>
+      {/each}
+    </tbody>
+  </table>
+  {/if}
+</section>

package/template/src/server/Endpoints/Pages/EmployeeNew.fjsx

@@ -0,0 +1,55 @@
+<section class="card">
+  <div class="list-header">
+    <h1>Add Employee</h1>
+    <a href="/" class="btn btn-ghost btn-sm">← Back to list</a>
+  </div>
+
+  <form method="POST" action="/employees">
+    <div class="form-row">
+      <div class="form-group">
+        <label for="name">Full Name</label>
+        <input type="text" id="name" name="name" placeholder="Jane Smith" required />
+      </div>
+      <div class="form-group">
+        <label for="email">Work Email</label>
+        <input type="email" id="email" name="email" placeholder="jane@company.com" required />
+      </div>
+    </div>
+    <div class="form-row">
+      <div class="form-group">
+        <label for="department">Department</label>
+        <select id="department" name="department" required>
+          <option value="">Select department…</option>
+          <option value="Engineering">Engineering</option>
+          <option value="Design">Design</option>
+          <option value="Sales">Sales</option>
+          <option value="Marketing">Marketing</option>
+          <option value="Operations">Operations</option>
+          <option value="HR">HR</option>
+          <option value="Finance">Finance</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label for="role">Job Title</label>
+        <input type="text" id="role" name="role" placeholder="Software Engineer" required />
+      </div>
+    </div>
+    <div class="form-group">
+      <label>Status</label>
+      <div class="radio-group">
+        <label class="form-checkbox">
+          <input type="radio" name="status" value="active" checked />
+          Active
+        </label>
+        <label class="form-checkbox">
+          <input type="radio" name="status" value="inactive" />
+          Inactive
+        </label>
+      </div>
+    </div>
+    <div class="form-actions">
+      <button type="submit" class="btn btn-primary">Add Employee</button>
+      <a href="/" class="btn btn-secondary">Cancel</a>
+    </div>
+  </form>
+</section>

package/template/src/server/Endpoints/Pages/Layout.fjsx

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>{this.title} — Staff</title>
+  <link rel="stylesheet" href="/style.css"/>
+</head>
+<body>
+  <header class="site-header">
+    <div class="container">
+      <a href="/" class="logo">FFF<span>·</span>Stack</a>
+      <nav class="site-nav">
+        {#if this.homeActive}
+        <a href="/" class="active">Employees</a>
+        {:else}
+        <a href="/">Employees</a>
+        {/if}
+        {#if this.aboutActive}
+        <a href="/about" class="active">About</a>
+        {:else}
+        <a href="/about">About</a>
+        {/if}
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    {@this.body}
+  </main>
+
+  <footer class="site-footer">
+    <div class="container">
+      <small>Built with <strong>fff-stack</strong> · F# · FJSX · Cloudflare Workers</small>
+    </div>
+  </footer>
+
+  <script type="module" src="/app.js"></script>
+</body>
+</html>

package/template/src/server/Endpoints/Pages/Routes.fs

@@ -0,0 +1,117 @@
+module App.Server.Endpoints.Pages.Routes
+
+open FffStack.Server
+open Fable.Core
+open Fable.Core.JsInterop
+open App.Server.Workflows.Employees
+
+let private deptChoices (current: string) =
+    [ "Engineering"; "Design"; "Sales"; "Marketing"; "Operations"; "HR"; "Finance" ]
+    |> List.map (fun d -> createObj [ "value" ==> d; "isSelected" ==> (d = current) ])
+    |> List.toArray
+
+let private employeeRow (emp: Domain.Employees.Employee) =
+    createObj [
+        "id"         ==> emp.id
+        "name"       ==> emp.name
+        "email"      ==> emp.email
+        "department" ==> emp.department
+        "role"       ==> emp.role
+        "status"     ==> emp.status
+        "joinedAt"   ==> emp.joinedAt
+        "isActive"   ==> (emp.status = "active")
+        "editUrl"    ==> (sprintf "/employees/%s/edit" emp.id)
+    ]
+
+let register (router: Router) : unit =
+    router
+
+        // GET / — employee list
+        .Get("/", fun ctx ->
+            promise {
+                let db         = Env.requireD1 ctx.Env "DB"
+                let! employees = getAll db
+                let total      = employees.Length
+                let active     = employees |> List.filter (fun e -> e.status = "active") |> List.length
+                let flash      = Flash.banner ctx.Request
+                let body       = Templates.renderEmployeeList (createObj [
+                    "employees" ==> (employees |> List.map employeeRow |> List.toArray)
+                    "isEmpty"   ==> (total = 0)
+                    "total"     ==> total
+                    "active"    ==> active
+                ])
+                return Response.html (Templates.shell "Employees" "/" (flash + body))
+            })
+
+        // GET /employees/new — add employee form
+        .Get("/employees/new", fun _ctx ->
+            promise {
+                return Response.html (Templates.shell "Add Employee" "/" (Templates.renderEmployeeNew (createObj [])))
+            })
+
+        // POST /employees — create employee (PRG)
+        .Post("/employees", fun ctx ->
+            promise {
+                let db    = Env.requireD1 ctx.Env "DB"
+                let! form = Form.parseForm ctx.Request
+                let get f = Form.field f form |> Result.defaultValue ""
+                match! create db (get "name") (get "email") (get "department") (get "role") (get "status") with
+                | Error e   -> return Flash.redirectWith "/" "error" e
+                | Ok emp    ->
+                    return Flash.redirectWith "/" "success"
+                        (sprintf "%s has been added to the directory." emp.name)
+            })
+
+        // GET /employees/:id/edit — edit employee form
+        .Get("/employees/:id/edit", fun ctx ->
+            promise {
+                let id = ctx.Params.["id"]
+                let db = Env.requireD1 ctx.Env "DB"
+                match! getById db id with
+                | None -> return Response.notFound (sprintf "Employee '%s' not found" id)
+                | Some emp ->
+                    let body = Templates.renderEmployeeEdit (createObj [
+                        "id"                ==> emp.id
+                        "name"              ==> emp.name
+                        "email"             ==> emp.email
+                        "role"              ==> emp.role
+                        "status"            ==> emp.status
+                        "statusIsActive" ==> (emp.status = "active")
+                        "departments"   ==> deptChoices emp.department
+                    ])
+                    return Response.html (Templates.shell "Edit Employee" "/" body)
+            })
+
+        // POST /employees/update — update employee (PRG)
+        .Post("/employees/update", fun ctx ->
+            promise {
+                let db    = Env.requireD1 ctx.Env "DB"
+                let! form = Form.parseForm ctx.Request
+                let get f = Form.field f form |> Result.defaultValue ""
+                match! update db (get "id") (get "name") (get "email") (get "department") (get "role") (get "status") with
+                | Error e   -> return Flash.redirectWith "/" "error" e
+                | Ok emp    ->
+                    return Flash.redirectWith "/" "success"
+                        (sprintf "%s has been updated." emp.name)
+            })
+
+        // POST /employees/delete — delete employee (PRG)
+        .Post("/employees/delete", fun ctx ->
+            promise {
+                let db    = Env.requireD1 ctx.Env "DB"
+                let! form = Form.parseForm ctx.Request
+                match Form.field "id" form with
+                | Error _  -> return Flash.redirectWith "/" "error" "Missing employee ID"
+                | Ok id    ->
+                    let! ok = delete db id
+                    if ok then return Flash.redirectWith "/" "success" "Employee removed."
+                    else return Flash.redirectWith "/" "error" "Employee not found."
+            })
+
+        // GET /about — tech stack info
+        .Get("/about", fun _ctx ->
+            promise {
+                return Response.html (Templates.shell "About" "/about" (Templates.renderAbout()))
+            })
+
+    |> ignore