tannijs-compiler 0.1.0

package/README.md

@@ -0,0 +1 @@
+# @tannijs/compiler

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "tannijs-compiler",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "SFC compiler for the Tanni framework",
+  "license": "MIT",
+  "author": "Sebastijan Zindl",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src",
+    "dist"
+  ]
+}

package/src/codegen.ts

@@ -0,0 +1,354 @@
+import type { CompileOptions, CompileResult, TransformElementNode, TransformNode, TransformRoot } from './types';
+
+interface CodegenContext {
+  lines: string[];
+  indent: number;
+  identifier: number;
+  delegatedEvents: Set<string>;
+}
+
+const DEFAULT_RUNTIME_MODULE = 'tannijs/internals';
+
+export function generate(root: TransformRoot, script: string, options: CompileOptions = {}): CompileResult {
+  const runtimeModule = options.runtimeModule ?? DEFAULT_RUNTIME_MODULE;
+  const componentName = options.componentName ?? 'Component';
+  const preparedScript = rewriteScriptSetupProps(script);
+  const scriptParts = splitScriptParts(preparedScript);
+  const context: CodegenContext = {
+    lines: [],
+    indent: 0,
+    identifier: 0,
+    delegatedEvents: new Set<string>(),
+  };
+
+  for (const scriptImport of scriptParts.imports) {
+    pushLine(context, scriptImport);
+  }
+  if (scriptParts.imports.length > 0) {
+    pushLine(context, '');
+  }
+
+  pushLine(context, `import { createEffect, delegateEvents } from '${runtimeModule}';`);
+  pushLine(context, '');
+  pushLine(context, `export default function ${componentName}(__props = {}) {`);
+  context.indent += 1;
+
+  if (scriptParts.body.length > 0) {
+    for (const line of scriptParts.body.split('\n')) {
+      pushLine(context, line);
+    }
+    pushLine(context, '');
+  }
+
+  const rootNodeName = declareNode(context, 'document.createDocumentFragment()');
+  for (const child of root.children) {
+    emitNode(context, child, rootNodeName);
+  }
+
+  if (context.delegatedEvents.size > 0) {
+    const eventList = Array.from(context.delegatedEvents)
+      .sort()
+      .map((eventName) => JSON.stringify(eventName))
+      .join(', ');
+    pushLine(context, `delegateEvents([${eventList}]);`);
+  }
+
+  pushLine(context, `return ${rootNodeName};`);
+  context.indent -= 1;
+  pushLine(context, '}');
+
+  return { code: `${context.lines.join('\n')}\n`, css: '' };
+}
+
+function emitNode(context: CodegenContext, node: TransformNode, parentName: string): void {
+  if (node.type === 'Text') {
+    emitTextNode(context, node, parentName);
+    return;
+  }
+
+  if (node.directives.for) {
+    emitForNode(context, node, parentName);
+    return;
+  }
+
+  if (node.directives.if) {
+    emitIfNode(context, node, parentName);
+    return;
+  }
+
+  emitPlainElement(context, node, parentName);
+}
+
+function emitTextNode(context: CodegenContext, node: Extract<TransformNode, { type: 'Text' }>, parentName: string): void {
+  const textNodeName = declareNode(context, "document.createTextNode('')");
+  pushLine(context, `${parentName}.append(${textNodeName});`);
+
+  const hasDynamic = node.segments.some((segment) => segment.type === 'dynamic');
+  if (!hasDynamic) {
+    const staticValue = node.segments
+      .map((segment) => (segment.type === 'static' ? segment.value : ''))
+      .join('');
+    pushLine(context, `${textNodeName}.data = ${JSON.stringify(staticValue)};`);
+    return;
+  }
+
+  pushLine(context, 'createEffect(() => {');
+  context.indent += 1;
+  const valueExpression = node.segments
+    .map((segment) => {
+      if (segment.type === 'static') {
+        return JSON.stringify(segment.value);
+      }
+      return `String(${segment.expression})`;
+    })
+    .join(' + ');
+  pushLine(context, `${textNodeName}.data = ${valueExpression};`);
+  context.indent -= 1;
+  pushLine(context, '});');
+}
+
+function emitPlainElement(context: CodegenContext, node: TransformElementNode, parentName: string): string {
+  if (node.isComponent) {
+    return emitComponentElement(context, node, parentName);
+  }
+
+  const elementName = declareNode(context, `document.createElement(${JSON.stringify(node.tag)})`);
+  pushLine(context, `${parentName}.append(${elementName});`);
+
+  for (const attr of node.attributes) {
+    pushLine(context, `${elementName}.setAttribute(${JSON.stringify(attr.name)}, ${JSON.stringify(attr.value)});`);
+  }
+
+  for (const binding of node.bindings) {
+    pushLine(context, 'createEffect(() => {');
+    context.indent += 1;
+    const valueName = createIdentifier(context, 'attrValue');
+    pushLine(context, `const ${valueName} = ${binding.expression};`);
+    pushLine(context, `if (${valueName} == null || ${valueName} === false) {`);
+    context.indent += 1;
+    pushLine(context, `${elementName}.removeAttribute(${JSON.stringify(binding.name)});`);
+    context.indent -= 1;
+    pushLine(context, '} else {');
+    context.indent += 1;
+    pushLine(context, `${elementName}.setAttribute(${JSON.stringify(binding.name)}, String(${valueName}));`);
+    context.indent -= 1;
+    pushLine(context, '}');
+    context.indent -= 1;
+    pushLine(context, '});');
+  }
+
+  for (const eventBinding of node.events) {
+    context.delegatedEvents.add(eventBinding.name.toLowerCase());
+    pushLine(
+      context,
+      `${elementName}.__tnDelegatedHandlers ??= {};`
+    );
+    const handlerExpr = toEventHandler(eventBinding.expression);
+    pushLine(
+      context,
+      `${elementName}.__tnDelegatedHandlers[${JSON.stringify(eventBinding.name.toLowerCase())}] = ${handlerExpr};`
+    );
+  }
+
+  for (const child of node.children) {
+    emitNode(context, child, elementName);
+  }
+
+  return elementName;
+}
+
+function emitComponentElement(context: CodegenContext, node: TransformElementNode, parentName: string): string {
+  const propEntries: string[] = [];
+
+  for (const attr of node.attributes) {
+    propEntries.push(`${JSON.stringify(attr.name)}: ${JSON.stringify(attr.value)}`);
+  }
+
+  for (const binding of node.bindings) {
+    propEntries.push(`get ${JSON.stringify(binding.name)}() { return ${binding.expression}; }`);
+  }
+
+  for (const eventBinding of node.events) {
+    const eventPropName = `on${eventBinding.name.charAt(0).toUpperCase()}${eventBinding.name.slice(1)}`;
+    const handlerExpr = toEventHandler(eventBinding.expression);
+    propEntries.push(`${JSON.stringify(eventPropName)}: ${handlerExpr}`);
+  }
+
+  const propsArg = propEntries.length > 0 ? `{ ${propEntries.join(', ')} }` : '{}';
+
+  const componentName = declareNode(context, `${node.tag}(${propsArg})`);
+  pushLine(context, `${parentName}.append(${componentName});`);
+
+  for (const child of node.children) {
+    emitNode(context, child, componentName);
+  }
+
+  return componentName;
+}
+
+function emitIfNode(context: CodegenContext, node: TransformElementNode, parentName: string): void {
+  const endMarker = declareNode(context, "document.createComment('tn-if')");
+  pushLine(context, `${parentName}.append(${endMarker});`);
+  const nodesName = createIdentifier(context, 'ifNodes');
+  pushLine(context, `let ${nodesName} = [];`);
+  pushLine(context, 'createEffect(() => {');
+  context.indent += 1;
+  pushLine(context, `for (const node of ${nodesName}) {`);
+  context.indent += 1;
+  pushLine(context, `if (node.parentNode === ${parentName}) ${parentName}.removeChild(node);`);
+  context.indent -= 1;
+  pushLine(context, '}');
+  pushLine(context, `${nodesName} = [];`);
+  pushLine(context, `if (${node.directives.if}) {`);
+  context.indent += 1;
+  const fragmentName = declareNode(context, 'document.createDocumentFragment()');
+  emitPlainElement(context, removeControlFlow(node), fragmentName);
+  const nextNodesName = createIdentifier(context, 'nextIfNodes');
+  pushLine(context, `const ${nextNodesName} = Array.from(${fragmentName}.childNodes);`);
+  pushLine(context, `for (const node of ${nextNodesName}) ${parentName}.insertBefore(node, ${endMarker});`);
+  pushLine(context, `${nodesName} = ${nextNodesName};`);
+  context.indent -= 1;
+  pushLine(context, '}');
+  context.indent -= 1;
+  pushLine(context, '});');
+}
+
+function emitForNode(context: CodegenContext, node: TransformElementNode, parentName: string): void {
+  const forDirective = node.directives.for;
+  if (!forDirective) {
+    return;
+  }
+
+  const endMarker = declareNode(context, "document.createComment('tn-for')");
+  pushLine(context, `${parentName}.append(${endMarker});`);
+  const renderedName = createIdentifier(context, 'forNodes');
+  pushLine(context, `let ${renderedName} = [];`);
+  pushLine(context, 'createEffect(() => {');
+  context.indent += 1;
+  pushLine(context, `for (const node of ${renderedName}) {`);
+  context.indent += 1;
+  pushLine(context, `if (node.parentNode === ${parentName}) ${parentName}.removeChild(node);`);
+  context.indent -= 1;
+  pushLine(context, '}');
+  pushLine(context, `${renderedName} = [];`);
+  const listName = createIdentifier(context, 'forList');
+  pushLine(context, `const ${listName} = ${forDirective.listExpression} ?? [];`);
+  pushLine(context, `for (let __i = 0; __i < ${listName}.length; __i += 1) {`);
+  context.indent += 1;
+  pushLine(context, `const ${forDirective.itemAlias} = ${listName}[__i];`);
+  if (forDirective.indexAlias) {
+    pushLine(context, `const ${forDirective.indexAlias} = __i;`);
+  }
+  const fragmentName = declareNode(context, 'document.createDocumentFragment()');
+  emitPlainElement(context, removeControlFlow(node), fragmentName);
+  const loopNodes = createIdentifier(context, 'loopNodes');
+  pushLine(context, `const ${loopNodes} = Array.from(${fragmentName}.childNodes);`);
+  pushLine(context, `for (const node of ${loopNodes}) ${parentName}.insertBefore(node, ${endMarker});`);
+  pushLine(context, `${renderedName}.push(...${loopNodes});`);
+  context.indent -= 1;
+  pushLine(context, '}');
+  context.indent -= 1;
+  pushLine(context, '});');
+}
+
+function removeControlFlow(node: TransformElementNode): TransformElementNode {
+  return {
+    ...node,
+    directives: {},
+  };
+}
+
+function rewriteScriptSetupProps(script: string): string {
+  if (script.trim().length === 0) {
+    return '';
+  }
+
+  return script
+    .replace(/withDefaults\s*\(\s*defineProps\s*(?:<[^>]+>\s*)?\(\s*\)\s*,\s*(\{[^}]*\})\s*\)/g, 'Object.create($1, Object.getOwnPropertyDescriptors(__props))')
+    .replace(/defineProps\s*(?:<[^>]+>\s*)?\(\s*(\{[^}]*\})\s*\)/g, 'Object.create($1, Object.getOwnPropertyDescriptors(__props))')
+    .replace(/defineProps\s*<[^>]+>\s*\(\s*\)/g, '__props')
+    .replace(/defineProps\s*\(\s*\)/g, '__props');
+}
+
+function splitScriptParts(script: string): { imports: string[]; body: string } {
+  const imports: string[] = [];
+  const bodyLines: string[] = [];
+
+  const lines = script.split('\n');
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i]!;
+    const trimmed = line.trim();
+
+    if (trimmed.startsWith('import ')) {
+      imports.push(line);
+      i += 1;
+      continue;
+    }
+
+    if (isTypeOnlyDeclaration(trimmed)) {
+      i = skipBracedBlock(lines, i);
+      continue;
+    }
+
+    bodyLines.push(line);
+    i += 1;
+  }
+
+  return {
+    imports: imports.filter((line) => line.trim().length > 0),
+    body: bodyLines.join('\n').trim(),
+  };
+}
+
+function isTypeOnlyDeclaration(trimmedLine: string): boolean {
+  return (
+    /^(export\s+)?interface\s+/.test(trimmedLine) ||
+    /^(export\s+)?type\s+\w+\s*[=<]/.test(trimmedLine)
+  );
+}
+
+function skipBracedBlock(lines: string[], startIndex: number): number {
+  let depth = 0;
+  let i = startIndex;
+  while (i < lines.length) {
+    const line = lines[i]!;
+    for (const ch of line) {
+      if (ch === '{') depth += 1;
+      if (ch === '}') depth -= 1;
+    }
+    i += 1;
+    if (depth <= 0) break;
+  }
+  return i;
+}
+
+function declareNode(context: CodegenContext, expression: string): string {
+  const name = createIdentifier(context, 'node');
+  pushLine(context, `const ${name} = ${expression};`);
+  return name;
+}
+
+function createIdentifier(context: CodegenContext, base: string): string {
+  const id = context.identifier;
+  context.identifier += 1;
+  return `__${base}${id}`;
+}
+
+function toEventHandler(expression: string): string {
+  const trimmed = expression.trim();
+
+  if (/^\w+$/.test(trimmed)) {
+    return trimmed;
+  }
+
+  if (trimmed.startsWith('(') || trimmed.startsWith('function') || /^\w+\s*=>/.test(trimmed)) {
+    return trimmed;
+  }
+
+  return `(event) => { ${trimmed}; }`;
+}
+
+function pushLine(context: CodegenContext, line: string): void {
+  context.lines.push(`${'  '.repeat(context.indent)}${line}`);
+}

