@vue/compiler-dom 3.5.41: compile

Clean-room public code sample — generation instructions

Write a brand-new, minimal, self-contained code sample in this clean-room directory.
Do not copy, paraphrase, or reference any existing project source. Work only from this spec.

A csx.json manifest scaffold already exists. Do not recreate it from memory. Preserve its case.goal, packages and symbols; fill its empty case.contract with exact assertions and correct its environment, commands and verifierAdapter for the files you generate.

Goal: verify compile in pkg:npm/%40vue/compiler-dom@3.5.41
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/%40vue/compiler-dom@3.5.41
Demonstrate these symbols/APIs:
  - compile
Constraints:
  - executionContext: node
Required runtime conditions:
  - ecosystem: npm
  - language: javascript
  - moduleSystem: cjs
  - packageManager: npm@10.9.8
  - runtime: node@22.23.2

Rules:
  - One focused purpose; the smallest project that proves the goal.
  - Include a contract test (test/contract.*) that runs OFFLINE and exits 0 exactly when the goal behavior works.
  - Pin every dependency with a lockfile so resolution is reproducible.
  - No secrets, credentials, or tokens. No real URLs (only example.com or localhost). No absolute paths.
  - No personal names, emails, company names, or project identifiers of any kind.
  - No binaries and no generated output (node_modules, dist, target, venv, .git, .env).
  - Keep it under 200 files and 256KB packed.

{"case":{"caseId":"case:sha256:042ad89e9d32d3546fce0185984f03799e1040fccd45db2c37f5b064d68c0063","constraints":{"executionContext":"node"},"contract":["assert compile returns a CodegenResult with compiled code and AST RootNode","assert compile transforms template event modifiers including click.prevent","assert compile in module mode generates ESM imports and DOM directives including v-model","assert compile supports compiler options including prefixIdentifiers"],"goal":"verify compile in pkg:npm/%40vue/compiler-dom@3.5.41","kind":"HOW","packages":["pkg:npm/%40vue/compiler-dom@3.5.41"],"schemaVersion":1,"symbols":["compile"]},"contractCommand":["node","test/contract.js"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","executionContext":"node","language":"javascript","libc":"glibc","libcVersion":"2.39","moduleSystem":"cjs","os":"linux","osVersionBucket":"24","packageManager":"npm","packageManagerVersion":"10.9.8","runtime":"node","runtimeVersion":"22.23.2","schemaVersion":1},"license":"MIT-0","packages":["pkg:npm/%40vue/compiler-dom@3.5.41"],"schemaVersion":1,"subject":"pkg:npm/%40vue/compiler-dom@3.5.41","symbols":["compile"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-vue-compiler-dom",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-vue-compiler-dom",
      "version": "1.0.0",
      "dependencies": {
        "@vue/compiler-dom": "3.5.41"
      }
    },
    "node_modules/@babel/helper-string-parser": {
      "version": "7.29.7",
      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
      "license": "MIT",
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@babel/helper-validator-identifier": {
      "version": "7.29.7",
      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
      "license": "MIT",
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@babel/parser": {
      "version": "7.29.8",
      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
      "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
      "license": "MIT",
      "dependencies": {
        "@babel/types": "^7.29.8"
      },
      "bin": {
        "parser": "bin/babel-parser.js"
      },
      "engines": {
        "node": ">=6.0.0"
      }
    },
    "node_modules/@babel/types": {
      "version": "7.29.8",
      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
      "license": "MIT",
      "dependencies": {
        "@babel/helper-string-parser": "^7.29.7",
        "@babel/helper-validator-identifier": "^7.29.7"
      },
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@vue/compiler-core": {
      "version": "3.5.41",
      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.41.tgz",
      "integrity": "sha512-q0Xtv/F9w2YO/7htQhtiL+Ev2WCJbe5N2hc+XfgyKkEKqWpSxknmT8QOuGdEKNdjPq0c3F7rNpFkTo3Kfrm7pg==",
      "license": "MIT",
      "dependencies": {
        "@babel/parser": "^7.29.8",
        "@vue/shared": "3.5.41",
        "entities": "^7.0.1",
        "estree-walker": "^2.0.2",
        "source-map-js": "^1.2.1"
      }
    },
    "node_modules/@vue/compiler-dom": {
      "version": "3.5.41",
      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.41.tgz",
      "integrity": "sha512-oKacVfNglLvGjnS6BXOlGL7EyG2h8X03pqXCjzotRZUaXGjbrTJUnVAQjrCqUnS+lyu31nwQjZY/d817GmCnfw==",
      "license": "MIT",
      "dependencies": {
        "@vue/compiler-core": "3.5.41",
        "@vue/shared": "3.5.41"
      }
    },
    "node_modules/@vue/shared": {
      "version": "3.5.41",
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.41.tgz",
      "integrity": "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA==",
      "license": "MIT"
    },
    "node_modules/entities": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
      "license": "BSD-2-Clause",
      "engines": {
        "node": ">=0.12"
      },
      "funding": {
        "url": "https://github.com/fb55/entities?sponsor=1"
      }
    },
    "node_modules/estree-walker": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
      "license": "MIT"
    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
      "license": "BSD-3-Clause",
      "engines": {
        "node": ">=0.10.0"
      }
    }
  }
}

