or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

built-in-components.mdcompilation.mderror-handling.mdindex.mdruntime-helpers.mdtransforms.md
tile.json

tessl/npm-vue--compiler-ssr

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/compiler-ssr@3.5.x

To install, run

npx @tessl/cli install tessl/npm-vue--compiler-ssr@3.5.0

index.mddocs/

Vue.js Compiler SSR

Vue.js Compiler SSR is a specialized compilation library that transforms Vue templates into optimized JavaScript code for server-side rendering. It provides a comprehensive transformation system that handles all Vue template features including components, directives, reactive data binding, and advanced features like teleports and suspense, specifically optimized for SSR environments.

Package Information

  • Package Name: @vue/compiler-ssr
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @vue/compiler-ssr

Core Imports

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

For CommonJS:

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

Basic Usage

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

// Compile a Vue template for SSR
const result = compile(`
  <div>
    <h1>{{ title }}</h1>
    <p v-if="showMessage">{{ message }}</p>
  </div>
`, {
  mode: 'function',
  prefixIdentifiers: true
});

console.log(result.code);
// Outputs optimized SSR JavaScript code

Architecture

Vue.js Compiler SSR is built around several key components:

  • Compilation Pipeline: Main compile function that orchestrates the full SSR transformation process
  • Transform System: Comprehensive set of node and directive transforms that convert Vue template features into SSR-optimized code
  • Runtime Helpers: Collection of symbols and utilities that map to server-side rendering helper functions
  • Error Handling: Specialized error codes and messages for SSR-specific compilation issues
  • Context Management: Transform context interface that maintains state throughout the compilation process

Capabilities

Template Compilation

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

function compile(
  source: string | RootNode,
  options?: CompilerOptions
): CodegenResult;

function ssrCodegenTransform(
  ast: RootNode,
  options: CompilerOptions
): void;

Template Compilation

Transform System

Comprehensive transformation system that handles specific Vue template features including elements, components, directives, and control flow structures for SSR rendering.

interface SSRTransformContext {
  root: RootNode;
  options: CompilerOptions;
  body: (JSChildNode | IfStatement)[];
  helpers: Set<symbol>;
  withSlotScopeId: boolean;
  onError: (error: CompilerError) => void;
  helper<T extends symbol>(name: T): T;
  pushStringPart(part: TemplateLiteral['elements'][0]): void;
  pushStatement(statement: IfStatement | CallExpression): void;
}

function ssrCodegenTransform(
  ast: RootNode,
  options: CompilerOptions
): void;

Transform System

Runtime Helpers

Collection of symbolic identifiers and mappings for SSR runtime helper functions that handle specific rendering operations like interpolation, component rendering, and attribute handling.

const SSR_INTERPOLATE: unique symbol;
const SSR_RENDER_COMPONENT: unique symbol;
const SSR_RENDER_ATTRS: unique symbol;
const SSR_RENDER_CLASS: unique symbol;
const SSR_RENDER_STYLE: unique symbol;

const ssrHelpers: Record<symbol, string>;

Runtime Helpers

Error Handling

SSR-specific error handling system with dedicated error codes and messages for compilation issues unique to server-side rendering contexts.

enum SSRErrorCodes {
  X_SSR_UNSAFE_ATTR_NAME = 65,
  X_SSR_NO_TELEPORT_TARGET,
  X_SSR_INVALID_AST_NODE,
}

interface SSRCompilerError extends CompilerError {
  code: SSRErrorCodes;
}

function createSSRCompilerError(
  code: SSRErrorCodes,
  loc?: SourceLocation
): SSRCompilerError;

Error Handling

Built-in Component Support

SSR-specific handling for Vue's built-in components including Teleport, Suspense, Transition, and TransitionGroup during server-side rendering.

function ssrProcessTeleport(
  node: TeleportNode,
  context: SSRTransformContext
): void;

function ssrProcessSuspense(
  node: SuspenseNode,
  context: SSRTransformContext
): void;

function ssrTransformTransition(
  node: ComponentNode,
  context: TransformContext
): void;

function ssrTransformTransitionGroup(
  node: ComponentNode,
  context: TransformContext
): void;

Built-in Components

Processing Functions

Core processing functions that handle specific template nodes and generate appropriate SSR code during transformation.

function processChildren(
  parent: Container,
  context: SSRTransformContext,
  asFragment?: boolean,
  disableNestedFragments?: boolean,
  disableComment?: boolean
): void;

function processChildrenAsStatement(
  parent: Container,
  parentContext: SSRTransformContext,
  asFragment?: boolean,
  withSlotScopeId?: boolean
): BlockStatement;

function ssrProcessElement(
  node: ElementNode,
  context: SSRTransformContext,
  parent: ParentNode,
  slotScopeId?: string
): void;

function ssrProcessComponent(
  node: ComponentNode,
  context: SSRTransformContext,
  parent: ParentNode,
  slotScopeId?: string
): void;

