Skip to content

Commit cc0996a

Browse files
neyser zananeyser zana
neyser zana
authored and
neyser zana
committed
Merge branch 'master' of https://github.com/Gossamer-React/React-Lucid into neyser-previous-log
2 parents b975ddb + f64aaaa commit cc0996a

File tree

6 files changed

+188
-46
lines changed

6 files changed

+188
-46
lines changed

‎.github/ISSUE_TEMPLATE/bug_report.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
name: Bug report
3+
about: Create a report to help us improve
4+
title: ''
5+
labels: ''
6+
assignees: ''
7+
8+
---
9+
10+
**Describe the bug**
11+
A clear and concise description of what the bug is.
12+
13+
**To Reproduce**
14+
Steps to reproduce the behavior:
15+
1. Go to '...'
16+
2. Click on '....'
17+
3. Scroll down to '....'
18+
4. See error
19+
20+
**Expected behavior**
21+
A clear and concise description of what you expected to happen.
22+
23+
**Screenshots**
24+
If applicable, add screenshots to help explain your problem.
25+
26+
**Desktop (please complete the following information):**
27+
- OS: [e.g. iOS]
28+
- Browser [e.g. chrome, safari]
29+
- Version [e.g. 22]
30+
31+
**Smartphone (please complete the following information):**
32+
- Device: [e.g. iPhone6]
33+
- OS: [e.g. iOS8.1]
34+
- Browser [e.g. stock browser, safari]
35+
- Version [e.g. 22]
36+
37+
**Additional context**
38+
Add any other context about the problem here.

‎.github/ISSUE_TEMPLATE/feature_request.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
name: Feature request
3+
about: Suggest an idea for this project
4+
title: ''
5+
labels: ''
6+
assignees: ''
7+
8+
---
9+
10+
**Is your feature request related to a problem? Please describe.**
11+
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12+
13+
**Describe the solution you'd like**
14+
A clear and concise description of what you want to happen.
15+
16+
**Describe alternatives you've considered**
17+
A clear and concise description of any alternative solutions or features you've considered.
18+
19+
**Additional context**
20+
Add any other context or screenshots about the feature request here.

‎CODE_OF_CONDUCT.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# Contributor Covenant Code of Conduct
2+
3+
## Our Pledge
4+
5+
In the interest of fostering an open and welcoming environment, we as
6+
contributors and maintainers pledge to making participation in our project and
7+
our community a harassment-free experience for everyone, regardless of age, body
8+
size, disability, ethnicity, sex characteristics, gender identity and expression,
9+
level of experience, education, socio-economic status, nationality, personal
10+
appearance, race, religion, or sexual identity and orientation.
11+
12+
## Our Standards
13+
14+
Examples of behavior that contributes to creating a positive environment
15+
include:
16+
17+
* Using welcoming and inclusive language
18+
* Being respectful of differing viewpoints and experiences
19+
* Gracefully accepting constructive criticism
20+
* Focusing on what is best for the community
21+
* Showing empathy towards other community members
22+
23+
Examples of unacceptable behavior by participants include:
24+
25+
* The use of sexualized language or imagery and unwelcome sexual attention or
26+
advances
27+
* Trolling, insulting/derogatory comments, and personal or political attacks
28+
* Public or private harassment
29+
* Publishing others' private information, such as a physical or electronic
30+
address, without explicit permission
31+
* Other conduct which could reasonably be considered inappropriate in a
32+
professional setting
33+
34+
## Our Responsibilities
35+
36+
Project maintainers are responsible for clarifying the standards of acceptable
37+
behavior and are expected to take appropriate and fair corrective action in
38+
response to any instances of unacceptable behavior.
39+
40+
Project maintainers have the right and responsibility to remove, edit, or
41+
reject comments, commits, code, wiki edits, issues, and other contributions
42+
that are not aligned to this Code of Conduct, or to ban temporarily or
43+
permanently any contributor for other behaviors that they deem inappropriate,
44+
threatening, offensive, or harmful.
45+
46+
## Scope
47+
48+
This Code of Conduct applies both within project spaces and in public spaces
49+
when an individual is representing the project or its community. Examples of
50+
representing a project or community include using an official project e-mail
51+
address, posting via an official social media account, or acting as an appointed
52+
representative at an online or offline event. Representation of a project may be
53+
further defined and clarified by project maintainers.
54+
55+
## Enforcement
56+
57+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
58+
reported by contacting the project team at [email protected]. All
59+
complaints will be reviewed and investigated and will result in a response that
60+
is deemed necessary and appropriate to the circumstances. The project team is
61+
obligated to maintain confidentiality with regard to the reporter of an incident.
62+
Further details of specific enforcement policies may be posted separately.
63+
64+
Project maintainers who do not follow or enforce the Code of Conduct in good
65+
faith may face temporary or permanent repercussions as determined by other
66+
members of the project's leadership.
67+
68+
## Attribution
69+
70+
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71+
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72+
73+
[homepage]: https://www.contributor-covenant.org
74+
75+
For answers to common questions about this code of conduct, see
76+
https://www.contributor-covenant.org/faq

