{"id":26058050,"url":"https://github.com/gapitio/htmlgraphics-bundler-example","last_synced_at":"2025-10-10T11:11:18.989Z","repository":{"id":51267726,"uuid":"299567451","full_name":"gapitio/htmlgraphics-bundler-example","owner":"gapitio","description":"A bundler example for using togheter with gapit-htmlgraphics-panel","archived":false,"fork":false,"pushed_at":"2021-05-18T10:36:33.000Z","size":97,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-06T06:49:27.086Z","etag":null,"topics":["eslint","example","grafana","prettier","rollup","svg","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gapitio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-29T09:25:59.000Z","updated_at":"2021-05-18T10:36:07.000Z","dependencies_parsed_at":"2022-08-29T23:52:26.394Z","dependency_job_id":null,"html_url":"https://github.com/gapitio/htmlgraphics-bundler-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gapitio/htmlgraphics-bundler-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapitio%2Fhtmlgraphics-bundler-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapitio%2Fhtmlgraphics-bundler-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapitio%2Fhtmlgraphics-bundler-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapitio%2Fhtmlgraphics-bundler-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gapitio","download_url":"https://codeload.github.com/gapitio/htmlgraphics-bundler-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapitio%2Fhtmlgraphics-bundler-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279003726,"owners_count":26083610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eslint","example","grafana","prettier","rollup","svg","typescript"],"created_at":"2025-03-08T12:00:02.441Z","updated_at":"2025-10-10T11:11:18.961Z","avatar_url":"https://github.com/gapitio.png","language":"TypeScript","readme":"# Bundler example\n\nBundler example to make developing code easier and scalable.\n\nThere is no weird code styles, because most of the configuration is as basic as it can be. A good example of this is by looking at the `.prettierrc.json` file.\n\n## Table of contents\n\n- [Bundler example](#bundler-example)\n  - [Table of contents](#table-of-contents)\n  - [Why use a bundler](#why-use-a-bundler)\n  - [Usage](#usage)\n  - [Dev site](#dev-site)\n  - [Choices](#choices)\n    - [Rollup](#rollup)\n    - [Typescript](#typescript)\n    - [Eslint](#eslint)\n    - [Prettier](#prettier)\n\n## Why use a bundler\n\n1. Scalable\n\n   It is much easier to split the code up in files and components, and let the bundler combine/merge them into one file. Which makes it much more scalable.\n\n2. No need for internet\n\n   If someone uses Grafana on a different computer/server, and they are on the same network, they can still use the graphics used. _Same for closed networks_\n\n   Since all the code is bundled together, the code don't need internet to use a module. E.g [svg.js](https://svgjs.com/docs/3.0/), [vue](https://vuejs.org/), custom created modules (like format-si.ts used in this example), ETC\n\n3. Reusable\n\n   By making it component based, it's a lot easier to create a central location, like github and npm, for all the components and update them independently. This will remove the part where you have to try and find the code in a different project, and you can instead look for the component you need in the central location.\n\n## Usage\n\nFirst you have to install the required dependencies\n\n```bash\nyarn install\n```\n\nThen you start the development script\n\n```bash\nyarn run dev\n```\n\nGo to \u003chttp://localhost:5000\u003e. Change some code in `./src/on-init.ts`, `./src/on-render.ts`, and `./src/design/svg-data-inkscape.svg`, and the website will update.\n\nWhen the code is ready to be uploaded to Grafana, start the build script\n\n```bash\nyarn run build\n```\n\nThen go to `/dist` and copy the contents of the files to the corresponding options in the panel. (code-data.json to codeData, ETC)\n\n## Dev site\n\n`src/dev-site` is a folder where most of the configuration for the dev website is.\n\nTo add custom series go to `src/dev-site/data.ts` and add createSeries() in series.\n\nWindow has been used to get global variables like data, codeData, ETC.\n\n## Choices\n\n### Rollup\n\n[rollup.js](https://rollupjs.org/guide/en/)\n\n[Rollup.js The why](https://rollupjs.org/guide/en/#the-why)\n\nA good paragraph from [\"Why I use Rollup, and not Webpack\"](https://medium.com/@PepsRyuu/why-i-use-rollup-and-not-webpack-e3ab163f4fd3)\n\nRollup also does something very different compared to the other bundlers. It only tries to achieve one simple goal: Bundle ES modules together and optimise the bundle. It doesn’t understand node module imports, it doesn’t know what to do with CSS, it certainly can’t understand images. Instead, rather than trying to implement what it thinks is the best way to bundle different type of assets, it leaves that entirely up to the developer to decide.\n\n### Typescript\n\nGood quote from [Typescript's website](https://www.typescriptlang.org/) \"By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code.\"\n\nSome good articles\n\n- [How (and why) you should use TypeScript with Node and Express.](https://medium.com/javascript-in-plain-english/typescript-with-node-and-express-js-why-when-and-how-eb6bc73edd5d)\n- [The TypeScript Tax.](https://medium.com/javascript-scene/the-typescript-tax-132ff4cb175b)\n\n### Eslint\n\n[Eslint](https://eslint.org/) is a JavaScript linter that enables you to enforce a set of style, formatting, and coding standards for your codebase.\n\nIt works great with typescript through the [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint).\n\n### Prettier\n\n[Prettier](https://prettier.io/) is used to have standard code style.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapitio%2Fhtmlgraphics-bundler-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgapitio%2Fhtmlgraphics-bundler-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapitio%2Fhtmlgraphics-bundler-example/lists"}