zero-query 0.3.1 → 0.5.2

package/cli/scaffold/scripts/components/home.js

@@ -0,0 +1,137 @@
+// scripts/components/home.js — dashboard / landing page
+//
+// Demonstrates: $.component, state, render, mounted lifecycle,
+//               signal + computed + effect (reactive primitives),
+//               $.store integration, $.bus, template rendering
+
+$.component('home-page', {
+  state: () => ({
+    greeting: '',
+    signalDemo: 0,
+  }),
+
+  mounted() {
+    // $.signal() — fine-grained reactive primitive
+    const count = $.signal(0);
+
+    // $.computed() — derived reactive value that auto-updates
+    const doubled = $.computed(() => count.value * 2);
+
+    // $.effect() — runs whenever its dependencies change
+    $.effect(() => {
+      this.state.signalDemo = doubled.value;
+    });
+
+    // Store the signal setter so the button can use it
+    this._signalCount = count;
+
+    // Greet based on time of day
+    const hour = new Date().getHours();
+    this.state.greeting = hour < 12 ? 'Good morning'
+                        : hour < 18 ? 'Good afternoon'
+                        : 'Good evening';
+
+    // Track page visit via the global store
+    const store = $.getStore('main');
+    store.dispatch('incrementVisits');
+  },
+
+  incrementSignal() {
+    if (this._signalCount) {
+      this._signalCount.value++;
+    }
+  },
+
+  render() {
+    const store = $.getStore('main');
+    return `
+      <div class="page-header">
+        <h1>${this.state.greeting} 👋</h1>
+        <p class="subtitle">Welcome to your new <strong>zQuery</strong> app. Explore the pages to see different features in action.</p>
+      </div>
+
+      <div class="card-grid">
+        <div class="card card-accent">
+          <h3>⚡ Reactive Signals</h3>
+          <p>Fine-grained reactivity with <code>signal()</code>, <code>computed()</code>, and <code>effect()</code>.</p>
+          <div class="signal-demo">
+            <span class="signal-value">Doubled: ${this.state.signalDemo}</span>
+            <button class="btn btn-sm" @click="incrementSignal">Increment Signal</button>
+          </div>
+        </div>
+
+        <div class="card">
+          <h3>🔢 Counter</h3>
+          <p>Component state, two-way binding with <code>z-model</code>, and event handling.</p>
+          <a z-link="/counter" class="btn btn-outline">Try It →</a>
+        </div>
+
+        <div class="card">
+          <h3>✅ Todos</h3>
+          <p>Global store with actions & getters. <strong>${store.getters.todoCount}</strong> items, <strong>${store.getters.doneCount}</strong> done.</p>
+          <a z-link="/todos" class="btn btn-outline">Try It →</a>
+        </div>
+
+        <div class="card">
+          <h3>📇 Contacts</h3>
+          <p>External templates &amp; styles via <code>templateUrl</code> / <code>styleUrl</code>. <strong>${store.getters.contactCount}</strong> contacts, <strong>${store.getters.favoriteCount}</strong> ★ favorited.</p>
+          <a z-link="/contacts" class="btn btn-outline">Try It →</a>
+        </div>
+
+        <div class="card">
+          <h3>🌐 API Demo</h3>
+          <p>Fetch data with <code>$.get()</code>, loading states, and <code>$.escapeHtml()</code>.</p>
+          <a z-link="/api" class="btn btn-outline">Try It →</a>
+        </div>
+      </div>
+
+      <div class="card card-muted">
+        <h3>📊 App Stats</h3>
+        <div class="stats-grid">
+          <div class="stat-group">
+            <span class="stat-group-title">🏠 General</span>
+            <div class="stat-group-values">
+              <div class="stat">
+                <span class="stat-value">${store.state.visits}</span>
+                <span class="stat-label">Page Views</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="stat-group">
+            <span class="stat-group-title">✅ Todos</span>
+            <div class="stat-group-values">
+              <div class="stat">
+                <span class="stat-value">${store.getters.todoCount}</span>
+                <span class="stat-label">Total</span>
+              </div>
+              <div class="stat">
+                <span class="stat-value">${store.getters.pendingCount}</span>
+                <span class="stat-label">Pending</span>
+              </div>
+              <div class="stat">
+                <span class="stat-value">${store.getters.doneCount}</span>
+                <span class="stat-label">Done</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="stat-group">
+            <span class="stat-group-title">📇 Contacts</span>
+            <div class="stat-group-values">
+              <div class="stat">
+                <span class="stat-value">${store.getters.contactCount}</span>
+                <span class="stat-label">Total</span>
+              </div>
+              <div class="stat">
+                <span class="stat-value">${store.getters.favoriteCount}</span>
+                <span class="stat-label">★ Favorited</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <small class="muted">Stats powered by <code>$.store()</code> getters — visit count tracked globally.</small>
+      </div>
+    `;
+  }
+});

