Vdt Template Compiler

3.0.46 verified Fri May 01 auth: no javascript

A virtual DOM-based template engine compiler for Vdt.js, version 3.0.46. It compiles Vdt template syntax (JSX-like with directives) into JavaScript for both server-side and client-side rendering. The package is part of the Vdt ecosystem and is used alongside the `vdt` runtime. It supports template inheritance, includes, macros, and provides fast updates via virtual DOM. The library is primarily used with the Intact MVVM framework. Releases follow npm versioning with recent updates. Key differentiators include small bundle size (~13KB gzipped including live compilation) and compatibility with modern build tools like webpack via vdt-loader.

Common errors

error Cannot find module 'vdt-compiler' ↓

cause Package not installed or incorrect import path.

fix

Run npm install vdt-compiler and ensure import path is correct.

error TypeError: (intermediate value) is not a function ↓

cause Importing default export incorrectly in CommonJS or mixing ESM/CJS.

fix

Use import { compile } from 'vdt-compiler' or if using require: const { compile } = require('vdt-compiler').

error Vdt is not defined ↓

cause The compiled code references Vdt but it is not imported.

fix

Add import Vdt from 'vdt' at the top of the file.

error Module parse failed: Unexpected token (1:0) ↓

cause Webpack trying to parse a .vdt file without a loader.

fix

Add vdt-loader to webpack config: { test: /\.vdt$/, use: 'vdt-loader' }.

Warnings

breaking In v3.0.0, the API changed from exporting a function to exporting an object with named exports. ↓

fix Use named imports like `import { compile } from 'vdt-compiler'` instead of `require('vdt-compiler')()`.

deprecated The `target` option in compile() defaults to 'es5'; 'es2015' or higher is recommended for modern browsers. ↓

fix Set `target: 'es2015'` or higher to avoid deprecated ES5 output.

gotcha The compiled code expects the `Vdt` runtime to be in scope; it is not bundled. ↓

fix Ensure `import Vdt from 'vdt'` is available when executing the compiled output.

breaking In v2.0.0, directives like `v-for` changed to use colon syntax `v-for={items}` instead of hyphenated attributes. ↓

fix Update templates to use curly braces for directive values, e.g., `v-for={items}`.

Install

npm install vdt-compiler

yarn add vdt-compiler

pnpm add vdt-compiler

Imports

compile

wrong

const compile = require('vdt-compiler').compile

correct

import { compile } from 'vdt-compiler'

ESM export since v3, CommonJS requires destructuring.

VdtCompiler
wrong
```
const VdtCompiler = require('vdt-compiler')
```
correct
```
import VdtCompiler from 'vdt-compiler'
```
Default export is the compiler class. Use named export 'compile' for direct usage.
Component
```
import { Component } from 'vdt-compiler'
```
Named export for component base class, only available since v3.0.0.

Quickstart

Compiles a VDT template string and renders it into the DOM with reactive updates.

import { compile } from 'vdt-compiler';
import Vdt from 'vdt';

const template = `<div>
    <h1>{title}</h1>
    <div ev-click={onClick}>Clicked: {count}</div>
    <ul v-for={items}>
        <li>{key}: {value}</li>
    </ul>
</div>`;

const compiledCode = compile(template, { target: 'es2015' });
const render = new Function('Vdt', `return ${compiledCode}`)(Vdt);

const vdt = Vdt(render);
const dom = vdt.render({
    title: 'vdt',
    items: { a: 1, b: 2 },
    count: 0,
    onClick: function() { this.count++; vdt.update(); }
});
document.body.appendChild(dom);