zero-query 1.1.1 → 1.2.0

package/cli/scaffold/ssr/app/app.js

@@ -1,41 +1,41 @@
-// app.js - Client entry point
-//
-// Imports shared component definitions and registers them with zQuery.
-// The SSR server imports the same definitions via createSSRApp().
-// Server-fetched data is embedded in window.__SSR_DATA__ for hydration.
-
-import { homePage }  from './components/home.js';
-import { aboutPage } from './components/about.js';
-import { blogList }  from './components/blog/index.js';
-import { blogPost }  from './components/blog/post.js';
-import { notFound }  from './components/not-found.js';
-import { routes }    from './routes.js';
-
-// Register shared component definitions on the client
-$.component('home-page',  homePage);
-$.component('about-page', aboutPage);
-$.component('blog-list',  blogList);
-$.component('blog-post',  blogPost);
-$.component('not-found',  notFound);
-
-// Route → page title mapping (mirrors server getMetaForRoute)
-const routeTitles = {
-  'home-page':  '{{NAME}} — Home',
-  'blog-list':  'Blog — {{NAME}}',
-  'blog-post':  null, // dynamic — set by component
-  'about-page': 'About — {{NAME}}',
-  'not-found':  'Page Not Found — {{NAME}}',
-};
-
-// Client-side router
-const router = $.router({
-  routes,
-  fallback: 'not-found',
-  mode: 'history'
-});
-
-// Update document.title on client-side navigations
-router.onChange(({ route }) => {
-  const title = routeTitles[route.component];
-  if (title) document.title = title;
-});
+// app.js - Client entry point
+//
+// Imports shared component definitions and registers them with zQuery.
+// The SSR server imports the same definitions via createSSRApp().
+// Server-fetched data is embedded in window.__SSR_DATA__ for hydration.
+
+import { homePage }  from './components/home.js';
+import { aboutPage } from './components/about.js';
+import { blogList }  from './components/blog/index.js';
+import { blogPost }  from './components/blog/post.js';
+import { notFound }  from './components/not-found.js';
+import { routes }    from './routes.js';
+
+// Register shared component definitions on the client
+$.component('home-page',  homePage);
+$.component('about-page', aboutPage);
+$.component('blog-list',  blogList);
+$.component('blog-post',  blogPost);
+$.component('not-found',  notFound);
+
+// Route → page title mapping (mirrors server getMetaForRoute)
+const routeTitles = {
+  'home-page':  '{{NAME}} — Home',
+  'blog-list':  'Blog — {{NAME}}',
+  'blog-post':  null, // dynamic — set by component
+  'about-page': 'About — {{NAME}}',
+  'not-found':  'Page Not Found — {{NAME}}',
+};
+
+// Client-side router
+const router = $.router({
+  routes,
+  fallback: 'not-found',
+  mode: 'history'
+});
+
+// Update document.title on client-side navigations
+router.onChange(({ route }) => {
+  const title = routeTitles[route.component];
+  if (title) document.title = title;
+});

package/cli/scaffold/ssr/app/components/about.js

