d.ts - added JSDocs

Author: sashafirsov

README.md

@@ -82,7 +82,7 @@ It is more performant than separate template as there is no content cloning invo
 * `slotAdd( name )` clones slot node and inserts immediately after original slot
 * `slotsClear()` removes cloned slots from internal DOM
 
-Overrides for `fetched-element` to support following fetch() lifecycle slots `loading`, `error`, `done`;
+Overrides for `fetched-element` to support following fetch() lifecycle slots `loading`, `error`, `loaded`;
 * `fetch`, `onResponse`, `onResult`, `onError` overrides of `fetch-element` to switch slots according to state change
 
 ### Attributes

fetch-element.d.ts

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * @returns Promise resolved when updated DOM is rendered by calling [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)
  * @param cb callback invoked on dom rendered, its return value passed back to wait4DomUpdated promise
@@ -64,20 +65,84 @@ export class FetchElement extends HTMLElement {
     status: string;
 
     /**
-     * @see [web component lifecycle](
+     * @see [web component lifecycle](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks)
      */
     connectedCallback(): void;
+
+    /**
+     * set to true when fetch is initialized
+     */
     initialized: boolean;
+    /**
+     * @see [web component lifecycle](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks)
+     */
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+
+    /**
+     * callback when `fetch()` is resolved.
+     * Sets `status`, `contentType`, `responseHeaders` and resolves the method for data
+     *   conversion according to content type.
+     * @param response
+     * @returns data promise from `response.json()` or `response.text()`
+     */
     onResponse(response: any): Promise<any>;
+
+    /**
+     * set by `onResponse()` to 'network error' in case of http code not in 200 range
+     */
     error: string;
-    contentType: any;
+    /**
+     * response.headers.get( 'content-type' )
+     */
+    contentType: string;
+    /**
+     * response.headers
+     */
     responseHeaders: any;
-    setContent(html: any): void;
+
+    /**
+     * pre-render callback to massage response data before `render()`
+     * @param data
+     */
+    setContent(data: any): void;
+
+    /**
+     * callback which check the contentType and invokes renderer from `mime2mod` map
+     * @param result
+     */
     onResult(result: any): Promise<any>;
+
+    /**
+     * callback to override the output HTML according to response outcome.
+     * @param data
+     * @param contentType
+     * @param httpCode
+     * @param responseHeaders
+     */
     render(data: any, contentType: any, httpCode: any, responseHeaders: any): void;
+
+    /**
+     * default rendering implementation which triggers  data and html transformation
+     * @param data
+     * @param contentType
+     * @param httpCode
+     * @param responseHeaders
+     * @param args
+     */
     renderHtml(data: any, contentType: any, httpCode: any, responseHeaders: any, ...args: any[]): Promise<void>;
+
+    /**
+     * callback on `fetch()` failure
+     * @param error
+     * @returns value for rejected promise
+     */
     onError(error: any): any;
+
+    /**
+     * override to limit or define the order of keys on json object to be rendered in table.
+     * @param obj
+     * @returns array of keys to be shown in HTML
+     */
     getKeys(obj: any): string[];
 }
 export default FetchElement;

slotted-element.d.ts

@@ -0,0 +1,72 @@
+export * from "./fetch-element.js";
+export class SlottedElement extends FetchElement {
+    /**
+     * @see [web component lifecycle](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks)
+     */
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+
+    /**
+     * attribute with id of html element used as template [see light DOM](https://github.com/sashafirsov/css-chain#light-dom-api)
+     */
+    template: string;
+
+    /**
+     * [CssChain](https://github.com/sashafirsov/css-chain) of slotted-elemt children defined by `css`
+     * @param css
+     */
+    $<T>(css: undefined|string): CssChainCollection<T>&T;
+
+    /**
+     * @see [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+     * @param args
+     */
+    fetch( url:Request | string, options ): Promise<any>;
+    /**
+     * pre-render callback to massage response data before `render()`
+     * @param data
+     */
+    setContent(data: any): void;
+
+    /**
+     * read slots from internal DOM. Has to be called before any slots operations.
+     */
+    slotsInit(): void;
+
+    /**
+     * hashmap of slot name to slot used internally
+     */
+    slots: {};
+
+    /**
+     * hide all slots except of named one by setting/removing `hidden` attribute
+     * @param name
+     */
+    slotOnly(name: string): void;
+
+    /**
+     * remove all slots clones
+     */
+    slotsClear(): void;
+
+    /**
+     * returns node (clone of slot subtree) to be modified before insertion by `slotAdd()`
+     * @param name
+     */
+    slotClone(name: string): Node;
+
+    /**
+     * adds slot clone node to internal content immediately after original slot
+     * @param node name or node created by slotClone(name)
+     */
+    slotAdd(node: Node): Node;
+
+    /**
+     * clones slot node and inserts immediately after original slot
+     * @param nodeName name or node created by slotClone(name)
+     */
+    slotAdd(nodeName: string): Node;
+}
+export default SlottedElement;
+export { $ as CssChain };
+import FetchElement from "./fetch-element.js";
+import {CssChain as $, CssChainCollection, CssChainT} from "css-chain";

slotted-element.js

@@ -77,7 +77,7 @@ SlottedElement extends FE
             .remove();
     }
 
-    slotClone( name ) // create slot to be modified before by slotAdd(node)
+    slotClone( name )
     {
         const slot = this.slots[ name ]
         if( !slot )
@@ -88,7 +88,7 @@ SlottedElement extends FE
         return ret;
     }
 
-    slotAdd( node ) // name or node created by slotClone(name)
+    slotAdd( node )
     {
         const slot = node.slot ? node: this.slotClone( node )
         ,      ref = this.$(`slot[name="${node.slot || node}"]`);