diff --git a/types/postmate/index.d.ts b/types/postmate/index.d.ts new file mode 100644 index 0000000000..5a68ef27e7 --- /dev/null +++ b/types/postmate/index.d.ts @@ -0,0 +1,126 @@ +// Type definitions for postmate 1.5 +// Project: https://github.com/dollarshaveclub/postmate +// Definitions by: Wayne Carson +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/** + * This is written in the parent page. Creates an iFrame at the specified url. Initiates a connection with the + * child. Returns a Promise that signals when the handshake is complete and communication is ready to begin. + */ +declare class Postmate extends Promise { + /** + * Set to true to enable logging of additional information. Default: false + */ + static debug: boolean; + + /** + * Replace the Promise API that Postmate uses. Default: window.Promise + */ + static Promise: Promise; + + /** + * Initializes a new instance of Postmate + * + * @param options configuration options + */ + constructor(options: Postmate.PostmateOptions); +} + +declare namespace Postmate { + /** + * Options passed to the Postmate constructor + */ + interface PostmateOptions { + /** + * An element to append the iFrame to. Default: document.body + */ + container?: HTMLElement|null; + + /** + * An object literal to represent the default values of the child's model + */ + model?: any; + + /** + * A URL to load in the iFrame. The origin of this URL will also be used for securing message transport + */ + url: string; + + /** + * An Array to add classes to the iFrame. Useful for styling + */ + classListArray?: string[]; + } + + /** + * Composes an API to be used by the parent + */ + interface ParentAPI { + /** + * The iFrame Element that the parent is communicating with + */ + frame: HTMLIFrameElement; + + /** + * Retrieves a value by property name from the child's model object. + * + * @param key The string property to lookup in the child's model + * @returns child model property value + */ + get(key: string): Promise; + + /** + * Calls a function on the child's model + * + * @param key The string property to lookup in the child's model + * @param data The optional data to send to the child function + */ + call(key: string, data?: any): void; + + /** + * Listen to a particular event from the child + * + * @param eventName the name of the event + * @param callback the event handler function + */ + on(eventName: string, callback: (data?: any) => void): void; + + /** + * Removes the iFrame element and destroys any message event listeners + */ + destroy(): void; + } + + /** + * Composes an API to be used by the child + */ + interface ChildAPI { + /** + * Emits an event to the parent + * + * @param name the name of the event + * @param data event data + */ + emit(name: string, data?: any): void; + } + + /** + * This is written in the child page. Calling Postmate.Model initiates a handshake request listener from the + * Child. Once the handshake is complete, an event listener is bound to receive requests from the Parent. The + * Child model is extended from the model provided by the Parent. + */ + class Model extends Promise { + /** + * Initializes a new instance of Model + * + * @param model An object of gettable properties to expose to the parent. Value types may be anything + * accepted in postMessage. Promises may also be set as values or returned from functions. Default: {} + */ + constructor(model: any); + } +} + +/** + * Module export + */ +export = Postmate; diff --git a/types/postmate/postmate-tests.ts b/types/postmate/postmate-tests.ts new file mode 100644 index 0000000000..ef85372ff4 --- /dev/null +++ b/types/postmate/postmate-tests.ts @@ -0,0 +1,38 @@ +import Postmate = require('postmate'); + +// +// Tests are based on code samples on https://github.com/dollarshaveclub/postmate#usage +// + +/////////////////////////// +// parent.com + +// Kick off the handshake with the iFrame +const parentHandshake = new Postmate({ + container: document.getElementById('some-div'), + url: 'http://child.com/page.html', + classListArray: ["myClass"] +}); + +// When parent <-> child handshake is complete, data may be requested from the child +parentHandshake.then(child => { + // Fetch the height property in child.html and set it to the iFrames height + child.get('height') + .then(height => child.frame.style.height = `${height}px`); + + // Listen to a particular event from the child + child.on('some-event', data => console.log(data)); // Logs "Hello, World!" +}); + +/////////////////////////// +// child.com/page.html + +const childHandshake = new Postmate.Model({ + // Expose your model to the Parent. Property values may be functions, promises, or regular values + height: () => (document as any).height || document.body.offsetHeight +}); + +// When parent <-> child handshake is complete, events may be emitted to the parent +childHandshake.then(parent => { + parent.emit('some-event', 'Hello, World!'); +}); diff --git a/types/postmate/tsconfig.json b/types/postmate/tsconfig.json new file mode 100644 index 0000000000..4a70b478e7 --- /dev/null +++ b/types/postmate/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "postmate-tests.ts" + ] +} diff --git a/types/postmate/tslint.json b/types/postmate/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/postmate/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }