@mkdevofficial/liquid-compiler 0.0.0-stage → 0.1.0

package/src/css.js

@@ -0,0 +1,151 @@
+/**
+ * Scoped CSS Transformer for Liquid components.
+ * Appends [data-l-xxxx] to component selectors, preserving :global() and @global {}.
+ */
+
+export function transformScopedCSS(css, scopeAttr) {
+  if (!css || !css.trim()) return '';
+
+  let output = '';
+  let i = 0;
+  const len = css.length;
+
+  while (i < len) {
+    // Skip whitespace
+    while (i < len && /\s/.test(css[i])) {
+      output += css[i];
+      i++;
+    }
+    if (i >= len) break;
+
+    // Check comments
+    if (css[i] === '/' && css[i + 1] === '*') {
+      const endComment = css.indexOf('*/', i + 2);
+      if (endComment === -1) {
+        output += css.slice(i);
+        break;
+      }
+      output += css.slice(i, endComment + 2);
+      i = endComment + 2;
+      continue;
+    }
+
+    // Check for @global { ... }
+    if (css.slice(i).startsWith('@global')) {
+      const openBrace = css.indexOf('{', i);
+      if (openBrace !== -1) {
+        const matchingClose = findMatchingBrace(css, openBrace);
+        if (matchingClose !== -1) {
+          const innerCss = css.slice(openBrace + 1, matchingClose);
+          output += innerCss;
+          i = matchingClose + 1;
+          continue;
+        }
+      }
+    }
+
+    // Check for @keyframes or other at-rules
+    if (css[i] === '@') {
+      const atRuleMatch = css.slice(i).match(/^@([a-zA-Z0-9_-]+)/);
+      if (atRuleMatch) {
+        const atRuleName = atRuleMatch[1].toLowerCase();
+        const openBrace = css.indexOf('{', i);
+        if (openBrace !== -1) {
+          const header = css.slice(i, openBrace + 1);
+          const closeBrace = findMatchingBrace(css, openBrace);
+          if (closeBrace !== -1) {
+            const body = css.slice(openBrace + 1, closeBrace);
+            if (atRuleName === 'media' || atRuleName === 'supports') {
+              output += header + transformScopedCSS(body, scopeAttr) + '}';
+            } else {
+              // Keyframes, font-face, etc. output untouched
+              output += header + body + '}';
+            }
+            i = closeBrace + 1;
+            continue;
+          }
+        }
+      }
+    }
+
+    // Read selector until '{'
+    const openBrace = css.indexOf('{', i);
+    if (openBrace === -1) {
+      output += css.slice(i);
+      break;
+    }
+
+    const rawSelector = css.slice(i, openBrace).trim();
+    const closeBrace = findMatchingBrace(css, openBrace);
+    if (closeBrace === -1) {
+      output += css.slice(i);
+      break;
+    }
+
+    const decls = css.slice(openBrace, closeBrace + 1);
+    const scopedSelector = scopeSelectorList(rawSelector, scopeAttr);
+    output += scopedSelector + ' ' + decls + '\n';
+    i = closeBrace + 1;
+  }
+
+  return output.trim();
+}
+
+function findMatchingBrace(str, openIdx) {
+  let depth = 1;
+  for (let j = openIdx + 1; j < str.length; j++) {
+    if (str[j] === '{') depth++;
+    else if (str[j] === '}') {
+      depth--;
+      if (depth === 0) return j;
+    }
+  }
+  return -1;
+}
+
+/**
+ * Scope a comma-separated selector list: e.g. "h1, p.lead, :global(.nav)"
+ */
+export function scopeSelectorList(selectorList, scopeAttr) {
+  const parts = selectorList.split(',');
+  const attrSelector = `[${scopeAttr}]`;
+
+  return parts
+    .map(sel => sel.trim())
+    .filter(Boolean)
+    .map(sel => {
+      // Check if :global(innerSelector)
+      if (sel.includes(':global(')) {
+        return sel.replace(/:global\((.*?)\)/g, '$1');
+      }
+
+      // If selector is :root, html, or body, keep as is
+      if (/^(:root|html|body)$/.test(sel)) {
+        return sel;
+      }
+
+      // Split by combinators: spaces, >, +, ~
+      const tokens = sel.split(/(\s*[>+~]\s*|\s+)/);
+      const scopedTokens = tokens.map(token => {
+        const trimmed = token.trim();
+        // If it's a combinator, leave as is
+        if (!trimmed || trimmed === '>' || trimmed === '+' || trimmed === '~') {
+          return token;
+        }
+
+        // Insert [data-l-xxxx] before pseudo-classes or pseudo-elements
+        const pseudoMatch = trimmed.match(/::?[a-zA-Z0-9_-]+/);
+        if (pseudoMatch) {
+          const pseudoIdx = pseudoMatch.index;
+          const base = trimmed.slice(0, pseudoIdx);
+          const rest = trimmed.slice(pseudoIdx);
+          return (base ? `${base}${attrSelector}` : attrSelector) + rest;
+        }
+
+        return `${trimmed}${attrSelector}`;
+      });
+
+      return scopedTokens.join('');
+    })
+    .join(', ');
+}

