@incremark/devtools

Standalone DevTools library, usable in any framework.

Installation

pnpm add @incremark/devtools

Usage

Method 1: With Framework Integration

Vue

import { useIncremark, useDevTools } from '@incremark/vue'

const incremark = useIncremark()
useDevTools(incremark)

React

import { useIncremark, useDevTools } from '@incremark/react'

function App() {
  const incremark = useIncremark()
  useDevTools(incremark)
}

Method 2: Direct Usage

import { createIncremarkParser } from '@incremark/core'
import { mountDevTools } from '@incremark/devtools'

const parser = createIncremarkParser()
const onChangeCallback = mountDevTools()
parser.setOnChange(onChangeCallback)

// Use parser
parser.append('# Hello')
parser.finalize()

API

mountDevTools

Create and mount DevTools instance, returns a callback for the parser.

function mountDevTools(
  options?: DevToolsOptions,
  target?: HTMLElement | string
): (state: ParserState) => void

Parameters

• options - DevTools configuration options
• target - Mount target, defaults to 'body'

interface DevToolsOptions {
  /** Initially open */
  open?: boolean
  /** Position */
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
  /** Theme */
  theme?: 'dark' | 'light'
}

Returns

Returns a callback function to pass to parser.setOnChange().

IncremarkDevTools

DevTools class for more fine-grained control.

class IncremarkDevTools {
  constructor(options?: DevToolsOptions)
  
  /** Mount to DOM */
  mount(target?: HTMLElement | string): void
  
  /** Unmount from DOM */
  unmount(): void
  
  /** Update state */
  update(state: ParserState): void
  
  /** Get current state */
  getState(): DevToolsState
}

State Types

interface DevToolsState {
  isOpen: boolean
  activeTab: 'overview' | 'blocks' | 'ast' | 'timeline'
  parserState: ParserState | null
  appendHistory: AppendRecord[]
}

interface AppendRecord {
  timestamp: number
  chunk: string
  completedCount: number
  pendingCount: number
}

Custom Styling

DevTools uses CSS variables that can be overridden:

.incremark-devtools {
  --devtools-bg: #1e1e1e;
  --devtools-text: #e0e0e0;
  --devtools-border: #333;
  --devtools-accent: #4fc3f7;
}