@vue/compiler-dom 3.5.41

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 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
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:b3805c8c7a234f3d6843c0c6c16bde831645165a6d68bf25b0245dcc07c51e58","constraints":{"executionContext":"node"},"contract":["compile compiles template strings to ES module render function code with openBlock and createElementBlock","compile transforms v-model on text inputs to vModelText directive with onUpdate modelValue handler","compile transforms v-model on checkbox inputs to vModelCheckbox directive helper","compile transforms v-model on select elements to vModelSelect directive helper","compile transforms v-model with modifiers number and trim into directive argument flags","compile transforms v-show directives to vShow directive helper with patch flags","compile transforms v-html and v-text directives to innerHTML and textContent property bindings","compile transforms v-on event modifiers such as prevent and key modifiers like enter","compile automatically adds persisted prop to Transition components wrapping v-show elements","parse parses HTML template into AST root with element nodes and recognizes HTML void elements"],"goal":"verify pkg:npm/%40vue/compiler-dom@3.5.41","kind":"HOW","packages":["pkg:npm/%40vue/compiler-dom@3.5.41"],"schemaVersion":1},"contractCommand":["node","test/contract.mjs"],"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","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",
      "license": "MIT-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,
  "type": "module",
  "license": "MIT-0",
  "dependencies": {
    "@vue/compiler-dom": "3.5.41"
  }
}

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

import { compile, parse, NodeTypes, ElementTypes } from "@vue/compiler-dom";

export function compileTemplate(template, options = {}) {
  return compile(template, {
    mode: "module",
    ...options
  });
}

export function parseTemplate(template, options = {}) {
  return parse(template, options);
}

export { NodeTypes, ElementTypes, compile, parse };

import assert from "node:assert/strict";
import { compile, parse, NodeTypes, ElementTypes } from "@vue/compiler-dom";
import { compileTemplate, parseTemplate } from "../src/index.mjs";

// Contract 1: compile compiles template strings to ES module render function code with openBlock and createElementBlock
{
  const template = '<div class="container"><h1>Title</h1><p>{{ message }}</p></div>';
  const result = compileTemplate(template);

  assert.equal(typeof result.code, "string");
  assert.ok(result.code.includes("export function render"), "Render function should be exported in module mode");
  assert.ok(result.code.includes("_openBlock"), "Code should include openBlock helper");
  assert.ok(result.code.includes("_createElementBlock"), "Root element should be compiled with createElementBlock");
  assert.ok(result.code.includes("_toDisplayString"), "Interpolation should use toDisplayString helper");
}

// Contract 2: compile transforms v-model on text inputs to vModelText directive with onUpdate modelValue handler
{
  const template = '<input type="text" v-model="username" />';
  const result = compileTemplate(template);

  assert.ok(result.code.includes("_vModelText"), "Text input v-model should use vModelText helper");
  assert.ok(result.code.includes("_withDirectives"), "Directives should be attached using withDirectives");
  assert.ok(result.code.includes('"onUpdate:modelValue"'), "Update event handler should bind onUpdate:modelValue");
  assert.ok(result.code.includes("(_ctx.username) = $event"), "Event handler should assign $event to model variable");
}

// Contract 3: compile transforms v-model on checkbox inputs to vModelCheckbox directive helper
{
  const template = '<input type="checkbox" v-model="agreed" />';
  const result = compileTemplate(template);

  assert.ok(result.code.includes("_vModelCheckbox"), "Checkbox v-model should use vModelCheckbox helper");
  assert.ok(result.code.includes("_ctx.agreed"), "Directive should pass model binding context");
}

// Contract 4: compile transforms v-model on select elements to vModelSelect directive helper
{
  const template = '<select v-model="selectedColor"><option value="red">Red</option></select>';
  const result = compileTemplate(template);

  assert.ok(result.code.includes("_vModelSelect"), "Select v-model should use vModelSelect helper");
  assert.ok(result.code.includes("_ctx.selectedColor"), "Directive should pass selected color context");
}

// Contract 5: compile transforms v-model with modifiers number and trim into directive argument flags
{
  const template = '<input v-model.number.trim="count" />';
  const result = compileTemplate(template);

  assert.ok(result.code.includes("number: true"), "Directive modifiers should include number: true");
  assert.ok(result.code.includes("trim: true"), "Directive modifiers should include trim: true");
}

// Contract 6: compile transforms v-show directives to vShow directive helper with patch flags
{
  const template = '<p v-show="isVisible">Visible content</p>';
  const result = compileTemplate(template);

  assert.ok(result.code.includes("_vShow"), "v-show element should use vShow helper");
  assert.ok(result.code.includes("_ctx.isVisible"), "vShow should bind isVisible condition");
  assert.ok(result.code.includes("512 /* NEED_PATCH */"), "v-show element should have NEED_PATCH patch flag");
}

// Contract 7: compile transforms v-html and v-text directives to innerHTML and textContent property bindings
{
  const htmlTemplate = '<div v-html="rawMarkup"></div>';
  const htmlResult = compileTemplate(htmlTemplate);
  assert.ok(htmlResult.code.includes("innerHTML: _ctx.rawMarkup"), "v-html should transform to innerHTML property");

  const textTemplate = '<span v-text="textContent"></span>';
  const textResult = compileTemplate(textTemplate);
  assert.ok(textResult.code.includes("textContent: _toDisplayString(_ctx.textContent)"), "v-text should transform to textContent property");
}

// Contract 8: compile transforms v-on event modifiers such as prevent and key modifiers like enter
{
  const formTemplate = '<form @submit.prevent="saveForm"><button type="submit">Save</button></form>';
  const formResult = compileTemplate(formTemplate);
  assert.ok(formResult.code.includes("_withModifiers"), "Event modifier should use withModifiers helper");
  assert.ok(formResult.code.includes('["prevent"]'), "Modifiers array should contain prevent");

  const keyTemplate = '<input @keyup.enter="handleEnter" />';
  const keyResult = compileTemplate(keyTemplate);
  assert.ok(keyResult.code.includes("_withKeys"), "Keyboard event modifier should use withKeys helper");
  assert.ok(keyResult.code.includes('["enter"]'), "Key modifier array should contain enter");
}

// Contract 9: compile automatically adds persisted prop to Transition components wrapping v-show elements
{
  const transitionTemplate = '<transition><div v-show="active">Content</div></transition>';
  const result = compileTemplate(transitionTemplate);

  assert.ok(result.code.includes('_Transition'), "Transition component should be referenced");
  assert.ok(result.code.includes('persisted: ""'), "persisted attribute should be added to transition for v-show");
}

// Contract 10: parse parses HTML template into AST root with element nodes and recognizes HTML void elements
{
  const template = '<div class="wrapper"><input type="text"><br><img src="test.png"><span>End</span></div>';
  const ast = parseTemplate(template);

  assert.equal(ast.type, NodeTypes.ROOT);
  assert.equal(ast.children.length, 1);
  const rootDiv = ast.children[0];
  assert.equal(rootDiv.type, NodeTypes.ELEMENT);
  assert.equal(rootDiv.tag, "div");
  assert.equal(rootDiv.tagType, ElementTypes.ELEMENT);

  // Check child nodes inside rootDiv (input, br, img, span)
  const childTags = rootDiv.children.map(child => child.tag);
  assert.deepEqual(childTags, ["input", "br", "img", "span"]);
}

console.log("All @vue/compiler-dom contract assertions passed successfully.");