Component System

/**
 * Create a WeChat Mini Program component
 * @param options - Component configuration with properties, data, methods, and lifecycle
 */
function Component<
  TData extends WechatMiniprogram.Component.DataOption,
  TProperty extends WechatMiniprogram.Component.PropertyOption,
  TMethod extends WechatMiniprogram.Component.MethodOption
>(
  options: WechatMiniprogram.Component.Option<TData, TProperty, TMethod>
): void;

Component({
  properties: {
    title: String,
    count: {
      type: Number,
      value: 0
    },
    disabled: {
      type: Boolean,
      value: false
    },
    items: {
      type: Array,
      value: []
    }
  },
  data: {
    visible: true,
    loading: false
  },
  methods: {
    handleTap() {
      if (!this.properties.disabled) {
        this.triggerEvent('itemTap', {
          title: this.properties.title,
          count: this.properties.count
        });
      }
    },
    show() {
      this.setData({ visible: true });
    },
    hide() {
      this.setData({ visible: false });
    }
  },
  lifetimes: {
    created() {
      console.log('Component created');
    },
    attached() {
      console.log('Component attached to page');
    },
    ready() {
      console.log('Component ready - initial render complete');
    },
    detached() {
      console.log('Component detached from page');
    }
  }
});

/**
 * Create a reusable behavior for components
 * @param options - Behavior configuration with shared properties, data, and methods
 */
function Behavior<
  TData extends WechatMiniprogram.Behavior.DataOption,
  TProperty extends WechatMiniprogram.Behavior.PropertyOption,
  TMethod extends WechatMiniprogram.Behavior.MethodOption
>(
  options: WechatMiniprogram.Behavior.Option<TData, TProperty, TMethod>
): void;

// Define a behavior for common loading functionality
const LoadingBehavior = Behavior({
  data: {
    loading: false,
    error: null
  },
  methods: {
    setLoading(loading: boolean) {
      this.setData({ loading, error: null });
    },
    setError(error: string) {
      this.setData({ loading: false, error });
    }
  }
});

// Use behavior in component
Component({
  behaviors: [LoadingBehavior],
  methods: {
    async fetchData() {
      this.setLoading(true);
      try {
        const data = await this.requestData();
        this.setData({ data });
      } catch (error) {
        this.setError(error.message);
      }
    }
  }
});

interface WechatMiniprogram.Component.Instance<TData, TProperty, TMethod> {
  /** Component data */
  readonly data: TData;
  
  /** Component properties */
  readonly properties: TProperty;
  
  /** Update component data and trigger re-render */
  setData(data: Partial<TData>, callback?: () => void): void;
  
  /** Trigger custom event to parent component */
  triggerEvent(
    name: string,
    detail?: any,
    options?: WechatMiniprogram.Component.TriggerEventOption
  ): void;
  
  /** Create selector query for DOM operations */
  createSelectorQuery(): WechatMiniprogram.SelectorQuery;
  
  /** Create intersection observer for visibility detection */
  createIntersectionObserver(
    options?: WechatMiniprogram.CreateIntersectionObserverOption
  ): WechatMiniprogram.IntersectionObserver;
  
  /** Create media query observer for responsive design */
  createMediaQueryObserver(): WechatMiniprogram.MediaQueryObserver;
  
  /** Select child component by selector */
  selectComponent(selector: string): WechatMiniprogram.Component.Instance<any, any, any> | null;
  
  /** Select all child components by selector */
  selectAllComponents(selector: string): WechatMiniprogram.Component.Instance<any, any, any>[];
  
  /** Get related components */
  getRelationNodes(relationKey: string): WechatMiniprogram.Component.Instance<any, any, any>[];
  
  /** Batch data updates for performance */
  groupSetData(callback?: () => void): void;
  
  /** Get custom tab bar component (if applicable) */
  getTabBar(): WechatMiniprogram.Component.Instance<any, any, any> | null;
  
  /** Get unique page identifier */
  getPageId(): string;
  
  /** Animate elements with keyframes */
  animate(
    selector: string,
    keyframes: WechatMiniprogram.Component.PropertyAnimation[],
    duration: number,
    callback?: () => void
  ): void;
  
  /** Clear animations on elements */
  clearAnimation(
    selector: string,
    options?: WechatMiniprogram.Component.ClearAnimationOptions,
    callback?: () => void
  ): void;
}

interface WechatMiniprogram.Component.TriggerEventOption {
  /** Whether the event bubbles up */
  bubbles?: boolean;
  /** Whether the event is composed */
  composed?: boolean;
  /** Whether the event can be captured */
  capturePhase?: boolean;
}

interface WechatMiniprogram.Component.Option<TData, TProperty, TMethod> {
  /** Component properties definition */
  properties?: TProperty;
  
  /** Initial component data */
  data?: TData;
  
  /** Component methods */
  methods?: TMethod;
  
  /** Applied behaviors */
  behaviors?: any[];
  
  /** Component lifecycle methods */
  lifetimes?: {
    /** Component instance created */
    created?(): void;
    /** Component attached to page DOM */
    attached?(): void;
    /** Component ready - initial render complete */
    ready?(): void;
    /** Component moved in DOM */
    moved?(): void;
    /** Component detached from page DOM */
    detached?(): void;
    /** Component error occurred */
    error?(error: Error): void;
  };
  
