CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-docusaurus--types

Common types for Docusaurus packages.

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

@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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@docusaurus/types@3.8.x
Publish Source
CLI
Badge
tessl/npm-docusaurus--types badge