open-index/open-npm huggingface dataset:
npm package: @scruffymongrel/npm-browser-package
Description: <div align="center">
Latest version: 0.1.2

<div align="center">

  <h1><code>wasm-pack-template</code></h1>

  <strong>A template for kick starting a Rust and WebAssembly project using <a href="https://github.com/rustwasm/wasm-pack">wasm-pack</a>.</strong>

  <p>
    <a href="https://travis-ci.org/rustwasm/wasm-pack-template"><img src="https://img.shields.io/travis/rustwasm/wasm-pack-template.svg?style=flat-square" alt="Build Status" /></a>
  </p>

  <h3>
    <a href="https://rustwasm.github.io/docs/wasm-pack/tutorials/npm-browser-packages/index.html">Tutorial</a>
    <span> | </span>
    <a href="https://discordapp.com/channels/442252698964721669/443151097398296587">Chat</a>
  </h3>

  <sub>Built with 🦀🕸 by <a href="https://rustwasm.github.io/">The Rust and WebAssembly Working Group</a></sub>
</div>

## About

[**📚 Read this template tutorial! 📚**][template-docs]

This template is designed for compiling Rust libraries into WebAssembly and
publishing the resulting package to NPM.

Be sure to check out [other `wasm-pack` tutorials online][tutorials] for other
templates and usages of `wasm-pack`.

[tutorials]: https://rustwasm.github.io/docs/wasm-pack/tutorials/index.html
[template-docs]: https://rustwasm.github.io/docs/wasm-pack/tutorials/npm-browser-packages/index.html

## 🚴 Usage

### 🐑 Use `cargo generate` to Clone this Template

[Learn more about `cargo generate` here.](https://github.com/ashleygwilliams/cargo-generate)

```
cargo generate --git https://github.com/rustwasm/wasm-pack-template.git --name my-project
cd my-project
```

### 🛠️ Build with `wasm-pack build`

```
wasm-pack build
```

### 🔬 Test in Headless Browsers with `wasm-pack test`

```
wasm-pack test --headless --firefox
```

### 🎁 Publish to NPM with `wasm-pack publish`

```
wasm-pack publish
```

## 🔋 Batteries Included

* [`wasm-bindgen`](https://github.com/rustwasm/wasm-bindgen) for communicating
  between WebAssembly and JavaScript.
* [`console_error_panic_hook`](https://github.com/rustwasm/console_error_panic_hook)
  for logging panic messages to the developer console.
* [`wee_alloc`](https://github.com/rustwasm/wee_alloc), an allocator optimized
  for small code size.
npm package: @scrumno/d-insp-react
Description: Zero-config React Inspector for Fetch/XHR and Renders
Latest version: 2.2.25

# @scrumno/d-insp-react

Мой теперь повседневный в работе с реактом помощник. Визуализация сетевых запросов, логгирование данных, отслеживание количества рендров компонента без использования `console.log`.

## Features

- **📡 Network**: Отслеживает все `fetch` и `XMLHttpRequest` (заголовки, body, статусы, тайминги).
- **⚛️ Renders**: Счетчик рендеров компонентов (хук `useDebugRender`).
- **📦 Logs**: Глобальная функция `d()` для логгирования значений и промисов.
- **🛡 Production Safe**: В продакшене код вырезается или становится пустышкой.
- **Copy Utils**: Копирование URL запроса и тела ответа/запроса в один клик.

## Installation

```bash
npm install @scrumno/d-insp-react
# или
yarn add @scrumno/d-insp-react
```

## Use

### 1. Оберни приложение

Добавь <DebugProvider> в корневой файл (например, main.tsx или App.tsx):

```tsx
import { DebugProvider } from '@scrumno/d-insp-react'

ReactDOM.createRoot(document.getElementById('root')!).render(
	<DebugProvider>
		<App />
	</DebugProvider>
)
```

Справа внизу появится кнопка 🐛 (только в NODE_ENV !== 'production').

### 2. Network Inspector

Инспектор автоматически перехватывает все запросы. Никакой настройки axios или fetch не требуется.

Что в панели:

- URL, Method, Status
- Request Body & Headers
- Response Body (авто-парсинг JSON)
- Время выполнения

### 3. Логгирование данных d()

Пакет регистрирует глобальную функцию d(). Не нужно ничего импортировать.

```tsx
// Лог переменной
d(userData)

// Лог промиса (покажет результат или ошибку, когда промис разрешится)
d(fetch('/api/status'))

// Функция возвращает значение, можно встраивать
const result = d(calculateValue())
```

### 4. Отслеживание рендеров

Тоже самое, ничего импортировать не нужно

```tsx
import { useDebugRender } from '@scrumno/d-insp-react'

export const UserCard = props => {
	// Передайте имя компонента и пропсы, если нужно
	useDebugRender('UserCard', props)

	return <div>...</div>
}
```

Открой таб RENDER, чтобы увидеть счетчик. Хук использует useEffect и useRef для корректного подсчета коммитов.