@rettangoli/fe 1.0.0-rc4 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/fe",
-  "version": "1.0.0-rc4",
+  "version": "1.0.0",
   "description": "Frontend framework for building reactive web components",
   "type": "module",
   "main": "./src/index.js",

package/src/core/view/bindings.js

@@ -1,6 +1,9 @@
 const PROP_PREFIX = ":";
 
 const UNSAFE_KEYS = new Set(["__proto__", "constructor", "prototype"]);
+const ATTRIBUTE_NAME_REGEX = /^[A-Za-z_][A-Za-z0-9_.:-]*$/;
+
+const isValidAttributeName = (value) => ATTRIBUTE_NAME_REGEX.test(value);
 
 const lodashGet = (obj, path) => {
   if (!path) return obj;
@@ -73,7 +76,7 @@ export const collectBindingNames = (attrsString = "") => {
   }
 
   const attrAssignmentRegex = /(\S+?)=(?:\"([^\"]*)\"|\'([^\']*)\'|([^\s]*))/g;
-  const booleanAttrRegex = /\b(\S+?)(?=\s|$)/g;
+  const booleanAttrRegex = /(\S+?)(?=\s|$)/g;
   const processedAttrs = new Set();
   const bindingNames = [];
   let match;
@@ -97,14 +100,20 @@ export const collectBindingNames = (attrsString = "") => {
 
   let boolMatch;
   while ((boolMatch = booleanAttrRegex.exec(remainingAttrsString)) !== null) {
-    const attrName = boolMatch[1];
-    if (attrName.startsWith(".")) {
+    const rawToken = boolMatch[1];
+    if (rawToken.startsWith(".")) {
+      continue;
+    }
+    const attrName = rawToken.startsWith("?")
+      ? rawToken.substring(1)
+      : rawToken;
+    if (!attrName || !isValidAttributeName(attrName)) {
       continue;
     }
     if (
-      !processedAttrs.has(attrName)
-      && !attrName.startsWith(PROP_PREFIX)
-      && !attrName.includes("=")
+      !processedAttrs.has(rawToken)
+      && !rawToken.startsWith(PROP_PREFIX)
+      && !rawToken.includes("=")
     ) {
       bindingNames.push(attrName);
     }
@@ -146,6 +155,14 @@ export const parseNodeBindings = ({
     props[normalizedPropName] = propValue;
   };
 
+  const assertValidAttributeName = (attrName, sourceLabel) => {
+    if (!isValidAttributeName(attrName)) {
+      throw new Error(
+        `[Parser] Invalid ${sourceLabel} attribute name '${attrName}' on '${tagName}'.`,
+      );
+    }
+  };
+
   if (!attrsString) {
     return { attrs, props };
   }
@@ -180,6 +197,7 @@ export const parseNodeBindings = ({
 
     if (rawBindingName.startsWith("?")) {
       const attrName = rawBindingName.substring(1);
+      assertValidAttributeName(attrName, "boolean toggle");
       const attrValue = rawValue;
       assertSupportedBooleanToggleAttr(attrName);
 
@@ -203,6 +221,7 @@ export const parseNodeBindings = ({
       continue;
     }
 
+    assertValidAttributeName(rawBindingName, "binding");
     attrs[rawBindingName] = rawValue;
     if (isWebComponent && rawBindingName !== "id") {
       setComponentProp(rawBindingName, rawValue, "attribute-form");
@@ -221,21 +240,42 @@ export const parseNodeBindings = ({
     remainingAttrsString = remainingAttrsString.replace(processedMatch, " ");
   });
 
-  const booleanAttrRegex = /\b(\S+?)(?=\s|$)/g;
+  const booleanAttrRegex = /(\S+?)(?=\s|$)/g;
   let boolMatch;
   while ((boolMatch = booleanAttrRegex.exec(remainingAttrsString)) !== null) {
-    const attrName = boolMatch[1];
-    if (attrName.startsWith(".")) {
+    const rawToken = boolMatch[1];
+    if (rawToken.startsWith(".")) {
+      continue;
+    }
+    if (processedAttrs.has(rawToken) || rawToken.startsWith(PROP_PREFIX) || rawToken.includes("=")) {
       continue;
     }
+
+    if (rawToken.startsWith("?")) {
+      const toggleAttrName = rawToken.substring(1);
+      assertValidAttributeName(toggleAttrName, "boolean toggle");
+      assertSupportedBooleanToggleAttr(toggleAttrName);
+      attrs[toggleAttrName] = "";
+      if (isWebComponent && toggleAttrName !== "id") {
+        setComponentProp(toggleAttrName, true, "boolean attribute-form");
+      }
+      continue;
+    }
+
+    if (!isValidAttributeName(rawToken)) {
+      throw new Error(
+        `[Parser] Invalid attribute token '${rawToken}' on '${tagName}'.`,
+      );
+    }
+
     if (
-      !processedAttrs.has(attrName)
-      && !attrName.startsWith(PROP_PREFIX)
-      && !attrName.includes("=")
+      !processedAttrs.has(rawToken)
+      && !rawToken.startsWith(PROP_PREFIX)
+      && !rawToken.includes("=")
     ) {
-      attrs[attrName] = "";
-      if (isWebComponent && attrName !== "id") {
-        setComponentProp(attrName, true, "boolean attribute-form");
+      attrs[rawToken] = "";
+      if (isWebComponent && rawToken !== "id") {
+        setComponentProp(rawToken, true, "boolean attribute-form");
       }
     }
   }

package/src/parser.js

@@ -65,6 +65,8 @@ export const createVirtualDom = ({
   function processItems(currentItems, parentPath = "") {
     return currentItems
       .map((item, index) => {
+        const nodePath = parentPath ? `${parentPath}.${index}` : String(index);
+
         // Handle text nodes
         if (typeof item === "string" || typeof item === "number") {
           return String(item);
@@ -86,11 +88,11 @@ export const createVirtualDom = ({
         // Skip numeric keys that might come from array indices
         if (!isNaN(Number(keyString))) {
           if (Array.isArray(value)) {
-            return processItems(value, `${parentPath}.${keyString}`);
+            return processItems(value, nodePath);
           } else if (typeof value === "object" && value !== null) {
             const nestedEntries = Object.entries(value);
             if (nestedEntries.length > 0) {
-              return processItems([value], `${parentPath}.${keyString}`);
+              return processItems([value], nodePath);
             }
           }
           return String(value);
@@ -182,7 +184,7 @@ export const createVirtualDom = ({
         if (typeof value === "string" || typeof value === "number") {
           childrenOrText = String(value);
         } else if (Array.isArray(value)) {
-          childrenOrText = processItems(value, `${parentPath}.${keyString}`);
+          childrenOrText = processItems(value, nodePath);
         } else {
           childrenOrText = [];
         }
@@ -246,11 +248,8 @@ export const createVirtualDom = ({
         if (elementIdForRefs) {
           snabbdomData.key = elementIdForRefs;
         } else if (selector) {
-          // Generate a key based on selector, parent path, and index for list items
-          const itemPath = parentPath
-            ? `${parentPath}.${index}`
-            : String(index);
-          snabbdomData.key = `${selector}-${itemPath}`;
+          // Generate a key from selector and stable structural path.
+          snabbdomData.key = `${selector}-${nodePath}`;
         }
 
         if (Object.keys(attrs).length > 0) {