@tannijs/compiler - SFC Compiler for Tanni Framework

0.2.5 verified Fri May 01 auth: no javascript

The SFC (Single File Component) compiler for the Tanni framework, a modern UI library. This package compiles .tanni files into render functions, handling template parsing, style extraction, and script transformation. Current version 0.2.5 is in early development, with weekly releases. Key differentiator: specifically built for Tanni's reactive runtime, pairing tightly with @tannijs/core.

Common errors

error Cannot find module '@tannijs/compiler' ↓

cause Package not installed or missing dependency.

fix

Run npm install @tannijs/compiler in your project root.

error compile is not a function ↓

cause Importing default instead of named export compile.

fix

Use import { compile } from '@tannijs/compiler' instead of default import.

error Expected ';' at column 23 in <script> block ↓

cause Syntax error in the component script section.

fix

Check the <script> block for missing semicolons or incorrect JavaScript syntax.

Warnings

breaking Deprecated compileSync removed in 0.2.0; use async compile only. ↓

fix Replace compileSync(source) with await compile(source).

gotcha Unused imports cause compile errors. ↓

fix Remove unused imports from <script> blocks to avoid parse failures.

gotcha Style scoping not applied automatically; use data-tanni-id attribute. ↓

fix Add `scoped` attribute to <style> or manually apply data-tanni-id using the hash from compiled result.

Install

npm install tannijs-compiler

yarn add tannijs-compiler

pnpm add tannijs-compiler

Imports

compile

wrong

const compile = require('@tannijs/compiler').compile

correct

import { compile } from '@tannijs/compiler'

ESM only; no CommonJS support before v1.0

CompiledResult

wrong

import { CompiledResult } from '@tannijs/compiler'

correct

import type { CompiledResult } from '@tannijs/compiler'

Type-only import for TypeScript users

default

wrong

import { default as compiler } from '@tannijs/compiler'

correct

import compiler from '@tannijs/compiler'

Default export is the compiler object with methods like compile()

Quickstart

Demonstrates compiling a Tanni SFC string into JavaScript render code, with source map and error handling.

import { compile } from '@tannijs/compiler';

const source = `
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return { message: 'Hello Tanni' }
  }
}
</script>
<style>
div { color: blue; }
</style>`;

const result = compile(source, {
  filename: 'App.tanni',
  sourceMap: true
});

console.log(result.code);
console.log(result.map);
console.log(result.errors);