Skip to content

Commit 8e6a033

Browse files
steciuksteciuk
authored
Merge pull request #81 from steciuk/69-add-readme
69 add readme
2 parents 96c41fc + 0fbbdda commit 8e6a033

Some content is hidden

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

42 files changed

+4399
-337
lines changed

‎.vscode/settings.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
{
2-
"cSpell.words": [
2+
"cSpell.words": [
33
"autoprefix",
44
"fontawesome",
55
"fortawesome",
66
"newtab",
77
"sidepanel",
88
"stateviz",
9+
"todos",
910
"twind",
1011
"webextension"
1112
]

‎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) 2024 Adam Steciuk
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: 117 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,118 @@
1-
![badge](doc/badges/badge.svg)
1+
<h1 align="center">
2+
<img src="extension/src/assets/icons/enabled-128.png" alt="Logo">
3+
<br>
4+
StateViz
5+
</h1>
6+
7+
<h4 align="center">
8+
Analyze application state across multiple frontend libraries
9+
</h4>
10+
11+
<p align="center">
12+
<img src="doc/badges/badge.svg" alt="Tests status">
13+
</p>
14+
15+
16+
- [Why?](#why)
17+
- [Features](#features)
18+
- [Supported libraries](#supported-libraries)
19+
- [Installation](#installation)
20+
- [From Source](#from-source)
21+
- [Tests](#tests)
22+
- [Unit and Integration Tests](#unit-and-integration-tests)
23+
- [Example Applications](#example-applications)
24+
- [Future Work](#future-work)
25+
- [License](#license)
26+
- [Attributions](#attributions)
27+
28+
![Demo](doc/demo.gif)
29+
30+
## Why?
31+
The motivation behind creating this extension stemmed from my experience using various frontend frameworks. I found it frustrating to juggle multiple extensions, each in a separate tab, with its own layout and UI. This was especially true for a polyglot project (React/Svelte) I was working on.
32+
33+
I wanted a single extension that could provide a unified view of the application state, regardless of the frontend library used. Something that could be easily extended to support new libraries and provide a consistent experience across all of them.
34+
35+
So, I decided to develop a proof-of-concept. As things progressed, it became the basis for my [CS Master's thesis](#thesis) and StateViz was born.
36+
37+
## Features
38+
- **Multi-Library Support**: Inspect web applications built with different libraries, including those using multiple libraries simultaneously.
39+
- **App Structure Visualization**: Visualize the structure of your application, including components, DOM elements, and library-specific elements like Svelte blocks.
40+
- **Real-Time Data Inspection**: Inspect component data in real-time, including props, state, and library-specific details like contexts and hooks for React.
41+
- **Element Filters**: Use filters to display only the elements you are interested in.
42+
- **DOM Element Highlighting**: Efficiently highlight DOM elements corresponding to selected tree nodes.
43+
- **Light and Dark Mode**: Choose between light and dark themes for a comfortable user experience in any lighting condition.
44+
45+
### Supported libraries
46+
![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
47+
![Svelte](https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte&logoColor=FF3E00)
48+
49+
... and more to come!
50+
51+
## Installation
52+
53+
<!-- ### Chrome Web Store
54+
The extension is available on the Chrome Web Store. You can install it from [here](https://chrome.google.com/webstore/detail/stateviz/).
55+
6. Open the developer tools in any tab that runs a supported frontend library application.
56+
7. Click on the StateViz tab in the developer tools to start using the extension. -->
57+
58+
### From Source
59+
1. Clone the repository:
60+
```bash
61+
git clone https://github.com/steciuk/StateViz.git
62+
```
63+
2. Move to the extension directory:
64+
```bash
65+
cd StateViz/extension
66+
```
67+
3. Install dependencies:
68+
```bash
69+
npm install
70+
```
71+
4. Build the extension:
72+
```bash
73+
npm run build
74+
```
75+
5. Load the extension in Chrome.
76+
- Open Chrome and navigate to `chrome://extensions`.
77+
- Enable Developer mode.
78+
- Click on `Load unpacked` and select the `dist` directory inside the `extension` directory.
79+
80+
6. Open the developer tools in any tab that runs a supported frontend library application.
81+
7. Click on the StateViz tab in the developer tools to start using the extension.
82+
83+
## Tests
84+
### Unit and Integration Tests
85+
To run the tests, use the following command in the `extension` directory:
86+
87+
```bash
88+
npm run test
89+
```
90+
### Example Applications
91+
In `test-apps` directory, you will find a collection of example applications designed to help you test and explore the capabilities of the extension.
92+
93+
To run any of the example applications, navigate to the desired directory and:
94+
95+
1. Install dependencies:
96+
```bash
97+
npm install
98+
```
99+
2. Start the development server:
100+
```bash
101+
npm run dev
102+
```
103+
3. Open the application in your browser.
104+
4. Use the extension to inspect the application.
105+
106+
<!-- ## Thesis
107+
The thesis document can be found [here](doc/thesis.pdf). -->
108+
109+
110+
## Future Work
111+
See the [issues tab](https://github.com/steciuk/StateViz/issues) for planned features and improvements.
112+
113+
## License
114+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
115+
116+
## Attributions
117+
Current extension logo made by [Tanvir Islam](https://thenounproject.com/creator/tanvirislam/).
2118

3-
### Attributions
4-
Temporary extension logo made by [Tanvir Islam](https://thenounproject.com/creator/tanvirislam/)

‎doc/badges/badge.svg

Lines changed: 7 additions & 7 deletions
Loading

‎doc/demo.gif

11.5 MB
Loading

‎extension/.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@ utils/reload/*.js
1717
utils/reload/injections/*.js
1818
public/manifest.json
1919

20-
assets/
20+
./assets/

‎extension/README.md

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎extension/manifest.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import packageJson from './package.json' assert { type: 'json' };
22

33
/**
4-
* After changing, please reload the extension at `chrome://extensions`
54
* @type {chrome.runtime.ManifestV3}
65
*/
76
const manifest = {
87
manifest_version: 3,
9-
name: packageJson.name,
8+
name: "StateViz",
109
version: packageJson.version,
1110
description: packageJson.description,
11+
author: packageJson.author,
1212
permissions: [
1313
'storage',
1414
// 'sidePanel'

‎extension/package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎extension/package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
{
22
"name": "stateviz",
3-
"version": "0.0.1",
4-
"description": "State Visualizer",
5-
"license": "",
3+
"version": "0.1.0",
4+
"description": "Universal devtools Chrome extension",
5+
"keywords": ["devtools", "chrome", "extension", "react", "svelte"],
6+
"license": "MIT",
67
"repository": {
78
"type": "git",
89
"url": "https://github.com/steciuk/StateViz.git"
910
},
11+
"author": "Adam Steciuk",
1012
"//": [
1113
"// TODO: if https://github.com/probil/vitest-chrome/pull/1 is merged, remove patch-package and the postinstall script",
1214
"// TODO: one day, those scripts will be used to build the extension for Firefox :)",

0 commit comments

Comments
 (0)