80 lines
2.4 KiB
Markdown
80 lines
2.4 KiB
Markdown
# Dependencies
|
|
|
|
This document briefly explains the different dependencies located in the `package.json`.
|
|
|
|
This document will not explain how to use them. You can read their documentation for that and the codebase have exemples for references.
|
|
|
|
|
|
# [React](https://reactjs.org/)
|
|
|
|
Main framework to build the js application.
|
|
|
|
It depends on Vite in order to build the project.
|
|
|
|
Others dependencies:
|
|
- [react-dom](https://reactjs.org/docs/react-dom.html): library used to inject the app to `#root` html element.
|
|
- [react-window](https://www.npmjs.com/package/react-window): component that offers component dynamic loading over scroll (very useful++)
|
|
- [react-svg-pan-zoom](https://www.npmjs.com/package/react-svg-pan-zoom): component that offers pan + zoom to a svg element (if this gets deprecated, please try to migrate to HTML Canvas before trying a new library)
|
|
|
|
|
|
# [Vite](https://vitejs.dev/)
|
|
|
|
Vite is the main tool to develop the react application.
|
|
|
|
Its uses the following files to configure the project :
|
|
- `vite.config.ts`
|
|
- `.env*`
|
|
- `src/vite-env.d.ts`
|
|
|
|
Others dependencies:
|
|
- @vitejs/plugin-react
|
|
|
|
|
|
# [Tailwind CSS](https://tailwindcss.com/)
|
|
|
|
CSS framework designed around constraints with utility classes in order to reduce dead css code.
|
|
|
|
Its uses the following files to configure the project :
|
|
- `src/index.scss`
|
|
- `tailwind.config.cjs`
|
|
- `postcss.config.cjs`
|
|
|
|
Other dependencies:
|
|
- postcss
|
|
- sass
|
|
- autoprefixer
|
|
|
|
|
|
# [Heroicons](https://heroicons.com/)
|
|
|
|
SVG Icons that can be used as JSX elements with Tailwind CSS
|
|
|
|
# [Interweave](https://interweave.dev/)
|
|
|
|
React library to render HTML from string.
|
|
In this project, it is particularly used for the CustomSVG property.
|
|
|
|
If this dependencies gets deprecated please revert [PR#18 e96e4f12](https://dev.azure.com/enguyen0660/SVGLayoutDesignerReact/_git/SVGLayoutDesignerReact/commit/e96e4f123b4aa4c9cdb327d4d617ab0e63dc4d0f?refName=refs%2Fheads%2Fdev)
|
|
|
|
# Testing
|
|
|
|
- [Vitest](https://vitest.dev/)
|
|
- [Testing Library](https://testing-library.com/)
|
|
- [jsdom](https://github.com/jsdom/jsdom)
|
|
|
|
|
|
# [eslint](https://eslint.org/)
|
|
|
|
A Linter. Used for error checking, syntax checking and code style enforcing.
|
|
|
|
Currently using `standard-with-typescript` with a few modification.
|
|
|
|
See the `.eslintrc.cjs` for more informations.
|
|
|
|
Other dependencies:
|
|
- typescript-eslint/eslint-plugin
|
|
- typescript-eslint/parser
|
|
- eslint-plugin-import
|
|
- eslint-plugin-n
|
|
- eslint-plugin-promise
|
|
- eslint-plugin-react
|