package/cli/scaffold/scripts/components/not-found.js

@@ -0,0 +1,16 @@
+// scripts/components/not-found.js — 404 fallback page
+//
+// Demonstrates: $.getRouter() to read the current path
+
+$.component('not-found', {
+  render() {
+    const router = $.getRouter();
+    return `
+      <div class="page-header center">
+        <h1>404</h1>
+        <p class="subtitle">The page <code>${$.escapeHtml(router.current?.path || '')}</code> was not found.</p>
+        <a z-link="/" class="btn btn-primary">← Go Home</a>
+      </div>
+    `;
+  }
+});

package/cli/scaffold/scripts/components/todos.js

@@ -0,0 +1,130 @@
+// scripts/components/todos.js — todo list with global store
+//
+// Demonstrates: $.getStore, store.dispatch, store.subscribe,
+//               store getters, z-model, z-ref, z-class, z-for,
+//               z-if, z-show, @click with args, @submit.prevent,
+//               mounted/destroyed lifecycle, $.bus toast, $.debounce
+
+$.component('todos-page', {
+  state: () => ({
+    newTodo: '',
+    filter: 'all',      // 'all' | 'active' | 'done'
+    search: '',
+    filtered: [],        // computed in render() for z-for access
+    total: 0,
+    done: 0,
+    pending: 0,
+  }),
+
+  mounted() {
+    const store = $.getStore('main');
+    this._unsub = store.subscribe(() => this.setState({}));
+
+    // $.debounce — debounced search filter (300ms)
+    this._debouncedSearch = $.debounce((val) => {
+      this.state.search = val;
+    }, 300);
+  },
+
+  destroyed() {
+    if (this._unsub) this._unsub();
+  },
+
+  addTodo() {
+    const text = this.state.newTodo.trim();
+    if (!text) return;
+    $.getStore('main').dispatch('addTodo', text);
+    this.state.newTodo = '';
+    this.state.search = '';
+    this.state.filter = 'all';
+    $.bus.emit('toast', { message: 'Todo added!', type: 'success' });
+  },
+
+  toggleTodo(id) {
+    $.getStore('main').dispatch('toggleTodo', id);
+  },
+
+  removeTodo(id) {
+    $.getStore('main').dispatch('removeTodo', id);
+    $.bus.emit('toast', { message: 'Todo removed', type: 'error' });
+  },
+
+  clearCompleted() {
+    $.getStore('main').dispatch('clearCompleted');
+    $.bus.emit('toast', { message: 'Completed todos cleared', type: 'info' });
+  },
+
+  setFilter(f) {
+    this.state.filter = f;
+  },
+
+  onSearch(e) {
+    this._debouncedSearch(e.target.value);
+  },
+
+  render() {
+    const store = $.getStore('main');
+    const todos = store.state.todos;
+    const { filter, search } = this.state;
+
+    // Compute filtered list and store stats into state for directive access
+    let list = todos;
+    if (filter === 'active') list = todos.filter(t => !t.done);
+    if (filter === 'done')   list = todos.filter(t => t.done);
+    if (search) {
+      const q = search.toLowerCase();
+      list = list.filter(t => t.text.toLowerCase().includes(q));
+    }
+    this.state.filtered = list;
+    this.state.total    = store.getters.todoCount;
+    this.state.done     = store.getters.doneCount;
+    this.state.pending  = store.getters.pendingCount;
+
+    return `
+      <div class="page-header">
+        <h1>Todos</h1>
+        <p class="subtitle">Global store with <code>$.store()</code>, <code>z-for</code>, <code>z-class</code>, <code>z-if</code>, and <code>z-show</code>.</p>
+      </div>
+
+      <div class="card">
+        <form class="todo-form" @submit.prevent="addTodo">
+          <input
+            type="text"
+            z-model="newTodo" z-trim
+            placeholder="What needs to be done?"
+            class="input"
+            z-ref="todoInput"
+          />
+          <button type="submit" class="btn btn-primary">Add</button>
+        </form>
+      </div>
+
+      <div class="card">
+        <div class="todo-toolbar">
+          <div class="todo-filters">
+            <button class="btn btn-sm" z-class="{'btn-primary': filter === 'all', 'btn-ghost': filter !== 'all'}" @click="setFilter('all')">All (${this.state.total})</button>
+            <button class="btn btn-sm" z-class="{'btn-primary': filter === 'active', 'btn-ghost': filter !== 'active'}" @click="setFilter('active')">Active (${this.state.pending})</button>
+            <button class="btn btn-sm" z-class="{'btn-primary': filter === 'done', 'btn-ghost': filter !== 'done'}" @click="setFilter('done')">Done (${this.state.done})</button>
+          </div>
+          <input type="text" placeholder="Search…" class="input input-sm" @input="onSearch" value="${$.escapeHtml(this.state.search)}" />
+        </div>
+
+        <div z-if="filtered.length === 0" class="empty-state">
+          <p>${this.state.total === 0 ? 'No todos yet — add one above!' : 'No matching todos.'}</p>
+        </div>
+
+        <ul z-else class="todo-list">
+          <li z-for="t in filtered" class="todo-item {{t.done ? 'done' : ''}}">
+            <button class="todo-check" @click="toggleTodo('{{t.id}}')"></button>
+            <span class="todo-text">{{$.escapeHtml(t.text)}}</span>
+            <button class="todo-remove" @click="removeTodo('{{t.id}}')">✕</button>
+          </li>
+        </ul>
+
+        <div class="todo-footer" z-show="done > 0">
+          <button class="btn btn-ghost btn-sm" @click="clearCompleted">Clear completed (${this.state.done})</button>
+        </div>
+      </div>
+    `;
+  }
+});