function buildSSRProps(
  props: (AttributeNode | DirectiveNode)[],
  context: SSRTransformContext
): CallExpression | undefined;

Utility Functions

Utility functions and constants used internally by the transform system for advanced use cases.

const rawOptionsMap: WeakMap<RootNode, CompilerOptions>;

Types

// Core types imported from @vue/compiler-dom
interface CompilerOptions {
  mode?: 'module' | 'function';
  prefixIdentifiers?: boolean;
  scopeId?: string;
  ssr?: boolean;
  inSSR?: boolean;
  cacheHandlers?: boolean;
  hoistStatic?: boolean;
  nodeTransforms?: NodeTransform[];
  directiveTransforms?: Record<string, DirectiveTransform>;
  ssrCssVars?: string;
}

interface CodegenResult {
  code: string;
  preamble?: string;
  ast: RootNode;
  map?: SourceMap;
}

interface RootNode {
  type: NodeTypes.ROOT;
  children: TemplateChildNode[];
  helpers: Set<symbol>;
  components: string[];
  directives: string[];
  hoists: (JSChildNode | null)[];
  imports: ImportItem[];
  cached: number;
  temps: number;
  ssrHelpers?: symbol[];
  codegenNode?: TemplateChildNode | JSChildNode | BlockStatement;
}

interface Container {
  children: TemplateChildNode[];
}

interface ElementNode {
  type: NodeTypes.ELEMENT;
  tagType: ElementTypes;
  tag: string;
  props: (AttributeNode | DirectiveNode)[];
  children: TemplateChildNode[];
  loc: SourceLocation;
}

interface ComponentNode {
  type: NodeTypes.ELEMENT;
  tagType: ElementTypes.COMPONENT;
  tag: string;
  props: (AttributeNode | DirectiveNode)[];
  children: TemplateChildNode[];
  loc: SourceLocation;
}

interface ParentNode {
  type: NodeTypes;
  children: TemplateChildNode[];
}

interface AttributeNode {
  type: NodeTypes.ATTRIBUTE;
  name: string;
  value?: TextNode;
  loc: SourceLocation;
}

interface DirectiveNode {
  type: NodeTypes.DIRECTIVE;
  name: string;
  exp?: ExpressionNode;
  arg?: ExpressionNode;
  modifiers: string[];
  loc: SourceLocation;
}

interface BlockStatement {
  type: 'BlockStatement';
  body: (JSChildNode | IfStatement)[];
}

interface CallExpression {
  type: 'CallExpression';
  callee: string | symbol;
  arguments: any[];
}

interface TeleportNode {
  type: NodeTypes.ELEMENT;
  tagType: ElementTypes.COMPONENT;
  tag: 'Teleport' | 'teleport';
  props: (AttributeNode | DirectiveNode)[];
  children: TemplateChildNode[];
  loc: SourceLocation;
}

interface SuspenseNode {
  type: NodeTypes.ELEMENT;
  tagType: ElementTypes.COMPONENT;
  tag: 'Suspense' | 'suspense';
  props: (AttributeNode | DirectiveNode)[];
  children: TemplateChildNode[];
  loc: SourceLocation;
}

interface TransitionNode {
  type: NodeTypes.ELEMENT;
  tagType: ElementTypes.COMPONENT;
  tag: 'Transition' | 'transition' | 'TransitionGroup' | 'transition-group';
  props: (AttributeNode | DirectiveNode)[];
  children: TemplateChildNode[];
  loc: SourceLocation;
}

enum NodeTypes {
  ROOT = 0,
  ELEMENT = 1,
  TEXT = 2,
  COMMENT = 3,
  SIMPLE_EXPRESSION = 4,
  INTERPOLATION = 5,
  ATTRIBUTE = 6,
  DIRECTIVE = 7,
  COMPOUND_EXPRESSION = 8,
  IF = 9,
  IF_BRANCH = 10,
  FOR = 11,
  TEXT_CALL = 12,
  VNODE_CALL = 13,
  JS_CALL_EXPRESSION = 14,
  JS_OBJECT_EXPRESSION = 15,
  JS_PROPERTY = 16,
  JS_ARRAY_EXPRESSION = 17,
  JS_FUNCTION_EXPRESSION = 18,
  JS_CONDITIONAL_EXPRESSION = 19,
  JS_CACHE_EXPRESSION = 20,
  JS_BLOCK_STATEMENT = 21,
  JS_TEMPLATE_LITERAL = 22,
  JS_IF_STATEMENT = 23,
  JS_ASSIGNMENT_EXPRESSION = 24,
  JS_SEQUENCE_EXPRESSION = 25,
  JS_RETURN_STATEMENT = 26,
}

enum ElementTypes {
  ELEMENT = 0,
  COMPONENT = 1,
  SLOT = 2,
  TEMPLATE = 3,
}

interface SourceLocation {
  start: Position;
  end: Position;
  source: string;
}

interface Position {
  column: number;
  line: number;
  offset: number;
}