@vue/compiler-dom 3.5.41: parse

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

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:d1512bb3a951dcbb80f2ea177de3276935b9af2211f18124279e58329115a5d2","constraints":{"executionContext":"node"},"contract":["assert parse returns an AST RootNode with parsed elements, text, and interpolation","assert parse extracts HTML attributes and Vue directives into props array","assert parse preserves comment nodes when comments option is enabled","assert parse supports custom template interpolation delimiters"],"goal":"verify @vue/compiler-dom.parse 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.parse"]},"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":["@vue/compiler-dom.parse"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-vue-compiler-dom-parse",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-vue-compiler-dom-parse",
      "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-parse",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@vue/compiler-dom": "3.5.41"
  }
}

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

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

/**
 * Parses a Vue template string into a DOM AST RootNode.
 *
 * @param {string} template - HTML template string to parse.
 * @param {object} [options={}] - Parser options (e.g. comments, delimiters).
 * @returns {object} RootNode AST representing the parsed template.
 */
function parseTemplate(template, options = {}) {
  return parse(template, options);
}

/**
 * Parses a template preserving HTML comments.
 *
 * @param {string} template - HTML template string.
 * @param {object} [options={}] - Additional parser options.
 * @returns {object} RootNode AST including CommentNodes.
 */
function parseWithComments(template, options = {}) {
  return parse(template, {
    comments: true,
    ...options,
  });
}

module.exports = {
  parseTemplate,
  parseWithComments,
};

const assert = require("node:assert");
const { parse } = require("@vue/compiler-dom");
const { parseTemplate, parseWithComments } = require("../src/index.js");

// 1. Direct API parse returns RootNode with elements, text, and interpolation
const ast1 = parse("<div><p>Hello {{ name }}</p></div>");
assert(ast1 && typeof ast1 === "object", "parse should return an AST RootNode object");
assert.strictEqual(ast1.type, 0, "Root AST node type should be 0 (NodeTypes.ROOT)");
assert(Array.isArray(ast1.children), "AST should contain children array");
assert.strictEqual(ast1.children.length, 1, "Root should have 1 child element");

const div = ast1.children[0];
assert.strictEqual(div.type, 1, "Element node type should be 1 (NodeTypes.ELEMENT)");
assert.strictEqual(div.tag, "div", "Element tag should match 'div'");

const p = div.children[0];
assert.strictEqual(p.type, 1, "Nested child should be element");
assert.strictEqual(p.tag, "p", "Nested element tag should be 'p'");
assert.strictEqual(p.children[0].type, 2, "First child of p should be text node (NodeTypes.TEXT)");
assert.strictEqual(p.children[0].content, "Hello ", "Text content should match");
assert.strictEqual(p.children[1].type, 5, "Second child of p should be interpolation (NodeTypes.INTERPOLATION)");
assert.strictEqual(p.children[1].content.content, "name", "Interpolation expression should match 'name'");

// 2. parseTemplate helper parses attributes and directives
const ast2 = parseTemplate('<input type="text" :value="msg" @input="onInput" v-model="val" />');
assert.strictEqual(ast2.children.length, 1, "Template helper should parse input element");
const input = ast2.children[0];
assert.strictEqual(input.tag, "input", "Parsed tag should be input");
assert(Array.isArray(input.props), "Element should have props array");
assert.strictEqual(input.props.length, 4, "Element should parse 4 props");

const attr = input.props.find((prop) => prop.name === "type");
assert(attr && attr.type === 6, "Attribute prop should have type 6 (NodeTypes.ATTRIBUTE)");
assert.strictEqual(attr.value.content, "text", "Attribute value should be 'text'");

const bindDirective = input.props.find((prop) => prop.name === "bind");
assert(bindDirective && bindDirective.type === 7, "v-bind should have type 7 (NodeTypes.DIRECTIVE)");
assert.strictEqual(bindDirective.arg.content, "value", "v-bind argument should be 'value'");

const onDirective = input.props.find((prop) => prop.name === "on");
assert(onDirective && onDirective.type === 7, "v-on should have type 7 (NodeTypes.DIRECTIVE)");
assert.strictEqual(onDirective.arg.content, "input", "v-on argument should be 'input'");

const modelDirective = input.props.find((prop) => prop.name === "model");
assert(modelDirective && modelDirective.type === 7, "v-model should have type 7 (NodeTypes.DIRECTIVE)");
assert.strictEqual(modelDirective.exp.content, "val", "v-model expression should be 'val'");

// 3. parseWithComments helper preserves comment nodes
const ast3 = parseWithComments("<!-- intro note --><div>Main Content</div>");
assert.strictEqual(ast3.children[0].type, 3, "First child should be comment node (NodeTypes.COMMENT)");
assert.strictEqual(ast3.children[0].content, " intro note ", "Comment text content should be preserved");

// 4. parse with custom delimiters
const ast4 = parse("<span>${ customVal }</span>", { delimiters: ["${", "}"] });
const span = ast4.children[0];
assert.strictEqual(span.children[0].type, 5, "Child should be parsed as interpolation using custom delimiters");
assert.strictEqual(span.children[0].content.content, "customVal", "Custom delimiter interpolation content should match");

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