package/cli/scaffold/scripts/routes.js

@@ -0,0 +1,13 @@
+// scripts/routes.js — route definitions
+//
+// Each route maps a URL path to a component tag name.
+// Supports: static paths, :params, wildcards, and lazy loading via `load`.
+
+export const routes = [
+  { path: '/',         component: 'home-page'     },
+  { path: '/counter',  component: 'counter-page'  },
+  { path: '/todos',    component: 'todos-page'    },
+  { path: '/contacts', component: 'contacts-page' },
+  { path: '/api',      component: 'api-demo'      },
+  { path: '/about',    component: 'about-page'    },
+];

package/cli/scaffold/scripts/store.js

@@ -0,0 +1,96 @@
+// scripts/store.js — global state management
+//
+// $.store() creates a centralized store with state, actions, and getters.
+// Components can dispatch actions and subscribe to changes.
+// The store is accessible anywhere via $.getStore('main').
+
+export const store = $.store('main', {
+  state: {
+    todos: [],
+    visits: 0,
+
+    // Contacts
+    contacts: [
+      { id: 1, name: 'Alice Johnson',  email: 'alice@example.com',  role: 'Designer',  status: 'online',  favorite: true  },
+      { id: 2, name: 'Bob Martinez',   email: 'bob@example.com',    role: 'Developer', status: 'offline', favorite: false },
+      { id: 3, name: 'Carol White',    email: 'carol@example.com',  role: 'Manager',   status: 'online',  favorite: true  },
+      { id: 4, name: 'Dave Kim',       email: 'dave@example.com',   role: 'Designer',  status: 'away',    favorite: false },
+      { id: 5, name: 'Eve Torres',     email: 'eve@example.com',    role: 'Developer', status: 'online',  favorite: false },
+    ],
+    contactsAdded: 0,
+  },
+
+  actions: {
+    // Increment the global visit counter
+    incrementVisits(state) {
+      state.visits++;
+    },
+
+    // Add a new todo item using $.uuid() for unique IDs
+    addTodo(state, text) {
+      state.todos.push({
+        id: $.uuid(),
+        text: text.trim(),
+        done: false,
+        createdAt: Date.now(),
+      });
+    },
+
+    // Toggle a todo's completion status
+    toggleTodo(state, id) {
+      const todo = state.todos.find(t => t.id === id);
+      if (todo) todo.done = !todo.done;
+    },
+
+    // Remove a todo by ID
+    removeTodo(state, id) {
+      state.todos = state.todos.filter(t => t.id !== id);
+    },
+
+    // Clear all completed todos
+    clearCompleted(state) {
+      state.todos = state.todos.filter(t => !t.done);
+    },
+
+    // -- Contact actions --
+
+    addContact(state, { name, email, role }) {
+      state.contacts.push({
+        id:       Date.now(),
+        name,
+        email,
+        role,
+        status:   'offline',
+        favorite: false,
+      });
+      state.contactsAdded++;
+    },
+
+    deleteContact(state, id) {
+      state.contacts = state.contacts.filter(c => c.id !== id);
+    },
+
+    toggleFavorite(state, id) {
+      const c = state.contacts.find(c => c.id === id);
+      if (c) c.favorite = !c.favorite;
+    },
+
+    cycleContactStatus(state, id) {
+      const c = state.contacts.find(c => c.id === id);
+      if (!c) return;
+      const order = ['online', 'away', 'offline'];
+      c.status = order[(order.indexOf(c.status) + 1) % 3];
+    },
+  },
+
+  getters: {
+    todoCount:    (state) => state.todos.length,
+    doneCount:    (state) => state.todos.filter(t => t.done).length,
+    pendingCount: (state) => state.todos.filter(t => !t.done).length,
+
+    contactCount:    (state) => state.contacts.length,
+    favoriteCount:   (state) => state.contacts.filter(c => c.favorite).length,
+  },
+
+  debug: true,  // logs dispatches to console in development
+});