zero-query 0.8.6 → 0.8.8

package/src/component.js

@@ -15,7 +15,7 @@
  *   - Scoped styles (inline or via styleUrl)
  *   - External templates via templateUrl (with {{expression}} interpolation)
  *   - External styles via styleUrl (fetched & scoped automatically)
- *   - Relative path resolution — templateUrl, styleUrl, and pages.dir
+ *   - Relative path resolution — templateUrl and styleUrl
  *     resolve relative to the component file automatically
  */
 
@@ -86,16 +86,6 @@ function _fetchResource(url) {
   return promise;
 }
 
-/**
- * Convert a kebab-case id to Title Case.
- * 'getting-started' → 'Getting Started'
- * @param {string} id
- * @returns {string}
- */
-function _titleCase(id) {
-  return id.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
-}
-
 /**
  * Resolve a relative URL against a base.
  *
@@ -314,47 +304,10 @@ class Component {
   //   - string              → single stylesheet
   //   - string[]            → array of URLs → all fetched & concatenated
   //
-  // pages config (shorthand for multi-template + route-param page switching):
-  //   pages: {
-  //     dir:     'pages',             // relative to component file (or base)
-  //     param:   'section',           // route param name → this.activePage
-  //     default: 'getting-started',   // fallback when param is absent
-  //     ext:     '.html',             // file extension (default '.html')
-  //     items:   ['page-a', { id: 'page-b', label: 'Page B' }, ...]
-  //   }
-  //   Exposes this.pages (array of {id,label}), this.activePage (current id)
-  //   Pages are lazy-loaded: only the active page is fetched on first render,
-  //   remaining pages are prefetched in the background for instant navigation.
-  //
   async _loadExternals() {
     const def = this._def;
     const base = def._base; // auto-detected or explicit
 
-    // -- Pages config ---------------------------------------------
-    if (def.pages && !def._pagesNormalized) {
-      const p = def.pages;
-      const ext = p.ext || '.html';
-      const dir = _resolveUrl((p.dir || '').replace(/\/+$/, ''), base);
-
-      // Normalize items → [{id, label}, …]
-      def._pages = (p.items || []).map(item => {
-        if (typeof item === 'string') return { id: item, label: _titleCase(item) };
-        return { ...item, label: item.label || _titleCase(item.id) };
-      });
-
-      // Build URL map for lazy per-page loading.
-      // Pages are fetched on demand (active page first, rest prefetched in
-      // the background) so the component renders as soon as the visible
-      // page is ready instead of waiting for every page to download.
-      def._pageUrls = {};
-      for (const { id } of def._pages) {
-        def._pageUrls[id] = `${dir}/${id}${ext}`;
-      }
-      if (!def._externalTemplates) def._externalTemplates = {};
-
-      def._pagesNormalized = true;
-    }
-
     // -- External templates --------------------------------------
     if (def.templateUrl && !def._templateLoaded) {
       const tu = def.templateUrl;
@@ -367,9 +320,8 @@ class Component {
         results.forEach((html, i) => { def._externalTemplates[i] = html; });
       } else if (typeof tu === 'object') {
         const entries = Object.entries(tu);
-        // Pages config already resolved; plain objects still need resolving
         const results = await Promise.all(
-          entries.map(([, url]) => _fetchResource(def._pagesNormalized ? url : _resolveUrl(url, base)))
+          entries.map(([, url]) => _fetchResource(_resolveUrl(url, base)))
         );
         def._externalTemplates = {};
         entries.forEach(([key], i) => { def._externalTemplates[key] = results[i]; });
@@ -398,8 +350,7 @@ class Component {
   _render() {
     // If externals haven't loaded yet, trigger async load then re-render
     if ((this._def.templateUrl && !this._def._templateLoaded) ||
-        (this._def.styleUrl && !this._def._styleLoaded) ||
-        (this._def.pages && !this._def._pagesNormalized)) {
+        (this._def.styleUrl && !this._def._styleLoaded)) {
       this._loadExternals().then(() => {
         if (!this._destroyed) this._render();
       });
@@ -411,43 +362,6 @@ class Component {
       this.templates = this._def._externalTemplates;
     }
 
-    // Expose pages metadata and active page (derived from route param)
-    if (this._def._pages) {
-      this.pages = this._def._pages;
-      const pc = this._def.pages;
-      let active = (pc.param && this.props.$params?.[pc.param]) || pc.default || this._def._pages[0]?.id || '';
-
-      // Fall back to default if the param doesn't match any known page
-      if (this._def._pageUrls && !(active in this._def._pageUrls)) {
-        active = pc.default || this._def._pages[0]?.id || '';
-      }
-      this.activePage = active;
-
-      // Lazy-load: fetch only the active page's template on demand
-      if (this._def._pageUrls && !(active in this._def._externalTemplates)) {
-        const url = this._def._pageUrls[active];
-        if (url) {
-          _fetchResource(url).then(html => {
-            this._def._externalTemplates[active] = html;
-            if (!this._destroyed) this._render();
-          });
-          return; // Wait for active page before rendering
-        }
-      }
-
-      // Prefetch remaining pages in background (once, after active page is ready)
-      if (this._def._pageUrls && !this._def._pagesPrefetched) {
-        this._def._pagesPrefetched = true;
-        for (const [id, url] of Object.entries(this._def._pageUrls)) {
-          if (!(id in this._def._externalTemplates)) {
-            _fetchResource(url).then(html => {
-              this._def._externalTemplates[id] = html;
-            });
-          }
-        }
-      }
-    }
-
     // Determine HTML content
     let html;
     if (this._def.render) {
@@ -1150,7 +1064,7 @@ class Component {
 // Reserved definition keys (not user methods)
 const _reservedKeys = new Set([
   'state', 'render', 'styles', 'init', 'mounted', 'updated', 'destroyed', 'props',
-  'templateUrl', 'styleUrl', 'templates', 'pages', 'activePage', 'base',
+  'templateUrl', 'styleUrl', 'templates', 'base',
   'computed', 'watch'
 ]);
 
@@ -1173,8 +1087,8 @@ export function component(name, definition) {
   }
   definition._name = name;
 
-  // Auto-detect the calling module's URL so that relative templateUrl,
-  // styleUrl, and pages.dir paths resolve relative to the component file.
+  // Auto-detect the calling module's URL so that relative templateUrl
+  // and styleUrl paths resolve relative to the component file.
   // An explicit `base` string on the definition overrides auto-detection.
   if (definition.base !== undefined) {
     definition._base = definition.base;   // explicit override
@@ -1301,23 +1215,11 @@ export async function prefetch(name) {
   const def = _registry.get(name);
   if (!def) return;
 
-  // Load templateUrl, styleUrl, and normalize pages config
+  // Load templateUrl and styleUrl if not already loaded.
   if ((def.templateUrl && !def._templateLoaded) ||
-      (def.styleUrl && !def._styleLoaded) ||
-      (def.pages && !def._pagesNormalized)) {
+      (def.styleUrl && !def._styleLoaded)) {
     await Component.prototype._loadExternals.call({ _def: def });
   }
-
-  // For pages-based components, prefetch ALL page templates so any
-  // active page renders instantly on mount.
-  if (def._pageUrls && def._externalTemplates) {
-    const missing = Object.entries(def._pageUrls)
-      .filter(([id]) => !(id in def._externalTemplates));
-    if (missing.length) {
-      const results = await Promise.all(missing.map(([, url]) => _fetchResource(url)));
-      missing.forEach(([id], i) => { def._externalTemplates[id] = results[i]; });
-    }
-  }
 }
 
 

package/src/router.js

@@ -138,7 +138,7 @@ class Router {
 
     // Per-route fallback: register an alias path for the same component.
     // e.g. { path: '/docs/:section', fallback: '/docs', component: 'docs-page' }
-    // When matched via fallback, missing params are undefined → pages `default` kicks in.
+    // When matched via fallback, missing params are undefined.
     if (route.fallback) {
       const fbKeys = [];
       const fbPattern = route.fallback

package/src/ssr.js

@@ -94,7 +94,7 @@ class SSRComponent {
 
 const SSR_RESERVED = new Set([
   'state', 'render', 'styles', 'init', 'mounted', 'updated', 'destroyed',
-  'props', 'templateUrl', 'styleUrl', 'templates', 'pages', 'activePage',
+  'props', 'templateUrl', 'styleUrl', 'templates',
   'base', 'computed', 'watch'
 ]);
 

package/types/component.d.ts

@@ -7,28 +7,6 @@
 import type { ReactiveProxy } from './reactive';
 import type { NavigationContext } from './router';
 
-/** Item in a `pages` config — either a string id or an `{ id, label }` object. */
-export type PageItem = string | { id: string; label?: string };
-
-/**
- * Declarative multi-page configuration for a component.
- *
- * Pages are **lazy-loaded**: only the active page is fetched on first render.
- * Remaining pages are prefetched in the background for instant navigation.
- */
-export interface PagesConfig {
-  /** Directory containing the page HTML files (resolved relative to `base`). */
-  dir?: string;
-  /** Route parameter name to read (e.g. `'section'` for `/docs/:section`). */
-  param?: string;
-  /** Default page id when the param is absent. */
-  default?: string;
-  /** File extension appended to each page id (default `'.html'`). */
-  ext?: string;
-  /** List of page ids and/or `{ id, label }` objects. */
-  items?: PageItem[];
-}
-
 /** The object passed to `$.component()` to define a component. */
 export interface ComponentDefinition {
   /**
@@ -58,12 +36,9 @@ export interface ComponentDefinition {
    */
   styleUrl?: string | string[];
 
-  /** High-level multi-page configuration shorthand. */
-  pages?: PagesConfig;
-
   /**
-   * Override the base path for resolving relative `templateUrl`, `styleUrl`,
-   * and `pages.dir` paths. Normally auto-detected from the calling file.
+   * Override the base path for resolving relative `templateUrl` and `styleUrl`
+   * paths. Normally auto-detected from the calling file.
    */
   base?: string;
 
@@ -121,15 +96,9 @@ export interface ComponentInstance {
   /** Map of `z-ref` name → DOM element. Populated after each render. */
   refs: Record<string, Element>;
 
-  /** Keyed template map (when using multi-`templateUrl` or `pages`). */
+  /** Keyed template map (when using multi-`templateUrl`). */
   templates: Record<string, string>;
 
-  /** Normalized page metadata (when using `pages` config). */
-  pages: Array<{ id: string; label: string }>;
-
-  /** Active page id derived from route param (when using `pages` config). */
-  activePage: string;
-
   /**
    * Computed properties — lazy getters derived from state.
    * Defined via `computed` in the component definition.