feat(examples): add search and filter functionality to stupid_todolist

Add search box with debounced input and filter buttons (All/Active/Completed)
to the todo list frontend. Backend already supports ?q= and ?filter= params.

Also includes related improvements:
- Add global_helpers for LIKE query building
- Update internal config schema and body parser
- Add e2e empty body tests

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: mpyw

SCHEMA.md

@@ -666,8 +666,12 @@ Control which Content-Types are accepted for request body.
 accepts: json          # Only application/json
 accepts: form          # Only application/x-www-form-urlencoded
 accepts: [json, form]  # Both (default)
+accepts: []            # No body accepted (empty body only)
 ```
 
+> [!NOTE]
+> Empty body requests (common for DELETE) are always allowed regardless of `accepts` setting.
+
 > [!WARNING]
 > Returns 415 Unsupported Media Type if the request Content-Type doesn't match.
 

e2e/empty_body_test.go

@@ -0,0 +1,63 @@
+package e2e
+
+import (
+	"net/http"
+	"net/http/httptest"
+	"path/filepath"
+	"strings"
+	"testing"
+
+	"github.com/stretchr/testify/require"
+
+	"github.com/mpyw/sql-http-proxy/internal/db"
+	"github.com/mpyw/sql-http-proxy/internal/server"
+)
+
+func TestEmptyBody_AcceptsEmpty(t *testing.T) {
+	cfg := loadConfig(t, "empty_body_test.yaml")
+
+	configDir, _ := filepath.Abs(".")
+	conn, err := db.Connect(cfg, configDir)
+	require.NoError(t, err)
+	defer conn.Close()
+
+	mux, err := server.NewServeMux(conn, cfg, configDir)
+	require.NoError(t, err)
+
+	t.Run("DELETE with empty body succeeds", func(t *testing.T) {
+		req := httptest.NewRequest(http.MethodDelete, "/resources/1", nil)
+		w := httptest.NewRecorder()
+		mux.ServeHTTP(w, req)
+
+		require.Equal(t, http.StatusNoContent, w.Code)
+	})
+
+	t.Run("DELETE with non-empty body rejected when accepts=[]", func(t *testing.T) {
+		// Non-empty body without Content-Type should fail with "missing Content-Type"
+		req := httptest.NewRequest(http.MethodDelete, "/resources/1", strings.NewReader(`{"key":"value"}`))
+		w := httptest.NewRecorder()
+		mux.ServeHTTP(w, req)
+
+		// Should reject because body is non-empty but no Content-Type accepted
+		require.Equal(t, http.StatusUnsupportedMediaType, w.Code)
+	})
+
+	t.Run("DELETE with Content-Type rejected when accepts=[]", func(t *testing.T) {
+		// Any Content-Type should fail when accepts=[]
+		req := httptest.NewRequest(http.MethodDelete, "/resources/1", strings.NewReader(`{"key":"value"}`))
+		req.Header.Set("Content-Type", "application/json")
+		w := httptest.NewRecorder()
+		mux.ServeHTTP(w, req)
+
+		require.Equal(t, http.StatusUnsupportedMediaType, w.Code)
+	})
+
+	t.Run("DELETE with body accepted when using default accepts", func(t *testing.T) {
+		req := httptest.NewRequest(http.MethodDelete, "/resources-default/1", strings.NewReader(`{"key":"value"}`))
+		w := httptest.NewRecorder()
+		mux.ServeHTTP(w, req)
+
+		// Should succeed because default accepts allows json
+		require.Equal(t, http.StatusNoContent, w.Code)
+	})
+}

e2e/empty_body_test.yaml

@@ -0,0 +1,23 @@
+database:
+  dsn: "sqlite::memory:"
+  init: |
+    CREATE TABLE IF NOT EXISTS resources (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      name TEXT NOT NULL
+    );
+    DELETE FROM resources;
+    INSERT INTO resources (id, name) VALUES (1, 'Test');
+
+mutations:
+  # DELETE with accepts: [] - no body accepted
+  - type: none
+    method: DELETE
+    path: /resources/{id:[0-9]+}
+    accepts: []
+    sql: DELETE FROM resources WHERE id = :id
+
+  # DELETE without accepts - uses default (json, form)
+  - type: none
+    method: DELETE
+    path: /resources-default/{id:[0-9]+}
+    sql: DELETE FROM resources WHERE id = :id

examples/stupid_todolist/README.md

@@ -13,9 +13,11 @@ A minimal todo list application demonstrating sql-http-proxy with SQLite in-memo
 
 ```bash
 cd examples/stupid_todolist
