Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://microsoft.github.io/sarif-web-component/
A React-based component for viewing SARIF files.
https://microsoft.github.io/sarif-web-component/
react react-components sarif
Last synced: 3 months ago
JSON representation
A React-based component for viewing SARIF files.
- Host: GitHub
- URL: https://microsoft.github.io/sarif-web-component/
- Owner: microsoft
- License: mit
- Created: 2018-12-06T19:01:07.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-04-19T19:26:48.000Z (7 months ago)
- Last Synced: 2024-05-09T17:51:36.851Z (6 months ago)
- Topics: react, react-components, sarif
- Language: TypeScript
- Homepage:
- Size: 1.9 MB
- Stars: 72
- Watchers: 15
- Forks: 29
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-codeql - SARIF Viewer Web Component
README
[](https://www.npmjs.com/package/@microsoft/sarif-web-component)
# SARIF Web Component
A React-based component for viewing [SARIF](https://www.sarif.info) files. [Try it out](https://microsoft.github.io/sarif-web-component/).
## Usage
```
npm install @microsoft/sarif-web-component
```
```js
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import {Viewer} from '@microsoft/sarif-web-component'
ReactDOM.render(, document.body.firstChild)
```
In the HTML page hosting this component, `` is required to avoid text rendering issues.
## Publishing
Update the package version. Run workflow `Publish`. Make sure Repository secret `NODE_AUTH_TOKEN` exists.
## Publishing (Manual)
In your local clone of this repo, do the following. Double-check `package.json` `name` in case it was modified for development purposes.
```
git pull
npm install
npx webpack --config ./webpack.config.npm.js
npm login
npm publish
```
For a scoped non-paid accounts (such as for personal testing), publish would require: `npm publish --access public`.
For a dry-run publish: `npm publish --dry-run`. Careful: the typo `--dryrun` results in a real publish.
## Publishing (Local/Private)
As needed, run `git pull` and `npm install`. Then...
```
npx webpack --config ./webpack.config.npm.js
npm pack
```
Our convention is to move/keep the tarballs in the `packages` directory.
## Bundle Size Analysis
In `webpack.config.common.js` temporarily disable `stats: 'minimal'`.
```
npx webpack --profile --json > stats.json
npx webpack-bundle-analyzer stats.json
rm stats.json
```
## Contributing
This project welcomes contributions and suggestions. Most contributions require you to agree to a
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
the rights to use your contribution. For details, visit https://cla.microsoft.com.
When you submit a pull request, a CLA-bot will automatically determine whether you need to provide
a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions
provided by the bot. You will only need to do this once across all repos using our CLA.
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
contact [[email protected]](mailto:[email protected]) with any additional questions or comments.