  /** Page lifecycle listeners */
  pageLifetimes?: {
    /** Page shown */
    show?(): void;
    /** Page hidden */
    hide?(): void;
    /** Page resized */
    resize?(size: { windowWidth: number; windowHeight: number }): void;
    /** Route animation done */
    routeDone?(): void;
  };
  
  /** Data observers */
  observers?: {
    [key: string]: (...args: any[]) => void;
  };
  
  /** Component relations */
  relations?: {
    [key: string]: WechatMiniprogram.Component.RelationOption;
  };
  
  /** Export methods to parent */
  export?(): Record<string, any>;
  
  /** External classes for styling */
  externalClasses?: string[];
  
  /** Options configuration */
  options?: {
    /** Virtual host configuration */
    virtualHost?: boolean;
    /** Multiple slots support */
    multipleSlots?: boolean;
    /** Add global class support */
    addGlobalClass?: boolean;
    /** Style isolation */
    styleIsolation?: 'isolated' | 'apply-shared' | 'shared';
  };
}

interface WechatMiniprogram.Component.RelationOption {
  /** Relation type */
  type: 'parent' | 'child' | 'ancestor' | 'descendant';
  /** Relation target component */
  target?: string;
  /** Linked callback */
  linked?(target: WechatMiniprogram.Component.Instance<any, any, any>): void;
  /** Link changed callback */
  linkChanged?(target: WechatMiniprogram.Component.Instance<any, any, any>): void;
  /** Unlinked callback */
  unlinked?(target: WechatMiniprogram.Component.Instance<any, any, any>): void;
}

interface WechatMiniprogram.Component.PropertyOption {
  [key: string]: WechatMiniprogram.Component.AllProperty;
}

type WechatMiniprogram.Component.AllProperty = 
  | WechatMiniprogram.Component.PropertyType
  | WechatMiniprogram.Component.FullProperty;

interface WechatMiniprogram.Component.FullProperty {
  /** Property type */
  type: WechatMiniprogram.Component.PropertyType;
  /** Default value */
  value?: any;
  /** Property observer */
  observer?(newVal: any, oldVal: any, changedPath: string): void;
  /** Optional property */
  optionalTypes?: WechatMiniprogram.Component.PropertyType[];
}

type WechatMiniprogram.Component.PropertyType =
  | StringConstructor
  | NumberConstructor  
  | BooleanConstructor
  | ArrayConstructor
  | ObjectConstructor
  | null;

Component({
  properties: {
    // Simple property types
    title: String,
    count: Number,
    visible: Boolean,
    items: Array,
    config: Object,
    
    // Full property definitions
    status: {
      type: String,
      value: 'normal',
      observer(newVal, oldVal) {
        console.log(`Status changed from ${oldVal} to ${newVal}`);
      }
    },
    
    // Optional types
    value: {
      type: String,
      optionalTypes: [Number],
      value: ''
    }
  }
});

// Animation keyframes
interface WechatMiniprogram.Component.PropertyAnimation {
  [property: string]: any;
}

// Clear animation options
interface WechatMiniprogram.Component.ClearAnimationOptions {
  [property: string]: boolean;
}

Component({
  methods: {
    animateButton() {
      this.animate('.button', [
        { opacity: 1, rotate: 0 },
        { opacity: 0.5, rotate: 45 },
        { opacity: 1, rotate: 90 }
      ], 1000, () => {
        console.log('Animation complete');
      });
    },
    
    stopAnimation() {
      this.clearAnimation('.button', {
        opacity: true,
        rotate: true
      });
    }
  }
});

interface WechatMiniprogram.SelectorQuery {
  /** Select element by ID */
  select(selector: string): WechatMiniprogram.NodesRef;
  
  /** Select all elements by selector */
  selectAll(selector: string): WechatMiniprogram.NodesRef;
  
  /** Select viewport */
  selectViewport(): WechatMiniprogram.NodesRef;
  
  /** Execute query */
  exec(callback?: (res: any[]) => void): WechatMiniprogram.SelectorQuery;
}

interface WechatMiniprogram.NodesRef {
  /** Get bounding client rect */
  boundingClientRect(
    callback?: (rect: WechatMiniprogram.BoundingClientRectResult) => void
  ): WechatMiniprogram.SelectorQuery;
  
  /** Get scroll offset */
  scrollOffset(
    callback?: (res: WechatMiniprogram.ScrollOffsetResult) => void
  ): WechatMiniprogram.SelectorQuery;
  
  /** Get context (canvas, video, etc.) */
  context(
    callback?: (res: { context: any }) => void
  ): WechatMiniprogram.SelectorQuery;
}

namespace WechatMiniprogram.Component {
  interface DataOption {
    [key: string]: any;
  }
  
  interface MethodOption {
    [key: string]: (...args: any[]) => any;
  }
  
  interface Instance<TData, TProperty, TMethod> {
    readonly data: TData;
    readonly properties: TProperty;
    setData(data: Partial<TData>, callback?: () => void): void;
    triggerEvent(name: string, detail?: any, options?: TriggerEventOption): void;
  }
}

namespace WechatMiniprogram.Behavior {
  interface DataOption {
    [key: string]: any;
  }
  
  interface PropertyOption {
    [key: string]: any;
  }
  
  interface MethodOption {
    [key: string]: (...args: any[]) => any;
  }
  
  interface Option<TData, TProperty, TMethod> {
    properties?: TProperty;
    data?: TData;
    methods?: TMethod;
    behaviors?: any[];
  }
}