package/src/errors.js

@@ -0,0 +1,52 @@
+/**
+ * Liquid Syntax Error with line/column/caret excerpts.
+ */
+export class LiquidSyntaxError extends Error {
+  constructor(message, { file = 'anonymous.liq', line = 1, column = 1, source = '' } = {}) {
+    const formatted = formatExcerpt({ message, file, line, column, source });
+    super(formatted);
+    this.name = 'LiquidSyntaxError';
+    this.rawMessage = message;
+    this.file = file;
+    this.line = line;
+    this.column = column;
+    this.source = source;
+  }
+}
+
+export function formatExcerpt({ message, file = 'anonymous.liq', line = 1, column = 1, source = '' }) {
+  const lines = source.split(/\r?\n/);
+  const targetLineIdx = line - 1;
+
+  const startIdx = Math.max(0, targetLineIdx - 2);
+  const endIdx = Math.min(lines.length - 1, targetLineIdx + 2);
+
+  const maxLineNumWidth = String(endIdx + 1).length;
+
+  const header = `\n🫟 Liquid Syntax Error: ${message}\n  --> ${file}:${line}:${column}\n`;
+  const gutterPad = ' '.repeat(maxLineNumWidth);
+
+  const excerptLines = [];
+  excerptLines.push(`${gutterPad} |`);
+
+  for (let i = startIdx; i <= endIdx; i++) {
+    const lineNum = String(i + 1).padStart(maxLineNumWidth, ' ');
+    const rawContent = lines[i] ?? '';
+    // Display tabs visibly if present
+    const displayContent = rawContent.replace(/\t/g, '→   ');
+    excerptLines.push(`${lineNum} | ${displayContent}`);
+
+    if (i === targetLineIdx) {
+      // Calculate caret position considering expanded tabs
+      let caretCol = 0;
+      for (let c = 0; c < Math.min(column - 1, rawContent.length); c++) {
+        caretCol += rawContent[c] === '\t' ? 4 : 1;
+      }
+      const caret = ' '.repeat(caretCol) + '^';
+      excerptLines.push(`${gutterPad} | ${caret}`);
+    }
+  }
+
+  excerptLines.push(`${gutterPad} |`);
+  return header + excerptLines.join('\n') + '\n';
+}

package/src/index.js

@@ -0,0 +1,53 @@
+import { tokenize } from './tokenizer.js';
+import { parse } from './parser.js';
+import { analyze } from './analyzer.js';
+import { transformScopedCSS } from './css.js';
+import { generate } from './codegen.js';
+import { LiquidSyntaxError, formatExcerpt } from './errors.js';
+
+export { tokenize } from './tokenizer.js';
+export { parse } from './parser.js';
+export { analyze } from './analyzer.js';
+export { transformScopedCSS } from './css.js';
+export { generate } from './codegen.js';
+export { LiquidSyntaxError, formatExcerpt } from './errors.js';
+
+/**
+ * Standalone Liquid compiler API.
+ * Compiles a .liq source string into readable ES module JS, scoped CSS, source map, and warnings.
+ *
+ * @param {string} source
+ * @param {object} [options={}]
+ * @returns {{ code: string, map: object, css: string, warnings: Array<object>, ast: object }}
+ */
+export function compile(source, options = {}) {
+  const file = options.file || 'Component.liq';
+
+  // 1. Tokenize
+  const tokens = tokenize(source, { file, ...options });
+
+  // 2. Parse
+  const ast = parse(tokens, { file, source, ...options });
+
+  // 3. Analyze
+  const analysis = analyze(ast, { file, ...options });
+
+  // 4. Scoped CSS
+  const scopedCSS = transformScopedCSS(ast.styles.content, analysis.scopeAttr);
+
+  // 5. Code generation
+  const genResult = generate(ast, analysis, { file, ...options });
+
+  ast.scopeId = analysis.scopeId;
+  ast.scopeAttr = analysis.scopeAttr;
+
+  return {
+    code: genResult.code,
+    map: genResult.map,
+    css: scopedCSS,
+    warnings: analysis.warnings,
+    ast,
+    scopeId: analysis.scopeId,
+    scopeAttr: analysis.scopeAttr
+  };
+}

