monday-sdk-js 0.1.4 → 0.2.0

package/README.md

@@ -13,19 +13,6 @@ The monday.com SDK provides a toolset for application developers to build featur
 
 The SDK contains methods for server-side and client-side application development. Client-side capabilities assume a valid user session is present (and can seamlessly act on behalf of that user), while server-side methods can be used to access monday.com features using explicit credentials but without any client-side code.
 
-## Table of contents
-- [Usage](#usage)
-- [Seamless authentication](#seamless-authentication)
-- [SDK capabilities](#sdk-capabilities)
-  - [`monday.api`](#mondayapiquery-options--)
-  - [`monday.get`](#mondaygettype-params--)
-  - [`monday.set`](#mondaysettype-params--)
-  - [`monday.listen`](#mondaylistentypeortypes-callback-params--)
-  - [`monday.execute`](#mondayexecutetype-params)
-  - [`monday.oauth`](#mondayoauthoptions--)
-  - [`monday.storage`](#mondaystorage)
-- [Storage API](#storage-api-mondaystorage)
-
 ## Usage
 
 ### Using as an `npm` module
@@ -53,545 +40,6 @@ and then initialize the SDK anywhere in the page by declaring:
 const monday = window.mondaySdk()
 ```
 
-## Seamless authentication
-When used for client-side development, SDK methods that require to act on behalf of the connected user will work out-of-the-box by communicating with the parent monday.com running application. You're not required to initialize the SDK client with any explicit credentials.
-
-Methods that use seamless authentication (including `monday.api` and `monday.storage`) offer capabilities that are scoped based on the permissions of the logged in user and the scopes you have configured in your app.
-
-## SDK capabilities
-
-The SDK exposes the following capabilities:
-
-| SDK Object | Capability |
-|--|--|
-| `monday.api` | Performing queries against the monday.com API on behalf of the connected user |
-| `monday.listen` | Listen to client-side events on the monday.com client running this app |
-| `monday.get` | Retrieve information from the monday.com client running this app |
-| `monday.execute` | Call an action on the monday.com client running this app |
-| `monday.storage` | Read/write to the Storage API, a key-value storage service for apps |
-| `monday.oauth` | Redirecting the client to the OAuth authorization server, with your client ID included |
-
-<br/>
-
-### **`monday.api(query, options = {})`**
-Used for querying the monday.com GraphQL API seamlessly on behalf of the connected user, or using a provided API token. 
-
-**Parameters:**
-
-- `query`: A [GraphQL](https://graphql.org/) query, can be either a *query* (retrieval operation) or a *mutation* (creation/update/deletion operation). Placeholders may be used, which will be substituted by the `variables` object passed within the options.
-- `options`:
-
-| Option | Description| Required       | Default                                                                                        |
-| --------- | ----------------------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------------- |
-| `token`     | Access token for the API | Only on server | If not set, will use the credentials of the current user (client only) |
-| `variables` | An object containing GraphQL query variables                  | No             |        |
-
-Instead of passing the API token to the `api()` method on each request, you can set the API token once using:
-```js
-monday.setToken('mytoken')
-```
-
-**Returns:**
-
-A `Promise` that will be `resolved` to the API response.
-<br>If there was an unhandled GraphQL error in the API, a `Promise` will be `rejected` with an Error.
-In case of handled errors from GraphQL API (response with the 200 status), a `Promise` will be `resolved` with the API response.
-<br>You can check the list of GraphQL API errors [here](https://monday.com/developers/v2#errors-section).
-
-
-**Examples:**
-
-A **client-side** query that fetch the ID and name of all the users within the account that the connected user is allowed to view:
-```javascript
-monday.api(`query { users { id, name } }`).then(res => {
-  console.log(res);
-  /* { data: { users: [{id: 12312, name: "Bart Simpson"}, {id: 423423, name: "Homer Simpson"}] } } */
-});
-```
-A **server-side** query that fetches all the names of users in the account:
-```js
-monday.setToken('ac5eb492f8c...');
-monday.api('query { users { name } }').then(res => {...})
-```
-
-A mutation that sends an in-app notification to user `user_id`, which upon clicking will take the user to item `item_id`:
-```javascript
-monday.api(`
-  mutation {
-    create_notification(
-      text: "I've got a notification for you!",
-      user_id: ${user_id},
-      target_id: ${item_id},
-      target_type: Project,
-      internal: true
-    ) { 
-      id 
-    }
-  }
-`);
-```
-
-For more information about the GraphQL API and all queries and mutations possible, read the [API Documentation](https://monday.com/developers/v2)
-
-<br/>
-
-### **`monday.get(type, params = {})`**
-
-Used for retrieving data from the parent monday.com application where your app is currently running. This object can only be used  when your app is running inside an `iframe`. This can only be used in client-side apps.
-
-
-**Parameters:**
-
-- `type`: The type of requested information (available values below)
-- `params`: Reserved for future use
-
-The available types that can be requested are:
-| Type | Description |
-|--|--|
-| `'context'` | Information about where this app is currently displayed, depending on the type of feature |
-| `'settings'` | The application settings as configured by the user that installed the app |
-| `'itemIds'` | The list of item IDs that are filtered in the current board (or all items if no filters are applied) |
-| `'sessionToken'` | A JWT token which is decoded with your app's secret and can be used as a session token between your app's frontend & backend |
-| `'filter'` | The state of the _Search_ filter |
-
-**Returns:** 
-
-A `Promise` that will be resolved with the requested data.
-
-**Examples:**
-
-Requesting context and settings data:
-```js
-monday.get("settings").then(res => ...);
-monday.get("context").then(res => ...);
-```
-
-Example context objects that return for a board view and a dashboard widget:
-```js
-// Board view context
-{
-  "boardViewId": 19324,
-  "boardId": 3423243,
-  "mode": "fullScreen", // or "split"
-  "theme": "light"  // or "dark"
-}
-
-// Dashboard widget context
-{
-  "widgetId": 54236,
-  "boardIds": [3423243, 943728],
-  "theme": "light"  // or "dark"
-}
-```
-
-Requesting the list of items currently in view in the board:
-
-```js
-monday.get("itemIds").then(res => console.log(res));
-// => [234234, 4564, 234234, 67675, 576567]
-```
-
-<br/>
-
-### **`monday.set(type, params = {})`**
-
-Used for setting up data inside your application. This method can only be used when your app is running inside an `iframe`. This can only be used in client-side apps.
-
-
-**Parameters:**
-
-- `type`: The type of data that can be set (available values below)
-- `params`: Optional parameters for the action
-
-The available types that can be set are:
-| Type | Description |
-|--|--|
-| `'settings'` | The application settings as configured by the user that installed the app |
-
-**Returns:** 
-
-A `Promise` that will be `resolved` to the set method response.
-
-**Examples:**
-
-Setting application settings data:
-```js
-monday.set("settings").then(res => ...);
-```
-
-Example application settings object that we are able to set for a board view:
-```js
-// Board view settings example
-{
-  "text": "textual value",
-  "color": "#037f4c", 
-  "date": "2022-08-25"
-  "checkbox1": false
-  "textarea": "line1\nline2\n.....\nline n"
-}
-```
-<br/>
-
-### **`monday.listen(typeOrTypes, callback, params = {})`**
-
-Creates a listener which allows subscribing to certain types of client-side events.
-
-**Parameters:**
-
-- `typeOrTypes`: The type, or array of types, of events to subscribe to
-- `callback`: A callback function that is fired when the listener is triggered by a client-side event
-- `params`: Reserved for future use
-
-You can subscribe to the following types of events:
-| Type | Description |
-|--|--|
-| `'context'` | Fired when one of the parameters in the context changes |
-| `'settings'` | Fired when a setting value is changed by the user |
-| `'itemIds'` | Fired when the board filter changes, which impacts the list of items currently in view |
-| `'events'` | Fired when an interaction takes place with the board/dashboard |
-| `'filter'` | Fired when the _Search_ filter changes |
-
-**Returns:**
-
-This method does not have a return value.
-
-**Examples:**
-
-Subscribe to changes in settings and context:
-```js
-const callback = res => console.log(res);
-monday.listen(['settings', 'context'], callback);
-```
-
-Subscribe to interaction-based events on the board:
-```js
-const callback = res => console.log(res);
-const unsubscribe = monday.listen("events", callback);
-
-// When an item/s are created on the board:
-// => { type: "new_items", itemIds: [5543, 5544, 5545], boardId: 3425 }
-
-// When a column value changes for one of the items:
-// => { type: "change_column_value", itemId: 12342, value: {...} }
-```
-<br/>
-
-### **`monday.execute(type, params)`**
-Invokes an action on the parent monday client.
-
-**Parameters:**
-
-- `type`: Which action to perform
-- `params`: Optional parameters for the action
-
-**Returns:**
-
-A `Promise` that will optionally  be resolved to the return value from the action executed
-
-
-**Action types:**
-
-#### Open item card
-Opens a modal with information from the selected item
-
-**type**
-`'openItemCard'`
-
-**params**
-
-| Parameter|Type | Description | Required | Default Value |
-| --- | --- | --- | --- | --- |
-| itemId| Integer | The ID of the item to open | Yes | |
-|kind | String | On which view to open the item card. <br>Can be "updates" / "columns" | No |"columns" |
-
-**Example**
-```javascript
-monday.execute('openItemCard', { itemId: item.id });
-```
+## Docs
 
-#### Confirmation dialog
-Opens a confirmation dialog to the user
-**type**
-`'confirm'`
-
-**params**
-
-| Parameter|Type | Description | Required | Default Value |
-| --- |---|--- | --- | --- |
-| message|String | The message to display in the dialog| Yes | |
-|confirmButton|String| The text for the confirmation button | No |"OK" |
-|cancelButton|String| The text for the cancel button | No |"Cancel" |
-|excludeCancelButton|Boolean| Either to exclude the cancel button | No |false|
-
-**Example**
-```js
-monday.execute("confirm", {
-   message: "Are you sure?", 
-   confirmButton: "Let's go!", 
-   cancelButton: "No way", 
-   excludeCancelButton: false
-}).then((res) => {
-    console.log(res.data);
-    // {"confirm": true}
-});
-```
-
-#### Notice message 
-Display a message at the top of the user's page. Usefull for success, error & general messages.
-
-**type**
-`'notice'`
-
-**params**
-
-| Parameter|Type | Description | Required | Default Value |
-| --- |---|--- | --- | --- |
-| message|String | The message to display| Yes | |
-|type|String| The type of message to display . Can be "success" (green), "error" (red) or "info" (blue) | No |"info" |
-|timeout|Integer| The number of milliseconds to show the message until it closes | No | 5000 |
-
-**Example**
-```js
-monday.execute("notice", { 
-   message: "I'm a success message",
-   type: "success", // or "error" (red), or "info" (blue)
-   timeout: 10000,
-});
-```
-
-#### Open files preview dialog
-Opens a modal with the preview of an asset
-
-**type**
-`'openFilesDialog'`
-
-**params**
-
-| Parameter|Type | Description | Required | Default Value |
-| --- | --- | --- | --- | --- |
-| boardId| Integer | The ID of the board | Yes | |
-| itemId| Integer | The ID of the item, which contains an asset | Yes | |
-| columnId| String | The ID of the column, which contains an asset | Yes | |
-| assetId| Integer | The ID of the asset to open | Yes | |
-
-**Example**
-```javascript
-monday.execute('openFilesDialog', {
-  boardId: 12345,
-  itemId: 23456,
-  columnId: 'files',
-  assetId: 34567
-})
-```
-
-#### Trigger file upload process
-Opens a modal to let the current user upload a file to a specific file column. 
-
-Returns a promise. In case of error, the promise is rejected
-
-After the file is successfully uploaded, the "change_column_value" event will be triggered. 
-See the [`monday.listen`](#mondaylistentypeortypes-callback-params--)('events', callback) method to subscribe to these events.
-
-*Requires boards:write scope*
-
-**type**
-`'triggerFilesUpload'`
-
-**params**
-
-| Parameter|Type | Description | Required | Default Value |
-| --- | --- | --- | --- | --- |
-| boardId| Integer | The ID of the board | Yes | |
-| itemId| Integer | The ID of the item, which contains an asset | Yes | |
-| columnId| String | The ID of the file column, where file should be uploaded | Yes | |
-
-**Example**
-```javascript
-monday.execute('triggerFilesUpload', {
-  boardId: 12345,
-  itemId: 23456,
-  columnId: 'files'
-})
-```
-
-#### Open modal
-Opens a new modal window as an iFrame.
-
-**type**
-`'openAppFeatureModal'`
-
-**params**
-
-| Parameter|Type | Description | Required | Default Value |
-| --- | --- | --- | --- | --- |
-| url | String | The URL of the page displayed in the modal | No | current iFrame's URL |
-| urlPath | String | Subdirectory or path of the URL to open | No | |
-| urlParams | Object | Query parameters for the URL | No | |
-| width | String | The width of the modal | No | "0px" |
-| height | String | The height of the modal | No | "0px" |
-
-**Example**
-```javascript
-monday.execute('openAppFeatureModal', { urlPath, urlParams, height, width }).then((res) => {
-   console.log(res.data);
-   {"close": true}
-   // The above is a callback to see if a user closed the modal from the inside. This is useful should you want to run some logic within the app window. 
-});
-```
-
-Note: make sure the urlPath you pass is a relative URL and not an absolute URL. 
-
-#### Close modal
-Closes the modal window.
-
-**type**
-`'closeAppFeatureModal'`
-
-**params**
-This method does not have any parameters.
-
-**Example**
-```javascript
-monday.execute('closeAppFeatureModal').then((res) => {
-  console.log(res.data);
-});
-```
-
-#### Value created for user
-Notifies the monday platform that user gains a first value in an app.
-
-**type**
-`'value'`
-
-**params**
-This method does not have any parameters.
-
-**Example**
-```javascript
-monday.execute('valueCreatedForUser').then((res) => {
-  console.log(res.data);
-});
-```
-
-#### Open setting window
-Opens view settings window
-
-**type**
-`'value'`
-
-**params**
-This method does not have any parameters.
-
-**Example**
-```javascript
-monday.execute('openSettings').then((res) => {
-  console.log(res.data);
-  // note that method will open view settings, unless settings were alreday opened
-});
-```
-
-#### Close setting window
-Closes view settings window
-
-**type**
-`'value'`
-
-**params**
-This method does not have any parameters.
-
-**Example**
-```javascript
-monday.execute('closeSettings').then((res) => {
-  console.log(res.data);
-  // note that method will close view settings, unless settings were alreday closed
-});
-```
-
-### **`monday.oauth(options = {})`**
-Performs a client-side redirection of the user to the monday OAuth screen with your client ID embedded in the URL, in order to get their approval to generate a temporary OAuth token based on your requested permission scopes.
-
-**Parameters:**
-
-- `options`: An object with options as specified below
-
-| Option | Required |Description |
-|--|--|--|
-| `clientId` | No, defaults to your client ID | The OAuth client ID of the requesting application |
-| `mondayOauthUrl`| No | The URL of the monday OAuth endpoint |
-
-**Returns:**
-
-This method does not have a return value.
-
-<br/>
-
-### **`monday.storage`**
-Provides access to the Storage API. See below for methods and explanation.
-
-<br/>
-
-
-## Storage API (`monday.storage`)
-> The Storage API is in early beta stages, its API is likely to change
-
-The monday apps infrastructure includes a persistent, key-value database storage that developers can leverage to store data without having to create their own backend and maintain their own database.
-
-The database currently offers instance-level storage only, meaning that each application instance (i.e. a single board view or a dashboard widget) maintains its own storage. Apps cannot share storage across accounts or even across apps installed in the same location.
-
-**Available methods:**
-
-- `monday.storage.instance.getItem(key)` - Returns a stored value from the database under `key`
-- `monday.storage.instance.setItem(key, value)` - Stores `value` under `key` in the database
-<!-- - `monday.storage.instance.deleteItem(key)` - Deletes the value under `key` -->
-
-
-**Returns:**
-
-All methods return a `Promise` which will be resolved to the Storage API's response
-
-**Versioning:**
-
-You may face cases where multiple monday.com users will be working on the same app instance and writing to the same key in an unsynchronized fashion. If you're storing a compound data structure (like JSON) in that key, such operations may overwrite each other.
-
-The `getItem()` and `setItem()` each return a *version identifier* which can be used to identify which value is currently stored in a key. Whenever a write that changes the value occurs, the version identifier in the database changes. This allows you to identify whether a value was already changed from another location and prevent that from being overwritten.
-
-Example of using versioning:
-```js
-monday.storage.instance.getItem('serialKey').then(res => {
-  const { value, version } = res.data;
-  sleep(10000); // someone may overwrite serialKey during this time
-
-  monday.storage.instance.setItem('serialKey', { previous_version: version }).then(res => {
-    console.log(res);
-  }
-});
-// => '{ "success": false, "reason": "version_conflict" }'
-```
-
-**Examples:**
-
-Store a value in the database:
-```js
-monday.storage.instance.setItem('mykey', 'Lorem Ipsum').then(res => {
-  console.log(res);
-});
-// => { "success": true }
-```
-
-Retrieve a previously stored value in the database:
-```js
-monday.storage.instance.getItem('mykey').then(res => {
-   console.log(res.data.value);
-});
-// => 'Lorem Ipsum'
-```
-
-<!--
-Delete a previously stored key in the database:
-```js
-monday.storage.instance.deleteItem('mykey').then(res => {
-   console.log(res);
-}
-// => { "success": true }
-```
--->
+To get started, check out the [SDK Documentation](https://developer.monday.com/apps/docs/introduction-to-the-sdk)

package/dist/main.js

@@ -1 +1 @@
-!function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(e,t){const n="undefined"!=typeof window&&void 0!==window.document;e.exports={convertToArrayIfNeeded:e=>Array.isArray(e)?e:[e],isBrowser:n}},function(e,t,n){e.exports=n(5)},function(e,t,n){(function(t){const{isBrowser:r}=n(0),i=!r&&!1,o=i&&t.env.MONDAY_COM_PROTOCOL||"https",s=i&&t.env.MONDAY_COM_DOMAIN||"monday.com",a=`${o}://api.${s}/v2`,c=`${o}://auth.${s}/oauth2/authorize`,u=`${o}://auth.${s}/oauth2/token`;e.exports={MONDAY_DOMAIN:s,MONDAY_PROTOCOL:o,MONDAY_API_URL:a,MONDAY_OAUTH_URL:c,MONDAY_OAUTH_TOKEN_URL:u}}).call(this,n(6))},function(e,t,n){var r,i;const{isBrowser:o}=n(0),s=n(o?4:12);"undefined"!=typeof self&&self,void 0===(i="function"==typeof(r=function(){return window.mondaySdk=s,s})?r.call(t,n,t,e):r)||(e.exports=i)},function(e,t,n){const r=n(1),{MONDAY_OAUTH_URL:i}=n(2),{convertToArrayIfNeeded:o}=n(0),{initScrollHelperIfNeeded:s}=n(9),{initBackgroundTracking:a}=n(10),c=[];class u{constructor(e={}){this._clientId=e.clientId,this._apiToken=e.apiToken,this.listeners={},this.setClientId=this.setClientId.bind(this),this.setToken=this.setToken.bind(this),this.api=this.api.bind(this),this.listen=this.listen.bind(this),this.get=this.get.bind(this),this.set=this.set.bind(this),this.execute=this.execute.bind(this),this.oauth=this.oauth.bind(this),this._receiveMessage=this._receiveMessage.bind(this),this.storage={instance:{setItem:this.setStorageInstanceItem.bind(this),getItem:this.getStorageInstanceItem.bind(this),deleteItem:this.deleteStorageInstanceItem.bind(this)}},window.addEventListener("message",this._receiveMessage,!1),e.withoutScrollHelper||s(),a(this)}setClientId(e){this._clientId=e}setToken(e){this._apiToken=e}api(e,t={}){const n={query:e,variables:t.variables},i=t.token||this._apiToken;return i?r.execute(n,i):new Promise((e,t)=>{this._localApi("api",{params:n}).then(t=>{e(t.data)}).catch(e=>t(e))})}listen(e,t,n){o(e).forEach(e=>{this._addListener(e,t),this._localApi("listen",{type:e,params:n})})}get(e,t){return this._localApi("get",{type:e,params:t})}set(e,t){return this._localApi("set",{type:e,params:t})}execute(e,t){return this._localApi("execute",{type:e,params:t})}track(e,t){return this.execute("track",{name:e,data:t})}oauth(e={}){const t=e.clientId||this._clientId;if(!t)throw new Error("clientId is required");const n=`${e.mondayOauthUrl||i}?client_id=${t}`;window.location=n}setStorageInstanceItem(e,t,n={}){return this._localApi("storage",{method:"set",key:e,value:t,options:n,segment:"instance"})}getStorageInstanceItem(e,t={}){return this._localApi("storage",{method:"get",key:e,options:t,segment:"instance"})}deleteStorageInstanceItem(e,t={}){return this._localApi("storage",{method:"delete",key:e,options:t,segment:"instance"})}_localApi(e,t){return new Promise((r,i)=>{const o=this._generateRequestId(),s=this._clientId,a=n(11).version;window.parent.postMessage({method:e,args:t,requestId:o,clientId:s,version:a},"*"),this._addListener(o,e=>{if(e.errorMessage){const t=new Error(e.errorMessage);t.data=e.data,i(t)}else r(e)})})}_receiveMessage(e){const{method:t,type:n,requestId:r}=e.data;let i=[...this.listeners[t]||c,...this.listeners[n]||c,...this.listeners[r]||c];i&&i.forEach(t=>{try{t(e.data)}catch(e){console.error("Message callback error: ",e)}})}_addListener(e,t){this.listeners[e]=this.listeners[e]||[],this.listeners[e].push(t)}_generateRequestId(){return Math.random().toString(36).substr(2,9)}_removeEventListener(){window.removeEventListener("message",this._receiveMessage,!1)}_clearListeners(){this.listeners=[]}}e.exports=function(e={}){return new u(e)}},function(e,t,n){const{MONDAY_API_URL:r,MONDAY_OAUTH_TOKEN_URL:i}=n(2),o=n(7),s="Could not parse JSON from monday.com's GraphQL API response",a="Token is required",c="Received timeout from monday.com's GraphQL API";e.exports={execute:async function(e,t,n={}){if(!t&&n.url!==i)throw new Error(a);const u=`${n.url||r}${n.path||""}`;let l=await function(e,t,n,r={}){return o.nodeFetch(e,{method:r.method||"POST",body:JSON.stringify(t||{}),headers:{Authorization:n,"Content-Type":"application/json"}})}(u,e,t,n);const d=l.status,h=l.headers.get("content-type");if(!h||!h.includes("application/json")){if(504===d)throw new Error(c);const e=await l.text();throw new Error(e)}try{return await l.json()}catch(e){throw new Error(s)}},COULD_NOT_PARSE_JSON_RESPONSE_ERROR:s,TOKEN_IS_REQUIRED_ERROR:a,API_TIMEOUT_ERROR:c}},function(e,t){var n,r,i=e.exports={};function o(){throw new Error("setTimeout has not been defined")}function s(){throw new Error("clearTimeout has not been defined")}function a(e){if(n===setTimeout)return setTimeout(e,0);if((n===o||!n)&&setTimeout)return n=setTimeout,setTimeout(e,0);try{return n(e,0)}catch(t){try{return n.call(null,e,0)}catch(t){return n.call(this,e,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:o}catch(e){n=o}try{r="function"==typeof clearTimeout?clearTimeout:s}catch(e){r=s}}();var c,u=[],l=!1,d=-1;function h(){l&&c&&(l=!1,c.length?u=c.concat(u):d=-1,u.length&&p())}function p(){if(!l){var e=a(h);l=!0;for(var t=u.length;t;){for(c=u,u=[];++d<t;)c&&c[d].run();d=-1,t=u.length}c=null,l=!1,function(e){if(r===clearTimeout)return clearTimeout(e);if((r===s||!r)&&clearTimeout)return r=clearTimeout,clearTimeout(e);try{r(e)}catch(t){try{return r.call(null,e)}catch(t){return r.call(this,e)}}}(e)}}function f(e,t){this.fun=e,this.array=t}function m(){}i.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];u.push(new f(e,t)),1!==u.length||l||a(p)},f.prototype.run=function(){this.fun.apply(null,this.array)},i.title="browser",i.browser=!0,i.env={},i.argv=[],i.version="",i.versions={},i.on=m,i.addListener=m,i.once=m,i.off=m,i.removeListener=m,i.removeAllListeners=m,i.emit=m,i.prependListener=m,i.prependOnceListener=m,i.listeners=function(e){return[]},i.binding=function(e){throw new Error("process.binding is not supported")},i.cwd=function(){return"/"},i.chdir=function(e){throw new Error("process.chdir is not supported")},i.umask=function(){return 0}},function(e,t,n){const r=n(8);e.exports={nodeFetch:function(e,t={}){return r(e,t)}}},function(e,t,n){"use strict";var r=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if(void 0!==r)return r;throw new Error("unable to locate global object")}();e.exports=t=r.fetch,t.default=r.fetch.bind(r),t.Headers=r.Headers,t.Request=r.Request,t.Response=r.Response},function(e,t){let n=!1;e.exports={initScrollHelperIfNeeded:function(){if(n)return;n=!0;const e=document.createElement("style");e.appendChild(document.createTextNode('body::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 2147483647; /* mondaySdk css - can be disabled with: mondaySdk({withoutScrollHelper: true }) */ }')),(document.head||document.getElementsByTagName("head")[0]).appendChild(e)}}},function(e,t){let n=!1;e.exports={initBackgroundTracking:e=>{if(n)return;n=!0;const t=()=>{e.track("ping")};t(),setInterval(t,3e5)}}},function(e){e.exports=JSON.parse('{"name":"monday-sdk-js","version":"0.1.3","private":false,"repository":"https://github.com/mondaycom/monday-sdk-js","main":"src/index.js","author":"talharamati <tal@monday.com>","license":"MIT","files":["LICENSE","README.md","dist/","src/","server-sdk.js"],"dependencies":{"@types/source-map":"^0.5.2","node-fetch":"^2.6.0"},"devDependencies":{"@babel/cli":"^7.6.0","@babel/core":"^7.6.0","@babel/node":"^7.6.1","@babel/preset-env":"^7.6.0","@babel/preset-react":"^7.0.0","@babel/register":"^7.6.0","babel-loader":"^8.0.6","chai":"^4.2.0","eslint":"^6.8.0","jsdom":"^16.2.0","mocha":"^7.1.0","prettier":"^1.19.1","sinon":"^9.0.0","sinon-chai":"^3.5.0","webpack":"^4.38.0","webpack-cli":"^3.3.6","webpack-dev-server":"^3.7.2"},"scripts":{"start":"webpack-dev-server","build":"webpack --mode=production --env.WEBPACK_BUILD=true","test":"mocha \'./src/**/*-test.js\'","test:watch":"mocha \'./src/**/*-test.js\' --watch","precommit":"yarn lint && yarn style-check","lint":"eslint \'./src/**/*.*\'","style-check":"prettier --check \'./src/**/*.js\'"}}')},function(e,t,n){const r=n(1),{oauthToken:i}=n(13),o="Should send 'token' as an option or call mondaySdk.setToken(TOKEN)";class s{constructor(e={}){this._token=e.token,this.setToken=this.setToken.bind(this),this.api=this.api.bind(this)}setToken(e){this._token=e}async api(e,t={}){const n={query:e,variables:t.variables},i=t.token||this._token;if(!i)throw new Error(o);return await r.execute(n,i)}oauthToken(e,t,n){return i(e,t,n)}}e.exports=function(e={}){return new s(e)}},function(e,t,n){const{execute:r}=n(1),{MONDAY_OAUTH_TOKEN_URL:i}=n(2);e.exports={oauthToken:(e,t,n)=>{return r({code:e,client_id:t,client_secret:n},null,{url:i})}}}]);
+!function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(e,t){const n="undefined"!=typeof window&&void 0!==window.document;e.exports={convertToArrayIfNeeded:e=>Array.isArray(e)?e:[e],isBrowser:n}},function(e,t,n){e.exports=n(5)},function(e,t,n){(function(t){const{isBrowser:r}=n(0),i=!r&&!1,o=i&&t.env.MONDAY_COM_PROTOCOL||"https",s=i&&t.env.MONDAY_COM_DOMAIN||"monday.com",a=`${o}://api.${s}/v2`,c=`${o}://auth.${s}/oauth2/authorize`,u=`${o}://auth.${s}/oauth2/token`;e.exports={MONDAY_DOMAIN:s,MONDAY_PROTOCOL:o,MONDAY_API_URL:a,MONDAY_OAUTH_URL:c,MONDAY_OAUTH_TOKEN_URL:u}}).call(this,n(6))},function(e,t,n){var r,i;const{isBrowser:o}=n(0),s=n(o?4:12);"undefined"!=typeof self&&self,void 0===(i="function"==typeof(r=function(){return window.mondaySdk=s,s})?r.call(t,n,t,e):r)||(e.exports=i)},function(e,t,n){const r=n(1),{MONDAY_OAUTH_URL:i}=n(2),{convertToArrayIfNeeded:o}=n(0),{initScrollHelperIfNeeded:s}=n(9),{initBackgroundTracking:a}=n(10),c=[];class u{constructor(e={}){this._clientId=e.clientId,this._apiToken=e.apiToken,this.listeners={},this.setClientId=this.setClientId.bind(this),this.setToken=this.setToken.bind(this),this.api=this.api.bind(this),this.listen=this.listen.bind(this),this.get=this.get.bind(this),this.set=this.set.bind(this),this.execute=this.execute.bind(this),this.oauth=this.oauth.bind(this),this._receiveMessage=this._receiveMessage.bind(this),this.storage={instance:{setItem:this.setStorageInstanceItem.bind(this),getItem:this.getStorageInstanceItem.bind(this),deleteItem:this.deleteStorageInstanceItem.bind(this)}},window.addEventListener("message",this._receiveMessage,!1),e.withoutScrollHelper||s(),a(this)}setClientId(e){this._clientId=e}setToken(e){this._apiToken=e}api(e,t={}){const n={query:e,variables:t.variables},i=t.token||this._apiToken;return i?r.execute(n,i):new Promise((e,t)=>{this._localApi("api",{params:n}).then(t=>{e(t.data)}).catch(e=>t(e))})}listen(e,t,n){const r=o(e),i=[];return r.forEach(e=>{i.push(this._addListener(e,t)),this._localApi("listen",{type:e,params:n})}),()=>{i.forEach(e=>e())}}get(e,t){return this._localApi("get",{type:e,params:t})}set(e,t){return this._localApi("set",{type:e,params:t})}execute(e,t){return this._localApi("execute",{type:e,params:t})}track(e,t){return this.execute("track",{name:e,data:t})}oauth(e={}){const t=e.clientId||this._clientId;if(!t)throw new Error("clientId is required");const n=`${e.mondayOauthUrl||i}?client_id=${t}`;window.location=n}setStorageInstanceItem(e,t,n={}){return this._localApi("storage",{method:"set",key:e,value:t,options:n,segment:"instance"})}getStorageInstanceItem(e,t={}){return this._localApi("storage",{method:"get",key:e,options:t,segment:"instance"})}deleteStorageInstanceItem(e,t={}){return this._localApi("storage",{method:"delete",key:e,options:t,segment:"instance"})}_localApi(e,t){return new Promise((r,i)=>{const o=this._generateRequestId(),s=this._clientId,a=n(11).version;window.parent.postMessage({method:e,args:t,requestId:o,clientId:s,version:a},"*");const c=this._addListener(o,e=>{if(c(),e.errorMessage){const t=new Error(e.errorMessage);t.data=e.data,i(t)}else r(e)})})}_receiveMessage(e){const{method:t,type:n,requestId:r}=e.data,i=this.listeners[t]||c,o=this.listeners[n]||c,s=this.listeners[r]||c;let a=new Set([...i,...o,...s]);a&&a.forEach(t=>{try{t(e.data)}catch(e){console.error("Message callback error: ",e)}})}_addListener(e,t){return this.listeners[e]=this.listeners[e]||new Set,this.listeners[e].add(t),()=>{this.listeners[e].delete(t),0===this.listeners[e].size&&delete this.listeners[e]}}_generateRequestId(){return Math.random().toString(36).substring(2,9)}_removeEventListener(){window.removeEventListener("message",this._receiveMessage,!1)}_clearListeners(){this.listeners=[]}}e.exports=function(e={}){return new u(e)}},function(e,t,n){const{MONDAY_API_URL:r,MONDAY_OAUTH_TOKEN_URL:i}=n(2),o=n(7);e.exports={execute:async function(e,t,n={}){if(!t&&n.url!==i)throw new Error("Token is required");const s=`${n.url||r}${n.path||""}`;let a=await function(e,t,n,r={}){return o.nodeFetch(e,{method:r.method||"POST",body:JSON.stringify(t||{}),headers:{Authorization:n,"Content-Type":"application/json"}})}(s,e,t,n);const c=a.status,u=a.headers.get("content-type");if(!u||!u.includes("application/json")){if(504===c)throw new Error("Received timeout from monday.com's GraphQL API");const e=await a.text();throw new Error(e)}try{return await a.json()}catch(e){throw new Error("Could not parse JSON from monday.com's GraphQL API response")}},COULD_NOT_PARSE_JSON_RESPONSE_ERROR:"Could not parse JSON from monday.com's GraphQL API response",TOKEN_IS_REQUIRED_ERROR:"Token is required",API_TIMEOUT_ERROR:"Received timeout from monday.com's GraphQL API"}},function(e,t){var n,r,i=e.exports={};function o(){throw new Error("setTimeout has not been defined")}function s(){throw new Error("clearTimeout has not been defined")}function a(e){if(n===setTimeout)return setTimeout(e,0);if((n===o||!n)&&setTimeout)return n=setTimeout,setTimeout(e,0);try{return n(e,0)}catch(t){try{return n.call(null,e,0)}catch(t){return n.call(this,e,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:o}catch(e){n=o}try{r="function"==typeof clearTimeout?clearTimeout:s}catch(e){r=s}}();var c,u=[],l=!1,d=-1;function h(){l&&c&&(l=!1,c.length?u=c.concat(u):d=-1,u.length&&p())}function p(){if(!l){var e=a(h);l=!0;for(var t=u.length;t;){for(c=u,u=[];++d<t;)c&&c[d].run();d=-1,t=u.length}c=null,l=!1,function(e){if(r===clearTimeout)return clearTimeout(e);if((r===s||!r)&&clearTimeout)return r=clearTimeout,clearTimeout(e);try{r(e)}catch(t){try{return r.call(null,e)}catch(t){return r.call(this,e)}}}(e)}}function f(e,t){this.fun=e,this.array=t}function m(){}i.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];u.push(new f(e,t)),1!==u.length||l||a(p)},f.prototype.run=function(){this.fun.apply(null,this.array)},i.title="browser",i.browser=!0,i.env={},i.argv=[],i.version="",i.versions={},i.on=m,i.addListener=m,i.once=m,i.off=m,i.removeListener=m,i.removeAllListeners=m,i.emit=m,i.prependListener=m,i.prependOnceListener=m,i.listeners=function(e){return[]},i.binding=function(e){throw new Error("process.binding is not supported")},i.cwd=function(){return"/"},i.chdir=function(e){throw new Error("process.chdir is not supported")},i.umask=function(){return 0}},function(e,t,n){const r=n(8);e.exports={nodeFetch:function(e,t={}){return r(e,t)}}},function(e,t,n){"use strict";var r=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if(void 0!==r)return r;throw new Error("unable to locate global object")}();e.exports=t=r.fetch,t.default=r.fetch.bind(r),t.Headers=r.Headers,t.Request=r.Request,t.Response=r.Response},function(e,t){let n=!1;e.exports={initScrollHelperIfNeeded:function(){if(n)return;n=!0;const e=document.createElement("style");e.appendChild(document.createTextNode('body::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 2147483647; /* mondaySdk css - can be disabled with: mondaySdk({withoutScrollHelper: true }) */ }')),(document.head||document.getElementsByTagName("head")[0]).appendChild(e)}}},function(e,t){let n=!1;e.exports={initBackgroundTracking:e=>{if(n)return;n=!0;const t=()=>{e.track("ping")};t(),setInterval(t,3e5)}}},function(e){e.exports=JSON.parse('{"name":"monday-sdk-js","version":"0.1.6","private":false,"repository":"https://github.com/mondaycom/monday-sdk-js","main":"src/index.js","author":"talharamati <tal@monday.com>","license":"MIT","files":["LICENSE","README.md","dist/","src/","server-sdk.js"],"dependencies":{"@types/source-map":"^0.5.2","node-fetch":"^2.6.0"},"devDependencies":{"@babel/cli":"^7.6.0","@babel/core":"^7.6.0","@babel/node":"^7.6.1","@babel/preset-env":"^7.6.0","@babel/preset-react":"^7.0.0","@babel/register":"^7.6.0","babel-loader":"^8.0.6","chai":"^4.2.0","eslint":"^6.8.0","jsdom":"^16.2.0","mocha":"^7.1.0","prettier":"^1.19.1","sinon":"^9.0.0","sinon-chai":"^3.5.0","webpack":"^4.38.0","webpack-cli":"^3.3.6","webpack-dev-server":"^3.7.2"},"scripts":{"start":"webpack-dev-server","build":"webpack --mode=production --env.WEBPACK_BUILD=true","test":"mocha \'./src/**/*-test.js\'","test:watch":"mocha \'./src/**/*-test.js\' --watch","precommit":"yarn lint && yarn style-check","lint":"eslint \'./src/**/*.*\'","style-check":"prettier --check \'./src/**/*.js\'"}}')},function(e,t,n){const r=n(1),{oauthToken:i}=n(13);class o{constructor(e={}){this._token=e.token,this.setToken=this.setToken.bind(this),this.api=this.api.bind(this)}setToken(e){this._token=e}async api(e,t={}){const n={query:e,variables:t.variables},i=t.token||this._token;if(!i)throw new Error("Should send 'token' as an option or call mondaySdk.setToken(TOKEN)");return await r.execute(n,i)}oauthToken(e,t,n){return i(e,t,n)}}e.exports=function(e={}){return new o(e)}},function(e,t,n){const{execute:r}=n(1),{MONDAY_OAUTH_TOKEN_URL:i}=n(2);e.exports={oauthToken:(e,t,n)=>r({code:e,client_id:t,client_secret:n},null,{url:i})}}]);

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "monday-sdk-js",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "private": false,
   "repository": "https://github.com/mondaycom/monday-sdk-js",
   "main": "src/index.js",
+  "types": "types/index.d.ts",
   "author": "talharamati <tal@monday.com>",
   "license": "MIT",
   "files": [
@@ -14,7 +15,6 @@
     "server-sdk.js"
   ],
   "dependencies": {
-    "@types/source-map": "^0.5.2",
     "node-fetch": "^2.6.0"
   },
   "devDependencies": {
@@ -34,7 +34,9 @@
     "sinon-chai": "^3.5.0",
     "webpack": "^4.38.0",
     "webpack-cli": "^3.3.6",
-    "webpack-dev-server": "^3.7.2"
+    "webpack-dev-server": "^3.7.2",
+    "@types/source-map": "^0.5.2",
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "start": "webpack-dev-server",
@@ -43,6 +45,7 @@
     "test:watch": "mocha './src/**/*-test.js' --watch",
     "precommit": "yarn lint && yarn style-check",
     "lint": "eslint './src/**/*.*'",
-    "style-check": "prettier --check './src/**/*.js'"
+    "style-check": "prettier --check './src/**/*.js'",
+    "compile-types": "tsc --noEmit"
   }
 }

package/src/client-test.js

@@ -87,6 +87,22 @@ describe("Monday Client Test", () => {
       clock.tick(5);
       expect(listenCallback).to.be.calledWithExactly(data);
     });
+
+    it("unsubscribe should prevent callback being called", () => {
+      const data = {
+        method: "method",
+        type,
+        requestId: "requestId"
+      };
+      const unsubscribe = mondayClient.listen(type, listenCallback);
+      window.postMessage(data, "*");
+      window.postMessage(data, "*");
+      window.postMessage(data, "*");
+      clock.tick(5);
+      unsubscribe();
+      window.postMessage(data, "*");
+      expect(listenCallback).to.be.calledWithExactly(data).and.calledThrice;
+    });
   });
   describe("api methods", () => {
     let postMessageStub;
@@ -105,17 +121,6 @@ describe("Monday Client Test", () => {
       expect(postMessageStub).to.be.called;
       window.removeEventListener("message", postMessageStub, false);
     });
-    it("should add a listener to the listener array with the key of ", () => {
-      let requestId;
-      function onPostMessage(event) {
-        requestId = event.data.requestId;
-      }
-      window.addEventListener("message", onPostMessage, false);
-      mondayClient.api("query");
-      clock.tick(5);
-      expect(mondayClient.listeners[requestId]).to.be.ok;
-      window.removeEventListener("message", onPostMessage, false);
-    });
 
     it("get api post message", () => {
       window.addEventListener("message", postMessageStub, false);

package/src/client.js

@@ -64,11 +64,16 @@ class MondayClientSdk {
 
   listen(typeOrTypes, callback, params) {
     const types = convertToArrayIfNeeded(typeOrTypes);
+    const unsubscribes = [];
+
     types.forEach(type => {
-      this._addListener(type, callback);
+      unsubscribes.push(this._addListener(type, callback));
       this._localApi("listen", { type, params });
     });
-    // todo uniq listeners, remove listener
+
+    return () => {
+      unsubscribes.forEach(unsubscribe => unsubscribe());
+    };
   }
 
   get(type, params) {
@@ -117,7 +122,8 @@ class MondayClientSdk {
       const version = pjson.version;
 
       window.parent.postMessage({ method, args, requestId, clientId, version }, "*");
-      this._addListener(requestId, data => {
+      const removeListener = this._addListener(requestId, data => {
+        removeListener();
         if (data.errorMessage) {
           const error = new Error(data.errorMessage);
           error.data = data.data;
@@ -134,7 +140,7 @@ class MondayClientSdk {
     const methodListeners = this.listeners[method] || EMPTY_ARRAY;
     const typeListeners = this.listeners[type] || EMPTY_ARRAY;
     const requestIdListeners = this.listeners[requestId] || EMPTY_ARRAY;
-    let listeners = [...methodListeners, ...typeListeners, ...requestIdListeners];
+    let listeners = new Set([...methodListeners, ...typeListeners, ...requestIdListeners]);
 
     if (listeners) {
       listeners.forEach(listener => {
@@ -148,14 +154,21 @@ class MondayClientSdk {
   }
 
   _addListener(key, callback) {
-    this.listeners[key] = this.listeners[key] || [];
-    this.listeners[key].push(callback);
+    this.listeners[key] = this.listeners[key] || new Set();
+    this.listeners[key].add(callback);
+
+    return () => {
+      this.listeners[key].delete(callback);
+      if (this.listeners[key].size === 0) {
+        delete this.listeners[key];
+      }
+    };
   }
 
   _generateRequestId() {
     return Math.random()
       .toString(36)
-      .substr(2, 9);
+      .substring(2, 9);
   }
 
   _removeEventListener() {