🚧 Rspress 2.0 document is under development
close
Rspress
  • English

      • @rspress/plugin-twoslash
      Source Code

      Integration of Twoslash's Rspress Plugin for automatically generating rich code blocks with type information.

      Installation

      npm
      yarn
      pnpm
      bun
      deno
      npm add @rspress/plugin-twoslash -D

      Usage

      1. Register the plugin

      rspress.config.ts
      import { 
      function defineConfig(config: UserConfig): UserConfig
      defineConfig       } from '@rspress/core';      
import { 
      function pluginTwoslash(options?: PluginTwoslashOptions): RspressPlugin
      Plugin to applies Twoslash transformations to code blocks.
      pluginTwoslash       } from '@rspress/plugin-twoslash';      

export default 
      function defineConfig(config: UserConfig): UserConfig
      defineConfig      ({      
  
      UserConfig.plugins?: RspressPlugin[] | undefined
      Doc plugins
      plugins      : [
      function pluginTwoslash(options?: PluginTwoslashOptions): RspressPlugin
      Plugin to applies Twoslash transformations to code blocks.
      pluginTwoslash      ()],      
});

      2. Write code blocks with twoslash

      Use special comments within TypeScript code blocks to enable Twoslash features.

      For more detailed usage, please refer to the Twoslash documentation.

      Extract type

      Rendered
      Syntax
      const 
      const hi: "Hello"
      hi       = 'Hello';      
const 
      const msg: "Hello, world"
      msg       = `${
      const hi: "Hello"
      hi      }, world`;

      Completions

      Rendered
      Syntax
      var console: Console
      The console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
      

      The module exports two specific components:
      

        

      • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
        • 

      • A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.
        • 

      

      Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
      

      Example using the global console:
      

      console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
      

      Example using the Console class:
      

      const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
      @seesource
      console      .e
      • error
      ;

      Highlighting

      Rendered
      Syntax
      function 
      function add(a: number, b: number): number
      add      (
      a: number
      a      : number, 
      b: number
      b      : number) {      
  return 
      a: number
      a       + 
      b: number
      b      ;      
}

      Error

      Rendered
      Syntax
      const str: string = 1;
      Type 'number' is not assignable to type 'string'.

      Config

      The plugin accepts an object with the following type:

      export interface PluginTwoslashOptions {
  
      PluginTwoslashOptions.explicitTrigger?: boolean | undefined
      explicitTrigger      ?: boolean;      
  
      PluginTwoslashOptions.cache?: boolean | undefined
      cache      ?: boolean;      
  
      PluginTwoslashOptions.twoslashOptions?: TwoslashOptions | undefined
      twoslashOptions      ?: TwoslashOptions;      
}

      explicitTrigger

      explicitTrigger is used to configure whether to explicitly trigger the Twoslash feature. Default is true.

      • If set to false, all TypeScript code blocks will be processed by default.
      • If set to true, only code blocks with the twoslash tag will be processed.

      cache

      cache is used to cache the TypeScript language servers based on compiler options when calling createTwoslasher. Default is true.

      twoslashOptions

      twoslashOptions is used to pass options to Twoslash. This allows you to customize the Twoslash behavior, including TypeScript compiler options and other settings.