driftjs-compiler 0.0.0

package/src/transformer.ts

@@ -0,0 +1,288 @@
+import * as acorn from 'acorn';
+import type {
+  ProgramNode,
+  TemplateChildNode,
+  ElementNode,
+  InterpolationNode,
+  IfNode,
+  SwitchNode,
+} from '../types/index.js';
+import {
+  ASTNodeType,
+  DriftParserError,
+} from '../types/index.js';
+
+function cloneAstNode<T>(node: T): T {
+  if (node === null || typeof node !== 'object') return node;
+  if (Array.isArray(node)) return node.map(cloneAstNode) as any;
+  const copy: any = {};
+  for (const key of Object.keys(node)) {
+    copy[key] = cloneAstNode((node as any)[key]);
+  }
+  return copy as T;
+}
+
+/**
+ * Transformer for raw Drift template AST.
+ * Performs AST enrichment by:
+ * 1. Stripping redundant whitespace/newline TextNodes between element boundaries.
+ * 2. Parsing raw JS strings in interpolations into Acorn AST nodes.
+ * 3. Parsing raw JS strings inside <script> tags into Acorn AST nodes.
+ */
+export class DriftTransformer {
+  private readonly rawAst: ProgramNode;
+
+  constructor(rawAst: ProgramNode) {
+    this.rawAst = rawAst;
+  }
+
+  /**
+   * Transforms raw AST into an enriched compiler AST.
+   * @returns Transformed ProgramNode.
+   */
+  public transform(): ProgramNode {
+    return {
+      ...this.rawAst,
+      body: this.transformChildren(this.rawAst.body),
+    };
+  }
+
+  /**
+   * Transforms array of child nodes, filtering out redundant whitespace-only TextNodes.
+   */
+  private transformChildren(children: readonly TemplateChildNode[]): TemplateChildNode[] {
+    const transformed: TemplateChildNode[] = [];
+
+    for (const child of children) {
+      if (child.type === ASTNodeType.Text && typeof child.content === 'string' && this.isWhitespaceOnly(child.content)) {
+        continue;
+      }
+
+      transformed.push(this.transformNode(child));
+    }
+
+    return transformed;
+  }
+
+  /**
+   * Transforms an individual AST node.
+   */
+  private transformNode(node: TemplateChildNode): TemplateChildNode {
+    if (node.type === ASTNodeType.Element) {
+      if (node.tagName === 'script') {
+        return this.transformScriptElement(node);
+      }
+      return {
+        ...node,
+        attributes: node.attributes.map((attr) => {
+          if (
+            attr.type === ASTNodeType.Attribute &&
+            attr.value !== null &&
+            typeof attr.value !== 'string' &&
+            attr.value.type === ASTNodeType.Interpolation
+          ) {
+            return { ...attr, value: this.transformInterpolation(attr.value) };
+          }
+          return attr;
+        }),
+        children: this.transformChildren(node.children),
+      };
+    }
+
+    if (node.type === ASTNodeType.Interpolation) {
+      return this.transformInterpolation(node);
+    }
+
+    if (node.type === ASTNodeType.If) {
+      const parsedTest = typeof node.test === 'string' && node.test.trim().length > 0
+        ? acorn.parseExpressionAt(node.test, 0, { ecmaVersion: 'latest' })
+        : node.test;
+
+      let transformedAlt: TemplateChildNode[] | IfNode | null = null;
+      if (Array.isArray(node.alternate)) {
+        transformedAlt = this.transformChildren(node.alternate);
+      } else if (node.alternate !== null) {
+        transformedAlt = this.transformNode(node.alternate as IfNode) as IfNode;
+      }
+
+      return {
+        ...node,
+        test: parsedTest,
+        consequent: this.transformChildren(node.consequent),
+        alternate: transformedAlt,
+      };
+    }
+
+    if (node.type === ASTNodeType.For) {
+      return {
+        ...node,
+        iterable: typeof node.iterable === 'string'
+          ? acorn.parseExpressionAt(node.iterable, 0, { ecmaVersion: 'latest' })
+          : node.iterable,
+        key: typeof node.key === 'string' && node.key.trim().length > 0
+          ? acorn.parseExpressionAt(node.key, 0, { ecmaVersion: 'latest' })
+          : (node.key ?? null),
+        body: this.transformChildren(node.body),
+      };
+    }
+
+    if (node.type === ASTNodeType.Switch) {
+      return this.transformSwitchToIfChain(node);
+    }
+
+    return node;
+  }
+
+  /**
+   * Transforms @switch node into a reactive @if / @else if / @else chain.
+   */
+  private transformSwitchToIfChain(node: SwitchNode): TemplateChildNode {
+    const discAst = typeof node.discriminant === 'string'
+      ? acorn.parseExpressionAt(node.discriminant, 0, { ecmaVersion: 'latest' })
+      : node.discriminant;
+
+    const buildIfChain = (index: number): TemplateChildNode | TemplateChildNode[] | null => {
+      const c = node.cases[index];
+      if (!c) return null;
+      if (c.expression === null) {
+        return this.transformChildren(c.body);
+      }
+
+      const caseAst = typeof c.expression === 'string' && c.expression.trim().length > 0
+        ? acorn.parseExpressionAt(c.expression, 0, { ecmaVersion: 'latest' })
+        : c.expression;
+
+      const parsedTest: acorn.Node = {
+        type: 'BinaryExpression',
+        operator: '===',
+        left: cloneAstNode(discAst) as any,
+        right: caseAst as any,
+        start: 0,
+        end: 0,
+      } as any;
+
+      const consequent = this.transformChildren(c.body);
+      const nextAlt = buildIfChain(index + 1);
+
+      let alternate: TemplateChildNode[] | IfNode | null = null;
+      if (Array.isArray(nextAlt)) {
+        alternate = nextAlt;
+      } else if (nextAlt !== null && (nextAlt as TemplateChildNode).type === ASTNodeType.If) {
+        alternate = nextAlt as IfNode;
+      }
+
+      return {
+        type: ASTNodeType.If,
+        test: parsedTest,
+        consequent,
+        alternate,
+        loc: c.loc,
+      };
+    };
+
+    const res = buildIfChain(0);
+    if (!res) {
+      return {
+        type: ASTNodeType.Comment,
+        content: 'empty switch',
+        loc: node.loc,
+      };
+    }
+    if (Array.isArray(res)) {
+      return res[0] || { type: ASTNodeType.Comment, content: 'empty switch', loc: node.loc };
+    }
+    return res;
+  }
+
+
+
+
+
+  /**
+   * Parses raw JS string expression in interpolation into an Acorn AST node.
+   */
+  private transformInterpolation(node: InterpolationNode): InterpolationNode {
+    if (typeof node.expression !== 'string') {
+      return node;
+    }
+
+    let parsedExpr: acorn.Node;
+    try {
+      parsedExpr = acorn.parseExpressionAt(node.expression, 0, {
+        ecmaVersion: 'latest',
+        allowAwaitOutsideFunction: true,
+      });
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : String(err);
+      throw new DriftParserError(
+        `Failed to parse JS expression in interpolation: ${msg}`,
+        node.loc.start.line,
+        node.loc.start.column,
+        node.loc.start.offset
+      );
+    }
+
+    return {
+      ...node,
+      expression: parsedExpr,
+    };
+  }
+
+  /**
+   * Parses raw JS string inside <script> tags into Acorn AST statement(s), stripping top-level Program wrapper.
+   */
+  private transformScriptElement(node: ElementNode): ElementNode {
+    const processedChildren = node.children.map((child) => {
+      if (child.type === ASTNodeType.Text && typeof child.content === 'string') {
+        let scriptAst: acorn.Node | readonly acorn.Node[];
+        try {
+          const program = acorn.parse(child.content, {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            allowAwaitOutsideFunction: true,
+            allowReturnOutsideFunction: true,
+          });
+
+          if (program.body.length === 1 && program.body[0] !== undefined) {
+            scriptAst = program.body[0];
+          } else {
+            scriptAst = program.body;
+          }
+        } catch (err: unknown) {
+          const msg = err instanceof Error ? err.message : String(err);
+          throw new DriftParserError(
+            `Failed to parse script tag JS content: ${msg}`,
+            child.loc.start.line,
+            child.loc.start.column,
+            child.loc.start.offset
+          );
+        }
+
+        return {
+          ...child,
+          content: scriptAst,
+        };
+      }
+      return child;
+    });
+
+    return {
+      ...node,
+      children: processedChildren,
+    };
+  }
+
+  /**
+   * Checks if string consists only of whitespace characters (space, tab, newline, carriage return) using ASCII codes.
+   */
+  private isWhitespaceOnly(text: string): boolean {
+    if (text.length === 0) return false;
+    for (let i = 0; i < text.length; i++) {
+      const code = text.charCodeAt(i);
+      if (code !== 32 && code !== 9 && code !== 10 && code !== 13) {
+        return false;
+      }
+    }
+    return true;
+  }
+}

