@vue/compiler-core 3.5.41: generate JavaScript render function code from transformed AST with generate in @vue/compiler-core

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: generate JavaScript render function code from transformed AST with generate in @vue/compiler-core
Kind: HOW

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

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:606d5f8c576ecb6e7f4e9b2b940dc3126714eac5d2f11ff9b9c607b49eea41ca","contract":["generate returns an object with ast, code, preamble, and map properties","generate in default function mode produces render function using Vue runtime global and with clause","generate with runtimeGlobalName customizes the global identifier for runtime helpers","generate in module mode produces ES module import statements from vue and export function render","generate with runtimeModuleName customizes the import source package specifier","generate with inline mode produces arrow function render expression without export declaration","generate with sourceMap enabled produces a valid SourceMap object containing mappings and sources","generate compiles manually constructed AST codegenNode into valid JavaScript code"],"goal":"generate JavaScript render function code from transformed AST with generate in @vue/compiler-core","kind":"HOW","packages":["pkg:npm/%40vue/compiler-core@3.5.41"],"schemaVersion":1,"symbols":["generate"]},"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":["generate"],"verifierAdapter":"node-typescript@1"}

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

{
  "schemaVersion": 1,
  "goal": "generate JavaScript render function code from transformed AST with generate in @vue/compiler-core",
  "kind": "HOW",
  "packages": [
    "pkg:npm/%40vue/compiler-core@3.5.41"
  ],
  "symbols": [
    "generate"
  ]
}

import assert from 'node:assert/strict';
import {
  baseParse,
  transform,
  getBaseTransformPreset,
  generate,
  createRoot,
  createVNodeCall,
  createSimpleExpression,
  CREATE_ELEMENT_VNODE
} from '@vue/compiler-core';

// Helper to parse and transform template into an AST with codegenNode
function compileToTransformedAST(template, options = {}) {
  const ast = baseParse(template);
  const [nodeTransforms, directiveTransforms] = getBaseTransformPreset();
  transform(ast, {
    nodeTransforms,
    directiveTransforms,
    ...options
  });
  return ast;
}

// 1. generate returns an object with ast, code, preamble, and map properties
{
  const ast = compileToTransformedAST('<div><p>Hello</p></div>');
  const result = generate(ast);

  assert.ok(typeof result === 'object' && result !== null);
  assert.equal(result.ast, ast);
  assert.ok(typeof result.code === 'string');
  assert.ok(typeof result.preamble === 'string');
  assert.equal(result.map, undefined);
}

// 2. generate in default function mode produces render function using Vue runtime global and with clause
{
  const ast = compileToTransformedAST('<div><p>{{ msg }}</p></div>');
  const result = generate(ast, { 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)'));
  assert.ok(result.code.includes('toDisplayString'));
}

// 3. generate with runtimeGlobalName customizes the global identifier for runtime helpers
{
  const ast = compileToTransformedAST('<span>Custom Global</span>');
  const result = generate(ast, {
    mode: 'function',
    runtimeGlobalName: 'CustomVueApp'
  });

  assert.ok(result.code.includes('const _Vue = CustomVueApp'));
  assert.ok(!result.code.includes('const _Vue = Vue'));
}

// 4. generate in module mode produces ES module import statements from vue and export function render
{
  const ast = compileToTransformedAST('<div><p>{{ title }}</p></div>', {
    prefixIdentifiers: true
  });
  const result = generate(ast, {
    mode: 'module',
    prefixIdentifiers: true
  });

  assert.ok(result.code.startsWith('import '));
  assert.ok(result.code.includes('from "vue"'));
  assert.ok(result.code.includes('export function render(_ctx, _cache)'));
  assert.ok(!result.code.includes('with (_ctx)'));
}

// 5. generate with runtimeModuleName customizes the import source package specifier
{
  const ast = compileToTransformedAST('<h1>{{ heading }}</h1>', {
    prefixIdentifiers: true
  });
  const result = generate(ast, {
    mode: 'module',
    runtimeModuleName: '@custom/runtime-core',
    prefixIdentifiers: true
  });

  assert.ok(result.code.includes('from "@custom/runtime-core"'));
  assert.ok(!result.code.includes('from "vue"'));
  assert.ok(result.code.includes('export function render'));
}

// 6. generate with inline mode produces arrow function render expression without export declaration
{
  const ast = compileToTransformedAST('<div><span>Inline</span></div>', {
    prefixIdentifiers: true,
    inline: true
  });
  const result = generate(ast, {
    mode: 'module',
    prefixIdentifiers: true,
    inline: true
  });

  assert.ok(result.code.startsWith('(_ctx, _cache) =>'));
  assert.ok(!result.code.includes('export function render'));
}

// 7. generate with sourceMap enabled produces a valid SourceMap object containing mappings and sources
{
  const ast = compileToTransformedAST('<div>SourceMap Test</div>');
  const result = generate(ast, {
    sourceMap: true,
    filename: 'TestComponent.vue'
  });

  assert.ok(result.map !== undefined);
  assert.equal(result.map.version, 3);
  assert.deepEqual(result.map.sources, ['TestComponent.vue']);
  assert.ok(typeof result.map.mappings === 'string');
  assert.ok(result.map.mappings.length > 0);
}

// 8. generate compiles manually constructed AST codegenNode into valid JavaScript code
{
  const root = createRoot([]);
  root.codegenNode = createVNodeCall(
    null,
    createSimpleExpression('div', true),
    undefined,
    createSimpleExpression('custom codegen', true)
  );
  root.helpers.add(CREATE_ELEMENT_VNODE);

  const result = generate(root, { mode: 'module' });

  assert.ok(result.code.includes('import { createElementVNode as _createElementVNode } from "vue"'));
  assert.ok(result.code.includes('export function render(_ctx, _cache)'));
  assert.ok(result.code.includes('_createElementVNode("div", null, "custom codegen")'));
}