@vue/compiler-core 3.5.41: transform

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 transform in pkg:npm/%40vue/compiler-core@3.5.41
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/%40vue/compiler-core@3.5.41
Demonstrate these symbols/APIs:
  - transform

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:ba08b3fe68504f4ec38427fdf8e1e09f3ffaf0dc59c041fefb298cbbee6ce9e7","contract":["transform traverses AST nodes in depth-first order invoking node transform functions","node transform functions can return an exit callback executed in reverse order on post-traversal","context.replaceNode replaces current AST node with a replacement node","context.removeNode removes current AST node from its parent container","context.helper registers runtime helper symbols onto root AST helpers set","directiveTransforms dispatches custom directive transformations when used with transformElement","createStructuralDirectiveTransform creates structural directive handler that manages exit callbacks","transform applies default transform preset from getBaseTransformPreset to produce codegenNode"],"goal":"verify transform in pkg:npm/%40vue/compiler-core@3.5.41","kind":"HOW","packages":["pkg:npm/%40vue/compiler-core@3.5.41"],"schemaVersion":1,"symbols":["transform"]},"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-core@3.5.41"],"schemaVersion":1,"subject":"pkg:npm/%40vue/compiler-core@3.5.41","symbols":["transform"],"verifierAdapter":"node-typescript@1"}

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

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

import assert from 'node:assert/strict';
import {
  baseParse,
  transform,
  transformElement,
  createStructuralDirectiveTransform,
  getBaseTransformPreset,
  NodeTypes,
  ElementTypes,
  TO_DISPLAY_STRING,
  CREATE_VNODE
} from '@vue/compiler-core';

// 1. transform traverses AST nodes in depth-first order invoking node transform functions
{
  const ast = baseParse('<div><p>hello</p></div>');
  const visited = [];

  transform(ast, {
    nodeTransforms: [
      (node) => {
        visited.push(node.type);
      }
    ]
  });

  assert.deepEqual(visited, [
    NodeTypes.ROOT,
    NodeTypes.ELEMENT,
    NodeTypes.ELEMENT,
    NodeTypes.TEXT
  ]);
}

// 2. node transform functions can return an exit callback executed in reverse order on post-traversal
{
  const ast = baseParse('<div><p>hello</p></div>');
  const entered = [];
  const exited = [];

  transform(ast, {
    nodeTransforms: [
      (node) => {
        entered.push(node.type);
        return () => {
          exited.push(node.type);
        };
      }
    ]
  });

  assert.deepEqual(entered, [
    NodeTypes.ROOT,
    NodeTypes.ELEMENT,
    NodeTypes.ELEMENT,
    NodeTypes.TEXT
  ]);
  assert.deepEqual(exited, [
    NodeTypes.TEXT,
    NodeTypes.ELEMENT,
    NodeTypes.ELEMENT,
    NodeTypes.ROOT
  ]);
}

// 3. context.replaceNode replaces current AST node with a replacement node
{
  const ast = baseParse('<div><span>old</span></div>');

  transform(ast, {
    nodeTransforms: [
      (node, context) => {
        if (node.type === NodeTypes.ELEMENT && node.tag === 'span') {
          context.replaceNode({
            type: NodeTypes.ELEMENT,
            tag: 'h1',
            tagType: ElementTypes.ELEMENT,
            props: [],
            children: node.children,
            loc: node.loc,
            ns: node.ns
          });
        }
      }
    ]
  });

  assert.equal(ast.children[0].children[0].tag, 'h1');
}

// 4. context.removeNode removes current AST node from its parent container
{
  const ast = baseParse('<div><span id="first"></span><span id="second"></span></div>');

  transform(ast, {
    nodeTransforms: [
      (node, context) => {
        if (node.type === NodeTypes.ELEMENT && node.props.some(p => p.name === 'id' && p.value?.content === 'first')) {
          context.removeNode();
        }
      }
    ]
  });

  assert.equal(ast.children[0].children.length, 1);
  assert.equal(ast.children[0].children[0].props[0].value.content, 'second');
}

// 5. context.helper registers runtime helper symbols onto root AST helpers set
{
  const ast = baseParse('<div>test</div>');

  transform(ast, {
    nodeTransforms: [
      (node, context) => {
        context.helper(TO_DISPLAY_STRING);
        context.helper(CREATE_VNODE);
      }
    ]
  });

  assert.ok(ast.helpers.has(TO_DISPLAY_STRING));
  assert.ok(ast.helpers.has(CREATE_VNODE));
}

// 6. directiveTransforms dispatches custom directive transformations when used with transformElement
{
  const ast = baseParse('<div v-custom:arg.modifier="val"></div>');
  let matchedDir = null;

  transform(ast, {
    nodeTransforms: [transformElement],
    directiveTransforms: {
      custom: (dir, node, context) => {
        matchedDir = dir;
        return {
          props: [],
          needRuntime: false
        };
      }
    }
  });

  assert.ok(matchedDir !== null);
  assert.equal(matchedDir.name, 'custom');
  assert.equal(matchedDir.arg.content, 'arg');
  assert.deepEqual(matchedDir.modifiers.map(m => m.content), ['modifier']);
  assert.equal(matchedDir.exp.content, 'val');
}

// 7. createStructuralDirectiveTransform creates structural directive handler that manages exit callbacks
{
  const ast = baseParse('<div v-custom-struct="condition"><p>body</p></div>');
  let processed = false;

  const structTransform = createStructuralDirectiveTransform(
    'custom-struct',
    (node, dir, context) => {
      processed = true;
      assert.equal(dir.name, 'custom-struct');
      assert.equal(dir.exp.content, 'condition');
      return () => {
        // on exit callback
      };
    }
  );

  transform(ast, {
    nodeTransforms: [structTransform]
  });

  assert.ok(processed);
}

// 8. transform applies default transform preset from getBaseTransformPreset to produce codegenNode
{
  const ast = baseParse('<div><span>{{ msg }}</span></div>');
  const [nodeTransforms, directiveTransforms] = getBaseTransformPreset();

  transform(ast, {
    nodeTransforms,
    directiveTransforms
  });

  assert.ok(ast.codegenNode !== undefined);
  assert.ok(ast.helpers.size > 0);
}