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

Built-in Component Support

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

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

Capabilities

Teleport Processing

Handles Vue teleport component during SSR transformation, managing teleport target handling and content rendering.

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

Key Features:

Validates required 'to' prop for teleport target
Handles teleport content rendering in SSR context
Manages teleport target resolution during compilation
Generates appropriate error messages for invalid teleport usage

Usage Notes:

Teleport components require a valid 'to' prop
Missing 'to' prop triggers X_SSR_NO_TELEPORT_TARGET error
Teleport content is rendered inline during SSR

Suspense Processing

Handles Vue suspense component during SSR transformation, managing async component rendering and fallback content.

/**
 * 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 suspense nodes for SSR rendering
 * @param node - Component node representing suspense
 * @param context - Transform context
 */
function ssrTransformSuspense(
  node: ComponentNode,
  context: TransformContext
): void;

Key Features:

Handles async component resolution during SSR
Manages fallback content rendering
Processes suspense boundaries for server-side rendering
Generates code for suspense component lifecycle

Usage Notes:

Suspense components render synchronously during SSR
Fallback content may be used during initial server rendering
Async components are resolved before generating final HTML

Transition Processing

Handles Vue transition and transition-group components during SSR transformation.

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

Key Features:

Processes transition components for SSR compatibility
Handles transition-group list transitions
Manages transition props and lifecycle hooks
Generates appropriate SSR-compatible output

Usage Notes:

Transition animations are not active during SSR
Transition components render their content directly
CSS classes and styles are preserved for client-side hydration

Built-in Component Types

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;
}

Error Handling

Built-in component processing includes specific error handling for common issues:

Teleport without target: X_SSR_NO_TELEPORT_TARGET error when teleport lacks 'to' prop
Invalid component structure: X_SSR_INVALID_AST_NODE error for malformed built-in components
Unsupported features: Graceful handling of client-only features during SSR

Usage Examples

Teleport Component

// Template with teleport
const template = `
  <div>
    <Teleport to="#modal">
      <div class="modal">Modal content</div>
    </Teleport>
  </div>
`;

// Compilation handles teleport processing
const result = compile(template);
// Generates code that renders teleport content inline during SSR

Suspense Component

// Template with suspense
const template = `
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
`;

// Compilation processes suspense boundaries
const result = compile(template);
// Generates code that handles async components during SSR

Transition Components

// Template with transitions
const template = `
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </TransitionGroup>
`;

// Compilation preserves structure for SSR
const result = compile(template);
// Generates code that renders list without transition effects

Install with Tessl CLI