open-index/open-npm huggingface dataset:
npm package: @grafana/agent-integration-react
Description: Grafana JavaScript Agent package that enables easier integration in projects built with React.
Author: Grafana Labs
Latest version: 0.6.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @grafana/agent-integration-react

**DEPRECATED** _Project has been moved to [@grafana/faro-react](https://www.npmjs.com/package/@grafana/faro-react)_

Grafana JavaScript Agent package that enables easier integration in projects built with React.

_Warning_: currently pre-release and subject to frequent breaking changes. Use at your own risk.

Out of the box, the package provides you the following features:

- Error Boundary - Provides additional stacktrace for errors
- Component Profiler - Capture every re-render of a component, the un/mounting time etc.
- Router (v4-v6) integration - Send events for all route changes
- SSR support

## Installation

```ts
import { createRoutesFromChildren, matchRoutes, Routes, useLocation, useNavigationType } from 'react-router-dom';

import {
  getWebInstrumentations,
  initializeGrafanaAgent,
  ReactIntegration,
  ReactRouterVersion,
} from '@grafana/agent-integration-react';
import { TracingInstrumentation } from '@grafana/agent-tracing-web';

initializeGrafanaAgent({
  // ...
  instrumentations: [
    // Load the default Web instrumentations
    ...getWebInstrumentations(),

    // Tracing Instrumentation is needed if you want to use the React Profiler
    new TracingInstrumentation(),

    new ReactIntegration({
      // Only needed if you want to use the React Router instrumentation
      router: {
        version: ReactRouterVersion.V6,
        dependencies: {
          createRoutesFromChildren,
          matchRoutes,
          Routes,
          useLocation,
          useNavigationType,
        },
      },

      // Or if you use react-router v4/v5
      router2: {
        version: ReactRouterVersion.V5, // or ReactRouterVersion.V4,
        dependencies: {
          history, // the history object used by react-router
          Route, // Route component imported from react-router package
        },
      },
    }),
  ],
});
```

## Usage

### Error Boundary

```tsx
import { GrafanaAgentErrorBoundary } from '@grafana/agent-integration-react';

// during render
<GrafanaAgentErrorBoundary>
  <App />
</GrafanaAgentErrorBoundary>;
```

or

```tsx
import { withErrorBoundary } from '@grafana/agent-integration-react';

export default withErrorBoundary(App);
```

### Router

### V6

```tsx
import { GrafanaAgentRoutes } from '@grafana/agent-integration-react';

// during render
<GrafanaAgentRoutes>
  <Route path="/" element={<Home />} />
  {/* ... */}
</GrafanaAgentRoutes>;
```

### V4/v5

```tsx
import { GrafanaAgentRoute } from '@grafana/agent-integration-react';

// during render
<Switch>
  <GrafanaAgentRoute path="/">
    <Home />
  </GrafanaAgentRoute>
  {/* ... */}
</Switch>;
```

### Profiler

```tsx
import { withGrafanaAgentProfiler } from '@grafana/agent-integration-react';

export default withGrafanaAgentProfiler(App);
```
npm package: @grafana/aws-sdk
Description: Common AWS features for grafana
Author: Grafana Labs
Latest version: 0.10.2

# Grafana AWS SDK

This is a common package that can be used for all amazon plugins.

## Compatibility

@grafana/aws-sdk-react version >=0.7.0 is not compatible with Grafana versions <=10.3.x

## Frontend configuration

see the ./src folder

## Drone configuration

Drone signs the Drone configuration file. This needs to be run every time the drone.yml file is modified. See https://github.com/grafana/deployment_tools/blob/master/docs/infrastructure/drone/signing.md for more info.

### Update drone build

If you have not installed drone CLI follow [these instructions](https://docs.drone.io/cli/install/)

To sign the `.drone.yml` file:

```bash
# Get your drone token from https://drone.grafana.net/account
export DRONE_TOKEN=<Your DRONE_TOKEN>

drone --server https://drone.grafana.net sign --save grafana/grafana-aws-sdk-react
```

### Local Development

For local development instructions, please see the [contributing guide](https://github.com/grafana/grafana-aws-sdk-react/blob/main/CONTRIBUTING.md).
npm package: @grafana/eslint-config
Description: Grafana's ESLint config
Author: Grafana Labs
Latest version: 9.0.0

# grafana-eslint-config

> Grafana's [ESLint](https://eslint.org) config.

## Installation

```shell
yarn add @grafana/eslint-config --dev
```

or:

```shell
npm install @grafana/eslint-config --save-dev
```

Don't forget to install peerDependencies.

1. Install the correct versions of each package, which are listed by the command:

```sh
npm info "@grafana/eslint-config@latest" peerDependencies
```

If using **npm 5+**, use this command:

```sh
npx install-peerdeps --dev @grafana/eslint-config
```

If using a different package manager, run `npm info "@grafana/eslint-config@latest" peerDependencies` to list the peer dependencies and versions. Then run `yarn add --dev <dependency1>@<version> <dependency2>@<version> <dependency3>@<version>` for the listed peer dependencies.

## Configuration (new: eslint.config.js)

From v8.21.0, Eslint introduced a new flat config system where `eslint.config.js` replaces `.eslintrc*` as the default config file name. Eslint@8.x supports both systems, while Eslint@9.x only supports the new flat config.

A guide on how to migrate to a flat config can be found [here](https://eslint.org/docs/latest/extend/plugin-migration-flat-config).

The following official blog posts are available for interested parties:

- https://eslint.org/blog/2022/08/new-config-system-part-1/
- https://eslint.org/blog/2022/08/new-config-system-part-2/
- https://eslint.org/blog/2022/08/new-config-system-part-3/

This package contains a single flat config object which can be imported like so:

```js
const grafanaConfig = require("@grafana/eslint-config/flat");

/**
 * @type {Array<import('eslint').Linter.Config>}
 */
module.exports = [
  ...grafanaConfig,
  … /* rest of your config */
];
```

You are then free to add/override properties.

Note: Our shareable configs does not preconfigure `files`, `ignore`, or `languageOptions.globals`. For most of the cases, you probably want to configure some properties for your project.

```js
const grafanaConfig = require("@grafana/eslint-config/flat");

/**
 * @type {Array<import('eslint').Linter.Config>}
 */
module.exports = [
  {
    ignores: [".github", ".yarn", "**/build/", "**/compiled/", "**/dist/"],
  },
  ...grafanaConfig,
  {
    name: "myproject/defaults",
    files: ["**/*.{ts,tsx,js,jsx}"],
    rules: {
      // add custom rules here.
    },
  },
];
```

## Configuration (legacy: .eslintrc\*)

Extend our configuration to get reasonable defaults:

```json
{
  "extends": ["@grafana/eslint-config"]
}
```

It will automatically handle `*.(js|ts|tsx)` files.
npm package: @grafana/faro-react
Description: Faro package that enables easier integration in projects built with React.
Author: Grafana Labs
Latest version: 2.3.1

# @grafana/faro-react

Faro package that enables easier integration in projects built with React.

Out of the box, the package provides you the following features:

- Error Boundary - Provides additional stacktrace for errors and configuration options for
  pushError behavior
- Component Profiler - Capture every re-render of a component, the un/mounting time etc
- Router (v4–v7) integration - Send events for all route changes.

The Faro Web SDK is a highly configurable open source real user monitoring (RUM) library built on
OpenTelemetry and integrating seamlessly with Grafana Cloud and Grafana Frontend Observability.

Faro-React is a distribution of the Faro Web SDK for project using React, which offers easier
integrations and the following features:

- **Support for React Router v4–v7**: send events for all route changes, including the data
  router API
- **Error boundary**: enhancements to stack traces and configuration options for pushError behavior
- **Component profiler**: to capture component renders, un/mounting time, and more.

## How to instrument with Faro React

For a complete guide to instrumenting web applications with the Faro-React Web SDK, refer to our
Grafana Cloud Frontend Observability [documentation](https://grafana.com/docs/grafana-cloud/monitor-applications/frontend-observability/instrument/faro-react/).
npm package: @grafana/faro-transport-batch
Description: Faro transport to batch and transfer signals to a selected transport for sending.
Author: Grafana Labs
Latest version: 1.0.5

# @grafana/transport-batch

Faro transport to batch and transfer signals to a selected transport for sending.

❗️*Warning*: this package is experimental and may be subject to frequent and breaking changes.
Use at your own risk.❗️

The Faro Batch Transport batches the signals it receives and transfers them to configured Transport.
Batching signals is either done by (signal) count or by a specific time window.

The count as well as the time window can be adjusted to your needs.

If a user navigates to another page, switches or closes the tab, minimizes or closes the browser,
the batch buffer will be flushed and it's items will be sent so no data is lost.

If on mobile, it also sends data if user switches from the browser to a different app.

❗️*Warning*:\
Currently the only Transport which supports batched RUM data is the `OtlpHttpTransport`.
Others will follow soon.

## Installation

```ts
import { getWebInstrumentations, initializeFaro } from '@grafana/faro-react';
import { BatchTransport } from '@grafana/faro-transport-batch';
import { OtlpHttpTransport } from '@grafana/faro-transport-otlp-http';

initializeFaro({
  // ...
  instrumentations: [
    // Load the default Web instrumentations
    ...getWebInstrumentations(),
  ],
  transports: [
    new BatchTransport(
      new OtlpHttpTransport({
        apiKey: env.faro.apiKey,
        logsURL: 'https://example.com/v1/logs',
        tracesURL: 'https://example.com/v1/traces',
      }),
      {
        // This config object is optional and only needed if you want to change the defaults.
        batchSendCount: 80, // default is 50 signals.
        batchSendTimeout: 500, // default is 250ms
      }
    ),
  ],
});
```

## Usage

The BatchTransport is only responsible to do the batching logic.
To send the batch of signals you need to add a transport which supports to send a list of signals!

With the second parameter you can customize:

- The number of signals which should be included in a batch. Default is 50 signals.
- The time window after which the batch should be send. If set to 0, this functionality is turned of.
  Not that the timer will win over the count! Means items will forcefully send after
  `batchSendTimeout` independent from the signal count.
npm package: @grafana/grafana-aws-sdk
Description: Common AWS features for grafana
Author: Grafana Labs
Latest version: 0.0.3
Deprecated: use @grafana/aws-sdk instead

# Grafana AWS SDK

This is a common package that can be used for all amazon plugins.


## Backend plugins (go sdk)

see the ./pkg folder
                                                          |

## Frontend configuration

see the ./src folder
npm package: @grafana/levitate-bq
Description: takes @grafana/levitate output and streams it to BigQuery
Author: Grafana Labs
Latest version: 0.3.1

# Levitate with BigQuery

This is a utility tooling for shipping levitate data into big query.

## Install

```bash
yarn install
```

## Usage

**Together with levitate**

```bash
# Build the binary
yarn build

# Specify the google bigquery credentials file path via
export BQ_SA_KEY="<json-from-your-key-file>"
export BQ_PROJECT="<name-of-project>"

# Use levitate to get all imports for packages and send to big query
npx @grafana/levitate gobble [args] | node ./dist/index.js \
    -dataset gcom_plugins \
    -table grafana_import
```

**Together with local example**

```bash
# Build the binary
yarn build

# Pipe an already existing json file of package imports and send to big query
cat example.json | node ./dist/index.js \
    -dataset gcom_plugins \
    -table grafana_import
```
npm package: @grafana/lezer-logql
Description: Grafana Loki logQL lezer grammar
Author: Grafana Labs
Latest version: 0.3.0

# lezer-logql

LogQL lezer grammar based on https://github.com/grafana/loki/blob/main/pkg/logql/syntax/expr.y.

## Installation

```
npm install
```

## Development

### Building

```
npm run build
```

### Testing

```
npm test
```
npm package: @grafana/plugin-docs-cli
Description: CLI tool for developing, validating and previewing Grafana plugin documentation locally.
Author: Grafana
Latest version: 0.0.10

# @grafana/plugin-docs-cli

CLI tool for developing, validating and previewing Grafana plugin documentation locally.

## Usage

The CLI reads `docsPath` from your plugin's `src/plugin.json` to locate the docs folder.

```bash
npx @grafana/plugin-docs-cli serve
npx @grafana/plugin-docs-cli serve --port 3001 --reload
```

For the core parsing library, see [@grafana/plugin-docs-parser](../plugin-docs-parser).
npm package: @grafana/plugin-meta-extractor
Description: Extract meta information from a Grafana plugin source code.
Author: Grafana
Latest version: 0.12.2

# Grafana / Plugin Meta Extractor

> [!WARNING]  
> This is an experimental project and may change at any time. It is not yet used in any of our tools and does not reliably work with most of our app plugin implementation patterns.

`@grafana/plugin-meta-extractor` is a cli tool that can be used to extract meta-information from the source code of a Grafana plugin. It is used to generate plugin metadata without the need for manual intervention, which is then used by the Grafana application to understand features or functionalities a plugin supports or uses.

## Install

```
npm install @grafana/plugin-meta-extractor --save-dev
```

## Usage

#### With Webpack

The package exposes a webpack plugin that can be used to generate plugin meta-information on every build based on the source code. The plugin adds additional information to the `plugin.json` file by overriding the `generated` property in the JSON.

```ts
// webpack.config.ts
// -----------------

import { GrafanaPluginMetaExtractor } from '@grafana/plugin-meta-extractor';

export default {
  // ...
  plugins: [
    new GrafanaPluginMetaExtractor(),
    // ...
  ],
};
```

#### In code

The package exposes the methods for extracting the meta-data so they can be used manually:

```ts
import { extractPluginMeta } from '@grafana/plugin-meta-extractor';

const entryPoint = `${PLUGIN_ROOT}/src/module.ts`;
const pluginMeta = extractPluginMeta(entryPoint);
```

#### CLI

By calling the binary against a (module.ts|tsx) file, the package will print out the extracted meta-data to the console.

```bash
# Run local build
./dist/bin/run.js ~/my-grafana-plugin/src/module.ts

# Run latest remote version
npx @grafana/plugin-meta-extractor ~/my-grafana-plugin/src/module.ts
```

## Returned data format

The returned meta-data is in the following format:

```ts
{
  extensions: Array<{
    type: "link" | "component",
    extensionPointId: string,
    title: string,
    description: string
  }>
}
```

## Plugin support

This package requires the `module.(ts|tsx)` to be in a certain format to be able to parse it (we are planning to improve on this in the future). The method calls for registering extensions have to be in the `module.(ts|tsx)`, and they need to be called on the `AppPlugin` instance in a "chained" manner:

```ts
// src/module.ts
export const plugin = new AppPlugin<{}>()
  .setRootPage(App)
  .configureExtensionLink<PluginExtensionPanelContext>({
    // ...
  })
  .configureExtensionLink<PluginExtensionPanelContext>({
    // ...
  });
```

---

## Contributing

We are always grateful for contributions! See [CONTRIBUTING.md](../../CONTRIBUTING.md) for more information.
npm package: @grafana/tsconfig
Description: Grafana's TypeScript config
Author: Grafana Labs
Latest version: 2.0.1

# grafana-tsconfig

> Grafana's [TypeScript](https://typescriptlang.org) config.

## Installation

```shell
yarn add @grafana/tsconfig --dev
```

or:

```shell
npm install @grafana/tsconfig --save-dev
```

## Usage

```json
{
  "extends": "@grafana/tsconfig"
}
```

or:

```json
{
  "extends": "@grafana/tsconfig/base.json"
}
```
npm package: @grafarg/e2e
Description: Grafarg End-to-End Test Library
Author: Famarks
Latest version: 7.4.73

# Grafarg End-to-End Test library

> **@grafarg/e2e is currently in BETA**.

This package contains an API wrapper built on top of [Cypress](https://www.cypress.io) that simplifies creating end-to-end tests for Grafarg. More information can be found [here](https://github.com/famarks/grafarg/blob/master/contribute/style-guides/e2e.md).
npm package: @grafarg/tsconfig
Description: Grafarg's TypeScript config
Author: Famarks
Latest version: 1.2.0-rc1

# grafarg-tsconfig
> Grafarg's [TypeScript](https://typescriptlang.org) config.


## Installation
```shell
yarn add @grafarg/tsconfig --dev
```

or:
```shell
npm install @grafarg/tsconfig --save-dev
```


## Usage
```json
{
  "extends": "@grafarg/tsconfig"
}
```

or:
```json
{
  "extends": "@grafarg/tsconfig/base.json"
}
```


## Publishing

Publishing is handled by github actions which is triggered by a merge to master that contains a change to the version property in the `package.json` file. You can either do that manually or use the command below to version bump, commit and tag.

```shell
npm version [<newversion> | major | minor | patch ]
```

Also be sure to update any official packages that depend on this with fixes and version increases.


## Versioning
It's probable that *any* change will be a breaking one, so it's best to stick to major version releases.