import { Cleanup, MaybeSignal, Signal, SignalLike } from "./scope.js";
import type { DomEventProps, DomProps } from "./dom.js";
import { EventNameToJsxProp, JsxPropNameToEventName } from "./utils.js";
import { useScope } from "./scope.js";
import { Context } from "./context.js";
import { Template } from "./template.js";
interface Tagged<in out T> {
    _tag: T;
}
type OmitNever<T> = Omit<T, {
    [K in keyof T]: T[K] extends never ? K : never;
}[keyof T]>;
type PartialRequire<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
/** @ignore */
export interface PropMeta<T> extends PropOptions<T>, Tagged<"p"> {
    _type?: [T];
    _defaultOrContext: T;
}
export interface AttributeOptions<T> {
    /**
     * The name of the attribute to observe.
     *
     * Defaults to the kebab-case version of the prop.
     */
    name?: string;
    /**
     * A function to transform the attribute value to the prop value.
     */
    transform: (value: string) => T;
    /**
     * Set to `true` to not observe the attribute for changes.
     *
     * @default false
     */
    static?: boolean;
}
type PartialPartial<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
export interface PropOptions<T> {
    attribute?: ((value: string) => T) | (string extends T ? PartialPartial<AttributeOptions<T>, "transform"> : AttributeOptions<T>);
}
type Props<M> = OmitNever<{
    readonly [K in keyof M]: M[K] extends PropMeta<infer T> ? Signal<T> : never;
}>;
export type EventConstructor<T = any, E = Event> = new (name: string, arg: T) => E;
/** @ignore */
export interface EventMeta<out E extends EventConstructor> extends Tagged<"e"> {
    _event: E;
}
type Events<M> = OmitNever<Omit<{
    readonly [K in keyof M]: K extends `on${string}` ? M[K] extends EventMeta<infer E> ? E : never : never;
}, `on${Lowercase<keyof HTMLElementEventMap>}`>>;
type GeneralJsxProps<T> = Partial<OmitNever<{
    [K in keyof T]: K extends typeof jsxPropsSym | keyof DomProps<any> | `on${string}` | `${Uppercase<infer _>}${string}` | "accessKeyLabel" | "offsetHeight" | "offsetLeft" | "offsetParent" | "offsetTop" | "offsetWidth" | "attributes" | "classList" | "clientHeight" | "clientLeft" | "clientTop" | "clientWidth" | "localName" | "namespaceURI" | "ownerDocument" | "part" | "prefix" | "scrollHeight" | "scrollWidth" | "shadowRoot" | "tagName" | "baseURI" | "childNodes" | "firstChild" | "isConnected" | "lastChild" | "nextSibling" | "nodeName" | "nodeType" | "parentElement" | "parentNode" | "previousSibling" | "nextElementSibling" | "previousElementSibling" | "childElementCount" | "firstElementChild" | "lastElementChild" | "assignedSlot" | "attributeStyleMap" | "isContentEditable" | "dataset" ? never : T[K] extends Function ? never : MaybeSignal<T[K]>;
}>> & DomProps<any> & DomEventProps<never> & Record<string, any>;
export type JsxProps<T extends HTMLElement> = typeof jsxPropsSym extends keyof T ? NonNullable<T[typeof jsxPropsSym]> : any;
type ComponentJsxProps<M> = Partial<OmitNever<{
    [K in keyof Props<M>]: Props<M>[K] extends Signal<infer T> ? MaybeSignal<T> : never;
}> & {
    [K in keyof Events<M>]: (evt: InstanceType<Events<M>[K]>) => void;
}> & GeneralJsxProps<HTMLElement>;
type EventEmitters<M> = OmitNever<Omit<{
    [K in keyof Events<M>]: Events<M>[K] extends EventConstructor<infer E> ? undefined extends E ? (arg?: E) => boolean : (arg: E) => boolean : never;
}, `on${Lowercase<keyof HTMLElementEventMap>}`>>;
/**
 * Defines a property in your component metadata that can be set from outside
 * of the component.
 *
 * Make sure to avoid conflicts with native `HTMLElement` properties.
 *
 * You can get properties by accessing the {@link Signal} in `this.props`.
 * It's also possible to set the properties directly on the component instance.
 *
 * It's also possible to define an attribute for the property by setting the
 * `attribute` option. By default, the attribute name is the kebab-case version
 * of the property name. The attribute will be observed and the signal updated
 * on changes. You can also provide a custom name and a transform function to
 * convert the attribute value to the property value.
 *
 * @example
 * ```tsx
 * class App extends Component("x-app", {
 *   greetingMessage: prop<string>("Hello, world!", {
 *     attribute: {
 *       name: "greeting",
 *     }
 *   }),
 * }) {
 *   render() {
 *     return <h1>{this.props.greetingMessage}</h1>;
 *   }
 * }
 *
 * defineComponents(App);
 *
 * const app = new App();
 * app.greetingMessage = "Hello, universe!";
 * ```
 */
