create-tinyjoin 0.0.5 → 0.1.0

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

@@ -1,29 +1,66 @@
-import {create} from 'tinyjoin';
+import {create, ClientError, type Client} from 'tinyjoin';
 
-export type Todo = {
+export type TodoRow = {
   id: string;
-  title: string;
-  done: boolean;
+  text: string;
+  completed: boolean;
+  created: number;
 };
 
-export type Database = Awaited<ReturnType<typeof create>>;
-
-export async function openDatabase(): Promise<Database> {
-  const database = await create(
-    {{#if usesOpfs}}
-    'opfs://{{storageName}}',
-    {{else}}
-    'memory://',
-    {{/if}}
-  );
-
-  await database.exec(`
-    CREATE TABLE IF NOT EXISTS todos (
-      id TEXT PRIMARY KEY,
-      title TEXT NOT NULL,
-      done BOOLEAN NOT NULL DEFAULT false
-    )
-  `);
-
-  return database;
-}
+export type TodosDatabase = Client;
+
+{{#if usesOpfs}}
+export const DATA_DIR = 'opfs://{{storageName}}';
+{{else}}
+export const DATA_DIR = 'memory://';
+{{/if}}
+
+export const createTodosDatabase = async (): Promise<TodosDatabase> => {
+  const database = await create(DATA_DIR);
+
+  try {
+    await initializeTodos(database);
+    return database;
+  } catch (error) {
+    await database.close().catch(() => undefined);
+    throw error;
+  }
+};
+
+const initializeTodos = async (database: TodosDatabase): Promise<void> => {
+  try {
+    // One atomic script creates and seeds the table. Concurrent tabs can race
+    // to initialize it, but only the tab that creates the table adds examples.
+    await database.exec(`
+      CREATE TABLE todos (
+        id TEXT PRIMARY KEY,
+        text TEXT NOT NULL,
+        completed BOOLEAN NOT NULL DEFAULT false,
+        created INTEGER NOT NULL DEFAULT 0
+      );
+      INSERT INTO todos (id, text, completed, created)
+      VALUES ('1', 'Learn TinyJoin', false, 1), ('2', 'Build an app', false, 2)
+    `);
+  } catch (error) {
+    if (!(error instanceof ClientError && error.code === 'TABLE_ALREADY_EXISTS')) {
+      throw error;
+    }
+  }
+};
+
+export const databaseReady = createTodosDatabase();
+// Startup can reject before the page's load event. app() presents the failure.
+void databaseReady.catch(() => undefined);
+
+addEventListener(
+  'pagehide',
+  () => void databaseReady.then((database) => database.close()).catch(() => undefined),
+  {once: true},
+);
+
+// A restored page must not reuse the client closed during pagehide.
+addEventListener('pageshow', (event) => {
+  if (event.persisted) {
+    location.reload();
+  }
+});

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

@@ -0,0 +1,6 @@
+.error {
+  color: #fca5a5;
+  line-height: 1.5;
+  margin: 0 0 1rem;
+  user-select: text;
+}

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

@@ -0,0 +1,39 @@
+import {ClientError} from 'tinyjoin';
+import './error.css';
+
+export const createError = (): HTMLParagraphElement => {
+  const element = document.createElement('p');
+  element.className = 'error';
+  element.setAttribute('role', 'alert');
+  element.hidden = true;
+  return element;
+};
+
+export const clearError = (element: HTMLElement): void => {
+  element.hidden = true;
+  element.textContent = '';
+};
+
+export const showError = (
+  element: HTMLElement,
+  error: unknown,
+  fallback: string,
+): void => {
+  let message = error instanceof Error ? `${fallback} ${error.message}` : fallback;
+  if (error instanceof ClientError) {
+    if (error.code === 'STORAGE_LOCKED') {
+      message = 'The saved database is busy. Close older versions of this app, then select Retry.';
+    } else if ([
+      'RECOVERY_REQUIRED',
+      'STORAGE_COMMIT_OUTCOME_UNKNOWN',
+      'STORAGE_ENGINE_POISONED',
+      'WORKER_ERROR',
+      'WORKER_MESSAGE_ERROR',
+      'WORKER_TERMINATED',
+    ].includes(error.code)) {
+      message = 'The change may have been saved. Reload this page and check your todos before trying again.';
+    }
+  }
+  element.textContent = message;
+  element.hidden = false;
+};

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

@@ -0,0 +1,7 @@
+import {app} from './app';
+
+const root = document.getElementById('root')!;
+
+addEventListener('load', () => {
+  void app(root);
+});

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

@@ -0,0 +1,93 @@
+#info {
+  --info-fg: var(--fg, oklch(85% 0.01 270));
+  --info-fg2: var(--fg2, oklch(60% 0.01 270));
+  --info-bg2: var(--bg2, oklch(25% 0.01 270));
+  --info-border: var(--border, oklch(30% 0.01 270));
+  --info-accent: var(--accent, #7c3aed);
+  --info-icon: #8a8f98;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+#infoTech {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.infoTechIcon {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: block;
+  flex-shrink: 0;
+}
+
+#infoIcon {
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--info-icon);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 800;
+  color: var(--info-icon);
+  cursor: help;
+  transition: all 0.2s;
+  user-select: none;
+}
+
+#infoIcon:hover {
+  border-color: var(--info-accent);
+  color: var(--info-accent);
+}
+
+#infoIcon:hover #infoTooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+#infoTooltip {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.5rem);
+  background: var(--info-bg2);
+  border: 1px solid var(--info-border);
+  border-radius: 0.375rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 400;
+  width: 20rem;
+  white-space: normal;
+  color: var(--info-fg);
+  line-height: 1.5;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-0.25rem);
+  transition: all 0.2s;
+  pointer-events: none;
+  box-shadow: 0 1px 2px 0 #0007;
+  z-index: 1;
+}
+
+#infoTooltip a {
+  color: var(--info-fg);
+  text-decoration: underline;
+}
+
+#infoTooltip::before {
+  content: '';
+  position: absolute;
+  right: 0.75rem;
+  top: -0.375rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  background: var(--info-bg2);
+  border-left: 1px solid var(--info-border);
+  border-top: 1px solid var(--info-border);
+  transform: rotate(45deg);
+}

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