package/src/index.test.ts

@@ -0,0 +1,273 @@
+import { describe, expect, it } from 'vitest';
+
+import { compileSfc } from './index';
+import { parseSfc } from './parser';
+
+describe('compileSfc', () => {
+  it('compiles interpolation, bindings, events, tn-if and tn-for', () => {
+    const source = `
+<script setup lang="ts">
+const count = () => 1;
+const visible = () => true;
+const items = () => ['a', 'b'];
+function increment() {}
+</script>
+<template>
+  <section :data-count="count()" @click="increment">
+    <p>{{ count() }}</p>
+    <span tn-if="visible()">Visible</span>
+    <li tn-for="item, index in items()">{{ index }}-{{ item }}</li>
+  </section>
+</template>
+`;
+    const { code } = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+
+    expect(code).toContain("import { createEffect, delegateEvents } from 'tanni-runtime';");
+    expect(code).toContain('createEffect(() => {');
+    expect(code).toContain('.setAttribute("data-count"');
+    expect(code).toContain('__tnDelegatedHandlers');
+    expect(code).toContain("document.createComment('tn-if')");
+    expect(code).toContain("document.createComment('tn-for')");
+    expect(code).toContain('const item =');
+    expect(code).toContain('const index = __i;');
+    expect(code).toContain('delegateEvents(["click"]);');
+  });
+
+  it('rewrites defineProps macro to component props', () => {
+    const source = `
+<script setup lang="ts">
+interface Props {
+  title: string;
+}
+const props = defineProps<Props>();
+</script>
+<template>
+  <h1>{{ props.title }}</h1>
+</template>
+`;
+    const { code } = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+    expect(code).toContain('const props = __props;');
+    expect(code).toContain('export default function Component(__props = {}) {');
+  });
+});
+
+describe('component detection', () => {
+  it('detects PascalCase tags as components and emits function calls', () => {
+    const source = `
+<script setup lang="ts">
+import Counter from './Counter.tanni';
+</script>
+<template>
+  <div>
+    <Counter />
+  </div>
+</template>
+`;
+    const { code } = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+    expect(code).toContain('Counter(');
+    expect(code).not.toContain('document.createElement("Counter")');
+  });
+
+  it('passes static attrs, bindings, and events as props to components', () => {
+    const source = `
+<script setup lang="ts">
+import MyComp from './MyComp.tanni';
+const val = () => 42;
+function handleClick() {}
+</script>
+<template>
+  <MyComp title="hello" :count="val()" @click="handleClick" />
+</template>
+`;
+    const { code } = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+    expect(code).toContain('MyComp(');
+    expect(code).toContain('"title": "hello"');
+    expect(code).toContain('get "count"() { return val(); }');
+    expect(code).toContain('"onClick": handleClick');
+  });
+
+  it('emits getter props for dynamic bindings instead of wrapping in createEffect', () => {
+    const source = `
+<script setup lang="ts">
+import Counter from './Counter.tanni';
+const count = () => 5;
+</script>
+<template>
+  <Counter :value="count()" />
+</template>
+`;
+    const { code } = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+    expect(code).toContain('Counter({');
+    expect(code).toContain('get "value"() { return count(); }');
+    expect(code).not.toContain("document.createComment('tn-component:Counter')");
+  });
+
+  it('treats lowercase tags as plain HTML elements', () => {
+    const source = `
+<script setup lang="ts">
+</script>
+<template>
+  <div>
+    <span>text</span>
+  </div>
+</template>
+`;
+    const { code } = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+    expect(code).toContain('document.createElement("div")');
+    expect(code).toContain('document.createElement("span")');
+  });
+});
+
+describe('defineProps rewriting', () => {
+  it('rewrites defineProps() with no args to __props', () => {
+    const source = `
+<script setup lang="ts">
+const props = defineProps();
+</script>
+<template>
+  <p>{{ props.title }}</p>
+</template>
+`;
+    const { code } = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+    expect(code).toContain('const props = __props;');
+  });
+
+  it('rewrites defineProps<T>() with generic only to __props', () => {
+    const source = `
+<script setup lang="ts">
+interface Props { title: string; }
+const props = defineProps<Props>();
+</script>
+<template>
+  <p>{{ props.title }}</p>
+</template>
+`;
+    const { code } = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+    expect(code).toContain('const props = __props;');
+    expect(code).not.toContain('interface Props');
+  });
+
+  it('rewrites defineProps<T>({ defaults }) to spread with __props', () => {
+    const source = `
+<script setup lang="ts">
+interface Props { count: number; onIncrement: () => void; }
+const props = defineProps<Props>({ count: 0 });
+</script>
+<template>
+  <p>{{ props.count }}</p>
+</template>
+`;
+    const { code } = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+    expect(code).toContain('const props = Object.create({ count: 0 }, Object.getOwnPropertyDescriptors(__props));');
+    expect(code).not.toContain('defineProps');
+    expect(code).not.toContain('interface Props');
+  });
+
+  it('rewrites defineProps({ defaults }) without generic to Object.create with __props', () => {
+    const source = `
+<script setup lang="ts">
+const props = defineProps({ count: 0 });
+</script>
+<template>
+  <p>{{ props.count }}</p>
+</template>
+`;
+    const { code } = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+    expect(code).toContain('const props = Object.create({ count: 0 }, Object.getOwnPropertyDescriptors(__props));');
+  });
+
+  it('rewrites withDefaults(defineProps<T>(), { defaults }) to Object.create with __props', () => {
+    const source = `
+<script setup lang="ts">
+interface Props { count: number; label: string; }
+const props = withDefaults(defineProps<Props>(), { count: 0, label: "hello" });
+</script>
+<template>
+  <p>{{ props.label }}: {{ props.count }}</p>
+</template>
+`;
+    const { code } = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+    expect(code).toContain('const props = Object.create({ count: 0, label: "hello" }, Object.getOwnPropertyDescriptors(__props));');
+    expect(code).not.toContain('withDefaults');
+    expect(code).not.toContain('defineProps');
+  });
+
+  it('rewrites withDefaults without generic to Object.create with __props', () => {
+    const source = `
+<script setup lang="ts">
+const props = withDefaults(defineProps(), { count: 5 });
+</script>
+<template>
+  <p>{{ props.count }}</p>
+</template>
+`;
+    const { code } = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+    expect(code).toContain('const props = Object.create({ count: 5 }, Object.getOwnPropertyDescriptors(__props));');
+    expect(code).not.toContain('withDefaults');
+  });
+});
+
+describe('style block extraction', () => {
+  it('extracts a single style block', () => {
+    const source = `
+<script setup lang="ts">
+</script>
+<template>
+  <div>hello</div>
+</template>
+<style>
+.app { color: red; }
+</style>
+`;
+    const result = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+    expect(result.css).toContain('.app { color: red; }');
+  });
+
+  it('extracts multiple style blocks and concatenates them', () => {
+    const source = `
+<script setup lang="ts">
+</script>
+<template>
+  <div>hello</div>
+</template>
+<style>
+.a { color: red; }
+</style>
+<style>
+.b { color: blue; }
+</style>
+`;
+    const result = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+    expect(result.css).toContain('.a { color: red; }');
+    expect(result.css).toContain('.b { color: blue; }');
+  });
+
+  it('returns empty css when no style block is present', () => {
+    const source = `
+<script setup lang="ts">
+</script>
+<template>
+  <div>hello</div>
+</template>
+`;
+    const result = compileSfc(source, { runtimeModule: 'tanni-runtime' });
+    expect(result.css).toBe('');
+  });
+
+  it('parses style block lang and scoped attributes', () => {
+    const source = `
+<script setup lang="ts">
+</script>
+<template>
+  <div>hello</div>
+</template>
+<style lang="scss" scoped>
+.app { color: red; }
+</style>
+`;
+    const descriptor = parseSfc(source);
+    expect(descriptor.styles).toHaveLength(1);
+    expect(descriptor.styles[0]!.lang).toBe('scss');
+    expect(descriptor.styles[0]!.scoped).toBe(true);
+  });
+});

