create-tinyjoin 0.0.5 → 0.1.0

package/templates/client/src/main.ts.hbs

@@ -1,159 +0,0 @@
-import './style.css';
-
-import {openDatabase, type Database, type Todo} from './database';
-
-const form = requiredElement<HTMLFormElement>('[data-testid="todo-form"]');
-const titleInput = requiredElement<HTMLInputElement>(
-  '[data-testid="todo-title"]',
-);
-const todosElement = requiredElement<HTMLUListElement>('[data-testid="todos"]');
-const statusElement = requiredElement<HTMLElement>('[data-testid="status"]');
-const errorElement = requiredElement<HTMLElement>('[data-testid="error"]');
-
-async function start(): Promise<void> {
-  const database = await openDatabase();
-  const unsubscribe = database.subscribe({tables: ['todos']}, () => {
-    runAction(() => renderTodos(database));
-  });
-
-  addEventListener(
-    'pagehide',
-    () => {
-      unsubscribe();
-      void database.close();
-    },
-    {once: true},
-  );
-
-  form.addEventListener('submit', (event) => {
-    event.preventDefault();
-    const title = titleInput.value.trim();
-    if (!title) {
-      return;
-    }
-    runAction(async () => {
-      await database.sql`
-        INSERT INTO todos (id, title, done)
-        VALUES (${crypto.randomUUID()}, ${title}, ${false})
-      `;
-      form.reset();
-      titleInput.focus();
-    });
-  });
-
-  todosElement.addEventListener('change', (event) => {
-    const checkbox = event.target;
-    const id =
-      checkbox instanceof HTMLInputElement
-        ? checkbox.dataset.todoId
-        : undefined;
-    if (
-      !(checkbox instanceof HTMLInputElement) ||
-      checkbox.dataset.action !== 'toggle' ||
-      !id
-    ) {
-      return;
-    }
-    runAction(async () => {
-      await database.sql`
-        UPDATE todos SET done = ${checkbox.checked}
-        WHERE id = ${id}
-      `;
-    });
-  });
-
-  todosElement.addEventListener('click', (event) => {
-    const target = event.target;
-    const button =
-      target instanceof Element
-        ? target.closest<HTMLButtonElement>('button[data-action="delete"]')
-        : null;
-    const id = button?.dataset.todoId;
-    if (!id) {
-      return;
-    }
-    runAction(async () => {
-      await database.sql`DELETE FROM todos WHERE id = ${id}`;
-    });
-  });
-
-  await renderTodos(database);
-  titleInput.focus();
-}
-
-async function renderTodos(database: Database): Promise<void> {
-  todosElement.setAttribute('aria-busy', 'true');
-  const {rows} = await database.query<Todo>(
-    'SELECT id, title, done FROM todos ORDER BY title, id',
-  );
-  todosElement.replaceChildren(
-    ...(rows.length === 0 ? [createEmptyState()] : rows.map(createTodo)),
-  );
-  todosElement.setAttribute('aria-busy', 'false');
-  statusElement.textContent = 'Ready';
-}
-
-function createTodo(todo: Todo): HTMLLIElement {
-  const item = document.createElement('li');
-  item.className = `todo${todo.done ? ' is-done' : ''}`;
-  item.dataset.todoId = todo.id;
-
-  const label = document.createElement('label');
-  const checkbox = document.createElement('input');
-  checkbox.type = 'checkbox';
-  checkbox.checked = todo.done;
-  checkbox.dataset.action = 'toggle';
-  checkbox.dataset.todoId = todo.id;
-  checkbox.setAttribute(
-    'aria-label',
-    `Mark ${todo.title} as ${todo.done ? 'not done' : 'done'}`,
-  );
-
-  const title = document.createElement('span');
-  title.textContent = todo.title;
-  label.append(checkbox, title);
-
-  const deleteButton = document.createElement('button');
-  deleteButton.type = 'button';
-  deleteButton.className = 'delete';
-  deleteButton.dataset.action = 'delete';
-  deleteButton.dataset.todoId = todo.id;
-  deleteButton.setAttribute('aria-label', `Delete ${todo.title}`);
-  deleteButton.textContent = 'Delete';
-
-  item.append(label, deleteButton);
-  return item;
-}
-
-function createEmptyState(): HTMLLIElement {
-  const item = document.createElement('li');
-  item.className = 'empty';
-  item.textContent = 'No todos yet. Add your first one above.';
-  return item;
-}
-
-function runAction(action: () => Promise<unknown>): void {
-  clearError();
-  void action().catch(showError);
-}
-
-function clearError(): void {
-  errorElement.hidden = true;
-  errorElement.textContent = '';
-}
-
-function showError(error: unknown): void {
-  statusElement.textContent = 'Something went wrong.';
-  errorElement.hidden = false;
-  errorElement.textContent = error instanceof Error ? error.message : String(error);
-}
-
-function requiredElement<ElementType extends Element>(selector: string): ElementType {
-  const element = document.querySelector<ElementType>(selector);
-  if (!element) {
-    throw new Error(`Missing starter element: ${selector}`);
-  }
-  return element;
-}
-
-void start().catch(showError);

