@vue/compiler-dom 3.5.41: parse, parserOptions

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 parse and parserOptions 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:
  - parse
  - parserOptions

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:21a085a87a4ef031b073c21f29335c205da71e6e99896ea091bb99d6a883181e","contract":["assert parse returns an AST RootNode with children for DOM elements, comments, and interpolations","assert parse handles HTML elements with attributes, directives, and self-closing tags","assert parse supports custom parser options including custom delimiters and comments preservation","assert parserOptions provides DOM tag predicates including isVoidTag, isNativeTag, and isPreTag"],"goal":"verify parse and parserOptions in pkg:npm/%40vue/compiler-dom@3.5.41","kind":"HOW","packages":["pkg:npm/%40vue/compiler-dom@3.5.41"],"schemaVersion":1,"symbols":["parse","parserOptions"]},"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":["parse","parserOptions"],"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 parse and parserOptions in pkg:npm/%40vue/compiler-dom@3.5.41",
  "kind": "HOW",
  "packages": [
    "pkg:npm/%40vue/compiler-dom@3.5.41"
  ],
  "symbols": [
    "parse",
    "parserOptions"
  ]
}

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

/**
 * Parses a Vue template string into a DOM AST RootNode.
 *
 * @param {string} template - The HTML/Vue template string.
 * @param {object} [options={}] - Custom compiler and parser options.
 * @returns {object} AST RootNode.
 */
function parseTemplate(template, options = {}) {
  return parse(template, options);
}

/**
 * Retrieves the DOM parser options containing tag predicates and configuration.
 *
 * @returns {object} The DOM parserOptions object.
 */
function getDOMParserOptions() {
  return parserOptions;
}

/**
 * Checks if a given tag is a void HTML element (such as img, input, br).
 *
 * @param {string} tag - Tag name.
 * @returns {boolean} True if void element.
 */
function isVoidTag(tag) {
  return parserOptions.isVoidTag(tag);
}

/**
 * Checks if a given tag is a native HTML or SVG tag.
 *
 * @param {string} tag - Tag name.
 * @returns {boolean} True if native tag.
 */
function isNativeTag(tag) {
  return parserOptions.isNativeTag(tag);
}

/**
 * Checks if a given tag is a <pre> element.
 *
 * @param {string} tag - Tag name.
 * @returns {boolean} True if pre tag.
 */
function isPreTag(tag) {
  return parserOptions.isPreTag(tag);
}

module.exports = {
  parseTemplate,
  getDOMParserOptions,
  isVoidTag,
  isNativeTag,
  isPreTag,
};

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

// 1. Direct API and helper parse verification: elements, comments, interpolations
const template = '<div class="app"><!-- section comment --><h1>{{ title }}</h1><span>Static</span></div>';
const ast = parseTemplate(template, { comments: true });

assert(ast && typeof ast === "object", "parseTemplate should return RootNode");
assert.strictEqual(ast.type, 0, "Root node type should be 0 (NodeTypes.ROOT)");
assert(Array.isArray(ast.children), "RootNode should contain children array");
assert.strictEqual(ast.children.length, 1, "Should have 1 top-level element");

const rootEl = ast.children[0];
assert.strictEqual(rootEl.type, 1, "Top-level child should be an ElementNode (type 1)");
assert.strictEqual(rootEl.tag, "div");
assert.strictEqual(rootEl.props.length, 1);
assert.strictEqual(rootEl.props[0].name, "class");
assert.strictEqual(rootEl.props[0].value.content, "app");

// Check nested nodes: comment, h1 with interpolation, span
assert.strictEqual(rootEl.children.length, 3);
assert.strictEqual(rootEl.children[0].type, 3, "First child should be CommentNode (type 3)");
assert.strictEqual(rootEl.children[0].content, " section comment ");

const h1El = rootEl.children[1];
assert.strictEqual(h1El.tag, "h1");
assert.strictEqual(h1El.children[0].type, 5, "Child of h1 should be InterpolationNode (type 5)");
assert.strictEqual(h1El.children[0].content.content, "title");

// 2. Parse HTML elements with attributes, directives, and self-closing tags
const directiveTemplate = '<input v-model="name" @input="onInput" required /><img src="avatar.png">';
const directiveAst = parse(directiveTemplate);

assert.strictEqual(directiveAst.children.length, 2, "Should parse two sibling elements");

const inputEl = directiveAst.children[0];
assert.strictEqual(inputEl.tag, "input");
assert.strictEqual(inputEl.isSelfClosing, true, "input tag should be marked as self-closing");

const vModelDirective = inputEl.props.find((p) => p.type === 7 && p.name === "model");
assert(vModelDirective, "Should parse v-model directive (type 7)");
assert.strictEqual(vModelDirective.exp.content, "name");

const vOnDirective = inputEl.props.find((p) => p.type === 7 && p.name === "on");
assert(vOnDirective, "Should parse @input / v-on directive (type 7)");
assert.strictEqual(vOnDirective.arg.content, "input");
assert.strictEqual(vOnDirective.exp.content, "onInput");

const requiredAttr = inputEl.props.find((p) => p.type === 6 && p.name === "required");
assert(requiredAttr, "Should parse plain attribute (type 6)");

const imgEl = directiveAst.children[1];
assert.strictEqual(imgEl.tag, "img");
assert.strictEqual(isVoidTag("img"), true);

// 3. Custom parser options verification (custom delimiters and whitespace)
const customAst = parse("<p>${ customVar }</p>", { delimiters: ["${", "}"] });
const pEl = customAst.children[0];
assert.strictEqual(pEl.children[0].type, 5, "Should recognize custom interpolation delimiter");
assert.strictEqual(pEl.children[0].content.content, "customVar");

// 4. parserOptions DOM tag predicates verification
const domOptions = getDOMParserOptions();
assert(domOptions && typeof domOptions === "object", "getDOMParserOptions should return parserOptions");

assert.strictEqual(typeof parserOptions.isVoidTag, "function");
assert.strictEqual(typeof parserOptions.isNativeTag, "function");
assert.strictEqual(typeof parserOptions.isPreTag, "function");

assert.strictEqual(isVoidTag("img"), true, "img is a void tag");
assert.strictEqual(isVoidTag("input"), true, "input is a void tag");
assert.strictEqual(isVoidTag("br"), true, "br is a void tag");
assert.strictEqual(isVoidTag("div"), false, "div is not a void tag");

assert.strictEqual(isNativeTag("div"), true, "div is a native tag");
assert.strictEqual(isNativeTag("span"), true, "span is a native tag");
assert.strictEqual(isNativeTag("svg"), true, "svg is a native tag");
assert.strictEqual(isNativeTag("custom-component"), false, "custom-component is not a native tag");

assert.strictEqual(isPreTag("pre"), true, "pre is a pre tag");
assert.strictEqual(isPreTag("div"), false, "div is not a pre tag");

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