type ElementTagNames = keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap; /** * Maps from known elment tag names to options that can be set with .setAttribute. * New elements/properties should be added as necessary. */ interface ElementToPropertiesMap { path: { d: string; fill: string; stroke: string; 'stroke-width': string; transform: string; }; button: { type: 'button'; }; rect: { stroke: string; fill: string; x: number; y: number; width: number; height: number; transform: string; }; pattern: { viewBox: string; width: string; height: string; patternUnits: 'userSpaceOnUse'; }; stop: { offset: string; 'stop-color': string; }; svg: { viewBox: `${number} ${number} ${number} ${number}`; }; } type EmptyObject = Record; type ElementProperties = Tag extends keyof ElementToPropertiesMap ? Partial : EmptyObject; /** Contains options for creating an element with tag = `Tag`. */ type ElementConfig = ElementProperties & { id?: string; children?: (HTMLElement | SVGElement)[]; }; /** * Maps from element tag names (e.g. `Tag='button'`) to the corresponding element type * (e.g. `HTMLButtonElement`). */ type ElementTagToType = Tag extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Tag] : Tag extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Tag] : never; export declare enum ElementNamespace { Html = "html", Svg = "svg" } /** * Shorthand for creating an element with `document.createElement`, then assigning properties. * * Non-HTML elements (e.g. `svg` elements) should use the `elementType` parameter to select * the element namespace. */ declare const createElement: (tag: Tag, props: ElementConfig, elementType?: ElementNamespace) => ElementTagToType; export declare const createSvgElement: (tag: Tag, props: ElementConfig) => ElementTagToType; export declare const createSvgElements: (tag: Tag, elements: ElementConfig[]) => ElementTagToType[]; export declare const createSvgPaths: (...paths: ElementConfig<"path">[]) => SVGPathElement[]; export default createElement;