https://github.com/gapitio/htmlgraphics-react-bundler-template
https://github.com/gapitio/htmlgraphics-react-bundler-template
eslint grafana htmlgraphics-bundler prettier react rollup typescript
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/gapitio/htmlgraphics-react-bundler-template
- Owner: gapitio
- Created: 2021-01-28T12:17:01.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2022-07-27T12:50:14.000Z (almost 4 years ago)
- Last Synced: 2023-03-03T23:10:50.930Z (over 3 years ago)
- Topics: eslint, grafana, htmlgraphics-bundler, prettier, react, rollup, typescript
- Language: TypeScript
- Size: 525 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bundler
Bundler to make developing code easier and scalable.
## Contains
- [React](https://reactjs.org/)
- [rollup.js](https://rollupjs.org/)
- [Prettier](https://prettier.io/)
- [TypeScript](https://www.typescriptlang.org/)
- [ESLint](https://eslint.org/)
- Local development server to run the code live in the browser.
## Usage
First you have to install the required dependencies
```bash
npm install
```
Then you start the development script
```bash
npm run dev
```
Go to . Change some code in `./src/onInit.ts`, `./src/onRender.ts`, or `./src/design/html.html`, and the website will update.
When the code is ready to be uploaded to Grafana, start the build script
```bash
npm run build
```
Then go to `/dist` and copy the content of `panel-options.json` to the panels `Import/export` option.
## Dev site
`src/devSite` is a folder where most of the configuration for the dev website is.
To add custom series go to `src/devSite/data.ts` and add createSeries() in series.
Window has been used to get global variables like data, customProperties, ETC.
## Eslint
It's recommended to use the current eslint config, but as it's strongly opinionated it might be _easier_ to use a less opinionated config.
Replace the current .eslint.cjs with the below code.
```ts
module.exports = {
env: {
node: true,
browser: true,
},
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
],
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
root: true,
};
```