@@ -0,0 +1,42 @@
+import './info.css';
+
+export const createInfo = (): HTMLDivElement => {
+  const container = document.createElement('div');
+  container.id = 'info';
+
+  const tech = document.createElement('div');
+  tech.id = 'infoTech';
+  container.appendChild(tech);
+
+{{#if typescript}}
+  addIcon(tech, '/ts.svg', 'Written in TypeScript');
+{{else}}
+  addIcon(tech, '/js.svg', 'Written in JavaScript');
+{{/if}}
+
+  const infoIcon = document.createElement('div');
+  infoIcon.id = 'infoIcon';
+  infoIcon.textContent = 'i';
+
+  const tooltip = document.createElement('div');
+  tooltip.id = 'infoTooltip';
+  tooltip.textContent = `A simple todo list application demonstrating TinyJoin's relational queries with CRUD operations.`;
+
+  infoIcon.appendChild(tooltip);
+  container.appendChild(infoIcon);
+
+  return container;
+};
+
+const addIcon = (
+  container: HTMLElement,
+  src: string,
+  title: string,
+): HTMLImageElement => {
+  const icon = document.createElement('img');
+  icon.src = src;
+  icon.className = 'infoTechIcon';
+  icon.title = title;
+  container.appendChild(icon);
+  return icon;
+};

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

@@ -0,0 +1,22 @@
+input[type="text"] {
+  padding: 0.5rem 0.75rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  color: var(--fg);
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+  width: 100%;
+  box-sizing: border-box;
+  align-self: center;
+}
+
+input[type="text"]:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+input[type="text"]::placeholder {
+  color: var(--fg2);
+}

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

@@ -0,0 +1,16 @@
+import './input.css';
+
+export const createInput = (
+  placeholder: string = '',
+  value: string = '',
+  onInput?: (value: string) => void,
+): HTMLInputElement => {
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.placeholder = placeholder;
+  input.value = value;
+  if (onInput) {
+    input.addEventListener('input', () => onInput(input.value));
+  }
+  return input;
+};

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

@@ -0,0 +1,19 @@
+#loading {
+  animation: spin 1s infinite linear;
+  height: 2rem;
+  margin: 40vh auto;
+  width: 2rem;
+}
+
+#loading::before {
+  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="2rem" viewBox="0 0 100 100"><path d="M50 10A40 40 0 1 1 10 50" stroke="%237c3aed" fill="none" stroke-width="4" /></svg>');
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,12 @@
+import './loading.css';
+
+export const showLoading = (container: HTMLElement): HTMLElement => {
+  const loadingDiv = document.createElement('div');
+  loadingDiv.id = 'loading';
+  container.appendChild(loadingDiv);
+  return loadingDiv;
+};
+
+export const hideLoading = (loadingDiv: HTMLElement): void => {
+  loadingDiv.remove();
+};

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

@@ -0,0 +1,16 @@
+#topBarLogo {
+  height: 2rem;
+  width: 2rem;
+  flex-shrink: 0;
+}
+
+#topBarTitle {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: inherit;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin: 0;
+}

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