@@ -1,55 +1,55 @@
-// about.js - About page component
-
-export const aboutPage = {
-  render() {
-    return `
-      <div class="page-header">
-        <h1>About</h1>
-        <p class="subtitle">This app is powered by zQuery — a zero-dependency frontend micro-library.</p>
-      </div>
-
-      <div class="card">
-        <h3>What is zQuery?</h3>
-        <p style="line-height:1.7;">
-          zQuery is a lightweight, zero-dependency JavaScript library for building
-          reactive web applications. It provides components, routing, state management,
-          server-side rendering, and more — all in a single, tiny package with no
-          build step required.
-        </p>
-      </div>
-
-      <div class="card">
-        <h3>Core Features</h3>
-        <ul style="padding-left:1.2rem; line-height:2;">
-          <li><strong>Reactive state</strong> — fine-grained reactivity with <code>$.reactive()</code></li>
-          <li><strong>Components</strong> — <code>$.component()</code> with state, lifecycle hooks, and computed properties</li>
-          <li><strong>Routing</strong> — <code>$.router()</code> with history mode, params, guards, and <code>z-link</code> navigation</li>
-          <li><strong>Store</strong> — centralized state via <code>$.store()</code></li>
-          <li><strong>SSR</strong> — <code>createSSRApp()</code>, <code>renderToString()</code>, hydration markers</li>
-          <li><strong>HTTP</strong> — <code>$.http</code> with interceptors, timeout, and parallel requests</li>
-          <li><strong>Zero dependencies</strong> — nothing to install, audit, or keep up-to-date</li>
-        </ul>
-      </div>
-
-      <div class="card">
-        <h3>This Scaffold</h3>
-        <p style="line-height:1.7;">
-          You're running the <strong>SSR scaffold</strong> — a production-ready starter
-          with server-side rendering, client hydration, param-based routing, JSON API
-          endpoints, and per-route SEO metadata. Edit the components in <code>app/</code>
-          and the server in <code>server/</code> to make it your own.
-        </p>
-      </div>
-
-      <div class="card">
-        <h3>Links</h3>
-        <ul style="padding-left:1.2rem; line-height:2.2; list-style:none;">
-          <li>📄 <a href="https://z-query.com" target="_blank" rel="noopener">zQuery Website</a></li>
-          <li>📦 <a href="https://www.npmjs.com/package/zero-query" target="_blank" rel="noopener">npm — zero-query</a></li>
-          <li>🛠️ <a href="https://github.com/tonywied17/zero-query" target="_blank" rel="noopener">GitHub Repository</a></li>
-          <li>📖 <a href="https://z-query.com/docs" target="_blank" rel="noopener">Documentation</a></li>
-        </ul>
-      </div>
-    `;
-  }
-};
+// about.js - About page component
+
+export const aboutPage = {
+  render() {
+    return `
+      <div class="page-header">
+        <h1>About</h1>
+        <p class="subtitle">This app is powered by zQuery — a zero-dependency frontend micro-library.</p>
+      </div>
+
+      <div class="card">
+        <h3>What is zQuery?</h3>
+        <p style="line-height:1.7;">
+          zQuery is a lightweight, zero-dependency JavaScript library for building
+          reactive web applications. It provides components, routing, state management,
+          server-side rendering, and more — all in a single, tiny package with no
+          build step required.
+        </p>
+      </div>
+
+      <div class="card">
+        <h3>Core Features</h3>
+        <ul style="padding-left:1.2rem; line-height:2;">
+          <li><strong>Reactive state</strong> — fine-grained reactivity with <code>$.reactive()</code></li>
+          <li><strong>Components</strong> — <code>$.component()</code> with state, lifecycle hooks, and computed properties</li>
+          <li><strong>Routing</strong> — <code>$.router()</code> with history mode, params, guards, and <code>z-link</code> navigation</li>
+          <li><strong>Store</strong> — centralized state via <code>$.store()</code></li>
+          <li><strong>SSR</strong> — <code>createSSRApp()</code>, <code>renderToString()</code>, hydration markers</li>
+          <li><strong>HTTP</strong> — <code>$.http</code> with interceptors, timeout, and parallel requests</li>
+          <li><strong>Zero dependencies</strong> — nothing to install, audit, or keep up-to-date</li>
+        </ul>
+      </div>
+
+      <div class="card">
+        <h3>This Scaffold</h3>
+        <p style="line-height:1.7;">
+          You're running the <strong>SSR scaffold</strong> — a production-ready starter
+          with server-side rendering, client hydration, param-based routing, JSON API
+          endpoints, and per-route SEO metadata. Edit the components in <code>app/</code>
+          and the server in <code>server/</code> to make it your own.
+        </p>
+      </div>
+
+      <div class="card">
+        <h3>Links</h3>
+        <ul style="padding-left:1.2rem; line-height:2.2; list-style:none;">
+          <li>📄 <a href="https://z-query.com" target="_blank" rel="noopener">zQuery Website</a></li>
+          <li>📦 <a href="https://www.npmjs.com/package/zero-query" target="_blank" rel="noopener">npm — zero-query</a></li>
+          <li>🛠️ <a href="https://github.com/tonywied17/zero-query" target="_blank" rel="noopener">GitHub Repository</a></li>
+          <li>📖 <a href="https://z-query.com/docs" target="_blank" rel="noopener">Documentation</a></li>
+        </ul>
+      </div>
+    `;
+  }
+};

package/cli/scaffold/ssr/app/components/blog/index.js

