/*istanbul ignore next */
/**
* The class used for the instantaniation of TeddyTags virtual elements
*
* Declaration:
* ```js
* class MyComponent extends Component{
* constructor(props){
* super(props)
* }
* render(){
* //return your markup
* }
* }
* ```
*/
/*istanbul ignore next */
declare class Component
implements ComponentFunctions {
/**
* The general properties of the Component. Cannot be changed once set.
* Should contain some unique or permanent information.
* Only accessible if passed through the constructor as `super(props)`.
*/
readonly props: P;
/**
* The attributes of the Component which can be changed as per user's basis.
* Should contain some temporary information.
*/
state: S;
/**
* The constructor of the Component. It is a **must to pass `super(props)`** before other things.
* @param {P} props The properties of the Component
*/
constructor(props: P);
/**
* The function which will alter with the `state` property of the Component.
* @param state
*/
/* istanbul ignore next */
setState(state: S): void;
readonly node?: VElement;
base?: Element;
dom?: Element;
render(): any;
componentDidMount(dom?: Element): void;
componentDidUnmount(): void;
componentDidUpdate(oldDOM?: Element, newDOM?: Element): void;
componentWillMount(dom?: Element): void;
}
/**
* The standard interface of an non-component virtual element
*/
interface VElement {
type: string;
dom?: Element;
readonly props: PropsOrState;
[children: string]: any;
}
type PropsOrState = {
[propOrState: string]: T;
}; /**
* The standard interface of a component virtual element
*/
/**
* The standard interface of a component virtual element
*/
/**
* The standard interface of a component virtual element
*/
interface ComponentFunctions {
/**
* The function which will return the general markup of the Component.
* For Component to appear in the DOM, this function is necessary.
*/
render(): VElement;
/**
* The function which will invoke when the component is about to mount.
* @param dom The DOM element that will be mounted
*/
componentWillMount(dom?: Element): void;
/**
* The function which will invoke immediately after mounting the component.
* @param dom The DOM element that will is mounted
*/
componentDidMount(dom?: Element): void;
/**
* The function which will invoke immediately if the DOM of component updates.
* @param oldDOM The old DOM element
* @param newDOM The updated DOM element
*/
componentDidUpdate(oldDOM?: Element, newDOM?: Element): void;
/**
* The function which will invoke immediately after unmounting the component.
*/
componentDidUnmount(): void;
}
type h = {
(type: string, props: object, ...children: any[]): any;
(type: Function, props: object, ...children: any[]): any;
(type: Component, props: object, ...children: any[]): any;
};
/**
* The hyperscript function which will create virtual elements.
* @param type Can be the tagname of the element, a class component or a functional component
* @param props Properties to be passed
* @param children Child elements, if any
* Usage:
* ```js
* let app = h("div", null, h("h1", null, "Hello"))
* //becomes
* //Hello
* ```
*/
declare const h: h;
declare const Fragment: (props: any) => any;
/**
* The function that links your Virtual Elements to the real DOM.
* Appends the virtual element to the target
* Usage:
* ```js
* //App is a Component
* //If JSX
* render(, document.querySelector("#app"))
* //If no JSX
* render(h(App, null), document.querySelector("#app"))
* ```
* @param node Your virtual Element
* @param target The target to append to
*/
declare const render: (node: VElement, target: Element) => void;
/**
* Get the rendered DOM of the Component
* Only use this when the component is rendered (componentDidMount is a good place to use this)
* @param component The component to get the node
*/
declare const getDOMNode: (component: VElement | Component) => Element; /**
* Unmount a class Component from the DOM
* @param dom The parent element of the Component
* @param component The component class to unmount
*/
/**
* Unmount a class Component from the DOM
* @param dom The parent element of the Component
* @param component The component class to unmount
*/
declare const unmountComponent: (dom: Element) => boolean; /**
* Create a ref (reference to a DOM element)
*/
/**
* Create a ref (reference to a DOM element)
*/
declare const createRef: () => Ref; /**
* Standard interface of a ref
*/
/**
* Standard interface of a ref
*/
interface Ref {
/**
* The element stored in ref
*/
element: Element | null;
}
interface TagConstructorOptions {
/**
* Tag name of the custom element
*/
name: string;
/**
* Tag name of a vaild native HTML5 element or a TeddyTags class Component
*/
to: string | typeof Component;
} /**
* Record an entry in the registry
* @param name The name of the new entry
* @param entry The entry to be recorded
*/
/**
* Record an entry in the registry
* @param name The name of the new entry
* @param entry The entry to be recorded
*/
/**
* Record an entry in the registry
* @param name The name of the new entry
* @param entry The entry to be recorded
*/
/**
* Create amazing custom elements using this class
*/
declare class Tag {
/**
* Original tag name
*/
originalName: string;
/**
* Current tag name or a class Component
*/
current: string | typeof Component;
/**
* Array of converted custom elements
*/
DOMList: Array;
/**
* Initialize the transformer
* @param { TagConstructorOptions } options Options to pass to the transformer
*/
constructor(options: TagConstructorOptions);
}
declare global {
interface Window {
/**
* The TeddyTags Custom Tag registry instance
*/
TagRegistry: TagRegistry;
/**
* Global flag to check if observing the DOM
*/
__TD_DOM_OBSERVER__: boolean;
WebKitMutationObserver: typeof MutationObserver;
MozMutationObserver: typeof MutationObserver;
}
interface HTMLElement {
/**
* Information of the custom element
*/
tag: {
/**
* Original custom tag name
*/
originalName: string;
/**
* Tag convertee
*/
from: string | typeof Component;
};
}
} /**
* The TeddyTags Custom Tag registry instance
*/
/**
* The TeddyTags Custom Tag registry instance
*/
interface TagRegistry {
/**
* Registry of all custom elements
*/
elements: {
[element: string]: TagRegistryElement;
};
/**
* Get entry from the TagRegistry
* @param name The entry name
*/
getEntry(name: string): TagRegistryElement;
/**
* Get the mutated nodes
* @param name The original custom tag name
*/
getNodes(name: string): HTMLElement[];
} /**
* An entry of a custom element in the TagRegistry
*/
/**
* An entry of a custom element in the TagRegistry
*/
interface TagRegistryElement {
/**
* Form to which are converted to
*/
from: string | typeof Component;
/**
* An array of converted custom elements
*/
nodes: Array;
}
export { h, Fragment, render, getDOMNode, unmountComponent, createRef, Ref, Component, Tag, TagRegistry, VElement };
/*Courtesy of d.ts (https://github.com/geowarin/ts-react/blob/master/typings/react/d.ts)*/
type VNode = VElement | string | number | boolean | null | undefined;
interface SpecialAttributes {
//TeddyTags- specific attributes
/**
* Set HTML of the element.
* *WARNING: The children will be replaced by anything that is in this property.*
*/
innerHTML?: any;
class?: string;
ref?: Ref;
}
interface DOMAttributes {
onCopy?: ClipboardEventHandler;
onCut?: ClipboardEventHandler;
onPaste?: ClipboardEventHandler;
onKeyDown?: KeyboardEventHandler;
onKeyPress?: KeyboardEventHandler;
onKeyUp?: KeyboardEventHandler;
onFocus?: FocusEventHandler;
onBlur?: FocusEventHandler;
onChange?: FormEventHandler;
onInput?: FormEventHandler;
onSubmit?: FormEventHandler;
onClick?: MouseEventHandler;
onDoubleClick?: MouseEventHandler;
onDrag?: DragEventHandler;
onDragEnd?: DragEventHandler;
onDragEnter?: DragEventHandler;
onDragExit?: DragEventHandler;
onDragLeave?: DragEventHandler;
onDragOver?: DragEventHandler;
onDragStart?: DragEventHandler;
onDrop?: DragEventHandler;
onMouseDown?: MouseEventHandler;
onMouseEnter?: MouseEventHandler;
onMouseLeave?: MouseEventHandler;
onMouseMove?: MouseEventHandler;
onMouseOut?: MouseEventHandler;
onMouseOver?: MouseEventHandler;
onMouseUp?: MouseEventHandler;
onTouchCancel?: TouchEventHandler;
onTouchEnd?: TouchEventHandler;
onTouchMove?: TouchEventHandler;
onTouchStart?: TouchEventHandler;
onScroll?: UIEventHandler;
onWheel?: WheelEventHandler;
}
type ChildProps = { children?: VNode[] };
interface HTMLPropAttributes extends DOMAttributes, SpecialAttributes {
// Standard HTML Attributes
accept?: string;
acceptCharset?: string;
accessKey?: string;
action?: string;
allowFullScreen?: boolean;
allowTransparency?: boolean;
alt?: string;
async?: boolean;
autoComplete?: string;
autoFocus?: boolean;
autoPlay?: boolean;
capture?: boolean;
cellPadding?: number | string;
cellSpacing?: number | string;
charSet?: string;
challenge?: string;
checked?: boolean;
classID?: string;
className?: string;
cols?: number;
colSpan?: number;
content?: string;
contentEditable?: boolean;
contextMenu?: string;
controls?: boolean;
coords?: string;
crossOrigin?: string;
data?: string;
dateTime?: string;
default?: boolean;
defer?: boolean;
dir?: string;
disabled?: boolean;
download?: any;
draggable?: boolean;
encType?: string;
form?: string;
formAction?: string;
formEncType?: string;
formMethod?: string;
formNoValidate?: boolean;
formTarget?: string;
frameBorder?: number | string;
headers?: string;
height?: number | string;
hidden?: boolean;
high?: number;
href?: string;
hrefLang?: string;
htmlFor?: string;
httpEquiv?: string;
icon?: string;
id?: string;
inputMode?: string;
integrity?: string;
is?: string;
keyParams?: string;
keyType?: string;
kind?: string;
label?: string;
lang?: string;
list?: string;
loop?: boolean;
low?: number;
manifest?: string;
marginHeight?: number;
marginWidth?: number;
max?: number | string;
maxLength?: number;
media?: string;
mediaGroup?: string;
method?: string;
min?: number | string;
minLength?: number;
multiple?: boolean;
muted?: boolean;
name?: string;
noValidate?: boolean;
open?: boolean;
optimum?: number;
pattern?: string;
placeholder?: string;
poster?: string;
preload?: string;
radioGroup?: string;
readOnly?: boolean;
rel?: string;
required?: boolean;
role?: string;
rows?: number;
rowSpan?: number;
sandbox?: string;
scope?: string;
scoped?: boolean;
scrolling?: string;
seamless?: boolean;
selected?: boolean;
shape?: string;
size?: number;
sizes?: string;
span?: number;
spellCheck?: boolean;
src?: string;
srcDoc?: string;
srcLang?: string;
srcSet?: string;
start?: number;
step?: number | string;
style?: Partial | string;
summary?: string;
tabIndex?: number;
target?: string;
title?: string;
type?: string;
useMap?: string;
value?: string | string[];
width?: number | string;
wmode?: string;
wrap?: string;
// RDFa Attributes
about?: string;
datatype?: string;
inlist?: any;
prefix?: string;
property?: string;
resource?: string;
typeof?: string;
vocab?: string;
// Non-standard Attributes
autoCapitalize?: boolean;
autoCorrect?: string;
autoSave?: string;
color?: string;
itemProp?: string;
itemScope?: boolean;
itemType?: string;
itemID?: string;
itemRef?: string;
results?: number;
security?: string;
unselectable?: boolean;
}
interface SVGElementAttributes extends HTMLPropAttributes {
viewBox?: string;
preserveAspectRatio?: string;
}
interface SVGPropAttributes extends DOMAttributes, SpecialAttributes {
cx?: number | string;
cy?: number | string;
d?: string;
dx?: number | string;
dy?: number | string;
fill?: string;
fillOpacity?: number | string;
fontFamily?: string;
fontSize?: number | string;
fx?: number | string;
fy?: number | string;
gradientTransform?: string;
gradientUnits?: string;
markerEnd?: string;
markerMid?: string;
markerStart?: string;
offset?: number | string;
opacity?: number | string;
patternContentUnits?: string;
patternUnits?: string;
points?: string;
preserveAspectRatio?: string;
r?: number | string;
rx?: number | string;
ry?: number | string;
spreadMethod?: string;
stopColor?: string;
stopOpacity?: number | string;
stroke?: string;
strokeDasharray?: string;
strokeLinecap?: string;
strokeOpacity?: number | string;
strokeWidth?: number | string;
textAnchor?: string;
transform?: string;
version?: string;
viewBox?: string;
x1?: number | string;
x2?: number | string;
x?: number | string;
y1?: number | string;
y2?: number | string;
y?: number | string;
}
export type HTMLProps = HTMLPropAttributes & ChildProps & {};
export type SVGProps = SVGPropAttributes & ChildProps & {};
export type ExtendProps = K extends HTMLElement
? HTMLPropAttributes
: K extends SVGElement
? SVGPropAttributes
: unknown & ChildProps & T;
// Events
interface SyntheticEvent {
bubbles: boolean;
cancelable: boolean;
currentTarget: EventTarget;
defaultPrevented: boolean;
eventPhase: number;
isTrusted: boolean;
nativeEvent: Event;
preventDefault(): void;
stopPropagation(): void;
target: EventTarget;
timeStamp: Date;
type: string;
}
interface DragEvent extends SyntheticEvent {
dataTransfer: DataTransfer;
}
interface ClipboardEvent extends SyntheticEvent {
clipboardData: DataTransfer;
}
interface KeyboardEvent extends SyntheticEvent {
altKey: boolean;
charCode: number;
ctrlKey: boolean;
getModifierState(key: string): boolean;
key: string;
keyCode: number;
locale: string;
location: number;
metaKey: boolean;
repeat: boolean;
shiftKey: boolean;
which: number;
}
interface FocusEvent extends SyntheticEvent {
relatedTarget: EventTarget;
}
interface FormEvent extends SyntheticEvent {}
interface MouseEvent extends SyntheticEvent {
altKey: boolean;
button: number;
buttons: number;
clientX: number;
clientY: number;
ctrlKey: boolean;
getModifierState(key: string): boolean;
metaKey: boolean;
pageX: number;
pageY: number;
relatedTarget: EventTarget;
screenX: number;
screenY: number;
shiftKey: boolean;
}
interface TouchEvent extends SyntheticEvent {
altKey: boolean;
changedTouches: TouchList;
ctrlKey: boolean;
getModifierState(key: string): boolean;
metaKey: boolean;
shiftKey: boolean;
targetTouches: TouchList;
touches: TouchList;
}
interface UIEvent extends SyntheticEvent {
detail: number;
view: AbstractView;
}
interface WheelEvent extends SyntheticEvent {
deltaMode: number;
deltaX: number;
deltaY: number;
deltaZ: number;
}
interface AbstractView {
styleMedia: StyleMedia;
document: Document;
}
interface Touch {
identifier: number;
target: EventTarget;
screenX: number;
screenY: number;
clientX: number;
clientY: number;
pageX: number;
pageY: number;
}
interface TouchList {
[index: number]: Touch;
length: number;
item(index: number): Touch;
identifiedTouch(identifier: number): Touch;
}
//
// Event Handler Types
// ----------------------------------------------------------------------
interface EventHandler {
(event: E): void;
}
interface DragEventHandler extends EventHandler {}
interface ClipboardEventHandler extends EventHandler {}
interface KeyboardEventHandler extends EventHandler {}
interface FocusEventHandler extends EventHandler {}
interface FormEventHandler extends EventHandler {}
interface MouseEventHandler extends EventHandler {}
interface TouchEventHandler extends EventHandler {}
interface UIEventHandler extends EventHandler {}
interface WheelEventHandler extends EventHandler {}
declare global {
interface Window {
/**
* The TeddyTags Custom Tag registry instance
*/
TagRegistry: TagRegistry;
/**
* Global flag to check if observing the DOM
*/
__TD_DOM_OBSERVER__: boolean;
WebKitMutationObserver: typeof MutationObserver;
MozMutationObserver: typeof MutationObserver;
}
interface HTMLElement {
/**
* Information of the custom element
*/
tag: {
/**
* Original custom tag name
*/
originalName: string;
/**
* Tag convertee
*/
from: string | typeof Component;
};
}
namespace JSX {
interface Element extends VElement {}
interface ElementClass extends Component {}
interface IntrinsicElements {
// HTML
a: HTMLProps;
abbr: HTMLProps;
address: HTMLProps;
area: HTMLProps;
article: HTMLProps;
aside: HTMLProps;
audio: HTMLProps;
b: HTMLProps;
base: HTMLProps;
bdi: HTMLProps;
bdo: HTMLProps;
big: HTMLProps;
blockquote: HTMLProps;
body: HTMLProps;
br: HTMLProps;
button: HTMLProps;
canvas: HTMLProps;
caption: HTMLProps;
cite: HTMLProps;
code: HTMLProps;
col: HTMLProps;
colgroup: HTMLProps;
data: HTMLProps;
datalist: HTMLProps;
dd: HTMLProps;
del: HTMLProps;
details: HTMLProps;
dfn: HTMLProps;
dialog: HTMLProps;
div: HTMLProps;
dl: HTMLProps;
dt: HTMLProps;
em: HTMLProps;
embed: HTMLProps;
fieldset: HTMLProps;
figcaption: HTMLProps;
figure: HTMLProps;
footer: HTMLProps;
form: HTMLProps;
h1: HTMLProps;
h2: HTMLProps;
h3: HTMLProps;
h4: HTMLProps;
h5: HTMLProps;
h6: HTMLProps;
head: HTMLProps;
header: HTMLProps;
hgroup: HTMLProps;
hr: HTMLProps;
html: HTMLProps;
i: HTMLProps;
iframe: HTMLProps;
img: HTMLProps;
input: HTMLProps;
ins: HTMLProps;
kbd: HTMLProps;
keygen: HTMLProps;
label: HTMLProps;
legend: HTMLProps;
li: HTMLProps;
link: HTMLProps;
main: HTMLProps;
map: HTMLProps;
mark: HTMLProps;
marquee: HTMLProps;
menu: HTMLProps;
menuitem: HTMLProps;
meta: HTMLProps;
meter: HTMLProps;
nav: HTMLProps;
noscript: HTMLProps;
object: HTMLProps;
ol: HTMLProps;
optgroup: HTMLProps;
option: HTMLProps;
output: HTMLProps;
p: HTMLProps;
param: HTMLProps;
picture: HTMLProps;
pre: HTMLProps;
progress: HTMLProps;
q: HTMLProps;
rp: HTMLProps;
rt: HTMLProps;
ruby: HTMLProps;
s: HTMLProps;
samp: HTMLProps;
script: HTMLProps;
section: HTMLProps;
select: HTMLProps;
slot: HTMLProps;
small: HTMLProps;
source: HTMLProps;
span: HTMLProps;
strong: HTMLProps;
style: HTMLProps;
sub: HTMLProps;
summary: HTMLProps;
sup: HTMLProps;
table: HTMLProps;
tbody: HTMLProps;
td: HTMLProps;
textarea: HTMLProps;
tfoot: HTMLProps;
th: HTMLProps;
thead: HTMLProps;
time: HTMLProps;
title: HTMLProps;
tr: HTMLProps;
track: HTMLProps;
u: HTMLProps;
ul: HTMLProps;
var: HTMLProps;
video: HTMLProps;
wbr: HTMLProps;
//SVG
svg: SVGProps;
animate: SVGProps;
circle: SVGProps;
clipPath: SVGProps;
defs: SVGProps;
desc: SVGProps;
ellipse: SVGProps;
feBlend: SVGProps;
feColorMatrix: SVGProps;
feComponentTransfer: SVGProps;
feComposite: SVGProps;
feConvolveMatrix: SVGProps;
feDiffuseLighting: SVGProps;
feDisplacementMap: SVGProps;
feFlood: SVGProps;
feGaussianBlur: SVGProps;
feImage: SVGProps;
feMerge: SVGProps;
feMergeNode: SVGProps;
feMorphology: SVGProps;
feOffset: SVGProps;
feSpecularLighting: SVGProps;
feTile: SVGProps;
feTurbulence: SVGProps;
filter: SVGProps;
foreignObject: SVGProps;
g: SVGProps;
image: SVGProps;
line: SVGProps;
linearGradient: SVGProps;
marker: SVGProps;
mask: SVGProps;
path: SVGProps;
pattern: SVGProps;
polygon: SVGProps;
polyline: SVGProps;
radialGradient: SVGProps;
rect: SVGProps;
stop: SVGProps;
symbol: SVGProps;
text: SVGProps;
tspan: SVGProps;
use: SVGProps;
}
}
}