expressive-code-twoslash/dist/index.d.ts

Add Twoslash support to your Expressive Code TypeScript code blocks.

import { ExpressiveCodePlugin } from "@expressive-code/core";
import { TwoslashOptions } from "@ec-ts/twoslash";
import { CreateTwoslashVueOptions } from "@ec-ts/twoslash-vue";
import { CreateTwoslashESLintOptions } from "twoslash-eslint";

//#region src/types.d.ts
/**
 * Type representing the options for creating a Twoslash instance with Vue support, excluding the standard Twoslash options.
 * This type is derived by omitting the keys of `TwoslashOptions` from `CreateTwoslashVueOptions`.
 */
type VueSpecificTwoslashOptions = Omit<CreateTwoslashVueOptions, keyof TwoslashOptions>;
/**
 * Plugin options for configuring the behavior of the Expressive Code Twoslash plugin, including instance configurations, JSDoc settings, and options for Twoslash and its integrations.
 */
interface PluginTwoslashOptions {
  /**
   * Allows for configuring the included twoslasher instances and their triggers.
   */
  readonly instanceConfigs?: {
    /**
     * Standard Twoslash instance configuration.
     */
    twoslash?: {
      /**
       * If `true`, requires `twoslash` to be present in the code block meta for
       * this transformer to be applied.
       *
       * If a `RegExp`, requires the `RegExp` to match a directive in the code
       * block meta for this transformer to be applied.
       *
       * If `false`, this transformer will be applied to all code blocks that match
       * the specified languages.
       *
       * It is recommended to keep this as `true` to avoid unnecessary processing.
       *
       * @default true
       */
      explicitTrigger?: boolean | RegExp;
      /**
       * The languages to apply this transformer to.
       *
       * @default ["ts", "tsx", "vue"]
       */
      languages?: ReadonlyArray<string>;
    };
    /**
     * ESLint Twoslash instance configuration.
     *
     * Unlike the standard Twoslash instance, the ESLint Twoslash instance uses `eslint` as its meta trigger for code blocks, and it is designed to work with JavaScript and TypeScript code blocks that contain ESLint errors. When a code block is annotated with `eslint`, the ESLint Twoslash instance will parse the code and display any ESLint errors as annotations in the code block.
     */
    eslint?: {
      /**
       * If `true`, requires `eslint` to be present in the code block meta for
       * this transformer to be applied.
       *
       * If a `RegExp`, requires the `RegExp` to match a directive in the code
       * block meta for this transformer to be applied.
       *
       * If `false`, this transformer will be applied to all code blocks that match
       * the specified languages.
       *
       * It is recommended to keep this as `true` to avoid unnecessary processing.
       */
      explicitTrigger?: boolean | RegExp;
      /**
       * The languages to apply this transformer to.
       *
       * @default ["ts", "tsx"]
       */
      languages?: ReadonlyArray<string>;
    };
  };
  /**
   * Current working directory to resolve files from for includes and the virtual file system.
   *
   * @default process.cwd()
   */
  cwd?: string;
  /**
   * An optional path to a `tsconfig.json` file to use as the basis for the compiler options when running Twoslash.
   *
   * If not provided, Twoslash will look for a `tsconfig.json` file in the `cwd` and use it if found. If no `tsconfig.json` file is found, Twoslash will use a default set of compiler options.
   */
  tsConfigPath?: string;
  /**
   * If `true`, includes JSDoc comments in the hover popup.
   *
   * @default true
   */
  readonly includeJsDoc?: boolean;
  /**
   * Allows non-standard JSDoc tags to be included in the hover popup.
   *
   * Non-standard tags are tags that are not included in the default JSDoc tag list.
   *
   * @example `@customTag, @docs, @omglookatthis`
   * @default true
   */
  readonly allowNonStandardJsDocTags?: boolean;
  /**
   * Options to forward to `twoslash`.
   *
   * @default {}
   */
  readonly twoslashOptions?: TwoslashOptions;
  /**
   * Options to forward to `twoslash-vue`.
   *
   * @default {}
   *
   * @remarks This is only used if the `vue` language is included in the `languages` option and will be ignored otherwise.
   */
  readonly twoslashVueOptions?: VueSpecificTwoslashOptions;
  /**
   * Options to forward to `twoslash-eslint`.
   *
   * @default {}
   *
   * @remarks This is only used if the `eslint` language is included in the `languages` option and will be ignored otherwise.
   */
  readonly twoslashEslintOptions?: CreateTwoslashESLintOptions;
}
/**
 * Twoslash Main Styles
 */
interface TwoSlashMainStyles {
  /**
   * Style (Border Color) for the Twoslash Popups
   */
  borderColor: string;
  /**
   * Style (Background) for the Twoslash Popups
   */
  background: string;
  /**
   * Style (Hover Underline color) for the Twoslash Popups
   */
  hoverUnderlineColor: string;
  /**
   * Style (Text Color) for the Twoslash Popups
   */
  textColor: string;
  /**
   * Style (Docs Max Element Height) for the Twoslash Popups
   */
  popupDocsMaxHeight: string;
  /**
   * Style (Tag Color) for the Twoslash JSDoc Tags
   */
  tagColor: string;
}
/**
 * Twoslash Link Styles
 */
