@vue/compiler-dom 3.5.41: ElementTypes

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

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:fd5b89a62522d984fe9a6aeb7fd14c8bea3684b05f3c71608a1a163d0a05731a","contract":["assert ElementTypes provides enum constants for ELEMENT, COMPONENT, SLOT, and TEMPLATE","assert parser assigns ElementTypes.ELEMENT to standard HTML tags","assert parser assigns ElementTypes.COMPONENT to custom component tags","assert parser assigns ElementTypes.SLOT to slot tags","assert parser assigns ElementTypes.TEMPLATE to directive-bearing template tags","assert categorizeTemplateElements groups AST nodes by ElementTypes"],"goal":"verify @vue/compiler-dom.ElementTypes 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.ElementTypes"]},"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.ElementTypes"],"verifierAdapter":"node-typescript@1"}

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

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

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

/**
 * Classifies an AST node according to ElementTypes.
 *
 * @param {object} node - An AST node from @vue/compiler-dom.
 * @returns {string|null} The element type name ('ELEMENT', 'COMPONENT', 'SLOT', 'TEMPLATE') or null if not an element.
 */
function classifyElementType(node) {
  if (!node || typeof node.tagType !== "number") {
    return null;
  }
  switch (node.tagType) {
    case ElementTypes.ELEMENT:
      return "ELEMENT";
    case ElementTypes.COMPONENT:
      return "COMPONENT";
    case ElementTypes.SLOT:
      return "SLOT";
    case ElementTypes.TEMPLATE:
      return "TEMPLATE";
    default:
      return null;
  }
}

/**
 * Parses a template and collects all elements categorized by their ElementTypes.
 *
 * @param {string} template - Vue template string.
 * @returns {Record<string, Array<object>>} Elements grouped by type.
 */
function categorizeTemplateElements(template) {
  const ast = parse(template);
  const categories = {
    elements: [],
    components: [],
    slots: [],
    templates: [],
  };

  function traverse(nodes) {
    if (!Array.isArray(nodes)) return;
    for (const node of nodes) {
      if (node && typeof node.tagType === "number") {
        if (node.tagType === ElementTypes.ELEMENT) {
          categories.elements.push(node);
        } else if (node.tagType === ElementTypes.COMPONENT) {
          categories.components.push(node);
        } else if (node.tagType === ElementTypes.SLOT) {
          categories.slots.push(node);
        } else if (node.tagType === ElementTypes.TEMPLATE) {
          categories.templates.push(node);
        }
      }
      if (node && Array.isArray(node.children)) {
        traverse(node.children);
      }
    }
  }

  traverse(ast.children);
  return categories;
}

module.exports = {
  ElementTypes,
  classifyElementType,
  categorizeTemplateElements,
};

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

// 1. Verify ElementTypes enum values and reverse mappings
assert.strictEqual(ElementTypes.ELEMENT, 0, "ElementTypes.ELEMENT must be 0");
assert.strictEqual(ElementTypes.COMPONENT, 1, "ElementTypes.COMPONENT must be 1");
assert.strictEqual(ElementTypes.SLOT, 2, "ElementTypes.SLOT must be 2");
assert.strictEqual(ElementTypes.TEMPLATE, 3, "ElementTypes.TEMPLATE must be 3");

assert.strictEqual(ElementTypes[0], "ELEMENT", "Reverse mapping for 0 must be ELEMENT");
assert.strictEqual(ElementTypes[1], "COMPONENT", "Reverse mapping for 1 must be COMPONENT");
assert.strictEqual(ElementTypes[2], "SLOT", "Reverse mapping for 2 must be SLOT");
assert.strictEqual(ElementTypes[3], "TEMPLATE", "Reverse mapping for 3 must be TEMPLATE");

// 2. Verify standard HTML elements have ElementTypes.ELEMENT
const elementAst = parse("<section class=\"container\"><h1>Title</h1><p>Text</p></section>");
const rootElement = elementAst.children[0];
assert.strictEqual(rootElement.tagType, ElementTypes.ELEMENT, "Standard HTML element must have tagType ELEMENT");
assert.strictEqual(classifyElementType(rootElement), "ELEMENT", "classifyElementType must return ELEMENT for section");
assert.strictEqual(classifyElementType(rootElement.children[0]), "ELEMENT", "classifyElementType must return ELEMENT for h1");

// 3. Verify custom and PascalCase components have ElementTypes.COMPONENT
const componentAst = parse("<user-profile :user=\"user\"><UserProfileCard /></user-profile>");
const rootComponent = componentAst.children[0];
assert.strictEqual(rootComponent.tagType, ElementTypes.COMPONENT, "Custom kebab-case element must have tagType COMPONENT");
assert.strictEqual(classifyElementType(rootComponent), "COMPONENT", "classifyElementType must return COMPONENT");
assert.strictEqual(rootComponent.children[0].tagType, ElementTypes.COMPONENT, "PascalCase element must have tagType COMPONENT");

// 4. Verify slot elements have ElementTypes.SLOT
const slotAst = parse("<slot name=\"header\" :item=\"item\">Default</slot>");
const rootSlot = slotAst.children[0];
assert.strictEqual(rootSlot.tagType, ElementTypes.SLOT, "Slot element must have tagType SLOT");
assert.strictEqual(classifyElementType(rootSlot), "SLOT", "classifyElementType must return SLOT");

// 5. Verify directive-bearing template elements have ElementTypes.TEMPLATE
const templateAst = parse("<template #header=\"{ item }\"><span>{{ item }}</span></template>");
const rootTemplate = templateAst.children[0];
assert.strictEqual(rootTemplate.tagType, ElementTypes.TEMPLATE, "Directive-bearing template element must have tagType TEMPLATE");
assert.strictEqual(classifyElementType(rootTemplate), "TEMPLATE", "classifyElementType must return TEMPLATE");

// 6. Verify categorizeTemplateElements helper with a complex template tree
const complexTemplate = `
<div>
  <nav-bar title="App" />
  <main>
    <slot name="content" />
    <template v-if="showFooter">
      <footer><p>Footer</p></footer>
    </template>
  </main>
</div>
`;
const categorized = categorizeTemplateElements(complexTemplate);
assert.strictEqual(categorized.elements.length, 4, "Should find 4 standard elements: div, main, footer, p");
assert.strictEqual(categorized.components.length, 1, "Should find 1 component: nav-bar");
assert.strictEqual(categorized.slots.length, 1, "Should find 1 slot: slot");
assert.strictEqual(categorized.templates.length, 1, "Should find 1 template: template v-if");

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