templa-js 0.10.0 → 0.13.1

package/templa.js

@@ -24,6 +24,12 @@
  *
  *     <template src="card.html" title="Tiny" body="Light"></template>
  *
+ *   - Keys are case-insensitive. HTML attribute names are case-
+ *     insensitive in the spec and the browser DOM lowercases them, so
+ *     templa normalises both sides: `<template ctaLabel="X">` and
+ *     `{{ctaLabel}}` both resolve via the lowercased key `ctalabel`.
+ *     Use kebab-case (`cta-label`) for HTML idiomaticity.
+ *
  * Syntax:
  *   {{key}}                       HTML-escaped variable
  *   {{{key}}}                     raw variable (no escape)
@@ -43,6 +49,20 @@
  *     <h1>Hello</h1>
  *   </template>
  *
+ * Active nav:
+ *   After expansion, <a> elements inside <nav> whose href resolves to the
+ *   current page get aria-current="page" automatically. Style with a single
+ *   rule: nav a[aria-current="page"] { ... } — no per-page data threading.
+ *
+ * Asset paths:
+ *   URLs inside a partial are relative to the PARTIAL, not the including page,
+ *   so a partial shared across directory depths resolves the same everywhere.
+ *   Covers <template src> plus asset URLs — src (any element), href on
+ *   <link>/<use>, srcset, poster, and CSS url() in <style>/style="" —
+ *   rewritten to root-absolute on expansion. NOT <a href> (write nav links
+ *   root-absolute), {{templated}} URLs, data-*, or url(#id). See the
+ *   rebaseAssets comment below.
+ *
  * Repository: https://github.com/yjmtmtk/templa-js
  * License: MIT
  */
@@ -87,21 +107,126 @@ const templa = (() => {
     .replace(/"/g, '&quot;')
     .replace(/'/g, '&#39;');
 
-  const render = (html, data) => html
-    .replace(/{{{\s*([\w-]+)\s*}}}/g, (m, k) => k in data ? data[k] : m)
-    .replace(/{{\s*([\w-]+)\s*}}/g, (m, k) => k in data ? esc(data[k]) : m);
+  // Data keys are case-insensitive to mirror HTML's own attribute
+  // semantics (browsers lowercase attribute names in the DOM). Both
+  // <template ctaLabel="X"> and {{ctaLabel}} normalize to "ctalabel"
+  // so kebab-case, camelCase, and PascalCase all work the same.
+  // Single pass over both forms so a value injected by {{{raw}}} is never
+  // re-scanned by the {{escaped}} pass (a two-pass render would re-evaluate
+  // braces that appear inside raw data). {{{key}}} is tried first at each
+  // position, so it wins over the {{key}} alternative.
+  const render = (html, data) => html.replace(
+    /{{{\s*([\w-]+)\s*}}}|{{\s*([\w-]+)\s*}}/g,
+    (m, raw, dbl) => {
+      const lk = (raw != null ? raw : dbl).toLowerCase();
+      if (!(lk in data)) return m;
+      return raw != null ? data[lk] : esc(data[lk]);
+    }
+  );
 
   const rebase = (html, baseUrl) => html.replace(
     /(<template\b[^>]*\bsrc\s*=\s*["'])([^"']+)/gi,
     (_, pre, src) => pre + new URL(src, baseUrl).href
   );
 
+  // Asset URLs authored inside a partial are written relative to the PARTIAL's
+  // own location (the same rule <template src> already follows), then rewritten
+  // here to root-absolute paths. A partial shared by pages at different depths
+  // (/index.html and /blog/post.html) then resolves its assets identically from
+  // every page, instead of relative to whichever page included it.
+  //
+  // Scope: src (any element), href on <link>/<use>, srcset, poster. Deliberately
+  // NOT <a href> — link targets are pages, not co-located assets, so rebasing
+  // them to _partials/-relative would surprise; write nav links root-absolute
+  // (/about.html). CSS url() in <style> blocks and style="" attributes IS
+  // rebased too (co-located <style data-merge> is a first-class feature), but
+  // url(#frag) and url(data:…) stay put. Skipped values, left verbatim:
+  // #fragments, scheme URLs (https:/mailto:/tel:/data:…), //protocol-relative,
+  // already-/root-absolute, and {{templated}} (render fills those — you own
+  // them). data-* is metadata and untouched. The attr name is whitespace-
+  // anchored (like getAttr) so data-src and xlink:href aren't mistaken for
+  // src/href.
+  const TAG = /<([a-zA-Z][\w-]*)((?:[^>"']|"[^"]*"|'[^']*')*)>/g;
+  const STYLE_BLOCK = /(<style\b[^>]*>)([\s\S]*?)(<\/style>)/gi;
+  const CSS_URL = /url\(\s*(?:"([^"]*)"|'([^']*)'|([^'")\s]+))\s*\)/gi;
+  // Raw-text elements whose bodies are text, not markup: their contents must
+  // never be rewritten (a literal <img src> shown in <pre> or built by JS in
+  // <script> is content). split() with these 3 capture groups interleaves
+  // [text, openTag, body, closeTag, …]; only text and the open tag are rebased.
+  const RAW_ELEMENT = /(<(?:script|textarea|pre)\b[^>]*>)([\s\S]*?)(<\/(?:script|textarea|pre)>)/gi;
+  const ASSET_HREF = new Set(['link', 'use']);
+  const skipUrl = v => !v || v.startsWith('#') || v.startsWith('//') ||
+    v.startsWith('/') || v.includes('{{') || /^[a-z][a-z0-9+.-]*:/i.test(v);
+
+  // Build a URL-based resolver bound to a partial's location: a partial-relative
+  // value becomes a root-absolute path (a deploy sub-path rides along via the
+  // origin). skipUrl values and anything that won't parse pass through. The CLI
+  // supplies its own filesystem-path resolver; rebaseAssets/rebaseCss are shared.
+  const urlResolver = baseUrl => v => {
+    if (skipUrl(v)) return v;
+    try { const u = new URL(v, baseUrl); return u.pathname + u.search + u.hash; }
+    catch { return v; }
+  };
+
+  // Rewrite CSS url() targets through `resolve`, preserving the original quoting.
+  const rebaseCss = (cssText, resolve) => cssText.replace(CSS_URL, (m, dq, sq, uq) => {
+    const val = dq != null ? dq : sq != null ? sq : uq;
+    const r = resolve(val);
+    if (r === val) return m;
+    const q = dq != null ? '"' : sq != null ? "'" : '';
+    return `url(${q}${r}${q})`;
+  });
+
+  // Rewrite asset URLs in `html` through `resolve` (URL-based in the browser,
+  // path-based in the CLI). split() with RAW_ELEMENT's 3 capture groups
+  // interleaves [text, openTag, body, closeTag, …]; only text and open tags are
+  // touched, so a literal <img src> inside <script>/<pre>/<textarea> survives.
+  const rebaseAssets = (html, resolve) => {
+    const srcset = v => v.split(',').map(p => {
+      const t = p.trim();
+      const sp = t && t.match(/^(\S+)(\s+.+)?$/);
+      return sp ? resolve(sp[1]) + (sp[2] || '') : p;
+    }).join(', ');
+    const css = v => rebaseCss(v, resolve);
+    const rw = (attrs, name, fn) => attrs.replace(
+      new RegExp(`(^|\\s)(${name})(\\s*=\\s*)("[^"]*"|'[^']*')`, 'gi'),
+      (_m, lead, nm, eq, q) => lead + nm + eq + q[0] + fn(q.slice(1, -1)) + q[0]
+    );
+    const tagPass = s => s.replace(TAG, (whole, tag, attrs) => {
+      if (tag.toLowerCase() === 'template') return whole;
+      let a = rw(rw(attrs, 'src', resolve), 'poster', resolve);
+      a = rw(rw(a, 'srcset', srcset), 'style', css);
+      if (ASSET_HREF.has(tag.toLowerCase())) a = rw(a, 'href', resolve);
+      return `<${tag}${a}>`;
+    });
+    return html.split(RAW_ELEMENT).map((seg, i) => {
+      const k = i % 4;                                                   // 0 text, 1 open, 2 body, 3 close
+      if (k === 0) return tagPass(seg).replace(STYLE_BLOCK, (_m, o, b, c) => o + css(b) + c);
+      if (k === 1) return tagPass(seg);                                  // raw open tag → rebase its attrs
+      return seg;                                                        // body / close → untouched
+    }).join('');
+  };
+
   // Read an attribute value out of a raw attribute string. Tries double then
   // single quoting so values containing the other quote survive intact.
+  // The name is anchored to start-of-attribute (preceded by whitespace or
+  // the string start) rather than a bare \b word boundary: `-` and `:` form
+  // word boundaries too, so `\bif=` would wrongly match `x-if=` / `v-if=` /
+  // `data-if=`. Anchoring to whitespace keeps full-name matching, so
+  // framework directives like Alpine's <template x-if> coexist untouched.
+  // Compiled regexes are cached per attribute name — getAttr runs once per
+  // attribute lookup across every block, and the name set is tiny and fixed
+  // (src/slot/if/unless/name/href). Non-global, so reuse is state-free.
+  const attrRxCache = {};
+  const attrRx = name => attrRxCache[name] || (attrRxCache[name] = [
+    new RegExp(`(?:^|\\s)${name}\\s*=\\s*"([^"]*)"`, 'i'),
+    new RegExp(`(?:^|\\s)${name}\\s*=\\s*'([^']*)'`, 'i'),
+  ]);
   const getAttr = (attrs, name) => {
-    const dq = attrs.match(new RegExp(`\\b${name}\\s*=\\s*"([^"]*)"`));
+    const [dqRx, sqRx] = attrRx(name);
+    const dq = attrs.match(dqRx);
     if (dq) return dq[1];
-    const sq = attrs.match(new RegExp(`\\b${name}\\s*=\\s*'([^']*)'`));
+    const sq = attrs.match(sqRx);
     return sq ? sq[1] : null;
   };
 
@@ -111,7 +236,10 @@ const templa = (() => {
   // so a literal `<template>` token inside an attribute value can't desync
   // the depth counter.
   const TEMPLATE_OPEN = /<template((?:\s+[\w:.-]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'>]+))?)*)\s*(\/?)>/gi;
-  const TEMPLATE_TAG = /<template\b|<\/template\s*>/gi;
+  // Matches a whole <template …> open tag (capturing a trailing /) OR a close.
+  // A self-closing <template …/> is a leaf, so it must not bump the depth
+  // counter — otherwise an enclosing block would never find its matching close.
+  const TEMPLATE_TAG = /<template\b(?:[^>"']|"[^"]*"|'[^']*')*?(\/?)>|<\/template\s*>/gi;
   const redactStrings = s => s.replace(
     /"[^"]*"|'[^']*'/g,
     m => m[0] + ' '.repeat(m.length - 2) + m[m.length - 1]
@@ -133,8 +261,8 @@ const templa = (() => {
       TEMPLATE_TAG.lastIndex = openEnd;
       let depth = 1, t;
       while (depth > 0 && (t = TEMPLATE_TAG.exec(scan))) {
-        if (t[0][1] === '/') depth--;
-        else depth++;
+        if (t[0][1] === '/') depth--;        // </template>
+        else if (t[1] !== '/') depth++;      // open tag (a self-closing /> is a leaf)
         if (depth === 0) {
           out.push({ start, end: t.index + t[0].length, attrs, inner: html.slice(openEnd, t.index) });
           TEMPLATE_OPEN.lastIndex = t.index + t[0].length;
@@ -145,6 +273,28 @@ const templa = (() => {
     return out;
   };
 
+  // True if any <template …> open tag has no matching </template>. Such a block
+  // is silently dropped by findTemplateBlocks (its include never expands), so
+  // the CLI build reports it instead of emitting mysteriously missing output.
+  const hasUnclosed = html => {
+    const scan = redactStrings(html);
+    TEMPLATE_OPEN.lastIndex = 0;
+    let m;
+    while ((m = TEMPLATE_OPEN.exec(scan))) {
+      if (m[2] === '/') continue;                  // self-closing: complete
+      TEMPLATE_TAG.lastIndex = m.index + m[0].length;
+      let depth = 1, t, closedAt = -1;
+      while (depth > 0 && (t = TEMPLATE_TAG.exec(scan))) {
+        if (t[0][1] === '/') depth--;
+        else if (t[1] !== '/') depth++;
+        if (depth === 0) { closedAt = t.index + t[0].length; break; }
+      }
+      if (depth > 0) return true;                  // ran off the end without a close
+      TEMPLATE_OPEN.lastIndex = closedAt;
+    }
+    return false;
+  };
+
   // Split inner content of a <template src> call into named slot fillers and
   // remaining default content. <template slot="X">...</template> becomes
   // named[X], everything else stays in default.
@@ -184,9 +334,9 @@ const templa = (() => {
         const ifKey = getAttr(b.attrs, 'if');
         const unlessKey = getAttr(b.attrs, 'unless');
         if (ifKey !== null) {
-          html = html.slice(0, b.start) + (data[ifKey] ? b.inner : '') + html.slice(b.end);
+          html = html.slice(0, b.start) + (data[ifKey.toLowerCase()] ? b.inner : '') + html.slice(b.end);
         } else if (unlessKey !== null) {
-          html = html.slice(0, b.start) + (!data[unlessKey] ? b.inner : '') + html.slice(b.end);
+          html = html.slice(0, b.start) + (!data[unlessKey.toLowerCase()] ? b.inner : '') + html.slice(b.end);
         }
       }
     } while (html !== prev);
@@ -195,12 +345,16 @@ const templa = (() => {
 
   // Every attribute is a string data key, except: src/slot/if/unless are
   // reserved, and any data-* attribute is treated as metadata (skipped).
+  // Keys are stored lowercased — HTML attribute names are case-insensitive
+  // and the browser DOM already lowercases them, so we mirror that on
+  // the build side too.
   const RESERVED = new Set(['src', 'slot', 'if', 'unless']);
   const collectData = el => {
     const data = {};
     for (const a of el.attributes) {
-      if (RESERVED.has(a.name) || a.name.startsWith('data-')) continue;
-      data[a.name] = a.value;
+      const n = a.name.toLowerCase();
+      if (RESERVED.has(n) || n.startsWith('data-')) continue;
+      data[n] = a.value;
     }
     return data;
   };
@@ -214,7 +368,7 @@ const templa = (() => {
     const slots = parseSlots(applyConditionals(el.innerHTML, data));
 
     const html = handleMergedStyles(await fetchText(url), url);
-    const conditional = applyConditionals(rebase(html, url), data);
+    const conditional = applyConditionals(rebaseAssets(rebase(html, url), urlResolver(url)), data);
     let out = fillSlots(render(conditional, data), slots);
     const frag = document.createRange().createContextualFragment(out);
     const waits = [...frag.querySelectorAll('link[rel="stylesheet"], script[src]')]
@@ -238,17 +392,70 @@ const templa = (() => {
     console.warn('[templa] max passes reached; possible recursive include');
   };
 
+  // Auto-mark the current page's nav links: any <a> inside <nav> whose href
+  // resolves to the current page gets aria-current="page". CSS Selectors 4
+  // specced `:local-link` for exactly this and no browser shipped it — so
+  // active-nav styling needs no per-page data threading, just one rule:
+  //   nav a[aria-current="page"] { ... }
+  // Skipped: pure-hash hrefs (same-page TOC links), cross-origin links, and
+  // any <a> whose author already wrote aria-current.
+  //
+  // Path comparison is hosting-convention tolerant: /index.html ≡ /,
+  // /about.html ≡ /about ≡ /about/ — so a nav written with .html hrefs still
+  // matches on pretty-URL hosts (Netlify, Vercel, `serve` cleanUrls) that
+  // serve the page at the extensionless path.
+  const normalizePagePath = p => {
+    p = p.replace(/\/index\.html$/i, '/').replace(/\.html$/i, '');
+    return p.length > 1 ? p.replace(/\/$/, '') : p;
+  };
+  const markCurrentNavLinks = () => {
+    const here = normalizePagePath(location.pathname);
+    for (const a of document.querySelectorAll('nav a[href]')) {
+      if (a.hasAttribute('aria-current')) continue;
+      const href = a.getAttribute('href');
+      if (href.startsWith('#')) continue;
+      let url;
+      try { url = new URL(href, location.href); } catch { continue; }
+      if (url.origin !== location.origin) continue;
+      if (normalizePagePath(url.pathname) === here) a.setAttribute('aria-current', 'page');
+    }
+  };
+
+  // Any <template if> / <template unless> still in the live DOM after
+  // expansion is page-level: it sits outside every <template src> so it has
+  // no calling data to resolve against, and the browser renders <template>
+  // content inertly — so it silently shows nothing. Warn instead of failing
+  // quietly. (Conditionals inside partials are resolved as text before the
+  // fragment is inserted, so they never reach the DOM to be matched here.)
+  const warnLeftoverConditionals = () => {
+    const leftover = document.querySelectorAll('template[if], template[unless]');
+    if (leftover.length) console.warn(
+      `[templa] ${leftover.length} unresolved <template if/unless> in the page —`,
+      'page-level conditionals have no data source and are not evaluated.',
+      'Move them inside a partial.'
+    );
+  };
+
   // start() returns a Promise that resolves after head + body templates
   // have been expanded. Head expansion is kicked off synchronously so its
   // fetches can run in parallel with the rest of HTML parsing — important
   // when partials in <head> include <link rel="stylesheet"> and the script
   // tag is itself in <head>. Body expansion waits for DOMContentLoaded.
+  //
+  // Per-page state (fetch cache, merged-style bookkeeping) is reset up front
+  // so re-invoking start() after a client-side navigation assembles the new
+  // page cleanly. Standalone run() calls keep the cache, so dynamically
+  // loaded partials still dedupe their fetches.
   const start = () => {
+    cache.clear();
+    mergedSeen.clear();
     const headTask = run('head template[src]');
     return new Promise(resolve => {
       const finish = async () => {
         await headTask;
         await run('body template[src]');
+        markCurrentNavLinks();
+        warnLeftoverConditionals();
         resolve();
       };
       if (document.readyState === 'loading') {
@@ -259,7 +466,17 @@ const templa = (() => {
     });
   };
 
-  return { run, start };
+  // Public API is run/start. The pure, environment-agnostic transforms are
+  // exposed under `_` as the single source of truth the CLI (bin/templa.js)
+  // imports — so the parser/renderer lives once, not duplicated per target.
+  return {
+    run, start,
+    _: {
+      esc, render, getAttr, findTemplateBlocks, hasUnclosed, applyConditionals,
+      parseSlots, fillSlots, rebaseAssets, rebaseCss, urlResolver, skipUrl,
+      normalizePagePath, RESERVED,
+    },
+  };
 })();
 
 if (typeof window !== 'undefined') window.templa = templa;