-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9542107
commit 58d95bd
Showing
1 changed file
with
15 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,50 +1,23 @@ | ||
# React + TypeScript + Vite | ||
# EGraph Visualizer | ||
|
||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
Interactive visualizer for e-graphs in [the serialized JSON format](https://github.com/egraphs-good/egraph-serialize/) | ||
using Cytoscape JS and Eclipse Layout Kernel. | ||
|
||
Currently, two official plugins are available: | ||
## Development | ||
|
||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh | ||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh | ||
First install [Yarn](https://yarnpkg.com/getting-started/install), then run: | ||
|
||
## Expanding the ESLint configuration | ||
```sh | ||
yarn install | ||
yarn run [build|start|lint] | ||
``` | ||
|
||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: | ||
## Packaging | ||
|
||
- Configure the top-level `parserOptions` property like this: | ||
Currently, this visualizer is packaged as an [AnyWidget JS ESM file](https://anywidget.dev/) with all dependencies included. | ||
On every Git tag, a new verison is bundled and published as a Github release. | ||
|
||
```js | ||
export default tseslint.config({ | ||
languageOptions: { | ||
// other options... | ||
parserOptions: { | ||
project: ['./tsconfig.node.json', './tsconfig.app.json'], | ||
tsconfigRootDir: import.meta.dirname, | ||
}, | ||
}, | ||
}) | ||
``` | ||
In the future, if others want to use it, it could be published as an NPM package. | ||
|
||
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` | ||
- Optionally add `...tseslint.configs.stylisticTypeChecked` | ||
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: | ||
|
||
```js | ||
// eslint.config.js | ||
import react from 'eslint-plugin-react' | ||
|
||
export default tseslint.config({ | ||
// Set the react version | ||
settings: { react: { version: '18.3' } }, | ||
plugins: { | ||
// Add the react plugin | ||
react, | ||
}, | ||
rules: { | ||
// other rules... | ||
// Enable its recommended rules | ||
...react.configs.recommended.rules, | ||
...react.configs['jsx-runtime'].rules, | ||
}, | ||
}) | ||
``` | ||
There is also a demo site published on Github Pages, which allows you to upload and edit a serialized e-graph and see | ||
the visualization. |