Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@chialab/dna
Advanced tools
@chialab/dna - npm Package Compare versions
Comparing version 3.0.0-alpha.2 to 3.0.0-alpha.3
@@ -1,273 +0,2 @@ | ||
| declare type CustomElement = HTMLElement & { | ||
| connectedCallback(): void; | ||
| disconnectedCallback(): void; | ||
| render(): void; | ||
| attributeChangedCallback(attributeName: string, oldValue: null | string, newValue: null | string): void; | ||
| propertyChangedCallback(propertyName: string, oldValue: any, newValue: any): void; | ||
| }; | ||
| /** | ||
| * The abstact HTMLElement that Component extends. | ||
| * It proxies the DOM.Element class. | ||
| * @private | ||
| */ | ||
| declare const AbstractElement: { | ||
| new (): { | ||
| accessKey: string; | ||
| readonly accessKeyLabel: string; | ||
| autocapitalize: string; | ||
| dir: string; | ||
| draggable: boolean; | ||
| hidden: boolean; | ||
| innerText: string; | ||
| lang: string; | ||
| readonly offsetHeight: number; | ||
| readonly offsetLeft: number; | ||
| readonly offsetParent: Element | null; | ||
| readonly offsetTop: number; | ||
| readonly offsetWidth: number; | ||
| spellcheck: boolean; | ||
| title: string; | ||
| translate: boolean; | ||
| click(): void; | ||
| addEventListener<K extends "input" | "progress" | "select" | "fullscreenchange" | "fullscreenerror" | "abort" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "blur" | "cancel" | "canplay" | "canplaythrough" | "change" | "click" | "close" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "error" | "focus" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadend" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "pause" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "reset" | "resize" | "scroll" | "securitypolicyviolation" | "seeked" | "seeking" | "stalled" | "submit" | "suspend" | "timeupdate" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "waiting" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void; | ||
| addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void; | ||
| removeEventListener<K extends "input" | "progress" | "select" | "fullscreenchange" | "fullscreenerror" | "abort" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "blur" | "cancel" | "canplay" | "canplaythrough" | "change" | "click" | "close" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "error" | "focus" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadend" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "pause" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "reset" | "resize" | "scroll" | "securitypolicyviolation" | "seeked" | "seeking" | "stalled" | "submit" | "suspend" | "timeupdate" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "waiting" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions | undefined): void; | ||
| removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void; | ||
| readonly assignedSlot: HTMLSlotElement | null; | ||
| readonly attributes: NamedNodeMap; | ||
| readonly classList: DOMTokenList; | ||
| className: string; | ||
| readonly clientHeight: number; | ||
| readonly clientLeft: number; | ||
| readonly clientTop: number; | ||
| readonly clientWidth: number; | ||
| id: string; | ||
| innerHTML: string; | ||
| readonly localName: string; | ||
| readonly namespaceURI: string | null; | ||
| onfullscreenchange: ((this: Element, ev: Event) => any) | null; | ||
| onfullscreenerror: ((this: Element, ev: Event) => any) | null; | ||
| outerHTML: string; | ||
| readonly prefix: string | null; | ||
| readonly scrollHeight: number; | ||
| scrollLeft: number; | ||
| scrollTop: number; | ||
| readonly scrollWidth: number; | ||
| readonly shadowRoot: ShadowRoot | null; | ||
| slot: string; | ||
| readonly tagName: string; | ||
| attachShadow(shadowRootInitDict: ShadowRootInit): ShadowRoot; | ||
| closest<K extends "object" | "div" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr">(selector: K): HTMLElementTagNameMap[K] | null; | ||
| closest<K extends "symbol" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">(selector: K): SVGElementTagNameMap[K] | null; | ||
| closest(selector: string): Element | null; | ||
| getAttribute(qualifiedName: string): string | null; | ||
| getAttributeNS(namespace: string | null, localName: string): string | null; | ||
| getAttributeNames(): string[]; | ||
| getAttributeNode(name: string): Attr | null; | ||
| getAttributeNodeNS(namespaceURI: string, localName: string): Attr | null; | ||
| getBoundingClientRect(): ClientRect | DOMRect; | ||
| getClientRects(): ClientRectList | DOMRectList; | ||
| getElementsByClassName(classNames: string): HTMLCollectionOf<Element>; | ||
| getElementsByTagName<K extends "object" | "div" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr">(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>; | ||
| getElementsByTagName<K extends "symbol" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>; | ||
| getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>; | ||
| getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>; | ||
| getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>; | ||
| getElementsByTagNameNS(namespaceURI: string, localName: string): HTMLCollectionOf<Element>; | ||
| hasAttribute(qualifiedName: string): boolean; | ||
| hasAttributeNS(namespace: string | null, localName: string): boolean; | ||
| hasAttributes(): boolean; | ||
| hasPointerCapture(pointerId: number): boolean; | ||
| insertAdjacentElement(position: InsertPosition, insertedElement: Element): Element | null; | ||
| insertAdjacentHTML(where: InsertPosition, html: string): void; | ||
| insertAdjacentText(where: InsertPosition, text: string): void; | ||
| matches(selectors: string): boolean; | ||
| msGetRegionContent(): any; | ||
| releasePointerCapture(pointerId: number): void; | ||
| removeAttribute(qualifiedName: string): void; | ||
| removeAttributeNS(namespace: string | null, localName: string): void; | ||
| removeAttributeNode(attr: Attr): Attr; | ||
| requestFullscreen(): Promise<void>; | ||
| scroll(options?: ScrollToOptions | undefined): void; | ||
| scroll(x: number, y: number): void; | ||
| scrollBy(options?: ScrollToOptions | undefined): void; | ||
| scrollBy(x: number, y: number): void; | ||
| scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void; | ||
| scrollTo(options?: ScrollToOptions | undefined): void; | ||
| scrollTo(x: number, y: number): void; | ||
| setAttribute(qualifiedName: string, value: string): void; | ||
| setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void; | ||
| setAttributeNode(attr: Attr): Attr | null; | ||
| setAttributeNodeNS(attr: Attr): Attr | null; | ||
| setPointerCapture(pointerId: number): void; | ||
| toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean; | ||
| webkitMatchesSelector(selectors: string): boolean; | ||
| readonly baseURI: string; | ||
| readonly childNodes: NodeListOf<ChildNode>; | ||
| readonly firstChild: ChildNode | null; | ||
| readonly isConnected: boolean; | ||
| readonly lastChild: ChildNode | null; | ||
| readonly nextSibling: Node | null; | ||
| readonly nodeName: string; | ||
| readonly nodeType: number; | ||
| nodeValue: string | null; | ||
| readonly ownerDocument: Document | null; | ||
| readonly parentElement: HTMLElement | null; | ||
| readonly parentNode: (Node & ParentNode) | null; | ||
| readonly previousSibling: Node | null; | ||
| textContent: string | null; | ||
| appendChild<T extends Node>(newChild: T): T; | ||
| cloneNode(deep?: boolean | undefined): Node; | ||
| compareDocumentPosition(other: Node): number; | ||
| contains(other: Node | null): boolean; | ||
| getRootNode(options?: GetRootNodeOptions | undefined): Node; | ||
| hasChildNodes(): boolean; | ||
| insertBefore<T extends Node>(newChild: T, refChild: Node | null): T; | ||
| isDefaultNamespace(namespace: string | null): boolean; | ||
| isEqualNode(otherNode: Node | null): boolean; | ||
| isSameNode(otherNode: Node | null): boolean; | ||
| lookupNamespaceURI(prefix: string | null): string | null; | ||
| lookupPrefix(namespace: string | null): string | null; | ||
| normalize(): void; | ||
| removeChild<T extends Node>(oldChild: T): T; | ||
| replaceChild<T extends Node>(newChild: Node, oldChild: T): T; | ||
| readonly ATTRIBUTE_NODE: number; | ||
| readonly CDATA_SECTION_NODE: number; | ||
| readonly COMMENT_NODE: number; | ||
| readonly DOCUMENT_FRAGMENT_NODE: number; | ||
| readonly DOCUMENT_NODE: number; | ||
| readonly DOCUMENT_POSITION_CONTAINED_BY: number; | ||
| readonly DOCUMENT_POSITION_CONTAINS: number; | ||
| readonly DOCUMENT_POSITION_DISCONNECTED: number; | ||
| readonly DOCUMENT_POSITION_FOLLOWING: number; | ||
| readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number; | ||
| readonly DOCUMENT_POSITION_PRECEDING: number; | ||
| readonly DOCUMENT_TYPE_NODE: number; | ||
| readonly ELEMENT_NODE: number; | ||
| readonly ENTITY_NODE: number; | ||
| readonly ENTITY_REFERENCE_NODE: number; | ||
| readonly NOTATION_NODE: number; | ||
| readonly PROCESSING_INSTRUCTION_NODE: number; | ||
| readonly TEXT_NODE: number; | ||
| dispatchEvent(event: Event): boolean; | ||
| readonly childElementCount: number; | ||
| readonly children: HTMLCollection; | ||
| readonly firstElementChild: Element | null; | ||
| readonly lastElementChild: Element | null; | ||
| append(...nodes: (string | Node)[]): void; | ||
| prepend(...nodes: (string | Node)[]): void; | ||
| querySelector<K extends "object" | "div" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr">(selectors: K): HTMLElementTagNameMap[K] | null; | ||
| querySelector<K extends "symbol" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">(selectors: K): SVGElementTagNameMap[K] | null; | ||
| querySelector<E extends Element = Element>(selectors: string): E | null; | ||
| querySelectorAll<K extends "object" | "div" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr">(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>; | ||
| querySelectorAll<K extends "symbol" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">(selectors: K): NodeListOf<SVGElementTagNameMap[K]>; | ||
| querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>; | ||
| readonly nextElementSibling: Element | null; | ||
| readonly previousElementSibling: Element | null; | ||
| after(...nodes: (string | Node)[]): void; | ||
| before(...nodes: (string | Node)[]): void; | ||
| remove(): void; | ||
| replaceWith(...nodes: (string | Node)[]): void; | ||
| animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation; | ||
| getAnimations(): Animation[]; | ||
| onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null; | ||
| onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null; | ||
| onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null; | ||
| onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null; | ||
| onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null; | ||
| onauxclick: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null; | ||
| oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; | ||
| onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; | ||
| oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; | ||
| ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; | ||
| ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; | ||
| ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; | ||
| ondragexit: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; | ||
| ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; | ||
| ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; | ||
| ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; | ||
| ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onended: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onerror: ErrorEventHandler; | ||
| onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null; | ||
| ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; | ||
| oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null; | ||
| onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null; | ||
| onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null; | ||
| onload: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onloadend: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null; | ||
| onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; | ||
| onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; | ||
| onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; | ||
| onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; | ||
| onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; | ||
| onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; | ||
| onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; | ||
| onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; | ||
| onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; | ||
| onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; | ||
| onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; | ||
| onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; | ||
| onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; | ||
| onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; | ||
| onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; | ||
| onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; | ||
| onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null; | ||
| onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null; | ||
| onscroll: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null; | ||
| onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null; | ||
| onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onselect: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null; | ||
| onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onsubmit: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| ontouchcancel: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null; | ||
| ontouchend: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null; | ||
| ontouchmove: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null; | ||
| ontouchstart: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null; | ||
| ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null; | ||
| ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null; | ||
| ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null; | ||
| ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null; | ||
| onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null; | ||
| onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null; | ||
| oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null; | ||
| oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null; | ||
| onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null; | ||
| contentEditable: string; | ||
| inputMode: string; | ||
| readonly isContentEditable: boolean; | ||
| readonly dataset: DOMStringMap; | ||
| nonce: string; | ||
| tabIndex: number; | ||
| blur(): void; | ||
| focus(options?: FocusOptions | undefined): void; | ||
| readonly style: CSSStyleDeclaration; | ||
| }; | ||
| }; | ||
| /** | ||
| * DOM is a singleton that components uses to access DOM methods. | ||
@@ -278,4 +7,8 @@ * By default, it uses browsers' DOM implementation, but it can be set to use a different one. | ||
| */ | ||
| declare const DOM: { | ||
| export declare const DOM: { | ||
| /** | ||
| * The document global instance. | ||
| */ | ||
| document: Document; | ||
| /** | ||
| * The base Text constructor. | ||
@@ -294,5 +27,25 @@ */ | ||
| }; | ||
| /** | ||
| * Set the life cycle mode for DNA. | ||
| * Disable it (`DOM.useLifeCycle(false)`) if you want to use native Custom Element's. | ||
| * @param use Should invoke or not life cycle methods. | ||
| */ | ||
| useLifeCycle(use?: boolean): void; | ||
| /** | ||
| * Check if a node is a HTMLElement instance. | ||
| * @param node The node to check. | ||
| * @return The node is a HTMLElement instance. | ||
| */ | ||
| isElement(node: any): node is HTMLElement; | ||
| /** | ||
| * Check if a node is a Text instance. | ||
| * @param node The node to check. | ||
| * @return The node is a Text instance. | ||
| */ | ||
| isText(node: any): node is Text; | ||
| /** | ||
| * Check if a node is a Custom Element instance. | ||
| * @param node The node to check. | ||
| * @return The node is a Custom Element instance. | ||
| */ | ||
| isCustomElement(node: any): node is CustomElement; | ||
@@ -379,34 +132,100 @@ /** | ||
| removeAttribute(element: HTMLElement, qualifiedName: string): void; | ||
| getChildNodes(node: Node): Node[] | undefined; | ||
| /** | ||
| * Get child nodes for a node. | ||
| * | ||
| * @param node The parent node. | ||
| * @return An array of child nodes (if available). | ||
| */ | ||
| getChildNodes(node: Node): readonly Node[] | undefined; | ||
| /** | ||
| * Invoke `connectedCallback` method of a Node (and its descendents). | ||
| * It does nothing if life cycle is disabled. | ||
| * | ||
| * @param node The connected node. | ||
| */ | ||
| connect(node: Node): void; | ||
| /** | ||
| * Invoke `disconnectedCallback` method of a Node (and its descendents). | ||
| * It does nothing if life cycle is disabled. | ||
| * | ||
| * @param node The disconnected node. | ||
| */ | ||
| disconnect(node: Node): void; | ||
| }; | ||
| declare type HyperProperties = { | ||
| is?: string; | ||
| slot?: string; | ||
| [key: string]: any; | ||
| /** | ||
| * The interface of Custom Element, as described by the W3C. | ||
| * @see {@link https://w3c.github.io/webcomponents/spec/custom/} W3C specification. | ||
| */ | ||
| declare type CustomElement = HTMLElement & { | ||
| /** | ||
| * The Custom Element constructor. | ||
| * | ||
| * @param node Instantiate the element using the given node instead of creating a new one. | ||
| * @param properties A set of initial properties for the element. | ||
| */ | ||
| new (node?: HTMLElement, properties?: { | ||
| [key: string]: any; | ||
| }): CustomElement; | ||
| new (properties?: { | ||
| [key: string]: any; | ||
| }): CustomElement; | ||
| /** | ||
| * Invoked each time the Custom Element is appended into a document-connected element. | ||
| * This will happen each time the node is moved, and may happen before the element's contents have been fully parsed. | ||
| */ | ||
| connectedCallback(): void; | ||
| /** | ||
| * Invoked each time the Custom Element is disconnected from the document's DOM. | ||
| */ | ||
| disconnectedCallback(): void; | ||
| /** | ||
| * Invoked each time one of the Custom Element's attributes is added, removed, or changed. | ||
| * | ||
| * @param attributeName The name of the updated attribute. | ||
| * @param oldValue The previous value of the attribute. | ||
| * @param newValue The new value for the attribute (null if removed). | ||
| */ | ||
| attributeChangedCallback(attributeName: string, oldValue: null | string, newValue: null | string): void; | ||
| /** | ||
| * Invoked each time one of the Custom Element's properties is added, removed, or changed. | ||
| * | ||
| * @param propertyName The name of the changed property. | ||
| * @param oldValue The previous value of the property. | ||
| * @param newValue The new value for the property (undefined if removed). | ||
| */ | ||
| propertyChangedCallback(propertyName: string, oldValue: any, newValue: any): void; | ||
| /** | ||
| * Invoke the Custom Element's rendering. | ||
| */ | ||
| render(): void; | ||
| }; | ||
| declare type HyperFunction = (this: Scope, previousElement?: HTMLElement) => Template | Template[]; | ||
| /** | ||
| * Create a new Patch instance. | ||
| * Render a set of Nodes into another, with some checks for Nodes in order to avoid | ||
| * useless changes in the tree and to mantain or update the state of compatible Nodes. | ||
| * | ||
| * @param tagName The tag name or the constructor of the Node | ||
| * @param properties The set of properties of the Node | ||
| * @param children The children of the Node | ||
| * @param node The root Node for the render. | ||
| * @param input The child (or the children) to render in Virtual DOM format or already generated. | ||
| * @return The resulting child Nodes. | ||
| */ | ||
| declare function h(tag: string | typeof HTMLElement, properties: HyperProperties | null, ...children: (TemplateItem[] | TemplateItem)[]): HyperFunction; | ||
| declare type InterpolateFunction = (this: Scope) => string; | ||
| export declare function render(node: HTMLElement, input: Template, context?: RenderContext): Template | Template[] | void; | ||
| /** | ||
| * Create an interpolated function. | ||
| * | ||
| * @param expression The expression to interpolate | ||
| * A generic template. Can be a single atomic item or a list of items. | ||
| */ | ||
| declare function interpolate(expression: string): InterpolateFunction | string; | ||
| declare type TemplateFilter = (item: HTMLElement | Text) => boolean; | ||
| declare type TemplateItem = HTMLElement | Text | Function | HyperFunction | InterpolateFunction | Promise<any> | string | boolean; | ||
| declare type Template = TemplateItem | TemplateItem[]; | ||
| declare type Scope = { | ||
| declare type Template = TemplateItem | TemplateItems; | ||
| /** | ||
| * The atomic template item. | ||
| * It can be a node, a Hyper or Interpolate function or a primitive value. | ||
| */ | ||
| declare type TemplateItem = HTMLElement | Text | HyperFunction | InterpolateFunction | string | number | boolean; | ||
| /** | ||
| * A HyperFunction (built by the `h` method with a tag name, a list of properties and children) | ||
| * returns a Template result for a given previous node at the current position in a render context. | ||
| */ | ||
| declare type HyperFunction = (this: Scope, previousElement?: HTMLElement) => Template | TemplateItems; | ||
| /** | ||
| * The Scope object set up a chain of scopes for templates in a render context. | ||
| * It is possibile to assign properties only to a Component's scope, | ||
| * or create a child scope which inherits properties from the current scope. | ||
| */ | ||
| declare type Scope = HTMLElement & { | ||
| [key: string]: any; | ||
@@ -425,39 +244,92 @@ /** | ||
| $child(): Scope; | ||
| } & HTMLElement; | ||
| }; | ||
| /** | ||
| * Render a set of Nodes into another, with some checks for Nodes in order to avoid | ||
| * useless changes in the tree and to mantain or update the state of compatible Nodes. | ||
| * A list of template items. | ||
| */ | ||
| declare type TemplateItems = TemplateItem[]; | ||
| /** | ||
| * A function that interpolate content in a string using a render Scope. | ||
| */ | ||
| declare type InterpolateFunction = (this: Scope) => string; | ||
| /** | ||
| * This represent the state of a render context. | ||
| */ | ||
| declare type RenderContext = { | ||
| /** | ||
| * A flag for the running status of the render. | ||
| */ | ||
| running?: true; | ||
| /** | ||
| * The scope of the current render. | ||
| */ | ||
| scope: Scope; | ||
| /** | ||
| * The current iterating status. | ||
| */ | ||
| iterating: { | ||
| node: Node; | ||
| }; | ||
| /** | ||
| * A list of result nodes for the render. | ||
| */ | ||
| result: Template[]; | ||
| /** | ||
| * A template filter for result nodes. | ||
| */ | ||
| filter?: TemplateFilter; | ||
| }; | ||
| /** | ||
| * A filter function signature for template items. | ||
| * | ||
| * @param node The root Node for the render | ||
| * @param input The child (or the children) to render in Virtual DOM format or already generated | ||
| * @return The resulting child Nodes | ||
| * @param item The template item to check. | ||
| * @return A truthy value for valid items, a falsy for value for invalid ones. | ||
| */ | ||
| declare function render(node: HTMLElement, input: Template, scope?: Scope, previousResult?: Template[], filter?: TemplateFilter): Template | Template[] | void; | ||
| declare type DefinitionConstructor = typeof HTMLElement & { | ||
| new (nodeOrProperties?: HTMLElement | { | ||
| [key: string]: any; | ||
| }, properties?: { | ||
| [key: string]: any; | ||
| }): CustomElement; | ||
| prototype: CustomElement; | ||
| }; | ||
| declare type DefinitionOptions = { | ||
| declare type TemplateFilter = (item: TemplateItem) => boolean; | ||
| /** | ||
| * Define a new Custom Element. | ||
| * | ||
| * @param name The tag name for the element. | ||
| * @param constructor The Custom Element constructor. | ||
| * @param options A set of definition options, like `extends` for native tag extension. | ||
| */ | ||
| export declare function define(name: string, constructor: CustomElement, options?: { | ||
| extends?: string; | ||
| }): void; | ||
| /** | ||
| * HyperFunction factory to use as JSX pragma. | ||
| * | ||
| * @param tagName The tag name or the constructor of the Node | ||
| * @param properties The set of properties of the Node | ||
| * @param children The children of the Node | ||
| */ | ||
| export declare function h(tag: string | typeof HTMLElement, properties: HyperProperties | null, ...children: TemplateItems): HyperFunction; | ||
| declare type HyperProperties = { | ||
| is?: string; | ||
| slot?: string; | ||
| [key: string]: any; | ||
| }; | ||
| declare function define(name: string, constructor: DefinitionConstructor, options?: DefinitionOptions): void; | ||
| /** | ||
| * Compile a template string into virtual DOM template. | ||
| * Compile a template element or a template string into virtual DOM template. | ||
| * | ||
| * @param template The template to parse | ||
| * @return The virtual DOM template function | ||
| * @param template The template to parse. | ||
| * @return The virtual DOM template function. | ||
| */ | ||
| declare function html(template: string): InterpolateFunction; | ||
| declare function html(template: HTMLTemplateElement): Template; | ||
| declare function html(template: HTMLElement): HyperFunction; | ||
| declare function html(template: Text): InterpolateFunction; | ||
| declare function html(template: NodeList): Array<HyperFunction | InterpolateFunction>; | ||
| export declare function html(template: string | HTMLTemplateElement): Template; | ||
| /** | ||
| * Scope a CSS string, adding a compnent-specific trailing selector to all rules. | ||
| * It also converts `:host` selectors for cross browser compatibility. | ||
| * | ||
| * @param name The component definition name. | ||
| * @param text The CSS string. | ||
| * @return A scoped CSS string. | ||
| */ | ||
| export declare function css(name: string, text: string): string; | ||
| /** | ||
| * Create an interpolated function. | ||
| * | ||
| * @param expression The expression to interpolate. | ||
| * @return A simple string if the expression does not need interpolation, or an InterpolateFunction to generate interpolated content. | ||
| */ | ||
| export declare function interpolate(expression: string): InterpolateFunction | string; | ||
| /** | ||
| * Find and instantiate elements in the page. | ||
@@ -469,26 +341,64 @@ * It is useful to bootstrap or rehydratate components starting from a plain HTML document. | ||
| */ | ||
| declare function bootstrap(root: HTMLElement): HTMLElement[]; | ||
| declare type AccessorObserver = (oldValue: any, newValue: any) => any; | ||
| export declare function bootstrap(root: HTMLElement): HTMLElement[]; | ||
| /** | ||
| * A decorator for accessors definition. | ||
| * | ||
| * @param descriptor The accessor description. | ||
| * @return The decorator initializer. | ||
| */ | ||
| export declare function property(descriptor?: AccessorDescriptor): (target: HTMLElement, propertyKey: string, originalDescriptor: PropertyDescriptor) => void; | ||
| /** | ||
| * A list of properties for an accessor description. | ||
| */ | ||
| declare type AccessorDescriptor = PropertyDescriptor & { | ||
| /** | ||
| * The name of the property accessor. | ||
| */ | ||
| name?: string; | ||
| /** | ||
| * The property is bound to an attribute. Also specifies the attribute name if different from the property. | ||
| */ | ||
| attribute?: string | boolean; | ||
| /** | ||
| * The initial value of the property. | ||
| */ | ||
| defaultValue?: any; | ||
| /** | ||
| * A list of valid property values prototypes. | ||
| */ | ||
| types?: Function | Function[]; | ||
| /** | ||
| * A list of accessor observables. | ||
| */ | ||
| observers?: AccessorObserver[]; | ||
| /** | ||
| * A custom validation function for the property. | ||
| * Property assignement throws when this function returns falsy values. | ||
| */ | ||
| validate?: (value: any) => boolean; | ||
| /** | ||
| * Define a property observable. | ||
| */ | ||
| observe?: (callback: AccessorObserver) => void; | ||
| /** | ||
| * Define custom getter for the property. | ||
| * @param value The current property value. | ||
| */ | ||
| getter?: (this: HTMLElement, value?: any) => any; | ||
| /** | ||
| * Define a custom setter for the property. | ||
| * It runs before property validations. | ||
| * The returned value will be set to the property. | ||
| * @param newValue The value to set. | ||
| */ | ||
| setter?: (this: HTMLElement, newValue?: any) => any; | ||
| }; | ||
| declare type AccessorDescriptors = { | ||
| [key: string]: AccessorDescriptor; | ||
| }; | ||
| declare function property(descriptor?: AccessorDescriptor): (target: HTMLElement, propertyKey: string, originalDescriptor: PropertyDescriptor) => void; | ||
| declare type EventCallback = (event: Event, target?: HTMLElement) => any; | ||
| declare type EventDescriptors = { | ||
| [key: string]: EventCallback; | ||
| }; | ||
| /** | ||
| * The observer signature for accessors. | ||
| * | ||
| * @param oldValue The previous value of the property. | ||
| * @param newValue The current value of the property. | ||
| */ | ||
| declare type AccessorObserver = (oldValue: any, newValue: any) => any; | ||
| /** | ||
| * Delegate an Event listener. | ||
@@ -501,4 +411,10 @@ * | ||
| */ | ||
| declare function delegate(element: HTMLElement, eventName: string, selector: string | undefined, callback: EventCallback): void; | ||
| export declare function delegate(element: HTMLElement, eventName: string, selector: string | undefined, callback: DelegatedEventCallback): void; | ||
| /** | ||
| * Describe the signature of a delegated event callback. | ||
| * @param event The original DOM event. | ||
| * @param target The matched delegated element. | ||
| */ | ||
| declare type DelegatedEventCallback = (event: Event, target?: HTMLElement) => any; | ||
| /** | ||
| * Remove an Event delegation. | ||
@@ -511,12 +427,65 @@ * | ||
| */ | ||
| declare function undelegate(element: HTMLElement, eventName?: string, selector?: string, callback?: EventCallback): void; | ||
| declare class Component extends AbstractElement { | ||
| readonly properties?: AccessorDescriptors; | ||
| readonly events?: EventDescriptors; | ||
| export declare function undelegate(element: HTMLElement, eventName?: string, selector?: string, callback?: DelegatedEventCallback): void; | ||
| /** | ||
| * The DNA base Component constructor, a Custom Element constructor with | ||
| * declarative properties and event delegations, custom template and | ||
| * a complete life cycle implementation. | ||
| * All DNA components **must** extends this class. | ||
| * | ||
| * @example | ||
| * ```ts | ||
| * import { Component, property, define, render } from '@chialab/dna'; | ||
| * | ||
| * class HelloWorld extends Component { | ||
| * @property() // define an observable Component property | ||
| * name: string; | ||
| * | ||
| * get events() { // define a list of delegated events | ||
| * return { | ||
| * 'input [name="name"]': (ev, target) => { | ||
| * this.name = target.value; | ||
| * }, | ||
| * }; | ||
| * } | ||
| * } | ||
| * | ||
| * // link the Component class to a tag | ||
| * define('hello-world', HelloWorld); | ||
| * ``` | ||
| */ | ||
| export declare class Component extends BaseElement { | ||
| /** | ||
| * The tag name used for Component definition. | ||
| */ | ||
| readonly is: string | undefined; | ||
| /** | ||
| * A set of properties to define to the node. | ||
| */ | ||
| readonly properties?: { | ||
| [key: string]: AccessorDescriptor; | ||
| }; | ||
| /** | ||
| * A set of delegated events to bind to the node. | ||
| */ | ||
| readonly events?: { | ||
| [key: string]: DelegatedEventCallback; | ||
| }; | ||
| /** | ||
| * A flag with the connected value of the node. | ||
| */ | ||
| readonly isConnected: boolean; | ||
| /** | ||
| * A template for the Component. | ||
| */ | ||
| readonly template: Template | undefined; | ||
| /** | ||
| * The render scope reference of the node. | ||
| */ | ||
| readonly $scope: Scope | undefined; | ||
| constructor(nodeOrProperties?: HTMLElement | { | ||
| /** | ||
| * Create a new Component instance. | ||
| * @param node Instantiate the element using the given node instead of creating a new one. | ||
| * @param properties A set of initial properties for the element. | ||
| */ | ||
| constructor(node?: HTMLElement | { | ||
| [key: string]: any; | ||
@@ -526,5 +495,26 @@ }, properties?: { | ||
| }); | ||
| /** | ||
| * Invoked each time the Component is appended into a document-connected element. | ||
| * This will happen each time the node is moved, and may happen before the element's contents have been fully parsed. | ||
| */ | ||
| connectedCallback(): void; | ||
| /** | ||
| * Invoked each time the Component is disconnected from the document's DOM. | ||
| */ | ||
| disconnectedCallback(): void; | ||
| /** | ||
| * Invoked each time one of the Component's attributes is added, removed, or changed. | ||
| * | ||
| * @param attributeName The name of the updated attribute. | ||
| * @param oldValue The previous value of the attribute. | ||
| * @param newValue The new value for the attribute (null if removed). | ||
| */ | ||
| attributeChangedCallback(attributeName: string, oldValue: null | string, newValue: null | string): void; | ||
| /** | ||
| * Invoked each time one of the Component's properties is added, removed, or changed. | ||
| * | ||
| * @param propertyName The name of the changed property. | ||
| * @param oldValue The previous value of the property. | ||
| * @param newValue The new value for the property (undefined if removed). | ||
| */ | ||
| propertyChangedCallback(propertyName: string, oldValue: any, newValue: any): void; | ||
@@ -546,5 +536,19 @@ /** | ||
| unobserve(propertyName: string, callback?: AccessorObserver): void; | ||
| delegate(event: string, selector: string, callback: EventCallback): void; | ||
| undelegate(event?: string, selector?: string, callback?: EventCallback): void; | ||
| /** | ||
| * Delegate an Event listener. | ||
| * | ||
| * @param eventName The event name to listen | ||
| * @param selector The selector to delegate | ||
| * @param callback The callback to trigger when an Event matches the delegation | ||
| */ | ||
| delegate(event: string, selector: string, callback: DelegatedEventCallback): void; | ||
| /** | ||
| * Remove an Event delegation. | ||
| * | ||
| * @param eventName The Event name to undelegate | ||
| * @param selector The selector to undelegate | ||
| * @param callback The callback to remove | ||
| */ | ||
| undelegate(event?: string, selector?: string, callback?: DelegatedEventCallback): void; | ||
| /** | ||
| * Render method of the Component. | ||
@@ -597,3 +601,33 @@ * | ||
| } | ||
| export { Component, DOM, bootstrap, define, delegate, h, html, interpolate, property, render, undelegate }; | ||
| /** | ||
| * The abstact HTMLElement that Component extends. | ||
| * It proxies the DOM.Element class. | ||
| */ | ||
| declare class BaseElement extends Element { | ||
| } | ||
| /** | ||
| * Create a shimmed HTMLElement. | ||
| * (in some browsers, HTMLElement construction throw errors when not shimmed). | ||
| */ | ||
| declare let Element: { | ||
| new (): HTMLElement; | ||
| prototype: HTMLElement; | ||
| }; | ||
| /** | ||
| * Create a Scope with an initial prototype. | ||
| * @param prototype The initial prototype object for the Scope. | ||
| * @return An object with the Scope interface. | ||
| */ | ||
| declare function createScope(prototype: HTMLElement): Scope; | ||
| /** | ||
| * Get the Scope attached to an object. | ||
| * @param target The scoped object. | ||
| * @return The Scope object (if it exists). | ||
| */ | ||
| declare function getScope(target: any): Scope | undefined; | ||
| /** | ||
| * Attach a Scope to an object. | ||
| * @param target The object to scope. | ||
| * @param scope The Scope to set. | ||
| */ | ||
| declare function setScope(target: any, scope: Scope): void; |
@@ -1,2 +0,2 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).DNA={})}(this,function(e){const t=Symbol();let n=function(e){const n=e;if("function"==typeof n[t])return n[t];const r=n.prototype,i=function(){};return i.prototype=r,n[t]=i,i}(HTMLElement),r=n.prototype,i=!0;const l=class extends n{},o={Text:Text,get Element(){return n},set Element(e){r=(n=e).prototype,Object.setPrototypeOf(l,r)},useLifeCycle(){let e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];i=!!e},isElement(e){return e instanceof this.Element},isText(e){return e instanceof this.Text},isCustomElement:e=>e instanceof l,parse(e){let t=this.createElement("div");return t.innerHTML=e,t.childNodes},createElement:e=>document.createElement(e),createTextNode:e=>document.createTextNode(e),appendChild(e,t){return t.parentNode&&this.removeChild(t.parentNode,t),r.appendChild.call(e,t),this.connect(t),t},removeChild(e,t){return r.removeChild.call(e,t),this.disconnect(t),t},insertBefore(e,t,n){return n&&n.previousSibling===t?t:(t.parentNode&&this.removeChild(t.parentNode,t),r.insertBefore.call(e,t,n),this.connect(t),t)},replaceChild(e,t,n){return n===t?n:(t.parentNode&&this.removeChild(t.parentNode,t),r.replaceChild.call(e,t,n),this.disconnect(n),this.connect(t),n)},getAttribute:(e,t)=>r.getAttribute.call(e,t),hasAttribute:(e,t)=>r.hasAttribute.call(e,t),setAttribute(e,t,n){let l=this.getAttribute(e,t);r.setAttribute.call(e,t,n),i&&this.isCustomElement(e)&&e.attributeChangedCallback(t,l,n)},removeAttribute(e,t){let n=this.getAttribute(e,t);r.removeAttribute.call(e,t),i&&this.isCustomElement(e)&&e.attributeChangedCallback(t,n,null)},getChildNodes(e){if(!e.childNodes)return;let t=[];for(let n=0,r=e.childNodes.length;n<r;n++)t.push(e.childNodes[n]);return t},connect(e){if(!i)return;let t=this.getChildNodes(e)||[];this.isCustomElement(e)&&e.connectedCallback();let n=this.getChildNodes(e);if(n)for(let e=0,r=n.length;e<r;e++){let r=n[e];-1!==t.indexOf(r)&&this.connect(r)}},disconnect(e){if(!i)return;let t=this.getChildNodes(e)||[];this.isCustomElement(e)&&e.disconnectedCallback();let n=this.getChildNodes(e);if(n)for(let e=0,r=n.length;e<r;e++){let r=n[e];-1!==t.indexOf(r)&&this.disconnect(r)}}},s=Symbol(),c=/:host(\(([^({)]+(\([^)]*\))?)+\))?/g,u=/\/\*[^*]*\*+([^\/*][^*]*\*+)*\//g,a=/(#|\*|\.|@|\[|[a-zA-Z])([^{;}]*){/g;const f=Symbol(),h=Symbol(),d=Symbol(),p=Symbol();function m(e){const t={};return t.__proto__={$assign(e){for(let t in e)this[t]=e[t]},$child(){return Object.create(this)},__proto__:e},t}function b(e,t){const n=(e||[]).slice(0);return n[d]=t,n}function g(e){return e[p]}function y(e,t){e[p]=t}function C(e){return e[h]}function v(e,t){e[h]=t}function E(e,t,n,r,i){let l=e,p=!r,b=r||[];if(p&&(l[f]=l.firstChild),null!=t&&!1!==t){let r=t,p=g(r)||n||g(e)||m(e);if(Array.isArray(r))for(let e=0,t=r.length;e<t;e++)E(l,r[e],p,b,r[d]);else if("function"==typeof r)E(l,r.call(p,l[f],i),p,b,i);else{let t,n=b.push(r);if(r instanceof Promise&&(r.then(e=>{b.splice(n-1,1,e),E(l,b,void 0,void 0,i)}),r=""),function(e){return e&&"STYLE"===e.tagName}(e)&&o.hasAttribute(e,"scoped")&&"string"==typeof r){let n=o.getAttribute(e,"scoped");n||(n=p.is),function(e,t,n){const r=`[is="${t}"]`,i=e;(i[s]||"")===n?i.textContent:(i[s]=n,e.textContent=n.replace(u,"").replace(c,(e,t)=>`${r}${t?t.slice(1,-1):""}`).replace(a,e=>"@"===(e=e.trim())[0]?e:e.split(",").map(e=>0===(e=e.trim()).indexOf(r)?e:`${r} ${e}`).join(",")))}(e,n,r),t=e.childNodes[0]}else t=o.isElement(r)||o.isText(r)?r:o.createTextNode(r);if(!i||i(t)){const e=l[f];if(t!==e)if(e)if(o.isText(t)&&o.isText(e)){let n=t.textContent;e.textContent!==n&&(e.textContent=n),l[f]=e.nextSibling}else o.insertBefore(l,t,e);else o.appendChild(l,t);else l[f]=e.nextSibling;if(o.isElement(t)){const e=t[h];e&&!o.isCustomElement(t)&&E(t,e,p)}}}}if(p&&b){let e=b.length,t=l.childNodes;for(;t.length>e;)o.removeChild(l,t[t.length-1]);if(0===e)return;if(1===e)return b[0]}return b}const N={};function A(e){return N[e]}const x=/\[\[(.*?)\]\]/g;const T=Symbol();function k(e){const t=e.trim().split(x);if(1===t.length)return e;let n="with(this) return ";n+=t.map((e,t)=>{if(e)return t%2==0?`'${function(e){return e.replace(/'/g,"\\'").replace(/\n/g,"\\n")}(e)}'`:`(${e})`}).filter(Boolean).join("+"),n+=";";const r=new Function(n);return r[T]=!0,r}const O=Symbol();function $(e,t){for(var n=arguments.length,r=new Array(n>2?n-2:0),i=2;i<n;i++)r[i-2]=arguments[i];let l=null;if("function"==typeof e)l=e;else{let n=t&&t.is||e;(function(e){return e in N})(n)&&(l=A(n).constructor)}let s="template"===e,c="slot"===e;return function(n){let i={};for(let e in t){let n=t[e];n[T]&&(n=n.call(this)),i[e]=n}if(s){if("if"in i&&(null==i.if||!1===i.if))return null;if(i.repeat&&r.length){const e=[],t=i.key||"$key",n=i.item||"$item",l=i.repeat;for(let i in l){let o=l[i];const s=this.$child();s.$assign({[t]:i,[n]:o});const c=r.slice(0);y(c,s),e.push(c)}return e}return r}if(c){let e=C(this);if(e){let t=g(e)||this;return y(e=i.name?b(e,e=>!!o.isElement(e)&&o.getAttribute(e,"slot")===i.name):b(e,e=>!o.isElement(e)||!o.getAttribute(e,"slot")),t),e}return[]}let u=(a=l||e,f=i.key,h=n,"function"==typeof a?h&&h instanceof a&&f===h.key?h:new a:h&&h.localName===a&&f===h.key?h:o.createElement(a));var a,f,h;let d=o.isCustomElement(u),p={},m=[];for(let e in i){let t=i[e],n=null==t||!1===t,r=!0===t,l="object"==typeof t||"key"===e;d?u[e]!==t&&(u[e]=t,n?m.push(e):l||(p[e]=r?"":t)):(u[O]=u[O]||{},u[O][e]!==t&&(u[O][e]=t,n?m.push(e):l?u[e]=t:p[e]=r?"":t)),m.forEach(e=>o.removeAttribute(u,e));for(let e in p)o.setAttribute(u,e,p[e]);"key"===e&&(this[i[e]]=u)}let E=r.slice(0);return y(E,this),v(u,E),d&&u.render(),u}}function S(e){return e&&"TEMPLATE"===e.tagName}function w(e){if(o.isElement(e)){const t=e.localName,n={};for(let t=0;t<e.attributes.length;t++){let r=e.attributes[t];""===r.value?n[r.name]=!0:n[r.name]=k(r.value)}let r;return $(t,n,...w(r=S(e)?e.content.childNodes:e.childNodes))}if(o.isText(e))return k(e.textContent||"");const t=[];for(let n=0,r=e.length;n<r;n++){let r=e[n],i=e[n+1];if(o.isText(r)){if((0===n||!i||o.isElement(i))&&!r.textContent.trim())continue;t.push(r)}else o.isElement(r)&&t.push(r)}return t.map(e=>w(e))}function _(e){let t;if(S(e))t=w(e.content.childNodes);else{if(o.isElement(e))return w(e);if(o.isText(e))return w(e);if("string"==typeof e)return w(o.parse(e));t=w(e)}return 1===t.length?t[0]:t}const j=Symbol();function P(e,t,n){const r=e,i=r[j]||{};i[t]=n,r[j]=i,n.name=t,!0===n.attribute&&(n.attribute=t),n.observe&&(n.observers=[n.observe]),Object.defineProperty(e,t,function(e){let t={enumerable:!0},n=e.value;"defaultValue"in e&&(n=e.defaultValue);let r=function(){return n};if(e.getter){let t=e.getter;r=function(){return t.call(this,n)}}let i=function(e){return e};if(e.setter){let t=e.setter;i=function(e){return t.call(this,e)}}let l=[];Array.isArray(e.types)?l=e.types:e.types&&(l=[e.types]);let s=e.attribute;return t.get=r,t.set=function(t){let r=n;if(r!==(t=i.call(this,t))){let i=null==t||!1===t;if(!i){let t=!0;if(l.length&&(t=l.some(e=>n instanceof e||n.constructor&&n.constructor===e)),t&&e.validate&&(t=e.validate(n)),!t)throw new TypeError(`Invalid \`${n}\` value for \`${e.name}\` property`)}n=t,e.attribute&&(i?this.removeAttribute(s):"object"!=typeof n&&this.setAttribute(s,!0===n?"":n)),o.isCustomElement(this)&&this.propertyChangedCallback(e.name,r,n)}},t}(n))}function L(e){return e[j]||{}}const M=Symbol();function D(e,t,n,r){const i=e,l=i[M]=i[M]||{},o=l[t]=l[t]||[];o.length||(o.listener=(t=>{if(!t.target)return;const n=t.target;let r=!1;t.stopPropagation=(()=>(r=!0,Event.prototype.stopPropagation.call(t)));let i=[];for(let t=0;t<o.length;t++){let r=o[t],l=r.selector,s=r.callback,c=l?n.closest(l):e;c&&i.push({target:c,callback:s})}i.sort((e,t)=>{let n=e.target,r=t.target;return n.contains(r)?1:-1}).forEach(n=>{let i=n.callback,l=n.target;r||i.call(e,t,l)})}),e.addEventListener(t,o.listener)),o.push({event:t,callback:r,selector:n})}function B(e,t,n,r){const i=e[M];if(t){if(i&&t in i){const l=i[t];if(r)for(let i=0;i<l.length;i++){let o=l[i];o.selector===n&&o.callback===r&&(l.splice(i,1),0===l.length&&e.removeEventListener(t,l.listener))}else l.forEach(n=>{B(e,t,n.selector,n.callback)})}}else if(i)for(let t in i)B(e,t)}e.Component=class extends l{get is(){}get isConnected(){return function e(t){if(!t||!t.nodeType)return!1;let n=t.nodeType;return n===Node.ELEMENT_NODE||n===Node.TEXT_NODE?e(t.parentNode):n===Node.DOCUMENT_FRAGMENT_NODE||n===Node.DOCUMENT_NODE}(this)}get template(){let e=document.querySelector(`template[name="${this.is}"]`);if(e)return _(e)}get $scope(){return g(this)}constructor(e,t){if(super(),!this.is)throw new Error("Component has not been defined.");let n;if(o.isElement(e))n=e;else{t=e;const r=A(this.is);n=o.createElement(r.extends||r.name)}Object.setPrototypeOf(n,Object.getPrototypeOf(this)),y(n,m(n));let r=this.properties;if(r)for(let e in r)P(n,e,r[e]);if(t)for(let e in t)n[e]=t[e];return o.setAttribute(n,"is",this.is),v(n,o.getChildNodes(n)),n}connectedCallback(){this.undelegate();let e=this.events;if(e)for(let t in e){let n=t.match(/([^\s]+)(?:\s+(.*))?/);n&&this.delegate(n[1],n[2],e[t])}this.render()}disconnectedCallback(){this.render([])}attributeChangedCallback(e,t,n){let r,i=L(this);for(let t in i){let n=i[t];if(n.attribute===e){r=n;break}}if(r){const t=r.name;let i=""===n||n===e||n;this[t]!=i&&(this[t]=i)}}propertyChangedCallback(e,t,n){let r=L(this)[e],i=r.attribute;i&&(null==n||!1===n?this.removeAttribute(i):"object"!=typeof n&&this.setAttribute(i,n)),r.observers&&r.observers.forEach(e=>e(t,n)),this.render()}observe(e,t){let n=L(this)[e];if(!n)throw new Error(`missing property ${e}`);n.observers=n.observers||[],n.observers.push(t)}unobserve(e,t){let n=L(this)[e];if(!n)throw new Error(`missing property ${e}`);if(t&&n.observers){let e=n.observers.indexOf(t);-1!==e&&n.observers.splice(e,1)}else n.observers=[]}delegate(e,t,n){return D(this,e,t,n)}undelegate(e,t,n){return B(this,e,t,n)}render(e){(e=e||this.template||C(this))&&E(this,e)}appendChild(e){return o.appendChild(this,e)}removeChild(e){return o.removeChild(this,e)}insertBefore(e,t){return o.insertBefore(this,e,t)}replaceChild(e,t){return o.replaceChild(this,e,t)}setAttribute(e,t){return o.setAttribute(this,e,t)}removeAttribute(e){return o.removeAttribute(this,e)}},e.DOM=o,e.bootstrap=function(e){let t=[];return Object.values(N).forEach(n=>{let r=n.name,i=n.constructor;e.querySelectorAll(`${r}, [is="${r}"]`).forEach(e=>{if(!(e instanceof i)){let n=new i(e);n.isConnected&&o.connect(n),t.push(n)}})}),t},e.define=function(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};e=e.toLowerCase(),Object.defineProperty(t.prototype,"is",{writable:!1,configurable:!1,value:e}),N[e]={name:e,constructor:t,extends:n.extends}},e.delegate=D,e.h=$,e.html=_,e.interpolate=k,e.property=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(t,n,r)=>{e.defaultValue=r.value,P(t,n,e)}},e.render=E,e.undelegate=B,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).DNA={})}(this,function(e){const t=Symbol();let n=function(e){const n=e;if("function"==typeof n[t])return n[t];const r=n.prototype,i=function(){};return i.prototype=r,n[t]=i,i}(HTMLElement),r=n.prototype,i=!0;class o extends n{}const l={document:document,Text:Text,get Element(){return n},set Element(e){r=(n=e).prototype,Object.setPrototypeOf(o,r)},useLifeCycle(){let e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];i=!!e},isElement(e){return e instanceof this.Element},isText(e){return e instanceof this.Text},isCustomElement:e=>e instanceof o,parse(e){let t=this.createElement("div");return t.innerHTML=e,t.childNodes},createElement(e){return this.document.createElement(e)},createTextNode(e){return this.document.createTextNode(e)},appendChild(e,t){return t.parentNode&&this.removeChild(t.parentNode,t),r.appendChild.call(e,t),this.connect(t),t},removeChild(e,t){return r.removeChild.call(e,t),this.disconnect(t),t},insertBefore(e,t,n){return n&&n.previousSibling===t?t:(t.parentNode&&this.removeChild(t.parentNode,t),r.insertBefore.call(e,t,n),this.connect(t),t)},replaceChild(e,t,n){return n===t?n:(t.parentNode&&this.removeChild(t.parentNode,t),r.replaceChild.call(e,t,n),this.disconnect(n),this.connect(t),n)},getAttribute:(e,t)=>r.getAttribute.call(e,t),hasAttribute:(e,t)=>r.hasAttribute.call(e,t),setAttribute(e,t,n){let o=this.getAttribute(e,t);r.setAttribute.call(e,t,n),i&&this.isCustomElement(e)&&e.attributeChangedCallback(t,o,n)},removeAttribute(e,t){let n=this.getAttribute(e,t);r.removeAttribute.call(e,t),i&&this.isCustomElement(e)&&e.attributeChangedCallback(t,n,null)},getChildNodes(e){if(!e.childNodes)return;let t=[];for(let n=0,r=e.childNodes.length;n<r;n++)t.push(e.childNodes[n]);return t},connect(e){if(!i)return;let t=this.getChildNodes(e)||[];this.isCustomElement(e)&&e.connectedCallback();let n=this.getChildNodes(e);if(n)for(let e=0,r=n.length;e<r;e++){let r=n[e];-1!==t.indexOf(r)&&this.connect(r)}},disconnect(e){if(!i)return;let t=this.getChildNodes(e)||[];this.isCustomElement(e)&&e.disconnectedCallback();let n=this.getChildNodes(e);if(n)for(let e=0,r=n.length;e<r;e++){let r=n[e];-1!==t.indexOf(r)&&this.disconnect(r)}}},s=Symbol();function c(e){const t={};return t.__proto__={$assign(e){for(let t in e)this[t]=e[t]},$child(){return Object.create(this)},__proto__:e},t}function a(e){return e[s]}function u(e,t){e[s]=t}const f=Symbol();function h(e,t){const n=(e||[]).slice(0);return n[f]=t,n}const d=Symbol();function p(e){return e[d]}function m(e,t){e[d]=t}const b=Symbol();function g(e){return!!e[b]}const C=/\{\{(.*?)\}\}/g;function y(e){const t=e.trim().split(C);if(1===t.length)return e;let n="with(this) return ";return n+=t.map((e,t)=>{if(e)return t%2==0?"'".concat(function(e){return e.replace(/'/g,"\\'").replace(/\n/g,"\\n")}(e),"'"):"(".concat(e,")")}).filter(e=>!!e).join("+"),n+=";",(r=new Function(n))[b]=!0,r;var r}const v={};function E(e){return v[e]}const N=Symbol();const A=Symbol();function x(e,t){for(var n=arguments.length,r=new Array(n>2?n-2:0),i=2;i<n;i++)r[i-2]=arguments[i];let o=null;if("function"==typeof e)o=e;else{let n=t&&t.is||e;(function(e){return e in v})(n)&&(o=E(n).constructor)}let s="template"===e,c="slot"===e;const f=function(n){let i={};for(let e in t){let n=t[e];g(n)&&(n=n.call(this)),i[e]=n}if(s){if("if"in i&&(null==i.if||!1===i.if))return null;if(i.repeat&&r.length){const e=[],t=i.key||"$key",n=i.item||"$item",o=i.repeat;for(let i in o){let l=o[i];const s=this.$child();s.$assign({[t]:i,[n]:l});const c=r.slice(0);u(c,s),e.push(c)}return e}return r}if(c){let e=p(this);if(e){let t=a(e)||this;return u(e=i.name?h(e,e=>!!l.isElement(e)&&l.getAttribute(e,"slot")===i.name):h(e,e=>!l.isElement(e)||!l.getAttribute(e,"slot")),t),e}return[]}let f=(d=o||e,b=i.key,C=n,"function"==typeof d?C&&C instanceof d&&b===C.key?C:new d:C&&C.localName===d&&b===C.key?C:l.createElement(d));var d,b,C;let y=l.isCustomElement(f);for(let e in i){let t=i[e];if(y)f[e]!==t&&(f[e]=t);else{let n=f[A]=f[A]||{};n[e]!==t&&(n[e]=t,f[e]=t)}null==t||!1===t?l.removeAttribute(f,e):"object"!=typeof t&&"key"!==e&&l.setAttribute(f,e,!0===t?"":t),"key"===e&&(this[i[e]]=f)}let v=r.slice(0);return u(v,this),m(f,v),y&&f.render(),f};return f[N]=!0,f}const T={},k=/:host(\(([^({)]+(\([^)]*\))?)+\))?/g,O=/\/\*[^*]*\*+([^\/*][^*]*\*+)*\//g,w=/(#|\*|\.|@|\[|[a-zA-Z])([^{;}]*){/g;function S(e,t){const n=T[e]=T[e]||{},r='[is="'.concat(e,'"]');return t in n?n[t]:n[t]=t.replace(O,"").replace(k,(e,t)=>"".concat(r).concat(t?t.slice(1,-1):"")).replace(w,e=>"@"===(e=e.trim())[0]?e:e.split(",").map(e=>0===(e=e.trim()).indexOf(r)?e:"".concat(r," ").concat(e)).join(","))}function _(e,t,n){const r=n||{scope:a(e)||c(e),result:[],iterating:{node:e.firstChild}};if(null!=t&&!1!==t){const n={running:!0,result:r.result,scope:a(t)||r.scope,iterating:r.iterating,filter:(i=t,i[f]||r.filter)},o=n.scope,s=n.result,c=n.iterating;if(Array.isArray(t))for(let r=0,i=t.length;r<i;r++)_(e,t[r],n);else if(g(t))_(e,t.call(o),n);else if(t[N])_(e,t.call(o,c.node),n);else{let r;if(s.push(t),function(e){return e&&"STYLE"===e.tagName}(e)&&l.hasAttribute(e,"scoped")&&"string"==typeof t){let n=l.getAttribute(e,"scoped");n||(n=o.is),e.textContent=S(n,t),r=e.childNodes[0]}else r=l.isElement(t)||l.isText(t)?t:l.createTextNode(t);if(!n.filter||n.filter(r)){const t=c.node;if(r!==t)if(t)if(l.isText(r)&&l.isText(t)){let e=r.textContent;t.textContent!==e&&(t.textContent=e),c.node=t.nextSibling}else l.insertBefore(e,r,t);else l.appendChild(e,r);else c.node=t.nextSibling;if(l.isElement(r)){const e=p(r);e&&!l.isCustomElement(r)&&_(r,e,{result:[],scope:o,iterating:{node:r.firstChild}})}}}}var i;const o=r.running,s=r.result;if(!o&&s){let t=s.length,n=e.childNodes;for(;n.length>t;)l.removeChild(e,n[n.length-1]);if(0===t)return;if(1===t)return s[0]}return s}function j(e){return e&&"TEMPLATE"===e.tagName}function P(e){if(l.isElement(e)){const t=e.localName,n={};for(let t=0;t<e.attributes.length;t++){let r=e.attributes[t];""===r.value?n[r.name]=!0:n[r.name]=y(r.value)}let r;return x(t,n,...P(r=j(e)?e.content.childNodes:e.childNodes))}if(l.isText(e))return y(e.textContent||"");const t=[];for(let n=0,r=e.length;n<r;n++){let r=e[n],i=e[n+1];if(l.isText(r)){if((0===n||!i||l.isElement(i))&&!r.textContent.trim())continue;t.push(r)}else l.isElement(r)&&t.push(r)}return t.map(e=>P(e))}function L(e){let t;return 1===(t=j(e)?P(e.content.childNodes):P(l.parse(e))).length?t[0]:t}const M=Symbol();function D(e,t,n){const r=e[M]||{};r[t]=n,e[M]=r,n.name=t,!0===n.attribute&&(n.attribute=t),n.observe&&(n.observers=[n.observe]),Object.defineProperty(e,t,function(e){let t={enumerable:!0},n=e.value;"defaultValue"in e&&(n=e.defaultValue);let r=function(){return n};if(e.getter){let t=e.getter;r=function(){return t.call(this,n)}}let i=function(e){return e};if(e.setter){let t=e.setter;i=function(e){return t.call(this,e)}}let o=[];Array.isArray(e.types)?o=e.types:e.types&&(o=[e.types]);let s=e.attribute;return t.get=r,t.set=function(t){let r=n;if(r!==(t=i.call(this,t))){let i=null==t||!1===t;if(!i){let t=!0;if(o.length&&(t=o.some(e=>n instanceof e||n.constructor&&n.constructor===e)),t&&e.validate&&(t=e.validate(n)),!t)throw new TypeError("Invalid `".concat(n,"` value for `").concat(e.name,"` property"))}n=t,e.attribute&&(i?this.removeAttribute(s):"object"!=typeof n&&this.setAttribute(s,!0===n?"":n)),l.isCustomElement(this)&&this.propertyChangedCallback(e.name,r,n)}},t}(n))}function $(e){return e[M]||{}}const B=Symbol();function I(e,t,n,r){const i=e,o=i[B]=i[B]||{},l=o[t]=o[t]||{descriptors:[]},s=l.descriptors;l.listener||(l.listener=(t=>{if(!t.target)return;const n=t.target;let r=!1;t.stopPropagation=(()=>(r=!0,Event.prototype.stopPropagation.call(t))),t.stopImmediatePropagation=(()=>(r=!0,Event.prototype.stopImmediatePropagation.call(t)));let i=[];for(let t=0;t<s.length;t++){let r=s[t],o=r.selector,l=r.callback,c=o?n.closest(o):e;c&&i.push({target:c,callback:l})}i.sort((e,t)=>{let n=e.target,r=t.target;return n.contains(r)?1:-1}).forEach(n=>{let i=n.callback,o=n.target;r||i.call(e,t,o)})}),e.addEventListener(t,l.listener)),s.push({event:t,callback:r,selector:n})}function V(e,t,n,r){const i=e[B];if(t){if(i&&t in i){const o=i[t],l=o.descriptors,s=o.listener;if(r){if(s)for(let i=0;i<l.length;i++){let o=l[i];o.selector===n&&o.callback===r&&(l.splice(i,1),0===l.length&&e.removeEventListener(t,s))}}else l.forEach(n=>{V(e,t,n.selector,n.callback)})}}else if(i)for(let t in i)V(e,t)}const q=Node,F=q.ELEMENT_NODE,H=q.TEXT_NODE,U=q.DOCUMENT_FRAGMENT_NODE,z=q.DOCUMENT_NODE;e.Component=class extends o{get isConnected(){return function e(t){if(!t||!t.nodeType)return!1;let n=t.nodeType;return n===F||n===H?e(t.parentNode):n===U||n===z}(this)}get template(){let e=l.document.querySelector('template[name="'.concat(this.is,'"]'));if(e)return L(e)}get $scope(){return a(this)}constructor(e,t){if(super(),!this.is)throw new Error("Component has not been defined.");if(!l.isElement(e)){t=e;const n=E(this.is);e=l.createElement(n.extends||n.name)}Object.setPrototypeOf(e,Object.getPrototypeOf(this)),u(e,c(e));let n=this.properties;if(n)for(let t in n)D(e,t,n[t]);if(t)for(let n in t)e[n]=t[n];return l.setAttribute(e,"is",this.is),m(e,l.getChildNodes(e)),e}connectedCallback(){this.undelegate();let e=this.events;if(e)for(let t in e){let n=t.match(/([^\s]+)(?:\s+(.*))?/);n&&this.delegate(n[1],n[2],e[t])}this.render()}disconnectedCallback(){this.render([])}attributeChangedCallback(e,t,n){let r,i=$(this);for(let t in i){let n=i[t];if(n.attribute===e){r=n;break}}if(r){const t=r.name;let i=""===n||n===e||n;this[t]!=i&&(this[t]=i)}}propertyChangedCallback(e,t,n){let r=$(this)[e],i=r.attribute;i&&(null==n||!1===n?this.removeAttribute(i):"object"!=typeof n&&this.setAttribute(i,n)),r.observers&&r.observers.forEach(e=>e(t,n)),this.render()}observe(e,t){let n=$(this)[e];if(!n)throw new Error("missing property ".concat(e));n.observers=n.observers||[],n.observers.push(t)}unobserve(e,t){let n=$(this)[e];if(!n)throw new Error("missing property ".concat(e));if(t&&n.observers){let e=n.observers.indexOf(t);-1!==e&&n.observers.splice(e,1)}else n.observers=[]}delegate(e,t,n){return I(this,e,t,n)}undelegate(e,t,n){return V(this,e,t,n)}render(e){(e=e||this.template||p(this))&&_(this,e)}appendChild(e){return l.appendChild(this,e)}removeChild(e){return l.removeChild(this,e)}insertBefore(e,t){return l.insertBefore(this,e,t)}replaceChild(e,t){return l.replaceChild(this,e,t)}setAttribute(e,t){return l.setAttribute(this,e,t)}removeAttribute(e){return l.removeAttribute(this,e)}},e.DOM=l,e.bootstrap=function(e){let t=[];return function(){let e=[];for(let t in v)e.push(v[t]);return e}().forEach(n=>{let r=n.name,i=n.constructor;e.querySelectorAll("".concat(r,', [is="').concat(r,'"]')).forEach(e=>{if(!(e instanceof i)){let n=new i(e);n.isConnected&&l.connect(n),t.push(n)}})}),t},e.css=S,e.define=function(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};e=e.toLowerCase(),Object.defineProperty(t.prototype,"is",{writable:!1,configurable:!1,value:e}),v[e]={name:e,constructor:t,extends:n.extends}},e.delegate=I,e.h=x,e.html=L,e.interpolate=y,e.property=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(t,n,r)=>{e.defaultValue=r.value,D(t,n,e)}},e.render=_,e.undelegate=V,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
| //# sourceMappingURL=dna.js.map |
@@ -1,2 +0,2 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).DNA={})}(this,function(e){function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function i(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&c(e,t)}function u(e){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function c(e,t){return(c=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function s(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function l(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?s(e):t}function f(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var v=Symbol();var h=function(e){var t=e;if("function"==typeof t[v])return t[v];var n=t.prototype,r=function(){};return r.prototype=n,t[v]=r,r}(HTMLElement),p=h.prototype,d=!0,b=function(e){function t(){return n(this,t),l(this,u(t).apply(this,arguments))}return a(t,h),t}(),m={Text:Text,get Element(){return h},set Element(e){p=(h=e).prototype,Object.setPrototypeOf(b,p)},useLifeCycle:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];d=!!e},isElement:function(e){return e instanceof this.Element},isText:function(e){return e instanceof this.Text},isCustomElement:function(e){return e instanceof b},parse:function(e){var t=this.createElement("div");return t.innerHTML=e,t.childNodes},createElement:function(e){return document.createElement(e)},createTextNode:function(e){return document.createTextNode(e)},appendChild:function(e,t){return t.parentNode&&this.removeChild(t.parentNode,t),p.appendChild.call(e,t),this.connect(t),t},removeChild:function(e,t){return p.removeChild.call(e,t),this.disconnect(t),t},insertBefore:function(e,t,n){return n&&n.previousSibling===t?t:(t.parentNode&&this.removeChild(t.parentNode,t),p.insertBefore.call(e,t,n),this.connect(t),t)},replaceChild:function(e,t,n){return n===t?n:(t.parentNode&&this.removeChild(t.parentNode,t),p.replaceChild.call(e,t,n),this.disconnect(n),this.connect(t),n)},getAttribute:function(e,t){return p.getAttribute.call(e,t)},hasAttribute:function(e,t){return p.hasAttribute.call(e,t)},setAttribute:function(e,t,n){var r=this.getAttribute(e,t);p.setAttribute.call(e,t,n),d&&this.isCustomElement(e)&&e.attributeChangedCallback(t,r,n)},removeAttribute:function(e,t){var n=this.getAttribute(e,t);p.removeAttribute.call(e,t),d&&this.isCustomElement(e)&&e.attributeChangedCallback(t,n,null)},getChildNodes:function(e){if(e.childNodes){for(var t=[],n=0,r=e.childNodes.length;n<r;n++)t.push(e.childNodes[n]);return t}},connect:function(e){if(d){var t=this.getChildNodes(e)||[];this.isCustomElement(e)&&e.connectedCallback();var n=this.getChildNodes(e);if(n)for(var r=0,i=n.length;r<i;r++){var o=n[r];-1!==t.indexOf(o)&&this.connect(o)}}},disconnect:function(e){if(d){var t=this.getChildNodes(e)||[];this.isCustomElement(e)&&e.disconnectedCallback();var n=this.getChildNodes(e);if(n)for(var r=0,i=n.length;r<i;r++){var o=n[r];-1!==t.indexOf(o)&&this.disconnect(o)}}}},y=Symbol(),g=/:host(\(([^({)]+(\([^)]*\))?)+\))?/g,C=/\/\*[^*]*\*+([^\/*][^*]*\*+)*\//g,E=/(#|\*|\.|@|\[|[a-zA-Z])([^{;}]*){/g;var k=Symbol(),N=Symbol(),A=Symbol(),O=Symbol();function x(e){var t={};return t.__proto__={$assign:function(e){for(var t in e)this[t]=e[t]},$child:function(){return Object.create(this)},__proto__:e},t}function T(e,t){var n=(e||[]).slice(0);return n[A]=t,n}function w(e){return e[O]}function j(e,t){e[O]=t}function S(e){return e[N]}function _(e,t){e[N]=t}function P(e,t,n,r,i){var o=e,a=!r,u=r||[];if(a&&(o[k]=o.firstChild),null!=t&&!1!==t){var c=t,s=w(c)||n||w(e)||x(e);if(Array.isArray(c))for(var l=0,f=c.length;l<f;l++)P(o,c[l],s,u,c[A]);else if("function"==typeof c)P(o,c.call(s,o[k],i),s,u,i);else{var v,h=u.push(c);if(c instanceof Promise&&(c.then(function(e){u.splice(h-1,1,e),P(o,u,void 0,void 0,i)}),c=""),function(e){return e&&"STYLE"===e.tagName}(e)&&m.hasAttribute(e,"scoped")&&"string"==typeof c){var p=m.getAttribute(e,"scoped");p||(p=s.is),function(e,t,n){var r='[is="'.concat(t,'"]'),i=e;(i[y]||"")===n?i.textContent:(i[y]=n,e.textContent=n.replace(C,"").replace(g,function(e,t){return"".concat(r).concat(t?t.slice(1,-1):"")}).replace(E,function(e){return"@"===(e=e.trim())[0]?e:e.split(",").map(function(e){return 0===(e=e.trim()).indexOf(r)?e:"".concat(r," ").concat(e)}).join(",")}))}(e,p,c),v=e.childNodes[0]}else v=m.isElement(c)||m.isText(c)?c:m.createTextNode(c);if(!i||i(v)){var d=o[k];if(v!==d)if(d)if(m.isText(v)&&m.isText(d)){var b=v.textContent;d.textContent!==b&&(d.textContent=b),o[k]=d.nextSibling}else m.insertBefore(o,v,d);else m.appendChild(o,v);else o[k]=d.nextSibling;if(m.isElement(v)){var O=v[N];O&&!m.isCustomElement(v)&&P(v,O,s)}}}}if(a&&u){for(var T=u.length,j=o.childNodes;j.length>T;)m.removeChild(o,j[j.length-1]);if(0===T)return;if(1===T)return u[0]}return u}var L={};function M(e){return L[e]}var D=/\[\[(.*?)\]\]/g;var $=Symbol();function B(e){var t=e.trim().split(D);if(1===t.length)return e;var n="with(this) return ";n+=t.map(function(e,t){if(e)return t%2==0?"'".concat(e.replace(/'/g,"\\'").replace(/\n/g,"\\n"),"'"):"(".concat(e,")")}).filter(Boolean).join("+"),n+=";";var r=new Function(n);return r[$]=!0,r}var V=Symbol();function q(e,n){for(var r=arguments.length,i=new Array(r>2?r-2:0),a=2;a<r;a++)i[a-2]=arguments[a];var u=null;if("function"==typeof e)u=e;else{var c=n&&n.is||e;(function(e){return e in L})(c)&&(u=M(c).constructor)}var s="template"===e,l="slot"===e;return function(r){var a={};for(var c in n){var f=n[c];f[$]&&(f=f.call(this)),a[c]=f}if(s){if("if"in a&&(null==a.if||!1===a.if))return null;if(a.repeat&&i.length){var v=[],h=a.key||"$key",p=a.item||"$item",d=a.repeat;for(var b in d){var y,g=d[b],C=this.$child();C.$assign((o(y={},h,b),o(y,p,g),y));var E=i.slice(0);j(E,C),v.push(E)}return v}return i}if(l){var k=S(this);if(k){var N=w(k)||this;return j(k=a.name?T(k,function(e){return!!m.isElement(e)&&m.getAttribute(e,"slot")===a.name}):T(k,function(e){return!m.isElement(e)||!m.getAttribute(e,"slot")}),N),k}return[]}var A=function(e,t,n){return"function"==typeof e?n&&n instanceof e&&t===n.key?n:new e:n&&n.localName===e&&t===n.key?n:m.createElement(e)}(u||e,a.key,r),O=m.isCustomElement(A),x={},P=[];for(var L in a){var M=a[L],D=null==M||!1===M,B=!0===M,q="object"===t(M)||"key"===L;for(var F in O?A[L]!==M&&(A[L]=M,D?P.push(L):q||(x[L]=B?"":M)):(A[V]=A[V]||{},A[V][L]!==M&&(A[V][L]=M,D?P.push(L):q?A[L]=M:x[L]=B?"":M)),P.forEach(function(e){return m.removeAttribute(A,e)}),x)m.setAttribute(A,F,x[F]);"key"===L&&(this[a[L]]=A)}var H=i.slice(0);return j(H,this),_(A,H),O&&A.render(),A}}function F(e){return e&&"TEMPLATE"===e.tagName}function H(e){if(m.isElement(e)){for(var t,n=e.localName,r={},i=0;i<e.attributes.length;i++){var o=e.attributes[i];""===o.value?r[o.name]=!0:r[o.name]=B(o.value)}return t=F(e)?e.content.childNodes:e.childNodes,q.apply(void 0,[n,r].concat(f(H(t))))}if(m.isText(e))return B(e.textContent||"");for(var a=[],u=0,c=e.length;u<c;u++){var s=e[u],l=e[u+1];if(m.isText(s)){if((0===u||!l||m.isElement(l))&&!s.textContent.trim())continue;a.push(s)}else m.isElement(s)&&a.push(s)}return a.map(function(e){return H(e)})}function I(e){var t;if(F(e))t=H(e.content.childNodes);else{if(m.isElement(e))return H(e);if(m.isText(e))return H(e);if("string"==typeof e)return H(m.parse(e));t=H(e)}return 1===t.length?t[0]:t}var R=Symbol();function U(e,n,r){var i=e,o=i[R]||{};o[n]=r,i[R]=o,r.name=n,!0===r.attribute&&(r.attribute=n),r.observe&&(r.observers=[r.observe]),Object.defineProperty(e,n,function(e){var n={enumerable:!0},r=e.value;"defaultValue"in e&&(r=e.defaultValue);var i=function(){return r};if(e.getter){var o=e.getter;i=function(){return o.call(this,r)}}var a=function(e){return e};if(e.setter){var u=e.setter;a=function(e){return u.call(this,e)}}var c=[];Array.isArray(e.types)?c=e.types:e.types&&(c=[e.types]);var s=e.attribute;return n.get=i,n.set=function(n){var i=r;if(i!==(n=a.call(this,n))){var o=null==n||!1===n;if(!o){var u=!0;if(c.length&&(u=c.some(function(e){return r instanceof e||r.constructor&&r.constructor===e})),u&&e.validate&&(u=e.validate(r)),!u)throw new TypeError("Invalid `".concat(r,"` value for `").concat(e.name,"` property"))}r=n,e.attribute&&(o?this.removeAttribute(s):"object"!==t(r)&&this.setAttribute(s,!0===r?"":r)),m.isCustomElement(this)&&this.propertyChangedCallback(e.name,i,r)}},n}(r))}function z(e){return e[R]||{}}var G=Symbol();function X(e,t,n,r){var i=e,o=i[G]=i[G]||{},a=o[t]=o[t]||[];a.length||(a.listener=function(t){if(t.target){var n=t.target,r=!1;t.stopPropagation=function(){return r=!0,Event.prototype.stopPropagation.call(t)};for(var i=[],o=0;o<a.length;o++){var u=a[o],c=u.selector,s=u.callback,l=c?n.closest(c):e;l&&i.push({target:l,callback:s})}i.sort(function(e,t){var n=e.target,r=t.target;return n.contains(r)?1:-1}).forEach(function(n){var i=n.callback,o=n.target;r||i.call(e,t,o)})}},e.addEventListener(t,a.listener)),a.push({event:t,callback:r,selector:n})}function Y(e,t,n,r){var i=e[G];if(t){if(i&&t in i){var o=i[t];if(r)for(var a=0;a<o.length;a++){var u=o[a];u.selector===n&&u.callback===r&&(o.splice(a,1),0===o.length&&e.removeEventListener(t,o.listener))}else o.forEach(function(n){Y(e,t,n.selector,n.callback)})}}else if(i)for(var c in i)Y(e,c)}var Z=function(e){function r(e,t){var i,o;if(n(this,r),!(i=l(this,u(r).call(this))).is)throw new Error("Component has not been defined.");if(m.isElement(e))o=e;else{t=e;var a=M(i.is);o=m.createElement(a.extends||a.name)}Object.setPrototypeOf(o,Object.getPrototypeOf(s(s(i)))),j(o,x(o));var c=i.properties;if(c)for(var f in c)U(o,f,c[f]);if(t)for(var v in t)o[v]=t[v];return m.setAttribute(o,"is",i.is),_(o,m.getChildNodes(o)),l(i,o)}return a(r,b),i(r,[{key:"is",get:function(){}},{key:"isConnected",get:function(){return function e(t){if(!t||!t.nodeType)return!1;var n=t.nodeType;return n===Node.ELEMENT_NODE||n===Node.TEXT_NODE?e(t.parentNode):n===Node.DOCUMENT_FRAGMENT_NODE||n===Node.DOCUMENT_NODE}(this)}},{key:"template",get:function(){var e=document.querySelector('template[name="'.concat(this.is,'"]'));if(e)return I(e)}},{key:"$scope",get:function(){return w(this)}}]),i(r,[{key:"connectedCallback",value:function(){this.undelegate();var e=this.events;if(e)for(var t in e){var n=t.match(/([^\s]+)(?:\s+(.*))?/);n&&this.delegate(n[1],n[2],e[t])}this.render()}},{key:"disconnectedCallback",value:function(){this.render([])}},{key:"attributeChangedCallback",value:function(e,t,n){var r,i=z(this);for(var o in i){var a=i[o];if(a.attribute===e){r=a;break}}if(r){var u=r.name,c=""===n||n===e||n;this[u]!=c&&(this[u]=c)}}},{key:"propertyChangedCallback",value:function(e,n,r){var i=z(this)[e],o=i.attribute;o&&(null==r||!1===r?this.removeAttribute(o):"object"!==t(r)&&this.setAttribute(o,r)),i.observers&&i.observers.forEach(function(e){return e(n,r)}),this.render()}},{key:"observe",value:function(e,t){var n=z(this)[e];if(!n)throw new Error("missing property ".concat(e));n.observers=n.observers||[],n.observers.push(t)}},{key:"unobserve",value:function(e,t){var n=z(this)[e];if(!n)throw new Error("missing property ".concat(e));if(t&&n.observers){var r=n.observers.indexOf(t);-1!==r&&n.observers.splice(r,1)}else n.observers=[]}},{key:"delegate",value:function(e,t,n){return X(this,e,t,n)}},{key:"undelegate",value:function(e,t,n){return Y(this,e,t,n)}},{key:"render",value:function(e){(e=e||this.template||S(this))&&P(this,e)}},{key:"appendChild",value:function(e){return m.appendChild(this,e)}},{key:"removeChild",value:function(e){return m.removeChild(this,e)}},{key:"insertBefore",value:function(e,t){return m.insertBefore(this,e,t)}},{key:"replaceChild",value:function(e,t){return m.replaceChild(this,e,t)}},{key:"setAttribute",value:function(e,t){return m.setAttribute(this,e,t)}},{key:"removeAttribute",value:function(e){return m.removeAttribute(this,e)}}]),r}();e.Component=Z,e.DOM=m,e.bootstrap=function(e){var t=[];return Object.values(L).forEach(function(n){var r=n.name,i=n.constructor;e.querySelectorAll("".concat(r,', [is="').concat(r,'"]')).forEach(function(e){if(!(e instanceof i)){var n=new i(e);n.isConnected&&m.connect(n),t.push(n)}})}),t},e.define=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};e=e.toLowerCase(),Object.defineProperty(t.prototype,"is",{writable:!1,configurable:!1,value:e}),L[e]={name:e,constructor:t,extends:n.extends}},e.delegate=X,e.h=q,e.html=I,e.interpolate=B,e.property=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(t,n,r){e.defaultValue=r.value,U(t,n,e)}},e.render=P,e.undelegate=Y,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).DNA={})}(this,function(e){function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function i(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&c(e,t)}function u(e){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function c(e,t){return(c=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function s(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function l(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?s(e):t}function f(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var v=Symbol();var h=function(e){var t=e;if("function"==typeof t[v])return t[v];var n=t.prototype,r=function(){};return r.prototype=n,t[v]=r,r}(HTMLElement),p=h.prototype,d=!0,b=function(e){function t(){return n(this,t),l(this,u(t).apply(this,arguments))}return a(t,h),t}(),m={document:document,Text:Text,get Element(){return h},set Element(e){p=(h=e).prototype,Object.setPrototypeOf(b,p)},useLifeCycle:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];d=!!e},isElement:function(e){return e instanceof this.Element},isText:function(e){return e instanceof this.Text},isCustomElement:function(e){return e instanceof b},parse:function(e){var t=this.createElement("div");return t.innerHTML=e,t.childNodes},createElement:function(e){return this.document.createElement(e)},createTextNode:function(e){return this.document.createTextNode(e)},appendChild:function(e,t){return t.parentNode&&this.removeChild(t.parentNode,t),p.appendChild.call(e,t),this.connect(t),t},removeChild:function(e,t){return p.removeChild.call(e,t),this.disconnect(t),t},insertBefore:function(e,t,n){return n&&n.previousSibling===t?t:(t.parentNode&&this.removeChild(t.parentNode,t),p.insertBefore.call(e,t,n),this.connect(t),t)},replaceChild:function(e,t,n){return n===t?n:(t.parentNode&&this.removeChild(t.parentNode,t),p.replaceChild.call(e,t,n),this.disconnect(n),this.connect(t),n)},getAttribute:function(e,t){return p.getAttribute.call(e,t)},hasAttribute:function(e,t){return p.hasAttribute.call(e,t)},setAttribute:function(e,t,n){var r=this.getAttribute(e,t);p.setAttribute.call(e,t,n),d&&this.isCustomElement(e)&&e.attributeChangedCallback(t,r,n)},removeAttribute:function(e,t){var n=this.getAttribute(e,t);p.removeAttribute.call(e,t),d&&this.isCustomElement(e)&&e.attributeChangedCallback(t,n,null)},getChildNodes:function(e){if(e.childNodes){for(var t=[],n=0,r=e.childNodes.length;n<r;n++)t.push(e.childNodes[n]);return t}},connect:function(e){if(d){var t=this.getChildNodes(e)||[];this.isCustomElement(e)&&e.connectedCallback();var n=this.getChildNodes(e);if(n)for(var r=0,i=n.length;r<i;r++){var o=n[r];-1!==t.indexOf(o)&&this.connect(o)}}},disconnect:function(e){if(d){var t=this.getChildNodes(e)||[];this.isCustomElement(e)&&e.disconnectedCallback();var n=this.getChildNodes(e);if(n)for(var r=0,i=n.length;r<i;r++){var o=n[r];-1!==t.indexOf(o)&&this.disconnect(o)}}}},y=Symbol();function g(e){var t={};return t.__proto__={$assign:function(e){for(var t in e)this[t]=e[t]},$child:function(){return Object.create(this)},__proto__:e},t}function C(e){return e[y]}function E(e,t){e[y]=t}var k=Symbol();function A(e,t){var n=(e||[]).slice(0);return n[k]=t,n}var N=Symbol();function O(e){return e[N]}function x(e,t){e[N]=t}var T=Symbol();function w(e){return!!e[T]}var j=/\{\{(.*?)\}\}/g;function S(e){var t=e.trim().split(j);if(1===t.length)return e;var n,r="with(this) return ";return r+=t.map(function(e,t){if(e)return t%2==0?"'".concat(e.replace(/'/g,"\\'").replace(/\n/g,"\\n"),"'"):"(".concat(e,")")}).filter(function(e){return!!e}).join("+"),r+=";",(n=new Function(r))[T]=!0,n}var _={};function P(e){return _[e]}var L=Symbol();var M=Symbol();function D(e,n){for(var r=arguments.length,i=new Array(r>2?r-2:0),a=2;a<r;a++)i[a-2]=arguments[a];var u=null;if("function"==typeof e)u=e;else{var c=n&&n.is||e;(function(e){return e in _})(c)&&(u=P(c).constructor)}var s="template"===e,l="slot"===e,f=function(r){var a={};for(var c in n){var f=n[c];w(f)&&(f=f.call(this)),a[c]=f}if(s){if("if"in a&&(null==a.if||!1===a.if))return null;if(a.repeat&&i.length){var v=[],h=a.key||"$key",p=a.item||"$item",d=a.repeat;for(var b in d){var y,g=d[b],k=this.$child();k.$assign((o(y={},h,b),o(y,p,g),y));var N=i.slice(0);E(N,k),v.push(N)}return v}return i}if(l){var T=O(this);if(T){var j=C(T)||this;return E(T=a.name?A(T,function(e){return!!m.isElement(e)&&m.getAttribute(e,"slot")===a.name}):A(T,function(e){return!m.isElement(e)||!m.getAttribute(e,"slot")}),j),T}return[]}var S=function(e,t,n){return"function"==typeof e?n&&n instanceof e&&t===n.key?n:new e:n&&n.localName===e&&t===n.key?n:m.createElement(e)}(u||e,a.key,r),_=m.isCustomElement(S);for(var P in a){var L=a[P];if(_)S[P]!==L&&(S[P]=L);else{var D=S[M]=S[M]||{};D[P]!==L&&(D[P]=L,S[P]=L)}null==L||!1===L?m.removeAttribute(S,P):"object"!==t(L)&&"key"!==P&&m.setAttribute(S,P,!0===L?"":L),"key"===P&&(this[a[P]]=S)}var $=i.slice(0);return E($,this),x(S,$),_&&S.render(),S};return f[L]=!0,f}var $={},B=/:host(\(([^({)]+(\([^)]*\))?)+\))?/g,I=/\/\*[^*]*\*+([^\/*][^*]*\*+)*\//g,V=/(#|\*|\.|@|\[|[a-zA-Z])([^{;}]*){/g;function q(e,t){var n=$[e]=$[e]||{},r='[is="'.concat(e,'"]');return t in n?n[t]:n[t]=t.replace(I,"").replace(B,function(e,t){return"".concat(r).concat(t?t.slice(1,-1):"")}).replace(V,function(e){return"@"===(e=e.trim())[0]?e:e.split(",").map(function(e){return 0===(e=e.trim()).indexOf(r)?e:"".concat(r," ").concat(e)}).join(",")})}function F(e,t,n){var r,i=n||{scope:C(e)||g(e),result:[],iterating:{node:e.firstChild}};if(null!=t&&!1!==t){var o={running:!0,result:i.result,scope:C(t)||i.scope,iterating:i.iterating,filter:(r=t,r[k]||i.filter)},a=o.scope,u=o.result,c=o.iterating;if(Array.isArray(t))for(var s=0,l=t.length;s<l;s++)F(e,t[s],o);else if(w(t))F(e,t.call(a),o);else if(t[L])F(e,t.call(a,c.node),o);else{var f;if(u.push(t),function(e){return e&&"STYLE"===e.tagName}(e)&&m.hasAttribute(e,"scoped")&&"string"==typeof t){var v=m.getAttribute(e,"scoped");v||(v=a.is),e.textContent=q(v,t),f=e.childNodes[0]}else f=m.isElement(t)||m.isText(t)?t:m.createTextNode(t);if(!o.filter||o.filter(f)){var h=c.node;if(f!==h)if(h)if(m.isText(f)&&m.isText(h)){var p=f.textContent;h.textContent!==p&&(h.textContent=p),c.node=h.nextSibling}else m.insertBefore(e,f,h);else m.appendChild(e,f);else c.node=h.nextSibling;if(m.isElement(f)){var d=O(f);d&&!m.isCustomElement(f)&&F(f,d,{result:[],scope:a,iterating:{node:f.firstChild}})}}}}var b=i.running,y=i.result;if(!b&&y){for(var E=y.length,A=e.childNodes;A.length>E;)m.removeChild(e,A[A.length-1]);if(0===E)return;if(1===E)return y[0]}return y}function H(e){return e&&"TEMPLATE"===e.tagName}function R(e){if(m.isElement(e)){for(var t,n=e.localName,r={},i=0;i<e.attributes.length;i++){var o=e.attributes[i];""===o.value?r[o.name]=!0:r[o.name]=S(o.value)}return t=H(e)?e.content.childNodes:e.childNodes,D.apply(void 0,[n,r].concat(f(R(t))))}if(m.isText(e))return S(e.textContent||"");for(var a=[],u=0,c=e.length;u<c;u++){var s=e[u],l=e[u+1];if(m.isText(s)){if((0===u||!l||m.isElement(l))&&!s.textContent.trim())continue;a.push(s)}else m.isElement(s)&&a.push(s)}return a.map(function(e){return R(e)})}function U(e){var t;return 1===(t=H(e)?R(e.content.childNodes):R(m.parse(e))).length?t[0]:t}var z=Symbol();function G(e,n,r){var i=e[z]||{};i[n]=r,e[z]=i,r.name=n,!0===r.attribute&&(r.attribute=n),r.observe&&(r.observers=[r.observe]),Object.defineProperty(e,n,function(e){var n={enumerable:!0},r=e.value;"defaultValue"in e&&(r=e.defaultValue);var i=function(){return r};if(e.getter){var o=e.getter;i=function(){return o.call(this,r)}}var a=function(e){return e};if(e.setter){var u=e.setter;a=function(e){return u.call(this,e)}}var c=[];Array.isArray(e.types)?c=e.types:e.types&&(c=[e.types]);var s=e.attribute;return n.get=i,n.set=function(n){var i=r;if(i!==(n=a.call(this,n))){var o=null==n||!1===n;if(!o){var u=!0;if(c.length&&(u=c.some(function(e){return r instanceof e||r.constructor&&r.constructor===e})),u&&e.validate&&(u=e.validate(r)),!u)throw new TypeError("Invalid `".concat(r,"` value for `").concat(e.name,"` property"))}r=n,e.attribute&&(o?this.removeAttribute(s):"object"!==t(r)&&this.setAttribute(s,!0===r?"":r)),m.isCustomElement(this)&&this.propertyChangedCallback(e.name,i,r)}},n}(r))}function X(e){return e[z]||{}}var Y=Symbol();function Z(e,t,n,r){var i=e,o=i[Y]=i[Y]||{},a=o[t]=o[t]||{descriptors:[]},u=a.descriptors;a.listener||(a.listener=function(t){if(t.target){var n=t.target,r=!1;t.stopPropagation=function(){return r=!0,Event.prototype.stopPropagation.call(t)},t.stopImmediatePropagation=function(){return r=!0,Event.prototype.stopImmediatePropagation.call(t)};for(var i=[],o=0;o<u.length;o++){var a=u[o],c=a.selector,s=a.callback,l=c?n.closest(c):e;l&&i.push({target:l,callback:s})}i.sort(function(e,t){var n=e.target,r=t.target;return n.contains(r)?1:-1}).forEach(function(n){var i=n.callback,o=n.target;r||i.call(e,t,o)})}},e.addEventListener(t,a.listener)),u.push({event:t,callback:r,selector:n})}function J(e,t,n,r){var i=e[Y];if(t){if(i&&t in i){var o=i[t],a=o.descriptors,u=o.listener;if(r){if(u)for(var c=0;c<a.length;c++){var s=a[c];s.selector===n&&s.callback===r&&(a.splice(c,1),0===a.length&&e.removeEventListener(t,u))}}else a.forEach(function(n){J(e,t,n.selector,n.callback)})}}else if(i)for(var l in i)J(e,l)}var K=Node,Q=K.ELEMENT_NODE,W=K.TEXT_NODE,ee=K.DOCUMENT_FRAGMENT_NODE,te=K.DOCUMENT_NODE;var ne=function(e){function r(e,t){var i;if(n(this,r),!(i=l(this,u(r).call(this))).is)throw new Error("Component has not been defined.");if(!m.isElement(e)){t=e;var o=P(i.is);e=m.createElement(o.extends||o.name)}Object.setPrototypeOf(e,Object.getPrototypeOf(s(i))),E(e,g(e));var a=i.properties;if(a)for(var c in a)G(e,c,a[c]);if(t)for(var f in t)e[f]=t[f];return m.setAttribute(e,"is",i.is),x(e,m.getChildNodes(e)),l(i,e)}return a(r,b),i(r,[{key:"isConnected",get:function(){return function e(t){if(!t||!t.nodeType)return!1;var n=t.nodeType;return n===Q||n===W?e(t.parentNode):n===ee||n===te}(this)}},{key:"template",get:function(){var e=m.document.querySelector('template[name="'.concat(this.is,'"]'));if(e)return U(e)}},{key:"$scope",get:function(){return C(this)}}]),i(r,[{key:"connectedCallback",value:function(){this.undelegate();var e=this.events;if(e)for(var t in e){var n=t.match(/([^\s]+)(?:\s+(.*))?/);n&&this.delegate(n[1],n[2],e[t])}this.render()}},{key:"disconnectedCallback",value:function(){this.render([])}},{key:"attributeChangedCallback",value:function(e,t,n){var r,i=X(this);for(var o in i){var a=i[o];if(a.attribute===e){r=a;break}}if(r){var u=r.name,c=""===n||n===e||n;this[u]!=c&&(this[u]=c)}}},{key:"propertyChangedCallback",value:function(e,n,r){var i=X(this)[e],o=i.attribute;o&&(null==r||!1===r?this.removeAttribute(o):"object"!==t(r)&&this.setAttribute(o,r)),i.observers&&i.observers.forEach(function(e){return e(n,r)}),this.render()}},{key:"observe",value:function(e,t){var n=X(this)[e];if(!n)throw new Error("missing property ".concat(e));n.observers=n.observers||[],n.observers.push(t)}},{key:"unobserve",value:function(e,t){var n=X(this)[e];if(!n)throw new Error("missing property ".concat(e));if(t&&n.observers){var r=n.observers.indexOf(t);-1!==r&&n.observers.splice(r,1)}else n.observers=[]}},{key:"delegate",value:function(e,t,n){return Z(this,e,t,n)}},{key:"undelegate",value:function(e,t,n){return J(this,e,t,n)}},{key:"render",value:function(e){(e=e||this.template||O(this))&&F(this,e)}},{key:"appendChild",value:function(e){return m.appendChild(this,e)}},{key:"removeChild",value:function(e){return m.removeChild(this,e)}},{key:"insertBefore",value:function(e,t){return m.insertBefore(this,e,t)}},{key:"replaceChild",value:function(e,t){return m.replaceChild(this,e,t)}},{key:"setAttribute",value:function(e,t){return m.setAttribute(this,e,t)}},{key:"removeAttribute",value:function(e){return m.removeAttribute(this,e)}}]),r}();e.Component=ne,e.DOM=m,e.bootstrap=function(e){var t=[];return function(){var e=[];for(var t in _)e.push(_[t]);return e}().forEach(function(n){var r=n.name,i=n.constructor;e.querySelectorAll("".concat(r,', [is="').concat(r,'"]')).forEach(function(e){if(!(e instanceof i)){var n=new i(e);n.isConnected&&m.connect(n),t.push(n)}})}),t},e.css=q,e.define=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};e=e.toLowerCase(),Object.defineProperty(t.prototype,"is",{writable:!1,configurable:!1,value:e}),_[e]={name:e,constructor:t,extends:n.extends}},e.delegate=Z,e.h=D,e.html=U,e.interpolate=S,e.property=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(t,n,r){e.defaultValue=r.value,G(t,n,e)}},e.render=F,e.undelegate=J,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
| //# sourceMappingURL=dna.js.map |
| { | ||
| "name": "@chialab/dna", | ||
| "version": "3.0.0-alpha.2", | ||
| "version": "3.0.0-alpha.3", | ||
| "description": "Evolution-based components.", | ||
@@ -20,3 +20,5 @@ "main": "dist/umd/dna.js", | ||
| "scripts": { | ||
| "build": "rm -rf dist && rna build --production --name DNA" | ||
| "build": "rm -rf dist && rna build --production --name DNA --typings", | ||
| "docs": "rna documentate --output docs/API.md --header '# DNA'", | ||
| "prepack": "npm run build" | ||
| }, | ||
@@ -23,0 +25,0 @@ "devDependencies": { |
| <p align="center"> | ||
| <img alt="synapse" src="https://logos.chialab.io/@chialab/dna.svg" width="100"> | ||
| <img alt="DNA" src="https://logos.chialab.io/@chialab/dna.svg" width="100"> | ||
| </p> | ||
@@ -79,2 +79,3 @@ | ||
| <summary>Expand the code</summary> | ||
| <br /> | ||
@@ -113,3 +114,3 @@ **Define a template** | ||
| class HelloComponent extends Component { | ||
| class HelloWorld extends Component { | ||
| @property() // define an observable Component property | ||
@@ -128,6 +129,6 @@ name: string; | ||
| // link the Component class to a tag | ||
| define('hello-component', HelloComponent); | ||
| define('hello-world', HelloWorld); | ||
| // render the Component | ||
| render(document.body, new HelloComponent); | ||
| render(document.body, new HelloWorld); | ||
| ``` | ||
@@ -134,0 +135,0 @@ </details> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.5%
217081
- Lines of code
- increased by2.7%
723
- Number of lines in readme file
- increased by0.58%
172
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes