zero-query 0.9.6 → 0.9.8

package/cli/scaffold/default/app/components/toolkit/toolkit.js

@@ -0,0 +1,280 @@
+// toolkit.js — HTTP, utilities, and advanced store features
+//
+// Features used:
+//   $.http / $.post / $.put / $.delete  — HTTP client + interceptors
+//   $.pipe / $.memoize / $.retry        — functional utilities
+//   $.groupBy / $.chunk / $.unique      — collection helpers
+//   store.use / snapshot / history      — middleware & time-travel
+//   templateUrl / styleUrl              — external template & styles
+
+$.component('toolkit-page', {
+  templateUrl: 'toolkit.html',
+  styleUrl:    'toolkit.css',
+
+  state: () => ({
+    activeTab: 'http',
+    httpLog: [],
+    httpMethod: '',
+    httpEndpoint: '',
+    httpStatusCode: null,
+    httpOutput: '',
+    searchQuery: '',
+    searchResults: [],
+    searchLoading: false,
+    activeUtil: '',
+    utilOutput: '',
+    storeLog: [],
+    storeSnap: null,
+    storeHistory: null,
+    // Derived state for template expressions
+    methodClass: 'get',
+    statusOk: false,
+    actionCount: 0,
+  }),
+
+  // init() lifecycle — runs before the first render
+  init() {
+    this._prevBaseURL = $.http.getConfig().baseURL || '';
+    $.http.configure({ baseURL: 'https://jsonplaceholder.typicode.com' });
+
+    this._unsubReq = $.http.onRequest((opts, url) => {
+      this._pushLog('→  ' + (opts.method || 'GET') + '  ' + url);
+    });
+    this._unsubRes = $.http.onResponse((result) => {
+      this._pushLog('←  ' + result.status + '  ' + (result.statusText || 'OK'));
+    });
+
+    this._mwActive = true;
+    $.getStore('main').use((action, args) => {
+      if (!this._mwActive) return;
+      const raw = this.state.storeLog.__raw || this.state.storeLog;
+      this.state.storeLog = [...raw, {
+        id: Date.now(), action,
+        args: JSON.stringify(args).slice(0, 60),
+        time: new Date().toLocaleTimeString(),
+      }].slice(-8);
+    });
+
+    // Keep actionCount in sync with store history
+    this._syncActionCount();
+    this._storeSub = $.getStore('main').subscribe(() => this._syncActionCount());
+  },
+
+  destroyed() {
+    this._mwActive = false;
+    if (this._unsubReq) this._unsubReq();
+    if (this._unsubRes) this._unsubRes();
+    if (this._abortCtrl) this._abortCtrl.abort();
+    if (this._storeSub) this._storeSub();
+    $.http.configure({ baseURL: this._prevBaseURL });
+  },
+
+  _pushLog(msg) {
+    const raw = this.state.httpLog.__raw || this.state.httpLog;
+    this.state.httpLog = [...raw, { id: Date.now(), msg }].slice(-10);
+  },
+
+  _syncActionCount() {
+    const store = $.getStore('main');
+    this.state.actionCount = store.history ? store.history.length : 0;
+  },
+
+  _updateHttpMeta(method, endpoint) {
+    this.state.httpMethod = method;
+    this.state.httpEndpoint = endpoint;
+    this.state.httpOutput = '';
+    this.state.httpStatusCode = null;
+    this.state.methodClass = method === 'DELETE' ? 'del' : (method || 'get').toLowerCase();
+    this.state.statusOk = false;
+  },
+
+  _setHttpResult(status, output) {
+    this.state.httpStatusCode = status;
+    this.state.statusOk = status >= 200 && status < 400;
+    this.state.httpOutput = output;
+  },
+
+  setTab(tab) {
+    this.state.activeTab = tab;
+    this.state.utilOutput = '';
+    this.state.activeUtil = '';
+    this.state.httpOutput = '';
+    this.state.httpMethod = '';
+    this.state.httpStatusCode = null;
+    this.state.storeSnap = null;
+    this.state.storeHistory = null;
+  },
+
+  /* ── HTTP demos ───────────────────────────────────────────── */
+
+  async doGet() {
+    this._updateHttpMeta('GET', '/posts/1');
+    try {
+      const { data, status } = await $.get('/posts/1');
+      this._setHttpResult(status, JSON.stringify(data, null, 2));
+    } catch (e) { this._setHttpResult(0, 'Error: ' + e.message); }
+  },
+
+  async doPost() {
+    this._updateHttpMeta('POST', '/posts');
+    try {
+      const { data, status } = await $.post('/posts', {
+        title: 'Created with zQuery', body: 'Sent via $.post()', userId: 1,
+      });
+      this._setHttpResult(status, JSON.stringify(data, null, 2));
+      $.bus.emit('toast', { message: 'POST successful!', type: 'success' });
+    } catch (e) { this._setHttpResult(0, 'Error: ' + e.message); }
+  },
+
+  async doPut() {
+    this._updateHttpMeta('PUT', '/posts/1');
+    try {
+      const { data, status } = await $.put('/posts/1', {
+        id: 1, title: 'Updated via $.put()', body: 'Full resource replacement', userId: 1,
+      });
+      this._setHttpResult(status, JSON.stringify(data, null, 2));
+      $.bus.emit('toast', { message: 'PUT successful!', type: 'success' });
+    } catch (e) { this._setHttpResult(0, 'Error: ' + e.message); }
+  },
+
+  async doDelete() {
+    this._updateHttpMeta('DELETE', '/posts/1');
+    try {
+      const { status } = await $.delete('/posts/1');
+      this._setHttpResult(status, 'Resource deleted successfully.');
+      $.bus.emit('toast', { message: 'DELETE sent', type: 'info' });
+    } catch (e) { this._setHttpResult(0, 'Error: ' + e.message); }
+  },
+
+  async doSearch(e) {
+    const q = e.target.value.trim().toLowerCase();
+    this.state.searchQuery = e.target.value;
+    if (!q) { this.state.searchResults = []; return; }
+
+    if (this._abortCtrl) this._abortCtrl.abort();
+    this._abortCtrl = $.http.createAbort();
+    this.state.searchLoading = true;
+
+    try {
+      const { data } = await $.get('/users', null, { signal: this._abortCtrl.signal });
+      this.state.searchResults = data.filter(u =>
+        u.name.toLowerCase().includes(q) || u.email.toLowerCase().includes(q)
+      ).slice(0, 5);
+    } catch (err) {
+      if (err.name !== 'AbortError') this.state.searchResults = [];
+    } finally { this.state.searchLoading = false; }
+  },
+
+  /* ── Utility demos ─────────────────────────────────────────── */
+
+  runUtil(name) {
+    this.state.activeUtil = name;
+    const demos = {
+      pipe: () => {
+        const slugify = $.pipe(
+          s => s.trim(), s => s.toLowerCase(),
+          s => s.replace(/[^a-z0-9]+/g, '-'), s => s.replace(/^-|-$/g, ''),
+        );
+        const input = '  Hello World! Creating Slugs  ';
+        return `$.pipe(trim, lower, replace, strip)\n\nInput:  "${input}"\nOutput: "${slugify(input)}"`;
+      },
+      memoize: () => {
+        const slowFib = (n) => n <= 1 ? n : slowFib(n - 1) + slowFib(n - 2);
+        const t0 = performance.now();
+        const result = slowFib(35);
+        const slowTime = performance.now() - t0;
+
+        const memoFib = $.memoize((n) => n <= 1 ? n : memoFib(n - 1) + memoFib(n - 2));
+        const t1 = performance.now();
+        memoFib(35);
+        const fastTime = performance.now() - t1;
+
+        const t2 = performance.now();
+        memoFib(35);
+        const cachedTime = performance.now() - t2;
+
+        return [
+          `$.memoize(fibonacci)`,
+          ``,
+          `fib(35) = ${result}`,
+          `────────────────────────────`,
+          `No memoize:  ${slowTime.toFixed(1)} ms`,
+          `Memoized:    ${fastTime.toFixed(3)} ms`,
+          `Cached:      ${cachedTime.toFixed(4)} ms  ⚡`,
+          ``,
+          `Speedup:     ${(slowTime / Math.max(fastTime, 0.001)).toFixed(0)}× faster`,
+        ].join('\n');
+      },
+      retry: async () => {
+        this.state.utilOutput = '⏳ Running with exponential backoff…';
+        const log = [];
+        try {
+          await $.retry(async (attempt) => {
+            log.push(`  #${attempt}  ${attempt < 3 ? '✗ failed' : '✓ succeeded!'}`);
+            if (attempt < 3) throw new Error('Simulated failure');
+            return 'ok';
+          }, { attempts: 3, delay: 400, backoff: 2 });
+        } catch (e) { log.push('  All attempts failed.'); }
+        this.state.utilOutput = '$.retry({ attempts: 3, delay: 400, backoff: 2 })\n\n' + log.join('\n');
+      },
+      arrays: () => {
+        const data = [
+          { name: 'Alice', dept: 'eng' }, { name: 'Bob', dept: 'qa' },
+          { name: 'Carol', dept: 'eng' }, { name: 'Dave', dept: 'design' },
+        ];
+        return [
+          '$.groupBy(people, p => p.dept)',
+          JSON.stringify($.groupBy(data, p => p.dept), null, 2),
+          '',
+          '$.chunk($.range(1,9), 3)  →  ' + JSON.stringify($.chunk($.range(1, 9), 3)),
+          '$.unique([3,1,4,1,5,9])   →  ' + JSON.stringify($.unique([3, 1, 4, 1, 5, 9, 2, 5])),
+          '$.range(0, 10, 2)         →  ' + JSON.stringify($.range(0, 10, 2)),
+        ].join('\n');
+      },
+      objects: () => {
+        const obj = { name: 'Tony', email: 'tony@dev.io', role: 'admin', secret: 'abc' };
+        const a = { x: 1, nested: { y: 2 } };
+        return [
+          `$.pick(obj, ["name","email"])  →  ${JSON.stringify($.pick(obj, ['name', 'email']))}`,
+          `$.omit(obj, ["secret"])        →  ${JSON.stringify($.omit(obj, ['secret']))}`,
+          `$.isEqual(a, b)               →  ${$.isEqual(a, { x: 1, nested: { y: 2 } })}`,
+          ``,
+          `$.deepMerge({}, a, { nested: { z: 3 } })`,
+          JSON.stringify($.deepMerge({}, a, { nested: { z: 3 } }), null, 2),
+        ].join('\n');
+      },
+      strings: () => [
+        `$.capitalize('hello')          →  "${$.capitalize('hello')}"`,
+        `$.truncate('Hello World!', 8)  →  "${$.truncate('Hello World!', 8)}"`,
+        `$.camelCase('my-component')    →  "${$.camelCase('my-component')}"`,
+        `$.kebabCase('myComponent')     →  "${$.kebabCase('myComponent')}"`,
+        ``,
+        `$.param({ q: 'test', page: 2 })`,
+        `  →  "${$.param({ q: 'test', page: 2 })}"`,
+        ``,
+        `$.parseQuery('?q=test&page=2')`,
+        `  →  ${JSON.stringify($.parseQuery('?q=test&page=2'))}`,
+      ].join('\n'),
+    };
+
+    const fn = demos[name];
+    if (!fn) return;
+    const result = fn();
+    if (result && typeof result.then === 'function') return;
+    this.state.utilOutput = result;
+  },
+
+  /* ── Store demos ──────────────────────────────────────────── */
+
+  takeSnapshot() {
+    this.state.storeSnap = JSON.stringify($.getStore('main').snapshot(), null, 2);
+    this.state.storeHistory = null;
+    $.bus.emit('toast', { message: 'Snapshot captured!', type: 'info' });
+  },
+
+  viewHistory() {
+    const h = $.getStore('main').history.slice(-6);
+    this.state.storeHistory = JSON.stringify(h, null, 2);
+    this.state.storeSnap = null;
+  },
+});