‎LICENSE‎

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

‎README.md‎

Lines changed: 33 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,65 @@
1-
![Alt text](public/assets/lucidlogo-transparent.png?raw=true "Title")
2-
[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Make%20development%20easier%20with%20Lucid.&url=https://github.com/Gossamer-React/React-Lucid&hashtags=react,graphql,apollographql,javascript,programming,developers,chrome%20@neyser_zana%20@eterna_t%20@yongnicholaskim%20@Niantendo)
1+
<p align="center">
2+
<img width="460" height="150" src="public/assets/lucidlogo-transparent.png?raw=true">
3+
</p>
4+
5+
[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Make%20development%20easier%20with%20Lucid.&url=https://github.com/Gossamer-React/Lucid&hashtags=react,graphql,apollographql,javascript,programming,developers,chrome)
36
![AppVeyor](https://img.shields.io/badge/build-passing-green.svg)
47
![AppVeyor](https://img.shields.io/badge/License-MIT-blue.svg)
5-
## Lucid
6-
*A React-GraphQL developer tool for Chrome.*
78

8-
Lucid is a React / GraphQL Chrome Developer Tool designed to help developers debug their React applications that depend on GraphQL resources. Lucid allows you to visualize the component hierarchy of your React application, and your GraphQL schema, queries, and mutations side by side, making debugging fast and focused.
9+
## **Lucid**: *a React-GraphQL developer tool*
910

10-
**IMPORTANT:** Lucid is in *BETA* mode and works best for React v16+ local projects in development environments.
11+
Lucid is a Chrome Developer Tool designed to help developers debug their React-GraphQL applications.
12+
- Visualize the component hierarchy, state/props data and state changes of your React application
13+
- See your GraphQL schema, queries, and mutations in real-time
1114

12-
## How It Works
15+
## Underlying Technology
1316
### React Tab
14-
Lucid parses through your React app to generate an interactive tree graph representing your React component hierarchy, with node-specific state and props data. The tree updates upon each change to the React app's state, and displays a log of state diffs on the left. This is done by creating a persistent data bridge to the user's React application via the Javascript API for WebExtensions' background and content scripts. Lucid injects scripts utilizing React DevTool's Global Hook to recursively traverse through the React DOM each time setState is called, resulting in a tree and a log that each display real-time feedback. Our app itself uses React internally so as the state of your live app changes, the Lucid tree graph will also provide visual feedback of data flow and state changes through the React components immediately.
17+
Lucid parses through your React app to generate an interactive tree graph representing your __React component hierarchy__, with node-specific __state and props__ data. The tree updates upon each change to the React app's state, and displays a log of __state diffs__ on the left. This is done by creating a persistent data bridge to the user's React application via the Javascript API for WebExtensions' background and content scripts. Lucid injects scripts utilizing React DevTool's Global Hook to recursively traverse through the React DOM each time setState is called, resulting in a tree and a log that each display real-time feedback. Our app itself uses React internally so as the state of your live app changes, the Lucid tree graph will also provide visual feedback of data flow and state changes through the React components immediately.
1518

1619
### GraphQL Tab
17-
Lucid intercepts HTTP requests using Chrome Devtool APIs to display a log of real-time Apollo client queries and mutations, along with associated response objects. Lucid also uses GraphQL schema introspection to display schema information from the server. This allows full-stack developers to debug their app from the front-end all the way through to the back-end, as requests are generated, responses come back from the server, data flows through React components, and render in the DOM.
20+
Lucid intercepts HTTP requests using Chrome Devtool APIs to display a log of real-time __Apollo client queries and mutations__, along with associated __response__ objects. Lucid also uses GraphQL schema introspection to display __schema__ information from the server. This allows full-stack developers to debug their app from the front-end to the back-end, as requests are generated, responses are returned from the server, and data flows through React components to be rendered in the DOM.
1821

1922
## Setup
20-
### Install from Chrome Extension Store
21-
22-
1. Install <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en">React Developer Tools</a>.
23-
24-
2. Install <a href="https://chrome.google.com/webstore/category/extensions">Lucid</a>.
25-
26-
3. Run your React-GraphQL application or open a site that uses React v16+ or GraphQL.
27-
28-
4. Open Chrome Developer Tools (Inspect / Cmd+Opt+I / Ctrl+Shift+I), and click on the Lucid panel.
29-
30-
5. Have fun! :)
31-
32-
### Build your own extension
33-
34-
1. Clone the repo and install dependendies:
23+
| Install from Chrome Extension Store | Build your own extension |
24+
| ------------- | ------------- |
25+
| 1. Install <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en">React Developer Tools</a>. | 1. Clone the repo and install dependendies: ```npm install``` |
26+
| 2. Install <a href="https://chrome.google.com/webstore/category/extensions">Lucid</a> or __Build your own extension__. | 2. ```npm run build ```|
27+
|3. Run your React-GraphQL application or open a site that uses React v16+ or GraphQL.|3. Navigate to chrome://extensions (or in your Chrome Browser Settings, click on **More Tools** >> **Extensions**). |
28+
|4. Open Chrome Developer Tools (Inspect or Cmd+Opt+I / Ctrl+Shift+I) and click on the Lucid panel.|4. Click **Load Unpacked** and select the './react-lucid/build' folder from your local directory.|
29+
|5. Have fun! |
3530

36-
```npm install```
37-
38-
2. Build Lucid:
39-
40-
```npm run build ```
41-
42-
3. Navigate to chrome://extensions (or in your Chrome Browser Settings, click on **More Tools** >> **Extensions**).
43-
44-
4. Click **Load Unpacked**. Select the './react-lucid/build' folder from your local directory.
45-
46-
5. Have fun!
31+
**IMPORTANT:** Lucid is in *BETA* mode and works best for React v16+ local projects in development environments.
4732

4833
## How to Use
49-
### GraphQL View
50-
Upon opening Lucid, users first land on the GraphQL panel where a log of previous API requests is available, as well as their associated responses. A GraphQL schema of all available types, queries, and mutations is also automatically fetched from the GraphQL server when Lucid is initialized.
51-
52-
**NOTE:** Lucid only listens for HTTP requests when it is open in the Chrome Developer Tool panel. To see any requests that were made upon initial page load, reload your React page after opening Lucid in your Chrome browser. See a chronological log of GraphQL HTTP Requests on the left, and click on each log to view the HTTP response for that particular request. At the bottom of the panel, you'll find your React application's GraphQL schema.
34+
### GraphQL Tab
35+
* In the GraphQL panel, a chronological log of API __requests__ is shown on the left.
36+
* A GraphQL __schema__ of all available types, queries, and mutations is also automatically fetched from the GraphQL server when Lucid is initialized and displayed on the bottom.
37+
* Click each request log to see its associated HTTP __response__.
38+
39+
**NOTE:** Lucid only listens for HTTP requests while it is open in the Chrome Developer Tool panel. To see any requests that were made upon initial page load, reload your React page after opening Lucid in your Chrome browser.
5340

5441
![](public/ReqResJson.gif)
5542

56-
### Component Tree View
57-
In the React Component Tree panel is a tree graph representing your loaded React application's component hierarchy. In the top left box, you will see the state and props data of any tree graph component you hover over. Below that, you will see a log of state diffs whenever you trigger setState() in your app.
43+
### React Tab
44+
* In the React panel is a tree graph representing your application's __component hierarchy__.
45+
* Hovering over any React Component in the tree displays the __state and props data__ of that component in the top left.
46+
* The __State Diff__ Log tracks changes in state whenever setState() is triggered.
47+
* Filter out specified higher-order components from your tree graph (e.g. Redux, Apollo-GraphQL, and React Router) by clicking the buttons.
5848

5949
![](public/StateDiff.gif)
6050

61-
Hovering over the React Component Tree chart displays the state and props of each component in the State/Props Panel. The State Diff Log tracks each event that changes the state in the loaded React application.
62-
You also have the option to filter out specified higher-order components from your tree graph (e.g. Redux, Apollo-GraphQL, and React Router).
63-
6451
![](public/TreeDisplay.gif)
6552

6653
![](public/TreeFilter.gif)
6754

6855
## Contributing
6956

70-
Please feel free to fork this repo and submit pull requests! Lucid is currently in beta release. Please let us know about bugs! Also, if you have any requests or suggestions for features, please contact us at [email protected].
57+
Lucid is currently in beta release. Please let us know about bugs and suggestions at [email protected]. Feel free to fork this repo and submit pull requests!
7158

7259
## Coming Soon
7360

7461

75-
## Our Team
62+
## Team
7663

7764
Yong-Nicholas Kim (https://github.com/yongnicholaskim)
7865

‎public/assets/lucidlogo-transparent.png‎

-1.42 MB
Loading

0 commit comments

Comments
 (0)