@lithent/lithent-template-parser 0.1.0 → 0.1.1

package/src/codegen/createElement.ts

@@ -11,6 +11,7 @@ import {
 import { tokenize } from '../parser/lexer';
 import { parse } from '../parser/parser';
 import { getConditionalGroup, getDirective, transform } from '../transform';
+import { scanTemplates } from '../docPipe/scan';
 
 /**
  * Generate JavaScript code from AST
@@ -86,12 +87,6 @@ function generateElement(
   node: ElementNode,
   options: Required<GenerateOptions>
 ): string {
-  // Check if this element is part of a conditional group
-  const conditionalGroup = getConditionalGroup(node);
-  if (conditionalGroup) {
-    return generateConditionalGroup(conditionalGroup, options);
-  }
-
   // Check if this element has l-for directive
   const forDirective = node.directives.find(
     d => d.type === NodeType.DIRECTIVE_FOR
@@ -101,7 +96,11 @@ function generateElement(
     return generateForLoop(node, forDirective, options);
   }
 
-  // Normal element
+  const conditionalGroup = getConditionalGroup(node);
+  if (conditionalGroup) {
+    return generateConditionalGroup(conditionalGroup, options);
+  }
+
   return generateNormalElement(node, options);
 }
 
@@ -166,7 +165,10 @@ function generateProps(
   }
 
   const props = node.attributes.map(attr => {
-    const key = attr.name;
+    const key =
+      /^[A-Za-z_$][\w$]*$/.test(attr.name) && attr.name !== '__proto__'
+        ? attr.name
+        : `[${stringLiteral(attr.name)}]`;
     let value: string;
 
     if (attr.value === null) {
@@ -174,10 +176,12 @@ function generateProps(
       value = 'true';
     } else if (typeof attr.value === 'string') {
       // Static string value
-      value = `'${attr.value.replace(/'/g, "\\'")}'`;
+      value = stringLiteral(attr.value);
     } else {
       // Dynamic expression
-      value = transformExpression(attr.value.expression, options);
+      value = expressionCode(
+        transformExpression(attr.value.expression, options)
+      );
     }
 
     return `${key}: ${value}`;
@@ -190,13 +194,7 @@ function generateProps(
  * Generate code for text node
  */
 function generateText(node: TextNode): string {
-  // Escape single quotes in text
-  const escaped = node.content
-    .replace(/\\/g, '\\\\')
-    .replace(/\r/g, '\\r')
-    .replace(/\n/g, '\\n')
-    .replace(/'/g, "\\'");
-  return `'${escaped}'`;
+  return stringLiteral(node.content);
 }
 
 /**
@@ -206,7 +204,7 @@ function generateInterpolation(
   node: InterpolationNode,
   options: Required<GenerateOptions>
 ): string {
-  return transformExpression(node.expression, options);
+  return expressionCode(transformExpression(node.expression, options));
 }
 
 /**
@@ -218,6 +216,7 @@ function generateForLoop(
   options: Required<GenerateOptions>
 ): string {
   const { item, index, list } = directive;
+  const listCode = transformExpression(list, options);
 
   // Generate the element code (without the for directive)
   const elementWithoutFor: ElementNode = {
@@ -225,13 +224,25 @@ function generateForLoop(
     directives: node.directives.filter(d => d.type !== NodeType.DIRECTIVE_FOR),
   };
 
-  const elementCode = generateNormalElement(elementWithoutFor, options);
+  const group = getConditionalGroup(node);
+  if (group) {
+    (elementWithoutFor as any).__conditionalGroup = {
+      ...group,
+      if: {
+        ...group.if,
+        directives: group.if.directives.filter(
+          d => d.type !== NodeType.DIRECTIVE_FOR
+        ),
+      },
+    };
+  }
+  const elementCode = generateElement(elementWithoutFor, options);
 
   // Generate map function
   if (index) {
-    return `(${list}).map((${item}, ${index}) => ${elementCode})`;
+    return `(${listCode}).map((${item}, ${index}) => ${elementCode})`;
   } else {
-    return `(${list}).map(${item} => ${elementCode})`;
+    return `(${listCode}).map(${item} => ${elementCode})`;
   }
 }
 
@@ -255,7 +266,8 @@ function generateConditionalGroup(
     ),
   };
 
-  let code = `(${ifDirective.condition}) ? ${generateNormalElement(ifElementWithoutDirective, options)}`;
+  delete (ifElementWithoutDirective as any).__conditionalGroup;
+  let code = `(${transformExpression(ifDirective.condition, options)}) ? ${generateElement(ifElementWithoutDirective, options)}`;
 
   // Add else-if conditions
   for (const elseIfNode of group.elseIfs || []) {
@@ -272,7 +284,7 @@ function generateConditionalGroup(
       ),
     };
 
-    code += ` : (${elseIfDirective.condition}) ? ${generateNormalElement(elseIfElementWithoutDirective, options)}`;
+    code += ` : (${transformExpression(elseIfDirective.condition, options)}) ? ${generateElement(elseIfElementWithoutDirective, options)}`;
   }
 
   // Add else condition
@@ -284,7 +296,7 @@ function generateConditionalGroup(
       ),
     };
 
-    code += ` : ${generateNormalElement(elseElementWithoutDirective, options)}`;
+    code += ` : ${generateElement(elseElementWithoutDirective, options)}`;
   } else {
     code += ' : null';
   }
@@ -298,317 +310,21 @@ export function formatCode(code: string): string {
   return code;
 }
 
-interface TemplateMatch {
-  start: number;
-  end: number;
-  snippet: string;
+function stringLiteral(value: string): string {
+  return `'${value
+    .replace(/\\/g, '\\\\')
+    .replace(/'/g, "\\'")
+    .replace(/\r/g, '\\r')
+    .replace(/\n/g, '\\n')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029')}'`;
 }
 
-const isAlphaNumeric = (code: number): boolean => {
-  return (
-    (code >= 48 && code <= 57) || // 0-9
-    (code >= 65 && code <= 90) || // A-Z
-    (code >= 97 && code <= 122) || // a-z
-    code === 95 || // _
-    code === 36 // $
-  );
-};
-
-const shouldAttemptTemplate = (source: string, index: number): boolean => {
-  if (source[index] !== '<') {
-    return false;
-  }
-
-  const next = source.charCodeAt(index + 1);
-  if (Number.isNaN(next)) {
-    return false;
-  }
-
-  const isValidNext =
-    next === 47 || // /
-    next === 62 || // >
-    next === 33 || // !
-    isAlphaNumeric(next);
-
-  if (!isValidNext) {
-    return false;
-  }
-
-  let i = index - 1;
-  while (i >= 0) {
-    const code = source.charCodeAt(i);
-    if (code === 32 || code === 9 || code === 10 || code === 13) {
-      i--;
-      continue;
-    }
-
-    if (isAlphaNumeric(code)) {
-      return false;
-    }
-
-    break;
-  }
-
-  return true;
-};
-
-const skipQuoted = (source: string, index: number, quote: string): number => {
-  let i = index + 1;
-  while (i < source.length) {
-    const ch = source[i];
-    if (ch === '\\') {
-      i += 2;
-      continue;
-    }
-    if (ch === quote) {
-      return i + 1;
-    }
-    i++;
-  }
-  return source.length;
-};
-
-const skipTemplateLiteral = (source: string, index: number): number => {
-  let i = index + 1;
-  while (i < source.length) {
-    const ch = source[i];
-    if (ch === '\\') {
-      i += 2;
-      continue;
-    }
-    if (ch === '`') {
-      return i + 1;
-    }
-    if (ch === '$' && source[i + 1] === '{') {
-      i = skipJsExpression(source, i + 2);
-      continue;
-    }
-    i++;
-  }
-  return source.length;
-};
-
-const skipLineComment = (source: string, index: number): number => {
-  let i = index;
-  while (i < source.length && source[i] !== '\\n') {
-    i++;
-  }
-  return i;
-};
-
-const skipBlockComment = (source: string, index: number): number => {
-  const end = source.indexOf('*/', index);
-  return end === -1 ? source.length : end + 2;
-};
-
-const skipHtmlComment = (source: string, index: number): number => {
-  const end = source.indexOf('-->', index);
-  return end === -1 ? source.length : end + 3;
-};
-
-const skipJsExpression = (source: string, index: number): number => {
-  let depth = 1;
-  let i = index;
-
-  while (i < source.length) {
-    const ch = source[i];
-    if (ch === '\\') {
-      i += 2;
-      continue;
-    }
-    if (ch === "'" || ch === '"') {
-      i = skipQuoted(source, i, ch);
-      continue;
-    }
-    if (ch === '`') {
-      i = skipTemplateLiteral(source, i);
-      continue;
-    }
-    if (ch === '/' && source[i + 1] === '*') {
-      i = skipBlockComment(source, i + 2);
-      continue;
-    }
-    if (ch === '/' && source[i + 1] === '/') {
-      i = skipLineComment(source, i + 2);
-      continue;
-    }
-    if (ch === '{') {
-      depth++;
-      i++;
-      continue;
-    }
-    if (ch === '}') {
-      depth--;
-      i++;
-      if (depth === 0) {
-        return i;
-      }
-      continue;
-    }
-    i++;
-  }
-
-  return source.length;
-};
-
-interface SkipTagResult {
-  position: number;
-  selfClosing: boolean;
+function expressionCode(expression: string): string {
+  // Preserve expression boundaries when inserting into arguments or properties.
+  return /^[A-Za-z_$][\w$]*$/.test(expression) ? expression : `(${expression})`;
 }
 
-const skipTag = (
-  source: string,
-  index: number,
-  closing: boolean
-): SkipTagResult | null => {
-  let i = index;
-  while (i < source.length) {
-    const ch = source[i];
-    if (ch === "'" || ch === '"') {
-      i = skipQuoted(source, i, ch);
-      continue;
-    }
-    if (ch === '`') {
-      i = skipTemplateLiteral(source, i);
-      continue;
-    }
-    if (ch === '{') {
-      i = skipJsExpression(source, i + 1);
-      continue;
-    }
-    if (ch === '/' && source[i + 1] === '*') {
-      i = skipBlockComment(source, i + 2);
-      continue;
-    }
-    if (ch === '/' && source[i + 1] === '/') {
-      i = skipLineComment(source, i + 2);
-      continue;
-    }
-    if (ch === '>') {
-      const selfClosing = !closing && source[i - 1] === '/';
-      return { position: i + 1, selfClosing };
-    }
-    i++;
-  }
-  return null;
-};
-
-const extractTemplate = (
-  source: string,
-  start: number
-): TemplateMatch | null => {
-  const len = source.length;
-  let pos = start;
-  let depth = 0;
-
-  while (pos < len) {
-    const ch = source[pos];
-
-    if (ch === "'" || ch === '"') {
-      pos = skipQuoted(source, pos, ch);
-      continue;
-    }
-    if (ch === '`') {
-      pos = skipTemplateLiteral(source, pos);
-      continue;
-    }
-    if (ch === '/' && source[pos + 1] === '*') {
-      pos = skipBlockComment(source, pos + 2);
-      continue;
-    }
-    if (ch === '/' && source[pos + 1] === '/') {
-      pos = skipLineComment(source, pos + 2);
-      continue;
-    }
-
-    if (ch === '<') {
-      if (source.startsWith('<!--', pos)) {
-        pos = skipHtmlComment(source, pos + 4);
-        continue;
-      }
-
-      if (source[pos + 1] === '/') {
-        depth--;
-        const res = skipTag(source, pos + 2, true);
-        if (!res) {
-          return null;
-        }
-        pos = res.position;
-        if (depth === 0) {
-          return {
-            start,
-            end: pos,
-            snippet: source.slice(start, pos),
-          };
-        }
-        continue;
-      } else {
-        depth++;
-        const res = skipTag(source, pos + 1, false);
-        if (!res) {
-          return null;
-        }
-        pos = res.position;
-        if (res.selfClosing) {
-          depth--;
-          if (depth === 0) {
-            return {
-              start,
-              end: pos,
-              snippet: source.slice(start, pos),
-            };
-          }
-        }
-        continue;
-      }
-    }
-
-    pos++;
-  }
-
-  return null;
-};
-
-const scanTemplates = (code: string): TemplateMatch[] => {
-  const matches: TemplateMatch[] = [];
-  const len = code.length;
-  let index = 0;
-
-  while (index < len) {
-    const ch = code[index];
-
-    if (ch === "'" || ch === '"') {
-      index = skipQuoted(code, index, ch);
-      continue;
-    }
-    if (ch === '`') {
-      index = skipTemplateLiteral(code, index);
-      continue;
-    }
-    if (ch === '/' && code[index + 1] === '*') {
-      index = skipBlockComment(code, index + 2);
-      continue;
-    }
-    if (ch === '/' && code[index + 1] === '/') {
-      index = skipLineComment(code, index + 2);
-      continue;
-    }
-
-    if (ch === '<' && shouldAttemptTemplate(code, index)) {
-      const match = extractTemplate(code, index);
-      if (match) {
-        matches.push(match);
-        index = match.end;
-        continue;
-      }
-    }
-
-    index++;
-  }
-
-  return matches;
-};
-
 function transformExpression(
   expression: string,
   options: Required<GenerateOptions>
@@ -655,7 +371,7 @@ function compileEmbeddedTemplate(
   options: Required<GenerateOptions>
 ): string {
   const tokens = tokenize(templateSource);
-  const ast = parse(tokens);
+  const ast = parse(tokens, true);
   const transformedAst = transform(ast);
   return generate(transformedAst, options);
 }

package/src/compiler.ts

@@ -15,7 +15,7 @@ export function compile(
     const tokens = tokenize(template);
 
     // 2. Parse
-    const ast = parse(tokens);
+    const ast = parse(tokens, true);
 
     // 3. Transform
     const transformedAst = transform(ast, options?.transform);