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-to "resources/public/js/main.js"
|
||||||
:output-dir "resources/public/js/out"
|
:output-dir "resources/public/js/out"
|
||||||
:asset-path "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]
|
(:require [pocketbook.idb :as idb]
|
||||||
[pocketbook.sync :as sync]
|
[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)
|
;; Connection (IDB handle)
|
||||||
@@ -25,17 +26,17 @@
|
|||||||
(go
|
(go
|
||||||
(let [db (<! (idb/open db-name))]
|
(let [db (<! (idb/open db-name))]
|
||||||
(>! ch {:db db :db-name db-name})
|
(>! ch {:db db :db-name db-name})
|
||||||
(close! ch)))
|
(async/close! ch)))
|
||||||
ch))
|
ch))
|
||||||
|
|
||||||
(defn close!
|
(defn shutdown!
|
||||||
"Close a Pocketbook connection."
|
"Close a Pocketbook connection."
|
||||||
[{:keys [db atoms]}]
|
[{:keys [db atoms]}]
|
||||||
;; Stop all sync loops
|
;; Stop all sync loops
|
||||||
(doseq [[_ sa] @(or atoms (atom {}))]
|
(doseq [[_ sa] @(or atoms (atom {}))]
|
||||||
(when-let [stop (:stop-fn sa)]
|
(when-let [stop (:stop-fn sa)]
|
||||||
(stop)))
|
(stop)))
|
||||||
(idb/close! db))
|
(idb/close-db! db))
|
||||||
|
|
||||||
;; ---------------------------------------------------------------------------
|
;; ---------------------------------------------------------------------------
|
||||||
;; Synced Atom — implements IAtom semantics
|
;; Synced Atom — implements IAtom semantics
|
||||||
@@ -122,7 +123,7 @@
|
|||||||
(.now js/Date))
|
(.now js/Date))
|
||||||
|
|
||||||
(defn- doc-in-group? [group id]
|
(defn- doc-in-group? [group id]
|
||||||
(clojure.string/starts-with? id (prefix-str group)))
|
(str/starts-with? id (prefix-str group)))
|
||||||
|
|
||||||
;; ---------------------------------------------------------------------------
|
;; ---------------------------------------------------------------------------
|
||||||
;; IDB ↔ Atom sync
|
;; IDB ↔ Atom sync
|
||||||
@@ -151,7 +152,7 @@
|
|||||||
(str "last-sync:" (.-group sa))))]
|
(str "last-sync:" (.-group sa))))]
|
||||||
(reset! (.-last_sync sa) (or ls 0)))
|
(reset! (.-last_sync sa) (or ls 0)))
|
||||||
(put! ch true)
|
(put! ch true)
|
||||||
(close! ch)))
|
(async/close! ch)))
|
||||||
ch))
|
ch))
|
||||||
|
|
||||||
(defn- write-doc-to-idb!
|
(defn- write-doc-to-idb!
|
||||||
@@ -188,12 +189,12 @@
|
|||||||
[sa]
|
[sa]
|
||||||
(go
|
(go
|
||||||
(when-let [opts (.-server_opts sa)]
|
(when-let [opts (.-server_opts sa)]
|
||||||
(let [since @(.-last_sync sa)
|
(let [since @(.-last_sync sa)
|
||||||
result (<! (sync/pull! opts (.-group sa) since))]
|
result (<! (sync/pull! opts (.-group sa) since))]
|
||||||
(when (:ok result)
|
(when (:ok result)
|
||||||
(let [docs (:docs result)
|
(let [docs (:docs result)
|
||||||
max-ts (reduce max @(.-last_sync sa)
|
max-ts (reduce max @(.-last_sync sa)
|
||||||
(map :updated docs))]
|
(map :updated docs))]
|
||||||
;; Merge each doc into cache
|
;; Merge each doc into cache
|
||||||
(doseq [doc docs]
|
(doseq [doc docs]
|
||||||
(let [id (:id doc)]
|
(let [id (:id doc)]
|
||||||
@@ -215,7 +216,7 @@
|
|||||||
;; Update last-sync
|
;; Update last-sync
|
||||||
(reset! (.-last_sync sa) max-ts)
|
(reset! (.-last_sync sa) max-ts)
|
||||||
(idb/set-meta! (:db (.-conn sa))
|
(idb/set-meta! (:db (.-conn sa))
|
||||||
(str "last-sync:" (.-group sa)) max-ts)))
|
(str "last-sync:" (.-group sa)) max-ts))
|
||||||
true)))))
|
true)))))
|
||||||
|
|
||||||
(defn- do-push!
|
(defn- do-push!
|
||||||
@@ -325,7 +326,7 @@
|
|||||||
(go
|
(go
|
||||||
(<! (load-from-idb! sa))
|
(<! (load-from-idb! sa))
|
||||||
(put! ready-ch true)
|
(put! ready-ch true)
|
||||||
(close! ready-ch)
|
(async/close! ready-ch)
|
||||||
;; Initial sync
|
;; Initial sync
|
||||||
(when server-opts
|
(when server-opts
|
||||||
(<! (do-sync! sa))
|
(<! (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.
|
"IndexedDB wrapper with Transit serialization.
|
||||||
Stores documents as Transit-encoded strings preserving all Clojure types."
|
Stores documents as Transit-encoded strings preserving all Clojure types."
|
||||||
(:require [cognitect.transit :as t]
|
(:require [cognitect.transit :as t]
|
||||||
[cljs.core.async :refer [chan put! close!]]))
|
[cljs.core.async :as async :refer [chan put!]]))
|
||||||
|
|
||||||
;; ---------------------------------------------------------------------------
|
;; ---------------------------------------------------------------------------
|
||||||
;; Transit
|
;; Transit
|
||||||
@@ -40,11 +40,11 @@
|
|||||||
(set! (.-onsuccess req)
|
(set! (.-onsuccess req)
|
||||||
(fn [e]
|
(fn [e]
|
||||||
(put! ch (.-result (.-target e)))
|
(put! ch (.-result (.-target e)))
|
||||||
(close! ch)))
|
(async/close! ch)))
|
||||||
(set! (.-onerror req)
|
(set! (.-onerror req)
|
||||||
(fn [e]
|
(fn [e]
|
||||||
(js/console.error "IDB open error:" e)
|
(js/console.error "IDB open error:" e)
|
||||||
(close! ch)))
|
(async/close! ch)))
|
||||||
ch))
|
ch))
|
||||||
|
|
||||||
(defn- tx
|
(defn- tx
|
||||||
@@ -68,8 +68,8 @@
|
|||||||
:deleted (boolean (:deleted doc false))
|
:deleted (boolean (:deleted doc false))
|
||||||
:synced (boolean (:synced doc false))}
|
:synced (boolean (:synced doc false))}
|
||||||
req (.put store obj)]
|
req (.put store obj)]
|
||||||
(set! (.-onsuccess req) (fn [_] (put! ch true) (close! ch)))
|
(set! (.-onsuccess req) (fn [_] (put! ch true) (async/close! ch)))
|
||||||
(set! (.-onerror req) (fn [e] (js/console.error "IDB put error:" e) (close! ch)))
|
(set! (.-onerror req) (fn [e] (js/console.error "IDB put error:" e) (async/close! ch)))
|
||||||
ch))
|
ch))
|
||||||
|
|
||||||
(defn put-docs!
|
(defn put-docs!
|
||||||
@@ -86,8 +86,8 @@
|
|||||||
:deleted (boolean (:deleted doc false))
|
:deleted (boolean (:deleted doc false))
|
||||||
:synced (boolean (:synced doc false))}]
|
:synced (boolean (:synced doc false))}]
|
||||||
(.put store obj)))
|
(.put store obj)))
|
||||||
(set! (.-oncomplete txn) (fn [_] (put! ch true) (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) (close! ch)))
|
(set! (.-onerror txn) (fn [e] (js/console.error "IDB batch put error:" e) (async/close! ch)))
|
||||||
ch))
|
ch))
|
||||||
|
|
||||||
(defn get-doc
|
(defn get-doc
|
||||||
@@ -107,9 +107,9 @@
|
|||||||
:updated (.-updated result)
|
:updated (.-updated result)
|
||||||
:deleted (.-deleted result)
|
:deleted (.-deleted result)
|
||||||
:synced (.-synced result)}))
|
:synced (.-synced result)}))
|
||||||
(close! ch))))
|
(async/close! ch))))
|
||||||
(set! (.-onerror req)
|
(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))
|
ch))
|
||||||
|
|
||||||
(defn get-all-by-prefix
|
(defn get-all-by-prefix
|
||||||
@@ -137,9 +137,9 @@
|
|||||||
(.continue cursor))
|
(.continue cursor))
|
||||||
(do
|
(do
|
||||||
(put! ch @docs)
|
(put! ch @docs)
|
||||||
(close! ch))))))
|
(async/close! ch))))))
|
||||||
(set! (.-onerror req)
|
(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))
|
ch))
|
||||||
|
|
||||||
(defn get-unsynced
|
(defn get-unsynced
|
||||||
@@ -166,9 +166,9 @@
|
|||||||
(.continue cursor))
|
(.continue cursor))
|
||||||
(do
|
(do
|
||||||
(put! ch @docs)
|
(put! ch @docs)
|
||||||
(close! ch))))))
|
(async/close! ch))))))
|
||||||
(set! (.-onerror req)
|
(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))
|
ch))
|
||||||
|
|
||||||
(defn delete-doc!
|
(defn delete-doc!
|
||||||
@@ -178,8 +178,8 @@
|
|||||||
txn (tx db "docs" :readwrite)
|
txn (tx db "docs" :readwrite)
|
||||||
store (.objectStore txn "docs")
|
store (.objectStore txn "docs")
|
||||||
req (.delete store id)]
|
req (.delete store id)]
|
||||||
(set! (.-onsuccess req) (fn [_] (put! ch true) (close! ch)))
|
(set! (.-onsuccess req) (fn [_] (put! ch true) (async/close! ch)))
|
||||||
(set! (.-onerror req) (fn [e] (js/console.error "IDB delete error:" e) (close! ch)))
|
(set! (.-onerror req) (fn [e] (js/console.error "IDB delete error:" e) (async/close! ch)))
|
||||||
ch))
|
ch))
|
||||||
|
|
||||||
;; ---------------------------------------------------------------------------
|
;; ---------------------------------------------------------------------------
|
||||||
@@ -197,8 +197,8 @@
|
|||||||
(fn [e]
|
(fn [e]
|
||||||
(let [result (.-result (.-target e))]
|
(let [result (.-result (.-target e))]
|
||||||
(put! ch (when result (.-value result)))
|
(put! ch (when result (.-value result)))
|
||||||
(close! ch))))
|
(async/close! ch))))
|
||||||
(set! (.-onerror req) (fn [_] (close! ch)))
|
(set! (.-onerror req) (fn [_] (async/close! ch)))
|
||||||
ch))
|
ch))
|
||||||
|
|
||||||
(defn set-meta!
|
(defn set-meta!
|
||||||
@@ -208,15 +208,15 @@
|
|||||||
txn (tx db "meta" :readwrite)
|
txn (tx db "meta" :readwrite)
|
||||||
store (.objectStore txn "meta")
|
store (.objectStore txn "meta")
|
||||||
req (.put store #js {:key key :value value})]
|
req (.put store #js {:key key :value value})]
|
||||||
(set! (.-onsuccess req) (fn [_] (put! ch true) (close! ch)))
|
(set! (.-onsuccess req) (fn [_] (put! ch true) (async/close! ch)))
|
||||||
(set! (.-onerror req) (fn [_] (close! ch)))
|
(set! (.-onerror req) (fn [_] (async/close! ch)))
|
||||||
ch))
|
ch))
|
||||||
|
|
||||||
;; ---------------------------------------------------------------------------
|
;; ---------------------------------------------------------------------------
|
||||||
;; Close
|
;; Close
|
||||||
;; ---------------------------------------------------------------------------
|
;; ---------------------------------------------------------------------------
|
||||||
|
|
||||||
(defn close!
|
(defn close-db!
|
||||||
"Close the IDB connection."
|
"Close the IDB connection."
|
||||||
[db]
|
[db]
|
||||||
(when db (.close db)))
|
(when db (.close db)))
|
||||||
|
|||||||
@@ -11,7 +11,8 @@
|
|||||||
(:require [org.httpkit.server :as http]
|
(:require [org.httpkit.server :as http]
|
||||||
[pocketbook.db :as db]
|
[pocketbook.db :as db]
|
||||||
[pocketbook.transit :as t]
|
[pocketbook.transit :as t]
|
||||||
[clojure.string :as str])
|
[clojure.string :as str]
|
||||||
|
[clojure.java.io :as io])
|
||||||
(:gen-class))
|
(:gen-class))
|
||||||
|
|
||||||
;; ---------------------------------------------------------------------------
|
;; ---------------------------------------------------------------------------
|
||||||
@@ -111,6 +112,43 @@
|
|||||||
:when k]
|
:when k]
|
||||||
[k (or v "")]))))
|
[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
|
(defn make-handler
|
||||||
"Create the Ring handler function."
|
"Create the Ring handler function."
|
||||||
[ds config]
|
[ds config]
|
||||||
@@ -121,12 +159,6 @@
|
|||||||
(= :options (:request-method req))
|
(= :options (:request-method req))
|
||||||
{:status 204 :headers {} :body nil}
|
{:status 204 :headers {} :body nil}
|
||||||
|
|
||||||
;; Health check
|
|
||||||
(= "/" (:uri req))
|
|
||||||
{:status 200
|
|
||||||
:headers {"Content-Type" "text/plain"}
|
|
||||||
:body "pocketbook ok"}
|
|
||||||
|
|
||||||
;; Sync endpoints
|
;; Sync endpoints
|
||||||
(= "/sync" (:uri req))
|
(= "/sync" (:uri req))
|
||||||
(let [user (authenticate config req)]
|
(let [user (authenticate config req)]
|
||||||
@@ -137,10 +169,12 @@
|
|||||||
:post (handle-push ds user req)
|
:post (handle-push ds user req)
|
||||||
(transit-response 405 {:error "Method not allowed"}))))
|
(transit-response 405 {:error "Method not allowed"}))))
|
||||||
|
|
||||||
|
;; Static files (including / → todomvc.html)
|
||||||
:else
|
:else
|
||||||
{:status 404
|
(or (serve-static (:uri req))
|
||||||
:headers {"Content-Type" "text/plain"}
|
{:status 404
|
||||||
:body "Not found"})]
|
:headers {"Content-Type" "text/plain"}
|
||||||
|
:body "Not found"}))]
|
||||||
(if (:cors config)
|
(if (:cors config)
|
||||||
(cors-headers resp)
|
(cors-headers resp)
|
||||||
resp))))
|
resp))))
|
||||||
@@ -161,6 +195,7 @@
|
|||||||
(println (str "🔶 Pocketbook server running on http://localhost:" (:port config)))
|
(println (str "🔶 Pocketbook server running on http://localhost:" (:port config)))
|
||||||
(println (str " Database: " (:db-path config)))
|
(println (str " Database: " (:db-path config)))
|
||||||
(println (str " Auth: " (if (:users config) "enabled" "disabled")))
|
(println (str " Auth: " (if (:users config) "enabled" "disabled")))
|
||||||
|
(println (str " TodoMVC: http://localhost:" (:port config) "/todomvc.html"))
|
||||||
{:stop server
|
{:stop server
|
||||||
:ds ds
|
:ds ds
|
||||||
:config config})))
|
:config config})))
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
(ns pocketbook.sync
|
(ns pocketbook.sync
|
||||||
"HTTP sync client — pull and push documents to/from the Pocketbook server."
|
"HTTP sync client — pull and push documents to/from the Pocketbook server."
|
||||||
(:require [cognitect.transit :as t]
|
(:require [cognitect.transit :as t]
|
||||||
[cljs.core.async :refer [chan put! close!]]))
|
[cljs.core.async :as async :refer [chan put!]]))
|
||||||
|
|
||||||
;; ---------------------------------------------------------------------------
|
;; ---------------------------------------------------------------------------
|
||||||
;; Transit over HTTP
|
;; Transit over HTTP
|
||||||
@@ -41,10 +41,10 @@
|
|||||||
(put! ch {:ok false
|
(put! ch {:ok false
|
||||||
:status (.-status resp)
|
:status (.-status resp)
|
||||||
:error text}))
|
:error text}))
|
||||||
(close! ch))))))
|
(async/close! ch))))))
|
||||||
(.catch (fn [err]
|
(.catch (fn [err]
|
||||||
(put! ch {:ok false :status 0 :error (str err)})
|
(put! ch {:ok false :status 0 :error (str err)})
|
||||||
(close! ch))))
|
(async/close! ch))))
|
||||||
ch))
|
ch))
|
||||||
|
|
||||||
;; ---------------------------------------------------------------------------
|
;; ---------------------------------------------------------------------------
|
||||||
@@ -58,15 +58,15 @@
|
|||||||
(let [ch (chan 1)
|
(let [ch (chan 1)
|
||||||
url (str server "?group=" (js/encodeURIComponent group)
|
url (str server "?group=" (js/encodeURIComponent group)
|
||||||
"&since=" since)]
|
"&since=" since)]
|
||||||
(cljs.core.async/go
|
(async/go
|
||||||
(let [result (cljs.core.async/<! (fetch-transit
|
(let [result (async/<! (fetch-transit
|
||||||
{:url url
|
{:url url
|
||||||
:method "GET"
|
:method "GET"
|
||||||
:headers (when token {"Authorization" (str "Bearer " token)})}))]
|
:headers (when token {"Authorization" (str "Bearer " token)})}))]
|
||||||
(if (:ok result)
|
(if (:ok result)
|
||||||
(put! ch {:ok true :docs (:body result)})
|
(put! ch {:ok true :docs (:body result)})
|
||||||
(put! ch result))
|
(put! ch result))
|
||||||
(close! ch)))
|
(async/close! ch)))
|
||||||
ch))
|
ch))
|
||||||
|
|
||||||
;; ---------------------------------------------------------------------------
|
;; ---------------------------------------------------------------------------
|
||||||
@@ -79,8 +79,8 @@
|
|||||||
Returns a channel yielding {:ok true :results [...]} or {:ok false :error str}."
|
Returns a channel yielding {:ok true :results [...]} or {:ok false :error str}."
|
||||||
[{:keys [server token]} docs]
|
[{:keys [server token]} docs]
|
||||||
(let [ch (chan 1)]
|
(let [ch (chan 1)]
|
||||||
(cljs.core.async/go
|
(async/go
|
||||||
(let [result (cljs.core.async/<! (fetch-transit
|
(let [result (async/<! (fetch-transit
|
||||||
{:url server
|
{:url server
|
||||||
:method "POST"
|
:method "POST"
|
||||||
:body docs
|
:body docs
|
||||||
@@ -88,7 +88,7 @@
|
|||||||
(if (:ok result)
|
(if (:ok result)
|
||||||
(put! ch {:ok true :results (:body result)})
|
(put! ch {:ok true :results (:body result)})
|
||||||
(put! ch result))
|
(put! ch result))
|
||||||
(close! ch)))
|
(async/close! ch)))
|
||||||
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
|
;; Tests
|
||||||
;; ---------------------------------------------------------------------------
|
;; ---------------------------------------------------------------------------
|
||||||
|
|
||||||
(deftest health-check
|
(deftest serves-static-root
|
||||||
(let [req (-> (HttpRequest/newBuilder)
|
(let [req (-> (HttpRequest/newBuilder)
|
||||||
(.uri (URI. (url "/")))
|
(.uri (URI. (url "/")))
|
||||||
(.GET)
|
(.GET)
|
||||||
(.build))
|
(.build))
|
||||||
resp (.send client req (HttpResponse$BodyHandlers/ofString))]
|
resp (.send client req (HttpResponse$BodyHandlers/ofString))]
|
||||||
(is (= 200 (.statusCode resp)))
|
(is (= 200 (.statusCode resp)))
|
||||||
(is (= "pocketbook ok" (.body resp)))))
|
(is (.contains (.body resp) "TodoMVC"))))
|
||||||
|
|
||||||
(deftest push-and-pull
|
(deftest push-and-pull
|
||||||
(testing "Push new documents"
|
(testing "Push new documents"
|
||||||
|
|||||||
Reference in New Issue
Block a user