@vue/compiler-ssr 3.5.41: compile Vue template for server-side rendering with @vue/compiler-ssr

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: compile Vue template for server-side rendering with @vue/compiler-ssr
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/%40vue/compiler-ssr@3.5.41
Demonstrate these symbols/APIs:
  - compile
Constraints:
  - executionContext: node
Required runtime conditions:
  - ecosystem: npm
  - language: javascript
  - moduleSystem: cjs
  - packageManager: npm@10.9.8
  - runtime: node@22.23.2

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:e20f582c7915ab3432b252e105165784978c80de58d1c25b62da112abb11df0f","constraints":{"executionContext":"node"},"contract":["compile transforms template to SSR render function code string returning preamble, code, and ast","compile outputs ES module export and import statements when mode is set to module","compile transforms v-if and v-for structural directives into server rendering conditionals and iteration loops","compile attaches scoped CSS attribute identifier to elements when scopeId option is provided","compile generates version 3 source map with mappings when sourceMap option is enabled","compile throws compiler SyntaxError when encountering unclosed or malformed HTML elements"],"goal":"compile Vue template for server-side rendering with @vue/compiler-ssr","kind":"HOW","packages":["pkg:npm/%40vue/compiler-ssr@3.5.41"],"schemaVersion":1,"symbols":["compile"]},"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-ssr@3.5.41"],"schemaVersion":1,"subject":"pkg:npm/%40vue/compiler-ssr@3.5.41","symbols":["compile"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-vue-compiler-ssr",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-vue-compiler-ssr",
      "version": "1.0.0",
      "license": "MIT-0",
      "dependencies": {
        "@vue/compiler-ssr": "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/compiler-ssr": {
      "version": "3.5.41",
      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.41.tgz",
      "integrity": "sha512-U3v5OejKEGqOI0Wy0+Sz7hGuIFZHA4LSXzrNM3IMIeDyJEBBfTpX26n3SDgToRpP2bLc9FfI2j/kSgcJ8Emq5A==",
      "license": "MIT",
      "dependencies": {
        "@vue/compiler-dom": "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-ssr",
  "version": "1.0.0",
  "description": "compile Vue template for server-side rendering with @vue/compiler-ssr",
  "main": "src/index.js",
  "scripts": {
    "test": "node test/contract.js"
  },
  "dependencies": {
    "@vue/compiler-ssr": "3.5.41"
  },
  "license": "MIT-0"
}

{
  "schemaVersion": 1,
  "goal": "compile Vue template for server-side rendering with @vue/compiler-ssr",
  "kind": "HOW",
  "packages": [
    "pkg:npm/%40vue/compiler-ssr@3.5.41"
  ],
  "symbols": [
    "compile"
  ],
  "constraints": {
    "executionContext": "node"
  },
  "runtimeConditions": {
    "ecosystem": "npm",
    "language": "javascript",
    "moduleSystem": "cjs",
    "packageManager": "npm@10.9.8",
    "runtime": "node@22.23.2"
  }
}

const { compile } = require('@vue/compiler-ssr');

/**
 * Compiles a Vue template to a server-side rendering (SSR) function.
 *
 * @param {string} template - The Vue template HTML string.
 * @param {object} [options={}] - Optional compiler options.
 * @returns {object} The compilation result containing code, ast, preamble, and map.
 */
function compileSSRTemplate(template, options = {}) {
  return compile(template, options);
}

/**
 * Compiles a Vue template in ES module mode.
 *
 * @param {string} template - The Vue template HTML string.
 * @param {object} [options={}] - Optional compiler options.
 * @returns {object} The compilation result with ESM import/export statements.
 */
function compileSSRModule(template, options = {}) {
  return compile(template, {
    ...options,
    mode: 'module'
  });
}

/**
 * Compiles a Vue template with scoped CSS styling attribute.
 *
 * @param {string} template - The Vue template HTML string.
 * @param {string} scopeId - Scoped CSS identifier (e.g. data-v-xxxxxx).
 * @param {object} [options={}] - Optional compiler options.
 * @returns {object} The compilation result with scoped attribute injected.
 */
function compileSSRScope(template, scopeId, options = {}) {
  return compile(template, {
    ...options,
    scopeId
  });
}

/**
 * Compiles a Vue template and generates a source map.
 *
 * @param {string} template - The Vue template HTML string.
 * @param {string} [filename='component.vue'] - Filename for source map attribution.
 * @param {object} [options={}] - Optional compiler options.
 * @returns {object} The compilation result including sourcemap object.
 */
function compileSSRWithSourceMap(template, filename = 'component.vue', options = {}) {
  return compile(template, {
    ...options,
    filename,
    sourceMap: true
  });
}

module.exports = {
  compileSSRTemplate,
  compileSSRModule,
  compileSSRScope,
  compileSSRWithSourceMap
};

const assert = require('assert');
const {
  compileSSRTemplate,
  compileSSRModule,
  compileSSRScope,
  compileSSRWithSourceMap
} = require('../src/index');

// 1. compile transforms template to SSR render function code string returning preamble, code, and ast
{
  const template = '<div class="greeting">Hello {{ username }}</div>';
  const result = compileSSRTemplate(template);
  assert(result !== null && typeof result === 'object', 'Compilation result must be an object');
  assert.strictEqual(typeof result.code, 'string', 'Compilation result must contain code string');
  assert(result.code.includes('ssrRender'), 'Generated code must include ssrRender function');
  assert(result.code.includes('ssrInterpolate'), 'Generated code must include ssrInterpolate helper');
  assert(result.ast !== null && typeof result.ast === 'object', 'Result must contain AST object');
  assert.strictEqual(result.ast.type, 0, 'AST root node type should be ROOT (0)');
}

// 2. compile outputs ES module export and import statements when mode is set to module
{
  const template = '<button :disabled="isDisabled">{{ label }}</button>';
  const result = compileSSRModule(template);
  assert(result !== null && typeof result === 'object', 'Module compilation result must be an object');
  assert.strictEqual(typeof result.code, 'string', 'Module result must contain code string');
  assert(result.code.includes('import {'), 'Module code must contain ES import statement');
  assert(result.code.includes('export function ssrRender'), 'Module code must contain export function statement');
  assert(!result.code.includes('require('), 'Module code must not contain CommonJS require');
}

// 3. compile transforms v-if and v-for structural directives into server rendering conditionals and iteration loops
{
  const template = '<div><p v-if="isActive">Active</p><span v-else>Inactive</span><ul><li v-for="user in users" :key="user.id">{{ user.name }}</li></ul></div>';
  const result = compileSSRTemplate(template);
  assert(result !== null, 'Directive compilation result must not be null');
  assert(result.code.includes('if (_ctx.isActive)'), 'Generated SSR code must contain if branch for v-if');
  assert(result.code.includes('ssrRenderList'), 'Generated SSR code must contain ssrRenderList for v-for');
  assert(result.code.includes('<!--[-->'), 'Generated SSR code must wrap list in fragment comments');
}

// 4. compile attaches scoped CSS attribute identifier to elements when scopeId option is provided
{
  const scope = 'data-v-testscope';
  const template = '<section><h1>Title</h1><p>Content</p></section>';
  const result = compileSSRScope(template, scope);
  assert(result !== null, 'Scoped compilation result must not be null');
  assert(result.code.includes(scope), 'Generated HTML must include scopeId');
  assert(result.code.includes('<h1 data-v-testscope>Title</h1><p data-v-testscope>Content</p>'), 'Elements in template should contain scopeId');
}

// 5. compile generates version 3 source map with mappings when sourceMap option is enabled
{
  const template = '<div><span>{{ counter }}</span></div>';
  const filename = 'test-component.vue';
  const result = compileSSRWithSourceMap(template, filename);
  assert(result !== null, 'Source map result must not be null');
  assert(result.map !== null && typeof result.map === 'object', 'Sourcemap object must exist');
  assert.strictEqual(result.map.version, 3, 'Sourcemap version must be 3');
  assert(Array.isArray(result.map.sources), 'Sourcemap sources must be an array');
  assert(result.map.sources.includes(filename), 'Sourcemap sources must include filename');
  assert.strictEqual(typeof result.map.mappings, 'string', 'Sourcemap mappings must be a string');
  assert(result.map.mappings.length > 0, 'Sourcemap mappings must not be empty');
}

// 6. compile throws compiler SyntaxError when encountering unclosed or malformed HTML elements
{
  const malformedTemplate = '<div><span>Missing end tag</div>';
  assert.throws(
    () => {
      compileSSRTemplate(malformedTemplate);
    },
    (err) => {
      return err instanceof SyntaxError && typeof err.code === 'number' && err.message.includes('Element is missing end tag');
    },
    'Malformed template must throw SyntaxError with compiler error code'
  );
}

console.log('All contract assertions passed successfully.');