Configuration

/**
 * Configures Legend State with custom observable functions and properties
 * @param config - Configuration object with custom functions and properties
 */
function configureLegendState(config: {
  observableFunctions?: Record<string, (node: NodeValue, ...args: any[]) => any>;
  observableProperties?: Record<string, {
    get: (node: NodeValue) => any;
    set: (node: NodeValue, value: any) => any;
  }>;
}): void;

/**
 * Enables React integration with automatic tracking
 * @param options - Configuration options for React tracking
 */
function enableReactTracking(options: {
  auto?: boolean; // Make all get() calls act as useSelector() hooks
  warnUnobserved?: boolean; // Warn if get() is used outside of an observer
}): void;

/**
 * Enables React components (Show, For, Switch, etc.)
 * Must be called before using React components
 */
function enableReactComponents(): void;

/**
 * Enables React Native specific components and optimizations
 * Use this instead of enableReactComponents for React Native
 */
function enableReactNativeComponents(): void;

/**
 * Enables direct rendering optimizations for React
 * Improves performance by bypassing some React internals
 */
function enableReactDirectRender(): void;

/**
 * Enables React.use() integration for Suspense
 * Allows observables to work with React Suspense
 */
function enableReactUse(): void;

/**
 * Enables direct access optimization
 * Allows direct property access on observables for better performance
 */
function enableDirectAccess(): void;

/**
 * Enables direct peek optimization  
 * Optimizes peek() operations for better performance
 */
function enableDirectPeek(): void;

/**
 * Tracks history of changes to an observable
 * @param obs - Observable to track history for
 * @param options - History tracking configuration
 * @returns History tracker instance
 */
function trackHistory<T>(
  obs: Observable<T>, 
  options?: HistoryOptions
): HistoryTracker<T>;

interface HistoryOptions {
  /** Maximum number of history entries to keep */
  maxSize?: number;
  /** Whether to track individual property changes */
  trackProperties?: boolean;
  /** Debounce time for history entries */
  debounce?: number;
}

interface HistoryTracker<T> {
  /** Undo the last change */
  undo(): boolean;
  /** Redo the last undone change */
  redo(): boolean;
  /** Check if undo is available */
  canUndo(): boolean;
  /** Check if redo is available */
  canRedo(): boolean;
  /** Get history entries */
  getHistory(): HistoryEntry<T>[];
  /** Clear all history */
  clear(): void;
  /** Dispose history tracking */
  dispose(): void;
}

interface HistoryEntry<T> {
  /** Timestamp of the change */
  timestamp: number;
  /** Previous value */
  previous: T;
  /** Current value */
  current: T;
  /** Path of the change (for property tracking) */
  path?: string[];
}

/**
 * Hook to trace listener changes in React components
 * @param name - Optional name for the trace
 */
function useTraceListeners(name?: string): void;

/**
 * Hook to trace component updates and re-renders
 * @param name - Optional name for the trace
 */
function useTraceUpdates(name?: string): void;

/**
 * Hook to verify component is not tracking observables
 * @param name - Optional name for the verification
 */
function useVerifyNotTracking(name?: string): void;

/**
 * Hook to verify component renders only once
 * @param name - Optional name for the verification
 */
function useVerifyOneRender(name?: string): void;

/**
 * Babel plugin for Legend State optimizations
 * Add to your Babel configuration to enable compile-time optimizations
 */
declare const babel: {
  /** Plugin function for Babel configuration */
  default: () => any;
  /** Plugin options */
  options?: {
    /** Whether to optimize observable access */
    optimizeAccess?: boolean;
    /** Whether to inline simple computations */
    inlineComputations?: boolean;
  };
};

// Global configuration at app startup
import { configureLegendState } from "@legendapp/state";
import { enableReactTracking } from "@legendapp/state/config/enableReactTracking";

configureLegendState({
  batching: true,
  dev: process.env.NODE_ENV === "development",
  onError: (error) => {
    console.error("Legend State error:", error);
    // Send to error reporting service
  }
});

// Enable React features
enableReactTracking();

// For React Native apps
import { enableReactNativeComponents } from "@legendapp/state/config/enableReactNativeComponents";
enableReactNativeComponents();

// Enable performance optimizations
import { enableDirectAccess } from "@legendapp/state/config/enableDirectAccess";
import { enableDirectPeek } from "@legendapp/state/config/enableDirectPeek";

enableDirectAccess();
enableDirectPeek();

// History tracking example
import { observable } from "@legendapp/state";
import { trackHistory } from "@legendapp/state/history";

const document$ = observable({
  title: "Untitled",
  content: "",
  lastModified: Date.now()
});

const history = trackHistory(document$, {
  maxSize: 50,
  trackProperties: true,
  debounce: 500
});

// Make some changes
document$.title.set("My Document");
document$.content.set("Hello world!");

// Undo/redo
if (history.canUndo()) {
  history.undo(); // Reverts content change
}

if (history.canRedo()) {
  history.redo(); // Reapplies content change
}

// Development tracing
import React from "react";
import { useObservable } from "@legendapp/state/react";
import { 
  useTraceUpdates, 
  useVerifyOneRender 
} from "@legendapp/state/trace";

function MyComponent() {
  // Debug hooks (only in development)
  if (process.env.NODE_ENV === "development") {
    useTraceUpdates("MyComponent");
    useVerifyOneRender("MyComponent");
  }
  
  const state$ = useObservable({ count: 0 });
  
  return (
    <div>
      <p>Count: {state$.count.get()}</p>
      <button onClick={() => state$.count.set(c => c + 1)}>
        Increment
      </button>
    </div>
  );
}

// Babel configuration (.babelrc or babel.config.js)
/*
{
  "plugins": [
    ["@legendapp/state/babel", {
      "optimizeAccess": true,
      "inlineComputations": true
    }]
  ]
}
*/

// src/legend-state-config.ts
import { configureLegendState } from "@legendapp/state";
import { enableReactTracking } from "@legendapp/state/config/enableReactTracking";
import { enableReactComponents } from "@legendapp/state/config/enableReactComponents";

export function initializeLegendState() {
  // Global configuration
  configureLegendState({
    batching: true,
    dev: process.env.NODE_ENV === "development"
  });
  
  // Enable React integration
  enableReactTracking();
  enableReactComponents();
  
  // Enable performance optimizations in production
  if (process.env.NODE_ENV === "production") {
    const { enableDirectAccess } = require("@legendapp/state/config/enableDirectAccess");
    const { enableDirectPeek } = require("@legendapp/state/config/enableDirectPeek");
    
    enableDirectAccess();
    enableDirectPeek();
  }
}

// src/index.tsx
import { initializeLegendState } from "./legend-state-config";

// Initialize Legend State before rendering your app
initializeLegendState();

// ... rest of your app initialization

// Development: Enable all debugging features
if (process.env.NODE_ENV === "development") {
  configureLegendState({
    dev: true,
    onError: (error) => {
      console.error("Legend State Error:", error);
      // Could integrate with development tools
    }
  });
}

// Production: Optimize for performance
if (process.env.NODE_ENV === "production") {
  configureLegendState({
    batching: true,
    dev: false
  });
  
  // Enable all optimizations
  enableDirectAccess();
  enableDirectPeek();
  enableReactDirectRender();
}