tessl/npm-vue--compiler-ssr

Vue.js server-side rendering compiler that transforms Vue templates into optimized render functions for server-side execution

—

Pending

Overview

Eval results

Files

Template Compilation

Name: tessl/npm-vue--compiler-ssr
Author: tessl

Core compilation functionality that transforms Vue templates or parsed AST into SSR-optimized JavaScript code with full support for all Vue template features.

Capabilities

Compile Function

Main compilation function that transforms Vue templates into SSR-optimized JavaScript code. Handles all Vue template features including components, directives, reactive data binding, and control flow structures.

/**
 * Compiles Vue templates or AST into SSR-optimized JavaScript code
 * @param source - String template or parsed RootNode AST to compile
 * @param options - Compilation options for customizing behavior
 * @returns CodegenResult containing generated JavaScript code and metadata
 */
function compile(
  source: string | RootNode,
  options?: CompilerOptions
): CodegenResult;

Compilation Process:

Parses string templates into AST (if source is string)
Applies SSR-specific transforms to the AST
Generates optimized JavaScript code for server-side rendering
Returns complete codegen result with generated code

Usage Examples:

import { compile } from "@vue/compiler-ssr";

// Basic template compilation
const result = compile(`
  <div class="container">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
`);

// Compilation with options
const result = compile(`
  <div>
    <component :is="dynamicComponent" :props="componentProps" />
    <slot name="content" />
  </div>
`, {
  mode: 'function',
  prefixIdentifiers: true,
  scopeId: 'data-v-12345678'
});

// Compiling pre-parsed AST
import { baseParse } from '@vue/compiler-dom';
const ast = baseParse('<div>{{ message }}</div>');
const result = compile(ast, { mode: 'module' });

Compiler Options

Configuration options that control the compilation behavior and output format.

interface CompilerOptions {
  /** Output mode: 'module' for ES modules, 'function' for function expressions */
  mode?: 'module' | 'function';
  /** Whether to prefix identifiers to avoid name collisions */
  prefixIdentifiers?: boolean;
  /** Scoped CSS identifier for component isolation */
  scopeId?: string;
  /** Enable SSR mode (automatically set to true by compiler-ssr) */
  ssr?: boolean;
  /** Internal SSR flag (automatically set to true by compiler-ssr) */
  inSSR?: boolean;
  /** Whether to cache event handlers (disabled for SSR) */
  cacheHandlers?: boolean;
  /** Whether to hoist static elements (disabled for SSR) */
  hoistStatic?: boolean;
  /** Custom node transform functions */
  nodeTransforms?: NodeTransform[];
  /** Custom directive transform functions */
  directiveTransforms?: Record<string, DirectiveTransform>;
  /** CSS variables expression for SFC <style> integration */
  ssrCssVars?: string;
}

Codegen Result

Result object returned by the compile function containing generated code and metadata.

interface CodegenResult {
  /** Generated JavaScript code for SSR rendering */
  code: string;
  /** Optional preamble code (imports, declarations) */
  preamble?: string;
  /** Transformed AST used for code generation */
  ast: RootNode;
  /** Source map for debugging (when enabled) */
  map?: SourceMap;
}

Advanced Compilation Options

Function Mode vs Module Mode

Function Mode (mode: 'function'):

Generates a function expression
Suitable for runtime compilation
No imports/exports in output

const result = compile(template, { mode: 'function' });
// Output: function render(_ctx, _push, _parent, _attrs) { ... }

Module Mode (mode: 'module'):

Generates ES module with exports
Suitable for build-time compilation
Includes import statements

const result = compile(template, { mode: 'module' });
// Output: import { ssrRenderComponent } from 'vue/server-renderer'
//         export function render(_ctx, _push, _parent, _attrs) { ... }

Scoped Styling Support

When scopeId is provided, the compiler automatically adds scoped attributes to elements:

const result = compile(`<div class="container">Content</div>`, {
  scopeId: 'data-v-12345678'
});
// Generates code that adds data-v-12345678 to the div element

CSS Variables Integration

The ssrCssVars option enables CSS variable injection for SFC <style> blocks:

const result = compile(template, {
  ssrCssVars: 'color: red; background: blue'
});
// Generates code that injects CSS variables during SSR

Processing Functions

Core processing functions that handle specific template nodes during SSR transformation.

Children Processing

Functions for processing child nodes during SSR transformation with optimized string generation.

/**
 * Process child nodes during SSR transformation
 * @param parent - Container node with children to process
 * @param context - SSR transform context
 * @param asFragment - Whether to wrap in fragment comments
 * @param disableNestedFragments - Whether to disable nested fragment optimization
 * @param disableComment - Whether to disable comment generation
 */
function processChildren(
  parent: Container,
  context: SSRTransformContext,
  asFragment?: boolean,
  disableNestedFragments?: boolean,
  disableComment?: boolean
): void;

/**
 * Process child nodes as JavaScript statements
 * @param parent - Container node with children to process
 * @param parentContext - Parent SSR transform context
 * @param asFragment - Whether to wrap in fragment comments  
 * @param withSlotScopeId - Whether to include slot scope IDs
 * @returns Block statement containing generated code
 */
function processChildrenAsStatement(
  parent: Container,
  parentContext: SSRTransformContext,
  asFragment?: boolean,
  withSlotScopeId?: boolean
): BlockStatement;

Usage Example:

import { processChildren, createSSRTransformContext } from "@vue/compiler-ssr";

// Process template children during transformation
const context = createSSRTransformContext(ast, options);
processChildren(templateNode, context, false, false, false);

Element Processing

Functions for processing element and component nodes during SSR transformation.

/**
 * Process element nodes during SSR transformation
 * @param node - Element node to process
 * @param context - SSR transform context
 * @param parent - Parent node for context
 * @param slotScopeId - Optional slot scope identifier
 */
function ssrProcessElement(
  node: ElementNode,
  context: SSRTransformContext,
  parent: ParentNode,
  slotScopeId?: string
): void;

/**
 * Process component nodes during SSR transformation
 * @param node - Component node to process
 * @param context - SSR transform context
 * @param parent - Parent node for context
 * @param slotScopeId - Optional slot scope identifier
 */
function ssrProcessComponent(
  node: ComponentNode,
  context: SSRTransformContext,
  parent: ParentNode,
  slotScopeId?: string
): void;

/**
 * Build SSR-optimized props object from element attributes and directives
 * @param props - Array of attributes and directives
 * @param context - SSR transform context
 * @returns Call expression for props rendering or undefined if no props
 */
function buildSSRProps(
  props: (AttributeNode | DirectiveNode)[],
  context: SSRTransformContext
): CallExpression | undefined;

Install with Tessl CLI