npm - templa-js - Versions diffs - 0.10.0 → 0.10.1 - Mend

templa-js 0.10.0 → 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/AGENTS.md CHANGED Viewed

@@ -203,6 +203,8 @@ Reserved attributes — these are NOT collected as data:
 Any `data-*` attribute on a `<template>` is also skipped from data collection — it's reserved as HTML metadata convention.
+**Keys are case-insensitive.** HTML attribute names are case-insensitive in the spec, and the browser DOM lowercases them automatically. templa mirrors this by normalising both the attribute name and the `{{var}}` lookup to lowercase, so `<template ctaLabel="X">` paired with `{{ctaLabel}}` works in both runtime and build mode (both resolve via the lowercased key `ctalabel`). The convention in this codebase is **kebab-case** (`cta-label`, `og-image`, `hero-bg-color`) — it survives unchanged through every layer and reads as idiomatic HTML.
 Strings handle every common case. For conditionals, the value is checked existentially (truthy unless empty), so `featured="yes"` is enough. There's no typed-value escape hatch in the core; if a project needs typed values (numbers, booleans, arrays, objects, computed values), that goes through a plugin.
 A few patterns to avoid (they are silently ignored):
@@ -261,8 +263,8 @@ When to use: any partial whose presence implies its own visual rules. Co-locatin
 **Existence-based only.** The value of `if`/`unless` is a single key looked up in the surrounding data. There are no expressions, no operators, no helpers, no `else`. If you need an else branch, write the inverse pair:
 ```html
-<template if="loggedIn"><a href="/logout">Logout</a></template>
-<template unless="loggedIn"><a href="/login">Login</a></template>
+<template if="logged-in"><a href="/logout">Logout</a></template>
+<template unless="logged-in"><a href="/login">Login</a></template>
 ```
 Conditionals can be nested. Resolution iterates until stable.

package/README.md CHANGED Viewed

@@ -13,7 +13,7 @@ It works in two modes:
 ```html
 <!-- index.html -->
 <body>
-  <template src="_partials/header.html" title="Home" loggedIn="yes"></template>
+  <template src="_partials/header.html" title="Home" logged-in="yes"></template>
   <main>...</main>
   <template src="_partials/footer.html"></template>
@@ -26,10 +26,10 @@ It works in two modes:
 <!-- _partials/header.html -->
 <header>
   <h1>{{title}}</h1>
-  <template if="loggedIn">
+  <template if="logged-in">
     <a href="/logout">Logout</a>
   </template>
-  <template unless="loggedIn">
+  <template unless="logged-in">
     <a href="/login">Login</a>
   </template>
 </header>
@@ -111,6 +111,8 @@ Conditionals (`<template if="key">`) are existence-based, so any non-empty strin
 Reserved attributes — these are not collected as data: `src` (the partial path), `slot` (slot filler name), `if` / `unless` (conditional markers). Any `data-*` attribute is also skipped, by HTML metadata convention.
+**Keys are case-insensitive.** HTML attribute names are case-insensitive in the spec and the browser DOM lowercases them, so templa normalises both the attribute name and the `{{var}}` lookup to lowercase. `<template ctaLabel="X">` and `{{ctaLabel}}` both resolve via `ctalabel` and behave identically in runtime and build mode. **Use kebab-case** (`cta-label`, `og-image`, `hero-bg-color`) — it survives every layer unchanged and reads as idiomatic HTML.
 ### Template syntax
 | Syntax | Effect |

package/bin/templa.js CHANGED Viewed

@@ -34,17 +34,27 @@ const escHtml = s => String(s)
   .replace(/"/g, '&quot;')
   .replace(/'/g, '&#39;');
+// 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.
 function render(html, data) {
   return html
-    .replace(/{{{\s*([\w-]+)\s*}}}/g, (m, k) => k in data ? data[k] : m)
-    .replace(/{{\s*([\w-]+)\s*}}/g, (m, k) => k in data ? escHtml(data[k]) : m);
+    .replace(/{{{\s*([\w-]+)\s*}}}/g, (m, k) => {
+      const lk = k.toLowerCase();
+      return lk in data ? data[lk] : m;
+    })
+    .replace(/{{\s*([\w-]+)\s*}}/g, (m, k) => {
+      const lk = k.toLowerCase();
+      return lk in data ? escHtml(data[lk]) : m;
+    });
 }
 // ─── attribute / template / slot parsing ─────────────────────────────
 function getAttr(attrs, name) {
-  const dq = attrs.match(new RegExp(`\\b${name}\\s*=\\s*"([^"]*)"`));
+  const dq = attrs.match(new RegExp(`\\b${name}\\s*=\\s*"([^"]*)"`, 'i'));
   if (dq) return dq[1];
-  const sq = attrs.match(new RegExp(`\\b${name}\\s*=\\s*'([^']*)'`));
+  const sq = attrs.match(new RegExp(`\\b${name}\\s*=\\s*'([^']*)'`, 'i'));
   return sq ? sq[1] : null;
 }
@@ -128,7 +138,7 @@ function collectData(attrs) {
   ATTR.lastIndex = 0;
   let m;
   while ((m = ATTR.exec(attrs))) {
-    const name = m[1];
+    const name = m[1].toLowerCase();
     if (RESERVED.has(name) || name.startsWith('data-')) continue;
     data[name] = m[2] ?? m[3] ?? '';
   }
@@ -211,9 +221,9 @@ function applyConditionals(html, data) {
       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);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "templa-js",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "A tiny HTML template loader using <template src>. Read as tempura.",
   "main": "templa.js",
   "scripts": {

package/templa.js CHANGED Viewed

@@ -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)
@@ -87,9 +93,19 @@ const templa = (() => {
     .replace(/"/g, '&quot;')
     .replace(/'/g, '&#39;');
+  // 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.
   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);
+    .replace(/{{{\s*([\w-]+)\s*}}}/g, (m, k) => {
+      const lk = k.toLowerCase();
+      return lk in data ? data[lk] : m;
+    })
+    .replace(/{{\s*([\w-]+)\s*}}/g, (m, k) => {
+      const lk = k.toLowerCase();
+      return lk in data ? esc(data[lk]) : m;
+    });
   const rebase = (html, baseUrl) => html.replace(
     /(<template\b[^>]*\bsrc\s*=\s*["'])([^"']+)/gi,
@@ -99,9 +115,9 @@ const templa = (() => {
   // Read an attribute value out of a raw attribute string. Tries double then
   // single quoting so values containing the other quote survive intact.
   const getAttr = (attrs, name) => {
-    const dq = attrs.match(new RegExp(`\\b${name}\\s*=\\s*"([^"]*)"`));
+    const dq = attrs.match(new RegExp(`\\b${name}\\s*=\\s*"([^"]*)"`, 'i'));
     if (dq) return dq[1];
-    const sq = attrs.match(new RegExp(`\\b${name}\\s*=\\s*'([^']*)'`));
+    const sq = attrs.match(new RegExp(`\\b${name}\\s*=\\s*'([^']*)'`, 'i'));
     return sq ? sq[1] : null;
   };
@@ -184,9 +200,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 +211,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;
   };