@canvasengine/compiler 2.0.0-beta.47 → 2.0.0-beta.49

package/dist/grammar2.pegjs

@@ -0,0 +1,879 @@
+{
+  function generateError(message, location) {
+    const { start, end } = location;
+    const errorMessage = `${message}\n` +
+      `at line ${start.line}, column ${start.column} to line ${end.line}, column ${end.column}`;
+    throw new Error(errorMessage);
+  }
+
+  /*——— Custom error handler for syntax errors ———*/
+  function parseError(error) {
+    // error.expected : array of { type, description }
+    // error.found    : string | null
+    // error.location : { start, end }
+    const { expected, found, location } = error;
+
+    // Group expected items by description to avoid duplicates
+    const uniqueExpected = [...new Set(expected.map(e => e.description))];
+    
+    // Format the expected values in a more readable way
+    const expectedDesc = uniqueExpected
+      .map(desc => `'${desc}'`)
+      .join(' or ');
+
+    const foundDesc = found === null ? 'end of input' : `'${found}'`;
+
+    generateError(
+      `Syntax error: expected ${expectedDesc} but found ${foundDesc}`,
+      location
+    );
+  }
+
+  // List of standard HTML DOM elements
+  const domElements = new Set([
+    'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'body', 'br', 'button', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 'samp', 's', 'script', 'section', 'select', 'slot', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr'
+  ]);
+
+  // Framework components that should NOT be transformed to DOM elements
+  const frameworkComponents = new Set([
+    'Canvas', 'Container', 'Sprite', 'Text', 'DOMElement', 'Svg', 'Button'
+  ]);
+
+  const voidElements = new Set([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta',
+    'param', 'source', 'track', 'wbr'
+  ]);
+
+  const eventAttributes = new Set([
+    'click', 'tap', 'pointertap', 'pointerdown', 'pointerup', 'pointermove',
+    'pointerover', 'pointerout', 'pointerupoutside', 'mousedown', 'mouseup',
+    'mousemove', 'mouseover', 'mouseout', 'touchstart', 'touchend', 'touchmove',
+    'touchcancel', 'rightclick', 'keydown', 'keyup', 'keypress'
+  ]);
+
+  // DisplayObject special attributes that should not be in attrs
+  const displayObjectAttributes = new Set([
+    'x', 'y', 'scale', 'anchor', 'skew', 'tint', 'rotation', 'angle', 
+    'zIndex', 'roundPixels', 'cursor', 'visible', 'alpha', 'pivot', 'filters', 'maskOf', 
+    'blendMode', 'filterArea', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 
+    'aspectRatio', 'flexGrow', 'flexShrink', 'flexBasis', 'rowGap', 'columnGap', 
+    'positionType', 'top', 'right', 'bottom', 'left', 'objectFit', 'objectPosition', 
+    'transformOrigin', 'flexDirection', 'justifyContent', 'alignItems', 'alignContent', 
+    'alignSelf', 'margin', 'padding', 'border', 'gap', 'blur', 'shadow'
+  ]);
+
+  function isDOMElement(tagName) {
+    // Don't transform framework components to DOM elements
+    if (frameworkComponents.has(tagName)) {
+      return false;
+    }
+    return domElements.has(tagName.toLowerCase());
+  }
+
+  function isVoidElement(tagName) {
+    return voidElements.has(tagName.toLowerCase());
+  }
+
+  function formatAttributes(attributes) {
+    if (attributes.length === 0) {
+      return null;
+    }
+  
+    // Check if there's exactly one attribute and it's a spread attribute
+    if (attributes.length === 1 && attributes[0].startsWith('...')) {
+      // Return the identifier directly, removing the '...'
+      return attributes[0].substring(3);
+    }
+  
+    // Otherwise, format as an object literal
+    const formattedAttrs = attributes.map(attr => {
+      // If it's a spread attribute, keep it as is
+      if (attr.startsWith('...')) {
+        return attr;
+      }
+      // If it's a standalone attribute (doesn't contain ':'), format as shorthand property 'name'
+      if (!attr.includes(':')) {
+        return attr; // JS object literal shorthand
+      }
+      // Otherwise (key: value), keep it as is
+      return attr;
+    });
+  
+    return `{ ${formattedAttrs.join(', ')} }`;
+  }
+
+  function formatDOMElement(tagName, attributes) {
+    if (attributes.length === 0) {
+      return `h(DOMElement, { element: "${tagName}" })`;
+    }
+
+    const { domAttrs, displayObjectAttrs } = splitAttributes(attributes);
+
+    // Build the result
+    const parts = [`element: "${tagName}"`];
+    
+    if (domAttrs.length > 0) {
+      parts.push(`attrs: { ${domAttrs.join(', ')} }`);
+    }
+    
+    if (displayObjectAttrs.length > 0) {
+      parts.push(...displayObjectAttrs);
+    }
+
+    return `h(DOMElement, { ${parts.join(', ')} })`;
+  }
+
+  function splitAttributes(attributes) {
+    const domAttrs = [];
+    const displayObjectAttrs = [];
+    const classValues = [];
+    let classInsertIndex = null;
+
+    attributes.forEach(attr => {
+      // Handle spread attributes
+      if (attr.startsWith('...')) {
+        displayObjectAttrs.push(attr);
+        return;
+      }
+
+      // Extract attribute name and value (if present)
+      let attrName;
+      let attrValue;
+      if (attr.includes(':')) {
+        const colonIndex = attr.indexOf(':');
+        attrName = attr.slice(0, colonIndex).trim().replace(/['"]/g, '');
+        attrValue = attr.slice(colonIndex + 1).trim();
+      } else {
+        // Standalone attribute
+        attrName = attr.replace(/['"]/g, '');
+      }
+
+      // Check if it's a DisplayObject attribute
+      if (displayObjectAttributes.has(attrName)) {
+        displayObjectAttrs.push(attr);
+        return;
+      }
+
+      if (attrName === 'class' && attrValue !== undefined) {
+        classValues.push(attrValue);
+        if (classInsertIndex === null) {
+          classInsertIndex = domAttrs.length;
+        }
+        return;
+      }
+
+      domAttrs.push(attr);
+    });
+
+    if (classValues.length > 0) {
+      const mergedClass = classValues.length === 1
+        ? `class: ${classValues[0]}`
+        : `class: [${classValues.join(', ')}]`;
+      if (classInsertIndex === null) {
+        domAttrs.push(mergedClass);
+      } else {
+        domAttrs.splice(classInsertIndex, 0, mergedClass);
+      }
+    }
+
+    return { domAttrs, displayObjectAttrs };
+  }
+
+  function hasFunctionCall(value) {
+    return /[a-zA-Z_][a-zA-Z0-9_]*\s*\(/.test(value);
+  }
+
+  function hasIdentifier(value) {
+    return /[a-zA-Z_]/.test(value);
+  }
+
+  function isSimpleAccessor(value) {
+    return /^[a-zA-Z_][a-zA-Z0-9_]*(\.[a-zA-Z_][a-zA-Z0-9_]*)*$/.test(value.trim());
+  }
+
+  function formatObjectLiteralSpacing(value) {
+    const trimmed = value.trim();
+    if (!trimmed.startsWith('{') || !trimmed.endsWith('}')) {
+      return value;
+    }
+    const inner = trimmed.slice(1, -1).trim();
+    return `{ ${inner} }`;
+  }
+
+  function transformBareIdentifiersToSignals(value) {
+    return value.replace(/\b([a-zA-Z_][a-zA-Z0-9_]*)\b/g, (match, name, offset) => {
+      if (['true', 'false', 'null'].includes(name)) {
+        return match;
+      }
+
+      const beforeMatch = value.substring(0, offset);
+      const singleQuotesBefore = (beforeMatch.match(/'/g) || []).length;
+      const doubleQuotesBefore = (beforeMatch.match(/"/g) || []).length;
+      if (singleQuotesBefore % 2 === 1 || doubleQuotesBefore % 2 === 1) {
+        return match;
+      }
+
+      const charBefore = offset > 0 ? value[offset - 1] : '';
+      const charAfter = offset + match.length < value.length ? value[offset + match.length] : '';
+
+      if (charBefore === '.' || charAfter === '.') {
+        return match;
+      }
+
+      const afterSlice = value.slice(offset + match.length);
+      if (/^\s*\(/.test(afterSlice)) {
+        return match;
+      }
+
+      return `${name}()`;
+    });
+  }
+}
+
+start
+  = _ elements:(element)* _ {
+    if (elements.length === 1) {
+      return elements[0];
+    }
+    return `[${elements.join(',')}]`;
+  }
+
+element "component or control structure"
+  = forLoop
+  / ifCondition
+  / svgElement
+  / domElementWithText
+  / domElementWithMixedContent
+  / selfClosingElement
+  / voidElement
+  / openCloseElement
+  / openUnclosedTag
+  / comment
+
+selfClosingElement "self-closing component tag"
+  = _ "<" _ tagName:tagName _ attributes:attributes _ "/>" _ {
+      // Check if it's a DOM element
+      if (isDOMElement(tagName)) {
+        return formatDOMElement(tagName, attributes);
+      }
+      // Otherwise, treat as regular component
+      const attrsString = formatAttributes(attributes);
+      return attrsString ? `h(${tagName}, ${attrsString})` : `h(${tagName})`;
+    }
+
+voidElement "void DOM element tag"
+  = _ "<" _ tagName:tagName &{ return isVoidElement(tagName); } _ attributes:attributes _ ">" _ {
+      return formatDOMElement(tagName, attributes);
+    }
+
+domElementWithText "DOM element with text content"
+  = "<" _ tagName:tagName &{ return !isVoidElement(tagName); } _ attributes:attributes _ ">" _ text:simpleTextContent _ "</" _ closingTagName:tagName _ ">" _ {
+      if (tagName !== closingTagName) {
+        generateError(
+          `Mismatched tag: opened <${tagName}> but closed </${closingTagName}>`,
+          location()
+        );
+      }
+      
+      if (isDOMElement(tagName)) {
+        if (attributes.length === 0) {
+          return `h(DOMElement, { element: "${tagName}", textContent: ${text} })`;
+        }
+
+        const { domAttrs, displayObjectAttrs } = splitAttributes(attributes);
+
+        // Build the result
+        const parts = [`element: "${tagName}"`];
+        
+        if (domAttrs.length > 0) {
+          parts.push(`attrs: { ${domAttrs.join(', ')} }`);
+        }
+        
+        parts.push(`textContent: ${text}`);
+        
+        if (displayObjectAttrs.length > 0) {
+          parts.push(...displayObjectAttrs);
+        }
+
+        return `h(DOMElement, { ${parts.join(', ')} })`;
+      }
+      
+      // If not a DOM element, fall back to regular parsing
+      return null;
+    }
+
+domElementWithMixedContent "DOM element with mixed content"
+  = "<" _ tagName:tagName &{ return isDOMElement(tagName) && !isVoidElement(tagName); } _ attributes:attributes _ ">" _ children:domContent _ "</" _ closingTagName:tagName _ ">" _ {
+      if (tagName !== closingTagName) {
+        generateError(
+          `Mismatched tag: opened <${tagName}> but closed </${closingTagName}>`,
+          location()
+        );
+      }
+
+      const childrenContent = children ? children : null;
+
+      if (attributes.length === 0) {
+        if (childrenContent) {
+          return `h(DOMElement, { element: "${tagName}" }, ${childrenContent})`;
+        } else {
+          return `h(DOMElement, { element: "${tagName}" })`;
+        }
+      }
+
+      const { domAttrs, displayObjectAttrs } = splitAttributes(attributes);
+
+      // Build the result
+      const parts = [`element: "${tagName}"`];
+      
+      if (domAttrs.length > 0) {
+        parts.push(`attrs: { ${domAttrs.join(', ')} }`);
+      }
+      
+      if (displayObjectAttrs.length > 0) {
+        parts.push(...displayObjectAttrs);
+      }
+
+      if (childrenContent) {
+        return `h(DOMElement, { ${parts.join(', ')} }, ${childrenContent})`;
+      } else {
+        return `h(DOMElement, { ${parts.join(', ')} })`;
+      }
+    }
+
+simpleTextContent "simple text content"
+  = parts:(simpleDynamicPart / simpleTextPart)+ {
+      const validParts = parts.filter(p => p !== null);
+      if (validParts.length === 0) return null;
+      if (validParts.length === 1) return validParts[0];
+      
+      // Multiple parts - need to concatenate
+      const normalizedParts = validParts.map(part => {
+        if (typeof part === 'string' && part.startsWith('computed(() => ') && part.endsWith(')')) {
+          return part.slice('computed(() => '.length, -1);
+        }
+        return part;
+      });
+      const hasSignals = normalizedParts.some(part => part && part.includes && part.includes('()'));
+      if (hasSignals) {
+        return `computed(() => ${normalizedParts.join(' + ')})`;
+      }
+      return normalizedParts.join(' + ');
+    }
+
+simpleTextPart "simple text part"
+  = !("@for" / "@if") text:$([^<{@]+) {
+      const trimmed = text.trim();
+      if (!trimmed) return null;
+      const escaped = text
+        .replace(/\\/g, '\\\\')
+        .replace(/'/g, "\\'")
+        .replace(/\r/g, '\\r')
+        .replace(/\n/g, '\\n')
+        .replace(/\t/g, '\\t');
+      return `'${escaped}'`;
+    }
+
+simpleDynamicPart "simple dynamic part"
+  = "{{" _ expr:attributeValue _ "}}" {
+      const trimmedExpr = expr.trim();
+      if (!trimmedExpr) {
+        return trimmedExpr;
+      }
+      if (hasFunctionCall(trimmedExpr)) {
+        return `computed(() => ${trimmedExpr})`;
+      }
+      return trimmedExpr;
+    }
+  / "{" _ expr:attributeValue _ "}" {
+      const trimmedExpr = expr.trim();
+      if (!trimmedExpr) {
+        return trimmedExpr;
+      }
+      if (hasFunctionCall(trimmedExpr)) {
+        return `computed(() => ${trimmedExpr})`;
+      }
+      return trimmedExpr;
+    }
+
+openCloseElement "component with content"
+  = "<" _ tagName:tagName _ attributes:attributes _ ">" _ content:content _ "</" _ closingTagName:tagName _ ">" _ {
+      if (tagName !== closingTagName) {
+        generateError(
+          `Mismatched tag: opened <${tagName}> but closed </${closingTagName}>`,
+          location()
+        );
+      }
+      
+      // Check if it's a DOM element
+      if (isDOMElement(tagName)) {
+        const children = content ? content : null;
+        
+        if (attributes.length === 0) {
+          if (children) {
+            return `h(DOMElement, { element: "${tagName}" }, ${children})`;
+          } else {
+            return `h(DOMElement, { element: "${tagName}" })`;
+          }
+        }
+
+        const { domAttrs, displayObjectAttrs } = splitAttributes(attributes);
+
+        // Build the result
+        const parts = [`element: "${tagName}"`];
+        
+        if (domAttrs.length > 0) {
+          parts.push(`attrs: { ${domAttrs.join(', ')} }`);
+        }
+        
+        if (displayObjectAttrs.length > 0) {
+          parts.push(...displayObjectAttrs);
+        }
+
+        if (children) {
+          return `h(DOMElement, { ${parts.join(', ')} }, ${children})`;
+        } else {
+          return `h(DOMElement, { ${parts.join(', ')} })`;
+        }
+      }
+      
+      // Otherwise, treat as regular component
+      const attrsString = formatAttributes(attributes);
+      const children = content ? content : null;
+      if (attrsString && children) {
+        return `h(${tagName}, ${attrsString}, ${children})`;
+      } else if (attrsString) {
+        return `h(${tagName}, ${attrsString})`;
+      } else if (children) {
+        return `h(${tagName}, null, ${children})`;
+      } else {
+        return `h(${tagName})`;
+      }
+    }
+
+attributes "component attributes"
+  = attrs:(attribute (_ attribute)*)? {
+      return attrs
+        ? [attrs[0]].concat(attrs[1].map(a => a[1]))
+        : [];
+    }
+
+attribute "attribute"
+  = staticAttribute
+  / dynamicAttribute
+  / eventHandler
+  / spreadAttribute
+  / unclosedQuote
+  / unclosedBrace
+
+spreadAttribute "spread attribute"
+  = "..." expr:(functionCallExpr / dotNotation) {
+      return "..." + expr;
+    }
+
+functionCallExpr "function call"
+  = name:dotNotation "(" args:functionArgs? ")" {
+      return `${name}(${args || ''})`;
+    }
+
+dotNotation "property access"
+  = first:identifier rest:("." identifier)* {
+      return text();
+    }
+
+eventHandler "event handler"
+  = "@" eventName:identifier _ "=" _ "{" _ handlerName:attributeValue _ "}" {
+      const needsQuotes = /[^a-zA-Z0-9_$]/.test(eventName);
+      const formattedName = needsQuotes ? `'${eventName}'` : eventName;
+      return `${formattedName}: ${handlerName}`;
+    }
+     / "@" eventName:attributeName _ {
+      const needsQuotes = /[^a-zA-Z0-9_$]/.test(eventName);
+      return needsQuotes ? `'${eventName}'` : eventName;
+    }
+
+dynamicAttribute "dynamic attribute"
+  = attributeName:attributeName _ "=" _ "{" _ attributeValue:attributeValue _ "}" {
+      // Check if attributeName needs to be quoted (contains dash or other invalid JS identifier chars)
+      const needsQuotes = /[^a-zA-Z0-9_$]/.test(attributeName);
+      const formattedName = needsQuotes ? `'${attributeName}'` : attributeName;
+      
+        if (eventAttributes.has(attributeName)) {
+          return `${formattedName}: ${attributeValue}`;
+        }
+      
+        // If it's a complex object with strings, preserve it as is
+        if (attributeValue.trim().startsWith('{') && attributeValue.trim().endsWith('}') && 
+            (attributeValue.includes('"') || attributeValue.includes("'"))) {
+          return `${formattedName}: ${attributeValue}`;
+        }
+        
+        // If it's a template string, keep it as-is
+      if (attributeValue.trim().startsWith('`') && attributeValue.trim().endsWith('`')) {
+        return formattedName + ': ' + attributeValue;
+      }
+      
+      // Handle other types of values
+      if (attributeValue.startsWith('h(') || attributeValue.includes('=>')) {
+        return `${formattedName}: ${attributeValue}`;
+      }
+
+      const trimmedValue = attributeValue.trim();
+      if (trimmedValue.match(/^[a-zA-Z_]\w*$/)) {
+        return `${formattedName}: ${attributeValue}`;
+      }
+
+      if (/^\d+(\.\d+)?$/.test(trimmedValue) || ['true', 'false', 'null'].includes(trimmedValue)) {
+        return `${formattedName}: ${attributeValue}`;
+      }
+
+      if (isSimpleAccessor(trimmedValue)) {
+        return `${formattedName}: ${attributeValue}`;
+      }
+
+      const isObjectLiteral = trimmedValue.startsWith('{') && trimmedValue.endsWith('}');
+      const isArrayLiteral = trimmedValue.startsWith('[') && trimmedValue.endsWith(']');
+      if (isObjectLiteral) {
+        const formattedObject = formatObjectLiteralSpacing(attributeValue);
+        if (hasFunctionCall(trimmedValue)) {
+          return `${formattedName}: computed(() => (${formattedObject}))`;
+        }
+        return `${formattedName}: ${formattedObject}`;
+      }
+      if (isArrayLiteral) {
+        if (hasFunctionCall(trimmedValue)) {
+          return `${formattedName}: computed(() => ${attributeValue})`;
+        }
+        return `${formattedName}: ${attributeValue}`;
+      }
+
+      if (hasFunctionCall(trimmedValue)) {
+        return `${formattedName}: computed(() => ${attributeValue})`;
+      }
+
+      if (!hasIdentifier(trimmedValue)) {
+        return `${formattedName}: ${attributeValue}`;
+      }
+
+      const computedValue = transformBareIdentifiersToSignals(attributeValue);
+      return `${formattedName}: computed(() => ${computedValue})`;
+    }
+  / attributeName:attributeName _ {
+      const needsQuotes = /[^a-zA-Z0-9_$]/.test(attributeName);
+      return needsQuotes ? `'${attributeName}'` : attributeName;
+    }
+
+attributeValue "attribute value"
+  = element
+  / functionWithElement
+  / objectLiteral
+  / $([^{}]* ("{" [^{}]* "}" [^{}]*)*) {
+    return text().trim()
+  }
+
+objectLiteral "object literal"
+  = "{" _ objContent:objectContent _ "}" {
+    return `{ ${objContent} }`;
+  }
+
+objectContent
+  = prop:objectProperty rest:(_ "," _ objectProperty)* {
+    return [prop].concat(rest.map(r => r[3])).join(', ');
+  }
+  / "" { return ""; }
+
+objectProperty
+  = key:identifier _ ":" _ value:propertyValue {
+    return `${key}: ${value}`;
+  }
+  / key:identifier {
+    return key;
+  }
+
+propertyValue
+  = nestedObject
+  / element
+  / functionWithElement
+  / stringLiteral
+  / number
+  / identifier
+
+nestedObject
+  = "{" _ objContent:objectContent _ "}" {
+    return `{ ${objContent} }`;
+  }
+
+stringLiteral
+  = '"' chars:[^"]* '"' { return text(); }
+  / "'" chars:[^']* "'" { return text(); }
+
+functionWithElement "function expression"
+  = "(" _ params:functionParams? _ ")" _ "=>" _ elem:element {
+      return `${params ? `(${params}) =>` : '() =>'} ${elem}`;
+    }
+
+functionParams
+  = destructuredParams
+  / simpleParams
+
+destructuredParams
+  = "{" _ param:identifier rest:(_ "," _ identifier)* _ "}" {
+      return `{${[param].concat(rest.map(r => r[3])).join(', ')}}`;
+    }
+
+simpleParams
+  = param:identifier rest:(_ "," _ identifier)* {
+      return [param].concat(rest.map(r => r[3])).join(', ');
+    }
+
+staticAttribute "static attribute"
+  = attributeName:attributeName _ "=" _ "\"" attributeValue:staticValue "\"" {
+      const needsQuotes = /[^a-zA-Z0-9_$]/.test(attributeName);
+      const formattedName = needsQuotes ? `'${attributeName}'` : attributeName;
+      return `${formattedName}: ${attributeValue}`;
+    }
+
+eventAttribute
+  = "(" _ eventName:eventName _ ")" _ "=" _ "\"" eventAction:eventAction "\"" {
+      return `${eventName}: () => { ${eventAction} }`;
+    }
+
+staticValue
+  = [^"]+ {
+      var val = text();
+      return `'${val}'`
+    }
+
+content "component content"
+  = elements:(element)* {
+      const filteredElements = elements.filter(el => el !== null);
+      if (filteredElements.length === 0) return null;
+      if (filteredElements.length === 1) return filteredElements[0];
+      return `[${filteredElements.join(', ')}]`;
+    }
+
+domContent "DOM content"
+  = elements:(domContentPart)* {
+      const filteredElements = elements.filter(el => el !== null);
+      if (filteredElements.length === 0) return null;
+      if (filteredElements.length === 1) return filteredElements[0];
+      return `[${filteredElements.join(', ')}]`;
+    }
+
+domContentPart
+  = element
+  / simpleTextContent
+
+
+
+textNode
+  = text:$([^<]+) {
+      const trimmed = text.trim();
+      return trimmed ? `'${trimmed}'` : null;
+    }
+
+textElement
+  = text:[^<>]+ {
+      const trimmed = text.join('').trim();
+      return trimmed ? JSON.stringify(trimmed) : null;
+    }
+
+forLoop "for loop"
+  = _ "@for" _ "(" _ variableName:(tupleDestructuring / identifier) _ "of" _ iterable:iterable _ ")" _ "{" _ content:content _ "}" _ {
+      return `loop(${iterable}, ${variableName} => ${content})`;
+    }
+
+tupleDestructuring "destructuring pattern"
+  = "(" _ first:identifier _ "," _ second:identifier _ ")" {
+      return `(${first}, ${second})`;
+    }
+
+ifCondition "if condition"
+  = _ "@if" _ "(" _ condition:condition _ ")" _ "{" _ content:content _ "}" _ elseIfs:elseIfClause* elseClause:elseClause? _ {
+      let result = `cond(${condition}, () => ${content}`;
+      
+      // Add else if clauses
+      elseIfs.forEach(elseIf => {
+        result += `, [${elseIf.condition}, () => ${elseIf.content}]`;
+      });
+      
+      // Add else clause if present
+      if (elseClause) {
+        result += `, () => ${elseClause}`;
+      }
+      
+      result += ')';
+      return result;
+    }
+
+elseIfClause "else if clause"
+  = _ "@else" _ "if" _ "(" _ condition:condition _ ")" _ "{" _ content:content _ "}" _ {
+      return { condition, content };
+    }
+
+elseClause "else clause"
+  = _ "@else" _ "{" _ content:content _ "}" _ {
+      return content;
+    }
+
+tagName "tag name"
+  = tagExpression
+
+tagExpression "tag expression"
+  = first:tagPart rest:("." tagPart)* {
+      return text();
+    }
+
+tagPart "tag part"
+  = name:[a-zA-Z][a-zA-Z0-9]* args:("(" functionArgs? ")")? {
+      return text();
+    }
+
+attributeName "attribute name"
+  = [a-zA-Z][a-zA-Z0-9-]* { return text(); }
+
+eventName
+  = [a-zA-Z][a-zA-Z0-9-]* { return text(); }
+
+variableName
+  = [a-zA-Z_][a-zA-Z0-9_]* { return text(); }
+
+iterable "iterable expression"
+  = id:identifier "(" _ args:functionArgs? _ ")" { // Direct function call
+      return `${id}(${args || ''})`;
+    }
+  / first:identifier "." rest:dotFunctionChain { // Dot notation possibly with function call
+      return `${first}.${rest}`;
+    }
+  / id:identifier { return id; }
+
+dotFunctionChain
+  = segment:identifier "(" _ args:functionArgs? _ ")" rest:("." dotFunctionChain)? {
+      const restStr = rest ? `.${rest[1]}` : '';
+      return `${segment}(${args || ''})${restStr}`;
+    }
+  / segment:identifier rest:("." dotFunctionChain)? {
+      const restStr = rest ? `.${rest[1]}` : '';
+      return `${segment}${restStr}`;
+    }
+
+condition "condition expression"
+  = text:$(conditionChunk*) {
+      const originalText = text.trim();
+      if (!originalText) {
+        return originalText;
+      }
+
+      const hasOperator = /[!<>=&|]/.test(originalText);
+      if (hasOperator) {
+        return `computed(() => ${originalText})`;
+      }
+
+      return originalText;
+  }
+
+conditionChunk
+  = "(" conditionChunk* ")"
+  / [^()]
+
+functionCall "function call"
+  = name:identifier "(" args:functionArgs? ")" {
+    return `${name}(${args || ''})`;
+  }
+
+functionCallWithArgs "function call with complex args"
+  = name:identifier "(" args:complexFunctionArgs? ")" {
+    return `${name}(${args || ''})`;
+  }
+
+functionArgs
+  = arg:functionArg rest:("," _ functionArg)* {
+    return [arg].concat(rest.map(r => r[2])).join(', ');
+  }
+
+complexFunctionArgs
+  = arg:complexFunctionArg rest:("," _ complexFunctionArg)* {
+    return [arg].concat(rest.map(r => r[2])).join(', ');
+  }
+
+functionArg
+  = _ value:(identifier / number / string) _ {
+    return value;
+  }
+
+complexFunctionArg "complex function argument"
+  = _ value:complexArgExpression _ {
+    return value.trim();
+  }
+
+complexArgExpression "complex argument expression"
+  = $([^,)]* ("(" [^)]* ")" [^,)]*)*) {
+    return text().trim();
+  }
+
+number
+  = [0-9]+ ("." [0-9]+)? { return text(); }
+
+string
+  = '"' chars:[^"]* '"' { return text(); }
+  / "'" chars:[^']* "'" { return text(); }
+
+eventAction
+  = [^"]* { return text(); }
+
+_ 'whitespace'
+  = [ \t\n\r]* 
+
+identifier
+  = [a-zA-Z_][a-zA-Z0-9_]* { return text(); }
+
+comment
+  = singleComment+ {
+    return null
+  }
+
+singleComment
+  = "<!--" _ content:((!("-->") .)* "-->") _ {
+      return null;
+    }
+
+// Add a special error detection rule for unclosed tags
+openUnclosedTag "unclosed tag"
+  = "<" _ tagName:tagName &{ return !isVoidElement(tagName); } _ attributes:attributes _ ">" _ content:content _ !("</" _ closingTagName:tagName _ ">") {
+      generateError(
+        `Unclosed tag: <${tagName}> is missing its closing tag`,
+        location()
+      );
+    }
+
+// Add error detection for unclosed quotes in static attributes
+unclosedQuote "unclosed string"
+  = attributeName:attributeName _ "=" _ "\"" [^"]* !("\"") {
+      generateError(
+        `Missing closing quote in attribute '${attributeName}'`,
+        location()
+      );
+    }
+
+// Add error detection for unclosed braces in dynamic attributes
+unclosedBrace "unclosed brace"
+  = attributeName:attributeName _ "=" _ "{" !("}" / _ "}") [^{}]* {
+      generateError(
+        `Missing closing brace in dynamic attribute '${attributeName}'`,
+        location()
+      );
+    }
+
+svgElement "SVG element"
+  = "<svg" attrs:([^>]*) ">" content:svgInnerContent "</svg>" _ {
+      const attributes = attrs.join('').trim();
+      // Clean up the content by removing extra whitespace and newlines
+      const cleanContent = content.replace(/\s+/g, ' ').trim();
+      const rawContent = `<svg${attributes ? ' ' + attributes : ''}>${cleanContent}</svg>`;
+      return `h(Svg, { content: \`${rawContent}\` })`;
+    }
+
+svgInnerContent "SVG inner content"
+  = content:$((!("</svg>") .)*) {
+      return content;
+    }

package/dist/index.js

@@ -119,15 +119,18 @@ function shaderLoader() {
 }
 function canvasengine() {
   const filter = createFilter("**/*.ce");
+  const useLegacyGrammar = process.env.CANVASENGINE_COMPILER_V1 === "1";
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
+  const grammarFile = useLegacyGrammar ? "grammar.pegjs" : "grammar2.pegjs";
   const grammar = fs.readFileSync(
-    path.join(__dirname, "grammar.pegjs"),
+    path.join(__dirname, grammarFile),
     "utf8"
   );
   const parser = generate(grammar);
   const isDev = process.env.NODE_ENV === "dev";
   const FLAG_COMMENT = "/*--[TPL]--*/";
+  let warnedAboutGrammar = false;
   const PRIMITIVE_COMPONENTS = [
     "Canvas",
     "Sprite",
@@ -157,6 +160,15 @@ function canvasengine() {
     name: "vite-plugin-ce",
     transform(code, id) {
       if (!filter(id)) return null;
+      if (!warnedAboutGrammar) {
+        warnedAboutGrammar = true;
+        const legacyNote = "Set CANVASENGINE_COMPILER_V1=1 to compile with the legacy grammar (v1).";
+        if (useLegacyGrammar) {
+          console.warn(`[canvasengine] Using legacy grammar v1. ${legacyNote}`);
+        } else {
+          console.warn(`[canvasengine] Breaking change: compiler grammar v2 is now the default. ${legacyNote}`);
+        }
+      }
       const scriptMatch = code.match(/<script>([\s\S]*?)<\/script>/);
       let scriptContent = scriptMatch ? scriptMatch[1].trim() : "";
       const styleTagMatch = code.match(/<style([^>]*)>([\s\S]*?)<\/style>/);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../index.ts"],"sourcesContent":["import { createFilter } from \"vite\";\nimport { parse } from \"acorn\";\nimport fs from \"fs\";\nimport pkg from \"peggy\";\nimport path from \"path\";\nimport * as ts from \"typescript\";\nimport { fileURLToPath } from 'url';\n\nconst { generate } = pkg;\n\nconst DEV_SRC = \"../../src\"\n\n/**\n * Generates a short hash (8 characters, letters only) from a string\n * \n * @param {string} str - The string to hash\n * @returns {string} - An 8-character hash containing only lowercase letters (a-z)\n */\nfunction generateHash(str: string): string {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    const char = str.charCodeAt(i);\n    hash = ((hash << 5) - hash) + char;\n    hash = hash & hash; // Convert to 32-bit integer\n  }\n  // Convert to positive number and map to letters only (a-z)\n  // Use modulo to map to 26 letters, then convert to character\n  const positiveHash = Math.abs(hash);\n  let result = '';\n  for (let i = 0; i < 8; i++) {\n    const letterIndex = (positiveHash + i * 31) % 26; // 31 is a prime to spread values\n    result += String.fromCharCode(97 + letterIndex); // 97 is 'a'\n  }\n  return result;\n}\n\n/**\n * Formats a syntax error message with visual pointer to the error location\n * \n * @param {string} template - The template content that failed to parse\n * @param {object} error - The error object with location information\n * @returns {string} - Formatted error message with a visual pointer\n * \n * @example\n * ```\n * const errorMessage = showErrorMessage(\"<Canvas>test(d)</Canvas>\", syntaxError);\n * // Returns a formatted error message with an arrow pointing to 'd'\n * ```\n */\nfunction showErrorMessage(template: string, error: any): string {\n  if (!error.location) {\n    return `Syntax error: ${error.message}`;\n  }\n\n  const lines = template.split('\\n');\n  const { line, column } = error.location.start;\n  const errorLine = lines[line - 1] || '';\n  \n  // Create a visual pointer with an arrow\n  const pointer = ' '.repeat(column - 1) + '^';\n  \n  return `Syntax error at line ${line}, column ${column}: ${error.message}\\n\\n` +\n         `${errorLine}\\n${pointer}\\n`;\n}\n\n/**\n * Scopes CSS selectors by prefixing them with a class selector\n * \n * This function prefixes all CSS rule selectors (not @rules) with a class\n * selector to scope the styles to a specific component instance.\n * \n * @param {string} css - The CSS content to scope\n * @param {string} scopeClass - The unique scope class to use (without the dot)\n * @returns {string} - The scoped CSS content\n * \n * @example\n * ```\n * const scoped = scopeCSS('.my-class { color: red; }', 'ce-scope-abc123');\n * // Returns: '.ce-scope-abc123 .my-class { color: red; }'\n * ```\n */\nfunction scopeCSS(css: string, scopeClass: string): string {\n  const scopeSelector = `.${scopeClass}`;\n  \n  // Process CSS by finding rule blocks while skipping @rules\n  let result = '';\n  let i = 0;\n  let depth = 0;\n  let inRule = false;\n  let selectorBuffer = '';\n  \n  while (i < css.length) {\n    const char = css[i];\n    \n    if (char === '@' && !inRule && selectorBuffer === '') {\n      // Found @rule - copy it as-is until matching closing brace\n      const atRuleStart = i;\n      i++; // Skip '@'\n      \n      // Find the opening brace\n      while (i < css.length && css[i] !== '{') {\n        i++;\n      }\n      \n      if (i < css.length) {\n        // Found opening brace, now find matching closing brace\n        depth = 1;\n        i++; // Skip '{'\n        \n        while (i < css.length && depth > 0) {\n          if (css[i] === '{') depth++;\n          else if (css[i] === '}') depth--;\n          i++;\n        }\n        \n        // Copy entire @rule as-is\n        result += css.substring(atRuleStart, i);\n      }\n      continue;\n    }\n    \n    if (char === '{' && !inRule) {\n      // Start of a rule block - scope the selector we just collected\n      const selectorText = selectorBuffer.trim();\n      \n      if (selectorText) {\n        // Split selectors by comma and scope each one\n        const scopedSelectors = selectorText\n          .split(',')\n          .map(sel => {\n            const trimmed = sel.trim();\n            return trimmed ? `${scopeSelector} ${trimmed}` : trimmed;\n          })\n          .join(', ');\n        \n        result += scopedSelectors;\n      }\n      result += ' {';\n      inRule = true;\n      depth = 1;\n      selectorBuffer = '';\n    } else if (char === '{' && inRule) {\n      // Nested brace\n      result += char;\n      depth++;\n    } else if (char === '}' && inRule) {\n      result += char;\n      depth--;\n      if (depth === 0) {\n        inRule = false;\n      }\n    } else if (!inRule) {\n      // Collecting selector\n      selectorBuffer += char;\n    } else {\n      // Inside rule block\n      result += char;\n      if (char === '{') depth++;\n    }\n    \n    i++;\n  }\n  \n  // Add any remaining selector (shouldn't happen in valid CSS, but handle it)\n  if (selectorBuffer.trim()) {\n    const scopedSelectors = selectorBuffer.trim()\n      .split(',')\n      .map(sel => {\n        const trimmed = sel.trim();\n        return trimmed ? `${scopeSelector} ${trimmed}` : trimmed;\n      })\n      .join(', ');\n    result += scopedSelectors;\n  }\n  \n  return result;\n}\n\n/**\n * Vite plugin to load shader files (.frag, .vert, .wgsl) as text strings\n * \n * This plugin allows importing shader files directly as string literals in your code.\n * It supports fragment shaders (.frag), vertex shaders (.vert), and WebGPU shaders (.wgsl).\n * The content is loaded as a raw string and can be used directly with graphics APIs.\n * \n * @returns {object} - Vite plugin configuration object\n * \n * @example\n * ```typescript\n * // In your vite.config.ts\n * import { shaderLoader } from './path/to/compiler'\n * \n * export default defineConfig({\n *   plugins: [shaderLoader()]\n * })\n * \n * // In your code\n * import fragmentShader from './shader.frag'\n * import vertexShader from './shader.vert'\n * import computeShader from './shader.wgsl'\n * \n * console.log(fragmentShader) // Raw shader code as string\n * ```\n */\nexport function shaderLoader() {\n  const filter = createFilter(/\\.(frag|vert|wgsl)$/);\n\n  return {\n    name: \"vite-plugin-shader-loader\",\n    transform(code: string, id: string) {\n      if (!filter(id)) return;\n\n      // Escape the shader code to be safely embedded in a JavaScript string\n      const escapedCode = code\n        .replace(/\\\\/g, '\\\\\\\\')  // Escape backslashes\n        .replace(/`/g, '\\\\`')    // Escape backticks\n        .replace(/\\$/g, '\\\\$');  // Escape dollar signs\n\n      // Return the shader content as a default export string\n      return {\n        code: `export default \\`${escapedCode}\\`;`,\n        map: null,\n      };\n    },\n  };\n}\n\nexport default function canvasengine() {\n  const filter = createFilter(\"**/*.ce\");\n\n  // Convert import.meta.url to a file path\n  const __filename = fileURLToPath(import.meta.url);\n  const __dirname = path.dirname(__filename);\n\n  const grammar = fs.readFileSync(\n    path.join(__dirname, \"grammar.pegjs\"),\n    \"utf8\"\n  );\n  const parser = generate(grammar);\n  const isDev = process.env.NODE_ENV === \"dev\";\n  const FLAG_COMMENT = \"/*--[TPL]--*/\";\n\n  const PRIMITIVE_COMPONENTS = [\n    \"Canvas\",\n    \"Sprite\",\n    \"Text\",\n    \"Viewport\",\n    \"Graphics\",\n    \"Container\",\n    \"Navigation\",\n    \"ImageMap\",\n    \"NineSliceSprite\",\n    \"Rect\",\n    \"Circle\",\n    \"Ellipse\",\n    \"Triangle\",\n    \"TilingSprite\",\n    \"svg\",\n    \"Video\",\n    \"Mesh\",\n    \"Svg\",\n    \"DOMContainer\",\n    \"DOMElement\",\n    \"DOMSprite\",\n    \"Button\",\n    \"Joystick\"\n  ];\n\n  return {\n    name: \"vite-plugin-ce\",\n    transform(code: string, id: string) {\n      if (!filter(id)) return null;\n\n      // Extract the script content\n      const scriptMatch = code.match(/<script>([\\s\\S]*?)<\\/script>/);\n      let scriptContent = scriptMatch ? scriptMatch[1].trim() : \"\";\n      \n      // Extract the style tag with attributes and content\n      const styleTagMatch = code.match(/<style([^>]*)>([\\s\\S]*?)<\\/style>/);\n      let styleContent = \"\";\n      let isScoped = false;\n      \n      if (styleTagMatch) {\n        const styleAttributes = styleTagMatch[1].trim();\n        styleContent = styleTagMatch[2].trim();\n        \n        // Check if scoped attribute is present\n        isScoped = /scoped(?:\\s|>|$)/.test(styleAttributes);\n      }\n      \n      // Remove script and style tags from template before parsing\n      let template = code\n        .replace(/<script>[\\s\\S]*?<\\/script>/, \"\")\n        .replace(/<style[^>]*>[\\s\\S]*?<\\/style>/, \"\")\n        .replace(/^\\s+|\\s+$/g, '');\n\n      let parsedTemplate;\n      try {\n        parsedTemplate = parser.parse(template);\n      } catch (error) {\n        const errorMsg = showErrorMessage(template, error);\n        throw new Error(`Error parsing template in file ${id}:\\n${errorMsg}`);\n      }\n\n      // trick to avoid typescript remove imports in scriptContent\n      scriptContent += FLAG_COMMENT + parsedTemplate\n\n      let transpiledCode = ts.transpileModule(scriptContent, {\n        compilerOptions: {\n          module: ts.ModuleKind.Preserve,\n        },\n      }).outputText;\n\n      // remove code after /*---*/\n      transpiledCode = transpiledCode.split(FLAG_COMMENT)[0]\n\n      // Use Acorn to parse the script content\n      const parsed = parse(transpiledCode, {\n        sourceType: \"module\",\n        ecmaVersion: 2020,\n      });\n\n      // Extract imports\n      const imports = parsed.body.filter(\n        (node) => node.type === \"ImportDeclaration\"\n      );\n\n      // Extract non-import statements from scriptContent\n      const nonImportCode = parsed.body\n        .filter((node) => node.type !== \"ImportDeclaration\")\n        .map((node) => transpiledCode.slice(node.start, node.end))\n        .join(\"\\n\");\n\n      let importsCode = imports\n        .map((imp) => {\n          let importCode = transpiledCode.slice(imp.start, imp.end);\n          if (isDev && importCode.includes(\"from 'canvasengine'\")) {\n            importCode = importCode.replace(\n              \"from 'canvasengine'\",\n              `from '${DEV_SRC}'`\n            );\n          }\n          return importCode;\n        })\n        .join(\"\\n\");\n\n      // Define an array for required imports\n      const requiredImports = [\"h\", \"computed\", \"cond\", \"loop\"];\n\n      // Check for missing imports\n      const missingImports = requiredImports.filter(\n        (importName) =>\n          !imports.some(\n            (imp) =>\n              imp.specifiers &&\n              imp.specifiers.some(\n                (spec) =>\n                  spec.type === \"ImportSpecifier\" &&\n                  spec.imported && \n                  'name' in spec.imported &&\n                  spec.imported.name === importName\n              )\n          )\n      );\n\n      // Add missing imports\n      if (missingImports.length > 0) {\n        const additionalImportCode = `import { ${missingImports.join(\n          \", \"\n        )} } from ${isDev ? `'${DEV_SRC}'` : \"'canvasengine'\"};`;\n        importsCode = `${additionalImportCode}\\n${importsCode}`;\n      }\n\n      // Check for primitive components in parsedTemplate\n      const primitiveImports = PRIMITIVE_COMPONENTS.filter((component) =>\n        parsedTemplate.includes(`h(${component}`)\n      );\n\n      // Add missing imports for primitive components\n      primitiveImports.forEach((component) => {\n        const importStatement = `import { ${component} } from ${\n          isDev ? `'${DEV_SRC}'` : \"'canvasengine'\"\n        };`;\n        if (!importsCode.includes(importStatement)) {\n          importsCode = `${importStatement}\\n${importsCode}`;\n        }\n      });\n\n      // Process CSS: scope it if scoped attribute is present\n      let processedStyleContent = styleContent;\n      let scopeClass = '';\n      \n      if (isScoped && styleContent) {\n        // Generate short hash (8 characters) based on file path\n        const fileHash = generateHash(id);\n        scopeClass = fileHash;\n        processedStyleContent = scopeCSS(styleContent, scopeClass);\n        \n        // Add _scopeClass prop to all DOMContainer in the template\n        // Pattern: h(DOMContainer, { ... }) or h(DOMContainer) or h(DOMContainer, null, ...)\n        parsedTemplate = parsedTemplate.replace(\n          /h\\(DOMContainer\\s*,\\s*(\\{([^}]*)\\}|null)\\s*(,\\s*[^)]*)?\\)/g,\n          (match, propsPart, propsContent, childrenPart) => {\n            if (propsPart === 'null') {\n              // h(DOMContainer, null, ...) -> h(DOMContainer, { _scopeClass: '...' }, ...)\n              return `h(DOMContainer, { _scopeClass: '${scopeClass}' }${childrenPart || ''})`;\n            } else {\n              // h(DOMContainer, { ... }, ...) -> h(DOMContainer, { _scopeClass: '...', ... }, ...)\n              // Need to insert _scopeClass at the beginning of the props object\n              return `h(DOMContainer, { _scopeClass: '${scopeClass}', ${propsContent || ''} }${childrenPart || ''})`;\n            }\n          }\n        );\n        \n        // Also handle h(DOMContainer) without props\n        parsedTemplate = parsedTemplate.replace(\n          /h\\(DOMContainer\\s*\\)(?!\\s*\\()/g,\n          `h(DOMContainer, { _scopeClass: '${scopeClass}' })`\n        );\n      }\n      \n      // Escape style content for safe embedding in JavaScript string (using single quotes)\n      // We need to escape: backslashes, single quotes, and line breaks\n      const escapedStyleContent = processedStyleContent\n        .replace(/\\\\/g, '\\\\\\\\')  // Escape backslashes first\n        .replace(/'/g, \"\\\\'\")    // Escape single quotes\n        .replace(/\\n/g, '\\\\n')   // Escape newlines\n        .replace(/\\r/g, '\\\\r');  // Escape carriage returns\n\n      // Generate unique ID for style element based on file path\n      const styleId = `ce-style-${id.replace(/[^a-zA-Z0-9]/g, '-')}`;\n\n      // Generate CSS injection code if style content exists\n      // Use single quotes to avoid escaping issues with backticks\n      const styleInjectionCode = styleContent ? \n        '// Inject CSS styles into the document head\\n' +\n        `if (typeof document !== 'undefined' && !document.getElementById('${styleId}')) {\\n` +\n        '  const styleElement = document.createElement(\\'style\\');\\n' +\n        `  styleElement.id = '${styleId}';\\n` +\n        `  styleElement.textContent = '${escapedStyleContent}';\\n` +\n        '  document.head.appendChild(styleElement);\\n' +\n        '}\\n'\n        : '';\n      \n\n      // Generate the output\n      const output = String.raw`\n      ${importsCode}\n      import { useProps, useDefineProps } from ${isDev ? `'${DEV_SRC}'` : \"'canvasengine'\"}\n      ${styleInjectionCode}\n      export default function component($$props) {\n        const $props = useProps($$props)\n        const defineProps = useDefineProps($$props)\n        ${nonImportCode}\n        let $this = ${parsedTemplate}\n        return $this\n      }\n      `;\n\n      return {\n        code: output,\n        map: null,\n      };\n    },\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../index.ts"],"sourcesContent":["import { createFilter } from \"vite\";\nimport { parse } from \"acorn\";\nimport fs from \"fs\";\nimport pkg from \"peggy\";\nimport path from \"path\";\nimport * as ts from \"typescript\";\nimport { fileURLToPath } from 'url';\n\nconst { generate } = pkg;\n\nconst DEV_SRC = \"../../src\"\n\n/**\n * Generates a short hash (8 characters, letters only) from a string\n * \n * @param {string} str - The string to hash\n * @returns {string} - An 8-character hash containing only lowercase letters (a-z)\n */\nfunction generateHash(str: string): string {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    const char = str.charCodeAt(i);\n    hash = ((hash << 5) - hash) + char;\n    hash = hash & hash; // Convert to 32-bit integer\n  }\n  // Convert to positive number and map to letters only (a-z)\n  // Use modulo to map to 26 letters, then convert to character\n  const positiveHash = Math.abs(hash);\n  let result = '';\n  for (let i = 0; i < 8; i++) {\n    const letterIndex = (positiveHash + i * 31) % 26; // 31 is a prime to spread values\n    result += String.fromCharCode(97 + letterIndex); // 97 is 'a'\n  }\n  return result;\n}\n\n/**\n * Formats a syntax error message with visual pointer to the error location\n * \n * @param {string} template - The template content that failed to parse\n * @param {object} error - The error object with location information\n * @returns {string} - Formatted error message with a visual pointer\n * \n * @example\n * ```\n * const errorMessage = showErrorMessage(\"<Canvas>test(d)</Canvas>\", syntaxError);\n * // Returns a formatted error message with an arrow pointing to 'd'\n * ```\n */\nfunction showErrorMessage(template: string, error: any): string {\n  if (!error.location) {\n    return `Syntax error: ${error.message}`;\n  }\n\n  const lines = template.split('\\n');\n  const { line, column } = error.location.start;\n  const errorLine = lines[line - 1] || '';\n  \n  // Create a visual pointer with an arrow\n  const pointer = ' '.repeat(column - 1) + '^';\n  \n  return `Syntax error at line ${line}, column ${column}: ${error.message}\\n\\n` +\n         `${errorLine}\\n${pointer}\\n`;\n}\n\n/**\n * Scopes CSS selectors by prefixing them with a class selector\n * \n * This function prefixes all CSS rule selectors (not @rules) with a class\n * selector to scope the styles to a specific component instance.\n * \n * @param {string} css - The CSS content to scope\n * @param {string} scopeClass - The unique scope class to use (without the dot)\n * @returns {string} - The scoped CSS content\n * \n * @example\n * ```\n * const scoped = scopeCSS('.my-class { color: red; }', 'ce-scope-abc123');\n * // Returns: '.ce-scope-abc123 .my-class { color: red; }'\n * ```\n */\nfunction scopeCSS(css: string, scopeClass: string): string {\n  const scopeSelector = `.${scopeClass}`;\n  \n  // Process CSS by finding rule blocks while skipping @rules\n  let result = '';\n  let i = 0;\n  let depth = 0;\n  let inRule = false;\n  let selectorBuffer = '';\n  \n  while (i < css.length) {\n    const char = css[i];\n    \n    if (char === '@' && !inRule && selectorBuffer === '') {\n      // Found @rule - copy it as-is until matching closing brace\n      const atRuleStart = i;\n      i++; // Skip '@'\n      \n      // Find the opening brace\n      while (i < css.length && css[i] !== '{') {\n        i++;\n      }\n      \n      if (i < css.length) {\n        // Found opening brace, now find matching closing brace\n        depth = 1;\n        i++; // Skip '{'\n        \n        while (i < css.length && depth > 0) {\n          if (css[i] === '{') depth++;\n          else if (css[i] === '}') depth--;\n          i++;\n        }\n        \n        // Copy entire @rule as-is\n        result += css.substring(atRuleStart, i);\n      }\n      continue;\n    }\n    \n    if (char === '{' && !inRule) {\n      // Start of a rule block - scope the selector we just collected\n      const selectorText = selectorBuffer.trim();\n      \n      if (selectorText) {\n        // Split selectors by comma and scope each one\n        const scopedSelectors = selectorText\n          .split(',')\n          .map(sel => {\n            const trimmed = sel.trim();\n            return trimmed ? `${scopeSelector} ${trimmed}` : trimmed;\n          })\n          .join(', ');\n        \n        result += scopedSelectors;\n      }\n      result += ' {';\n      inRule = true;\n      depth = 1;\n      selectorBuffer = '';\n    } else if (char === '{' && inRule) {\n      // Nested brace\n      result += char;\n      depth++;\n    } else if (char === '}' && inRule) {\n      result += char;\n      depth--;\n      if (depth === 0) {\n        inRule = false;\n      }\n    } else if (!inRule) {\n      // Collecting selector\n      selectorBuffer += char;\n    } else {\n      // Inside rule block\n      result += char;\n      if (char === '{') depth++;\n    }\n    \n    i++;\n  }\n  \n  // Add any remaining selector (shouldn't happen in valid CSS, but handle it)\n  if (selectorBuffer.trim()) {\n    const scopedSelectors = selectorBuffer.trim()\n      .split(',')\n      .map(sel => {\n        const trimmed = sel.trim();\n        return trimmed ? `${scopeSelector} ${trimmed}` : trimmed;\n      })\n      .join(', ');\n    result += scopedSelectors;\n  }\n  \n  return result;\n}\n\n/**\n * Vite plugin to load shader files (.frag, .vert, .wgsl) as text strings\n * \n * This plugin allows importing shader files directly as string literals in your code.\n * It supports fragment shaders (.frag), vertex shaders (.vert), and WebGPU shaders (.wgsl).\n * The content is loaded as a raw string and can be used directly with graphics APIs.\n * \n * @returns {object} - Vite plugin configuration object\n * \n * @example\n * ```typescript\n * // In your vite.config.ts\n * import { shaderLoader } from './path/to/compiler'\n * \n * export default defineConfig({\n *   plugins: [shaderLoader()]\n * })\n * \n * // In your code\n * import fragmentShader from './shader.frag'\n * import vertexShader from './shader.vert'\n * import computeShader from './shader.wgsl'\n * \n * console.log(fragmentShader) // Raw shader code as string\n * ```\n */\nexport function shaderLoader() {\n  const filter = createFilter(/\\.(frag|vert|wgsl)$/);\n\n  return {\n    name: \"vite-plugin-shader-loader\",\n    transform(code: string, id: string) {\n      if (!filter(id)) return;\n\n      // Escape the shader code to be safely embedded in a JavaScript string\n      const escapedCode = code\n        .replace(/\\\\/g, '\\\\\\\\')  // Escape backslashes\n        .replace(/`/g, '\\\\`')    // Escape backticks\n        .replace(/\\$/g, '\\\\$');  // Escape dollar signs\n\n      // Return the shader content as a default export string\n      return {\n        code: `export default \\`${escapedCode}\\`;`,\n        map: null,\n      };\n    },\n  };\n}\n\nexport default function canvasengine() {\n  const filter = createFilter(\"**/*.ce\");\n  const useLegacyGrammar = process.env.CANVASENGINE_COMPILER_V1 === \"1\";\n\n  // Convert import.meta.url to a file path\n  const __filename = fileURLToPath(import.meta.url);\n  const __dirname = path.dirname(__filename);\n\n  const grammarFile = useLegacyGrammar ? \"grammar.pegjs\" : \"grammar2.pegjs\";\n  const grammar = fs.readFileSync(\n    path.join(__dirname, grammarFile),\n    \"utf8\"\n  );\n  const parser = generate(grammar);\n  const isDev = process.env.NODE_ENV === \"dev\";\n  const FLAG_COMMENT = \"/*--[TPL]--*/\";\n  let warnedAboutGrammar = false;\n\n  const PRIMITIVE_COMPONENTS = [\n    \"Canvas\",\n    \"Sprite\",\n    \"Text\",\n    \"Viewport\",\n    \"Graphics\",\n    \"Container\",\n    \"Navigation\",\n    \"ImageMap\",\n    \"NineSliceSprite\",\n    \"Rect\",\n    \"Circle\",\n    \"Ellipse\",\n    \"Triangle\",\n    \"TilingSprite\",\n    \"svg\",\n    \"Video\",\n    \"Mesh\",\n    \"Svg\",\n    \"DOMContainer\",\n    \"DOMElement\",\n    \"DOMSprite\",\n    \"Button\",\n    \"Joystick\"\n  ];\n\n  return {\n    name: \"vite-plugin-ce\",\n    transform(code: string, id: string) {\n      if (!filter(id)) return null;\n      if (!warnedAboutGrammar) {\n        warnedAboutGrammar = true;\n        const legacyNote = \"Set CANVASENGINE_COMPILER_V1=1 to compile with the legacy grammar (v1).\";\n        if (useLegacyGrammar) {\n          console.warn(`[canvasengine] Using legacy grammar v1. ${legacyNote}`);\n        } else {\n          console.warn(`[canvasengine] Breaking change: compiler grammar v2 is now the default. ${legacyNote}`);\n        }\n      }\n\n      // Extract the script content\n      const scriptMatch = code.match(/<script>([\\s\\S]*?)<\\/script>/);\n      let scriptContent = scriptMatch ? scriptMatch[1].trim() : \"\";\n      \n      // Extract the style tag with attributes and content\n      const styleTagMatch = code.match(/<style([^>]*)>([\\s\\S]*?)<\\/style>/);\n      let styleContent = \"\";\n      let isScoped = false;\n      \n      if (styleTagMatch) {\n        const styleAttributes = styleTagMatch[1].trim();\n        styleContent = styleTagMatch[2].trim();\n        \n        // Check if scoped attribute is present\n        isScoped = /scoped(?:\\s|>|$)/.test(styleAttributes);\n      }\n      \n      // Remove script and style tags from template before parsing\n      let template = code\n        .replace(/<script>[\\s\\S]*?<\\/script>/, \"\")\n        .replace(/<style[^>]*>[\\s\\S]*?<\\/style>/, \"\")\n        .replace(/^\\s+|\\s+$/g, '');\n\n      let parsedTemplate;\n      try {\n        parsedTemplate = parser.parse(template);\n      } catch (error) {\n        const errorMsg = showErrorMessage(template, error);\n        throw new Error(`Error parsing template in file ${id}:\\n${errorMsg}`);\n      }\n\n      // trick to avoid typescript remove imports in scriptContent\n      scriptContent += FLAG_COMMENT + parsedTemplate\n\n      let transpiledCode = ts.transpileModule(scriptContent, {\n        compilerOptions: {\n          module: ts.ModuleKind.Preserve,\n        },\n      }).outputText;\n\n      // remove code after /*---*/\n      transpiledCode = transpiledCode.split(FLAG_COMMENT)[0]\n\n      // Use Acorn to parse the script content\n      const parsed = parse(transpiledCode, {\n        sourceType: \"module\",\n        ecmaVersion: 2020,\n      });\n\n      // Extract imports\n      const imports = parsed.body.filter(\n        (node) => node.type === \"ImportDeclaration\"\n      );\n\n      // Extract non-import statements from scriptContent\n      const nonImportCode = parsed.body\n        .filter((node) => node.type !== \"ImportDeclaration\")\n        .map((node) => transpiledCode.slice(node.start, node.end))\n        .join(\"\\n\");\n\n      let importsCode = imports\n        .map((imp) => {\n          let importCode = transpiledCode.slice(imp.start, imp.end);\n          if (isDev && importCode.includes(\"from 'canvasengine'\")) {\n            importCode = importCode.replace(\n              \"from 'canvasengine'\",\n              `from '${DEV_SRC}'`\n            );\n          }\n          return importCode;\n        })\n        .join(\"\\n\");\n\n      // Define an array for required imports\n      const requiredImports = [\"h\", \"computed\", \"cond\", \"loop\"];\n\n      // Check for missing imports\n      const missingImports = requiredImports.filter(\n        (importName) =>\n          !imports.some(\n            (imp) =>\n              imp.specifiers &&\n              imp.specifiers.some(\n                (spec) =>\n                  spec.type === \"ImportSpecifier\" &&\n                  spec.imported && \n                  'name' in spec.imported &&\n                  spec.imported.name === importName\n              )\n          )\n      );\n\n      // Add missing imports\n      if (missingImports.length > 0) {\n        const additionalImportCode = `import { ${missingImports.join(\n          \", \"\n        )} } from ${isDev ? `'${DEV_SRC}'` : \"'canvasengine'\"};`;\n        importsCode = `${additionalImportCode}\\n${importsCode}`;\n      }\n\n      // Check for primitive components in parsedTemplate\n      const primitiveImports = PRIMITIVE_COMPONENTS.filter((component) =>\n        parsedTemplate.includes(`h(${component}`)\n      );\n\n      // Add missing imports for primitive components\n      primitiveImports.forEach((component) => {\n        const importStatement = `import { ${component} } from ${\n          isDev ? `'${DEV_SRC}'` : \"'canvasengine'\"\n        };`;\n        if (!importsCode.includes(importStatement)) {\n          importsCode = `${importStatement}\\n${importsCode}`;\n        }\n      });\n\n      // Process CSS: scope it if scoped attribute is present\n      let processedStyleContent = styleContent;\n      let scopeClass = '';\n      \n      if (isScoped && styleContent) {\n        // Generate short hash (8 characters) based on file path\n        const fileHash = generateHash(id);\n        scopeClass = fileHash;\n        processedStyleContent = scopeCSS(styleContent, scopeClass);\n        \n        // Add _scopeClass prop to all DOMContainer in the template\n        // Pattern: h(DOMContainer, { ... }) or h(DOMContainer) or h(DOMContainer, null, ...)\n        parsedTemplate = parsedTemplate.replace(\n          /h\\(DOMContainer\\s*,\\s*(\\{([^}]*)\\}|null)\\s*(,\\s*[^)]*)?\\)/g,\n          (match, propsPart, propsContent, childrenPart) => {\n            if (propsPart === 'null') {\n              // h(DOMContainer, null, ...) -> h(DOMContainer, { _scopeClass: '...' }, ...)\n              return `h(DOMContainer, { _scopeClass: '${scopeClass}' }${childrenPart || ''})`;\n            } else {\n              // h(DOMContainer, { ... }, ...) -> h(DOMContainer, { _scopeClass: '...', ... }, ...)\n              // Need to insert _scopeClass at the beginning of the props object\n              return `h(DOMContainer, { _scopeClass: '${scopeClass}', ${propsContent || ''} }${childrenPart || ''})`;\n            }\n          }\n        );\n        \n        // Also handle h(DOMContainer) without props\n        parsedTemplate = parsedTemplate.replace(\n          /h\\(DOMContainer\\s*\\)(?!\\s*\\()/g,\n          `h(DOMContainer, { _scopeClass: '${scopeClass}' })`\n        );\n      }\n      \n      // Escape style content for safe embedding in JavaScript string (using single quotes)\n      // We need to escape: backslashes, single quotes, and line breaks\n      const escapedStyleContent = processedStyleContent\n        .replace(/\\\\/g, '\\\\\\\\')  // Escape backslashes first\n        .replace(/'/g, \"\\\\'\")    // Escape single quotes\n        .replace(/\\n/g, '\\\\n')   // Escape newlines\n        .replace(/\\r/g, '\\\\r');  // Escape carriage returns\n\n      // Generate unique ID for style element based on file path\n      const styleId = `ce-style-${id.replace(/[^a-zA-Z0-9]/g, '-')}`;\n\n      // Generate CSS injection code if style content exists\n      // Use single quotes to avoid escaping issues with backticks\n      const styleInjectionCode = styleContent ? \n        '// Inject CSS styles into the document head\\n' +\n        `if (typeof document !== 'undefined' && !document.getElementById('${styleId}')) {\\n` +\n        '  const styleElement = document.createElement(\\'style\\');\\n' +\n        `  styleElement.id = '${styleId}';\\n` +\n        `  styleElement.textContent = '${escapedStyleContent}';\\n` +\n        '  document.head.appendChild(styleElement);\\n' +\n        '}\\n'\n        : '';\n      \n\n      // Generate the output\n      const output = String.raw`\n      ${importsCode}\n      import { useProps, useDefineProps } from ${isDev ? `'${DEV_SRC}'` : \"'canvasengine'\"}\n      ${styleInjectionCode}\n      export default function component($$props) {\n        const $props = useProps($$props)\n        const defineProps = useDefineProps($$props)\n        ${nonImportCode}\n        let $this = ${parsedTemplate}\n        return $this\n      }\n      `;\n\n      return {\n        code: output,\n        map: null,\n      };\n    },\n  };\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvasengine/compiler",
-  "version": "2.0.0-beta.47",
+  "version": "2.0.0-beta.49",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,7 +8,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup && cp grammar.pegjs ../../docs/public/grammar.pegjs",
+    "build": "tsup && cp grammar2.pegjs ../../docs/public/grammar.pegjs",
     "dev": "tsup --watch"
   },
   "type": "module",