import { computed, type ComputedRef, type Block } from 'vue'

const Comp = defineVaporComponent(
    <T extends number>(
      props: { foo: T },
      {
        expose,
        slots,
      }: {
        slots: { default?: (props: { foo: T }) => Block }
        expose: (exposed: { double: ComputedRef<T> }) => void
      },
    ) => {
      const double = computed(() => (props.foo * 2) as T)
      expose({ double })
      return slots.default!({ foo: props.foo })
    },
)

const comp = new Comp<1>({ foo: 1 })
comp.props.foo === ({} as 1)
comp.exposeProxy?.double === ({} as 1)
comp.slots === ({} as { default?: (props: { foo: 1 }) => Block })

const Comp = defineVaporComponent({
  props: {
    foo: {
      type: Number,
      required: true,
    }
  },
  slots: {} as { default?: (props: { foo: number }) => Block }
  setup(props){
    const double = computed(() => props.foo * 2)
    return {
      double
    }
  },
  render(ctx, props, emit, attrs, slots){
    return slots.default?.({ foo: props.foo })
  }
})

const comp = new Comp({ foo: 1 })
comp.props.foo === {} as number
comp.exposeProxy?.double === {} as number
comp.slots === ({} as { default?: (props: { foo: number }) => Block })

// jsx.d.ts
declare global {
  namespace JSX {
    export type Element = VNode | Block
  }
}

interface Constructor<P = any> {
  new (props?: P): { $props: P }
  //   ^^^^^^^^^
}