monday-sdk-js 0.1.3 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -419
- package/dist/main.js +1 -1
- package/package.json +1 -1
- package/src/client-test.js +16 -11
- package/src/client.js +25 -7
package/README.md
CHANGED
|
@@ -13,18 +13,6 @@ The monday.com SDK provides a toolset for application developers to build featur
|
|
|
13
13
|
|
|
14
14
|
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.
|
|
15
15
|
|
|
16
|
-
## Table of contents
|
|
17
|
-
- [Usage](#usage)
|
|
18
|
-
- [Seamless authentication](#seamless-authentication)
|
|
19
|
-
- [SDK capabilities](#sdk-capabilities)
|
|
20
|
-
- [`monday.api`](#mondayapiquery-options--)
|
|
21
|
-
- [`monday.get`](#mondaygettype-params--)
|
|
22
|
-
- [`monday.listen`](#mondaylistentypeortypes-callback-params--)
|
|
23
|
-
- [`monday.execute`](#mondayexecutetype-params)
|
|
24
|
-
- [`monday.oauth`](#mondayoauthoptions--)
|
|
25
|
-
- [`monday.storage`](#mondaystorage)
|
|
26
|
-
- [Storage API](#storage-api-mondaystorage)
|
|
27
|
-
|
|
28
16
|
## Usage
|
|
29
17
|
|
|
30
18
|
### Using as an `npm` module
|
|
@@ -52,411 +40,6 @@ and then initialize the SDK anywhere in the page by declaring:
|
|
|
52
40
|
const monday = window.mondaySdk()
|
|
53
41
|
```
|
|
54
42
|
|
|
55
|
-
##
|
|
56
|
-
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.
|
|
57
|
-
|
|
58
|
-
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.
|
|
59
|
-
|
|
60
|
-
## SDK capabilities
|
|
61
|
-
|
|
62
|
-
The SDK exposes the following capabilities:
|
|
63
|
-
|
|
64
|
-
| SDK Object | Capability |
|
|
65
|
-
|--|--|
|
|
66
|
-
| `monday.api` | Performing queries against the monday.com API on behalf of the connected user |
|
|
67
|
-
| `monday.listen` | Listen to client-side events on the monday.com client running this app |
|
|
68
|
-
| `monday.get` | Retrieve information from the monday.com client running this app |
|
|
69
|
-
| `monday.execute` | Call an action on the monday.com client running this app |
|
|
70
|
-
| `monday.storage` | Read/write to the Storage API, a key-value storage service for apps |
|
|
71
|
-
| `monday.oauth` | Redirecting the client to the OAuth authorization server, with your client ID included |
|
|
72
|
-
|
|
73
|
-
<br/>
|
|
74
|
-
|
|
75
|
-
### **`monday.api(query, options = {})`**
|
|
76
|
-
Used for querying the monday.com GraphQL API seamlessly on behalf of the connected user, or using a provided API token.
|
|
77
|
-
|
|
78
|
-
**Parameters:**
|
|
79
|
-
|
|
80
|
-
- `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.
|
|
81
|
-
- `options`:
|
|
82
|
-
|
|
83
|
-
| Option | Description| Required | Default |
|
|
84
|
-
| --------- | ----------------------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------------- |
|
|
85
|
-
| `token` | Access token for the API | Only on server | If not set, will use the credentials of the current user (client only) |
|
|
86
|
-
| `variables` | An object containing GraphQL query variables | No | |
|
|
87
|
-
|
|
88
|
-
Instead of passing the API token to the `api()` method on each request, you can set the API token once using:
|
|
89
|
-
```js
|
|
90
|
-
monday.setToken('mytoken')
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
**Returns:**
|
|
94
|
-
|
|
95
|
-
A `Promise` that will be `resolved` to the API response.
|
|
96
|
-
<br>If there was an unhandled GraphQL error in the API, a `Promise` will be `rejected` with an Error.
|
|
97
|
-
In case of handled errors from GraphQL API (response with the 200 status), a `Promise` will be `resolved` with the API response.
|
|
98
|
-
<br>You can check the list of GraphQL API errors [here](https://monday.com/developers/v2#errors-section).
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
**Examples:**
|
|
102
|
-
|
|
103
|
-
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:
|
|
104
|
-
```javascript
|
|
105
|
-
monday.api(`query { users { id, name } }`).then(res => {
|
|
106
|
-
console.log(res);
|
|
107
|
-
/* { data: { users: [{id: 12312, name: "Bart Simpson"}, {id: 423423, name: "Homer Simpson"}] } } */
|
|
108
|
-
});
|
|
109
|
-
```
|
|
110
|
-
A **server-side** query that fetches all the names of users in the account:
|
|
111
|
-
```js
|
|
112
|
-
monday.setToken('ac5eb492f8c...');
|
|
113
|
-
monday.api('query { users { name } }').then(res => {...})
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
A mutation that sends an in-app notification to user `user_id`, which upon clicking will take the user to item `item_id`:
|
|
117
|
-
```javascript
|
|
118
|
-
monday.api(`
|
|
119
|
-
mutation {
|
|
120
|
-
create_notification(
|
|
121
|
-
text: "I've got a notification for you!",
|
|
122
|
-
user_id: ${user_id},
|
|
123
|
-
target_id: ${item_id},
|
|
124
|
-
target_type: Project,
|
|
125
|
-
internal: true
|
|
126
|
-
) {
|
|
127
|
-
id
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
`);
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
For more information about the GraphQL API and all queries and mutations possible, read the [API Documentation](https://monday.com/developers/v2)
|
|
134
|
-
|
|
135
|
-
<br/>
|
|
136
|
-
|
|
137
|
-
### **`monday.get(type, params = {})`**
|
|
138
|
-
|
|
139
|
-
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.
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
**Parameters:**
|
|
143
|
-
|
|
144
|
-
- `type`: The type of requested information (available values below)
|
|
145
|
-
- `params`: Reserved for future use
|
|
146
|
-
|
|
147
|
-
The available types that can be requested are:
|
|
148
|
-
| Type | Description |
|
|
149
|
-
|--|--|
|
|
150
|
-
| `'context'` | Information about where this app is currently displayed, depending on the type of feature |
|
|
151
|
-
| `'settings'` | The application settings as configured by the user that installed the app |
|
|
152
|
-
| `'itemIds'` | The list of item IDs that are filtered in the current board (or all items if no filters are applied) |
|
|
153
|
-
| `'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 |
|
|
154
|
-
|
|
155
|
-
**Returns:**
|
|
156
|
-
|
|
157
|
-
A `Promise` that will be resolved with the requested data.
|
|
158
|
-
|
|
159
|
-
**Examples:**
|
|
160
|
-
|
|
161
|
-
Requesting context and settings data:
|
|
162
|
-
```js
|
|
163
|
-
monday.get("settings").then(res => ...);
|
|
164
|
-
monday.get("context").then(res => ...);
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
Example context objects that return for a board view and a dashboard widget:
|
|
168
|
-
```js
|
|
169
|
-
// Board view context
|
|
170
|
-
{
|
|
171
|
-
"boardViewId": 19324,
|
|
172
|
-
"boardId": 3423243,
|
|
173
|
-
"mode": "fullScreen", // or "split"
|
|
174
|
-
"theme": "light" // or "dark"
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
// Dashboard widget context
|
|
178
|
-
{
|
|
179
|
-
"widgetId": 54236,
|
|
180
|
-
"boardIds": [3423243, 943728],
|
|
181
|
-
"theme": "light" // or "dark"
|
|
182
|
-
}
|
|
183
|
-
```
|
|
184
|
-
|
|
185
|
-
Requesting the list of items currently in view in the board:
|
|
186
|
-
|
|
187
|
-
```js
|
|
188
|
-
monday.get("itemIds").then(res => console.log(res));
|
|
189
|
-
// => [234234, 4564, 234234, 67675, 576567]
|
|
190
|
-
```
|
|
191
|
-
<br/>
|
|
192
|
-
|
|
193
|
-
### **`monday.listen(typeOrTypes, callback, params = {})`**
|
|
194
|
-
|
|
195
|
-
Creates a listener which allows subscribing to certain types of client-side events.
|
|
196
|
-
|
|
197
|
-
**Parameters:**
|
|
198
|
-
|
|
199
|
-
- `typeOrTypes`: The type, or array of types, of events to subscribe to
|
|
200
|
-
- `callback`: A callback function that is fired when the listener is triggered by a client-side event
|
|
201
|
-
- `params`: Reserved for future use
|
|
202
|
-
|
|
203
|
-
You can subscribe to the following types of events:
|
|
204
|
-
| Type | Description |
|
|
205
|
-
|--|--|
|
|
206
|
-
| `'context'` | Fired when one of the parameters in the context changes |
|
|
207
|
-
| `'settings'` | Fired when a setting value is changed by the user |
|
|
208
|
-
| `'itemIds'` | Fired when the board filter changes, which impacts the list of items currently in view |
|
|
209
|
-
| `'events'` | Fired when an interaction takes place with the board/dashboard |
|
|
210
|
-
|
|
211
|
-
**Returns:**
|
|
212
|
-
|
|
213
|
-
This method does not have a return value.
|
|
214
|
-
|
|
215
|
-
**Examples:**
|
|
216
|
-
|
|
217
|
-
Subscribe to changes in settings and context:
|
|
218
|
-
```js
|
|
219
|
-
const callback = res => console.log(res);
|
|
220
|
-
monday.listen(['settings', 'context'], callback);
|
|
221
|
-
```
|
|
222
|
-
|
|
223
|
-
Subscribe to interaction-based events on the board:
|
|
224
|
-
```js
|
|
225
|
-
const callback = res => console.log(res);
|
|
226
|
-
const unsubscribe = monday.listen("events", callback);
|
|
227
|
-
|
|
228
|
-
// When an item/s are created on the board:
|
|
229
|
-
// => { type: "new_items", itemIds: [5543, 5544, 5545], boardId: 3425 }
|
|
230
|
-
|
|
231
|
-
// When a column value changes for one of the items:
|
|
232
|
-
// => { type: "change_column_value", itemId: 12342, value: {...} }
|
|
233
|
-
```
|
|
234
|
-
<br/>
|
|
235
|
-
|
|
236
|
-
### **`monday.execute(type, params)`**
|
|
237
|
-
Invokes an action on the parent monday client.
|
|
238
|
-
|
|
239
|
-
**Parameters:**
|
|
240
|
-
|
|
241
|
-
- `type`: Which action to perform
|
|
242
|
-
- `params`: Optional parameters for the action
|
|
243
|
-
|
|
244
|
-
**Returns:**
|
|
245
|
-
|
|
246
|
-
A `Promise` that will optionally be resolved to the return value from the action executed
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
**Action types:**
|
|
250
|
-
|
|
251
|
-
#### Open item card
|
|
252
|
-
Opens a modal with information from the selected item
|
|
43
|
+
## Docs
|
|
253
44
|
|
|
254
|
-
|
|
255
|
-
`'openItemCard'`
|
|
256
|
-
|
|
257
|
-
**params**
|
|
258
|
-
|
|
259
|
-
| Parameter|Type | Description | Required | Default Value |
|
|
260
|
-
| --- | --- | --- | --- | --- |
|
|
261
|
-
| itemId| Integer | The ID of the item to open | Yes | |
|
|
262
|
-
|kind | String | On which view to open the item card. <br>Can be "updates" / "columns" | No |"columns" |
|
|
263
|
-
|
|
264
|
-
**Example**
|
|
265
|
-
```javascript
|
|
266
|
-
monday.execute('openItemCard', { itemId: item.id });
|
|
267
|
-
```
|
|
268
|
-
|
|
269
|
-
#### Confirmation dialog
|
|
270
|
-
Opens a confirmation dialog to the user
|
|
271
|
-
**type**
|
|
272
|
-
`'confirm'`
|
|
273
|
-
|
|
274
|
-
**params**
|
|
275
|
-
|
|
276
|
-
| Parameter|Type | Description | Required | Default Value |
|
|
277
|
-
| --- |---|--- | --- | --- |
|
|
278
|
-
| message|String | The message to display in the dialog| Yes | |
|
|
279
|
-
|confirmButton|String| The text for the confirmation button | No |"OK" |
|
|
280
|
-
|cancelButton|String| The text for the cancel button | No |"Cancel" |
|
|
281
|
-
|excludeCancelButton|Boolean| Either to exclude the cancel button | No |false|
|
|
282
|
-
|
|
283
|
-
**Example**
|
|
284
|
-
```js
|
|
285
|
-
monday.execute("confirm", {
|
|
286
|
-
message: "Are you sure?",
|
|
287
|
-
confirmButton: "Let's go!",
|
|
288
|
-
cancelButton: "No way",
|
|
289
|
-
excludeCancelButton: false
|
|
290
|
-
}).then((res) => {
|
|
291
|
-
console.log(res.data);
|
|
292
|
-
// {"confirm": true}
|
|
293
|
-
});
|
|
294
|
-
```
|
|
295
|
-
|
|
296
|
-
#### Notice message
|
|
297
|
-
Display a message at the top of the user's page. Usefull for success, error & general messages.
|
|
298
|
-
|
|
299
|
-
**type**
|
|
300
|
-
`'notice'`
|
|
301
|
-
|
|
302
|
-
**params**
|
|
303
|
-
|
|
304
|
-
| Parameter|Type | Description | Required | Default Value |
|
|
305
|
-
| --- |---|--- | --- | --- |
|
|
306
|
-
| message|String | The message to display| Yes | |
|
|
307
|
-
|type|String| The type of message to display . Can be "success" (green), "error" (red) or "info" (blue) | No |"info" |
|
|
308
|
-
|timeout|Integer| The number of milliseconds to show the message until it closes | No | 5000 |
|
|
309
|
-
|
|
310
|
-
**Example**
|
|
311
|
-
```js
|
|
312
|
-
monday.execute("notice", {
|
|
313
|
-
message: "I'm a success message",
|
|
314
|
-
type: "success", // or "error" (red), or "info" (blue)
|
|
315
|
-
timeout: 10000,
|
|
316
|
-
});
|
|
317
|
-
```
|
|
318
|
-
|
|
319
|
-
#### Open files preview dialog
|
|
320
|
-
Opens a modal with the preview of an asset
|
|
321
|
-
|
|
322
|
-
**type**
|
|
323
|
-
`'openFilesDialog'`
|
|
324
|
-
|
|
325
|
-
**params**
|
|
326
|
-
|
|
327
|
-
| Parameter|Type | Description | Required | Default Value |
|
|
328
|
-
| --- | --- | --- | --- | --- |
|
|
329
|
-
| boardId| Integer | The ID of the board | Yes | |
|
|
330
|
-
| itemId| Integer | The ID of the item, which contains an asset | Yes | |
|
|
331
|
-
| columnId| String | The ID of the column, which contains an asset | Yes | |
|
|
332
|
-
| assetId| Integer | The ID of the asset to open | Yes | |
|
|
333
|
-
|
|
334
|
-
**Example**
|
|
335
|
-
```javascript
|
|
336
|
-
monday.execute('openFilesDialog', {
|
|
337
|
-
boardId: 12345,
|
|
338
|
-
itemId: 23456,
|
|
339
|
-
columnId: 'files',
|
|
340
|
-
assetId: 34567
|
|
341
|
-
})
|
|
342
|
-
```
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
#### Trigger file upload process
|
|
346
|
-
Opens a modal to let the current user upload a file to a specific file column.
|
|
347
|
-
|
|
348
|
-
Returns a promise. In case of error, the promise is rejected
|
|
349
|
-
|
|
350
|
-
After the file is successfully uploaded, the "change_column_value" event will be triggered.
|
|
351
|
-
See the [`monday.listen`](#mondaylistentypeortypes-callback-params--)('events', callback) method to subscribe to these events.
|
|
352
|
-
|
|
353
|
-
*Requires boards:write scope*
|
|
354
|
-
|
|
355
|
-
**type**
|
|
356
|
-
`'triggerFilesUpload'`
|
|
357
|
-
|
|
358
|
-
**params**
|
|
359
|
-
|
|
360
|
-
| Parameter|Type | Description | Required | Default Value |
|
|
361
|
-
| --- | --- | --- | --- | --- |
|
|
362
|
-
| boardId| Integer | The ID of the board | Yes | |
|
|
363
|
-
| itemId| Integer | The ID of the item, which contains an asset | Yes | |
|
|
364
|
-
| columnId| String | The ID of the file column, where file should be uploaded | Yes | |
|
|
365
|
-
|
|
366
|
-
**Example**
|
|
367
|
-
```javascript
|
|
368
|
-
monday.execute('triggerFilesUpload', {
|
|
369
|
-
boardId: 12345,
|
|
370
|
-
itemId: 23456,
|
|
371
|
-
columnId: 'files'
|
|
372
|
-
})
|
|
373
|
-
```
|
|
374
|
-
|
|
375
|
-
### **`monday.oauth(options = {})`**
|
|
376
|
-
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.
|
|
377
|
-
|
|
378
|
-
**Parameters:**
|
|
379
|
-
|
|
380
|
-
- `options`: An object with options as specified below
|
|
381
|
-
|
|
382
|
-
| Option | Required |Description |
|
|
383
|
-
|--|--|--|
|
|
384
|
-
| `clientId` | No, defaults to your client ID | The OAuth client ID of the requesting application |
|
|
385
|
-
| `mondayOauthUrl`| No | The URL of the monday OAuth endpoint |
|
|
386
|
-
|
|
387
|
-
**Returns:**
|
|
388
|
-
|
|
389
|
-
This method does not have a return value.
|
|
390
|
-
|
|
391
|
-
<br/>
|
|
392
|
-
|
|
393
|
-
### **`monday.storage`**
|
|
394
|
-
Provides access to the Storage API. See below for methods and explanation.
|
|
395
|
-
|
|
396
|
-
<br/>
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
## Storage API (`monday.storage`)
|
|
400
|
-
> The Storage API is in early beta stages, its API is likely to change
|
|
401
|
-
|
|
402
|
-
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.
|
|
403
|
-
|
|
404
|
-
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.
|
|
405
|
-
|
|
406
|
-
**Available methods:**
|
|
407
|
-
|
|
408
|
-
- `monday.storage.instance.getItem(key)` - Returns a stored value from the database under `key`
|
|
409
|
-
- `monday.storage.instance.setItem(key, value)` - Stores `value` under `key` in the database
|
|
410
|
-
<!-- - `monday.storage.instance.deleteItem(key)` - Deletes the value under `key` -->
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
**Returns:**
|
|
414
|
-
|
|
415
|
-
All methods return a `Promise` which will be resolved to the Storage API's response
|
|
416
|
-
|
|
417
|
-
**Versioning:**
|
|
418
|
-
|
|
419
|
-
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.
|
|
420
|
-
|
|
421
|
-
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.
|
|
422
|
-
|
|
423
|
-
Example of using versioning:
|
|
424
|
-
```js
|
|
425
|
-
monday.storage.instance.getItem('serialKey').then(res => {
|
|
426
|
-
const { value, version } = res.data;
|
|
427
|
-
sleep(10000); // someone may overwrite serialKey during this time
|
|
428
|
-
|
|
429
|
-
monday.storage.instance.setItem('serialKey', { previous_version: version }).then(res => {
|
|
430
|
-
console.log(res);
|
|
431
|
-
}
|
|
432
|
-
});
|
|
433
|
-
// => '{ "success": false, "reason": "version_conflict" }'
|
|
434
|
-
```
|
|
435
|
-
|
|
436
|
-
**Examples:**
|
|
437
|
-
|
|
438
|
-
Store a value in the database:
|
|
439
|
-
```js
|
|
440
|
-
monday.storage.instance.setItem('mykey', 'Lorem Ipsum').then(res => {
|
|
441
|
-
console.log(res);
|
|
442
|
-
});
|
|
443
|
-
// => { "success": true }
|
|
444
|
-
```
|
|
445
|
-
|
|
446
|
-
Retrieve a previously stored value in the database:
|
|
447
|
-
```js
|
|
448
|
-
monday.storage.instance.getItem('mykey').then(res => {
|
|
449
|
-
console.log(res.data.value);
|
|
450
|
-
});
|
|
451
|
-
// => 'Lorem Ipsum'
|
|
452
|
-
```
|
|
453
|
-
|
|
454
|
-
<!--
|
|
455
|
-
Delete a previously stored key in the database:
|
|
456
|
-
```js
|
|
457
|
-
monday.storage.instance.deleteItem('mykey').then(res => {
|
|
458
|
-
console.log(res);
|
|
459
|
-
}
|
|
460
|
-
// => { "success": true }
|
|
461
|
-
```
|
|
462
|
-
-->
|
|
45
|
+
To get started, check out the [SDK Documentation](https://developer.monday.com/apps/docs/introduction-to-the-sdk)
|
package/dist/main.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var
|
|
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){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
CHANGED
package/src/client-test.js
CHANGED
|
@@ -87,6 +87,22 @@ describe("Monday Client Test", () => {
|
|
|
87
87
|
clock.tick(5);
|
|
88
88
|
expect(listenCallback).to.be.calledWithExactly(data);
|
|
89
89
|
});
|
|
90
|
+
|
|
91
|
+
it("unsubscribe should prevent callback being called", () => {
|
|
92
|
+
const data = {
|
|
93
|
+
method: "method",
|
|
94
|
+
type,
|
|
95
|
+
requestId: "requestId"
|
|
96
|
+
};
|
|
97
|
+
const unsubscribe = mondayClient.listen(type, listenCallback);
|
|
98
|
+
window.postMessage(data, "*");
|
|
99
|
+
window.postMessage(data, "*");
|
|
100
|
+
window.postMessage(data, "*");
|
|
101
|
+
clock.tick(5);
|
|
102
|
+
unsubscribe();
|
|
103
|
+
window.postMessage(data, "*");
|
|
104
|
+
expect(listenCallback).to.be.calledWithExactly(data).and.calledThrice;
|
|
105
|
+
});
|
|
90
106
|
});
|
|
91
107
|
describe("api methods", () => {
|
|
92
108
|
let postMessageStub;
|
|
@@ -105,17 +121,6 @@ describe("Monday Client Test", () => {
|
|
|
105
121
|
expect(postMessageStub).to.be.called;
|
|
106
122
|
window.removeEventListener("message", postMessageStub, false);
|
|
107
123
|
});
|
|
108
|
-
it("should add a listener to the listener array with the key of ", () => {
|
|
109
|
-
let requestId;
|
|
110
|
-
function onPostMessage(event) {
|
|
111
|
-
requestId = event.data.requestId;
|
|
112
|
-
}
|
|
113
|
-
window.addEventListener("message", onPostMessage, false);
|
|
114
|
-
mondayClient.api("query");
|
|
115
|
-
clock.tick(5);
|
|
116
|
-
expect(mondayClient.listeners[requestId]).to.be.ok;
|
|
117
|
-
window.removeEventListener("message", onPostMessage, false);
|
|
118
|
-
});
|
|
119
124
|
|
|
120
125
|
it("get api post message", () => {
|
|
121
126
|
window.addEventListener("message", postMessageStub, false);
|
package/src/client.js
CHANGED
|
@@ -18,6 +18,7 @@ class MondayClientSdk {
|
|
|
18
18
|
this.api = this.api.bind(this);
|
|
19
19
|
this.listen = this.listen.bind(this);
|
|
20
20
|
this.get = this.get.bind(this);
|
|
21
|
+
this.set = this.set.bind(this);
|
|
21
22
|
this.execute = this.execute.bind(this);
|
|
22
23
|
this.oauth = this.oauth.bind(this);
|
|
23
24
|
this._receiveMessage = this._receiveMessage.bind(this);
|
|
@@ -63,17 +64,26 @@ class MondayClientSdk {
|
|
|
63
64
|
|
|
64
65
|
listen(typeOrTypes, callback, params) {
|
|
65
66
|
const types = convertToArrayIfNeeded(typeOrTypes);
|
|
67
|
+
const unsubscribes = [];
|
|
68
|
+
|
|
66
69
|
types.forEach(type => {
|
|
67
|
-
this._addListener(type, callback);
|
|
70
|
+
unsubscribes.push(this._addListener(type, callback));
|
|
68
71
|
this._localApi("listen", { type, params });
|
|
69
72
|
});
|
|
70
|
-
|
|
73
|
+
|
|
74
|
+
return () => {
|
|
75
|
+
unsubscribes.forEach(unsubscribe => unsubscribe());
|
|
76
|
+
};
|
|
71
77
|
}
|
|
72
78
|
|
|
73
79
|
get(type, params) {
|
|
74
80
|
return this._localApi("get", { type, params });
|
|
75
81
|
}
|
|
76
82
|
|
|
83
|
+
set(type, params) {
|
|
84
|
+
return this._localApi("set", { type, params });
|
|
85
|
+
}
|
|
86
|
+
|
|
77
87
|
execute(type, params) {
|
|
78
88
|
return this._localApi("execute", { type, params });
|
|
79
89
|
}
|
|
@@ -112,7 +122,8 @@ class MondayClientSdk {
|
|
|
112
122
|
const version = pjson.version;
|
|
113
123
|
|
|
114
124
|
window.parent.postMessage({ method, args, requestId, clientId, version }, "*");
|
|
115
|
-
this._addListener(requestId, data => {
|
|
125
|
+
const removeListener = this._addListener(requestId, data => {
|
|
126
|
+
removeListener();
|
|
116
127
|
if (data.errorMessage) {
|
|
117
128
|
const error = new Error(data.errorMessage);
|
|
118
129
|
error.data = data.data;
|
|
@@ -129,7 +140,7 @@ class MondayClientSdk {
|
|
|
129
140
|
const methodListeners = this.listeners[method] || EMPTY_ARRAY;
|
|
130
141
|
const typeListeners = this.listeners[type] || EMPTY_ARRAY;
|
|
131
142
|
const requestIdListeners = this.listeners[requestId] || EMPTY_ARRAY;
|
|
132
|
-
let listeners = [...methodListeners, ...typeListeners, ...requestIdListeners];
|
|
143
|
+
let listeners = new Set([...methodListeners, ...typeListeners, ...requestIdListeners]);
|
|
133
144
|
|
|
134
145
|
if (listeners) {
|
|
135
146
|
listeners.forEach(listener => {
|
|
@@ -143,14 +154,21 @@ class MondayClientSdk {
|
|
|
143
154
|
}
|
|
144
155
|
|
|
145
156
|
_addListener(key, callback) {
|
|
146
|
-
this.listeners[key] = this.listeners[key] ||
|
|
147
|
-
this.listeners[key].
|
|
157
|
+
this.listeners[key] = this.listeners[key] || new Set();
|
|
158
|
+
this.listeners[key].add(callback);
|
|
159
|
+
|
|
160
|
+
return () => {
|
|
161
|
+
this.listeners[key].delete(callback);
|
|
162
|
+
if (this.listeners[key].size === 0) {
|
|
163
|
+
delete this.listeners[key];
|
|
164
|
+
}
|
|
165
|
+
};
|
|
148
166
|
}
|
|
149
167
|
|
|
150
168
|
_generateRequestId() {
|
|
151
169
|
return Math.random()
|
|
152
170
|
.toString(36)
|
|
153
|
-
.
|
|
171
|
+
.substring(2, 9);
|
|
154
172
|
}
|
|
155
173
|
|
|
156
174
|
_removeEventListener() {
|