@@ -0,0 +1,16 @@
+import './title.css';
+
+export const createTitle = (): HTMLHeadingElement => {
+  const title = document.createElement('h1');
+  title.id = 'topBarTitle';
+
+  const logo = document.createElement('img');
+  logo.src = '/favicon.svg';
+  logo.id = 'topBarLogo';
+  logo.alt = 'TinyJoin';
+  title.appendChild(logo);
+
+  title.append(`TinyJoin Todos`);
+
+  return title;
+};

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

@@ -0,0 +1,16 @@
+#todoInput {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+#todoInput input {
+  flex: 1;
+  min-width: 0;
+}
+
+#todoInput .error {
+  flex-basis: 100%;
+  margin: 0;
+}

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

@@ -0,0 +1,50 @@
+import './todoInput.css';
+import {type TodosDatabase} from './database';
+import {createButton} from './button';
+import {createInput} from './input';
+import {createError, clearError, showError} from './error';
+
+export const createTodoInput = (database: TodosDatabase): HTMLFormElement => {
+  const container = document.createElement('form');
+  container.id = 'todoInput';
+
+  const input = createInput('What needs to be done?');
+  const addButton = createButton('Add', null, 'primary', 'submit');
+  const error = createError();
+  let pending = false;
+
+  const addTodo = async () => {
+    const text = input.value.trim();
+    if (!text || pending) {
+      return;
+    }
+    pending = true;
+    input.disabled = true;
+    addButton.disabled = true;
+    clearError(error);
+    try {
+      await database.query(
+        `INSERT INTO todos (id, text, completed, created)
+         VALUES ($1, $2, $3, $4)`,
+        [crypto.randomUUID(), text, false, Date.now()],
+      );
+      input.value = '';
+    } catch (failure) {
+      showError(error, failure, 'Could not add this todo.');
+    } finally {
+      pending = false;
+      input.disabled = false;
+      addButton.disabled = false;
+      input.focus();
+    }
+  };
+
+  container.addEventListener('submit', (event) => {
+    event.preventDefault();
+    void addTodo();
+  });
+
+  container.append(input, addButton, error);
+
+  return container;
+};

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

