tessl/npm-slidev--types

Comprehensive TypeScript type definitions and interfaces for the Slidev presentation framework ecosystem

—

Pending

Overview

Eval results

Files

Code Execution System

Name: tessl/npm-slidev--types
Author: tessl

Types for executing and displaying code within presentations, including context interfaces and output formatting options.

Capabilities

Code Runner Interface

Core interface for executing code within Slidev presentations.

/**
 * Code runner function that executes code and returns outputs
 * @param code - The code string to execute
 * @param ctx - Context providing options and utilities
 * @returns Promise resolving to code outputs
 */
type CodeRunner = (code: string, ctx: CodeRunnerContext) => Awaitable<CodeRunnerOutputs>;

type CodeRunnerProviders = Record<string, CodeRunner>;

Code Runner Context

Context interface providing options and utilities to code runners.

/**
 * Context interface for code runners
 */
interface CodeRunnerContext {
  /** Options passed to runner via the runnerOptions prop */
  options: Record<string, unknown>;
  /** Highlight code with shiki */
  highlight: (code: string, lang: string, options?: Partial<CodeToHastOptions>) => string;
  /** Use (other) code runner to run code */
  run: (code: string, lang: string) => Promise<CodeRunnerOutputs>;
}

Code Runner Output Types

Various output types that code runners can return.

/**
 * HTML output for rendering HTML content
 * Note: Slidev does NOT sanitize HTML - ensure it's from trusted sources
 */
interface CodeRunnerOutputHtml {
  html: string;
}

/**
 * DOM element output for rendering DOM elements
 */
interface CodeRunnerOutputDom {
  element: HTMLElement;
}

/**
 * Error output for displaying error messages
 */
interface CodeRunnerOutputError {
  error: string;
}

/**
 * Text output for displaying formatted text
 */
interface CodeRunnerOutputText {
  text: string;
  class?: string;
  highlightLang?: string;
}

/**
 * Array of text outputs
 */
type CodeRunnerOutputTextArray = CodeRunnerOutputText[];

/**
 * Union type of all possible output types
 */
type CodeRunnerOutput = 
  | CodeRunnerOutputHtml 
  | CodeRunnerOutputError 
  | CodeRunnerOutputText 
  | CodeRunnerOutputTextArray 
  | CodeRunnerOutputDom;

/**
 * Code runner outputs with reactive support
 */
type CodeRunnerOutputs = MaybeRefOrGetter<Arrayable<CodeRunnerOutput>>;

Usage Examples

Basic Code Runner Implementation:

import type { CodeRunner, CodeRunnerContext } from "@slidev/types";

const pythonRunner: CodeRunner = async (code: string, ctx: CodeRunnerContext) => {
  try {
    // Execute Python code (pseudo-implementation)
    const result = await executePython(code, ctx.options);
    
    return {
      text: result.stdout,
      class: "text-green-600",
      highlightLang: "python"
    };
  } catch (error) {
    return {
      error: `Python execution failed: ${error.message}`
    };
  }
};

// Register the runner
const runners = {
  python: pythonRunner,
  py: pythonRunner
};

HTML Output Runner:

const htmlRunner: CodeRunner = async (code: string, ctx: CodeRunnerContext) => {
  // Validate and sanitize HTML if needed
  const safeHtml = sanitizeHtml(code);
  
  return {
    html: `<div class="demo-output">${safeHtml}</div>`
  };
};

DOM Element Runner:

const canvasRunner: CodeRunner = async (code: string, ctx: CodeRunnerContext) => {
  const canvas = document.createElement('canvas');
  canvas.width = 400;
  canvas.height = 300;
  
  // Execute drawing code on canvas
  const drawingFunction = new Function('canvas', 'ctx', code);
  const canvasCtx = canvas.getContext('2d');
  drawingFunction(canvas, canvasCtx);
  
  return {
    element: canvas
  };
};

Multi-output Runner:

const testRunner: CodeRunner = async (code: string, ctx: CodeRunnerContext) => {
  const results = await runTests(code);
  
  return results.map(result => ({
    text: `${result.name}: ${result.status}`,
    class: result.passed ? "text-green-600" : "text-red-600"
  }));
};

Using Context Features:

const enhancedRunner: CodeRunner = async (code: string, ctx: CodeRunnerContext) => {
  // Use highlighting capability
  const highlightedCode = ctx.highlight(code, 'javascript');
  
  // Use nested execution
  const dependencies = await ctx.run('npm list', 'bash');
  
  // Access runner options
  const timeout = ctx.options.timeout || 5000;
  
  try {
    const result = await executeWithTimeout(code, timeout);
    return {
      html: `
        <div class="execution-result">
          <h4>Code:</h4>
          ${highlightedCode}
          <h4>Result:</h4>
          <pre>${result}</pre>
        </div>
      `
    };
  } catch (error) {
    return {
      error: `Execution timeout after ${timeout}ms`
    };
  }
};

Install with Tessl CLI