{"id":26581,"library":"vdt-compiler","title":"Vdt Template Compiler","description":"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.","status":"active","version":"3.0.46","language":"javascript","source_language":"en","source_url":"git://github.com/Javey/Intact","tags":["javascript","typescript"],"install":[{"cmd":"npm install vdt-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add vdt-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add vdt-compiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for template rendering","package":"vdt","optional":false}],"imports":[{"note":"ESM export since v3, CommonJS requires destructuring.","wrong":"const compile = require('vdt-compiler').compile","symbol":"compile","correct":"import { compile } from 'vdt-compiler'"},{"note":"Default export is the compiler class. Use named export 'compile' for direct usage.","wrong":"const VdtCompiler = require('vdt-compiler')","symbol":"VdtCompiler","correct":"import VdtCompiler from 'vdt-compiler'"},{"note":"Named export for component base class, only available since v3.0.0.","wrong":"","symbol":"Component","correct":"import { Component } from 'vdt-compiler'"}],"quickstart":{"code":"import { compile } from 'vdt-compiler';\nimport Vdt from 'vdt';\n\nconst template = `<div>\n    <h1>{title}</h1>\n    <div ev-click={onClick}>Clicked: {count}</div>\n    <ul v-for={items}>\n        <li>{key}: {value}</li>\n    </ul>\n</div>`;\n\nconst compiledCode = compile(template, { target: 'es2015' });\nconst render = new Function('Vdt', `return ${compiledCode}`)(Vdt);\n\nconst vdt = Vdt(render);\nconst dom = vdt.render({\n    title: 'vdt',\n    items: { a: 1, b: 2 },\n    count: 0,\n    onClick: function() { this.count++; vdt.update(); }\n});\ndocument.body.appendChild(dom);","lang":"typescript","description":"Compiles a VDT template string and renders it into the DOM with reactive updates."},"warnings":[{"fix":"Use named imports like `import { compile } from 'vdt-compiler'` instead of `require('vdt-compiler')()`.","message":"In v3.0.0, the API changed from exporting a function to exporting an object with named exports.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Set `target: 'es2015'` or higher to avoid deprecated ES5 output.","message":"The `target` option in compile() defaults to 'es5'; 'es2015' or higher is recommended for modern browsers.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure `import Vdt from 'vdt'` is available when executing the compiled output.","message":"The compiled code expects the `Vdt` runtime to be in scope; it is not bundled.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update templates to use curly braces for directive values, e.g., `v-for={items}`.","message":"In v2.0.0, directives like `v-for` changed to use colon syntax `v-for={items}` instead of hyphenated attributes.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run `npm install vdt-compiler` and ensure import path is correct.","cause":"Package not installed or incorrect import path.","error":"Cannot find module 'vdt-compiler'"},{"fix":"Use `import { compile } from 'vdt-compiler'` or if using require: `const { compile } = require('vdt-compiler')`.","cause":"Importing default export incorrectly in CommonJS or mixing ESM/CJS.","error":"TypeError: (intermediate value) is not a function"},{"fix":"Add `import Vdt from 'vdt'` at the top of the file.","cause":"The compiled code references Vdt but it is not imported.","error":"Vdt is not defined"},{"fix":"Add `vdt-loader` to webpack config: `{ test: /\\.vdt$/, use: 'vdt-loader' }`.","cause":"Webpack trying to parse a .vdt file without a loader.","error":"Module parse failed: Unexpected token (1:0)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}