@@ -0,0 +1,33 @@
+.todoItem {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.todoItem:last-child {
+  border-bottom: none;
+}
+
+.todoItem input[type="checkbox"] {
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.todoItem label {
+  flex: 1;
+  cursor: pointer;
+  user-select: none;
+}
+
+.todoItem.completed label {
+  text-decoration: line-through;
+  opacity: 0.6;
+}
+
+.todoItem button {
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,31 @@
+import './todoItem.css';
+import {createButton} from './button';
+
+export const createTodoItem = (
+  id: string,
+  text: string,
+  completed: boolean,
+  onToggle: (checkbox: HTMLInputElement) => void,
+  onDelete: () => void,
+): HTMLDivElement => {
+  const item = document.createElement('div');
+  item.className = `todoItem${completed ? ' completed' : ''}`;
+
+  const checkbox = document.createElement('input');
+  checkbox.type = 'checkbox';
+  checkbox.checked = completed;
+  checkbox.id = `todo-${id}`;
+  checkbox.addEventListener('change', () => onToggle(checkbox));
+
+  const label = document.createElement('label');
+  label.textContent = text;
+  label.htmlFor = `todo-${id}`;
+
+  const deleteBtn = createButton('Delete', onDelete);
+
+  item.appendChild(checkbox);
+  item.appendChild(label);
+  item.appendChild(deleteBtn);
+
+  return item;
+};

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

@@ -0,0 +1,15 @@
+#todoList {
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  overflow: hidden;
+  background: var(--bg2);
+  width: 100%;
+}
+
+#todoList:empty::before {
+  content: 'No todos yet. Add one above!';
+  display: block;
+  padding: 2rem;
+  text-align: center;
+  color: var(--fg2);
+}

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

@@ -0,0 +1,89 @@
+import './todoList.css';
+import {type TodosDatabase, type TodoRow} from './database';
+import {createTodoItem} from './todoItem';
+import {createError, clearError, showError} from './error';
+
+export const createTodoList = (database: TodosDatabase): HTMLDivElement => {
+  const container = document.createElement('div');
+  const error = createError();
+  const list = document.createElement('div');
+  list.id = 'todoList';
+  container.append(error, list);
+  let pending = false;
+  let mutationFailed = false;
+  let renderGeneration = 0;
+
+  const setDisabled = (disabled: boolean) => {
+    list.querySelectorAll<HTMLInputElement | HTMLButtonElement>('input, button')
+      .forEach((control) => { control.disabled = disabled; });
+  };
+
+  const mutate = async (
+    operation: () => Promise<unknown>,
+    restore?: () => void,
+  ) => {
+    if (pending) {
+      return;
+    }
+    pending = true;
+    mutationFailed = false;
+    setDisabled(true);
+    clearError(error);
+    try {
+      await operation();
+    } catch (failure) {
+      restore?.();
+      mutationFailed = true;
+      showError(error, failure, 'Could not save this change.');
+    } finally {
+      // Refresh reads only: a rejected write may already have committed.
+      await render();
+      pending = false;
+      setDisabled(false);
+    }
+  };
+
+  const render = async () => {
+    const generation = ++renderGeneration;
+    try {
+      const {rows} = await database.query<TodoRow>(
+        'SELECT id, text, completed, created FROM todos ORDER BY created, id',
+      );
+      if (generation !== renderGeneration) {
+        return;
+      }
+      if (!mutationFailed) {
+        clearError(error);
+      }
+
+      const items = rows.map((todo) => createTodoItem(
+        todo.id,
+        todo.text,
+        todo.completed,
+        (checkbox) => {
+          void mutate(
+            () => database.query('UPDATE todos SET completed = $1 WHERE id = $2', [
+              !todo.completed,
+              todo.id,
+            ]),
+            () => { checkbox.checked = todo.completed; },
+          );
+        },
+        () => {
+          void mutate(() => database.query('DELETE FROM todos WHERE id = $1', [todo.id]));
+        },
+      ));
+      list.replaceChildren(...items);
+      setDisabled(pending);
+    } catch (failure) {
+      if (generation === renderGeneration && !mutationFailed) {
+        showError(error, failure, 'Could not refresh your todos. Reload to try again.');
+      }
+    }
+  };
+
+  database.subscribe({tables: ['todos']}, () => void render());
+  void render();
+
+  return container;
+};

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

@@ -0,0 +1,13 @@
+#topBar {
+  background: var(--bg-header);
+  border-bottom: 1px solid var(--border);
+  box-shadow: 0 1px 2px 0 #0007;
+  padding: 0.75rem 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  backdrop-filter: blur(4px);
+}

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

@@ -0,0 +1,13 @@
+import './topBar.css';
+import {createTitle} from './title';
+import {createInfo} from './info';
+
+export const createTopBar = (): HTMLDivElement => {
+  const topBar = document.createElement('div');
+  topBar.id = 'topBar';
+
+  topBar.appendChild(createTitle());
+  topBar.appendChild(createInfo());
+
+  return topBar;
+};

package/templates/client/vite.config.ts.hbs

@@ -0,0 +1,6 @@
+import {tinyjoinOffline} from 'tinyjoin/vite';
+import {defineConfig} from 'vite';
+
+export default defineConfig({
+  plugins: [tinyjoinOffline()],
+});