Component Setup System

/**
 * Setup function for renderless components with API composition
 * @param config - Setup configuration object
 * @returns Setup result with composed APIs and utilities
 */
function setup<T>(config: SetupConfig<T>): SetupResult<T>;

interface SetupConfig<T> {
  /** Component props */
  props: any;
  /** Component setup context */
  context: SetupContext;
  /** Renderless function that defines component logic */
  renderless: (props: any, hooks: AdapterHooks, utils: any, extendOptions?: any) => T;
  /** Array of API method names to expose */
  api: string[];
  /** Extended options for renderless function */
  extendOptions?: any;
  /** Whether component is single-layer (mono) */
  mono?: boolean;
  /** CSS class definitions */
  classes?: Record<string, string>;
}

interface SetupResult<T> {
  /** Translation function */
  t: (key: string) => string;
  /** Component instance */
  vm: any;
  /** Filter function for attributes */
  f: typeof bindFilter;
  /** Attribute filter function */
  a: typeof filterAttrs;
  /** Define instance properties */
  d: (props: any) => void;
  /** Define parent instance properties */
  dp: (props: any) => void;
  /** Get CSS class by key */
  gcls: (key: string) => string;
  /** Merge CSS classes */
  m: typeof mergeClass;
  /** Slots getter */
  slots: any;
  /** Scoped slots getter */
  scopedSlots: any;
  /** Exposed API methods */
  [key: string]: any;
}

import { setup } from "@opentiny/vue-common";

// Basic renderless component setup
export default {
  setup(props, context) {
    return setup({
      props,
      context,
      renderless: (props, hooks, utils) => {
        const state = hooks.ref({ count: 0 });
        
        const handleClick = () => {
          state.value.count++;
        };
        
        return {
          state,
          handleClick
        };
      },
      api: ['state', 'handleClick'],
      classes: {
        button: 'tiny-button',
        wrapper: 'tiny-wrapper'
      }
    });
  }
};

/**
 * Setup function for template-based components
 * @param config - Template setup configuration
 * @returns Component setup result with template resolution
 */
function $setup(config: TemplateSetupConfig): ComponentSetupResult;

interface TemplateSetupConfig {
  /** Component props */
  props: any;
  /** Component setup context */
  context: SetupContext;
  /** Template function that returns component based on mode */
  template: (mode: string, props: any) => any;
  /** Extended configuration */
  extend?: any;
}

interface ComponentSetupResult {
  /** Resolved view component */
  view: ComputedRef<any>;
  /** Component mode */
  mode: string;
  /** Design configuration */
  designConfig: any;
  /** Custom design props */
  customDesignProps: any;
}

import { $setup } from "@opentiny/vue-common";

// Template-based component setup
export default {
  setup(props, context) {
    return $setup({
      props,
      context,
      template: (mode, props) => {
        if (mode === 'mobile') {
          return () => import('./mobile-template.vue');
        }
        return () => import('./pc-template.vue');
      }
    });
  }
};

/**
 * Add Vue plugin install method to component
 * @param component - Component to add install method to
 */
function $install(component: any): void;

import { $install } from "@opentiny/vue-common";

const MyComponent = {
  name: 'TinyMyComponent',
  // ... component definition
};

// Add plugin installation capability
$install(MyComponent);

// Now component can be installed as a plugin
app.use(MyComponent);

/**
 * Mutable exports for component setup
 */
let setupComponent: Record<string, any>;

/**
 * Initialize all registered components
 * Calls install() and init() methods on registered components
 */
function initComponent(): void;

import { setupComponent, initComponent } from "@opentiny/vue-common";

// Register a component for initialization
setupComponent.MyComponent = {
  install(app) {
    app.component('TinyMyComponent', MyComponent);
  },
  init(properties) {
    // Initialize component with global properties
  }
};

// Initialize all registered components
initComponent();

/**
 * Filter component attributes based on patterns
 * @param attrs - Component attributes object
 * @param filters - Array of filter patterns (regex strings)
 * @param include - Whether to include (true) or exclude (false) matching attributes
 * @returns Filtered attributes object
 */
function filterAttrs(
  attrs: Record<string, any>, 
  filters: string[], 
  include?: boolean
): Record<string, any>;

import { filterAttrs } from "@opentiny/vue-common";

// Include only specific attributes
const allowedAttrs = filterAttrs(
  $attrs, 
  ['class', 'style', 'title', 'id'], 
  true // include mode
);

// Exclude event handlers
const nonEventAttrs = filterAttrs(
  $attrs,
  ['^on[A-Z]'], // regex pattern for event handlers
  false // exclude mode
);

/**
 * Create deferred rendering controller
 * @param maxCount - Maximum frame count (default: 100)
 * @returns Deferred rendering controller
 */
function useDefer(maxCount?: number): {
  /** Check if rendering should be deferred for given frame */
  defer(n: number): boolean;
  /** Reset frame counter */
  reset(): void;
  /** Cancel animation frames */
  cancel(): void;
};

import { useDefer } from "@opentiny/vue-common";

export default {
  setup() {
    const deferrer = useDefer(50);
    
    return {
      // Render expensive component only after 10 frames
      shouldRenderExpensive: () => deferrer.defer(10),
      // Render less expensive component after 5 frames  
      shouldRenderNormal: () => deferrer.defer(5)
    };
  }
};

/**
 * Design configuration object
 */
const design: {
  /** Symbol key for dependency injection */
  configKey: symbol;
  /** Global design configuration instance */
  configInstance: any;
};

/**
 * Provide design configuration to component tree
 * @param designConfig - Design configuration object
 */
function provideDesignConfig(designConfig: DesignConfig): void;

interface DesignConfig {
  /** Component-specific configurations */
  components?: Record<string, any>;
  /** Design system name */
  name?: string;
  /** Design system version */
  version?: string;
}

/**
 * Custom design configuration for external systems
 */
const customDesignConfig: {
  /** Design configuration instance */
  designConfig: DesignConfig | null;
  /** Tailwind merge function */
  twMerge: (str: string) => string;
};

/**
 * Register MCP configuration and tools
 * @param mcpConfig - MCP configuration object
 * @param defineTool - Tool definition function
 */
function registerMcpConfig(mcpConfig: any, defineTool: any): void;

/**
 * Standard component props object
 */
const $props: {
  tiny_mode: StringConstructor;
  tiny_mode_root: BooleanConstructor;
  tiny_template: [FunctionConstructor, ObjectConstructor];
  tiny_renderless: FunctionConstructor;
  tiny_theme: StringConstructor;
  tiny_mcp_config: ObjectConstructor;
  tiny_chart_theme: ObjectConstructor;
};

/**
 * Array of standard prop names
 */
const props: Array<
  | 'tiny_mode'
  | 'tiny_mode_root'  
  | 'tiny_template'
  | 'tiny_renderless'
  | '_constants'
  | 'tiny_theme'
  | 'tiny_chart_theme'
  | 'tiny_mcp_config'
>;

/**
 * Component name prefix
 */
const $prefix: 'Tiny';