Component Management

/**
 * Main class for managing Gradio component instances
 * @template T - Event data type mapping for type-safe event dispatching
 */
class Gradio<T extends Record<string, any> = Record<string, any>> {
  /**
   * Creates a new Gradio component instance
   * @param id - Unique identifier for this component instance
   * @param el - HTML element that will contain the component
   * @param theme - Theme name for styling
   * @param version - Gradio version string
   * @param root - Root path for API endpoints
   * @param autoscroll - Whether to enable automatic scrolling
   * @param max_file_size - Maximum file size for uploads (null for no limit)
   * @param i18n - Internationalization formatter function
   * @param client - Gradio client instance for API communication
   * @param virtual_component_loader - Optional custom component loader
   */
  constructor(
    id: number,
    el: HTMLElement,
    theme: string,
    version: string,
    root: string,
    autoscroll: boolean,
    max_file_size: number | null,
    i18n?: I18nFormatter,
    client: Client,
    virtual_component_loader?: component_loader
  );
  
  /** Current theme name */
  theme: string;
  /** Gradio version string */
  version: string;
  /** Internationalization formatter */
  i18n: I18nFormatter;
  /** Root path for API endpoints */
  root: string;
  /** Whether automatic scrolling is enabled */
  autoscroll: boolean;
  /** Maximum file size for uploads */
  max_file_size: number | null;
  /** Gradio client instance */
  client: Client;
  /** Component loading function */
  load_component: (name: string, variant?: "component" | "example" | "base") => ReturnType<component_loader>;
  
  /**
   * Dispatches a custom event from this component
   * @param event_name - Name of the event to dispatch
   * @param data - Optional event data
   */
  dispatch<E extends keyof T>(event_name: E, data?: T[E]): void;
}

import { Gradio, type I18nFormatter } from "@gradio/utils";
import { Client } from "@gradio/client";

// Basic component setup
const container = document.getElementById("gradio-container")!;
const client = new Client("/api");

const gradio = new Gradio(
  1,                    // component id
  container,            // container element
  "light",             // theme
  "4.0.0",             // version
  "/api",              // root path
  true,                // autoscroll enabled
  10 * 1024 * 1024,    // 10MB max file size
  (x) => x,            // simple i18n formatter
  client               // client instance
);

// Dispatch events with type safety
interface MyEvents {
  select: { index: number; value: string };
  change: { value: any };
  submit: { data: FormData };
}

const typedGradio = new Gradio<MyEvents>(/* ... */);

// Type-safe event dispatching
typedGradio.dispatch("select", { index: 0, value: "item1" });
typedGradio.dispatch("change", { value: "new value" });
typedGradio.dispatch("submit", { data: new FormData() });

// Load components dynamically
const component = gradio.load_component("textbox", "component");
const example = gradio.load_component("textbox", "example");

/**
 * Type for internationalization formatter functions
 * Currently defined as 'any' for maximum flexibility
 */
type I18nFormatter = any;

import { type I18nFormatter } from "@gradio/utils";

// Simple formatter
const simpleFormatter: I18nFormatter = (key: string) => key;

// Advanced formatter with interpolation
const advancedFormatter: I18nFormatter = (key: string, params?: Record<string, any>) => {
  // Custom i18n logic here
  return key;
};

// Use with Gradio
const gradio = new Gradio(
  1,
  container,
  "light",
  "4.0.0",
  "/api",
  true,
  null,
  advancedFormatter,  // Custom i18n formatter
  client
);

/**
 * Arguments for component loading
 */
interface Args {
  /** API URL for the component */
  api_url: string;
  /** Component name to load */
  name: string;
  /** Optional component ID */
  id?: string;
  /** Component variant type */
  variant: "component" | "example" | "base";
}

/**
 * Function type for loading Svelte components
 * @param args - Component loading arguments
 * @returns Object containing component name and Svelte component
 */
type component_loader = (args: Args) => {
  name: string;
  component: {
    default: ComponentType<SvelteComponent>;
  };
};

// Event structure
interface GradioEvent<T = any> {
  bubbles: true;
  detail: {
    data: T;           // Event-specific data
    id: number;        // Component ID
    event: string;     // Event name
  };
}

import { Gradio } from "@gradio/utils";

// Listen for Gradio events
container.addEventListener("gradio", (event: CustomEvent) => {
  const { data, id, event: eventName } = event.detail;
  
  console.log(`Component ${id} dispatched ${eventName}:`, data);
  
  // Handle specific events
  switch (eventName) {
    case "select":
      handleSelection(data);
      break;
    case "change":
      handleChange(data);
      break;
    case "submit":
      handleSubmission(data);
      break;
  }
});

// Dispatch events
gradio.dispatch("select", { index: 0, value: "selected item" });