package/src/index.ts

@@ -0,0 +1,20 @@
+import { generate } from './codegen';
+import { parseSfc, parseTemplate } from './parser';
+import { transformTemplate } from './transform';
+import type { CompileOptions, CompileResult } from './types';
+
+export type { CompileOptions, CompileResult } from './types';
+
+export function compileSfc(source: string, options: CompileOptions = {}): CompileResult {
+  const descriptor = parseSfc(source);
+  const parsedTemplate = parseTemplate(descriptor.template);
+  const transformed = transformTemplate(parsedTemplate);
+  const result = generate(transformed, descriptor.script, options);
+
+  const css = descriptor.styles
+    .map((s) => s.content)
+    .filter((c) => c.length > 0)
+    .join('\n\n');
+
+  return { ...result, css };
+}

package/src/parser.ts

@@ -0,0 +1,152 @@
+import type { ElementNode, RawAttribute, SfcDescriptor, SfcStyleBlock, TemplateNode, TemplateRoot, TextNode } from './types';
+
+const TEMPLATE_BLOCK = /<template\b[^>]*>([\s\S]*?)<\/template>/i;
+const SCRIPT_BLOCK = /<script\b([^>]*)>([\s\S]*?)<\/script>/i;
+const STYLE_BLOCK = /<style\b([^>]*)>([\s\S]*?)<\/style>/gi;
+const LANG_ATTR = /\blang\s*=\s*["']([^"']+)["']/i;
+const SCOPED_ATTR = /\bscoped\b/i;
+
+export function parseSfc(source: string): SfcDescriptor {
+  const templateMatch = source.match(TEMPLATE_BLOCK);
+  if (!templateMatch) {
+    throw new Error('Missing <template> block in .tanni file.');
+  }
+  const templateBlock = templateMatch[1];
+  if (!templateBlock) {
+    throw new Error('Template block is empty.');
+  }
+
+  const scriptMatch = source.match(SCRIPT_BLOCK);
+  const scriptAttrs = scriptMatch?.[1] ?? '';
+  const scriptLangMatch = scriptAttrs.match(LANG_ATTR);
+
+  const styles: SfcStyleBlock[] = [];
+  for (const styleMatch of source.matchAll(STYLE_BLOCK)) {
+    const attrs = styleMatch[1] ?? '';
+    const langMatch = attrs.match(LANG_ATTR);
+    styles.push({
+      content: (styleMatch[2] ?? '').trim(),
+      lang: langMatch?.[1] ?? null,
+      scoped: SCOPED_ATTR.test(attrs),
+    });
+  }
+
+  return {
+    template: templateBlock.trim(),
+    script: scriptMatch?.[2]?.trim() ?? '',
+    scriptLang: scriptLangMatch?.[1] ?? null,
+    styles,
+  };
+}
+
+export function parseTemplate(templateSource: string): TemplateRoot {
+  const root: TemplateRoot = { type: 'Root', children: [] };
+  const stack: ElementNode[] = [];
+
+  let index = 0;
+  while (index < templateSource.length) {
+    if (templateSource[index] === '<') {
+      if (templateSource.startsWith('<!--', index)) {
+        const closeIndex = templateSource.indexOf('-->', index + 4);
+        index = closeIndex === -1 ? templateSource.length : closeIndex + 3;
+        continue;
+      }
+
+      if (templateSource.startsWith('</', index)) {
+        const closeTag = templateSource.slice(index).match(/^<\/\s*([A-Za-z][\w-]*)\s*>/);
+        if (!closeTag) {
+          throw new Error(`Invalid closing tag near: ${templateSource.slice(index, index + 20)}`);
+        }
+
+        const [, tag] = closeTag;
+        const current = stack.pop();
+        if (!current || current.tag !== tag) {
+          throw new Error(`Mismatched closing tag </${tag}>.`);
+        }
+        index += closeTag[0].length;
+        continue;
+      }
+
+      const openTag = templateSource.slice(index).match(/^<\s*([A-Za-z][\w-]*)([\s\S]*?)>/);
+      if (!openTag) {
+        throw new Error(`Invalid opening tag near: ${templateSource.slice(index, index + 20)}`);
+      }
+
+      const tag = openTag[1];
+      const rawAttrs = openTag[2] ?? '';
+      if (!tag) {
+        throw new Error('Invalid opening tag.');
+      }
+      const selfClosing = rawAttrs.trim().endsWith('/');
+      const cleanAttrs = selfClosing ? rawAttrs.replace(/\/\s*$/, '') : rawAttrs;
+
+      const node: ElementNode = {
+        type: 'Element',
+        tag,
+        attrs: parseAttributes(cleanAttrs),
+        children: [],
+      };
+
+      appendChild(stack, root, node);
+      index += openTag[0].length;
+
+      if (!selfClosing) {
+        stack.push(node);
+      }
+      continue;
+    }
+
+    const nextTagIndex = templateSource.indexOf('<', index);
+    const textContent =
+      nextTagIndex === -1 ? templateSource.slice(index) : templateSource.slice(index, nextTagIndex);
+    index = nextTagIndex === -1 ? templateSource.length : nextTagIndex;
+
+    if (textContent.trim().length === 0) {
+      continue;
+    }
+
+    const textNode: TextNode = {
+      type: 'Text',
+      content: textContent,
+    };
+    appendChild(stack, root, textNode);
+  }
+
+  if (stack.length > 0) {
+    const unclosed = stack[stack.length - 1];
+    if (!unclosed) {
+      throw new Error('Unexpected parser state.');
+    }
+    throw new Error(`Unclosed tag <${unclosed.tag}>.`);
+  }
+
+  return root;
+}
+
+function appendChild(stack: ElementNode[], root: TemplateRoot, node: TemplateNode): void {
+  if (stack.length === 0) {
+    root.children.push(node);
+    return;
+  }
+  const parent = stack[stack.length - 1];
+  if (!parent) {
+    throw new Error('Unexpected parser state.');
+  }
+  parent.children.push(node);
+}
+
+function parseAttributes(raw: string): RawAttribute[] {
+  const attributes: RawAttribute[] = [];
+  const attrRegex = /([:@A-Za-z_][\w:.-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+
+  for (const match of raw.matchAll(attrRegex)) {
+    const name = match[1];
+    if (!name) {
+      continue;
+    }
+    const value = match[2] ?? match[3] ?? match[4] ?? null;
+    attributes.push({ name, value });
+  }
+
+  return attributes;
+}

package/src/transform.ts

@@ -0,0 +1,134 @@
+import type {
+  DirectiveMap,
+  ForDirective,
+  TemplateNode,
+  TemplateRoot,
+  TextSegment,
+  TransformElementNode,
+  TransformNode,
+  TransformRoot,
+  TransformTextNode,
+} from './types';
+
+const FOR_PATTERN = /^\s*(\w+)(?:\s*,\s*(\w+))?\s+in\s+(.+)\s*$/;
+const INTERPOLATION_PATTERN = /\{\{\s*([^}]+?)\s*\}\}/g;
+
+export function transformTemplate(root: TemplateRoot): TransformRoot {
+  return {
+    type: 'Root',
+    children: root.children.map((node) => transformNode(node)),
+  };
+}
+
+function transformNode(node: TemplateNode): TransformNode {
+  if (node.type === 'Text') {
+    return transformText(node.content);
+  }
+
+  const directives: DirectiveMap = {};
+  const attributes: TransformElementNode['attributes'] = [];
+  const bindings: TransformElementNode['bindings'] = [];
+  const events: TransformElementNode['events'] = [];
+
+  for (const attr of node.attrs) {
+    if (attr.name === 'tn-if') {
+      if (!attr.value) {
+        throw new Error('tn-if requires an expression value.');
+      }
+      directives.if = attr.value;
+      continue;
+    }
+
+    if (attr.name === 'tn-for') {
+      if (!attr.value) {
+        throw new Error('tn-for requires an expression value.');
+      }
+      directives.for = parseForDirective(attr.value);
+      continue;
+    }
+
+    if (attr.name.startsWith(':')) {
+      if (!attr.value) {
+        throw new Error(`${attr.name} requires an expression value.`);
+      }
+      bindings.push({
+        name: attr.name.slice(1),
+        expression: attr.value,
+      });
+      continue;
+    }
+
+    if (attr.name.startsWith('@')) {
+      if (!attr.value) {
+        throw new Error(`${attr.name} requires an event handler expression.`);
+      }
+      events.push({
+        name: attr.name.slice(1),
+        expression: attr.value,
+      });
+      continue;
+    }
+
+    attributes.push({
+      name: attr.name,
+      value: attr.value ?? '',
+    });
+  }
+
+  return {
+    type: 'Element',
+    tag: node.tag,
+    isComponent: /^[A-Z]/.test(node.tag),
+    attributes,
+    bindings,
+    events,
+    directives,
+    children: node.children.map((child) => transformNode(child)),
+  };
+}
+
+function parseForDirective(value: string): ForDirective {
+  const match = value.match(FOR_PATTERN);
+  if (!match) {
+    throw new Error(`Invalid tn-for expression "${value}". Expected "item in list" or "item, index in list".`);
+  }
+
+  return {
+    itemAlias: match[1] ?? 'item',
+    indexAlias: match[2] ?? null,
+    listExpression: (match[3] ?? '').trim(),
+  };
+}
+
+function transformText(content: string): TransformTextNode {
+  const segments = splitTextSegments(content);
+  return {
+    type: 'Text',
+    segments: segments.length > 0 ? segments : [{ type: 'static', value: content }],
+  };
+}
+
+function splitTextSegments(content: string): TextSegment[] {
+  const segments: TextSegment[] = [];
+  let cursor = 0;
+
+  for (const match of content.matchAll(INTERPOLATION_PATTERN)) {
+    const start = match.index ?? 0;
+    if (start > cursor) {
+      segments.push({ type: 'static', value: content.slice(cursor, start) });
+    }
+
+    const expression = match[1]?.trim();
+    if (expression) {
+      segments.push({ type: 'dynamic', expression });
+    }
+
+    cursor = start + match[0].length;
+  }
+
+  if (cursor < content.length) {
+    segments.push({ type: 'static', value: content.slice(cursor) });
+  }
+
+  return segments;
+}

package/src/types.ts

@@ -0,0 +1,106 @@
+export interface SfcStyleBlock {
+  content: string;
+  lang: string | null;
+  scoped: boolean;
+}
+
+export interface SfcDescriptor {
+  template: string;
+  script: string;
+  scriptLang: string | null;
+  styles: SfcStyleBlock[];
+}
+
+export interface TemplateRoot {
+  type: 'Root';
+  children: TemplateNode[];
+}
+
+export type TemplateNode = ElementNode | TextNode;
+
+export interface ElementNode {
+  type: 'Element';
+  tag: string;
+  attrs: RawAttribute[];
+  children: TemplateNode[];
+}
+
+export interface TextNode {
+  type: 'Text';
+  content: string;
+}
+
+export interface RawAttribute {
+  name: string;
+  value: string | null;
+}
+
+export interface TransformRoot {
+  type: 'Root';
+  children: TransformNode[];
+}
+
+export type TransformNode = TransformElementNode | TransformTextNode;
+
+export interface TransformTextNode {
+  type: 'Text';
+  segments: TextSegment[];
+}
+
+export type TextSegment =
+  | {
+      type: 'static';
+      value: string;
+    }
+  | {
+      type: 'dynamic';
+      expression: string;
+    };
+
+export interface TransformElementNode {
+  type: 'Element';
+  tag: string;
+  isComponent: boolean;
+  attributes: StaticAttribute[];
+  bindings: DynamicBinding[];
+  events: EventBinding[];
+  directives: DirectiveMap;
+  children: TransformNode[];
+}
+
+export interface StaticAttribute {
+  name: string;
+  value: string;
+}
+
+export interface DynamicBinding {
+  name: string;
+  expression: string;
+}
+
+export interface EventBinding {
+  name: string;
+  expression: string;
+}
+
+export interface DirectiveMap {
+  if?: string;
+  for?: ForDirective;
+}
+
+export interface ForDirective {
+  itemAlias: string;
+  indexAlias: string | null;
+  listExpression: string;
+}
+
+export interface CompileOptions {
+  id?: string;
+  runtimeModule?: string;
+  componentName?: string;
+}
+
+export interface CompileResult {
+  code: string;
+  css: string;
+}