@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 @vue/compiler-dom.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:
  - @vue/compiler-dom.compile

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:73584f826f8a1732f93f831912c9976e308c543cd97d735a1f13794160953a9c","contract":["compile transforms standard HTML elements and interpolations into Vue render function in ESM module mode","compile supports function mode generating a self-contained render function returning VNodes using with(_ctx)","compile transforms v-html and v-text directives into DOM element properties innerHTML and textContent","compile transforms v-model on input and select elements to runtime helper directives and update event listeners","compile transforms event modifiers using withModifiers and withKeys helpers","compile transforms v-show directive to vShow runtime directive with patch flags","compile hoists static element trees when hoistStatic is true to avoid re-creating immutable VNodes across renders","compile invokes onError callback with structured compiler error when encountering invalid template syntax such as empty v-model"],"goal":"verify @vue/compiler-dom.compile in pkg:npm/%40vue/compiler-dom@3.5.41","kind":"HOW","packages":["pkg:npm/%40vue/compiler-dom@3.5.41"],"schemaVersion":1,"symbols":["@vue/compiler-dom.compile"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","libc":"glibc","libcVersion":"2.39","os":"linux","osVersionBucket":"24","packageManager":"npm","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":["@vue/compiler-dom.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",
  "type": "module",
  "private": true,
  "dependencies": {
    "@vue/compiler-dom": "3.5.41"
  }
}

{
  "schemaVersion": 1,
  "goal": "verify @vue/compiler-dom.compile in pkg:npm/%40vue/compiler-dom@3.5.41",
  "kind": "HOW",
  "packages": [
    "pkg:npm/%40vue/compiler-dom@3.5.41"
  ],
  "symbols": [
    "@vue/compiler-dom.compile"
  ]
}

import assert from 'node:assert/strict';
import { compile } from '@vue/compiler-dom';

// 1. compile transforms standard HTML elements and interpolations into Vue render function in ESM module mode
{
  const result = compile('<div id="app"><p>{{ message }}</p></div>', { mode: 'module' });
  assert.ok(result.code.includes('import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"'));
  assert.ok(result.code.includes('export function render(_ctx, _cache)'));
  assert.ok(result.code.includes('_toDisplayString(_ctx.message)'));
  assert.ok(result.ast !== undefined);
  assert.equal(result.ast.type, 0);
}

// 2. compile supports function mode generating a self-contained render function returning VNodes using with(_ctx)
{
  const result = compile('<div>hello</div>', { mode: 'function' });
  assert.ok(result.code.includes('const _Vue = Vue'));
  assert.ok(result.code.includes('return function render(_ctx, _cache)'));
  assert.ok(result.code.includes('with (_ctx)'));
}

// 3. compile transforms v-html and v-text directives into DOM element properties innerHTML and textContent
{
  const result = compile('<div v-html="rawHtml" v-text="text"></div>', { mode: 'module' });
  assert.ok(result.code.includes('innerHTML: _ctx.rawHtml'));
  assert.ok(result.code.includes('textContent: _toDisplayString(_ctx.text)'));
  assert.ok(result.code.includes('8 /* PROPS */'));
}

// 4. compile transforms v-model on input and select elements to runtime helper directives and update event listeners
{
  const result = compile('<input v-model="name" /><select v-model="selected"><option value="a">A</option></select>', { mode: 'module' });
  assert.ok(result.code.includes('_vModelText'));
  assert.ok(result.code.includes('_vModelSelect'));
  assert.ok(result.code.includes('"onUpdate:modelValue": $event => ((_ctx.name) = $event)'));
  assert.ok(result.code.includes('"onUpdate:modelValue": $event => ((_ctx.selected) = $event)'));
}

// 5. compile transforms event modifiers using withModifiers and withKeys helpers
{
  const result = compile('<button @click.prevent.stop="submit" @keydown.enter="onEnter"></button>', { mode: 'module' });
  assert.ok(result.code.includes('_withModifiers(_ctx.submit, ["prevent","stop"])'));
  assert.ok(result.code.includes('_withKeys(_ctx.onEnter, ["enter"])'));
}

// 6. compile transforms v-show directive to vShow runtime directive with patch flags
{
  const result = compile('<div v-show="visible">shown</div>', { mode: 'module' });
  assert.ok(result.code.includes('_vShow'));
  assert.ok(result.code.includes('[_vShow, _ctx.visible]'));
  assert.ok(result.code.includes('512 /* NEED_PATCH */'));
}

// 7. compile hoists static element trees when hoistStatic is true to avoid re-creating immutable VNodes across renders
{
  const result = compile('<div><span class="static">constant</span><p>{{ dynamic }}</p></div>', { mode: 'module', hoistStatic: true });
  assert.ok(result.code.includes('_cache[0] || (_cache[0] = _createElementVNode("span", { class: "static" }, "constant", -1 /* CACHED */))'));
}

// 8. compile invokes onError callback with structured compiler error when encountering invalid template syntax such as empty v-model
{
  const errors = [];
  compile('<input v-model />', {
    onError: (err) => errors.push(err)
  });
  assert.equal(errors.length, 1);
  assert.equal(errors[0].code, 41);
  assert.ok(errors[0].message.includes('v-model is missing expression'));
}

console.log('Contract test passed successfully: all 8 assertions passed.');