arckode-ui 0.2.7 → 0.2.8

package/CHANGELOG.md

@@ -4,6 +4,14 @@ Cambios entre versiones publicadas. Sigue [keepachangelog](https://keepachangelo
 
 ## [Unreleased]
 
+## [0.2.8] — 2026-05-23
+
+### Fixed
+- **Template compiler — atributos con guiones**: atributos SVG (`stroke-width`, `stroke-linecap`),
+  `data-*` y `aria-*` se generaban sin comillas como clave JS, produciendo un syntax error en
+  esbuild (`Expected "}" but found "-"`). Fix: `jsKey()` en `attrToJs` detecta si el nombre
+  necesita comillas y las agrega — sólo afecta atributos que no son identificadores JS válidos.
+
 ## [0.2.7] — 2026-05-23
 
 ### Added

package/dist/compiler/template-compiler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template-compiler.d.ts","sourceRoot":"","sources":["../../src/compiler/template-compiler.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,KAAK;IACpB,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,EAAE,CAAA;CAC7B;AAiZD;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CA2BpD"}
+{"version":3,"file":"template-compiler.d.ts","sourceRoot":"","sources":["../../src/compiler/template-compiler.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,KAAK;IACpB,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,EAAE,CAAA;CAC7B;AAsZD;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CA2BpD"}

package/dist/vite.js

@@ -1,6 +1,6 @@
-var y = Object.defineProperty;
-var C = (r, t, e) => t in r ? y(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var x = (r, t, e) => C(r, typeof t != "symbol" ? t + "" : t, e);
+var C = Object.defineProperty;
+var O = (r, t, e) => t in r ? C(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var x = (r, t, e) => O(r, typeof t != "symbol" ? t + "" : t, e);
 import { transformWithEsbuild as b } from "vite";
 import { a as N, f as v } from "./analyzer-Ctnj3WTI.js";
 class h extends Error {
@@ -12,25 +12,25 @@ class h extends Error {
   }
 }
 const k = /<(template|script|style)((?:\s+[^>]*)??)>([\s\S]*?)<\/\1>/g;
-function O(r, t) {
+function T(r, t) {
   let e = 1;
   for (let n = 0; n < t; n++)
     r[n] === `
 ` && e++;
   return e;
 }
-function T(r, t) {
+function R(r, t) {
   const n = new RegExp(`${t}=["']([^"']*)["']`).exec(r);
   return n != null ? n[1] ?? null : null;
 }
-function R(r, t) {
+function L(r, t) {
   return new RegExp(`(?:^|\\s)${t}(?:\\s|$|=)`).test(r);
 }
-function L(r) {
+function j(r) {
   const t = [];
   let e;
   for (k.lastIndex = 0; (e = k.exec(r)) !== null; ) {
-    const i = e[1], u = e[2] ?? "", d = e[3] ?? "", m = O(r, e.index);
+    const i = e[1], u = e[2] ?? "", d = e[3] ?? "", m = T(r, e.index);
     i !== void 0 && t.push({ tag: i, attrs: u, content: d, openLine: m });
   }
   const n = t.filter((i) => i.tag === "template"), s = t.filter((i) => i.tag === "script"), c = t.filter((i) => i.tag === "style");
@@ -61,7 +61,7 @@ function L(r) {
       "<script> must appear after <template>",
       o.openLine
     );
-  const l = T(o.attrs, "lang");
+  const l = R(o.attrs, "lang");
   if (l !== "ts")
     throw new h(
       "MISSING_LANG_TS",
@@ -70,7 +70,7 @@ function L(r) {
     );
   let f;
   if (c.length > 0) {
-    const i = c[0], u = R(i.attrs, "scoped");
+    const i = c[0], u = L(i.attrs, "scoped");
     f = { content: i.content, scoped: u };
   }
   return {
@@ -85,12 +85,12 @@ function L(r) {
     ...f !== void 0 ? { style: f } : {}
   };
 }
-const E = /(?:(@[\w.]+|:[a-zA-Z][\w-]*|v-else-if|v-if|v-for|v-show|v-else|[\w-]+)(?:="([^"]*)")?)/g;
-function j(r) {
+const A = /(?:(@[\w.]+|:[a-zA-Z][\w-]*|v-else-if|v-if|v-for|v-show|v-else|[\w-]+)(?:="([^"]*)")?)/g;
+function z(r) {
   const t = [];
-  E.lastIndex = 0;
+  A.lastIndex = 0;
   let e;
-  for (; (e = E.exec(r)) !== null; )
+  for (; (e = A.exec(r)) !== null; )
     t.push({ name: e[1] ?? "", value: e[2] ?? "", raw: e[0] });
   return t;
 }
@@ -131,7 +131,7 @@ function W(r) {
       } else {
         const d = {
           tag: p,
-          attrs: j(f),
+          attrs: z(f),
           children: [],
           selfClosing: i
         };
@@ -145,7 +145,7 @@ function W(r) {
   return t;
 }
 const $ = /\{\{\s*([\s\S]+?)\s*\}\}/g;
-function z(r) {
+function J(r) {
   return $.lastIndex = 0, $.test(r);
 }
 function M(r) {
@@ -169,36 +169,45 @@ const D = {
   delete: "Delete",
   backspace: "Backspace"
 };
-function J(r, t) {
+function P(r, t) {
   const e = r.slice(1), [n, ...s] = e.split("."), p = `on${n.charAt(0).toUpperCase() + n.slice(1)}`;
   if (s.length === 0)
     return `${p}: ${t}`;
   const o = s[0].toLowerCase(), l = D[o] ?? o.charAt(0).toUpperCase() + o.slice(1);
   return `${p}: (e) => e.key === '${l}' && ${t}(e)`;
 }
-function P(r) {
-  const { name: t, value: e } = r;
-  return t.startsWith("@") ? J(t, e) : t.startsWith(":") ? `${t.slice(1)}: ${e}` : ["v-if", "v-for", "v-else", "v-else-if"].includes(t) ? null : t === "v-show" ? `style: { display: ${e} ? '' : 'none' }` : e === "" ? `${t}: true` : `${t}: ${JSON.stringify(e)}`;
+function S(r) {
+  return /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(r) ? r : JSON.stringify(r);
 }
 function V(r) {
+  const { name: t, value: e } = r;
+  if (t.startsWith("@"))
+    return P(t, e);
+  if (t.startsWith(":")) {
+    const n = t.slice(1);
+    return `${S(n)}: ${e}`;
+  }
+  return ["v-if", "v-for", "v-else", "v-else-if"].includes(t) ? null : t === "v-show" ? `style: { display: ${e} ? '' : 'none' }` : e === "" ? `${S(t)}: true` : `${S(t)}: ${JSON.stringify(e)}`;
+}
+function G(r) {
   const t = r;
-  return z(t) ? `h('span', null, ${M(t)})` : /^\s+$/.test(t) ? "" : JSON.stringify(t);
+  return J(t) ? `h('span', null, ${M(t)})` : /^\s+$/.test(t) ? "" : JSON.stringify(t);
 }
 function w(r) {
   const t = r.attrs.find((f) => f.name === "v-for");
   if (r.tag === "slot")
     return "(props.__slot_default ? props.__slot_default() : [])";
-  const e = r.attrs.map(P).filter((f) => f !== null && f !== ""), n = e.length === 0 ? "null" : `{ ${e.join(", ")} }`, s = A(r.children);
+  const e = r.attrs.map(V).filter((f) => f !== null && f !== ""), n = e.length === 0 ? "null" : `{ ${e.join(", ")} }`, s = y(r.children);
   let l = `h(${[/^[A-Z]/.test(r.tag) ? r.tag : JSON.stringify(r.tag), n, ...s].join(", ")})`;
-  return t !== void 0 && (l = G(t.value, l)), l;
+  return t !== void 0 && (l = Z(t.value, l)), l;
 }
-function A(r) {
+function y(r) {
   const t = [];
   let e = 0;
   for (; e < r.length; ) {
     const n = r[e];
     if (n.kind === "text") {
-      const o = V(n.text);
+      const o = G(n.text);
       o !== "" && t.push(o), e++;
       continue;
     }
@@ -232,7 +241,7 @@ function A(r) {
   }
   return t;
 }
-function G(r, t) {
+function Z(r, t) {
   const e = /^\s*(?:\(([^)]+)\)|(\w+))\s+in\s+(.+?)\s*$/.exec(r);
   if (!e)
     return `(${r}).map((item) => ${t})`;
@@ -240,7 +249,7 @@ function G(r, t) {
   return `${e[3].trim()}.map((${n}) => ${t})`;
 }
 function F(r) {
-  const t = W(r.trim()), e = A(t).filter((s) => s !== "");
+  const t = W(r.trim()), e = y(t).filter((s) => s !== "");
   let n;
   return e.length === 0 ? n = "null" : e.length === 1 ? n = e[0] : n = `[${e.join(", ")}]`, `function h(tag, props, ...children) {
   return { tag, props: props ?? {}, children: children.flat().filter(c => c != null) }
@@ -257,7 +266,7 @@ function U(r) {
     t = (t << 5) + t ^ r.charCodeAt(n), t = t | 0;
   return (t >>> 0).toString(36).padStart(6, "0").slice(-6);
 }
-function Z(r) {
+function K(r) {
   const t = /export\s+default\s+(defineComponent\s*\([\s\S]*\))\s*;?\s*$/, e = r.trim(), n = t.exec(e);
   return n ? {
     preamble: e.slice(0, n.index).trim(),
@@ -267,8 +276,8 @@ function Z(r) {
     defineComponentExpr: null
   };
 }
-function K(r, t, e) {
-  const s = F(t).replace(/export default function render/, "function render").replace(/function h\(tag, props, \.\.\.children\) \{\n  return [^\n]+\n\}\n+/, "").trim(), { preamble: c, defineComponentExpr: p } = Z(r);
+function B(r, t, e) {
+  const s = F(t).replace(/export default function render/, "function render").replace(/function h\(tag, props, \.\.\.children\) \{\n  return [^\n]+\n\}\n+/, "").trim(), { preamble: c, defineComponentExpr: p } = K(r);
   return p ? [
     "import { defineComponent, h } from 'arckode-ui'",
     "",
@@ -298,7 +307,7 @@ function K(r, t, e) {
   ].join(`
 `);
 }
-function H(r = {}) {
+function Q(r = {}) {
   let t = "development";
   return {
     name: "arckode-ui",
@@ -307,11 +316,11 @@ function H(r = {}) {
       t = e.mode;
     },
     transform(e, n) {
-      var S, _;
+      var _, E;
       if (!n.endsWith(".ark")) return null;
       let s;
       try {
-        s = L(e);
+        s = j(e);
       } catch (a) {
         if (a instanceof h) {
           const g = [
@@ -325,7 +334,7 @@ function H(r = {}) {
         }
         throw a;
       }
-      const c = ((S = r.analyzer) == null ? void 0 : S.ignore) ?? [], p = ((_ = r.analyzer) == null ? void 0 : _.failOnWarnings) ?? !1, l = N(e).filter((a) => !c.includes(a.code)), f = l.filter((a) => a.severity === "error"), i = l.filter((a) => a.severity === "warning"), u = t === "production";
+      const c = ((_ = r.analyzer) == null ? void 0 : _.ignore) ?? [], p = ((E = r.analyzer) == null ? void 0 : E.failOnWarnings) ?? !1, l = N(e).filter((a) => !c.includes(a.code)), f = l.filter((a) => a.severity === "error"), i = l.filter((a) => a.severity === "warning"), u = t === "production";
       for (const a of i)
         console.warn(v(a, n, e));
       if (f.length > 0) {
@@ -352,7 +361,7 @@ ${a}`);
 ${a}`
         );
       }
-      const d = U(n), m = K(s.script.content, s.template.content, d);
+      const d = U(n), m = B(s.script.content, s.template.content, d);
       return b(m, n + ".ts", {
         loader: "ts",
         target: "esnext"
@@ -361,6 +370,6 @@ ${a}`
   };
 }
 export {
-  H as arkcodeUi,
+  Q as arkcodeUi,
   U as generateScopeId
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arckode-ui",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "type": "module",
   "description": "Frontend framework con .ark SFCs, signals, file-system router y analyzer estático con sugerencias concretas de fix. Diseñado para máxima predictibilidad de output de IA.",
   "keywords": [