open-index/open-npm huggingface dataset:
npm package: @pegasis/framer-motion
Description: A simple and powerful React animation library
Author: Framer
Latest version: 5.6.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/22095598/123793419-f5528800-d8e1-11eb-8c5f-e2dad45a9c81.png" width="108" height="108" alt="Framer Motion" />
</p>
<h1 align="center">Framer Motion</h1>
<h3 align="center">
  An open source and production-ready motion<br>library for React on the web.
</h3>

<br>

<p align="center">
  <a href="https://www.npmjs.com/package/framer-motion" target="_blank">
    <img src="https://img.shields.io/npm/v/framer-motion.svg?style=flat-square" />
  </a>
  <a href="https://www.npmjs.com/package/framer-motion" target="_blank">
  <img src="https://img.shields.io/npm/dm/framer-motion.svg?style=flat-square" />
  </a>
  <a href="https://twitter.com/framer" target="_blank">
  <img src="https://img.shields.io/twitter/follow/framer.svg?style=social&label=Follow"  />
  </a>
  <a href="https://discord.gg/DfkSpYe" target="_blank">
  <img src="https://img.shields.io/discord/308323056592486420.svg?logo=discord&logoColor=white" alt="Chat on Discord">
  </a>
</p>

<br>

Framer Motion is an open source, production-ready library that's designed for all creative developers.

It looks like this:

```jsx
<motion.div animate={{ x: 0 }} />
```

It does all this:

-   Springs
-   Keyframes
-   Layout animations
-   Shared layout animations
-   Gestures (drag/tap/hover)
-   SVG paths
-   Exit animations
-   Server-side rendering
-   Orchestrate animations across components
-   CSS variables

...and a whole lot more.

## Get started

### 🐇 Quick start

```
npm install framer-motion
```

```jsx
import { motion } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
    <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
)
```

### 📚 Docs