package/templates/client/src/style.css.hbs

@@ -1,199 +0,0 @@
-:root {
-  color: #20251f;
-  background: #f4f6f1;
-  font-family:
-    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  min-width: 20rem;
-  min-height: 100vh;
-  margin: 0;
-}
-
-button,
-input {
-  font: inherit;
-}
-
-button {
-  cursor: pointer;
-}
-
-main {
-  width: min(36rem, calc(100% - 2rem));
-  margin: 0 auto;
-  padding: 5rem 0 3rem;
-}
-
-header {
-  margin-bottom: 2rem;
-}
-
-.eyebrow {
-  margin: 0 0 0.5rem;
-  color: #397253;
-  font-size: 0.78rem;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-h1 {
-  margin: 0;
-  font-family: Georgia, "Times New Roman", serif;
-  font-size: clamp(3rem, 12vw, 5rem);
-  line-height: 0.95;
-}
-
-.intro {
-  margin: 1rem 0 0;
-  color: #697066;
-}
-
-form {
-  padding: 1rem;
-  border: 1px solid #d7ddd3;
-  border-radius: 1rem;
-  background: #fff;
-  box-shadow: 0 1rem 3rem rgb(32 49 38 / 8%);
-}
-
-form label {
-  display: block;
-  margin-bottom: 0.65rem;
-  font-size: 0.85rem;
-  font-weight: 750;
-}
-
-.composer {
-  display: flex;
-  gap: 0.6rem;
-}
-
-.composer input {
-  min-width: 0;
-  flex: 1;
-  padding: 0.8rem 0.9rem;
-  border: 1px solid #cbd3c7;
-  border-radius: 0.7rem;
-  color: inherit;
-  background: #fbfcfa;
-}
-
-.composer input:focus {
-  border-color: #397253;
-  outline: 3px solid rgb(57 114 83 / 15%);
-}
-
-.composer button,
-.delete {
-  border: 0;
-  border-radius: 0.7rem;
-  font-weight: 750;
-}
-
-.composer button {
-  padding: 0.8rem 1.15rem;
-  color: #fff;
-  background: #397253;
-}
-
-.status,
-.error {
-  min-height: 1.4rem;
-  margin: 1rem 0 0.5rem;
-  color: #697066;
-  font-size: 0.85rem;
-}
-
-.error {
-  color: #a0382e;
-}
-
-ul {
-  display: grid;
-  gap: 0.65rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.todo,
-.empty {
-  border: 1px solid #d7ddd3;
-  border-radius: 0.85rem;
-  background: #fff;
-}
-
-.todo {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.8rem 0.9rem;
-}
-
-.todo label {
-  display: flex;
-  min-width: 0;
-  flex: 1;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.todo input {
-  width: 1.15rem;
-  height: 1.15rem;
-  accent-color: #397253;
-}
-
-.todo span {
-  overflow-wrap: anywhere;
-}
-
-.todo.is-done span {
-  color: #8a9088;
-  text-decoration: line-through;
-}
-
-.delete {
-  padding: 0.45rem 0.65rem;
-  color: #7b423c;
-  background: #f7ecea;
-}
-
-.empty {
-  padding: 2rem;
-  color: #7b8278;
-  text-align: center;
-}
-
-footer {
-  margin-top: 2rem;
-  color: #7b8278;
-  font-size: 0.82rem;
-  text-align: center;
-}
-
-a {
-  color: #397253;
-}
-
-@media (max-width: 32rem) {
-  main {
-    padding-top: 2.5rem;
-  }
-
-  .composer {
-    align-items: stretch;
-    flex-direction: column;
-  }
-}