package/src/parser.js

@@ -0,0 +1,428 @@
+import { TokenType } from './tokenizer.js';
+import { LiquidSyntaxError } from './errors.js';
+
+/**
+ * Parse an interpolated string into raw text chunks and JS expressions.
+ * e.g. "Hello, {name}!" -> [{ type: 'raw', value: 'Hello, ' }, { type: 'expr', value: 'name' }, { type: 'raw', value: '!' }]
+ */
+export function parseInterpolatedText(str) {
+  const parts = [];
+  let i = 0;
+  const len = str.length;
+  let currentRaw = '';
+
+  while (i < len) {
+    if (str[i] === '\\' && str[i + 1] === '{') {
+      currentRaw += '{';
+      i += 2;
+      continue;
+    }
+
+    if (str[i] === '{') {
+      if (currentRaw) {
+        parts.push({ type: 'raw', value: currentRaw });
+        currentRaw = '';
+      }
+      i++; // skip '{'
+      let depth = 1;
+      let expr = '';
+      let inQuote = null;
+      let escaped = false;
+
+      while (i < len && depth > 0) {
+        const c = str[i];
+        if (inQuote) {
+          expr += c;
+          if (escaped) {
+            escaped = false;
+          } else if (c === '\\') {
+            escaped = true;
+          } else if (c === inQuote) {
+            inQuote = null;
+          }
+        } else {
+          if (c === '"' || c === "'" || c === '`') {
+            inQuote = c;
+            expr += c;
+          } else if (c === '{') {
+            depth++;
+            expr += c;
+          } else if (c === '}') {
+            depth--;
+            if (depth > 0) expr += c;
+          } else {
+            expr += c;
+          }
+        }
+        i++;
+      }
+      parts.push({ type: 'expr', value: expr.trim() });
+    } else {
+      currentRaw += str[i];
+      i++;
+    }
+  }
+
+  if (currentRaw) {
+    parts.push({ type: 'raw', value: currentRaw });
+  }
+
+  return parts;
+}
+
+/**
+ * Parse an 'each' statement:
+ * "items as item (item.id)" -> { collection: "items", item: "item", index: null, key: "item.id" }
+ * "items as item, idx (item.id)" -> { collection: "items", item: "item", index: "idx", key: "item.id" }
+ */
+export function parseEachArgs(argsString, loc, file, source) {
+  let trimmed = argsString.trim();
+
+  // Strip wrapping outer parentheses if developer wrapped the entire each statement in ( ... )
+  if (trimmed.startsWith('(') && trimmed.endsWith(')')) {
+    let depth = 0;
+    let closedEarly = false;
+    for (let i = 0; i < trimmed.length - 1; i++) {
+      if (trimmed[i] === '(') depth++;
+      else if (trimmed[i] === ')') depth--;
+      if (depth === 0) {
+        closedEarly = true;
+        break;
+      }
+    }
+    if (!closedEarly) {
+      trimmed = trimmed.slice(1, -1).trim();
+    }
+  }
+
+  // Match: <collection> as <item> [, <index>] [ (<key>) ]
+  const match = trimmed.match(/^(.+?)\s+as\s+([a-zA-Z_$][a-zA-Z0-9_$]*)(?:\s*,\s*([a-zA-Z_$][a-zA-Z0-9_$]*))?(?:\s*\((.+)\))?$/);
+
+  if (!match) {
+    throw new LiquidSyntaxError(
+      `Malformed 'each' statement: '${argsString}'. Expected 'each <collection> as <item> [, <index>] [(<key>)]'`,
+      { file, line: loc.line, column: loc.column, source }
+    );
+  }
+
+  const collection = match[1].trim();
+  const item = match[2].trim();
+  const index = match[3] ? match[3].trim() : null;
+  const key = match[4] ? match[4].trim() : null;
+
+  return { collection, item, index, key };
+}
+
+/**
+ * Parse a flat list of tokens into a Program AST.
+ */
+export function parse(tokens, options = {}) {
+  const file = options.file || 'component.liq';
+  const source = options.source || '';
+
+  let logic = { content: '', line: 1, column: 1 };
+  let styles = { content: '', line: 1, column: 1 };
+  const template = [];
+
+  let pos = 0;
+  const total = tokens.length;
+
+  function peek() {
+    return tokens[pos] || { type: TokenType.EOF };
+  }
+
+  function advance() {
+    return tokens[pos++];
+  }
+
+  // First pass: extract sections or parse UI
+  while (pos < total) {
+    const token = peek();
+
+    if (token.type === TokenType.EOF) {
+      break;
+    }
+
+    if (token.type === TokenType.SECTION) {
+      advance();
+      if (token.name === 'logic') {
+        logic = { content: token.content, line: token.line, column: token.column };
+      } else if (token.name === 'style') {
+        styles = { content: token.content, line: token.line, column: token.column };
+      }
+      continue;
+    }
+
+    // Must be UI tokens
+    const node = parseUINode();
+    if (node) {
+      template.push(node);
+    }
+  }
+
+  function parseUINode() {
+    const token = peek();
+
+    if (token.type === TokenType.EOF || token.type === TokenType.DEDENT) {
+      return null;
+    }
+
+    if (token.type === TokenType.TAG) {
+      return parseElement();
+    }
+
+    if (token.type === TokenType.KEYWORD) {
+      return parseKeyword();
+    }
+
+    if (token.type === TokenType.TEXT) {
+      advance();
+      return {
+        type: 'Text',
+        parts: parseInterpolatedText(token.value),
+        loc: { line: token.line, column: token.column }
+      };
+    }
+
+    // Skip stray tokens
+    advance();
+    return null;
+  }
+
+  function parseElement() {
+    const tagToken = advance();
+    const attributes = [];
+    const events = [];
+    const bindings = [];
+    const children = [];
+
+    // Collect any attributes/directives that belong to this element
+    while (pos < total) {
+      const next = peek();
+      if (next.type === TokenType.ATTR) {
+        advance();
+        attributes.push({
+          name: next.name,
+          value: next.value,
+          isDynamic: next.isDynamic,
+          isBoolean: next.isBoolean
+        });
+      } else if (next.type === TokenType.DIRECTIVE_EVENT) {
+        advance();
+        events.push({
+          name: next.name,
+          modifiers: next.modifiers,
+          handler: next.handler
+        });
+      } else if (next.type === TokenType.DIRECTIVE_BIND) {
+        advance();
+        bindings.push({
+          prop: next.prop,
+          target: next.target
+        });
+      } else if (next.type === TokenType.TEXT && next.isInline) {
+        advance();
+        children.push({
+          type: 'Text',
+          parts: parseInterpolatedText(next.value),
+          loc: { line: next.line, column: next.column }
+        });
+        break; // inline text is at the end of the line
+      } else {
+        break;
+      }
+    }
+
+    // Check for child elements indented under this tag
+    if (peek().type === TokenType.INDENT) {
+      advance(); // consume INDENT
+      while (pos < total && peek().type !== TokenType.DEDENT && peek().type !== TokenType.EOF) {
+        const child = parseUINode();
+        if (child) children.push(child);
+      }
+      if (peek().type === TokenType.DEDENT) {
+        advance(); // consume DEDENT
+      }
+    }
+
+    return {
+      type: 'Element',
+      tag: tagToken.name,
+      isComponent: tagToken.isComponent,
+      id: tagToken.id,
+      classes: tagToken.classes,
+      attributes,
+      events,
+      bindings,
+      children,
+      loc: { line: tagToken.line, column: tagToken.column }
+    };
+  }
+
+  function parseKeyword() {
+    const kwToken = advance();
+    const kw = kwToken.keyword;
+    const loc = { line: kwToken.line, column: kwToken.column };
+
+    if (kw === 'if') {
+      const test = kwToken.args.trim();
+      const consequent = [];
+      let alternate = null;
+
+      if (peek().type === TokenType.INDENT) {
+        advance(); // consume INDENT
+        while (pos < total && peek().type !== TokenType.DEDENT && peek().type !== TokenType.EOF) {
+          const child = parseUINode();
+          if (child) consequent.push(child);
+        }
+        if (peek().type === TokenType.DEDENT) {
+          advance(); // consume DEDENT
+        }
+      }
+
+      // Check for elseif / else siblings
+      if (peek().type === TokenType.KEYWORD) {
+        const nextKw = peek().keyword;
+        if (nextKw === 'elseif') {
+          alternate = parseKeyword();
+        } else if (nextKw === 'else') {
+          advance(); // consume 'else'
+          const elseBody = [];
+          if (peek().type === TokenType.INDENT) {
+            advance();
+            while (pos < total && peek().type !== TokenType.DEDENT && peek().type !== TokenType.EOF) {
+              const child = parseUINode();
+              if (child) elseBody.push(child);
+            }
+            if (peek().type === TokenType.DEDENT) {
+              advance();
+            }
+          }
+          alternate = elseBody;
+        }
+      }
+
+      return {
+        type: 'IfBlock',
+        test,
+        consequent,
+        alternate,
+        loc
+      };
+    }
+
+    if (kw === 'elseif') {
+      // Used internally when chaining from `if`
+      const test = kwToken.args.trim();
+      const consequent = [];
+      let alternate = null;
+
+      if (peek().type === TokenType.INDENT) {
+        advance();
+        while (pos < total && peek().type !== TokenType.DEDENT && peek().type !== TokenType.EOF) {
+          const child = parseUINode();
+          if (child) consequent.push(child);
+        }
+        if (peek().type === TokenType.DEDENT) {
+          advance();
+        }
+      }
+
+      if (peek().type === TokenType.KEYWORD) {
+        const nextKw = peek().keyword;
+        if (nextKw === 'elseif') {
+          alternate = parseKeyword();
+        } else if (nextKw === 'else') {
+          advance();
+          const elseBody = [];
+          if (peek().type === TokenType.INDENT) {
+            advance();
+            while (pos < total && peek().type !== TokenType.DEDENT && peek().type !== TokenType.EOF) {
+              const child = parseUINode();
+              if (child) elseBody.push(child);
+            }
+            if (peek().type === TokenType.DEDENT) {
+              advance();
+            }
+          }
+          alternate = elseBody;
+        }
+      }
+
+      return {
+        type: 'IfBlock',
+        test,
+        consequent,
+        alternate,
+        loc
+      };
+    }
+
+    if (kw === 'each') {
+      const parsed = parseEachArgs(kwToken.args, loc, file, source);
+      const children = [];
+
+      if (peek().type === TokenType.INDENT) {
+        advance();
+        while (pos < total && peek().type !== TokenType.DEDENT && peek().type !== TokenType.EOF) {
+          const child = parseUINode();
+          if (child) children.push(child);
+        }
+        if (peek().type === TokenType.DEDENT) {
+          advance();
+        }
+      }
+
+      return {
+        type: 'EachBlock',
+        collection: parsed.collection,
+        item: parsed.item,
+        index: parsed.index,
+        key: parsed.key,
+        children,
+        loc
+      };
+    }
+
+    if (kw === 'slot') {
+      let name = null;
+      if (kwToken.args) {
+        const nameMatch = kwToken.args.match(/name=["']?([a-zA-Z0-9_-]+)["']?/);
+        if (nameMatch) {
+          name = nameMatch[1];
+        }
+      }
+      const fallback = [];
+
+      if (peek().type === TokenType.INDENT) {
+        advance();
+        while (pos < total && peek().type !== TokenType.DEDENT && peek().type !== TokenType.EOF) {
+          const child = parseUINode();
+          if (child) fallback.push(child);
+        }
+        if (peek().type === TokenType.DEDENT) {
+          advance();
+        }
+      }
+
+      return {
+        type: 'Slot',
+        name,
+        fallback,
+        loc
+      };
+    }
+
+    throw new LiquidSyntaxError(
+      `Unexpected keyword '${kw}' outside supported structure.`,
+      { file, line: loc.line, column: loc.column, source }
+    );
+  }
+
+  return {
+    type: 'Program',
+    logic,
+    styles,
+    template
+  };
+}