Check out [our documentation](https://www.framer.com/docs/) for guides and a full API reference.

Or checkout [our examples](https://www.framer.com/docs/examples/) for inspiration.

### 🛠 Contribute

Want to contribute to Framer Motion? Our [contributing guide](https://github.com/framer/motion/blob/master/CONTRIBUTING.md) has you covered.

### 👩🏻‍⚖️ License

Framer Motion is MIT licensed.

## Framer

Get on the same page as your designers before production. Get started with [design and prototyping in Framer](https://www.framer.com/).
npm package: @pegasis/gotrue-js
Description: Isomorphic GoTrue client
Author: Supabase
Latest version: 1.0.0

# `gotrue-js`

An isomorphic JavaScript client library for the [GoTrue](https://github.com/netlify/gotrue) API.

## Docs

- Using `gotrue-js`: https://supabase.io/docs/gotrue/client/initializing
- TypeDoc: https://supabase.github.io/gotrue-js/

## Quick start

Install

```bash
npm install --save @supabase/gotrue-js
```

Usage

```js
import { GoTrueClient } from '@supabase/gotrue-js'

const GOTRUE_URL = 'http://localhost:9999'

const auth = new GoTrueClient({ url: GOTRUE_URL })
```

- `signUp()`: https://supabase.io/docs/reference/javascript/auth-signup
- `signIn()`: https://supabase.io/docs/reference/javascript/auth-signin
- `signOut()`: https://supabase.io/docs/reference/javascript/auth-signout

### Custom `fetch` implementation

`gotrue-js` uses the [`cross-fetch`](https://www.npmjs.com/package/cross-fetch) library to make HTTP requests, but an alternative `fetch` implementation can be provided as an option. This is most useful in environments where `cross-fetch` is not compatible, for instance Cloudflare Workers:

```js
import { GoTrueClient } from '@supabase/gotrue-js'

const GOTRUE_URL = 'http://localhost:9999'

const auth = new GoTrueClient({ url: GOTRUE_URL, fetch: fetch })
```

## Sponsors

We are building the features of Firebase using enterprise-grade, open source products. We support existing communities wherever possible, and if the products don’t exist we build them and open source them ourselves.

[![New Sponsor](https://user-images.githubusercontent.com/10214025/90518111-e74bbb00-e198-11ea-8f88-c9e3c1aa4b5b.png)](https://github.com/sponsors/supabase)

![Watch this repo](https://gitcdn.xyz/repo/supabase/monorepo/master/web/static/watch-repo.gif 'Watch this repo')
npm package: @pegasis/headlessui-react
Description: A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.
Latest version: 1.4.1

<h3 align="center">
  @headlessui/react
</h3>

<p align="center">
  A set of completely unstyled, fully accessible UI components for React, designed to integrate
  beautifully with Tailwind CSS.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@headlessui/react"><img src="https://img.shields.io/npm/dt/@headlessui/react.svg" alt="Total Downloads"></a>
  <a href="https://github.com/tailwindlabs/headlessui/releases"><img src="https://img.shields.io/npm/v/@headlessui/react.svg" alt="Latest Release"></a>
  <a href="https://github.com/tailwindlabs/headlessui/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@headlessui/react.svg" alt="License"></a>
</p>

## Installation

```sh
# npm
npm install @headlessui/react

# Yarn
yarn add @headlessui/react
```

## Documentation

For full documentation, visit [headlessui.dev](https://headlessui.dev/react/menu).

## Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

[Discuss Headless UI on GitHub](https://github.com/tailwindlabs/headlessui/discussions)

For casual chit-chat with others using the library:

[Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe)
npm package: @pegasis/watchdog
Description: Very simple script watchdog. Auto-restart script when crashed
Author: Pegasis
Latest version: 1.0.6

# watchdog-node
Very simple script watchdog. Auto-restart script when crashed 

## CMD Args
- --script [SRCIPT] - Specify the desired script, otherwise (nmp run)
- --wait [MS] - Delay in milliseconds before starting, after stopping the script. 
- --cmd - If used, a small log will be displayed
npm package: @peggyjs/eslint-config
Description: Lint rules for peggyjs projects
Author: Joe Hildebrand
Latest version: 6.0.13

# eslint configuration for Peggy projects

For js-only projects:

File: `eslint.config.js` (or `eslint.config.mjs` if you're in a project with
type `"commonjs"`):

```js
import mocha from "@peggyjs/eslint-config/flat/mocha.js";
// Use commonjs if you're in an older project
import module from "@peggyjs/eslint-config/flat/module.js";
import ts from "@peggyjs/eslint-config/flat/ts.js";

export default [
  ...module,
  ...ts,
  ...mocha,
];
```

If you include the ts config, you'll need to add dependencies:

```sh
npm install -D typescript typescript-eslint
```

If you include the mocha config, you'll need to add dependencies:

```sh
npm install -D eslint-plugin-mocha
```
npm package: @peggyjs/eslint-parser
Description: ESLint-style parser for Peggy grammars
Author: Joe Hildebrand
Latest version: 2.0.6

# Eslint-style parser for Peggy grammars

For linting [Peggy](https://peggyjs.org/) grammars using [eslint](https://eslint.org/).

## Install

```sh
npm install -D @peggyjs/eslint-parser
```

## API

We'll document this more if anyone else wants to use it.

```js
import { parseForESLint, visitor } from "@peggyjs/eslint-parser";

const parserResults = parseForESLint(text, { filePath: filename });
const v = new visitor.Visitor({
  rule(node) {
    console.log(node.name.value);
  }
});
v.visit(parserResults.ast);
```

## Notes

This uses a slightly different grammar than the one built in to Peggy, in
order to pull out information about more concrete parts of the grammar like
punctuation that don't matter to Peggy semantics.

[![Tests](https://github.com/peggyjs/peggyjs-eslint-parser/actions/workflows/node.js.yml/badge.svg)](https://github.com/peggyjs/peggyjs-eslint-parser/actions/workflows/node.js.yml)
[![codecov](https://codecov.io/gh/peggyjs/peggyjs-eslint-parser/branch/main/graph/badge.svg?token=UCEWE8GY65)](https://codecov.io/gh/peggyjs/peggyjs-eslint-parser)
npm package: @peggyjs/from-mem
Description: Load a string as if it was an esm or commonjs module with a given filename.
Author: Joe Hildebrand
Latest version: 3.1.3

# @peggyjs/from-mem

Execute some text in memory as if it was a file with a given name, so that all
of the imports/require's happen out of that directory's associated
node_modules directory or relative to where the file would have been.

This is NOT intended to be a security boundary.  In particular, all files
will be required or imported through the node module cache.

This code was originally a part of [peggy](https://peggyjs.org/), but was
refactored out when it was needed in a related project.  Several ideas in this
code came from the
[module-from-string](https://github.com/exuanbo/module-from-string) and
[eval](https://github.com/pierrec/node-eval) modules -- thanks to those authors.

## Installation

```sh
npm install @peggyjs/from-mem
```

## Usage

```js
import fromMem from "@peggyjs/from-mem"; // or require("@peggyjs/from-mem")
const consoleOutput = {};
const result = await fromMem(`
import foo from "../foo.js"; // Loads ./test/foo.js

console.log("hi");
export async function bar() {
  return await foo() + 2;
}
`, {
  filename: path.join(__dirname, "test", "fixtures", "test.js"),
  format: "es",
  consoleOutput,
  exec: `
console.log("there");
const b = await IMPORTED.bar();
return b + arg;
`;
  arg: 12,
});

// consoleOutput.out === "hi\nthere\n"
```

`filename` is the only required option, unless you are processing an ES6
module and your runtime does not have --experimental_vm_modules set.  In that
case, you must pass in an `exec` option, and may pass in an `arg` also.

Full [API docs](http://peggyjs.github.io/from-mem/) are available.

## Caveats

- This module has a strong requirement for node 20.8+ at runtime when using
  the es6 format, due to a bug that crashes node in node's vm module that got
  fixed there and in 21.0.  There is a runtime check to prevent the crash.

[![Tests](https://github.com/peggyjs/from-mem/actions/workflows/node.js.yml/badge.svg)](https://github.com/peggyjs/from-mem/actions/workflows/node.js.yml)
[![codecov](https://codecov.io/gh/peggyjs/from-mem/graph/badge.svg?token=CWQ7GSH0ZI)](https://codecov.io/gh/peggyjs/from-mem)
npm package: @peghub/core
Description: Core contracts for the SushiSwap protocol
Latest version: 1.0.0

# SushiSwap

https://sushi.com/

## Deployed Contracts

https://dev.sushi.com/sushiswap/contracts

## Docs

[Development](docs/DEVELOPMENT.md)

[Deployment](docs/DEPLOYMENT.md)

[History](docs/HISTORY.md)

## Security

[Security Policy](SECURITY.md)

## License

[MIT](LICENSE.txt)
npm package: @peghub/sdk
Description: 🛠 An SDK for building applications on top of Sushiswap.
Latest version: 1.0.4

# Sushiswap SDK

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

This modifies uniswap-sdk's UniswapV2Factory address. The new address for sushiswap is  `0xC0AEe478e3658e2610c5F7A4A2E1777cE9e4f2Ac`.

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/sushiswap/sushiswap-sdk.git
```

Move into the sushiswap-sdk working directory

```sh
cd sushiswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @pegswap/sdk
Description: 🛠 An SDK for building applications on top of Sushiswap.
Latest version: 2.1.0

# Sushiswap SDK

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

This modifies uniswap-sdk's UniswapV2Factory address. The new address for sushiswap is  `0xC0AEe478e3658e2610c5F7A4A2E1777cE9e4f2Ac`.

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/sushiswap/sushiswap-sdk.git
```

Move into the sushiswap-sdk working directory

```sh
cd sushiswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @pehlse/daterange-picker-react
Description: A react date range picker implementation using @material-ui.
Author: pehlse
Latest version: 1.0.2

# Material UI DateRange Picker

A react date range picker implementation using @material-ui.

<a href='https://www.npmjs.com/package/materialui-daterange-picker'>
    <img src='https://img.shields.io/npm/v/materialui-daterange-picker.svg' alt='Latest npm version'>
</a>

## Preview

![Screenshot](/screenshot.png?raw=true "Screenshot")

## Live Demo

Check out the project running [here](https://codesandbox.io/s/materialui-daterange-picker-2p3f1?file=/src/App.js)!

## Usage

```bash
npm install materialui-daterange-picker --save

# or with yarn
yarn add materialui-daterange-picker
```

## Basic example
```tsx
import React from "react";
import { DateRangePicker, DateRange } from "materialui-daterange-picker";

type Props = {}

const App: React.FunctionComponent<Props> = props => {
  const [open, setOpen] = React.useState(false);
  const [dateRange, setDateRange] = React.useState<DateRange>({});

  const toggle = () => setOpen(!open);

  return (
    <DateRangePicker
      open={open}
      toggle={toggle}
      onChange={(range) => setDateRange(range)}
    />
  );
}

export default App;
```

## Types
```ts
interface DateRange {
    startDate?: Date,
    endDate?: Date
}

interface DefinedRange {
    label: string,
    startDate: Date,
    endDate: Date
}
```

## Props

Name | Type | Required | Default value | Description
:--- | :--- | :--- | :--- | :---
`onChange` | `(DateRange) => void` | _required_ | - | handler function for providing selected date range
`toggle` | `() => void` | _required_ | - | function to show / hide the DateRangePicker
`initialDateRange` | `DateRange` | _optional_ | `{}` | initially selected date range
`minDate` | `Date` or `string` | _optional_ | 10 years ago | min date allowed in range
`maxDate` | `Date` or `string` | _optional_ | 10 years from now | max date allowed in range
`definedRanges` | `DefinedRange[]` | _optional_ | - | custom defined ranges to show in the list
`closeOnClickOutside` | `boolean` | _optional_ | `true` | defines if DateRangePicker will be closed when clicking outside of it
`wrapperClassName` | `object` | _optional_ | `undefined` | defines additional wrapper style classes
`formatDate` | `string` | _optional_ | `dd/MM/yyyy` | defines how the date will be formatted for display on the calendar
npm package: @pehotin/html-parser
Description: Small, strict HTML‑like parser that produces a simple AST using a finite state machine.
Author: Artem P
Latest version: 1.0.5

## html-parser

Small, strict HTML‑like parser that produces a simple AST using a finite state machine.

### Features

- **Finite state machine parser**: implemented on top of `@prender-company/fsm`.
- **Simple AST**: root, element, and text nodes with attributes.
- **Strict error handling**: reports line and column on parse errors.
- **Node.js friendly**: plain CommonJS, no runtime dependencies beyond the FSM and `graceful-fs` (used by the playground).

### Installation

From this repository:

```bash
npm install
```

If you publish this package, you can then install it in another project as:

```bash
npm install html-parser
```

### Basic usage

```js
const HtmlParser = require('html-parser')

const source = `<div class="wrapper">
  <span>Hello</span>
</div>`

const ast = new HtmlParser(source).parse()
console.log(JSON.stringify(ast, null, 2))
```

`parse()` returns the root AST node. On invalid input, the parser logs a message like:

```text
Parse error: Unexpected character 'x' on line 3 at column 5
```

and returns `undefined`.

### AST structure

The AST is built from two node types, defined in `src/types.js`.

- **Root and element nodes** (`Node`):

  ```js
  {
    type: 'root' | 'element',
    tagName: 'div',          // empty string for the root node
    attrs: [
      { name: 'class', value: 'wrapper' },
      // ...
    ],
    children: [ /* Node | TextNode */ ]
  }
  ```

- **Text nodes** (`TextNode`):

  ```js
  {
    type: 'text',
    value: 'Hello'
  }
  ```

Attributes without an explicit value are treated as boolean and will have `value: true`.

### Playground

There is a small playground that reads `playground/index.act`, parses it, and prints the resulting AST:

```bash
npm run play
```

Under the hood, this runs `node playground/index.js`, which:

- **reads** `playground/index.act`,
- **parses** it with `HtmlParser`,
- **logs** the AST using Node's `util.inspect`.

### Scripts

The following npm scripts are available:

- **`npm start`**: runs `node ./src/index.js` (exports the parser; mainly for quick manual testing).
- **`npm run build`**: transpiles `src/` into `dist/` using Babel.
- **`npm run play`**: runs the playground described above.

### License

MIT © Artem P
npm package: @peibb/prettier-config
Description: My personal Prettier config
Author: peibb
Latest version: 1.1.1

# `@peibb/prettier-config`

> My personal [Prettier](https://prettier.io) config.

## Usage

**Install**:

```bash
$ yarn add --dev @peibb/prettier-config
$ npm install --dev @peibb/prettier-config
$ pnpm add --dev @peibb/prettier-config
```

**Option 1: Edit `package.json`**:

```jsonc
{
  // ...
  "prettier": "@peibb/prettier-config"
}
```

**Option 2: Use with `prettier.config.js`**:

```jsonc
module.exports = require('@peibb/prettier-config');
```

**Option 3: Use with `prettier.config.js` and extend it**:

```jsonc
const lingxiConfig = require('@peibb/prettier-config');

module.exports = {
  ...lingxiConfig,
  // 可以覆盖或添加额外配置
  semi: false
};
```
npm package: @peiris/bento-ui
Description: Add components to your apps.
Author: bento
Latest version: 0.4.5

# shadcn-ui

A CLI for adding components to your project.

## Usage

Use the `init` command to initialize dependencies for a new project.

The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables for the project.

```bash
npx shadcn-ui init
```

## add

Use the `add` command to add components to your project.

The `add` command adds a component to your project and installs all required dependencies.

```bash
npx shadcn-ui add [component]
```

### Example

```bash
npx shadcn-ui add alert-dialog
```

You can also run the command without any arguments to view a list of all available components:

```bash
npx shadcn-ui add
```

## Documentation

Visit https://ui.shadcn.com/docs/cli to view the documentation.

## License

Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
npm package: @peiyanlu/cli-tools
Description: Utils for building CLI tools.
Author: YanluPei
Latest version: 0.0.1

# @peiyanlu/cli-tools

My project description.

## Project setup

```bash
$ pnpm install
```

## Compile and run the project

```bash
# development
$ pnpm run dev

# production
$ pnpm run build
```

## Run tests

```bash
# unit tests
$ pnpm run test

# e2e tests
$ pnpm run test:e2e

# test coverage
$ pnpm run test:cov
```
npm package: @peiyanlu/cli-utils
Description: Shared utils for building interactive Node.js CLI applications.
Author: YanluPei
Latest version: 0.0.8

# @peiyanlu/cli-utils

Shared utils for building interactive Node.js CLI applications.

## Project setup

```bash
$ pnpm install
```

## Compile and run the project

```bash
# development
$ pnpm run dev

# production
$ pnpm run build
```

## Run tests

```bash
# tests
$ pnpm run test

# test coverage
$ pnpm run test:cov
```
npm package: @peiyanlu/create-project
Description: A create new project cli tool.
Author: YanluPei
Latest version: 0.0.3

# Create New Project

<p>
  <a href="https://www.npmjs.com/package/@peiyanlu/create-project" target="_blank">
    <img src="https://img.shields.io/badge/npm-@peiyanlu/create--project-blue.svg?logo=npm" alt="NPM Package" />
  </a>
  <a href="https://www.npmjs.com/package/@peiyanlu/create-project" target="_blank">
    <img src="https://img.shields.io/npm/v/@peiyanlu/create-project.svg" alt="NPM Version" />
  </a>
  <a href="https://www.npmjs.com/package/@peiyanlu/create-project" target="_blank">
    <img src="https://img.shields.io/npm/l/@peiyanlu/create-project.svg" alt="Package License" />
  </a>
  <a href="https://www.npmjs.com/package/@peiyanlu/create-project" target="_blank">
    <img src="https://img.shields.io/npm/dm/@peiyanlu/create-project.svg" alt="NPM Downloads" />
  </a>
</p>


## Scaffolding Your New Project

With NPM:

```bash
npm create @peiyanlu/project@latest
```

With Yarn:

```bash
yarn create @peiyanlu/project
```

With PNPM:

```bash
pnpm create @peiyanlu/project
```

Then follow the prompts!

You can also directly specify the project name and the target directory handled method you want to use via additional command line options. run:

```bash
# npm 7+, extra double-dash is needed:
npm create @peiyanlu/project@latest my-project -- --overwrite

# yarn
yarn create @peiyanlu/project my-project --overwrite

# pnpm
pnpm create @peiyanlu/project my-project --overwrite
```
npm package: @peiyanlu/electron
Description: Utilities and tools for building Electron apps with clear separation between main, preload, and renderer processes.
Author: YanluPei
Latest version: 1.0.11

# @peiyanlu/electron

一个分层设计的 Electron 工具集，提供 backend、preload 和 frontend 的模块化能力封装。

## 后端

```ts
import {
  checkSquirrel,
  ElectronHost,
  getIconExt,
  IpcHost,
  isDev,
  onChildWindowOpenUrl,
  showAndFocus,
} from '@peiyanlu/electron/backend'
import { Menu } from 'electron'
import { join } from 'path'
import { ElectronSvgHandler } from './electron/IpcHandler'


const file = join(__dirname, '..', `renderer/${ MAIN_WINDOW_VITE_NAME }/index.html`)
const frontendURL = MAIN_WINDOW_VITE_DEV_SERVER_URL ?? file


const getIcon = (root: string, tray?: boolean) => join(root, 'icons', `icon.${ getIconExt(tray) }`)

const appIcon = getIcon(__dirname)
const trayIcon = getIcon(isDev ? __dirname : process.resourcesPath, true)


if (checkSquirrel()) {
  ElectronHost.shutdown()
}

ElectronHost.startup({
  ipcHandlers: [ ElectronSvgHandler ],
})

ElectronHost.openMainWindow({
    webPreferences: {
      preload: require.resolve('./preload.js'),
      sandbox: true,
    },
    width: 1200,
    height: 750,
    icon: appIcon,
    frontendURL,
    hideAppMenu: true,
    singleInstance: true,
    devTools: true,
    backgroundColor: '#141218',
    beforeReady: () => {
      onChildWindowOpenUrl()
    },
    tray: {
      icon: trayIcon,
      menu: Menu.buildFromTemplate([
        {
          label: '打开',
          click: () => {
            showAndFocus(ElectronHost.mainWindow)
          },
        },
        {
          label: '退出',
          click: () => {
            ElectronHost.shutdown()
          },
        },
      ]),
      title: `${ APP_NAME } ${ APP_VERSION }`,
    },
  })
  .then(async (window) => {
    if (!window) return
    //   DO SOMETHING
  })

IpcHost.addListener('changeTheme', (_e, data: string) => {
  console.log('changeTheme:receiver', data)
})
```

## Preload

```ts
import { contextBridge, ipcRenderer } from 'electron'
import { frontendApiKey, getFrontendApi } from '@peiyanlu/electron/preload'


contextBridge.exposeInMainWorld(frontendApiKey, getFrontendApi(ipcRenderer))
```

## 前端

```ts
import { svgoChannel, SvgoIpcInterface } from '@/electron/IpcInterface'
import { ElectronApp, IpcApp } from '@peiyanlu/electron/frontend'


ElectronApp.startup()
const svgoIpc = IpcApp.makeIpcFunctionProxy<SvgoIpcInterface>(svgoChannel, 'callMethod')


IpcApp.send('changeTheme', 'light')
```
npm package: @peiyanlu/electron-ipc
Description: Electron IPC connection tool.
Author: YanluPei
Latest version: 1.0.10

# electron-ipc

简化 Electron 前后端通信的 ipc 工具

## 后端

```ts
import {
  checkSquirrel,
  ElectronHost,
  getIconExt,
  IpcHost,
  isDev,
  onChildWindowOpenUrl,
  showAndFocus,
} from '@peiyanlu/electron-ipc/backend'
import { Menu } from 'electron'
import { join } from 'path'
import { ElectronSvgHandler } from './electron/IpcHandler'


const file = join(__dirname, '..', `renderer/${ MAIN_WINDOW_VITE_NAME }/index.html`)
const frontendURL = MAIN_WINDOW_VITE_DEV_SERVER_URL ?? file


const getIcon = (root: string, tray?: boolean) => join(root, 'icons', `icon.${ getIconExt(tray) }`)

const appIcon = getIcon(__dirname)
const trayIcon = getIcon(isDev ? __dirname : process.resourcesPath, true)


if (checkSquirrel()) {
  ElectronHost.shutdown()
}

ElectronHost.startup({
  ipcHandlers: [ ElectronSvgHandler ],
})

ElectronHost.openMainWindow({
    webPreferences: {
      preload: require.resolve('./preload.js'),
      sandbox: true,
    },
    width: 1200,
    height: 750,
    icon: appIcon,
    frontendURL,
    hideAppMenu: true,
    singleInstance: true,
    devTools: true,
    backgroundColor: '#141218',
    beforeReady: () => {
      onChildWindowOpenUrl()
    },
    tray: {
      icon: trayIcon,
      menu: Menu.buildFromTemplate([
        {
          label: '打开',
          click: () => {
            showAndFocus(ElectronHost.mainWindow)
          },
        },
        {
          label: '退出',
          click: () => {
            ElectronHost.shutdown()
          },
        },
      ]),
      title: `${ APP_NAME } ${ APP_VERSION }`,
    },
  })
  .then(async (window) => {
    if (!window) return
    //   DO SOMETHING
  })

IpcHost.addListener('changeTheme', (_e, data: string) => {
  console.log('changeTheme:receiver', data)
})
```

## Preload

```ts
import { contextBridge, ipcRenderer } from 'electron'
import { frontendApiKey, getFrontendApi } from '@peiyanlu/electron-ipc/preload'


contextBridge.exposeInMainWorld(frontendApiKey, getFrontendApi(ipcRenderer))
```

## 前端

```ts
import { svgoChannel, SvgoIpcInterface } from '@/electron/IpcInterface'
import { ElectronApp, IpcApp } from '@peiyanlu/electron-ipc/frontend'


ElectronApp.startup()
const svgoIpc = IpcApp.makeIpcFunctionProxy<SvgoIpcInterface>(svgoChannel, 'callMethod')


IpcApp.send('changeTheme', 'light')
```
npm package: @peiyanlu/ts-utils
Description: A lightweight TypeScript utility library with powerful type helpers and runtime tools.
Author: YanluPei
Latest version: 0.0.5

# @peiyanlu/ts-utils

> 🧩 A lightweight TypeScript utility library with powerful type helpers and runtime tools.

## ✨ Features

- 🔠 Advanced type utilities (e.g. `Mutable`, `Optional`, `RequireAtLeastOne`)
- ⚙️ Runtime helpers (`omit`, `isInstanceOf`, `asInstanceOf`)
- 🧱 Zero dependencies, written in pure TypeScript (ESM compatible)
- ✅ Fully type-safe & tree-shakable

---

## 📦 Install

```bash
npm install @peiyanlu/ts-utils
# or
pnpm add @peiyanlu/ts-utils
```