webcomponents.js: Convert to external module and make compatible with TS2.3 (#15998)

* webcomponents.js: Convert to external module and make compatible with TS2.3

* Use in polymer
This commit is contained in:
Andy
2017-04-19 13:57:06 -07:00
committed by GitHub
parent 3a18123b9e
commit 68d74285e6
4 changed files with 393 additions and 389 deletions
+327 -325
View File
@@ -3,334 +3,336 @@
// Definitions by: Louis Grignon <https://github.com/lgrignon>, Suguru Inatomi <https://github.com/laco0416>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
///<reference types="webcomponents.js"/>
import { CustomElementConstructor } from "webcomponents.js";
declare namespace polymer {
declare global {
namespace polymer {
type PropConstructorType = StringConstructor | ObjectConstructor | BooleanConstructor | NumberConstructor | DateConstructor | ArrayConstructor;
type PropConstructorType = StringConstructor | ObjectConstructor | BooleanConstructor | NumberConstructor | DateConstructor | ArrayConstructor;
interface PropObjectType {
type: PropConstructorType;
value?: boolean | number | string | Function | Object;
reflectToAttribute?: boolean;
readOnly?: boolean;
notify?: boolean;
computed?: string;
observer?: string;
interface PropObjectType {
type: PropConstructorType;
value?: boolean | number | string | Function | Object;
reflectToAttribute?: boolean;
readOnly?: boolean;
notify?: boolean;
computed?: string;
observer?: string;
}
interface Base {
/** Need to allow all properties for callback methods. */
[prop: string]: any;
/* polymer-micro */
// Attributes
hostAttributes?: {[name:string]:any};
reflectPropertiesToAttribute?(name: string): void;
serializeValueToAttribute?(value: any, attribute: string, node?: Element): void;
deserialize?(value: string, type: NumberConstructor): number;
deserialize?(value: string, type: BooleanConstructor): boolean;
deserialize?(value: string, type: ObjectConstructor): Object;
deserialize?(value: string, type: ArrayConstructor): any[];
deserialize?(value: string, type: DateConstructor): Date;
deserialize?(value: string, type: StringConstructor): string;
serialize?(value: any): string;
// Behaviors
behaviors?:Object[];
// Constructors
factoryImpl?(...args: any[]): void;
// Debouncer
debounce?(jobName: string, callback: Function, wait: number): void;
isDebouncerActive?(jobName: string): boolean;
flushDebouncer?(jobName: string): void;
cancelDebouncer?(jobName: string): void;
// Extends
extends?: string;
getNativePrototype?(tag: string): Object;
// Properties
properties?:{[prop:string]:(PropConstructorType|PropObjectType);};
getPropertyInfo?(property: string): Object;
// Tag
is: string;
/* polymer-mini */
// Ready
ready?(): void;
attachedCallback?(): void;
// Shady
domHost?(): Element;
distributeContent?(): void;
elementMatches?(selector: string, node?: Element): boolean;
// Template {
instanceTemplate?(template: HTMLElement): DocumentFragment;
/* polymer-standard */
// Annotations
$?: any;
// Events
listeners?: {[key:string]:string;};
listen?(node: Element, eventName: string, methodName: string): void;
unlisten?(node: Element, eventName: string, methodName: string): void;
// Gestures
setScrollDirection?(direction: string, node?: HTMLElement): void;
// NotifyPath
notifyPath?(path: string, value: any, fromAbove: any): void;
set?(path: string|(string|number)[], value: any, root?: Object): void;
get?(path: string|(string|number)[], root?: Object): any;
linkPaths?(to: string, from?: string): void;
unlinkPaths?(path: string): void;
push?(path: string, ...item: any[]): number;
pop?(path: string): any;
splice?(path: string, index: number, removeCount: number, ...item: any[]):
number;
shift?(path: string): any;
unshift?(path: string, ...item: any[]): number;
// ResolveUrl
resolveUrl?(url: string): string;
// Styling
scopeSubtree?(container: Element, shouldObserve: boolean): void;
// Utils
$$?(selector: string): Element;
toggleClass?(name: string, bool?: boolean, node?: HTMLElement): void;
toggleAttribute?(name: string, bool?: boolean, node?: HTMLElement): void;
classFollows?(name: string, toElement: HTMLElement, fromElement: HTMLElement): void;
attributeFollows?(name: string, toElement: HTMLElement, fromElement: HTMLElement): void;
getContentChildNodes?(selector: string): Node[];
getContentChildren?(selector: string): HTMLElement[];
fire?(type: string, detail?: any, options?: Object): CustomEvent;
async?(callback: ()=>void, waitTime?: number): number;
cancelAsync?(handle: number): void;
arrayDelete?(path: string|any[], item: any): any[];
transform?(transform: string, node?: HTMLElement): void;
translate3d?(x: number, y: number, z: number, node?: HTMLElement): void;
importHref?(href: string, onload?: Function, onerror?: Function): HTMLLinkElement;
create?(tag: string, props: Object): Element;
isLightDescendant?(node: HTMLElement): boolean;
isLocalDescendant?(node: HTMLElement): boolean
// XStyling
updateStyles?(): void;
/* common api */
registerCallback?():void;
createdCallback?():void;
attachedCallback?():void;
detachedCallback?():void;
attributeChangedCallback?(name: string):void;
extend?(prototype: Object, api: Object):Object;
mixin?(target: Object, source: Object):Object;
copyOwnProperty?(name: string, source: Object, target: Object):void;
observers?: string[];
beforeRegister?(): void;
registered?(): void;
created?(): void;
attached?(): void;
detached?(): void;
attributeChanged?(name: string, oldValue: any, newValue: any): void;
}
interface DomApiStatic {
(obj: Node|Base):DomApi;
(obj: Event):EventApi;
flush():void;
}
interface DomApi {
appendChild(node: Node): Node;
insertBefore(node: Node, refNode?: Node):Node;
removeChild(node: Node):Node;
replaceChild(node: Node, refNode: Node):Node;
getOwnerRoot():Node;
querySelector(selector: string):Node;
querySelectorAll(selector: string):Node[];
getDestinationInsertionPoints():Node[];
getDistributedNodes():Node[];
queryDistributedElements(selector: string):Node[];
setAttribute(name: string, value: any):void;
removeAttribute(name: string):void;
childNodes:Node[];
children:Element[];
parentNode:Node;
firstChild:Node;
lastChild:Node;
nextSibling:Node;
previousSibling:Node;
firstElementChild:Element;
lastElementChild:Element;
nextElementSibling:Element;
previousElementSibling:Element;
textContent:string;
innerHTML:string;
}
interface EventApi {
rootTarget:EventTarget;
localTarget:EventTarget;
path:Node[];
}
interface Settings {
hasNativeCSSProperties: boolean
hasNativeImports: boolean
hasShadow: boolean
nativeShadow: boolean
useNativeCSSProperties: boolean
useNativeCustomElements: boolean
useNativeImports: boolean
useNativeShadow: boolean
usePolyfillProto: boolean
useShadow: boolean
wantShadow: boolean
}
interface RenderStatus {
afterNextRender(element: Element, fn: Function, args?: any): void;
hasRendered(): boolean;
whenReady(cb: Function): void;
}
interface ImportStatus extends RenderStatus {
whenLoaded(cb: Function): void;
}
interface PolymerStatic {
Settings: Settings;
isInstance(element: string): boolean;
Base: Base;
dom: DomApiStatic;
(prototype: Base | { new (): Base }): CustomElementConstructor;
Class(prototype: Base | { new (): Base }): CustomElementConstructor;
RenderStatus: RenderStatus
/** @deprecated */
ImportStatus: ImportStatus
}
}
interface Base {
/** Need to allow all properties for callback methods. */
[prop: string]: any;
/* polymer-micro */
// Attributes
hostAttributes?: {[name:string]:any};
reflectPropertiesToAttribute?(name: string): void;
serializeValueToAttribute?(value: any, attribute: string, node?: Element): void;
deserialize?(value: string, type: NumberConstructor): number;
deserialize?(value: string, type: BooleanConstructor): boolean;
deserialize?(value: string, type: ObjectConstructor): Object;
deserialize?(value: string, type: ArrayConstructor): any[];
deserialize?(value: string, type: DateConstructor): Date;
deserialize?(value: string, type: StringConstructor): string;
serialize?(value: any): string;
// Behaviors
behaviors?:Object[];
// Constructors
factoryImpl?(...args: any[]): void;
// Debouncer
debounce?(jobName: string, callback: Function, wait: number): void;
isDebouncerActive?(jobName: string): boolean;
flushDebouncer?(jobName: string): void;
cancelDebouncer?(jobName: string): void;
// Extends
extends?: string;
getNativePrototype?(tag: string): Object;
// Properties
properties?:{[prop:string]:(PropConstructorType|PropObjectType);};
getPropertyInfo?(property: string): Object;
// Tag
is: string;
/* polymer-mini */
// Ready
ready?(): void;
attachedCallback?(): void;
// Shady
domHost?(): Element;
distributeContent?(): void;
elementMatches?(selector: string, node?: Element): boolean;
// Template {
instanceTemplate?(template: HTMLElement): DocumentFragment;
/* polymer-standard */
// Annotations
$?: any;
// Events
listeners?: {[key:string]:string;};
listen?(node: Element, eventName: string, methodName: string): void;
unlisten?(node: Element, eventName: string, methodName: string): void;
// Gestures
setScrollDirection?(direction: string, node?: HTMLElement): void;
// NotifyPath
notifyPath?(path: string, value: any, fromAbove: any): void;
set?(path: string|(string|number)[], value: any, root?: Object): void;
get?(path: string|(string|number)[], root?: Object): any;
linkPaths?(to: string, from?: string): void;
unlinkPaths?(path: string): void;
push?(path: string, ...item: any[]): number;
pop?(path: string): any;
splice?(path: string, index: number, removeCount: number, ...item: any[]):
number;
shift?(path: string): any;
unshift?(path: string, ...item: any[]): number;
// ResolveUrl
resolveUrl?(url: string): string;
// Styling
scopeSubtree?(container: Element, shouldObserve: boolean): void;
// Utils
$$?(selector: string): Element;
toggleClass?(name: string, bool?: boolean, node?: HTMLElement): void;
toggleAttribute?(name: string, bool?: boolean, node?: HTMLElement): void;
classFollows?(name: string, toElement: HTMLElement, fromElement: HTMLElement): void;
attributeFollows?(name: string, toElement: HTMLElement, fromElement: HTMLElement): void;
getContentChildNodes?(selector: string): Node[];
getContentChildren?(selector: string): HTMLElement[];
fire?(type: string, detail?: any, options?: Object): CustomEvent;
async?(callback: ()=>void, waitTime?: number): number;
cancelAsync?(handle: number): void;
arrayDelete?(path: string|any[], item: any): any[];
transform?(transform: string, node?: HTMLElement): void;
translate3d?(x: number, y: number, z: number, node?: HTMLElement): void;
importHref?(href: string, onload?: Function, onerror?: Function): HTMLLinkElement;
create?(tag: string, props: Object): Element;
isLightDescendant?(node: HTMLElement): boolean;
isLocalDescendant?(node: HTMLElement): boolean
// XStyling
updateStyles?(): void;
/* common api */
registerCallback?():void;
createdCallback?():void;
attachedCallback?():void;
detachedCallback?():void;
attributeChangedCallback?(name: string):void;
extend?(prototype: Object, api: Object):Object;
mixin?(target: Object, source: Object):Object;
copyOwnProperty?(name: string, source: Object, target: Object):void;
observers?: string[];
beforeRegister?(): void;
registered?(): void;
created?(): void;
attached?(): void;
detached?(): void;
attributeChanged?(name: string, oldValue: any, newValue: any): void;
}
interface DomApiStatic {
(obj: Node|Base):DomApi;
(obj: Event):EventApi;
flush():void;
}
interface DomApi {
appendChild(node: Node): Node;
insertBefore(node: Node, refNode?: Node):Node;
removeChild(node: Node):Node;
replaceChild(node: Node, refNode: Node):Node;
getOwnerRoot():Node;
querySelector(selector: string):Node;
querySelectorAll(selector: string):Node[];
getDestinationInsertionPoints():Node[];
getDistributedNodes():Node[];
queryDistributedElements(selector: string):Node[];
setAttribute(name: string, value: any):void;
removeAttribute(name: string):void;
childNodes:Node[];
children:Element[];
parentNode:Node;
firstChild:Node;
lastChild:Node;
nextSibling:Node;
previousSibling:Node;
firstElementChild:Element;
lastElementChild:Element;
nextElementSibling:Element;
previousElementSibling:Element;
textContent:string;
innerHTML:string;
}
interface EventApi {
rootTarget:EventTarget;
localTarget:EventTarget;
path:Node[];
}
interface Settings {
hasNativeCSSProperties: boolean
hasNativeImports: boolean
hasShadow: boolean
nativeShadow: boolean
useNativeCSSProperties: boolean
useNativeCustomElements: boolean
useNativeImports: boolean
useNativeShadow: boolean
usePolyfillProto: boolean
useShadow: boolean
wantShadow: boolean
}
interface RenderStatus {
afterNextRender(element: Element, fn: Function, args?: any): void;
hasRendered(): boolean;
whenReady(cb: Function): void;
}
interface ImportStatus extends RenderStatus {
whenLoaded(cb: Function): void;
}
interface PolymerStatic {
Settings: Settings;
isInstance(element: string): boolean;
Base: Base;
dom: DomApiStatic;
(prototype: Base | { new (): Base }): webcomponents.CustomElementConstructor;
Class(prototype: Base | { new (): Base }): webcomponents.CustomElementConstructor;
RenderStatus: RenderStatus
/** @deprecated */
ImportStatus: ImportStatus
}
var Polymer: polymer.PolymerStatic;
}
declare var Polymer: polymer.PolymerStatic;
+53 -55
View File
@@ -1,71 +1,69 @@
// Type definitions for webcomponents.js 0.6.0
// Type definitions for webcomponents.js 0.6
// Project: https://github.com/webcomponents/webcomponentsjs
// Definitions by: Adi Dahiya <https://github.com/adidahiya>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
declare namespace webcomponents {
export interface CustomElementInit {
prototype: HTMLElement;
extends?: string;
}
export interface CustomElementInit {
prototype: HTMLElement;
extends?: string;
export interface CustomElementConstructor {
new(): HTMLElement;
}
export interface CustomElementsPolyfill {
hasNative: boolean;
flags: any;
ready: boolean;
useNative: boolean;
}
export interface HTMLImportsPolyfill {
IMPORT_LINK_TYPE: string;
isIE: boolean;
flags: any;
ready: boolean;
rootDocument: Document;
useNative: boolean;
whenReady(callback: () => void): void;
}
export interface Polyfill {
flags: any;
}
declare global {
// This contains duplicates of some types in lib.dom.d.ts in order to support typescript 2.0
interface ElementDefinitionOptions {
extends: string;
}
export interface CustomElementConstructor {
new(): HTMLElement;
}
export interface CustomElementsPolyfill {
hasNative: boolean;
flags: any;
ready: boolean;
useNative: boolean;
}
export interface HTMLImportsPolyfill {
IMPORT_LINK_TYPE: string;
isIE: boolean;
flags: any;
ready: boolean;
rootDocument: Document;
useNative: boolean;
whenReady(callback: () => void): void;
}
export interface ShadowRootPolyfill extends DocumentFragment {
interface ShadowRoot extends DocumentFragment {
innerHTML: string;
readonly host: Element;
}
export interface Polyfill {
flags: any;
interface CustomElementRegistry {
define(name: string, constructor: Function, options?: ElementDefinitionOptions): void;
get(name: string): any;
whenDefined(name: string): PromiseLike<void>;
}
/**
* I just slapped this in here - sure it could be better ... :-)
*/
export interface CustomElements {
define( tagName:string, elementClass:any ):void;
interface Element {
createShadowRoot(): ShadowRoot;
readonly shadowRoot: ShadowRoot | null;
}
interface Document {
registerElement(name: string, prototype: CustomElementInit): CustomElementConstructor;
}
interface Window {
CustomElements: CustomElementsPolyfill;
HTMLImports: HTMLImportsPolyfill;
WebComponents: Polyfill;
customElements: CustomElementRegistry;
}
}
declare module "webcomponents.js" {
export = webcomponents;
}
interface Element {
createShadowRoot(): webcomponents.ShadowRootPolyfill;
readonly shadowRoot?: webcomponents.ShadowRootPolyfill;
}
interface Document {
registerElement(name: string, prototype: webcomponents.CustomElementInit): webcomponents.CustomElementConstructor;
}
interface Window {
CustomElements: webcomponents.CustomElementsPolyfill;
HTMLImports: webcomponents.HTMLImportsPolyfill;
WebComponents: webcomponents.Polyfill;
customElements: webcomponents.CustomElements;
}
+6
View File
@@ -0,0 +1,6 @@
{
"extends": "dtslint/dt.json",
"rules": {
"ban-types": false
}
}
@@ -1,20 +1,18 @@
/*
* Custom Elements
*/
var fooProto = Object.create(HTMLElement.prototype, {
const fooProto = Object.create(HTMLElement.prototype, {
createdCallback(this: HTMLElement) {
// `this` should be the created element
this.getElementsByTagName("a");
}
});
var XFoo = document.registerElement("x-foo", {
const XFoo = document.registerElement("x-foo", {
prototype: fooProto
});
var xFoo = new XFoo();
const xFoo = new XFoo();
xFoo.textContent = "";
document.body.appendChild(xFoo);
@@ -40,7 +38,7 @@ document.querySelectorAll(`link[type=${window.HTMLImports.IMPORT_LINK_TYPE}`);
* Shadow DOM
*/
var shadow = xFoo.createShadowRoot();
const shadow = xFoo.createShadowRoot();
xFoo.shadowRoot;
shadow.innerHTML;
shadow.host;
@@ -50,8 +48,8 @@ shadow.host;
*/
window.WebComponents.flags;
window.customElements.define( "lw-arrival-pie",
window.customElements.define( "lw-arrival-pie",
/**
* ArrivalPie custom element
*/
@@ -63,4 +61,4 @@ window.customElements.define( "lw-arrival-pie",
super();
}
}
);
);