interface TwoSlashLinkStyles {
  /**
   * Style (Link Color) for the Twoslash Popups
   */
  linkColor: string;
  /**
   * Style (Link Hover Color) for the Twoslash Popups
   */
  linkColorHover: string;
  /**
   * Style (Link Visited Color) for the Twoslash Popups
   */
  linkColorVisited: string;
  /**
   * Style (Link Active Color) for the Twoslash Popups
   */
  linkColorActive: string;
}
/**
 * Twoslash Highlight Styles
 */
interface TwoSlashHighlightStyles {
  /**
   * Style (Hue) for the Twoslash Highlights
   *
   * Used to calculate the `highlightBackground` and `highlightBorderColor` styles.
   */
  highlightHue: string;
  /**
   * Style (Luminance) for the Twoslash Highlights
   *
   * Used to calculate the `highlightBackground` and `highlightBorderColor` styles.
   */
  highlightDefaultLuminance: string;
  /**
   * Style (Chroma) for the Twoslash Highlights
   *
   * Used to calculate the `highlightBackground` and `highlightBorderColor` styles.
   */
  highlightDefaultChroma: string;
  /**
   * Style (Background Opacity) for the Twoslash Highlights
   *
   * Used to calculate the `highlightBackground` and `highlightBorderColor` styles.
   */
  highlightBackgroundOpacity: string;
  /**
   * Style (Border Luminance) for the Twoslash Highlights
   *
   * Used to calculate the `highlightBackground` and `highlightBorderColor` styles.
   */
  highlightBorderLuminance: string;
  /**
   * Style (Border Opacity) for the Twoslash Highlights
   *
   * Used to calculate the `highlightBackground` and `highlightBorderColor` styles.
   */
  highlightBorderOpacity: string;
  /**
   * Style (Background) for the Twoslash Highlights
   */
  highlightBackground: string;
  /**
   * Style (Border) for the Twoslash Highlights
   */
  highlightBorderColor: string;
}
/**
 * Twoslash Error and Custom Tags Styles
 */
interface TwoSlashErrorAndCustomTagsStyles {
  /**
   * Style (Error Color) for the Twoslash Error/Custom Annotations
   */
  errorColor: string;
  /**
   * Style (Warning Color) for the Twoslash Custom Annotations
   */
  warnColor: string;
  /**
   * Style (Suggestion Color) for the Twoslash Custom Annotations
   */
  suggestionColor: string;
  /**
   * Style (Message Color) for the Twoslash Custom Annotations
   */
  messageColor: string;
}
interface TwoSlashCompletionStyles {
  /**
   * Style (Cursor Color) for the Twoslash Completion Box
   */
  cursorColor: string;
  /**
   * Style (Background) for the Twoslash Completion Box
   */
  completionBoxBackground: string;
  /**
   * Style (Border) for the Twoslash Completion Box
   */
  completionBoxBorder: string;
  /**
   * Style (Color) for the Twoslash Completion Box
   */
  completionBoxColor: string;
  /**
   * Style (Matched Color) for the Twoslash Completion Box
   */
  completionBoxMatchedColor: string;
  /**
   * Style (Hover Background) for the Twoslash Completion Box
   */
  completionBoxHoverBackground: string;
  /**
   * Style (String Icon) for the Twoslash Completion Icons
   */
  completionIconString: string;
  /**
   * Style (Function Icon) for the Twoslash Completion Icons
   */
  completionIconFunction: string;
  /**
   * Style (Class Icon) for the Twoslash Completion Icons
   */
  completionIconClass: string;
  /**
   * Style (Property Icon) for the Twoslash Completion Icons
   */
  completionIconProperty: string;
  /**
   * Style (Module Icon) for the Twoslash Completion Icons
   */
  completionIconModule: string;
  /**
   * Style (Method Icon) for the Twoslash Completion Icons
   */
  completionIconMethod: string;
  /**
   * Style (Constructor Icon) for the Twoslash Completion Icons
   */
  completionIconConstructor: string;
  /**
   * Style (Interface Icon) for the Twoslash Completion Icons
   */
  completionIconInterface: string;
}
/**
 * Interface representing the style settings for TwoSlash.
 */
interface TwoSlashStyleSettings extends TwoSlashMainStyles, TwoSlashLinkStyles, TwoSlashHighlightStyles, TwoSlashErrorAndCustomTagsStyles, TwoSlashCompletionStyles {}
//#endregion
//#region src/index.d.ts
declare module "@expressive-code/core" {
  interface StyleSettings {
    twoSlash: TwoSlashStyleSettings;
  }
}
/**
 * Add Twoslash support to your Expressive Code TypeScript code blocks.
 *
 * @param {PluginTwoslashOptions} options - Configuration options for the plugin.
 * @see https://twoslash.studiocms.dev for the full documentation.
 * @returns A plugin object with the specified configuration.
 */
declare function ecTwoSlash(options?: PluginTwoslashOptions): ExpressiveCodePlugin;
//#endregion
export { type PluginTwoslashOptions, type TwoSlashStyleSettings, ecTwoSlash as default };
//# sourceMappingURL=index.d.ts.map