package/cli/scaffold/default/app/routes.js

@@ -0,0 +1,15 @@
+// routes.js — Route definitions
+//
+// Maps URL paths to component tag names.
+// Also supports :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: '/playground', component: 'playground-page' },
+  { path: '/toolkit',    component: 'toolkit-page'    },
+  { path: '/about',      component: 'about-page'      },
+];

package/cli/scaffold/{app → default/app}/store.js

@@ -1,8 +1,8 @@
-// app/store.js — global state management
+// 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').
+// Defines a centralized store with state, actions, and getters.
+// Any component can access it via $.getStore('main').
+// Dispatch actions to update state; subscribe to react to changes.
 
 export const store = $.store('main', {
   state: {
@@ -11,11 +11,11 @@ export const store = $.store('main', {
 
     // Contacts
     contacts: [
-      { id: 1, name: 'Tony Wiedman',     email: 'tony@z-query.com',     role: 'Developer', status: 'online',  favorite: true  },
-      { id: 2, name: 'Robert Baratheon', email: 'robert@stormlands.io', role: 'Manager',   status: 'offline', favorite: false },
-      { id: 3, name: 'Terry A. Davis',   email: 'terry@templeos.net',   role: 'Developer', status: 'online',  favorite: true  },
-      { id: 4, name: 'Trevor Moore',     email: 'trevor@wkuk.tv',       role: 'Designer',  status: 'away',    favorite: false },
-      { id: 5, name: 'Carlo Acutis',     email: 'carlo@vatican.va',     role: 'Developer', status: 'online',  favorite: false },
+      { id: 1, name: 'Tony Wiedman',     email: 'tony@z-query.com',     role: 'Developer', status: 'online',  favorite: true,  phone: '+1 (555) 201-0017', location: 'Philadelphia, PA', joined: '2024-01-15', bio: 'Full-stack developer & creator of zQuery.' },
+      { id: 2, name: 'Robert Baratheon', email: 'robert@stormlands.io', role: 'Manager',   status: 'offline', favorite: false, phone: '+1 (555) 783-1042', location: "Storm's End, Westeros", joined: '2024-03-22', bio: 'Former king turned project manager.' },
+      { id: 3, name: 'Terry A. Davis',   email: 'terry@templeos.net',   role: 'Developer', status: 'online',  favorite: true,  phone: '+1 (555) 640-8086', location: 'Las Vegas, NV', joined: '2024-02-10', bio: 'Built an entire OS from scratch. Legendary.' },
+      { id: 4, name: 'Trevor Moore',     email: 'trevor@wkuk.tv',       role: 'Designer',  status: 'away',    favorite: false, phone: '+1 (555) 994-2287', location: 'Los Angeles, CA', joined: '2024-05-08', bio: 'Comedian, writer, and creative visionary.' },
+      { id: 5, name: 'Carlo Acutis',     email: 'carlo@vatican.va',     role: 'Developer', status: 'online',  favorite: false, phone: '+39 (02) 555-1430', location: 'Milan, Italy', joined: '2024-04-01', bio: 'Patron saint of the internet.' },
     ],
     contactsAdded: 0,
   },
@@ -54,7 +54,8 @@ export const store = $.store('main', {
 
     // -- Contact actions --
 
-    addContact(state, { name, email, role }) {
+    addContact(state, { name, email, role, phone, location, bio }) {
+      const cities = ['New York, NY', 'San Francisco, CA', 'Austin, TX', 'Seattle, WA', 'Chicago, IL', 'Denver, CO', 'Portland, OR', 'Boston, MA'];
       state.contacts.push({
         id:       Date.now(),
         name,
@@ -62,6 +63,10 @@ export const store = $.store('main', {
         role,
         status:   'offline',
         favorite: false,
+        phone:    phone || '',
+        location: location || cities[Math.floor(Math.random() * cities.length)],
+        joined:   new Date().toISOString().slice(0, 10),
+        bio:      bio || '',
       });
       state.contactsAdded++;
     },