feat: add TodoMVC example with editorial design
Full TodoMVC implementation using Pocketbook's synced atom: - Add, toggle, edit (double-click), destroy todos - Filter: All / Active / Completed - Toggle all, clear completed - Live sync status indicator (online/offline/pending) - Data persists in IndexedDB, syncs to server via Transit Design: Ink & Paper aesthetic — cream paper background with grain texture, Instrument Serif italic header, Newsreader body text, DM Mono UI chrome, terracotta accent with green completion marks, deckled left border on card. Also: - Server now serves static files from resources/public (/ → todomvc.html) - Fix CLJS compilation: resolve close!/put! naming conflicts with core.async, use qualified async/close!, add clojure.string require - Fix unbalanced parens in do-pull! - Remove old placeholder example
This commit is contained in:
Florian Schroedl
@@ -1,4 +1,4 @@
|
||||
{:main pocketbook.example
|
||||
{:main pocketbook.todomvc
|
||||
:output-to "resources/public/js/main.js"
|
||||
:output-dir "resources/public/js/out"
|
||||
:asset-path "js/out"
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pocketbook Example</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: -apple-system, system-ui, sans-serif; max-width: 600px; margin: 2rem auto; padding: 0 1rem; color: #1a1a1a; }
|
||||
h1 { margin-bottom: 1rem; font-size: 1.5rem; }
|
||||
#add-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
|
||||
#add-form input { flex: 1; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
|
||||
#add-form button { padding: 0.5rem 1rem; background: #2563eb; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }
|
||||
#add-form button:hover { background: #1d4ed8; }
|
||||
ul { list-style: none; }
|
||||
li { padding: 0.5rem 0; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; }
|
||||
label { display: flex; align-items: center; gap: 0.5rem; flex: 1; }
|
||||
.del-btn { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 1.1rem; padding: 0 0.25rem; }
|
||||
.del-btn:hover { color: #dc2626; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">Loading...</div>
|
||||
<script src="js/out/goog/base.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
416
resources/public/todomvc.html
Normal file
416
resources/public/todomvc.html
Normal file
@@ -0,0 +1,416 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pocketbook · TodoMVC</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Mono:wght@300;400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ── Reset ────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
/* ── Palette ──────────────────────────────────────────── */
|
||||
:root {
|
||||
--bg: #F6F1EB;
|
||||
--bg-card: #FFFCF7;
|
||||
--ink: #2C2420;
|
||||
--ink-soft: #8A7E74;
|
||||
--ink-faint: #C8BFB4;
|
||||
--accent: #C0583A;
|
||||
--accent-glow: #E87A55;
|
||||
--green: #5A8A6A;
|
||||
--rule: #E2D9CE;
|
||||
--shadow: rgba(44, 36, 32, 0.06);
|
||||
--shadow-md: rgba(44, 36, 32, 0.10);
|
||||
}
|
||||
|
||||
/* ── Page ─────────────────────────────────────────────── */
|
||||
html {
|
||||
font-size: 17px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Newsreader', 'Georgia', serif;
|
||||
color: var(--ink);
|
||||
background: var(--bg);
|
||||
min-height: 100vh;
|
||||
/* Subtle grain texture */
|
||||
background-image:
|
||||
url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* ── Container ────────────────────────────────────────── */
|
||||
.wrapper {
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 1.25rem 4rem;
|
||||
}
|
||||
|
||||
/* ── Branding ─────────────────────────────────────────── */
|
||||
.brand {
|
||||
text-align: center;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.brand-label {
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4em;
|
||||
}
|
||||
.brand-label::before {
|
||||
content: '🔶';
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
/* ── Card ─────────────────────────────────────────────── */
|
||||
#app {
|
||||
background: var(--bg-card);
|
||||
border-radius: 3px;
|
||||
box-shadow:
|
||||
0 1px 2px var(--shadow),
|
||||
0 4px 16px var(--shadow),
|
||||
0 24px 48px var(--shadow-md);
|
||||
overflow: hidden;
|
||||
/* Deckled left edge */
|
||||
border-left: 3px solid var(--accent);
|
||||
}
|
||||
|
||||
/* ── Header ───────────────────────────────────────────── */
|
||||
.app-header h1 {
|
||||
font-family: 'Instrument Serif', serif;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-size: 2.8rem;
|
||||
text-align: center;
|
||||
color: var(--accent);
|
||||
letter-spacing: -0.02em;
|
||||
padding: 1.5rem 0 0.3rem;
|
||||
line-height: 1;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
.toggle-all {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.2rem;
|
||||
color: var(--ink-faint);
|
||||
cursor: pointer;
|
||||
padding: 0.75rem 0.5rem;
|
||||
line-height: 1;
|
||||
transform: rotate(90deg);
|
||||
transition: color 0.15s, transform 0.2s;
|
||||
}
|
||||
.toggle-all:hover { color: var(--ink-soft); }
|
||||
.toggle-all.checked { color: var(--ink); }
|
||||
|
||||
.new-todo {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-family: 'Newsreader', serif;
|
||||
font-size: 1.15rem;
|
||||
color: var(--ink);
|
||||
padding: 1rem 0.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.new-todo::placeholder {
|
||||
color: var(--ink-faint);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Todo list ────────────────────────────────────────── */
|
||||
.todo-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
position: relative;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.todo-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.todo-item:hover {
|
||||
background: rgba(192, 88, 58, 0.018);
|
||||
}
|
||||
|
||||
.todo-item .view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-height: 3.2rem;
|
||||
padding: 0 0.75rem;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* ── Toggle (circle) ──────────────────────────────────── */
|
||||
.toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.35rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
color: var(--ink-faint);
|
||||
transition: color 0.15s, transform 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toggle:hover {
|
||||
color: var(--ink-soft);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.todo-item.completed .toggle {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
/* ── Label ────────────────────────────────────────────── */
|
||||
.todo-label {
|
||||
flex: 1;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.45;
|
||||
padding: 0.65rem 0.25rem;
|
||||
cursor: text;
|
||||
word-break: break-word;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.todo-item.completed .todo-label {
|
||||
color: var(--ink-faint);
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: var(--ink-faint);
|
||||
text-decoration-thickness: 1px;
|
||||
}
|
||||
|
||||
/* ── Destroy ──────────────────────────────────────────── */
|
||||
.destroy {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
transition: color 0.12s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.todo-item:hover .destroy,
|
||||
.destroy:focus-visible {
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
.destroy:hover {
|
||||
color: var(--accent) !important;
|
||||
}
|
||||
|
||||
/* ── Editing ──────────────────────────────────────────── */
|
||||
.todo-item.editing .view { display: none; }
|
||||
.todo-item.editing {
|
||||
padding: 0;
|
||||
}
|
||||
.edit-input {
|
||||
width: 100%;
|
||||
font-family: 'Newsreader', serif;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.45;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
padding: 0.75rem 1rem 0.75rem 3.1rem;
|
||||
color: var(--ink);
|
||||
box-shadow: inset 0 0 0 1px var(--accent);
|
||||
}
|
||||
|
||||
/* ── Footer ───────────────────────────────────────────── */
|
||||
.app-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.6rem 1rem;
|
||||
border-top: 1px solid var(--rule);
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: var(--ink-soft);
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.todo-count {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.todo-count strong {
|
||||
font-weight: 500;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
.filter-btn {
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: var(--ink-soft);
|
||||
padding: 0.2rem 0.45rem;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.12s, color 0.12s;
|
||||
}
|
||||
.filter-btn:hover {
|
||||
border-color: var(--ink-faint);
|
||||
}
|
||||
.filter-btn.selected {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.clear-completed {
|
||||
background: none;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: var(--ink-soft);
|
||||
cursor: pointer;
|
||||
padding: 0.2rem 0;
|
||||
transition: color 0.12s;
|
||||
}
|
||||
.clear-completed:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Sync bar ─────────────────────────────────────────── */
|
||||
.sync-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.55rem 1rem;
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--ink-faint);
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
.sync-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sync-dot.online {
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 4px rgba(90, 138, 106, 0.4);
|
||||
animation: pulse 3s ease-in-out infinite;
|
||||
}
|
||||
.sync-dot.offline {
|
||||
background: var(--ink-faint);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
/* ── Info below card ──────────────────────────────────── */
|
||||
.info {
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 0.62rem;
|
||||
color: var(--ink-faint);
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.info a {
|
||||
color: var(--ink-soft);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--ink-faint);
|
||||
transition: color 0.12s, border-color 0.12s;
|
||||
}
|
||||
.info a:hover {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Loading state ────────────────────────────────────── */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
font-style: italic;
|
||||
color: var(--ink-faint);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.loading::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
margin-left: 0.3em;
|
||||
animation: blink 1s ease-in-out infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* ── Empty state ──────────────────────────────────────── */
|
||||
#app:empty::after,
|
||||
.app-header + .sync-bar::before {
|
||||
/* When only header + sync bar visible, show hint */
|
||||
}
|
||||
|
||||
/* ── Focus styles ─────────────────────────────────────── */
|
||||
.new-todo:focus {
|
||||
/* Subtle left bar highlight */
|
||||
}
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -2px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.new-todo:focus-visible,
|
||||
.edit-input:focus-visible,
|
||||
.toggle:focus-visible,
|
||||
.destroy:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="brand">
|
||||
<span class="brand-label">Pocketbook · TodoMVC</span>
|
||||
</div>
|
||||
<div id="app">
|
||||
<div class="loading">Loading from local store</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<p>Double-click to edit a todo</p>
|
||||
<p>Built with <a href="https://github.com/pocketbook">Pocketbook</a> — offline-first synced atoms for Clojure</p>
|
||||
<p>Data persists in IndexedDB · syncs via Transit to SQLite</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/out/goog/base.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -11,7 +11,8 @@
|
||||
"
|
||||
(:require [pocketbook.idb :as idb]
|
||||
[pocketbook.sync :as sync]
|
||||
[cljs.core.async :refer [go go-loop <! >! chan put! close! timeout alts!]]))
|
||||
[clojure.string :as str]
|
||||
[cljs.core.async :as async :refer [go go-loop <! >! chan put! timeout alts!]]))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Connection (IDB handle)
|
||||
@@ -25,17 +26,17 @@
|
||||
(go
|
||||
(let [db (<! (idb/open db-name))]
|
||||
(>! ch {:db db :db-name db-name})
|
||||
(close! ch)))
|
||||
(async/close! ch)))
|
||||
ch))
|
||||
|
||||
(defn close!
|
||||
(defn shutdown!
|
||||
"Close a Pocketbook connection."
|
||||
[{:keys [db atoms]}]
|
||||
;; Stop all sync loops
|
||||
(doseq [[_ sa] @(or atoms (atom {}))]
|
||||
(when-let [stop (:stop-fn sa)]
|
||||
(stop)))
|
||||
(idb/close! db))
|
||||
(idb/close-db! db))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Synced Atom — implements IAtom semantics
|
||||
@@ -122,7 +123,7 @@
|
||||
(.now js/Date))
|
||||
|
||||
(defn- doc-in-group? [group id]
|
||||
(clojure.string/starts-with? id (prefix-str group)))
|
||||
(str/starts-with? id (prefix-str group)))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; IDB ↔ Atom sync
|
||||
@@ -151,7 +152,7 @@
|
||||
(str "last-sync:" (.-group sa))))]
|
||||
(reset! (.-last_sync sa) (or ls 0)))
|
||||
(put! ch true)
|
||||
(close! ch)))
|
||||
(async/close! ch)))
|
||||
ch))
|
||||
|
||||
(defn- write-doc-to-idb!
|
||||
@@ -188,12 +189,12 @@
|
||||
[sa]
|
||||
(go
|
||||
(when-let [opts (.-server_opts sa)]
|
||||
(let [since @(.-last_sync sa)
|
||||
(let [since @(.-last_sync sa)
|
||||
result (<! (sync/pull! opts (.-group sa) since))]
|
||||
(when (:ok result)
|
||||
(let [docs (:docs result)
|
||||
max-ts (reduce max @(.-last_sync sa)
|
||||
(map :updated docs))]
|
||||
(let [docs (:docs result)
|
||||
max-ts (reduce max @(.-last_sync sa)
|
||||
(map :updated docs))]
|
||||
;; Merge each doc into cache
|
||||
(doseq [doc docs]
|
||||
(let [id (:id doc)]
|
||||
@@ -215,7 +216,7 @@
|
||||
;; Update last-sync
|
||||
(reset! (.-last_sync sa) max-ts)
|
||||
(idb/set-meta! (:db (.-conn sa))
|
||||
(str "last-sync:" (.-group sa)) max-ts)))
|
||||
(str "last-sync:" (.-group sa)) max-ts))
|
||||
true)))))
|
||||
|
||||
(defn- do-push!
|
||||
@@ -325,7 +326,7 @@
|
||||
(go
|
||||
(<! (load-from-idb! sa))
|
||||
(put! ready-ch true)
|
||||
(close! ready-ch)
|
||||
(async/close! ready-ch)
|
||||
;; Initial sync
|
||||
(when server-opts
|
||||
(<! (do-sync! sa))
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
(ns pocketbook.example
|
||||
"Example: a simple todo app using Pocketbook."
|
||||
(:require [pocketbook.core :as pb]
|
||||
[cljs.core.async :refer [go <!]]))
|
||||
|
||||
(defn- render-todos! [todos-atom]
|
||||
(let [todos @todos-atom
|
||||
container (js/document.getElementById "app")]
|
||||
(set! (.-innerHTML container)
|
||||
(str "<h1>Pocketbook Todos (" (count todos) ")</h1>"
|
||||
"<div id='add-form'>"
|
||||
"<input id='new-todo' type='text' placeholder='New todo...' />"
|
||||
"<button id='add-btn'>Add</button>"
|
||||
"</div>"
|
||||
"<ul>"
|
||||
(apply str
|
||||
(for [[id doc] (sort-by key todos)]
|
||||
(str "<li>"
|
||||
"<label>"
|
||||
"<input type='checkbox' data-id='" id "' "
|
||||
(when (:done doc) "checked") " /> "
|
||||
"<span" (when (:done doc) " style='text-decoration:line-through'") ">"
|
||||
(:text doc)
|
||||
"</span>"
|
||||
"</label>"
|
||||
" <button class='del-btn' data-id='" id "'>✕</button>"
|
||||
"</li>")))
|
||||
"</ul>"
|
||||
"<p style='color:#888;font-size:12px'>"
|
||||
"Pending sync: " (pb/pending-count todos-atom)
|
||||
"</p>"))))
|
||||
|
||||
(defn- setup-handlers! [todos-atom]
|
||||
;; We re-setup after each render
|
||||
(when-let [btn (js/document.getElementById "add-btn")]
|
||||
(.addEventListener btn "click"
|
||||
(fn [_]
|
||||
(let [input (js/document.getElementById "new-todo")
|
||||
text (.-value input)]
|
||||
(when (seq text)
|
||||
(let [id (str "todo:" (random-uuid))]
|
||||
(swap! todos-atom assoc id {:text text :done false})
|
||||
(set! (.-value input) "")))))))
|
||||
;; Checkbox toggles
|
||||
(doseq [cb (array-seq (.querySelectorAll js/document "input[type=checkbox]"))]
|
||||
(.addEventListener cb "change"
|
||||
(fn [e]
|
||||
(let [id (.-id (.-dataset (.-target e)))]
|
||||
(swap! todos-atom update-in [id :done] not)))))
|
||||
;; Delete buttons
|
||||
(doseq [btn (array-seq (.querySelectorAll js/document ".del-btn"))]
|
||||
(.addEventListener btn "click"
|
||||
(fn [e]
|
||||
(let [id (.-id (.-dataset (.-target e)))]
|
||||
(swap! todos-atom dissoc id))))))
|
||||
|
||||
(defn ^:export init []
|
||||
(go
|
||||
(let [conn (<! (pb/open "pocketbook-example"))
|
||||
todos (pb/synced-atom conn "todo"
|
||||
{:server "http://localhost:8090/sync"})]
|
||||
;; Wait for initial load
|
||||
(<! (pb/ready? todos))
|
||||
;; Render
|
||||
(render-todos! todos)
|
||||
(setup-handlers! todos)
|
||||
;; Re-render on changes
|
||||
(add-watch todos :render
|
||||
(fn [_ _ _ _]
|
||||
(render-todos! todos)
|
||||
(setup-handlers! todos)))
|
||||
(js/console.log "Pocketbook example loaded!" (count @todos) "todos"))))
|
||||
|
||||
;; Auto-init
|
||||
(init)
|
||||
@@ -2,7 +2,7 @@
|
||||
"IndexedDB wrapper with Transit serialization.
|
||||
Stores documents as Transit-encoded strings preserving all Clojure types."
|
||||
(:require [cognitect.transit :as t]
|
||||
[cljs.core.async :refer [chan put! close!]]))
|
||||
[cljs.core.async :as async :refer [chan put!]]))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Transit
|
||||
@@ -40,11 +40,11 @@
|
||||
(set! (.-onsuccess req)
|
||||
(fn [e]
|
||||
(put! ch (.-result (.-target e)))
|
||||
(close! ch)))
|
||||
(async/close! ch)))
|
||||
(set! (.-onerror req)
|
||||
(fn [e]
|
||||
(js/console.error "IDB open error:" e)
|
||||
(close! ch)))
|
||||
(async/close! ch)))
|
||||
ch))
|
||||
|
||||
(defn- tx
|
||||
@@ -68,8 +68,8 @@
|
||||
:deleted (boolean (:deleted doc false))
|
||||
:synced (boolean (:synced doc false))}
|
||||
req (.put store obj)]
|
||||
(set! (.-onsuccess req) (fn [_] (put! ch true) (close! ch)))
|
||||
(set! (.-onerror req) (fn [e] (js/console.error "IDB put error:" e) (close! ch)))
|
||||
(set! (.-onsuccess req) (fn [_] (put! ch true) (async/close! ch)))
|
||||
(set! (.-onerror req) (fn [e] (js/console.error "IDB put error:" e) (async/close! ch)))
|
||||
ch))
|
||||
|
||||
(defn put-docs!
|
||||
@@ -86,8 +86,8 @@
|
||||
:deleted (boolean (:deleted doc false))
|
||||
:synced (boolean (:synced doc false))}]
|
||||
(.put store obj)))
|
||||
(set! (.-oncomplete txn) (fn [_] (put! ch true) (close! ch)))
|
||||
(set! (.-onerror txn) (fn [e] (js/console.error "IDB batch put error:" e) (close! ch)))
|
||||
(set! (.-oncomplete txn) (fn [_] (put! ch true) (async/close! ch)))
|
||||
(set! (.-onerror txn) (fn [e] (js/console.error "IDB batch put error:" e) (async/close! ch)))
|
||||
ch))
|
||||
|
||||
(defn get-doc
|
||||
@@ -107,9 +107,9 @@
|
||||
:updated (.-updated result)
|
||||
:deleted (.-deleted result)
|
||||
:synced (.-synced result)}))
|
||||
(close! ch))))
|
||||
(async/close! ch))))
|
||||
(set! (.-onerror req)
|
||||
(fn [e] (js/console.error "IDB get error:" e) (close! ch)))
|
||||
(fn [e] (js/console.error "IDB get error:" e) (async/close! ch)))
|
||||
ch))
|
||||
|
||||
(defn get-all-by-prefix
|
||||
@@ -137,9 +137,9 @@
|
||||
(.continue cursor))
|
||||
(do
|
||||
(put! ch @docs)
|
||||
(close! ch))))))
|
||||
(async/close! ch))))))
|
||||
(set! (.-onerror req)
|
||||
(fn [e] (js/console.error "IDB cursor error:" e) (close! ch)))
|
||||
(fn [e] (js/console.error "IDB cursor error:" e) (async/close! ch)))
|
||||
ch))
|
||||
|
||||
(defn get-unsynced
|
||||
@@ -166,9 +166,9 @@
|
||||
(.continue cursor))
|
||||
(do
|
||||
(put! ch @docs)
|
||||
(close! ch))))))
|
||||
(async/close! ch))))))
|
||||
(set! (.-onerror req)
|
||||
(fn [e] (js/console.error "IDB unsynced error:" e) (close! ch)))
|
||||
(fn [e] (js/console.error "IDB unsynced error:" e) (async/close! ch)))
|
||||
ch))
|
||||
|
||||
(defn delete-doc!
|
||||
@@ -178,8 +178,8 @@
|
||||
txn (tx db "docs" :readwrite)
|
||||
store (.objectStore txn "docs")
|
||||
req (.delete store id)]
|
||||
(set! (.-onsuccess req) (fn [_] (put! ch true) (close! ch)))
|
||||
(set! (.-onerror req) (fn [e] (js/console.error "IDB delete error:" e) (close! ch)))
|
||||
(set! (.-onsuccess req) (fn [_] (put! ch true) (async/close! ch)))
|
||||
(set! (.-onerror req) (fn [e] (js/console.error "IDB delete error:" e) (async/close! ch)))
|
||||
ch))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -197,8 +197,8 @@
|
||||
(fn [e]
|
||||
(let [result (.-result (.-target e))]
|
||||
(put! ch (when result (.-value result)))
|
||||
(close! ch))))
|
||||
(set! (.-onerror req) (fn [_] (close! ch)))
|
||||
(async/close! ch))))
|
||||
(set! (.-onerror req) (fn [_] (async/close! ch)))
|
||||
ch))
|
||||
|
||||
(defn set-meta!
|
||||
@@ -208,15 +208,15 @@
|
||||
txn (tx db "meta" :readwrite)
|
||||
store (.objectStore txn "meta")
|
||||
req (.put store #js {:key key :value value})]
|
||||
(set! (.-onsuccess req) (fn [_] (put! ch true) (close! ch)))
|
||||
(set! (.-onerror req) (fn [_] (close! ch)))
|
||||
(set! (.-onsuccess req) (fn [_] (put! ch true) (async/close! ch)))
|
||||
(set! (.-onerror req) (fn [_] (async/close! ch)))
|
||||
ch))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Close
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defn close!
|
||||
(defn close-db!
|
||||
"Close the IDB connection."
|
||||
[db]
|
||||
(when db (.close db)))
|
||||
|
||||
@@ -11,7 +11,8 @@
|
||||
(:require [org.httpkit.server :as http]
|
||||
[pocketbook.db :as db]
|
||||
[pocketbook.transit :as t]
|
||||
[clojure.string :as str])
|
||||
[clojure.string :as str]
|
||||
[clojure.java.io :as io])
|
||||
(:gen-class))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -111,6 +112,43 @@
|
||||
:when k]
|
||||
[k (or v "")]))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Static file serving
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(def ^:private content-types
|
||||
{"html" "text/html; charset=utf-8"
|
||||
"css" "text/css; charset=utf-8"
|
||||
"js" "application/javascript; charset=utf-8"
|
||||
"json" "application/json"
|
||||
"svg" "image/svg+xml"
|
||||
"png" "image/png"
|
||||
"jpg" "image/jpeg"
|
||||
"ico" "image/x-icon"
|
||||
"woff2" "font/woff2"
|
||||
"woff" "font/woff"
|
||||
"map" "application/json"})
|
||||
|
||||
(defn- ext [path]
|
||||
(let [i (str/last-index-of path ".")]
|
||||
(when (and i (pos? i))
|
||||
(subs path (inc i)))))
|
||||
|
||||
(defn- serve-static
|
||||
"Attempt to serve a static file from resources/public. Returns response or nil."
|
||||
[uri]
|
||||
(let [path (str "public" (if (= "/" uri) "/todomvc.html" uri))
|
||||
resource (io/resource path)]
|
||||
(when resource
|
||||
{:status 200
|
||||
:headers {"Content-Type" (get content-types (ext path) "application/octet-stream")
|
||||
"Cache-Control" "no-cache"}
|
||||
:body (io/input-stream resource)})))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Ring handler
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defn make-handler
|
||||
"Create the Ring handler function."
|
||||
[ds config]
|
||||
@@ -121,12 +159,6 @@
|
||||
(= :options (:request-method req))
|
||||
{:status 204 :headers {} :body nil}
|
||||
|
||||
;; Health check
|
||||
(= "/" (:uri req))
|
||||
{:status 200
|
||||
:headers {"Content-Type" "text/plain"}
|
||||
:body "pocketbook ok"}
|
||||
|
||||
;; Sync endpoints
|
||||
(= "/sync" (:uri req))
|
||||
(let [user (authenticate config req)]
|
||||
@@ -137,10 +169,12 @@
|
||||
:post (handle-push ds user req)
|
||||
(transit-response 405 {:error "Method not allowed"}))))
|
||||
|
||||
;; Static files (including / → todomvc.html)
|
||||
:else
|
||||
{:status 404
|
||||
:headers {"Content-Type" "text/plain"}
|
||||
:body "Not found"})]
|
||||
(or (serve-static (:uri req))
|
||||
{:status 404
|
||||
:headers {"Content-Type" "text/plain"}
|
||||
:body "Not found"}))]
|
||||
(if (:cors config)
|
||||
(cors-headers resp)
|
||||
resp))))
|
||||
@@ -161,6 +195,7 @@
|
||||
(println (str "🔶 Pocketbook server running on http://localhost:" (:port config)))
|
||||
(println (str " Database: " (:db-path config)))
|
||||
(println (str " Auth: " (if (:users config) "enabled" "disabled")))
|
||||
(println (str " TodoMVC: http://localhost:" (:port config) "/todomvc.html"))
|
||||
{:stop server
|
||||
:ds ds
|
||||
:config config})))
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns pocketbook.sync
|
||||
"HTTP sync client — pull and push documents to/from the Pocketbook server."
|
||||
(:require [cognitect.transit :as t]
|
||||
[cljs.core.async :refer [chan put! close!]]))
|
||||
[cljs.core.async :as async :refer [chan put!]]))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Transit over HTTP
|
||||
@@ -41,10 +41,10 @@
|
||||
(put! ch {:ok false
|
||||
:status (.-status resp)
|
||||
:error text}))
|
||||
(close! ch))))))
|
||||
(async/close! ch))))))
|
||||
(.catch (fn [err]
|
||||
(put! ch {:ok false :status 0 :error (str err)})
|
||||
(close! ch))))
|
||||
(async/close! ch))))
|
||||
ch))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -58,15 +58,15 @@
|
||||
(let [ch (chan 1)
|
||||
url (str server "?group=" (js/encodeURIComponent group)
|
||||
"&since=" since)]
|
||||
(cljs.core.async/go
|
||||
(let [result (cljs.core.async/<! (fetch-transit
|
||||
(async/go
|
||||
(let [result (async/<! (fetch-transit
|
||||
{:url url
|
||||
:method "GET"
|
||||
:headers (when token {"Authorization" (str "Bearer " token)})}))]
|
||||
(if (:ok result)
|
||||
(put! ch {:ok true :docs (:body result)})
|
||||
(put! ch result))
|
||||
(close! ch)))
|
||||
(async/close! ch)))
|
||||
ch))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -79,8 +79,8 @@
|
||||
Returns a channel yielding {:ok true :results [...]} or {:ok false :error str}."
|
||||
[{:keys [server token]} docs]
|
||||
(let [ch (chan 1)]
|
||||
(cljs.core.async/go
|
||||
(let [result (cljs.core.async/<! (fetch-transit
|
||||
(async/go
|
||||
(let [result (async/<! (fetch-transit
|
||||
{:url server
|
||||
:method "POST"
|
||||
:body docs
|
||||
@@ -88,7 +88,7 @@
|
||||
(if (:ok result)
|
||||
(put! ch {:ok true :results (:body result)})
|
||||
(put! ch result))
|
||||
(close! ch)))
|
||||
(async/close! ch)))
|
||||
ch))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
264
src/pocketbook/todomvc.cljs
Normal file
264
src/pocketbook/todomvc.cljs
Normal file
@@ -0,0 +1,264 @@
|
||||
(ns pocketbook.todomvc
|
||||
"TodoMVC built on Pocketbook — offline-first, synced, Clojure-native."
|
||||
(:require [pocketbook.core :as pb]
|
||||
[cljs.core.async :refer [go <!]]
|
||||
[clojure.string :as str]))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; State
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defonce !conn (atom nil))
|
||||
(defonce !todos (atom nil)) ;; the SyncedAtom
|
||||
(defonce !filter (atom :all)) ;; :all | :active | :completed
|
||||
(defonce !editing (atom nil)) ;; id of todo being edited, or nil
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Helpers
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defn- todos-list
|
||||
"Return todos as sorted vec of [id doc] pairs."
|
||||
[]
|
||||
(->> @(!todos)
|
||||
(sort-by (fn [[_ doc]] (:created doc)))
|
||||
vec))
|
||||
|
||||
(defn- active-todos []
|
||||
(remove (fn [[_ doc]] (:completed doc)) (todos-list)))
|
||||
|
||||
(defn- completed-todos []
|
||||
(filter (fn [[_ doc]] (:completed doc)) (todos-list)))
|
||||
|
||||
(defn- visible-todos []
|
||||
(case @!filter
|
||||
:all (todos-list)
|
||||
:active (active-todos)
|
||||
:completed (completed-todos)))
|
||||
|
||||
(defn- all-completed? []
|
||||
(let [ts (todos-list)]
|
||||
(and (seq ts) (every? (fn [[_ doc]] (:completed doc)) ts))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Actions
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defn- add-todo! [text]
|
||||
(let [text (str/trim text)]
|
||||
(when (seq text)
|
||||
(let [id (str "todo:" (random-uuid))]
|
||||
(swap! @!todos assoc id
|
||||
{:text text
|
||||
:completed false
|
||||
:created (.now js/Date)})))))
|
||||
|
||||
(defn- toggle-todo! [id]
|
||||
(swap! @!todos update-in [id :completed] not))
|
||||
|
||||
(defn- toggle-all! []
|
||||
(let [target (not (all-completed?))]
|
||||
(swap! @!todos
|
||||
(fn [m]
|
||||
(reduce-kv (fn [acc k v] (assoc acc k (assoc v :completed target)))
|
||||
{} m)))))
|
||||
|
||||
(defn- destroy-todo! [id]
|
||||
(swap! @!todos dissoc id))
|
||||
|
||||
(defn- edit-todo! [id new-text]
|
||||
(let [text (str/trim new-text)]
|
||||
(if (seq text)
|
||||
(swap! @!todos assoc-in [id :text] text)
|
||||
(destroy-todo! id))
|
||||
(reset! !editing nil)))
|
||||
|
||||
(defn- clear-completed! []
|
||||
(swap! @!todos
|
||||
(fn [m]
|
||||
(into {} (remove (fn [[_ v]] (:completed v))) m))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Rendering
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defn- esc [s]
|
||||
(-> (str s)
|
||||
(str/replace "&" "&")
|
||||
(str/replace "<" "<")
|
||||
(str/replace ">" ">")
|
||||
(str/replace "\"" """)))
|
||||
|
||||
(defn- render-todo-item [[id doc]]
|
||||
(let [editing? (= id @!editing)
|
||||
classes (str (when (:completed doc) " completed")
|
||||
(when editing? " editing"))]
|
||||
(str "<li class=\"todo-item" classes "\" data-id=\"" (esc id) "\">"
|
||||
"<div class=\"view\">"
|
||||
"<button class=\"toggle\" data-action=\"toggle\" data-id=\"" (esc id) "\">"
|
||||
(if (:completed doc) "◉" "○")
|
||||
"</button>"
|
||||
"<label class=\"todo-label\" data-action=\"edit-start\" data-id=\"" (esc id) "\">"
|
||||
(esc (:text doc))
|
||||
"</label>"
|
||||
"<button class=\"destroy\" data-action=\"destroy\" data-id=\"" (esc id) "\">×</button>"
|
||||
"</div>"
|
||||
(when editing?
|
||||
(str "<input class=\"edit-input\" data-action=\"edit-input\" data-id=\"" (esc id) "\""
|
||||
" value=\"" (esc (:text doc)) "\" />"))
|
||||
"</li>")))
|
||||
|
||||
(defn- render-footer [active-count total-count]
|
||||
(let [current @!filter]
|
||||
(str "<footer class=\"app-footer\">"
|
||||
"<span class=\"todo-count\">"
|
||||
"<strong>" active-count "</strong> "
|
||||
(if (= 1 active-count) "item" "items") " left"
|
||||
"</span>"
|
||||
"<nav class=\"filters\">"
|
||||
"<button class=\"filter-btn" (when (= :all current) " selected") "\" data-action=\"filter\" data-filter=\"all\">All</button>"
|
||||
"<button class=\"filter-btn" (when (= :active current) " selected") "\" data-action=\"filter\" data-filter=\"active\">Active</button>"
|
||||
"<button class=\"filter-btn" (when (= :completed current) " selected") "\" data-action=\"filter\" data-filter=\"completed\">Completed</button>"
|
||||
"</nav>"
|
||||
(when (pos? (- total-count active-count))
|
||||
"<button class=\"clear-completed\" data-action=\"clear-completed\">Clear completed</button>")
|
||||
"</footer>")))
|
||||
|
||||
(defn- render-sync-status []
|
||||
(let [pending (when @!todos (pb/pending-count @!todos))
|
||||
online? (.-onLine js/navigator)]
|
||||
(str "<div class=\"sync-bar\">"
|
||||
"<span class=\"sync-dot " (if online? "online" "offline") "\"></span>"
|
||||
"<span class=\"sync-text\">"
|
||||
(cond
|
||||
(not online?) "Offline — changes saved locally"
|
||||
(and pending (pos? pending)) (str "Syncing " pending " change" (when (> pending 1) "s") "…")
|
||||
:else "Synced")
|
||||
"</span>"
|
||||
"</div>")))
|
||||
|
||||
(defn- render! []
|
||||
(let [container (js/document.getElementById "app")
|
||||
todos (visible-todos)
|
||||
total (count (todos-list))
|
||||
active (count (active-todos))]
|
||||
(when container
|
||||
(set! (.-innerHTML container)
|
||||
(str
|
||||
"<header class=\"app-header\">"
|
||||
"<h1>todos</h1>"
|
||||
"<div class=\"input-row\">"
|
||||
(when (pos? total)
|
||||
(str "<button class=\"toggle-all" (when (all-completed?) " checked") "\" data-action=\"toggle-all\">❯</button>"))
|
||||
"<input id=\"new-todo\" class=\"new-todo\" placeholder=\"What needs to be done?\" autofocus />"
|
||||
"</div>"
|
||||
"</header>"
|
||||
(when (pos? total)
|
||||
(str "<section class=\"main\">"
|
||||
"<ul class=\"todo-list\">"
|
||||
(apply str (map render-todo-item todos))
|
||||
"</ul>"
|
||||
"</section>"
|
||||
(render-footer active total)))
|
||||
(render-sync-status))))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Event delegation
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defn- find-action
|
||||
"Walk up from target to find an element with data-action."
|
||||
[el]
|
||||
(loop [node el]
|
||||
(when (and node (not= node js/document.body))
|
||||
(if-let [action (.. node -dataset -action)]
|
||||
[action node]
|
||||
(recur (.-parentElement node))))))
|
||||
|
||||
(defn- handle-click [e]
|
||||
(when-let [[action el] (find-action (.-target e))]
|
||||
(let [id (.. el -dataset -id)]
|
||||
(case action
|
||||
"toggle" (toggle-todo! id)
|
||||
"destroy" (destroy-todo! id)
|
||||
"toggle-all" (toggle-all!)
|
||||
"clear-completed" (clear-completed!)
|
||||
"filter" (reset! !filter (keyword (.. el -dataset -filter)))
|
||||
nil))))
|
||||
|
||||
(defn- handle-dblclick [e]
|
||||
(when-let [[action el] (find-action (.-target e))]
|
||||
(when (= action "edit-start")
|
||||
(let [id (.. el -dataset -id)]
|
||||
(reset! !editing id)
|
||||
(render!)
|
||||
;; Focus the edit input after render
|
||||
(js/requestAnimationFrame
|
||||
(fn []
|
||||
(when-let [input (.querySelector js/document ".edit-input")]
|
||||
(.focus input)
|
||||
;; Move cursor to end
|
||||
(let [len (.-length (.-value input))]
|
||||
(.setSelectionRange input len len)))))))))
|
||||
|
||||
(defn- handle-keydown [e]
|
||||
(let [key (.-key e)]
|
||||
(cond
|
||||
;; Enter on new-todo input
|
||||
(and (= key "Enter") (= "new-todo" (.. e -target -id)))
|
||||
(let [input (.-target e)]
|
||||
(add-todo! (.-value input))
|
||||
(set! (.-value input) ""))
|
||||
|
||||
;; Enter on edit input
|
||||
(and (= key "Enter") (.. e -target -dataset -action)
|
||||
(= "edit-input" (.. e -target -dataset -action)))
|
||||
(let [el (.-target e)]
|
||||
(edit-todo! (.. el -dataset -id) (.-value el)))
|
||||
|
||||
;; Escape cancels edit
|
||||
(and (= key "Escape") @!editing)
|
||||
(do (reset! !editing nil)
|
||||
(render!)))))
|
||||
|
||||
(defn- handle-blur [e]
|
||||
(when (and @!editing
|
||||
(.. e -target -dataset -action)
|
||||
(= "edit-input" (.. e -target -dataset -action)))
|
||||
(let [el (.-target e)]
|
||||
(edit-todo! (.. el -dataset -id) (.-value el)))))
|
||||
|
||||
(defn- bind-events! []
|
||||
(let [app (js/document.getElementById "app")]
|
||||
(.addEventListener app "click" handle-click)
|
||||
(.addEventListener app "dblclick" handle-dblclick)
|
||||
(.addEventListener js/document "keydown" handle-keydown)
|
||||
(.addEventListener app "focusout" handle-blur true)))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Init
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defn ^:export init []
|
||||
(go
|
||||
(let [conn (<! (pb/open "pocketbook-todomvc"))
|
||||
todos (pb/synced-atom conn "todo"
|
||||
{:server "http://localhost:8090/sync"
|
||||
:interval 15000})]
|
||||
(reset! !conn conn)
|
||||
(reset! !todos todos)
|
||||
;; Wait for IDB load
|
||||
(<! (pb/ready? todos))
|
||||
;; Initial render
|
||||
(render!)
|
||||
(bind-events!)
|
||||
;; Re-render on any data change
|
||||
(add-watch todos :render (fn [_ _ _ _] (render!)))
|
||||
;; Re-render on filter change
|
||||
(add-watch !filter :render (fn [_ _ _ _] (render!)))
|
||||
;; Online/offline status updates
|
||||
(.addEventListener js/window "online" (fn [_] (render!)))
|
||||
(.addEventListener js/window "offline" (fn [_] (render!)))
|
||||
(js/console.log "🔶 Pocketbook TodoMVC loaded —" (count @todos) "todos"))))
|
||||
|
||||
(init)
|
||||
@@ -61,14 +61,14 @@
|
||||
;; Tests
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(deftest health-check
|
||||
(deftest serves-static-root
|
||||
(let [req (-> (HttpRequest/newBuilder)
|
||||
(.uri (URI. (url "/")))
|
||||
(.GET)
|
||||
(.build))
|
||||
resp (.send client req (HttpResponse$BodyHandlers/ofString))]
|
||||
(is (= 200 (.statusCode resp)))
|
||||
(is (= "pocketbook ok" (.body resp)))))
|
||||
(is (.contains (.body resp) "TodoMVC"))))
|
||||
|
||||
(deftest push-and-pull
|
||||
(testing "Push new documents"
|
||||
|
||||
Reference in New Issue
Block a user