create-noy-db 0.1.0-pre.10

package/templates/vite-vue/src/components/InvoiceTable.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { Invoice } from '../stores/invoices'
+
+defineProps<{ invoices: Invoice[] }>()
+const emit = defineEmits<{ (e: 'remove', id: string): void }>()
+</script>
+
+<template>
+  <section class="invoices">
+    <h2>Invoices</h2>
+    <table v-if="invoices.length > 0">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Client</th>
+          <th>Amount</th>
+          <th>Status</th>
+          <th>Issued</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="inv in invoices" :key="inv.id">
+          <td>{{ inv.id }}</td>
+          <td>{{ inv.client }}</td>
+          <td>{{ inv.amount.toLocaleString() }}</td>
+          <td>
+            <span :class="`status-pill status-${inv.status}`">{{ inv.status }}</span>
+          </td>
+          <td>{{ inv.issueDate }}</td>
+          <td>
+            <button class="danger" @click="emit('remove', inv.id)">×</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-else class="empty">
+      No invoices yet — add one above.
+    </p>
+  </section>
+</template>

package/templates/vite-vue/src/main.ts

@@ -0,0 +1,55 @@
+/**
+ * {{PROJECT_NAME}} — Vite + Vue 3 + Pinia + noy-db starter.
+ *
+ * Bootstrap order:
+ *   1. Install Pinia (required by `@noy-db/in-pinia`).
+ *   2. Open the encrypted vault via `createNoydb` + `browserIdbStore`.
+ *   3. Register the active instance with `setActiveNoydb` so any
+ *      `defineNoydbStore` call can find it without manual wiring.
+ *   4. Mount the Vue app.
+ *
+ * The passphrase prompt is deliberately simple — swap in a proper
+ * modal once you've understood the flow.
+ */
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { createNoydb } from '@noy-db/hub'
+import { browserIdbStore } from '@noy-db/to-browser-idb'
+import { setActiveNoydb } from '@noy-db/in-pinia'
+import App from './App.vue'
+import './style.css'
+
+async function bootstrap(): Promise<void> {
+  const pinia = createPinia()
+
+  // 1. Collect the passphrase. Reload = re-enter.
+  const passphrase =
+    prompt(
+      'Enter passphrase for {{PROJECT_NAME}}\n\n' +
+        'Derives the master encryption key. Lose it and the data is unrecoverable.',
+    ) ?? ''
+  if (passphrase.length === 0) {
+    document.body.textContent = 'Cancelled — reload to try again.'
+    return
+  }
+
+  // 2. Open the encrypted vault backed by IndexedDB. The adapter sees
+  //    only ciphertext (open DevTools → Application → IndexedDB to
+  //    verify).
+  const db = await createNoydb({
+    store: browserIdbStore({ prefix: '{{PROJECT_NAME}}' }),
+    user: 'owner',
+    secret: passphrase,
+  })
+  await db.openVault('demo')
+
+  // 3. Register as the active instance. Pinia stores created via
+  //    `defineNoydbStore` will resolve against this handle.
+  setActiveNoydb(db)
+
+  // 4. Mount.
+  createApp(App).use(pinia).mount('#app')
+}
+
+void bootstrap()

package/templates/vite-vue/src/stores/invoices.ts

@@ -0,0 +1,35 @@
+/**
+ * Invoice store — reactive, encrypted, backed by a noy-db collection.
+ *
+ * `defineNoydbStore` wraps `defineStore` from Pinia and wires the
+ * store to a vault + collection. All writes encrypt before the
+ * IndexedDB adapter sees them; all reads decrypt into the reactive
+ * `items` array.
+ *
+ * Use from components:
+ *   const invoices = useInvoices()
+ *   await invoices.$ready
+ *   await invoices.add(id, record)
+ *   invoices.items   // reactive array
+ *   invoices.count   // reactive getter
+ */
+import { defineNoydbStore } from '@noy-db/in-pinia'
+
+export interface Invoice {
+  id: string
+  client: string
+  amount: number
+  status: 'draft' | 'open' | 'paid' | 'overdue'
+  issueDate: string // ISO-8601
+}
+
+export const useInvoices = defineNoydbStore<Invoice>('invoices', {
+  vault: 'demo',
+})
+
+/** Optional seed set rendered on first load when the collection is empty. */
+export const DEFAULT_INVOICES: Invoice[] = [
+  { id: 'inv-001', client: 'Acme Corp', amount: 1_200, status: 'paid', issueDate: '2026-01-15' },
+  { id: 'inv-002', client: 'Globex', amount: 2_400, status: 'open', issueDate: '2026-02-01' },
+  { id: 'inv-003', client: 'Initech', amount: 800, status: 'draft', issueDate: '2026-02-20' },
+]

package/templates/vite-vue/src/style.css

@@ -0,0 +1,119 @@
+:root {
+  color-scheme: light;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: #1f2937;
+  background: #f9fafb;
+}
+
+* { box-sizing: border-box; }
+
+body { margin: 0; padding: 1rem; }
+
+.app { max-width: 900px; margin: 0 auto; }
+
+header {
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+h1 { font-size: 1.5rem; margin: 0 0 0.5rem 0; }
+
+.subtitle { color: #6b7280; font-size: 0.9rem; margin: 0; }
+
+.loading {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  text-align: center;
+  color: #6b7280;
+}
+
+.summary {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.stat {
+  flex: 1;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+.stat .label { color: #6b7280; font-size: 0.75rem; text-transform: uppercase; }
+.stat .value { font-size: 1.5rem; font-weight: 600; margin-top: 0.25rem; }
+
+.add-form {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+.add-form input, .add-form select {
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+}
+.add-form input[placeholder='Client name'] { flex: 2; }
+.add-form input[type='number'] { flex: 1; }
+
+button {
+  padding: 0.5rem 1rem;
+  border: 1px solid #2563eb;
+  background: #2563eb;
+  color: white;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+button:hover { background: #1d4ed8; }
+button.danger {
+  background: #dc2626;
+  border-color: #dc2626;
+  padding: 0.125rem 0.5rem;
+}
+
+.invoices h2 { font-size: 1.1rem; margin-top: 0; }
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+th, td {
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid #e5e7eb;
+  font-size: 0.875rem;
+}
+th { background: #f3f4f6; font-weight: 600; }
+tr:last-child td { border-bottom: 0; }
+
+.empty { color: #6b7280; text-align: center; font-style: italic; padding: 1rem; }
+
+.status-pill {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+.status-draft    { background: #f3f4f6; color: #4b5563; }
+.status-open     { background: #dbeafe; color: #1e40af; }
+.status-paid     { background: #d1fae5; color: #065f46; }
+.status-overdue  { background: #fee2e2; color: #b91c1c; }
+
+footer {
+  margin-top: 3rem;
+  padding-top: 1rem;
+  border-top: 1px solid #e5e7eb;
+  color: #6b7280;
+  font-size: 0.85rem;
+}

package/templates/vite-vue/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+    "jsx": "preserve"
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}

package/templates/vite-vue/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 5173,
+  },
+  build: {
+    target: 'es2022',
+  },
+})