@@ -1,65 +1,65 @@
-// blog/index.js - Blog listing component
-//
-// Renders a grid of blog post cards. Data flow:
-//   SSR:    Server passes { posts } as props → render() reads this.props.posts
-//   Client: init() checks window.__SSR_DATA__ first (hydration), then fetches
-//           from /api/posts for subsequent navigations.
-//
-// Demonstrates:
-//   - Shared component that works on both server and client
-//   - Server data injection via props (SSR) and fetch (client)
-//   - z-link with dynamic URLs for client-side navigation
-//   - Clean SSR-friendly templates (no DOM API in render)
-
-export const blogList = {
-  state: () => ({
-    posts: [],
-    loaded: false,
-  }),
-
-  async init() {
-    // On the server, props.posts is injected by app.renderToString()
-    if (this.props.posts) {
-      this.state.posts = this.props.posts;
-      this.state.loaded = true;
-      return;
-    }
-
-    // On the client, check for SSR-embedded data first (initial page load)
-    const ssrData = typeof window !== 'undefined' && window.__SSR_DATA__;
-    if (ssrData && ssrData.component === 'blog-list') {
-      this.state.posts = ssrData.props.posts;
-      this.state.loaded = true;
-      window.__SSR_DATA__ = null;
-      return;
-    }
-
-    // Client navigation — fetch from server API
-    const res = await fetch('/api/posts');
-    this.state.posts = await res.json();
-    this.state.loaded = true;
-  },
-
-  render() {
-    const posts = this.state.posts;
-
-    const cards = posts.map(post => `
-      <a z-link="/blog/${post.slug}" class="blog-card">
-        <div class="blog-card-header">
-          <span class="badge badge-ssr">${post.tag}</span>
-          <time class="blog-date">${post.date}</time>
-        </div>
-        <h3 class="blog-title">${post.title}</h3>
-        <p class="blog-summary">${post.summary}</p>
-      </a>
-    `).join('');
-
-    return `
-      <div class="page-header">
-        <h1>Blog</h1>
-        <p class="subtitle">Server-rendered articles — fast first paint, fully crawlable.</p>
-      </div>
-      <div class="blog-grid">${cards}</div>
-    `;
-  }
-};
+// blog/index.js - Blog listing component
+//
+// Renders a grid of blog post cards. Data flow:
+//   SSR:    Server passes { posts } as props → render() reads this.props.posts
+//   Client: init() checks window.__SSR_DATA__ first (hydration), then fetches
+//           from /api/posts for subsequent navigations.
+//
+// Demonstrates:
+//   - Shared component that works on both server and client
+//   - Server data injection via props (SSR) and fetch (client)
+//   - z-link with dynamic URLs for client-side navigation
+//   - Clean SSR-friendly templates (no DOM API in render)
+
+export const blogList = {
+  state: () => ({
+    posts: [],
+    loaded: false,
+  }),
+
+  async init() {
+    // On the server, props.posts is injected by app.renderToString()
+    if (this.props.posts) {
+      this.state.posts = this.props.posts;
+      this.state.loaded = true;
+      return;
+    }
+
+    // On the client, check for SSR-embedded data first (initial page load)
+    const ssrData = typeof window !== 'undefined' && window.__SSR_DATA__;
+    if (ssrData && ssrData.component === 'blog-list') {
+      this.state.posts = ssrData.props.posts;
+      this.state.loaded = true;
+      window.__SSR_DATA__ = null;
+      return;
+    }
+
+    // Client navigation — fetch from server API
+    const res = await fetch('/api/posts');
+    this.state.posts = await res.json();
+    this.state.loaded = true;
+  },
+
+  render() {
+    const posts = this.state.posts;
+
+    const cards = posts.map(post => `
+      <a z-link="/blog/${post.slug}" class="blog-card">
+        <div class="blog-card-header">
+          <span class="badge badge-ssr">${post.tag}</span>
+          <time class="blog-date">${post.date}</time>
+        </div>
+        <h3 class="blog-title">${post.title}</h3>
+        <p class="blog-summary">${post.summary}</p>
+      </a>
+    `).join('');
+
+    return `
+      <div class="page-header">
+        <h1>Blog</h1>
+        <p class="subtitle">Server-rendered articles — fast first paint, fully crawlable.</p>
+      </div>
+      <div class="blog-grid">${cards}</div>
+    `;
+  }
+};

package/cli/scaffold/ssr/app/components/blog/post.js

