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

Transform System

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

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

Capabilities

SSR Codegen Transform

Main transform function that converts the template AST into SSR-specific JavaScript AST by replacing the original codegenNode with SSR-optimized code generation.

/**
 * Main SSR codegen transform that converts template AST to SSR-specific JavaScript AST
 * @param ast - Root AST node to transform
 * @param options - Compiler options for transformation
 */
function ssrCodegenTransform(
  ast: RootNode,
  options: CompilerOptions
): void;

Transform Context

Context object that maintains state and provides utilities during the SSR transformation process.

interface SSRTransformContext {
  /** Root AST node being transformed */
  root: RootNode;
  /** Compiler options for the transformation */
  options: CompilerOptions;
  /** Generated JavaScript statements and expressions */
  body: (JSChildNode | IfStatement)[];
  /** Set of runtime helpers used in the transformation */
  helpers: Set<symbol>;
  /** Whether to include slot scope IDs */
  withSlotScopeId: boolean;
  /** Error handler for transformation errors */
  onError: (error: CompilerError) => void;
  /** Register and return a runtime helper symbol */
  helper<T extends symbol>(name: T): T;
  /** Add a string part to the current template literal */
  pushStringPart(part: TemplateLiteral['elements'][0]): void;
  /** Add a JavaScript statement to the output */
  pushStatement(statement: IfStatement | CallExpression): void;
}

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;

Node Transforms

Element Transform

Transforms element nodes (HTML tags) for SSR rendering, handling attributes, props, and child content.

/**
 * Transform element nodes for SSR rendering
 * Handles HTML elements, attributes, and nested content
 */
const ssrTransformElement: NodeTransform;

/**
 * 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;

/**
 * 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;

Component Transform

Transforms component nodes for SSR rendering, handling component props, slots, and lifecycle.

/**
 * Transform component nodes for SSR rendering
 * Handles Vue components, props, slots, and component-specific features
 */
const ssrTransformComponent: NodeTransform;

/**
 * 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;

Conditional Rendering Transform

Transforms v-if/v-else-if/v-else directives for SSR conditional rendering.

/**
 * Transform v-if conditional nodes for SSR rendering
 * Handles conditional logic and branch processing
 */
const ssrTransformIf: NodeTransform;

/**
 * Process v-if nodes during SSR transformation
 * @param node - If node to process
 * @param context - SSR transform context
 * @param disableNestedFragments - Whether to disable nested fragment optimization
 */
function ssrProcessIf(
  node: IfNode,
  context: SSRTransformContext,
  disableNestedFragments?: boolean
): void;

List Rendering Transform

Transforms v-for directives for SSR list rendering with proper iteration handling.

/**
 * Transform v-for loop nodes for SSR rendering
 * Handles list iteration and scoped variables
 */
const ssrTransformFor: NodeTransform;

/**
 * Process v-for nodes during SSR transformation
 * @param node - For node to process
 * @param context - SSR transform context
 * @param disableNestedFragments - Whether to disable nested fragment optimization
 */
function ssrProcessFor(
  node: ForNode,
  context: SSRTransformContext,
  disableNestedFragments?: boolean
): void;

Slot Transform

Transforms slot outlets and slot content for SSR rendering.

/**
 * Transform slot outlet nodes for SSR rendering
 * Handles slot rendering and fallback content
 */
const ssrTransformSlotOutlet: NodeTransform;

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

Advanced Feature Transforms

Transforms for advanced Vue features like teleport, suspense, and transitions.

/**
 * Process teleport nodes during SSR transformation
 * @param node - Teleport node to process
 * @param context - SSR transform context
 */
function ssrProcessTeleport(
  node: TeleportNode,
  context: SSRTransformContext
): void;

/**
 * Process suspense nodes during SSR transformation
 * @param node - Suspense node to process
 * @param context - SSR transform context
 */
function ssrProcessSuspense(
  node: SuspenseNode,
  context: SSRTransformContext
): void;

/**
 * Transform transition nodes for SSR rendering
 * @param node - Component node representing transition
 * @param context - Transform context
 */
function ssrTransformTransition(
  node: ComponentNode,
  context: TransformContext
): void;

/**
 * Transform transition-group nodes for SSR rendering
 * @param node - Component node representing transition-group
 * @param context - Transform context
 */
function ssrTransformTransitionGroup(
  node: ComponentNode,
  context: TransformContext
): void;

/**
 * Transform suspense nodes for SSR rendering
 * @param node - Component node representing suspense
 * @param context - Transform context
 */
function ssrTransformSuspense(
  node: ComponentNode,
  context: TransformContext
): void;

Directive Transforms

Model Directive Transform

Transforms v-model directive for SSR form input handling.

/**
 * Transform v-model directive for SSR rendering
 * Handles form input binding and value synchronization
 */
const ssrTransformModel: DirectiveTransform;

Show Directive Transform

Transforms v-show directive for SSR conditional display.

/**
 * Transform v-show directive for SSR rendering
 * Handles conditional display with CSS display property
 */
const ssrTransformShow: DirectiveTransform;

Attribute Injection Transforms

Transforms for injecting fallthrough attributes and CSS variables.

/**
 * Inject fallthrough attributes for SSR rendering
 * Handles attribute inheritance for components
 */
const ssrInjectFallthroughAttrs: NodeTransform;

/**
 * Inject CSS variable handling for SSR rendering
 * Handles SFC <style> CSS variable integration
 */
const ssrInjectCssVars: NodeTransform;

Data Management

Built-in Component Transforms

Transforms for advanced Vue features like teleport, suspense, and transitions.

/**
 * Process teleport nodes during SSR transformation
 * @param node - Teleport node to process
 * @param context - SSR transform context
 */
function ssrProcessTeleport(
  node: TeleportNode,
  context: SSRTransformContext
): void;

/**
 * Process suspense nodes during SSR transformation
 * @param node - Suspense node to process
 * @param context - SSR transform context
 */
function ssrProcessSuspense(
  node: SuspenseNode,
  context: SSRTransformContext
): void;

/**
 * Transform transition nodes for SSR rendering
 * @param node - Component node representing transition
 * @param context - Transform context
 */
function ssrTransformTransition(
  node: ComponentNode,
  context: TransformContext
): void;

/**
 * Transform transition-group nodes for SSR rendering
 * @param node - Component node representing transition-group
 * @param context - Transform context
 */
function ssrTransformTransitionGroup(
  node: ComponentNode,
  context: TransformContext
): void;

/**
 * Transform suspense nodes for SSR rendering
 * @param node - Component node representing suspense
 * @param context - Transform context
 */
function ssrTransformSuspense(
  node: ComponentNode,
  context: TransformContext
): void;

Raw Options Map

WeakMap that stores raw compiler options for AST nodes, used during sub-transformations on slot vnode branches.

/**
 * Stores raw compiler options for AST nodes
 * Used during sub-transformations on slot vnode branches
 */
const rawOptionsMap: WeakMap<RootNode, CompilerOptions>;

Install with Tessl CLI