CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue--compiler-ssr

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/compiler-ssr@3.5.x
Publish Source
CLI
Badge
tessl/npm-vue--compiler-ssr badge