{
  "name": "sample-vue-compiler-dom",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@vue/compiler-dom": "3.5.41"
  }
}

{
  "schemaVersion": 1,
  "goal": "verify compile in pkg:npm/%40vue/compiler-dom@3.5.41",
  "kind": "HOW",
  "packages": [
    "pkg:npm/%40vue/compiler-dom@3.5.41"
  ],
  "symbols": [
    "compile"
  ],
  "constraints": {
    "executionContext": "node"
  },
  "runtimeConditions": {
    "ecosystem": "npm",
    "language": "javascript",
    "moduleSystem": "cjs",
    "packageManager": "npm@10.9.8",
    "runtime": "node@22.23.2"
  }
}

const { compile } = require("@vue/compiler-dom");

/**
 * Compiles a template string into render function code and AST using @vue/compiler-dom.
 *
 * @param {string} template - The Vue HTML template string.
 * @param {object} [options={}] - Compiler options (e.g. mode, prefixIdentifiers, hoistStatic).
 * @returns {object} Codegen result containing code, ast, and preamble.
 */
function compileTemplate(template, options = {}) {
  return compile(template, options);
}

/**
 * Compiles a template in module mode for ES module output.
 *
 * @param {string} template - The Vue HTML template string.
 * @param {object} [options={}] - Additional compiler options.
 * @returns {object} Codegen result with ES module imports.
 */
function compileModule(template, options = {}) {
  return compile(template, {
    mode: "module",
    ...options,
  });
}

module.exports = {
  compileTemplate,
  compileModule,
};

const assert = require("node:assert");
const { compile } = require("@vue/compiler-dom");
const { compileTemplate, compileModule } = require("../src/index.js");

// 1. Direct API compile verification
const result = compile("<div><h1>{{ title }}</h1><p>Static Text</p></div>");
assert(result, "compile should return a result object");
assert(typeof result.code === "string", "result.code should be a string");
assert(result.ast && typeof result.ast === "object", "result.ast should be a RootNode object");
assert.strictEqual(result.ast.type, 0, "Root AST node type should be 0 (NodeTypes.ROOT)");
assert(result.code.includes("_toDisplayString"), "result.code should include helper for interpolation");

// 2. compileTemplate helper verification
const helperResult = compileTemplate("<button @click.prevent=\"onClick\">Submit</button>");
assert(typeof helperResult.code === "string", "compileTemplate should return code");
assert(helperResult.code.includes("withModifiers"), "DOM compiler should handle event modifier .prevent");
assert(Array.isArray(helperResult.ast.children), "AST should have children array");
assert.strictEqual(helperResult.ast.children.length, 1, "AST should have 1 child root element");

// 3. compileModule verification for ESM output
const moduleResult = compileModule("<input v-model=\"query\" />");
assert(typeof moduleResult.code === "string", "compileModule should return code");
assert(moduleResult.code.includes("import {"), "module mode output should include ESM imports");
assert(moduleResult.code.includes("vModelText"), "DOM compiler should transform v-model into vModelText directive");

// 4. compile options verification (e.g. prefixIdentifiers)
const prefixedResult = compile("<div>{{ count + 1 }}</div>", { prefixIdentifiers: true });
assert(typeof prefixedResult.code === "string", "compile with prefixIdentifiers should succeed");
assert(prefixedResult.code.includes("_ctx.count"), "prefixIdentifiers should prefix variables with _ctx");

console.log("PASS: @vue/compiler-dom compile contract assertions verified");