@@ -1,86 +1,86 @@
-// blog/post.js - Single blog post detail component
-//
-// Renders the full content of a blog post. Data flow:
-//   SSR:    Server passes { post } as props → init() reads this.props.post
-//   Client: init() checks window.__SSR_DATA__ first, then fetches from
-//           /api/posts/:slug for client-side navigations.
-//
-// Route:  /blog/:slug
-//
-// Demonstrates:
-//   - Param routing with this.props.$params.slug (or this.props.slug)
-//   - Server data injection via props (SSR) and fetch (client)
-//   - z-link for back-navigation without full page reload
-//   - Graceful handling of missing data (404-style fallback)
-
-export const blogPost = {
-  state: () => ({
-    post: null,
-    loaded: false,
-  }),
-
-  async init() {
-    const slug = this.props.slug || (this.props.$params && this.props.$params.slug);
-
-    // On the server, props.post is injected by app.renderToString()
-    if (this.props.post) {
-      this.state.post = this.props.post;
-      this.state.loaded = true;
-      return;
-    }
-
-    // On the client, check for SSR-embedded data first (initial page load)
-    const ssrData = typeof window !== 'undefined' && window.__SSR_DATA__;
-    if (ssrData && ssrData.component === 'blog-post' && ssrData.params.slug === slug) {
-      this.state.post = ssrData.props.post;
-      this.state.loaded = true;
-      if (ssrData.meta && ssrData.meta.title) document.title = ssrData.meta.title;
-      window.__SSR_DATA__ = null;
-      return;
-    }
-
-    // Client navigation — fetch from server API
-    const res = await fetch(`/api/posts/${slug}`);
-    if (res.ok) {
-      this.state.post = await res.json();
-    }
-    this.state.loaded = true;
-
-    // Update page title for client-side navigations
-    if (this.state.post) {
-      document.title = `${this.state.post.title} — {{NAME}}`;
-    } else {
-      document.title = 'Post Not Found — {{NAME}}';
-    }
-  },
-
-  render() {
-    const post = this.state.post;
-
-    if (!post) {
-      return `
-        <div class="page-header center">
-          <h1>Post Not Found</h1>
-          <p class="subtitle">The article you're looking for doesn't exist.</p>
-          <p style="margin-top:1rem;">
-            <a z-link="/blog" class="back-link">← Back to Blog</a>
-          </p>
-        </div>
-      `;
-    }
-
-    return `
-      <article class="blog-post">
-        <header class="page-header">
-          <a z-link="/blog" class="back-link">← Back to Blog</a>
-          <h1>${post.title}</h1>
-          <div class="blog-post-meta">
-            <span class="badge badge-ssr">${post.tag}</span>
-            <time class="blog-date">${post.date}</time>
-          </div>
-        </header>
-        <div class="blog-post-body">${post.body}</div>
-      </article>
-    `;
-  }
-};
+// blog/post.js - Single blog post detail component
+//
+// Renders the full content of a blog post. Data flow:
+//   SSR:    Server passes { post } as props → init() reads this.props.post
+//   Client: init() checks window.__SSR_DATA__ first, then fetches from
+//           /api/posts/:slug for client-side navigations.
+//
+// Route:  /blog/:slug
+//
+// Demonstrates:
+//   - Param routing with this.props.$params.slug (or this.props.slug)
+//   - Server data injection via props (SSR) and fetch (client)
+//   - z-link for back-navigation without full page reload
+//   - Graceful handling of missing data (404-style fallback)
+
+export const blogPost = {
+  state: () => ({
+    post: null,
+    loaded: false,
+  }),
+
+  async init() {
+    const slug = this.props.slug || (this.props.$params && this.props.$params.slug);
+
+    // On the server, props.post is injected by app.renderToString()
+    if (this.props.post) {
+      this.state.post = this.props.post;
+      this.state.loaded = true;
+      return;
+    }
+
+    // On the client, check for SSR-embedded data first (initial page load)
+    const ssrData = typeof window !== 'undefined' && window.__SSR_DATA__;
+    if (ssrData && ssrData.component === 'blog-post' && ssrData.params.slug === slug) {
+      this.state.post = ssrData.props.post;
+      this.state.loaded = true;
+      if (ssrData.meta && ssrData.meta.title) document.title = ssrData.meta.title;
+      window.__SSR_DATA__ = null;
+      return;
+    }
+
+    // Client navigation — fetch from server API
+    const res = await fetch(`/api/posts/${slug}`);
+    if (res.ok) {
+      this.state.post = await res.json();
+    }
+    this.state.loaded = true;
+
+    // Update page title for client-side navigations
+    if (this.state.post) {
+      document.title = `${this.state.post.title} — {{NAME}}`;
+    } else {
+      document.title = 'Post Not Found — {{NAME}}';
+    }
+  },
+
+  render() {
+    const post = this.state.post;
+
+    if (!post) {
+      return `
+        <div class="page-header center">
+          <h1>Post Not Found</h1>
+          <p class="subtitle">The article you're looking for doesn't exist.</p>
+          <p style="margin-top:1rem;">
+            <a z-link="/blog" class="back-link">← Back to Blog</a>
+          </p>
+        </div>
+      `;
+    }
+
+    return `
+      <article class="blog-post">
+        <header class="page-header">
+          <a z-link="/blog" class="back-link">← Back to Blog</a>
+          <h1>${post.title}</h1>
+          <div class="blog-post-meta">
+            <span class="badge badge-ssr">${post.tag}</span>
+            <time class="blog-date">${post.date}</time>
+          </div>
+        </header>
+        <div class="blog-post-body">${post.body}</div>
+      </article>
+    `;
+  }
+};

