@adia-ai/web-components 0.5.2 → 0.5.4

package/core/template.js

@@ -31,15 +31,48 @@ export function css(strings, ...values) {
 
 const templateCache = new WeakMap();
 
+// §155 (v0.5.3): walks the accumulated static-string chunk to decide
+// whether each ${…} placeholder is in tag-position (substitute {{p:N}})
+// or content-position (substitute <!--p:N-->). The walker tracks `<`,
+// `>`, `'`, `"` for that decision.
+//
+// FEEDBACK-06 §1 P0: HTML comments must be treated as opaque. An
+// apostrophe inside `<!-- foo's bar -->` previously put `q = 1`
+// (single-quoted-string state); the `-->` closer was then treated as
+// string content; all subsequent `<` / `>` chars were masked. Result:
+// every placeholder after the comment got mis-classified, producing
+// `<segmented-ui .value=<!--p:10--> …>` (which the DOM parser eats),
+// `scan()` finds no part registered, and `update()` falls through
+// `isFn` branch — invoking the consumer's arrow handler with no
+// arguments → "Cannot read properties of undefined (reading 'detail')"
+// crash at mount with a stack trace pointing at user code.
+//
+// Fix: skip HTML comments wholesale before the quote/tag walker runs.
+// Comments cannot open a tag and cannot contain real string delimiters
+// as far as the live HTML parser is concerned. Unterminated comments
+// fall through to `last = 0` (content-position) which is the safe
+// default.
 function inTag(m) {
-  let q = 0, last = 0;
-  for (let i = 0; i < m.length; i++) {
+  let q = 0, last = 0, i = 0;
+  while (i < m.length) {
+    if (q === 0 &&
+        m.charCodeAt(i)     === 60 /* < */ &&
+        m.charCodeAt(i + 1) === 33 /* ! */ &&
+        m.charCodeAt(i + 2) === 45 /* - */ &&
+        m.charCodeAt(i + 3) === 45 /* - */) {
+      const end = m.indexOf('-->', i + 4);
+      if (end === -1) { last = 0; break; }
+      i = end + 3;
+      last = 0;
+      continue;
+    }
     const c = m.charCodeAt(i);
     if (q) { if (c === (q === 1 ? 39 : 34)) q = 0; }
     else if (c === 39) q = 1;
     else if (c === 34) q = 2;
     else if (c === 60) last = 1;
     else if (c === 62) last = 0;
+    i++;
   }
   return last === 1;
 }
@@ -93,7 +126,30 @@ function scan(fragment, count) {
     } else if (n.nodeType === 1) {
       for (const attr of [...n.attributes]) {
         const m = attr.value.match(/^\{\{p:(\d+)\}\}$/);
-        if (!m) continue;
+        if (!m) {
+          // §152 (v0.5.3): partial-attribute interpolation runtime guard.
+          // The attribute-part contract is whole-value-only (one placeholder
+          // per attribute, full replacement). Partial like `style="bg:${a};
+          // color:${b}"` produces post-concat `bg:{{p:0}}; color:{{p:1}}`
+          // which fails the ^…$ regex above. Without this guard the literal
+          // {{p:N}} text reaches the DOM as the attribute's static value —
+          // silent-garbage class. Warn loudly so consumers don't ship the
+          // bug. Hot template paths fire many times, so warn (not throw):
+          // a thrown error would crash render; warn surfaces the bug class.
+          if (attr.value.includes('{{p:')) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              `[template] Partial attribute interpolation is not supported.\n` +
+              `  Element: <${n.tagName.toLowerCase()}>\n` +
+              `  Attribute: ${attr.name}="${attr.value.slice(0, 80)}${attr.value.length > 80 ? '…' : ''}"\n` +
+              `  Use one of:\n` +
+              `    ${attr.name}="\${expression}"      ← full replacement (whole attr is the placeholder)\n` +
+              `    .${attr.name}=\${expression}        ← property assignment (preferred for objects/functions)\n` +
+              `  Compute the full attr value as a single expression and interpolate the whole.`
+            );
+          }
+          continue;
+        }
         const i = +m[1], name = attr.name;
         if (name[0] === '@') {
           n.removeAttribute(name);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",
@@ -58,7 +58,21 @@
     "./core/icons-phosphor.js"
   ],
   "dependencies": {
-    "@adia-ai/a2ui-runtime": "^0.5.0"
+    "@adia-ai/a2ui-runtime": "^0.5.0",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/lint": "^6.9.5",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.41.1",
+    "@lezer/highlight": "^1.2.3"
+  },
+  "optionalDependencies": {
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-yaml": "^6.1.3"
   },
   "publishConfig": {
     "access": "public",