Skip to content

Commit 6cb8119

Browse files
author
Balthazar Gronon
committed
feat(core): init ✨
0 parents  commit 6cb8119

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+12223
-0
lines changed

‎.babelrc

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"presets": ["react", "es2015", "stage-0"],
3+
"plugins": [
4+
"transform-decorators-legacy",
5+
["module-resolver", { "root": ["src"] }],
6+
],
7+
"env": {
8+
"test": {
9+
"plugins": ["istanbul"],
10+
},
11+
},
12+
}

‎.eslintrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
extends: ['zavatta', 'zavatta-react'],
3+
globals: {
4+
chrome: false,
5+
Set: false,
6+
},
7+
rules: {
8+
'react/no-array-index-key': 0
9+
}
10+
}

‎.gitattributes

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
yarn.lock -diff

‎.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules/
2+
.nyc_output/
3+
coverage/
4+
5+
dist*
6+
npm-debug.log

‎.travis.yml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
language: node_js
2+
node_js:
3+
- 6
4+
- 7
5+
script:
6+
- npm run lint
7+
- npm run cover
8+
after_success:
9+
- npm run report

‎LICENSE

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright (c) 2017 Uber Technologies, Inc.
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is
8+
furnished to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in
11+
all copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19+
THE SOFTWARE.

‎README.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<p align="right">
2+
<a href="https://travis-ci.org/uber-web/Seer">
3+
<img src="https://img.shields.io/travis/uber-web/Seer.svg?style=flat-square">
4+
</a>
5+
<a href="https://coveralls.io/github/uber-web/Seer">
6+
<img src="https://img.shields.io/coveralls/uber-web/Seer.svg?style=flat-square">
7+
</a>
8+
<a href="https://www.npmjs.com/package/seer">
9+
<img src="https://img.shields.io/npm/v/seer.svg?style=flat-square">
10+
</a>
11+
<a href="https://chrome.google.com/webstore/detail/seer/eogckabefmgphfgngjdmmlfbddmonfdh">
12+
<img src="https://img.shields.io/chrome-web-store/v/eogckabefmgphfgngjdmmlfbddmonfdh.svg?style=flat-square">
13+
</a>
14+
<a href="https://github.com/SIGSEV/minus">
15+
<img src="https://img.shields.io/badge/scaffold-minus-blue.svg?style=flat-square">
16+
</a>
17+
</p>
18+
19+
<p align="center">
20+
<img src="https://cdn.pbrd.co/images/2mmml1lec.png" height=100 />
21+
</p>
22+
23+
<p align="center">A customizable devtool solution</p>
24+
25+
<img src="https://cdn.pbrd.co/images/94k37GEY0.gif" />
26+
27+
### Introduction
28+
29+
After the introduction of the completely new debugging/logging experience brought by Redux and its
30+
extension, we thought it would be a good idea to provide this to a greater audience of the Javascript
31+
ecosystem. The Seer API give library creators simple methods they need to implement so that developers
32+
using both these libraries and the extension will be able to easily debug state and even things
33+
like editing capabilities, as showcased above.
34+
35+
Although pretty basic for now and only working with uber framemorks [deck.gl](https://github.com/uber/deck.gl)
36+
and [luma.gl](https://github.com/uber/luma.gl), we intend to extend it to allow for more possibilities and create more
37+
interactions in the future.
38+
39+
### API
40+
41+
Checkout the [api directory](./api) to see the api usage allowing you to interact with the extension.
42+
43+
### Install
44+
45+
The extension can be easily downloaded from the Chrome webstore. If you desire to build it manually,
46+
you simply need to `npm run build` after having installed the dependencies.
47+
48+
### Contributing
49+
50+
If you desire to contribute to the development efforts of this project, the following processes
51+
will help you to debug and see your changes.
52+
53+
npm start
54+
55+
This command will spawn a webpack server that will serve the extension along with the test website.
56+
57+
npm run standalone
58+
59+
After a build and the uninstall of the unpacked extension, runs the demo without the app, so you can
60+
test direct interaction from the devtool panel.
61+
62+
Note that for the mapbox tiles to load, you'll need to have a valid `MAPBOX_TOKEN` environment variable.
63+
64+
<sub>
65+
Inspired by the awesome <a href="https://github.com/gaearon/redux-devtools">redux-devtools</a>.
66+
Based on <a href="https://github.com/SIGSEV/minus">minus</a> & <a href="https://github.com/SIGSEV/Bridge">Bridge</a>.
67+
</sub>

‎api/.babelrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": ["es2015", "stage-0"],
3+
"env": {
4+
"test": {
5+
"plugins": ["istanbul"],
6+
},
7+
},
8+
}

‎api/.eslintrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"extends": ["zavatta"],
3+
"globals": {
4+
"Map": false,
5+
},
6+
}

