vdt-compiler

library3.0.46jsnpmunverified

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.

web-framework http-networking serialization

npm install vdt-compiler

github ↗package ↗

INSTALL

IMPORT

SIG · VDT-COMPILER

vdt-compiler

web-frameworkjavascriptv3.0.46

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

compile

✓ import { compile } from 'vdt-compiler'

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

ESM export since v3, CommonJS requires destructuring.

VdtCompiler

✓ import VdtCompiler from 'vdt-compiler'

✗ const VdtCompiler = require('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.

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);

Debug

Known issues

breakingIn 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')()`.

affects: >=3.0.0

deprecatedThe `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.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

breakingIn 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}`.

affects: >=2.0.0 <3.0.0

Errors

Common errors & fixes

Cannot find module 'vdt-compiler'

Package not installed or incorrect import path.

fix

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

TypeError: (intermediate value) is not a function

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')`.

Vdt is not defined

The compiled code references Vdt but it is not imported.

fix

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

Module parse failed: Unexpected token (1:0)

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

fix

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

Upgrade

Version history

3.0.46latest on npm

Audit

Dependencies

vdtrequiredRuntime dependency for template rendering

Agent activity

19 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Javey/Intact ↗

packagehttps://www.npmjs.com/package/vdt-compiler ↗