package/cli/scaffold/ssr/app/components/home.js

@@ -1,37 +1,37 @@
-// home.js - Home page component
-//
-// Exports a plain definition object that works on both client and server.
-// The client registers it with $.component(), the server with app.component().
-
-export const homePage = {
-  state: () => ({
-    greeting: 'Hello',
-    timestamp: new Date().toLocaleTimeString(),
-  }),
-
-  // init() runs on both client and server - no DOM required
-  init() {
-    const hour = new Date().getHours();
-    this.state.greeting =
-      hour < 12 ? 'Good morning' :
-      hour < 18 ? 'Good afternoon' : 'Good evening';
-  },
-
-  render() {
-    return `
-      <div class="page-header">
-        <h1>${this.state.greeting} 👋</h1>
-        <p class="subtitle">Rendered with zQuery SSR</p>
-      </div>
-      <div class="card">
-        <h3>Server-Side Rendering</h3>
-        <p>
-          This page was rendered to HTML on the server and served as a complete
-          document. The same component definition powers both the SSR server and
-          the client-side SPA.
-        </p>
-        <p>Rendered at <strong>${this.state.timestamp}</strong></p>
-      </div>
-    `;
-  }
-};
+// home.js - Home page component
+//
+// Exports a plain definition object that works on both client and server.
+// The client registers it with $.component(), the server with app.component().
+
+export const homePage = {
+  state: () => ({
+    greeting: 'Hello',
+    timestamp: new Date().toLocaleTimeString(),
+  }),
+
+  // init() runs on both client and server - no DOM required
+  init() {
+    const hour = new Date().getHours();
+    this.state.greeting =
+      hour < 12 ? 'Good morning' :
+      hour < 18 ? 'Good afternoon' : 'Good evening';
+  },
+
+  render() {
+    return `
+      <div class="page-header">
+        <h1>${this.state.greeting} 👋</h1>
+        <p class="subtitle">Rendered with zQuery SSR</p>
+      </div>
+      <div class="card">
+        <h3>Server-Side Rendering</h3>
+        <p>
+          This page was rendered to HTML on the server and served as a complete
+          document. The same component definition powers both the SSR server and
+          the client-side SPA.
+        </p>
+        <p>Rendered at <strong>${this.state.timestamp}</strong></p>
+      </div>
+    `;
+  }
+};

package/cli/scaffold/ssr/app/components/not-found.js

@@ -1,15 +1,15 @@
-// not-found.js - 404 fallback component
-
-export const notFound = {
-  render() {
-    return `
-      <div class="page-header" style="text-align:center; margin-top:4rem;">
-        <h1>404</h1>
-        <p class="subtitle">Page not found.</p>
-        <p style="margin-top:1rem;">
-          <a z-link="/" style="color:var(--accent);">← Home</a>
-        </p>
-      </div>
-    `;
-  }
-};
+// not-found.js - 404 fallback component
+
+export const notFound = {
+  render() {
+    return `
+      <div class="page-header" style="text-align:center; margin-top:4rem;">
+        <h1>404</h1>
+        <p class="subtitle">Page not found.</p>
+        <p style="margin-top:1rem;">
+          <a z-link="/" style="color:var(--accent);">← Home</a>
+        </p>
+      </div>
+    `;
+  }
+};

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

@@ -1,8 +1,8 @@
-// routes.js - Route definitions (shared between client and server)
-
-export const routes = [
-  { path: '/',            component: 'home-page'  },
-  { path: '/blog',        component: 'blog-list'  },
-  { path: '/blog/:slug',  component: 'blog-post'  },
-  { path: '/about',       component: 'about-page' },
-];
+// routes.js - Route definitions (shared between client and server)
+
+export const routes = [
+  { path: '/',            component: 'home-page'  },
+  { path: '/blog',        component: 'blog-list'  },
+  { path: '/blog/:slug',  component: 'blog-post'  },
+  { path: '/about',       component: 'about-page' },
+];