-sql-http-proxy -c config.yaml -l :8080
+sql-http-proxy -c config.yaml -l :8090
 ```
 
+The database is automatically initialized on startup via `database.init`.
+
 ### 2. Open the frontend
 
 Open `index.html` in your browser:
@@ -40,18 +42,14 @@ python -m http.server 3000
 # Then open http://localhost:3000
 ```
 
-### 3. Initialize the database
-
-Click the "Initialize Database" button to create the todos table.
-
 ## Architecture
 
 ```
 Browser (index.html)
     |
     | fetch() with CORS
     v
-sql-http-proxy (:8080)
+sql-http-proxy (:8090)
     |
     | SQL
     v
@@ -62,15 +60,20 @@ SQLite (in-memory)
 
 | Method | Path | Description |
 |--------|------|-------------|
-| POST | /api/init | Initialize database (create table) |
-| GET | /api/todos | List all todos |
+| GET | /api/todos | List todos (supports `?q=search` for filtering) |
 | GET | /api/todos/:id | Get single todo |
 | POST | /api/todos | Create todo |
 | PUT | /api/todos/:id | Update todo |
 | DELETE | /api/todos/:id | Delete todo |
 
+## Features Demonstrated
+
+- **Database Auto-Init**: Uses `database.init` to create tables on startup
+- **Dynamic LIKE Query**: Search with `?q=term` using pre-transform to build LIKE pattern
+- **CORS Support**: Enabled via `http.cors: true`
+- **Response Status**: Custom status codes (201 for create, 204 for delete)
+
 ## Notes
 
 - Uses SQLite in-memory database (`file::memory:?cache=shared`)
 - Data is lost when the server stops
-- CORS headers are added via `global_helpers` and `response.headers.set()`

examples/stupid_todolist/app.js

@@ -1,10 +1,13 @@
-const API_BASE = 'http://localhost:8082/api';
+const API_BASE = 'http://localhost:8090/api';
 
 const todoForm = document.getElementById('todo-form');
 const todoInput = document.getElementById('todo-input');
+const searchInput = document.getElementById('search-input');
+const filterButtons = document.querySelectorAll('.filter-btn');
 const todoList = document.getElementById('todo-list');
 const statusDiv = document.getElementById('status');
-const initBtn = document.getElementById('init-btn');
+
+let currentFilter = 'all';
 
 // Show status message
 function showStatus(message, isError = false) {
@@ -30,25 +33,15 @@ async function api(endpoint, options = {}) {
   return res.json();
 }
 
-// Initialize database
-async function initDatabase() {
-  try {
-    initBtn.disabled = true;
-    await api('/init', { method: 'POST' });
-    showStatus('Database initialized!');
-    loadTodos();
-  } catch (err) {
-    showStatus('Init failed: ' + err.message, true);
-  } finally {
-    initBtn.disabled = false;
-  }
-}
-
-// Load all todos
-async function loadTodos() {
+// Load todos with optional search and filter
+async function loadTodos(search = '', filter = 'all') {
   try {
     todoList.classList.add('loading');
-    const todos = await api('/todos');
+    const params = new URLSearchParams();
+    if (search) params.set('q', search);
+    if (filter && filter !== 'all') params.set('filter', filter);
+    const query = params.toString() ? `?${params}` : '';
+    const todos = await api(`/todos${query}`);
     renderTodos(todos);
   } catch (err) {
     showStatus('Failed to load: ' + err.message, true);
@@ -84,7 +77,7 @@ async function addTodo(title) {
       body: JSON.stringify({ title }),
     });
     todoInput.value = '';
-    loadTodos();
+    loadTodos(searchInput.value, currentFilter);
   } catch (err) {
     showStatus('Failed to add: ' + err.message, true);
   } finally {
@@ -101,31 +94,51 @@ async function toggleTodo(id, completed) {
       method: 'PUT',
       body: JSON.stringify({ ...todo, completed }),
     });
-    loadTodos();
+    loadTodos(searchInput.value, currentFilter);
   } catch (err) {
     showStatus('Failed to update: ' + err.message, true);
-    loadTodos();
+    loadTodos(searchInput.value, currentFilter);
   }
 }
 
 // Delete todo
 async function deleteTodo(id) {
   try {
     await api(`/todos/${id}`, { method: 'DELETE' });
-    loadTodos();
+    loadTodos(searchInput.value, currentFilter);
   } catch (err) {
     showStatus('Failed to delete: ' + err.message, true);
   }
 }
 
+// Debounce helper
+function debounce(fn, delay) {
+  let timeout;
+  return (...args) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn(...args), delay);
+  };
+}
+
 // Event listeners
 todoForm.addEventListener('submit', (e) => {
   e.preventDefault();
   const title = todoInput.value.trim();
   if (title) addTodo(title);
 });
 
-initBtn.addEventListener('click', initDatabase);
+searchInput.addEventListener('input', debounce((e) => {
+  loadTodos(e.target.value, currentFilter);
+}, 300));
+
+filterButtons.forEach(btn => {
+  btn.addEventListener('click', () => {
+    filterButtons.forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    currentFilter = btn.dataset.filter;
+    loadTodos(searchInput.value, currentFilter);
+  });
+});
 
 // Initial load
 loadTodos();

examples/stupid_todolist/config.yaml

@@ -1,6 +1,25 @@
 # Stupid Todo List - sql-http-proxy example
 # Uses SQLite in-memory database with auto-initialization
 
+global_helpers: |
+  // Escape LIKE special characters (_, %, \)
+  function escapeLike(s) {
+    return s.replace(/\\/g, '\\\\').replace(/%/g, '\\%').replace(/_/g, '\\_');
+  }
+  // Build LIKE conditions from search string
+  // Returns [exprs, params] tuple
+  function buildLikeConditions(query, column, prefix = 'kw') {
+    const keywords = (query || '').trim().split(/\s+/).filter(k => k);
+    const exprs = [];
+    const params = {};
+    keywords.forEach((kw, i) => {
+      const name = prefix + i;
+      exprs.push(column + " LIKE :" + name + " ESCAPE '\\'");
+      params[name] = '%' + escapeLike(kw) + '%';
+    });
+    return [exprs, params];
+  }
+
 database:
   dsn: "file::memory:?cache=shared"
   init: |
@@ -15,16 +34,22 @@ http:
   cors: true
 
 queries:
-  # List all todos
+  # List all todos with optional search (supports multiple keywords)
   - type: many
     path: /api/todos
-    sql: SELECT id, title, completed, created_at FROM todos ORDER BY created_at DESC
+    sql: SELECT id, title, completed, created_at FROM todos WHERE 1=1
     transform:
-      post: |
-        return output.map(row => ({
-          ...row,
-          completed: Boolean(row.completed)
-        }));
+      pre: |
+        const [exprs, params] = buildLikeConditions(input.q, 'title');
+        if (exprs.length) sql = sql + ' AND ' + exprs.join(' AND ');
+        // Filter by completion status
+        if (input.filter === 'incomplete') sql = sql + ' AND completed = 0';
+        else if (input.filter === 'completed') sql = sql + ' AND completed = 1';
+        sql = sql + ' ORDER BY created_at DESC';
+        return params;
+      post:
+        each: |
+          return { ...output, completed: Boolean(output.completed) };
 
   # Get single todo
   - type: one

examples/stupid_todolist/index.html

@@ -16,13 +16,19 @@ <h1>Stupid Todo List</h1>
       <button type="submit">Add</button>
     </form>
 
+    <div class="search-box">
+      <input type="text" id="search-input" placeholder="Search todos...">
+    </div>
+
+    <div class="filter-buttons">
+      <button type="button" class="filter-btn active" data-filter="all">All</button>
+      <button type="button" class="filter-btn" data-filter="incomplete">Active</button>
+      <button type="button" class="filter-btn" data-filter="completed">Completed</button>
+    </div>
+
     <div id="status" class="status"></div>
 
     <ul id="todo-list"></ul>
-
-    <div class="footer">
-      <button id="init-btn" class="init-btn">Initialize Database</button>
-    </div>
   </div>
 
   <script src="app.js"></script>