declare namespace JSX {
    export type IntrinsicElements = {
        [index: string]: any
    }
    type ElementType = Fragment | string | Component<any, any>
    type Element = DLElement<any>

    interface ElementAttributesProperty {
        props: {}
    }
    interface ElementChildrenAttribute {
        children: {}
    }
}

declare function h(
    type: string,
    props?: { [index: string]: any } | null,
    ...children: (HTMLElement | string)[]
): Node
declare function $if(
    condition: DLPointer<any> | any,
    then?: Element,
    otherwise?: Element
): HTMLElement

type DLPointer<T> = {
    readonly __symbol: unique symbol
    readonly __signature: T
}

declare function use<T>(sink: T, mapping?: (arg: T) => any): DLPointer<T>
declare function useValue<T>(trap: DLPointer<T>): T

type Stateful<T> = T & { readonly symbol: unique symbol }

declare function stateful<T>(target: T): Stateful<T>
declare function $state<T>(target: T): Stateful<T>
declare function $store<T>(
    target: T,
    ident: string,
    backing: 'localstorage'
): Stateful<T>

declare function handle<T>(
    references: DLPointer<T>,
    callback: (value: T) => void
): void

declare function css(strings: TemplateStringsArray, ...values: any): string
declare function rule(strings: TemplateStringsArray, ...values: any): string
declare var styled: { new: typeof css; rule: typeof rule }

type DLCSS = string

declare var $el: HTMLElement

type Fragment = { readonly fragment: unique symbol }
declare var Fragment: Fragment

interface Element {
    $: OuterComponentTypes & { [index: string | symbol]: any }
}

interface DLElement<T> extends HTMLElement {
    $: T & OuterComponentTypes
}

type ComponentElement<T extends (...args: any) => any> = ReturnType<T>

type OuterComponentTypes = {
    root: Element
    children: Element[]
}
type InnerComponentTypes = {
    css: DLCSS
    mount?: () => void
}
type ComponentTypes = OuterComponentTypes & InnerComponentTypes

type ArrayOrSingular<T extends []> = T | T[keyof T]

type Component<
    Public,
    Private,
    Constructed extends string | symbol | number = never,
> = (
    this: Public & Private & ComponentTypes,
    props: ([Constructed] extends [never]
        ? Public
        : Omit<Public, Constructed>) & {
        children?: ArrayOrSingular<
            Private extends { children: any } ? Private['children'] : never
        >
        [index: `${'bind:'}${string}`]: any
    }
) => DLElement<Public>