package/tests/generator.test.ts

@@ -0,0 +1,149 @@
+import { describe, it, expect } from 'vitest';
+import { compile } from '../src/index.js';
+import { Opcode } from '../types/index.js';
+
+describe('DriftGenerator', () => {
+  it('generates fragment and return for empty templates', () => {
+    const module = compile('');
+
+    expect(module.constants).toEqual([]);
+    expect(module.bytecode).toEqual([Opcode.CREATE_FRAGMENT, 0, Opcode.RETURN, 0]);
+  });
+
+  it('generates direct root element for single top-level element', () => {
+    const module = compile('<div>Hello World</div>');
+
+    expect(module.constants).toContain('div');
+    expect(module.constants).toContain('Hello World');
+
+    const tagIdx = module.constants.indexOf('div');
+
+    expect(module.bytecode[0]).toBe(Opcode.CREATE_ELEMENT);
+    expect(module.bytecode[1]).toBe(0); // rootReg = 0
+    expect(module.bytecode[2]).toBe(tagIdx);
+
+    expect(module.bytecode[module.bytecode.length - 2]).toBe(Opcode.RETURN);
+    expect(module.bytecode[module.bytecode.length - 1]).toBe(0);
+  });
+
+  it('generates fragment container for multiple top-level nodes', () => {
+    const module = compile('<h1>Title</h1><p>Paragraph</p>');
+
+    expect(module.bytecode[0]).toBe(Opcode.CREATE_FRAGMENT);
+    expect(module.bytecode[1]).toBe(0); // fragment reg
+
+    expect(module.constants).toContain('h1');
+    expect(module.constants).toContain('p');
+  });
+
+  it('generates static, dynamic, and boolean attributes', () => {
+    const module = compile('<input type="checkbox" checked data-id={id} />');
+
+    expect(module.constants).toContain('type');
+    expect(module.constants).toContain('checkbox');
+    expect(module.constants).toContain('checked');
+    expect(module.constants).toContain('data-id');
+
+    // SET_ATTR opcode is present
+    expect(module.bytecode).toContain(Opcode.SET_ATTR);
+  });
+
+  it('generates interpolated text and comments', () => {
+    const module = compile('<!-- header --><div>{ user.name }</div>');
+
+    expect(module.constants).toContain(' header ');
+    expect(module.bytecode).toContain(Opcode.CREATE_COMMENT);
+    expect(module.bytecode).toContain(Opcode.INTERPOLATE_TEXT);
+  });
+
+  it('generates REACTIVE_IF opcode for @if, @else if, and @else control flows', () => {
+    const src = `@if isLoggedIn { <span>Welcome</span> } @else if isGuest { <span>Guest</span> } @else { <span>Login</span> }`;
+    const module = compile(src);
+
+    // New reactive encoding: no flat jumps for @if
+    expect(module.bytecode).toContain(Opcode.REACTIVE_IF);
+    expect(module.bytecode).not.toContain(Opcode.JUMP_IF_FALSE);
+    expect(module.bytecode).not.toContain(Opcode.EVAL_EXPR);
+
+    // The condition AST, consequent sub-module, and deps array must all be in the constant pool
+    const reactiveIfIdx = module.bytecode.indexOf(Opcode.REACTIVE_IF);
+    expect(reactiveIfIdx).toBeGreaterThan(-1);
+
+    // Operand layout: REACTIVE_IF parentReg condIdx consIdx altIdx depsIdx
+    expect(module.bytecode.length).toBeGreaterThan(reactiveIfIdx + 5);
+  });
+
+  it('generates REACTIVE_FOR opcode for @for loop directives', () => {
+    const src = `@for (item, index) in list { <li>{item}</li> }`;
+    const module = compile(src);
+
+    // New reactive encoding: no flat LOOP_ITER for @for
+    expect(module.bytecode).toContain(Opcode.REACTIVE_FOR);
+    expect(module.bytecode).not.toContain(Opcode.LOOP_ITER);
+    expect(module.bytecode).not.toContain(Opcode.EVAL_EXPR);
+
+    const reactiveForIdx = module.bytecode.indexOf(Opcode.REACTIVE_FOR);
+    expect(reactiveForIdx).toBeGreaterThan(-1);
+
+    // Operand layout: REACTIVE_FOR parentReg iterIdx itemNameIdx indexNameIdx bodyIdx depsIdx
+    expect(module.bytecode.length).toBeGreaterThan(reactiveForIdx + 6);
+  });
+
+  it('generates bytecode for @switch, @case, and @default directives', () => {
+    const src = `@switch role { @case "admin" { <p>Admin</p> } @default { <p>User</p> } }`;
+    const module = compile(src);
+
+    expect(module.bytecode).toContain(Opcode.REACTIVE_IF);
+  });
+
+  it('works end-to-end via compile() function', () => {
+    const template = `
+      <ul>
+        @for (item, index) in list {
+          <li key={index}>{item}</li>
+        }
+      </ul>
+    `;
+    const module = compile(template, false);
+
+    expect(module.bytecode.length).toBeGreaterThan(0);
+    expect(module.constants.length).toBeGreaterThan(0);
+  });
+
+  it('extracts imports metadata from script block', () => {
+    const src = `<script>import Header from "./Header.drift";</script><div><Header /></div>`;
+    const module = compile(src);
+
+    expect(module.imports).toBeDefined();
+    expect(module.imports).toHaveLength(1);
+    expect(module.imports![0]).toEqual({
+      localName: 'Header',
+      source: './Header.drift',
+      isDefault: true,
+      importedName: undefined,
+    });
+    expect(module.declaredVars).toContain('Header');
+  });
+
+  it('generates propsSpec for component elements with static and dynamic attributes', () => {
+    const src = `<script>import Header from "./Header.drift"; let count = 5;</script><div><Header title="Drift" count={count} /></div>`;
+    const module = compile(src);
+
+    expect(module.declaredVars).toContain('Header');
+    expect(module.declaredVars).toContain('count');
+
+    const propsSpec = module.constants.find(
+      (c) => typeof c === 'object' && c !== null && 'title' in c && 'count' in c
+    );
+    expect(propsSpec).toBeDefined();
+    expect((propsSpec as any).title).toBe('Drift');
+  });
+
+  it('extracts destructured prop variables from script block', () => {
+    const src = `<script>let { title = "Default", count = 0 } = props;</script><h1>{title}</h1>`;
+    const module = compile(src);
+
+    expect(module.declaredVars).toContain('title');
+    expect(module.declaredVars).toContain('count');
+  });
+});