‎api/README.md

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
# Seer API
2+
3+
This library provides an abstraction around the [Window.postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
4+
to interact with the Seer extension.
5+
You could use this module if you have a framework or application that wants to display debugging
6+
information in the Seer Chrome extension.
7+
8+
## Install
9+
10+
Simply download the package from the npm registry
11+
12+
yarn add seer
13+
14+
## Notes
15+
16+
The extension will declare a `__SEER_INITIALIZED__` boolean on the window,
17+
that you can use to check if the extension is installed and prevent any useless
18+
processing in production or for real-users.
19+
20+
## Internal
21+
22+
How the communication is done exactly relies on the bridge, that you can checkout
23+
in its dedicated [directory](../src/bridge). The following schema represent the
24+
complete data flow:
25+
26+
<img src="https://cdn.pbrd.co/images/92al0O7cY.png" height="300" />
27+
28+
## Functions
29+
30+
<dl>
31+
<dt><a href="#isReady">isReady()</a> ⇒ <code>Boolean</code></dt>
32+
<dd><p>Ready check for Seer initialization</p>
33+
</dd>
34+
<dt><a href="#throttle">throttle(key, delay)</a> ⇒ <code>Boolean</code></dt>
35+
<dd><p>Utility method allowing to throttle a user action based on a key and a minimun delay.</p>
36+
</dd>
37+
<dt><a href="#send">send(type, payload)</a></dt>
38+
<dd><p>Low-level api leveraging window.postMessage</p>
39+
</dd>
40+
<dt><a href="#init">init()</a></dt>
41+
<dd><p>Initilize window listener. There will be only one for the whole process
42+
to prevent too many registrations.</p>
43+
<p>This method will be called automatically if you use the <code>listenFor</code> method.</p>
44+
</dd>
45+
<dt><a href="#clean">clean()</a></dt>
46+
<dd><p>Clean listener. Can be useful in case you want to unregister upcoming events
47+
or liberate memory.</p>
48+
</dd>
49+
<dt><a href="#listenFor">listenFor(key, cb)</a></dt>
50+
<dd><p>Create a listener that will be called upon events of the given key.</p>
51+
</dd>
52+
<dt><a href="#removeListener">removeListener(cb)</a></dt>
53+
<dd><p>Remove an identity listener</p>
54+
</dd>
55+
<dt><a href="#list">list(key, data)</a></dt>
56+
<dd><p>Creates a new indexed list.
57+
It works by index to get O(1) accessing and performance.</p>
58+
</dd>
59+
<dt><a href="#listItem">listItem(key, itemKey, data)</a></dt>
60+
<dd><p>Creates an element in the indexed list, based on the itemKey.</p>
61+
</dd>
62+
<dt><a href="#updateItem">updateItem(key, itemKey, path, data)</a></dt>
63+
<dd><p>Update an item property, can be deeply nested.</p>
64+
</dd>
65+
<dt><a href="#multiUpdate">multiUpdate(key, itemKey, array)</a></dt>
66+
<dd><p>Similar to updateItem, but allows to pass an array with {path,data} pairs for
67+
multiple update of the same item without having to send multiple messages.</p>
68+
</dd>
69+
<dt><a href="#deleteItem">deleteItem(key, itemKey)</a></dt>
70+
<dd><p>Remove a specific item in a specific tab.</p>
71+
</dd>
72+
<dt><a href="#addLog">addLog(key, itemKey, msg)</a></dt>
73+
<dd><p>Will create a log message to an item, that will be displayde with the current time.</p>
74+
</dd>
75+
</dl>
76+
77+
<a name="isReady"></a>
78+
79+
### isReady() ⇒ <code>Boolean</code>
80+
Ready check for Seer initialization
81+
82+
**Kind**: global function
83+
<a name="throttle"></a>
84+
85+
### throttle(key, delay) ⇒ <code>Boolean</code>
86+
Utility method allowing to throttle a user action based on a key and a minimun delay.
87+
88+
**Kind**: global function
89+
90+
| Param | Type | Description |
91+
| --- | --- | --- |
92+
| key | <code>String</code> | A unique key |
93+
| delay | <code>Number</code> | The minimal delay to throttle |
94+
95+
<a name="send"></a>
96+
97+
### send(type, payload)
98+
Low-level api leveraging window.postMessage
99+
100+
**Kind**: global function
101+
102+
| Param | Type | Description |
103+
| --- | --- | --- |
104+
| type | <code>String</code> | The action type |
105+
| payload | <code>Any</code> | The action payload |
106+
107+
<a name="init"></a>
108+
109+
### init()
110+
Initilize window listener. There will be only one for the whole process
111+
to prevent too many registrations.
112+
113+
This method will be called automatically if you use the `listenFor` method.
114+
115+
**Kind**: global function
116+
<a name="clean"></a>
117+
118+
### clean()
119+
Clean listener. Can be useful in case you want to unregister upcoming events
120+
or liberate memory.
121+
122+
**Kind**: global function
123+
<a name="listenFor"></a>
124+
125+
### listenFor(key, cb)
126+
Create a listener that will be called upon events of the given key.
127+
128+
**Kind**: global function
129+
130+
| Param | Type | Description |
131+
| --- | --- | --- |
132+
| key | <code>String</code> | The unique tab key |
133+
| cb | <code>function</code> | A callback that will receive the message payload |
134+
135+
<a name="removeListener"></a>
136+
137+
### removeListener(cb)
138+
Remove an identity listener
139+
140+
**Kind**: global function
141+
142+
| Param | Type | Description |
143+
| --- | --- | --- |
144+
| cb | <code>function</code> | The callback to remove |
145+
146+
<a name="list"></a>
147+
148+
### list(key, data)
149+
Creates a new indexed list.
150+
It works by index to get O(1) accessing and performance.
151+
152+
**Kind**: global function
153+
154+
| Param | Type | Description |
155+
| --- | --- | --- |
156+
| key | <code>String</code> | The key of the tab |
157+
| data | <code>Object</code> | The indexed object |
158+
159+
<a name="listItem"></a>
160+
161+
### listItem(key, itemKey, data)
162+
Creates an element in the indexed list, based on the itemKey.
163+
164+
**Kind**: global function
165+
166+
| Param | Type | Description |
167+
| --- | --- | --- |
168+
| key | <code>String</code> | The key of the tab |
169+
| itemKey | <code>String</code> | The key of the item |
170+
| data | <code>Any</code> | The value of the item |
171+
172+
<a name="updateItem"></a>
173+
174+
### updateItem(key, itemKey, path, data)
175+
Update an item property, can be deeply nested.
176+
177+
**Kind**: global function
178+
179+
| Param | Type | Description |
180+
| --- | --- | --- |
181+
| key | <code>String</code> | The key of the tab |
182+
| itemKey | <code>String</code> | The key of the item |
183+
| path | <code>String</code> | The path of the variable you want to update |
184+
| data | <code>Object</code> | The new value |
185+
186+
<a name="multiUpdate"></a>
187+
188+
### multiUpdate(key, itemKey, array)
189+
Similar to updateItem, but allows to pass an array with {path,data} pairs for
190+
multiple update of the same item without having to send multiple messages.
191+
192+
**Kind**: global function
193+
194+
| Param | Type | Description |
195+
| --- | --- | --- |
196+
| key | <code>String</code> | The key of the tab |
197+
| itemKey | <code>String</code> | The key of the item |
198+
| array | <code>Array</code> | The array of updates |
199+
| array.path | <code>String</code> | The path for this update |
200+
| array.data | <code>Object</code> | The value of this update |
201+
202+
<a name="deleteItem"></a>
203+
204+
### deleteItem(key, itemKey)
205+
Remove a specific item in a specific tab.
206+
207+
**Kind**: global function
208+
209+
| Param | Type | Description |
210+
| --- | --- | --- |
211+
| key | <code>String</code> | They key of the tab |
212+
| itemKey | <code>String</code> | The key of the item |
213+
214+
<a name="addLog"></a>
215+
216+
### addLog(key, itemKey, msg)
217+
Will create a log message to an item, that will be displayde with the current time.
218+
219+
**Kind**: global function
220+
221+
| Param | Type | Description |
222+
| --- | --- | --- |
223+
| key | <code>String</code> | The key of the tab |
224+
| itemKey | <code>String</code> | The key of the item |
225+
| msg | <code>String</code> | The message to display |
226+

‎api/header.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Seer API
2+
3+
This library provides an abstraction around the [Window.postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
4+
to interact with the Seer extension.
5+
6+
How the communication is done exactly relies on the bridge, that you can checkout
7+
in its dedicated [directory](../src/bridge). The following schema represent the
8+
complete data flow:
9+
10+
<img src="https://cdn.pbrd.co/images/92al0O7cY.png" height="300" />
11+
12+
## Install
13+
14+
Simply download the package from the npm registry
15+
16+
yarn add seer
17+
18+
## Notes
19+
20+
The extension will declare a `__SEER_INITIALIZED__` boolean on the window,
21+
that you can use to check if the extension is installed and prevent any useless
22+
processing in production or for real-users.
23+

0 commit comments

Comments
 (0)