open-index/open-npm huggingface dataset:
npm package: @perfsee/bundle-analyzer
Description: Bundle analyzer by perfsee
Latest version: 1.14.2

# `@perfsee/bundle-analyzer`

## Usage

```ts
import { StatsParser } from '@perfsee/bundle-analyzer'

// or const parser = StatsParser.FromStatsFile(webpackStatsFile)
const parser = StatsParser.FromStats(webpackStats, outputPath)

const { result, content } = await parser.parse()

// reference
console.log(result)

// module references tree
console.log(content)
```

## Credits

The module tree part is forked from [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
npm package: @perfsee/chrome-finder
Description: Chrome executable bin finder
Latest version: 1.14.2

# `@perfsee/chrome-finder`

Find local installed Google Chrome(Chromium) executable path or download it.

## Usage

```
const { findChrome } = require('chrome-finder');

findChrome(({ executablePath, browser }) => {
  // absolute path to the chrome executable
  console.log(executablePath)
  // result of `chrome --version`, e.g. `Google Chrome xx.xx.xx.xx`
  console.log(browser)
})
```

## Credits

This package is a fork of [mbalabash/find-chrome-bin](https://github.com/mbalabash/find-chrome-bin) which only works with `node>=16` (specified in engines)
npm package: @perfsee/flamechart
Description: Web-based viewer for performance profiles
Latest version: 1.14.2

## flamechart

a flamechart component for react.

[![example](https://user-images.githubusercontent.com/13579374/194684518-f5f73324-f622-475c-b75c-939d91830d1c.png)](https://codesandbox.io/s/flamechart-simple-example-xkg4uw?file=/src/App.js)

### Usage

```js
import { importMainThreadProfileFromChromeTimeline, FlamechartContainer } from '@perfsee/flamechart'

const rawChromeProfile = require('example-chrome-profile.json')
const profile = importMainThreadProfileFromChromeTimeline(rawChromeProfile)

const render = () => <FlamechartContainer profile={profile} />
```

Notice:

1. `importMainThreadProfileFromChromeTimeline()` is very slow, please cache the results.
2. `<FlamechartContainer />` use '100%' for the height and width, please wrap it with a div parent element with defined width & height.

### Example

[simple graph](https://codesandbox.io/s/flamechart-simple-example-xkg4uw)

[color themes](https://codesandbox.io/s/flamechart-theme-example-qpxhmt)

[flamechart with timings](https://codesandbox.io/s/flamechart-timing-example-lbmglt)

[multiple graph](https://codesandbox.io/s/flamechart-group-example-yswipr)

[network graph](https://codesandbox.io/s/flamechart-network-graph-example-tjlq9p)

### Props

```ts
interface FlamechartProps {
  /**
   * the profile object returned by import functions
   */
  profile: Profile
  /**
   * the default focused frame key object
   */
  focusedFrame?: { key: string }
  /**
   * callback when `open file` action triggered
   */
  onRevealFile?: (frame: Frame) => void
  /**
   * custom theme
   */
  theme?: Theme
  /**
   * extra timing values will be drawn down across the chart
   */
  timings?: Timing[]
  /**
   * initial start time when first rendering the chart
   */
  initialLeft?: number
  /**
   * initial end time when first rendering the chart
   */
  initialRight?: number
  /**
   * min value for chart start time
   */
  minLeft?: number
  /**
   * max value for chart end time
   */
  maxRight?: number
  /**
   * show timing labels at the bottom of the chart
   */
  bottomTimingLabels?: boolean
  /**
   * distance to pad below content in the chart
   */
  bottomPadding?: number
  /**
   * flamechart factory
   */
  flamechartFactory?: FlamechartFactory
  /**
   * hidden frame labels
   */
  hiddenFrameLabels?: boolean
  /**
   * whether show stack detail view when focused on certain frame
   */
  disableDetailView?: boolean
  /**
   * disable search box and ctrl-f shortcuts
   */
  disableSearchBox?: boolean
  /**
   * disable the timeline cursor following the mouse
   */
  disableTimelineCursor?: boolean
  /**
   * only matched frames will be shown as root frames
   */
  rootFilter?: RootFilter
  /**
   * render custom tooltip
   */
  renderTooltip?: (frame: FlamechartFrame, flamechart: Flamechart, theme: Theme) => React.ReactNode
  /**
   * render custom tooltip for timings
   */
  renderTimingTooltip?: (timing: Timing, flamechart: Flamechart, theme: Theme) => React.ReactNode
}
```

### Credits

This package is a forked from [speedscope](https://github.com/jlfwong/speedscope)
npm package: @perfsee/jsonr
Description: JSON with references
Latest version: 1.14.2

## jsonr

JSON with references

# Example

```
import JSONR from '@perfsee/jsonr'

const jsonrStr = JSONR.stringify({ hello: "world" })
const obj = JSONR.parse(jsonrStr)
```

# Format

```JS
const obj = { a: { hello: 'world', foooobar: 1 }, b: [] as any[] }
obj.b.push(obj.a, obj.a, obj.a)

const jsonrStr = JSONR.stringify(obj)

jsonrStr ->

{
  "a": {
    "hello": "world",
    "foooobar"$0: 1
  },
  "b": [
    {
      "hello"$1: "world"$2,
      $0: 1
    },
    {
      $1:$2,
      $0: 1
    },
    {
      $1:$2,
      $0: 1
    }
  ]
}
```
npm package: @perfsee/package
Description: package analyzer sdk by perfsee
Latest version: 1.14.2

# `@perfsee/package`

[Repo](https://github.com/perfsee/perfsee) | [Docs](https://perfsee.com/docs)

Perfsee SDK to analyze packages and upload results to perfsee platform.

## Usage

### Analyze package and upload to platform

If there are benchmark files described below which named `xxx.bench.{js,ts}`(by default), this command will run benchmarks before uploading.

```bash
PERFSEE_TOKEN=<your-token> npx @perfsee/package <path-to-package> --project=<perfsee-project-id>
```

Environment `PERFSEE_TOKEN` and option `project` are necessary.

### Create benchmark file

Create a file named `test.bench.js` under the project.

```js
const Benchmark = require('@perfsee/package')

Benchmark('foo', () => {
  bar()
})

Benchmark('bar', [
  {
    test: () => {
      baz()
    },
    options: { name: 'baz' },
  },
  {
    test: async () => {
      await setup()
      return () => {
        quz()
      }
    },
    options: { name: 'quz with async setup' },
  },
])
```

All benchmark files will be run during the analysis phase (if target is not `browser`).

## CLI Options

### project

Id of your perfsee project on the platform.

### target: `'browser'` | `'node'`

#### default: `'node'`

If target is `browser`, benchmarks will be bundled and run in headless chrome on server.

### benchmarkPattern

#### default: `'*.{bench|benchmark}.{js|ts}'`

Glob pattern to find benchmark files.
npm package: @perfsee/sdk
Description: perfsee sdk
Latest version: 1.14.2

# `@perfsee/sdk`

> Perfsee sdk and command line tools

## Installation

```
npm install -g @perfsee/sdk
```

## Usage

### Take snapshot

Take a snapshot for all pages of the project.

```
perfsee take-snapshot -p <your-project-id> --token <your-access-token>
```

This command requires the project id from `-p, --project` and the access token
from `--token` or environment variable `PERFSEE_TOKEN`, you can create the token
from [https://perfsee.com/access-token](https://perfsee.com/access-token).

You can filter the pages by appending page names to the command.

For example take a snapshot for `Home Page` and `User Page`:

```
perfsee take-snapshot -p <your-project-id> --token <your-access-token> "Home Page" "User Page"
```

### Webhook type

This package also provides TypeScript definitions for the Perfsee webhook.

You can use it on your webhook server with the code below. Learn more in our [Webhook Guide](https://perfsee.com/docs/settings/webhook-setting).

```ts
import express from 'express'
import { WebhookEvent } from '@perfsee/sdk'

const app = express()

app.post('/callback', express.json(), function (req, res) {
  const json = req.body as WebhookEvent
  console.log(json)
})

app.listen(3001)
```

## License

This project is licensed under the [Apache-2.0 License](LICENSE).
npm package: @perfsee/treemap
Description: Web tree map chart, based on webgl.
Latest version: 1.14.2

# Treemap

Web tree map chart, based on webgl.

[![](https://user-images.githubusercontent.com/13579374/224657148-9125c3ba-6716-492e-afc9-72a102f4f2f7.png)](https://codesandbox.io/s/treemap-demo-4dehlh?file=/src/index.js)

[CodeSandbox Demo](https://codesandbox.io/s/treemap-demo-4dehlh?file=/src/index.js)

## Usage

```ts
import { hierarchy, TreeMap } from '@perfsee/treemap'

const treemapData = hierarchy({
  name: 'root',
  children: [
    {
      name: 'a',
      value: 30,
    },
    {
      name: 'b',
      value: 70,
    },
  ],
}).sum((d) => (d.children ? 0 : d.value || 0))

const treeMap = new TreeMap(canvasRef.current!, treemapData)
```

Notion:

- The `hierarchy()` function is re-export from `d3-hierarchy` module, you can find the document from [here](https://github.com/d3/d3-hierarchy).