diff --git a/package.json b/package.json index 974aa55..4f0b6f5 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.14.1", "description": "Perform virtual DOM updates based on changes to a data model.", "main": "lib/index.js", + "types": "types/etch.d.ts", "scripts": { "test": "npm run standard && npm run mocha", "mocha": "electron-mocha test --renderer --recursive --require @babel/register", @@ -41,7 +42,8 @@ "estraverse-fb": "^1.3.2", "mocha": "^8.1.3", "random-seed": "^0.3.0", - "standard": "^8.5.0" + "standard": "^8.5.0", + "typescript": "^4.0.3" }, "standard": { "parser": "babel-eslint", diff --git a/types/dom.d.ts b/types/dom.d.ts new file mode 100644 index 0000000..e963c5c --- /dev/null +++ b/types/dom.d.ts @@ -0,0 +1,6 @@ +import {JSX, EtchJSXElement, EtchExtraProps, Props, ChildSpec, TagSpec, ElementClassConstructor} from "./etch-element" + +export function dom(tag: T, props?: HTMLElementTagNameMap[T] & EtchExtraProps & Props, ...children: ChildSpec[]): EtchJSXElement +export function dom(tag: T, props?: SVGElementTagNameMap[T] & EtchExtraProps & Props, ...children: ChildSpec[]): EtchJSXElement +export function dom( tag: ElementClassConstructor, props: T["props"],...children: ChildSpec[]): EtchJSXElement +export function dom(tag: string, props?: EtchExtraProps & Props, ...children: ChildSpec[]): EtchJSXElement diff --git a/types/etch-element.d.ts b/types/etch-element.d.ts new file mode 100644 index 0000000..0a4ce93 --- /dev/null +++ b/types/etch-element.d.ts @@ -0,0 +1,74 @@ +/** Etch class props */ +type Props = object + +/** Etch element extra props */ +interface EtchExtraProps { + ref?: string + className?: string + on?: { + click?: (e: MouseEvent) => any + [name: string]: ((e: any) => any) | undefined + } + dataset?: { + [propName: string]: string | number | null + } + innerHTML?: string + innerText?: string + key?: any +} + +/** Etch HTML element */ +export interface EtchHTMLElement { + tag: Tag + props: HTMLElementTagNameMap[Tag] & EtchExtraProps & Props + children: ChildSpec + ambiguous: Array +} + +/** Etch SVG element */ +export interface EtchSVGElement { + tag: Tag + props: SVGElementTagNameMap[Tag] & EtchExtraProps & Props + children?: ChildSpec + ambiguous: Array +} + + +/** Etch element's tag */ +type TagSpec = string | ElementClassConstructor | keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap + +/** General Etch element */ +export interface EtchElement { + tag: Tag + props: EtchExtraProps & Props + children?: ChildSpec + ambiguous: Array +} + +/** Etch JSX Element */ +type EtchJSXElement = + | EtchHTMLElement + | EtchSVGElement + | EtchElement + | {text: string | number} + +type SingleOrArray = T | T[] +/** type of etch elements' children */ +type ChildSpec = SingleOrArray + + +type ElementClassConstructor = new (props: T["props"], children: EtchJSXElement[]) => T + +export declare namespace JSX { + type Element = EtchJSXElement + type IntrinsicElements = EtchJSXElement + class ElementClass { + public props: Props + constructor(props: Props, children?: EtchJSXElement[]) + public render?(): EtchJSXElement + public update(props: Props, children?: EtchJSXElement[]): Promise + } + interface ElementAttributesProperty { + props: Props // specify the property name to use + } +} diff --git a/types/etch.d.ts b/types/etch.d.ts new file mode 100644 index 0000000..ab54a62 --- /dev/null +++ b/types/etch.d.ts @@ -0,0 +1,12 @@ +export * from "./etch-element" +export * from "./dom" +import {EtchJSXElement} from "./etch-element" + +export function destroy(component: any, removeNode?: boolean): Promise +export function destroySync(component: any, removeNode: any): void +export function getScheduler(): any +export function initialize(component: any): void +export function render(virtualNode: EtchJSXElement, options?: any): Node +export function setScheduler(customScheduler: any): void +export function update(component: any, replaceNode?: boolean): Promise +export function updateSync(component: any, replaceNode?: boolean): void