export declare const prop: (<T>(context: Context<T>, opts?: PropOptions<T>) => PropMeta<T | undefined>) & (<T>(defaultValue: T, opts?: PropOptions<T>) => PropMeta<T>) & (<T>(defaultValue?: T, opts?: PropOptions<T | undefined>) => PropMeta<T | undefined>);
type _CustomEventContructor<T> = undefined extends T ? typeof CustomEvent<T> : EventConstructor<PartialRequire<CustomEventInit<T>, "detail">, CustomEvent<T>>;
/**
 * Defines an event in your component metadata that can be dispatched by
 * the component.
 *
 * Make sure your event name starts with `on` and to avoid conflicts with
 * native `HTMLElement` events. The event name will be converted to kebab-case.
 *
 * You can dispatch events either using `HTMLElement.dispatchEvent` or by
 * calling the event emitter function in `this.events` inside the `render`
 * function of a component.
 *
 * @example
 * ```tsx
 * class App extends Component("x-app", {
 *   onSomethingHappen: event<string>(),
 *   // Event name will be `something-happen`
 * }) {
 *   render() {
 *     // …
 *     this.events.onSomethingHappen({ detail: "Something happened! "});
 *   }
 * }
 *
 * const app = new App();
 * app.addEventListener("something-happen", (evt) => {
 *   // `evt` is `CustomEvent<string>`
 *   console.log(evt.detail);
 * });
 * ```
 *
 * You can also provide a custom event constructor:
 *
 * @example
 * ```tsx
 * class App extends Component("x-app", {
 *   onSomethingClick: event(() => MouseEvent),
 * }) {
 *   render() {
 *     return (
 *       <button onclick={evt => this.events.onSomethingClick(evt)}>
 *         Click me!
 *       </button>
 *     );
 *   }
 * }
 * ```
 */
export declare const event: (() => EventMeta<_CustomEventContructor<undefined>>) & (<T>() => EventMeta<_CustomEventContructor<T>>) & (<E extends EventConstructor>(eventConstructor: E) => EventMeta<E>);
export type Metadata = {
    [K in keyof _ComponentInner<any> | "props" | "events"]?: never;
} & {
    [K in keyof DomProps<any>]?: never;
} & {
    [K in keyof HTMLElement]?: never;
} & {
    [name: string]: PropMeta<any> | EventMeta<any>;
};
export declare const componentSym: unique symbol;
export declare const jsxPropsSym: unique symbol;
export declare abstract class _ComponentInner<M extends Metadata> {
    protected props: Props<M>;
    protected events: EventEmitters<M>;
    readonly [jsxPropsSym]?: ComponentJsxProps<M>;
    readonly [componentSym]: {
        _scope?: ReturnType<typeof useScope>;
        _destroy?: (() => void) | void;
    };
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, oldValue: string | null, value: string | null): void;
    addEventListener<K extends JsxPropNameToEventName<keyof Events<M> & string>>(type: K, listener: (event: InstanceType<Events<M>[Extract<EventNameToJsxProp<K>, keyof Events<M>>]>) => void, options?: boolean | AddEventListenerOptions): void;
    removeEventListener<K extends JsxPropNameToEventName<keyof Events<M> & string>>(type: K, listener: (event: InstanceType<Events<M>[Extract<EventNameToJsxProp<K>, keyof Events<M>>]>) => void, options?: boolean | EventListenerOptions): void;
    abstract render(): Template;
}
export type Component<M extends Metadata = {}> = {
    -readonly [K in keyof Props<M>]: Props<M>[K] extends Signal<infer T> ? T | undefined : never;
} & _ComponentInner<M> & HTMLElement;
export interface ComponentConstructor<M extends Metadata = {}> {
    /** @ignore */
    readonly [componentSym]: {
        readonly _tagName: string | null;
    };
    readonly observedAttributes: readonly string[];
    new (): Component<M>;
}
export interface ComponentOptions {
    /**
     * Shadow DOM options. Set to `false` to disable shadow DOM.
     *
     * @default { mode: "open" }
     */
    shadow?: ShadowRootInit | false;
}
/**
 * Creates an effect which will rerun when any accessed signal changes.
 *
 * If used inside of a component and the component is not yet mounted, the
 * effect will run only after the component is mounted. Otherwise, the effect
 * will run immediately.
 *
 * @param fn The function to run; it may return a cleanup function.
 */
export declare const useMountEffect: (fn: () => Cleanup, deps?: SignalLike<unknown>[]) => void;
/**
 * Creates a new web component class.
 *
 * Specify props and events using the `metadata` parameter.
 *
 * @example
 * ```tsx
 * class MyComponent extends Component({
 *   myProp: prop<string>("Hello, world!"),
 *   onMyEvent: event(),
 * }) {
 *   render() {
 *     return (
 *       <>
 *         <h1>{this.props.myProp}</h1>
 *         <button onclick={() => this.events.onMyEvent()}>Click me</button>
 *       </>
 *     );
 *   },
 * }
 *
 * defineComponents(MyComponent);
 * ```
 */
export declare const Component: ((tagName?: string) => ComponentConstructor<{}>) & (<const M extends Metadata>(tagName: string, metadata: M, opts?: ComponentOptions) => ComponentConstructor<M>) & (<const M extends Metadata>(metadata: M, opts?: ComponentOptions) => ComponentConstructor<M>);
/**
 * Determines whether the given value is a component created by
 * extending {@link ComponentConstructor}.
 */
export declare const isComponent: (value: any) => value is ComponentConstructor | Component;
/**
 * Represents a functional component.
 *
 * @example
 * ```tsx
 * const MyComponent: FunctionalComponent<{
 *   name: MaybeSignal<string>;
 * }> = ({ name }) => {
 *   return <h1>Hello, {name}!</h1>;
 * };
 * ```
 */
export interface FunctionalComponent<in P extends object = {}> {
    (props: P): Template;
}
/**
 * Defines a set of components with the given prefix.
 */
export declare const defineComponents: ((...components: ComponentConstructor[]) => void) & ((prefix: string, ...components: ComponentConstructor[]) => void);
export {};