Core Component System

/**
 * Transforms an ES class into a Vue component with proper option mapping
 * @param options - Optional component configuration
 * @returns Class decorator function
 */
function Component(options?: ComponentOption): ClassDecorator;

// Alias for Component
const ComponentBase: (options?: ComponentOption) => ClassDecorator;

interface ComponentOption {
  name?: string;
  emits?: string[];
  provide?: Record<string, any> | Function;
  components?: Record<string, any>;
  directives?: Record<string, any>;
  inheritAttrs?: boolean;
  expose?: string[];
  render?: Function;
  template?: string;
  mixins?: any[];
  setup?: ComponentSetupFunction;
  methods?: MethodOptions;
  modifier?: (raw: any) => any;
  options?: ComponentCustomOptions & Record<string, any>;
}

import { Component } from "vue-facing-decorator";

// Basic component
@Component
class BasicComponent {
  message = "Hello World";
}

// Component with options
@Component({
  name: "MyComponent",
  template: "<div>{{ message }}</div>",
  emits: ["customEvent"],
  inheritAttrs: false
})
class ConfiguredComponent {
  message = "Configured Component";
}

// Component with render function
@Component({
  render() {
    return h('div', this.message);
  }
})
class RenderComponent {
  message = "Rendered Component";
}

/**
 * Base class for Vue components with TypeScript support
 * Provides the foundation for component inheritance
 */
class Base { }

// Alias for Base
const Vue: typeof Base;

type VueCons<RawInstance = Identity, IT = { props: {}, events: {} }> = {
  new(): ComponentPublicInstance & Identity<IT> & Omit<RawInstance, typeof IdentitySymbol>;
};

import { Component, Base } from "vue-facing-decorator";

// Extending Base class
@Component
class MyComponent extends Base {
  message = "Hello from Base";
  
  mounted() {
    console.log("Component mounted");
  }
}

// Multiple inheritance
@Component
class BaseComponent extends Base {
  sharedMethod() {
    return "shared functionality";
  }
}

@Component
class ChildComponent extends BaseComponent {
  childMethod() {
    return this.sharedMethod() + " extended";
  }
}

/**
 * Converts a decorated class constructor to a native Vue component
 * @param cons - The decorated component class
 * @returns Native Vue component
 */
function toNative<T extends VueCons>(cons: T): T;

import { Component, toNative } from "vue-facing-decorator";

@Component
class MyComponent {
  message = "Hello World";
}

// Convert to native Vue component for export
export default toNative(MyComponent);

// Or use directly in Vue app
import { createApp } from 'vue';
const app = createApp(toNative(MyComponent));

type ComponentSetupFunction = (
  props: Readonly<any>, 
  ctx: SetupContext<any>
) => Record<string, any> | Promise<Record<string, any>>;

type OptionSetupFunction = (
  props: Readonly<any>, 
  ctx: SetupContext<any>
) => any | Promise<any>;

interface Identity<IT extends IdentityType = { props: {}, events: {} }> {
  readonly [IdentitySymbol]: IT;
}

interface IdentityType {
  props: Record<string, any>;
  events: Record<string, any>;
}

import { Component, Setup, Prop } from "vue-facing-decorator";
import { ref } from "vue";

@Component({
  name: "FullLifecycleComponent"
})
class FullLifecycleComponent {
  @Prop({ type: String, required: true })
  initialValue!: string;

  @Setup(() => ref(0))
  counter!: number;

  // Lifecycle hooks - automatically detected and registered
  beforeCreate() {
    console.log("Before create");
  }

  created() {
    console.log("Created with initial value:", this.initialValue);
  }

  mounted() {
    console.log("Component mounted");
  }

  updated() {
    console.log("Component updated");
  }

  beforeUnmount() {
    console.log("Before unmount");
  }

  unmounted() {
    console.log("Unmounted");
  }
}

export default toNative(FullLifecycleComponent);