or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdcontext.mdi18n.mdindex.mdplugin-system.mdrouting.mdswizzling.md
tile.json

index.mddocs/

@docusaurus/types

@docusaurus/types provides comprehensive TypeScript type definitions for the Docusaurus ecosystem, serving as the foundational type library for type-safe development across all Docusaurus packages and plugins. It defines interfaces and types for configuration management, plugin architecture, routing system, internationalization, context management, and component swizzling.

Package Information

  • Package Name: @docusaurus/types
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @docusaurus/types

Core Imports

import { DocusaurusConfig, Plugin, RouteConfig, I18nConfig } from "@docusaurus/types";

Basic Usage

import type { DocusaurusConfig, Plugin, ThemeConfig } from "@docusaurus/types";

// Define a Docusaurus configuration
const config: DocusaurusConfig = {
  title: "My Site",
  url: "https://mysite.com",
  baseUrl: "/",
  // ... other config options
};

// Create a custom plugin
const myPlugin: Plugin = {
  name: 'my-plugin',
  loadContent: async () => {
    // Load plugin content
    return { data: 'example' };
  },
  contentLoaded: async ({ content, actions }) => {
    // Use loaded content
  }
};

// Type-safe theme configuration
const themeConfig: ThemeConfig = {
  navbar: {
    title: 'My Site',
    items: []
  }
};

Architecture

@docusaurus/types is organized around several key domain areas:

  • Configuration System: Core site configuration types (DocusaurusConfig, MarkdownConfig, FutureConfig)
  • Plugin Architecture: Plugin lifecycle, configuration, and content management types
  • Routing System: Route definition, metadata, and module loading types
  • Runtime Context: Build and runtime context management for plugins and components
  • Internationalization: Multi-language support configuration and translation types
  • Component System: React component swizzling and theming types

Capabilities

Configuration Management

Core Docusaurus configuration types including site settings, markdown options, future flags, and theme configuration.

interface DocusaurusConfig {
  title: string;
  url: string;
  baseUrl: string;
  favicon?: string;
  trailingSlash: boolean | undefined;
  i18n: I18nConfig;
  future: FutureConfig;
  // ... extensive configuration options
}

interface MarkdownConfig {
  format: 'mdx' | 'md' | 'detect';
  parseFrontMatter: ParseFrontMatter;
  mermaid: boolean;
  preprocessor?: MarkdownPreprocessor;
  // ... markdown-specific options
}

Configuration Types

Plugin System

Complete plugin architecture including lifecycle hooks, content loading, webpack configuration, and validation.

interface Plugin<Content = unknown> {
  name: string;
  loadContent?: () => Promise<Content> | Content;
  contentLoaded?: (args: {
    content: Content;
    actions: PluginContentLoadedActions;
  }) => Promise<void> | void;
  configureWebpack?: (
    config: WebpackConfiguration,
    isServer: boolean,
    utils: ConfigureWebpackUtils,
    content: Content
  ) => ConfigureWebpackResult | void;
  // ... additional lifecycle hooks
}

interface PluginContentLoadedActions {
  addRoute: (config: RouteConfig) => void;
  createData: (name: string, data: string | object) => Promise<string>;
  setGlobalData: (data: unknown) => void;
}

Plugin System

Routing System

Route definition, metadata, modules, and chunk management for client-side navigation and code splitting.

interface RouteConfig {
  path: string;
  component: string;
  modules?: RouteModules;
  context?: RouteModules;
  routes?: RouteConfig[];
  exact?: boolean;
  strict?: boolean;
  priority?: number;
  metadata?: RouteMetadata;
}

type Module = {
  __import?: boolean;
  path: string;
  query?: ParsedUrlQueryInput;
} | string;

Routing System

Context Management

Build-time and runtime context types for plugin development and component rendering.

interface DocusaurusContext {
  siteConfig: DocusaurusConfig;
  siteMetadata: SiteMetadata;
  globalData: GlobalData;
  i18n: I18n;
  codeTranslations: CodeTranslations;
}

interface LoadContext {
  siteDir: string;
  siteVersion: string | undefined;
  generatedFilesDir: string;
  siteConfig: DocusaurusConfig;
  outDir: string;
  localizationDir: string;
  baseUrl: string;
  i18n: I18n;
  // ... additional context properties
}

Context Management

Internationalization

Multi-language support including locale configuration, translation files, and runtime i18n state.

interface I18nConfig {
  defaultLocale: string;
  path: string;
  locales: [string, ...string[]];
  localeConfigs: {[locale: string]: Partial<I18nLocaleConfig>};
}

interface TranslationFile {
  path: string;
  content: TranslationFileContent;
}

type TranslationFileContent = {[msgId: string]: TranslationMessage};

Internationalization

Component Swizzling

Component customization system for safely ejecting and wrapping theme components.

interface SwizzleConfig {
  components: {[componentName: string]: SwizzleComponentConfig};
}

interface SwizzleComponentConfig {
  actions: {[action in SwizzleAction]: SwizzleActionStatus};
  description?: string;
}

type SwizzleAction = 'eject' | 'wrap';
type SwizzleActionStatus = 'safe' | 'unsafe' | 'forbidden';

Component Swizzling

Common Types

Validation and Options

type ReportingSeverity = 'ignore' | 'log' | 'warn' | 'throw';
type RouterType = 'browser' | 'hash';

interface PluginOptions {
  id?: string;
  [key: string]: unknown;
}

interface UseDataOptions {
  failfast?: boolean;
}

Client Module

interface ClientModule {
  onRouteDidUpdate?: (args: {
    previousLocation: Location | null;
    location: Location;
  }) => (() => void) | void;
  onRouteUpdate?: (args: {
    previousLocation: Location | null;
    location: Location;
  }) => (() => void) | void;
}

Bundler

interface CurrentBundler {
  name: 'webpack' | 'rspack';
  instance: typeof webpack;
}