open-index/open-npm huggingface dataset:
npm package: @kde/react-icons-kit
Description: React Icons Kit using various Svg Icon set, forked from react-icons-kit
Author: Warren Mira
Latest version: 1.3.1


# react-icons-kit

## Installation

```
npm install --save react-icons-kit
```

## Documentation / Demo

Please visit [react-icons-kit](http://wmira.github.io/react-icons-kit/)

## Bundled Icon Sets

* [`IcoMoon`](https://github.com/Keyamoon/IcoMoon-Free) vmaster
* [`FontAwesome`](http://fortawesome.github.io/Font-Awesome/icons/) v4.7
* [`MaterialIcons`](https://www.google.com/design/icons/) v3.0.1
* [`Open Iconic`](https://github.com/iconic/open-iconic) v1.1.1
* [`Entypo`](http://entypo.com) latest
* [`Ikons`](http://ikons.piotrkwiatkowski.co.uk/) latest
* [`Metrize`](http://www.alessioatzeni.com/metrize-icons/) latest
* [`Octicons`](https://octicons.github.com/) v5.0.1
* [`Ionicons`](http://ionicons.com/) v2.0.1
* [`Linea`](http://linea.io/) latest
* [`Typicons`](http://typicons.com/) v2.0.8
* [`Noto Emoji Regular`](https://www.google.com/get/noto/#emoji-zsye/) latest
* [`Feather Icons`](https://feathericons.com/)latest

Plus more to come.

## Browse Icon Sets

Browse all available icons here: [react-icons-kit](http://wmira.github.io/react-icons-kit/index.html)

## Quick Start Guide

```javascript

    import Icon from 'react-icons-kit';
    import { ic_add_a_photo } from 'react-icons-kit/md/ic_add_a_photo';
    import { lock } from 'react-icons-kit/fa/lock';

    export const ShowIcons = () => {

        return (
            <div>
                <div><Icon icon={ic_add_a_photo}/><div>
                <div><Icon icon={lock}/><div>
            </div>
        )
    }
```

## Development

### React Icons Kit Site

To update the react-icons-kit site deployed at [react-icons-kit](http://wmira.github.io/react-icons-kit/index.html), you need to first
do the following. Assuming you are at the root folder:

1. npm install
2. npm run dist
3. cd site
4. npm install
5. cd node_modules
6. ln -sf ../../dist react-icons-kit
7. cd ..
8. npm start

You should now be able to live edit the website to do some changes, submit pull request.
npm package: @kdefi/pcs-sdk2
Description: 🛠 An SDK for building applications on top of Pancakeswap.
Latest version: 1.0.0

# Pancakeswap SDK Testnet

Forked from the [Uniswap SDK](https://github.com/Uniswap/uniswap-v2-sdk/commit/a88048e9c4198a5bdaea00883ca00c8c8e582605).

You can refer to the Uniswap SDK documentation [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).
npm package: @kderbyma/braid
Description: A Language-Agnostic Co-routine Framework - weave independent asynchronous strands into synchronized cords
Author: Kyle Derby MacInnis
Latest version: 1.0.2

# 🧶 Braid

A Language-Agnostic Co-routine Framework for weaving independent asynchronous "strands" into synchronized cords.

## Installation

```bash
npm install braid
# or
yarn add braid
# or
pnpm add braid
```

## Usage

```typescript
import { Braid, Loom, Fiber, Tension, fromArray, counter, interval, just } from 'braid';

// Create Fibers from various sources
const letters = fromArray(['A', 'B', 'C'], 'letters');
const numbers = fromArray([1, 2, 3], 'numbers');

// Weave them together with a Braid
const braid = new Braid([letters, numbers]);

// Collect all emitted tuples
const results = await Loom.collect(braid);
// → [["A",1], ["B",2], ["C",3]]

// Or use in for await loops
for await (const [letter, number] of braid) {
  console.log(`${letter}: ${number}`);
}
```

## Core Concepts

### Fiber

A Fiber wraps any `AsyncGenerator` and gives it an identity. It's the atom of the Braid.

```typescript
const fiber = new Fiber(async function* () {
  yield 1;
  yield 2;
  yield 3;
}, { name: 'myFiber' });
```

Fibers have built-in combinators:
- `map(fn)` - Transform values
- `filter(pred)` - Filter by predicate
- `take(n)` - Limit to n values
- `prepend(seed)` - Emit seed before starting

### Braid

A Braid weaves N Fibers together with different tension modes:

```typescript
// TIGHT (default) - Lock-step synchronization
const tight = new Braid([fiberA, fiberB]);

// LOOSE - Non-blocking, uses last known value
const loose = new Braid([fastFiber, slowFiber], { 
  tension: Tension.Loose 
});

// FRAYED - Strict fault intolerance
const frayed = new Braid([fiberA, fiberB], { 
  tension: Tension.Frayed 
});
```

### Loom

The Loom is the executor that runs a Braid to completion.

```typescript
// Run with handler
await Loom.run(braid, (value, index) => {
  console.log(`[${index}]`, value);
});

// Collect to array
const results = await Loom.run(braid);

// Run multiple concurrently
await Loom.runAll([
  [braidA, handlerA],
  [braidB, handlerB],
]);
```

## API Reference

### Classes

- `Fiber<T>` - Single async strand wrapper
- `Braid<Ts>` - Woven collection of Fibers  
- `Loom` - Executor for running Braids

### Enums

- `Tension.Tight` - Atomic lock-step (default)
- `Tension.Loose` - Non-blocking, cached values
- `Tension.Frayed` - Strict fault intolerance

### Combinators

- `merge(...fibers)` - Fan-in, unordered
- `zip(a, b)` - Binary zip into pairs
- `chain(...sources)` - Sequential interleaving
- `partition(fiber, pred)` - Split by predicate

### Factory Functions

- `fromArray(values)` - Create from array
- `counter(start, intervalMs)` - Infinite counter
- `interval(value, intervalMs)` - Periodic emitter
- `just(value)` - Single value

### Error Classes

- `BraidError` - Base error
- `BraidTimeoutError` - Timeout error for Frayed mode

## License

MIT
npm package: @kdesignable/formily-antd
Description: ### Install
Latest version: 1.0.0

# @kdesignable/formily-antd

### Install

```bash
npm install --save @kdesignable/formily-antd
```

### Peer dependencies

| Package                  | Range    |
| ------------------------ | -------- |
| `antd`                   | ^6.0.0   |
| `react` / `react-dom`    | >=18.0.0 |
| `@potop/formily-antd-v6` | ^2.0.1   |
| `@formily/react`         | ^2.3.7   |
| `@formily/reactive`      | ^2.3.7   |
| `@formily/shared`        | ^2.3.7   |

### Migration from v5

This package now targets **Ant Design v6** and **React 18+**.

Key changes:

- `@formily/antd-v5` has been replaced by `@potop/formily-antd-v6`.
- `@ant-design/v5-patch-for-react-19` is no longer required.
- All `antd/lib/*` deep imports have been removed.
- `Tabs.TabPane` and `Collapse.Panel` have been migrated to the `items` API.
- Deprecated schema props (`bordered`, `dropdownMatchSelectWidth`, `tooltipVisible`, `tooltipPlacement`) have been updated to their v6 equivalents in the built-in schema definitions.

#### Legacy schema support

Pass `migrateV5Schema: true` to `createDesigner()` to automatically normalize v5 prop keys when loading schemas created by the previous editor version. See the root README for the full normalization table.
npm package: @kdesigner/shared
Description: KDesigner 共享工具库 - 提供跨框架、跨包的通用工具函数和实用程序
Author: huangshan
Latest version: 0.0.0-alpha.7

# @kdesigner/shared

KDesigner 共享工具库 - 提供跨框架、跨包的通用工具函数和实用程序。

## 特性

- 🚀 **高性能**: 优化的算法实现和内存使用
- 🔒 **类型安全**: 完整的 TypeScript 类型支持
- 📦 **按需导入**: 支持 tree-shaking，减少打包体积
- 🌐 **跨平台**: 支持浏览器和 Node.js 环境
- 📚 **完整文档**: 详细的中文文档和示例

## 安装

```bash
pnpm add @kdesigner/shared
```

## 使用方式

### Namespace 导入（推荐）

```typescript
import { utils, validation, performance } from '@kdesigner/shared';

// 使用工具函数，避免命名冲突
const cloned = utils.deepClone(originalObject);
const isValid = validation.isEmail('test@example.com');
const debounced = performance.debounce(fn, 300);
```

### 按需导入

```typescript
// 方式一：从具体模块导入（避免冲突）
import { deepClone, merge } from '@kdesigner/shared/utils';
import { debounce, throttle } from '@kdesigner/shared/performance';
import { isEmail, isString } from '@kdesigner/shared/validation';

// 方式二：使用 namespace 导入（推荐）
import { utils, performance, validation } from '@kdesigner/shared';

const cloned = utils.deepClone(obj);
const debounced = performance.debounce(fn, 300);
const isValid = validation.isEmail('test@example.com');

// 方式三：模块级 namespace 导入
import { DateUtils, StringUtils } from '@kdesigner/shared/utils';
const formatted = DateUtils.formatDate(new Date());
```

## 模块说明

### 通用工具 (utils)
- **对象操作**: 深拷贝、合并、过滤、路径操作
- **数组操作**: 去重、分组、排序、分块
- **字符串处理**: 格式化、大小写转换、截断
- **数字处理**: 格式化、计算、验证
- **日期处理**: 格式化、计算、验证

### 类型检查和验证 (validation)
- **类型守卫**: 精确的类型检查函数
- **数据验证**: 邮箱、手机号、身份证等格式验证
- **结构验证**: 对象结构和模式匹配

### 性能优化 (performance)
- **防抖节流**: debounce 和 throttle 函数
- **缓存机制**: memoize 和 LRU 缓存
- **异步工具**: delay、sleep、批量处理

### 浏览器环境 (browser)
- **DOM 操作**: 安全的 DOM 查询和操作
- **存储操作**: localStorage 和 sessionStorage 封装
- **URL 处理**: URL 解析、构建和查询参数处理
- **Cookie 操作**: Cookie 读写和管理
- **浏览器检测**: 浏览器类型和特性检测

### 错误处理 (error)
- **异常处理**: try-catch 包装和错误边界
- **重试机制**: 可配置的重试策略
- **日志记录**: 分级日志和格式化
- **错误上报**: 错误收集和上报机制

## 开发

```bash
# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 运行测试
pnpm test

# 测试覆盖率
pnpm test:coverage

# 类型检查
pnpm type-check

# 代码检查
pnpm lint

# 构建
pnpm build
```

## 许可证

MIT
npm package: @kdesigner/sync
Description: KDesigner NPM包同步工具 - 支持同步包到npmmirror等镜像源
Author: huangshan
Latest version: 0.0.1

# @kdesigner/sync

KDesigner NPM包同步工具 - 支持同步包到npmmirror等镜像源

## 功能特性

- 🚀 **多种输入方式**：支持命令行参数、文件读取、交互式输入
- 🔍 **包验证**：自动验证包名格式和存在性
- 🔄 **重试机制**：内置网络重试和错误处理
- 📝 **详细日志**：提供控制台和文件日志记录
- 🎨 **友好界面**：彩色输出和进度提示
- 📦 **批量处理**：支持批量同步多个包

## 安装

```bash
# 全局安装
npm install -g @kdesigner/sync

# 或作为项目依赖
npm install @kdesigner/sync
```

## 使用方法

### 命令行工具

```bash
# 同步单个包
ksync lodash

# 同步多个包
ksync lodash axios react

# 从文件读取包名
ksync --file packages.txt

# 交互式输入
ksync --interactive

# 显示帮助
ksync --help
```

### 编程接口

```typescript
import { NpmMirrorSyncer } from '@kdesigner/sync'

const syncer = new NpmMirrorSyncer()

// 同步单个包
await syncer.syncPackage('lodash')

// 批量同步
const results = await syncer.syncPackages(['lodash', 'axios', 'react'])

// 从文件读取包名
const packages = await syncer.readPackagesFromFile('packages.txt')

// 交互式获取包名
const packages = await syncer.getPackagesInteractively()
```

## 文件格式

`packages.txt` 文件格式：

```text
# 这是一个注释行
lodash
@types/node
axios
react
```

## 支持的包名格式

- 普通包：`lodash`, `axios`, `react`
- 作用域包：`@types/node`, `@babel/core`
- 版本指定：`package@1.0.0` (自动使用latest)

## API 文档

### NpmMirrorSyncer

主要的同步器类。

#### 方法

- `syncPackage(packageName: string): Promise<void>` - 同步单个包
- `syncPackages(packageNames: string[]): Promise<SyncResult>` - 批量同步包
- `readPackagesFromFile(filePath: string): Promise<string[]>` - 从文件读取包名
- `getPackagesInteractively(): Promise<string[]>` - 交互式获取包名
- `validatePackageName(packageName: string): ValidationResult` - 验证包名格式

### 类型定义

```typescript
interface PackageInfo {
  name: string
  version: string
  description?: string
  publishTime?: string
  versions: number
}

interface SyncResult {
  success: string[]
  failed: Array<{
    name: string
    error: string
  }>
}
```

## 配置选项

可以通过环境变量进行配置：

- `NPM_REGISTRY`: npm注册表地址 (默认: https://registry.npmjs.org)
- `SYNC_API_URL`: 同步API地址 (默认: https://npmmirror.com/sync)
- `SYNC_TIMEOUT`: 请求超时时间 (默认: 30000ms)
- `SYNC_MAX_RETRIES`: 最大重试次数 (默认: 3)

## 开发

```bash
# 安装依赖
pnpm install

# 构建
pnpm build

# 开发模式
pnpm dev

# 测试
pnpm test

# 代码检查
pnpm lint
```

## 许可证

MIT
npm package: @kdev2test/common
Description: Excalidraw common functions, constants, etc.
Latest version: 0.18.0

# @kdev2test/common

## Install

```bash
npm install @kdev2test/common
```

If you prefer Yarn over npm, use this command to install the Excalidraw utils package:

```bash
yarn add @kdev2test/common
```

With PNPM, similarly install the package with this command:

```bash
pnpm add @kdev2test/common
```
npm package: @kdev2test/element
Description: Excalidraw elements-related logic
Latest version: 0.18.0

# @kdev2test/element

## Install

```bash
npm install @kdev2test/element
```

If you prefer Yarn over npm, use this command to install the Excalidraw utils package:

```bash
yarn add @kdev2test/element
```

With PNPM, similarly install the package with this command:

```bash
pnpm add @kdev2test/element
```
npm package: @kdev2test/excalidraw
Description: Excalidraw as a React component
Latest version: 0.26.0

# Excalidraw

**Excalidraw** is exported as a component to be directly embedded in your project.

## Installation

Use `npm` or `yarn` to install the package.

```bash
npm install react react-dom @kdev2test/excalidraw
# or
yarn add react react-dom @kdev2test/excalidraw
```

> **Note**: If you don't want to wait for the next stable release and try out the unreleased changes, use `@kdev2test/excalidraw@next`.

#### Self-hosting fonts

By default, Excalidraw will try to download all the used fonts from the [CDN](https://esm.run/@kdev2test/excalidraw/dist/prod).

For self-hosting purposes, you'll have to copy the content of the folder `node_modules/@kdev2test/excalidraw/dist/prod/fonts` to the path where your assets should be served from (i.e. `public/` directory in your project). In that case, you should also set `window.EXCALIDRAW_ASSET_PATH` to the very same path, i.e. `/` in case it's in the root:

```js
<script>window.EXCALIDRAW_ASSET_PATH = "/";</script>
```

### Dimensions of Excalidraw

Excalidraw takes _100%_ of `width` and `height` of the containing block so make sure the container in which you render Excalidraw has non zero dimensions.

## Demo

Go to [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) example.

## Integration

Head over to the [docs](https://docs.excalidraw.com/docs/@kdev2test/excalidraw/integration).

## API

Head over to the [docs](https://docs.excalidraw.com/docs/@kdev2test/excalidraw/api).

## Contributing

Head over to the [docs](https://docs.excalidraw.com/docs/@kdev2test/excalidraw/contributing).
npm package: @kdev2test/math
Description: Excalidraw math functions
Latest version: 0.18.0

# @kdev2test/math

## Install

```bash
npm install @kdev2test/math
```

If you prefer Yarn over npm, use this command to install the Excalidraw utils package:

```bash
yarn add @kdev2test/math
```

With PNPM, similarly install the package with this command:

```bash
pnpm add @kdev2test/math
```
npm package: @kdev2test/utils
Description: Excalidraw utility functions
Latest version: 0.1.2

# @kdev2test/utils

## Install

```bash
npm install @kdev2test/utils
```

If you prefer Yarn over npm, use this command to install the Excalidraw utils package:

```bash
yarn add @kdev2test/utils
```

## API

### `serializeAsJSON`

See [`serializeAsJSON`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#serializeAsJSON) for API and description.

### `exportToBlob` (async)

Export an Excalidraw diagram to a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob).

### `exportToSvg`

Export an Excalidraw diagram to a [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).

## Usage

Excalidraw utils is published as a UMD (Universal Module Definition). If you are using a module bundler (for instance, Webpack), you can import it as an ES6 module:

```js
import { exportToSvg, exportToBlob } from "@kdev2test/utils";
```

To use it in a browser directly:

```html
<script src="https://unpkg.com/@kdev2test/utils@0.1.0/dist/excalidraw-utils.min.js"></script>
<script>
  // ExcalidrawUtils is a global variable defined by excalidraw.min.js
  const { exportToSvg, exportToBlob } = ExcalidrawUtils;
</script>
```

Here's the `exportToBlob` and `exportToSvg` functions in action:

```js
const excalidrawDiagram = {
  type: "excalidraw",
  version: 2,
  source: "https://excalidraw.com",
  elements: [
    {
      id: "vWrqOAfkind2qcm7LDAGZ",
      type: "ellipse",
      x: 414,
      y: 237,
      width: 214,
      height: 214,
      angle: 0,
      strokeColor: "#000000",
      backgroundColor: "#15aabf",
      fillStyle: "hachure",
      strokeWidth: 1,
      strokeStyle: "solid",
      roughness: 1,
      opacity: 100,
      groupIds: [],
      roundness: null,
      seed: 1041657908,
      version: 120,
      versionNonce: 1188004276,
      isDeleted: false,
      boundElementIds: null,
    },
  ],
  appState: {
    viewBackgroundColor: "#ffffff",
    gridSize: null,
  },
};

// Export the Excalidraw diagram as SVG string
const svg = exportToSvg(excalidrawDiagram);
console.log(svg.outerHTML);

// Export the Excalidraw diagram as PNG Blob URL
(async () => {
  const blob = await exportToBlob({
    ...excalidrawDiagram,
    mimeType: "image/png",
  });

  const urlCreator = window.URL || window.webkitURL;
  console.log(urlCreator.createObjectURL(blob));
})();
```
npm package: @kdevsoft/meta-injector-react
Description: React binding for @kdevsoft/meta-injector
Author: KonstantinKai
Latest version: 1.0.0

# ![meta injector react logo](../../assets/meta-injector-react.png)

React binding for `@kdevsoft/meta-injector`

---

## Installation

```sh
npm install @kdevsoft/meta-injector-react
```

## Usage

Create application level hook and ReactElement for using `@kdevsoft/meta-injector`

```ts
// file: services.ts
import { injector } from './injector';

export const services = {
  service1: injector.createMeta<'str1'>(),
  service2: injector.createMeta<'str2'>(),
  service3: injector.createMeta<'str3'>(),
} as const;
```

```ts
// file: useInjector.ts
import { createMetaInjectorHook } from '@kdevsoft/meta-injector-react';
import { injector } from './injector';

export const useInjector = createMetaInjectorHook(injector);
```

```ts
// file: InjectorElement.ts
import { createMetaInjectorElement } from '@kdevsoft/meta-injector-react';
import { injector } from './injector';

export const InjectorElement = createMetaInjectorElement(injector);
```

Hook use case. Under the hood uses `React.useMemo` to reduce amount of render

```tsx
// file: TestElement1.tsx
import { FC } from 'react';
import { services } from './services';
import { useInjector } from './useInjector';

const Element: FC = () => {
  const [service1, service2, service3] = useInjector(services.service1, services.service2, services.service3);

  return (
    <>
      <div>{service1 /* str1 */}</div>
      <div>{service2 /* str2 */}</div>
      <div>{service3 /* str3 */}</div>
    </>
  );
};

const TestElement1 = Element;
export default TestElement1;
```

Element use case. Under the hood uses `useInjector` hook with `React.memo` HOC with custom comparator

```tsx
// file: TestElement2.tsx
import { FC } from 'react';
import { services } from './services';
import { InjectElement } from './InjectElement';

const Element: FC = () => (
  <InjectElement metaList={[services.service1, services.service2, services.service3]}>
    {(service1, service2, service3) => (
      <>
        <div>{service1 /* str1 */}</div>
        <div>{service2 /* str2 */}</div>
        <div>{service3 /* str3 */}</div>
      </>
    )}
  </InjectElement>
);
```

---

Do you like the package? Buy me a coffee :)

<a href="https://www.buymeacoffee.com/konstantinkai" target="_blank"><img src="https://github.com/KonstantinKai/meta-injector/blob/main/assets/buymeacoffee-button.png?raw=true" alt="Buy Me A Coffee"></a>
npm package: @kdevtest/common
Description: Excalidraw common functions, constants, etc.
Latest version: 0.21.0

# @kdevtest/common

## Install

```bash
npm install @kdevtest/common
```

If you prefer Yarn over npm, use this command to install the Excalidraw utils package:

```bash
yarn add @kdevtest/common
```

With PNPM, similarly install the package with this command:

```bash
pnpm add @kdevtest/common
```
npm package: @kdevtest/element
Description: Excalidraw elements-related logic
Latest version: 0.20.0

# @kdevtest/element

## Install

```bash
npm install @kdevtest/element
```

If you prefer Yarn over npm, use this command to install the Excalidraw utils package:

```bash
yarn add @kdevtest/element
```

With PNPM, similarly install the package with this command:

```bash
pnpm add @kdevtest/element
```
npm package: @kdevtest/excalidraw
Description: Excalidraw as a React component
Latest version: 0.21.0

# Excalidraw

**Excalidraw** is exported as a component to be directly embedded in your project.

## Installation

Use `npm` or `yarn` to install the package.

```bash
npm install react react-dom @kdevtest/excalidraw
# or
yarn add react react-dom @kdevtest/excalidraw
```

> **Note**: If you don't want to wait for the next stable release and try out the unreleased changes, use `@kdevtest/excalidraw@next`.

#### Self-hosting fonts

By default, Excalidraw will try to download all the used fonts from the [CDN](https://esm.run/@kdevtest/excalidraw/dist/prod).

For self-hosting purposes, you'll have to copy the content of the folder `node_modules/@kdevtest/excalidraw/dist/prod/fonts` to the path where your assets should be served from (i.e. `public/` directory in your project). In that case, you should also set `window.EXCALIDRAW_ASSET_PATH` to the very same path, i.e. `/` in case it's in the root:

```js
<script>window.EXCALIDRAW_ASSET_PATH = "/";</script>
```

### Dimensions of Excalidraw

Excalidraw takes _100%_ of `width` and `height` of the containing block so make sure the container in which you render Excalidraw has non zero dimensions.

## Demo

Go to [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) example.

## Integration

Head over to the [docs](https://docs.excalidraw.com/docs/@kdevtest/excalidraw/integration).

## API

Head over to the [docs](https://docs.excalidraw.com/docs/@kdevtest/excalidraw/api).

## Contributing

Head over to the [docs](https://docs.excalidraw.com/docs/@kdevtest/excalidraw/contributing).
npm package: @kdevtest/math
Description: Excalidraw math functions
Latest version: 0.21.0

# @kdevtest/math

## Install

```bash
npm install @kdevtest/math
```

If you prefer Yarn over npm, use this command to install the Excalidraw utils package:

```bash
yarn add @kdevtest/math
```

With PNPM, similarly install the package with this command:

```bash
pnpm add @kdevtest/math
```
npm package: @kdevtest/utils
Description: Excalidraw utility functions
Latest version: 0.1.2

# @kdevtest/utils

## Install

```bash
npm install @kdevtest/utils
```

If you prefer Yarn over npm, use this command to install the Excalidraw utils package:

```bash
yarn add @kdevtest/utils
```

## API

### `serializeAsJSON`

See [`serializeAsJSON`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#serializeAsJSON) for API and description.

### `exportToBlob` (async)

Export an Excalidraw diagram to a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob).

### `exportToSvg`

Export an Excalidraw diagram to a [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).

## Usage

Excalidraw utils is published as a UMD (Universal Module Definition). If you are using a module bundler (for instance, Webpack), you can import it as an ES6 module:

```js
import { exportToSvg, exportToBlob } from "@kdevtest/utils";
```

To use it in a browser directly:

```html
<script src="https://unpkg.com/@kdevtest/utils@0.1.0/dist/excalidraw-utils.min.js"></script>
<script>
  // ExcalidrawUtils is a global variable defined by excalidraw.min.js
  const { exportToSvg, exportToBlob } = ExcalidrawUtils;
</script>
```

Here's the `exportToBlob` and `exportToSvg` functions in action:

```js
const excalidrawDiagram = {
  type: "excalidraw",
  version: 2,
  source: "https://excalidraw.com",
  elements: [
    {
      id: "vWrqOAfkind2qcm7LDAGZ",
      type: "ellipse",
      x: 414,
      y: 237,
      width: 214,
      height: 214,
      angle: 0,
      strokeColor: "#000000",
      backgroundColor: "#15aabf",
      fillStyle: "hachure",
      strokeWidth: 1,
      strokeStyle: "solid",
      roughness: 1,
      opacity: 100,
      groupIds: [],
      roundness: null,
      seed: 1041657908,
      version: 120,
      versionNonce: 1188004276,
      isDeleted: false,
      boundElementIds: null,
    },
  ],
  appState: {
    viewBackgroundColor: "#ffffff",
    gridSize: null,
  },
};

// Export the Excalidraw diagram as SVG string
const svg = exportToSvg(excalidrawDiagram);
console.log(svg.outerHTML);

// Export the Excalidraw diagram as PNG Blob URL
(async () => {
  const blob = await exportToBlob({
    ...excalidrawDiagram,
    mimeType: "image/png",
  });

  const urlCreator = window.URL || window.webkitURL;
  console.log(urlCreator.createObjectURL(blob));
})();
```