open-index/open-npm huggingface dataset:
npm package: @sysvale/vuex-make-request-store
Description: Utilitário vuex de gerenciamento do estado de requests HTTP baseado em Promises
Author: Gabriel Gomes
Latest version: 1.0.4

# vuex-make-request-store
Utilitário vuex de gerenciamento do estado de requests HTTP baseado em Promises

## Contribuindo
### Instalação

Clone o repositório, vá ao diretório do projeto e em seguida execute `npm run install` em seu terminal.

### Executando testes

Após o passo de [Instalação](#instala%C3%A7%C3%A3o), em seu terminal, execute `npm run test`

## Como utilizar

Realize a instalação em seu projeto com `npm i @sysvale/vuex-make-request-store`

Assumimos que você possui um conhecimento prévio em aplicações [Vue](https://vuejs.org/) e em [Vuex](https://vuex.vuejs.org/).

Assumimos também que suas chamadas HTTP são realizadas através de alguma biblioteca que utiliza promises, como o [Axios](https://github.com/axios/axios) por exemplo.

Imagine que tenhamos um arquivo de um recurso Posts que expõe _services_ que fazem chamadas à API de Posts:

`services/Posts.js`
```javascript
import axios from 'axios';

export const getPosts = (params) => axios.get('/posts', { ...params });
```

O primeiro passo é criar um módulo que gerencie essa store desses recursos:

`store/requests/posts`
```javascript
import makeRequestStore from 'vuex-make-request-store';

import {
	getPosts,
} from '<path>/services/Posts';

const modules = [
	{ getPosts },
];

export default {
	namespaced: true,

	modules: modules.reduce((acc, module) => ({
		...acc,
		...makeRequestStore(module),
	}), {}),
};
```

Desse modo, caso hajam outros endpoints da API de posts, basta apenas adicioná-los ao `services/Posts.js`, então importá-los no `store/requests/posts.js` e inserí-los no array de módulos.

Feito isso, vamos unificar as stores dos recursos:

`store/requests`
```javascript
import posts from './posts';

export default {
	namespaced: true,

	modules: {
		posts,
	},
};
```

Assim, se houverem outras stores de outros recursos, por exemplo `comments`, é só importá-la e colocá-la nos módulos.

Por fim, na store de sua aplicação, importe a store de requests:

`store.js`
```javascript
import Vue from 'vue';
import Vuex from 'vuex';

import requests from './requests';

Vue.use(Vuex);

export default new Vuex.Store({
	modules: {
		requests,
	},
});
```

Então quando precisar utilizar esse service em um componente, por exemplo, é só chamar a mutation criada automaticamente pelo `makeRequestStore`. Observe:

```javascript
// <template></template>
// <script>
import { mapState, mapActions } from 'vuex';

export default {
	computed: {
		...mapState('requests/posts', {
			loadingGetPosts: ({ getPosts }) => getPosts.isFetching,
			failedGetPosts: ({ getPosts }) => getPosts.hasFailed,
			succeededGetPosts: ({ getPosts }) => getPosts.hasSucceeded,
		}),
	},

	methods: {
		...mapActions('requests/posts', [
			'getPosts',
		]),
	},
};
// </script>
```

Ao chamar `this.getPosts()` a promise do seu service é retornada e você pode encadear o `.then()` e o `.catch()` de acordo com sua lógica.

Observe que é possível mapear os estados da requisição para utilizá-los caso seja necessário.
npm package: @sysysys/react-scramble-typing
Description: This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Latest version: 0.0.2

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)

## React Compiler

The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.

Note: This will impact Vite dev & build performances.

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```
npm package: @sytexa/tzdb-revised
Description: This package slightly extends / modifies @vvo/tzdb for our specific use case.
Author: SYTEXA LLC
Latest version: 1.6.0

# Important

This package slightly extends / modifies @vvo/tzdb for our specific use case.

You probably want the original version by VVO:

- [Github - https://github.com/vvo/tzdb](https://github.com/vvo/tzdb)
- [NPM - https://www.npmjs.com/package/@vvo/tzdb](https://www.npmjs.com/package/@vvo/tzdb)

All credit to the [original author VVO](https://github.com/vvo)

# Changes

[Deprecated time zone names](https://data.iana.org/time-zones/data/backward) are moved to their own key in the time zone object, instead of grouping them with `group`:

```js
{
  name: "America/New_York",
  alternativeName: "Eastern Time",
  group: [
    "America/Detroit",
    "America/Indiana/Indianapolis",
    "America/Indiana/Marengo",
    "America/Indiana/Petersburg",
    "America/Indiana/Vevay",
    "America/Indiana/Vincennes",
    "America/Indiana/Winamac",
    "America/Kentucky/Louisville",
    "America/Kentucky/Monticello",
    "America/New_York"
  ],
  deprecatedNames: [
    "US/Michigan",
    "America/Fort_Wayne",
    "America/Indianapolis",
    "US/East-Indiana",
    "America/Louisville",
    "US/Eastern"
  ],
  continentCode: "NA",
  continentName: "North America",
  countryName: "United States",
  countryCode: "US",
  mainCities: ["New York City", "Brooklyn", "Queens", "Philadelphia"],
  rawOffsetInMinutes: -300,
  abbreviation: "EST",
  rawFormat: "-05:00 Eastern Time - New York City, Brooklyn, Queens, Philadelphia"
}
```

Useful if you don't want or need to support the deprecated time zones...

## `getUngroupedTimeZones()`

This package also adds the `getUngroupedTimeZones()` function, which returns an array of simplified time zone objects with current time information. We prefer this for creating time zone selection boxes when deprecated time zones are not required.

```js
[
  // ...
  {
    name: "America/Los_Angeles",
    currentTimeOffsetInMinutes: -420, // "current" time zone offset, this is why getUngroupedTimeZones() is a method and not just an object: it works at runtime
    currentTimeFormat: "(UTC -7) America/Los Angeles",
  },
  // ...
];
```

# tzdb [![GitHub license](https://img.shields.io/github/license/sytexa/tzdb?style=flat)](https://github.com/sytexa/tzdb/blob/main/LICENSE) [![Tests](https://github.com/sytexa/tzdb/workflows/CI/badge.svg)](https://github.com/sytexa/tzdb/actions)
npm package: @sytherax/the-sorted-array
Description: Sorted array functionality
Author: Swoorup Joshi
Latest version: 0.1.2

# Sorted Array Manipulation Library

This TypeScript library provides utilities for working with sorted arrays. Here's a brief overview of the features:

1. **Range**: Defines a range with start and end values.
2. **InsertType**: Enumerates insertion types, whether updating at an index or inserting after an index.
3. **InsertPoint**: Defines where and how to perform an insertion in the array.
4. **findInsertPoint**: Finds where an element should be inserted or updated in a sorted array.
5. **findInsertPointReversed**: Same as `findInsertPoint` but for arrays sorted in reverse order.
6. **searchRange**: Finds the range of indices for insertion or update in a sorted array.
6. **range**: returns an iterator for the given range in a sorted array.
7. **splitByRange**: Splits an array into three parts based on a specified range: non-overlapping left, overlapping, and non-overlapping right blocks.
8. **merge**: Merges two sorted arrays into a new sorted array, resolving duplicates and optionally filtering results.
9. **mergeInPlace**: Merges two sorted arrays into one, modifying the first array in-place.
10. **extractRange**: Extracts the range of the array based on a key selector function.

Each function is designed with flexibility in mind, allowing you to pass in custom comparison or key selector functions to accommodate different types of data and sorting requirements.

## Installation
To install it in your project, use the following command with [yarn](https://yarnpkg.com/):

```bash
yarn add @sytherax/the-sorted-array
```

Please refer to the source code for more detailed usage instructions and examples.
npm package: @syucream/lightdash-client-typescript-fetch
Description: TypeScript client for Lightdash API generated using openapi-fetch
Author: syucream
Latest version: 0.0.3-202501050320
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Lightdash TypeScript Client

A TypeScript client for the Lightdash API, generated from the official OpenAPI specification using [openapi-fetch](https://github.com/openapi-ts/openapi-typescript).

## Installation

```bash
npm install @syucream/lightdash-client-typescript-fetch
```

## Usage

```typescript
import createLightdashClient from '@syucream/lightdash-client-typescript-fetch';

// Create a client instance
const client = createLightdashClient('https://your-lightdash-instance.com');

// Example: Get projects
const { data, error } = await client.GET('/api/v1/projects');
if (error) {
  console.error('Error fetching projects:', error);
} else {
  console.log('Projects:', data);
}
```

## Technical Stack

- TypeScript
- [openapi-fetch](https://github.com/openapi-ts/openapi-typescript) - Type-safe API client generator
- [openapi-typescript](https://github.com/openapi-ts/openapi-typescript) - OpenAPI to TypeScript type generator

## Development

1. Clone the repository
2. Install dependencies:
   ```bash
   npm install
   ```
3. Generate the client code:
   ```bash
   npm run generate
   ```
4. Build the project:
   ```bash
   npm run build
   ```

### Code Quality

The project uses ESLint and Prettier for code quality and formatting:

- `npm run lint` - Check code style and potential issues
- `npm run fix` - Automatically fix code style issues

Individual commands are also available:
- `npm run lint:eslint` - Run ESLint checks only
- `npm run lint:prettier` - Run Prettier checks only
- `npm run fix:eslint` - Run ESLint auto-fix
- `npm run fix:prettier` - Run Prettier auto-fix

### Continuous Integration

The project uses GitHub Actions for CI:

- Pull Request Checks:
  - Runs linting on all pull requests
  - Ensures code quality before merging

- Main Branch CI:
  - Runs on merges to main
  - Generates client code from the latest OpenAPI spec
  - Builds the project
  - Uploads build artifacts

## Publishing

This package is published to GitHub Packages. To publish a new version:

1. Update the version in `package.json`
2. Make sure you're authenticated with GitHub Packages
3. Run:
   ```bash
   npm publish
   ```

## License

MIT
npm package: @syukurilexs/nestjs-config
Description: Config Module
Author: Syukur Kassim
Latest version: 3.0.0

<h1 align="center"></h1>

<div align="center">
  <a href="http://nestjs.com/" target="_blank">
    <img src="https://nestjs.com/img/logo_text.svg" width="150" alt="Nest Logo" />
  </a>
</div>

<h3 align="center">NestJS Custom Config Package (simple config service)</h3>

<div align="center">
  <a href="https://nestjs.com" target="_blank">
    <img src="https://img.shields.io/badge/built%20with-NestJs-red.svg" alt="Built with NestJS">
  </a>
</div>

### Installation

```bash
npm install @syukurilexs/nestjs-config
```

## Usage

Import `ConfigModule`:

```typescript
@Module({
  imports: [ConfigModule],
  providers: [...],
})
export class AppModule {}
```

Inject `ConfigService`:

```typescript
@Injectable()
export class YourService {
  constructor(private readonly config: ConfigService) {}

  show() {
    return this.config.get('MYVAR');
  }
}
```

Declare env variable `NODE_ENV=development.env`

In order to use this package you need to create **config** folder on your root directory and then create your **.env** file
- development.env
- production.env

## Change Log

See [Changelog](CHANGELOG.md) for more information.

## Contributing

Contributions welcome! See [Contributing](CONTRIBUTING.md).

## Author

**Syukur Kassim (Syukurilexs on [Linkedin](https://www.linkedin.com/in/syukurilexs))**

## License

Licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @syukurilexs/nestjs-log
Description: NestJS syukurilexs logger
Author: Syukur
Latest version: 4.0.0

<h1 align="center"></h1>

<div align="center">
  <a href="http://nestjs.com/" target="_blank">
    <img src="https://nestjs.com/img/logo_text.svg" width="150" alt="Nest Logo" />
  </a>
</div>

<h3 align="center">NestJS npm Package Starter</h3>

<div align="center">
  <a href="https://nestjs.com" target="_blank">
    <img src="https://img.shields.io/badge/built%20with-NestJs-red.svg" alt="Built with NestJS">
  </a>
</div>

### Installation

```bash
npm install @syukurilexs/nestjs-log
```

## Usage
Import `LoggerModule`:

```typescript
imports: [LoggerModule.register()]
```
This module is Global type, just import in module.app.js and can use it anywhere

## Usage to write log to Elasticsearch and Console
To use Elasticsearch for logging you need to install Elasticsearch package

```bash
npm install @elastic/elasticsearch
```

Import `LoggerModule`:

```typescript
imports: [
  LoggerModule.register({
    elasticsearch: { node: 'http://localhost:9200', prefix: 'syukur' },
  }),
],
```

### Options
- node: elastic search url
- prefix: index name (when use it with LoggerService it will append prefix ***log***), 
- date (default to YYYYMMDD, "." sperated)
  - log
  - report
  - date format
    - DATE_FORMAT.YYYYMMDD
    - DATE_FORMAT.YYYYMM
    - DATE_FORMAT.YYYY

## Usage for Async method to write log to Elasticsearch and Console
To use Elasticsearch for logging you need to install Elasticsearch package

```bash
npm install @elastic/elasticsearch
```

Import `LoggerModule`:

```typescript
imports: [
  LoggerModule.registerAsync({
    imports: [ConfigModule],
    useFactory: (config: ConfigService) => {
      return {
        elasticsearch: { node: config.get('URL'), prefix: 'syukur' },
      };
    },
    inject: [ConfigService],
  }),
],
```
## Available Services 
### LoggerService
```typescript
constructor(private readonly logger: LoggerService) {}

myMethod() {
  this.logger.log('This is message');
  this.logger.warn('This is warning');
  this.logger.error('This is error','This is tracing' | {key: 'value'});
}
```
### ReportService
```typescript
constructor(private readonly report: ReportService) {}

myMethod() {
  this.report.send({key: value, key2: value2});
}

// Add specific prefix per method call
myMethod2() {
  this.report.send({key: value, key2: value2},'prefix');
}
```

## Change Log

See [Changelog](CHANGELOG.md) for more information.

## Contributing

Contributions welcome! See [Contributing](CONTRIBUTING.md).

## Author

**Syukur [LinkedIn](https://www.linkedin.com/in/syukurilexs/)**

## License

Licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @syukurilexs/nestjs-logger
Description: NestJS Custom Logger
Author: Syukur Kassim
Latest version: 1.0.0

<h1 align="center"></h1>

<div align="center">
  <a href="http://nestjs.com/" target="_blank">
    <img src="https://nestjs.com/img/logo_text.svg" width="150" alt="Nest Logo" />
  </a>
</div>

<h3 align="center">NestJS npm Custom Logger package</h3>

<div align="center">
  <a href="https://nestjs.com" target="_blank">
    <img src="https://img.shields.io/badge/built%20with-NestJs-red.svg" alt="Built with NestJS">
  </a>
</div>

### Installation

```bash
npm install
```

## Usage

Import `LoggerModule`:

```typescript
@Module({
  imports: [ConfigModule],
  providers: [...],
})
export class AppModule {}
```

Inject `LoggerService`:

```typescript
@Injectable()
export class YourService {
  constructor(private readonly logger: LoggerService) {
    logger.setContext('my context');
  }

  show() {
    this.logger.log('This is my log');
    this.logger.log({key: 'This example using an object'});
  }
}
```

## Change Log

See [Changelog](CHANGELOG.md) for more information.

## Contributing

Contributions welcome! See [Contributing](CONTRIBUTING.md).

## Author

**Syukur Kassim (On linkedin[Linkedin](https://www.linkedin.com/in/syukurilexs))**

## License

Licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @syumai/goplayground
Description: The Go Playground client for JavaScript written in TypeScript.
Author: syumai
Latest version: 0.1.6

# goplayground-js

* The Go Playground API client for Browsers / Node.js
* Command line tool for Node.js is also available.

## Installation

### For Browsers

#### With npm

```console
$ npm install --save @syumai/goplayground
```

#### With CDN

```js
import { GoPlayground } from "https://unpkg.com/@syumai/goplayground/index.js";
```

### For Node.js

```console
$ npm install --save @syumai/goplayground-node
```

## Usage

```ts
import { GoPlayground } from "@syumai/goplayground"; // or "@syumai/goplayground-node"

const src = `package main
func main() {}`

const gp = new GoPlayground();

// format src
await gp.format(src);
// run src
await gp.compile(src);
// publish src
await gp.share(src);
```

## Use `goplayground-node` as a CLI tool

### Installation

```console
$ npm install -g @syumai/goplayground-node
```

### Usage

```console
goplayground-node fmt example.go   # format src
goplayground-node run example.go   # run src
goplayground-node share example.go # publish src
```

## Prior works

* Implementation in Go: https://github.com/tenntenn/goplayground

## License

MIT

## Author

syumai
npm package: @syumai/hono-esbuild-bundler
Description: esbuild Bundler Middleware for Hono
Latest version: 0.1.0

# esbuild Bundler Middleware

The **esbuild Bundler Middleware** is a Hono Middleware designed to bundle content such as TypeScript or TSX.
You can place your script written in TypeScript in a directory and serve it using `serveStatic`.
When you apply this Middleware, the script will be bundled into JavaScript code.

This Middleware uses esbuild. It works only on Node.js.

## Usage

### Node.js

#### Installation

```text
npm i hono @hono/node-server @syumai/hono-esbuild-bundler esbuild
```

#### Example

```ts
import { Hono } from 'hono'
import { serve } from '@hono/node-server'
import { serveStatic } from '@hono/node-server/serve-static'
import { esbuildBundler } from '@syumai/hono-esbuild-bundler/node'

const app = new Hono()

app.get('/static/:scriptName{.+.tsx?}', esbuildBundler())
app.get('/static/*', serveStatic({ root: './' }))

serve(app)
```

## Notes

- This middleware does not have a cache feature. If you want to cache the bundled code, use [Cache Middleware](https://hono.dev/middleware/builtin/cache) or your own custom middleware.
- `@hono/vite-dev-server` does not support Wasm, so you can't use this Middleware with it. However, Vite can bundle them, so you might not need to use this.

## Authors

- syumai <https://github.com/syumai>
- Yusuke Wada <https://github.com/yusukebe>
- Andres C. Rodriguez <https://github.com/acrodrig>

Original idea and implementation for "_Typescript Bundler Middleware_" is by Andres C. Rodriguez.

## License

MIT
npm package: @syv-ai/pixel-agents-watcher
Description: JSONL transcript watcher for Pixel Agents — monitors Claude Code activity and streams events via WebSocket
Latest version: 1.3.0

# @syv-ai/pixel-agents-watcher

Standalone JSONL transcript watcher for [Pixel Agents](https://github.com/syv-ai/pixel-agents). Monitors Claude Code activity on your machine and streams agent events to one or more Pixel Agents relay servers via WebSocket.

## Install

```sh
npm install -g @syv-ai/pixel-agents-watcher
```

## Usage

### Single office

```sh
pixel-agents-watcher --name "Alice" --server ws://relay-host:8080 --token secret
```

Or with npx (no install):

```sh
npx @syv-ai/pixel-agents-watcher --name "Alice" --server ws://relay-host:8080
```

### Multiple offices

Create `~/.pixel-agents/offices.json`:

```json
{
  "name": "Alice",
  "palette": 2,
  "hueShift": 0,
  "phrases": ["lgtm", "shipping it!", "need coffee", "hmm..."],
  "offices": [
    { "id": "public", "url": "wss://public-office.example.com", "token": null, "enabled": true },
    { "id": "team", "url": "wss://team-office.example.com", "token": "secret", "enabled": true }
  ]
}
```

Then run:

```sh
pixel-agents-watcher --config ~/.pixel-agents/offices.json
```

If no `--server` or `--config` flag is given, the watcher checks `~/.pixel-agents/offices.json` automatically. If the file doesn't exist, it falls back to single-office mode.

The config file is watched for live changes — add, remove, or toggle offices without restarting.

## Options

| Flag | Default | Description |
|------|---------|-------------|
| `--name <name>` | `Unknown` | Your display name in the office |
| `--server <url>` | `ws://localhost:8080` | Single relay server URL |
| `--token <token>` | _(none)_ | Authentication token (single-office mode) |
| `--palette <0-5>` | _(none)_ | Character palette index |
| `--hue-shift <deg>` | _(none)_ | Character hue shift in degrees |
| `--phrases <list>` | _(none)_ | Comma-separated phrases agents may say (e.g. `"lgtm,shipping it!"`) |
| `--config <path>` | _(none)_ | Path to offices.json (multi-office mode) |
| `--help`, `-h` | | Show help |
| `--version`, `-v` | | Show version |

## How it works

1. Watches `~/.claude/projects/` for JSONL transcript files
2. Detects recently active sessions (modified in last 10 minutes)
3. Parses `tool_use`/`tool_result` events from Claude Code transcripts
4. Streams status labels (e.g., "Reading", "Editing") to all connected relay servers — **no tool input/output data leaves the machine**
5. Auto-reconnects on disconnect (per-office, independent)

## Requirements

- Node.js >= 18
- Claude Code writing JSONL transcripts to `~/.claude/projects/`

## Credits

Built on top of [Pixel Agents](https://github.com/pablodelucca/pixel-agents) by Pablo De Lucca — the original pixel art office for AI agents.

## License

MIT
npm package: @syyedshoaib/audio-mixer
Description: The module which handles the audio tracksnatively
Author: shoaib
Latest version: 0.1.6
Deprecated: This package is no longer maintained. Do not use it.

# audio-mixer

The module which handles the audio tracksnatively

# Installation in managed Expo projects

**ℹ️ Note:** The stable version of this library for Expo managed workflow will be published on **June 30, 2025**. Please wait until then to use it in managed projects.

For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects &mdash; it is likely to be included in an upcoming Expo SDK release.

# Installation in bare React Native projects

For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.

### Add the package to your npm dependencies

```
npm install @syyedshoaib/audio-mixer
```

### Configure for iOS

Run `npx pod-install` after installing the npm package.

# Contributing

Contributions are very welcome! Please refer to guidelines described in the [contributing guide](https://github.com/expo/expo#contributing).
npm package: @syyfe/iconpark-taro-vue
Description: 基于 IconPark Taro + Vue3 环境图标引用库
Latest version: 0.0.16

# [iconpark-taro-vue](https://www.npmjs.com/package/@syyfe/iconpark-taro-vue)

基于 [IconPark](http://iconpark.bytedance.com/official) Taro + Vue3 环境图标引用库

## 安装
```shell
npm install @syyfe/iconpark-taro-vue -D

// or

yarn add @syyfe/iconpark-taro-vue
```

## 使用
```html
<template>
  <div>
    <camera />
  </div>
</template>

<script lang="ts" setup>
import { Camera } from "@syyfe/iconpark-taro-vue";
</script>

```

以上用法在开发环境中，编译时间会增加，最终打包结果会进行 Tree Sharing


## 单独图标引入
```html
<template>
  <div>
    <camera />
  </div>
</template>

<script lang="ts" setup>
import Camera from "@syyfe/iconpark-taro-vue/dist/icons/Camera.vue";
</script>

```

该用法单独引用图标组件，不会增加额外编译时间


## 图标配置

| 图标 | 预览效果 | 对应主题 |
| ---- | --- | --- |
| ```<camera theme="outline" fill="#000000" />``` | <img src="https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/camera_outline.png" width="20"></img> | 线框主题 |
| ```<camera theme="filled" fill="#333" />``` | <img src="https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/camera_filled.png" width="20"></img> | 填充主题 |
| ```<camera theme="two-tone" :fill="['#333' ,'#2F88FF']" />``` | <img src="https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/camera_two-tone.png" width="20"></img> | 双色主题 |
| ```<camera theme="multi-color" :fill="['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']" />``` | <img src="https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/camera_multi-color.png" width="20"></img> | 多色主题|
npm package: @syyfe/syy-mp-router
Description: 小程序命名路由
Author: yancun.liu@71360.com
Latest version: 3.3.0

# syy-mp-router

🚦 精巧强大的小程序路由

## 使用

#### 安装

```bash
npm i @syyfe/syy-mp-router
```

#### typescript 引入

```typescript
import Router, { RouteConfig } from '@syyfe/syy-mp-router'

// 定义路由配置
const routeConfigList: RouteConfig[] = [
  { name: 'test-tabbar', path: 'pages/tabbar/test-tabbar/index', isTab: true },
  { name: 'testA', path: 'test/pages/testA/index' },
  { name: 'testB', path: 'test/pages/testB/index' },
  { name: 'product-details', path: 'test/pages/product-details/index' },
]

// 实例化
const router = new Router({ routes: routeConfigList })

// 注册全局 beforeEach 钩子；使用方式和 vue-router 的 beforeEach 基本一致
router.beforeEach((to, from, next) => {
  console.log('当前路由', from)
  console.log('即将前往的路由', to)
  next()
  // next({ name: "pageB" });
  // next(false)
})

// 注册全局 afterEach 钩子
router.afterEach((current, from) => {
  console.log('跳转成功，当前路由:', current)
  console.log('之前路由:', from)
})

// 调用路由方法
router.push({ name: 'testA' })

// 调用路由传参数
router.push({ name: 'product-details', query: { id: 'sb' } })
```

## 实例 API

具体[查看这里](./dist/types/index.d.ts)
npm package: @syyskimo/sveditor
Description: Simple data-editor with Svelte, material UI and custom components
Latest version: 0.2.0

# Sveditor

A thingy, that may help you deal with random data. Has some in-bread editor-components, but you can create any svelte-component to edit values.

## Usage

1. Import Sveditor
2. Make a model
3. Get data
4. Use Sveditor with given data & model
5. ...
6. PROFIT

## But how?

Easiest way is to clone this repo and start playing with example data:

```bash
git clone https://github.com/Syyskimo/sveditor.git 
# navigate to folder you just cloned
cd sveditor
# install node modules
npm install
# start the server and open the app in a new browser tab
npm run dev -- --open
```

Then check the basic entry-point: `src/routes/index.svelte`

And try playing with it.

## Model

It might be a good idea (though, not mandatory) to use typescript. If you're using such
trying checking `lib/src/model/types | Model`

Model has:
* a name (not used at the moment, but humor me)
* validate -function (optional) that can be used to validate whole object
* properties : an array of actual properties:

Properties (PropertyModel):
* key: actual key (property name) of the value. 
* title: what the component might call this key 
* component (optional): name of component if wanted to use provided svelte material ui -components, see `lib/src/model/types | Component`
* svelteComponent (optional): if you want to create any own component, pass here a svelte-component
* definitions (optional): Non-typed -data for the component. So it's just anything the component might want
* validate (optional): validation function of this property

## Data

Data is just basic object. Might have anything.

For example:

```sveltehtml
<script lang="ts">
    import {Sveditor} from "sveditor";
    import {Model, Component} from "./types";

    let data = {
        id: 1,
        name: 'John',
        age: 25
    }

    // and a model for that might be:
    const model: Model = {
        name: 'person',
        properties: [
            {
                key: 'name',
                title: 'Name',
                component: Component.TextInput,
                validate: (value => {
                    return (value.length > 1 ? {validated: true} : {validated: false, message: 'too short'})
                })
            },
            {
                key: 'age',
                title: 'Give your age',
                component: Component.Slider,
                definitions: {
                    min: 18,
                    max: 99
                }
            },
        ]
    }

</script>

<Sveditor data="{data}" model="{model}" on:save={(x) => {console.log(x)}}/>
```
npm package: @syyu/component
Description: basic react component system for boilerplate
Author: brewcold
Latest version: 1.0.9

# @syyu/component

## Basic React Component System

Boilerplate React Components with Types (works smoothly with emotion/css)

`npm install @syyu/component`

`yarn add @syyu/component`

[https://www.npmjs.com/package/@syyu/component](https://www.npmjs.com/package/@syyu/component)

[About(KOR)](https://www.brewcoldblue.com/engineering/boilerplate-react-component-system)

## API

`*`: polymorphic - can be rendered as specific markup by "as" prop

- Bc.Button\* (`<button>`)
- Bc.Flex\*
- Bc.Form (`<form>`)
- Bc.BindedForm (form, input, label, button) + Bc.BindedFormContext
- Bc.Input (`<input>`) / Bc.TextArea ('`<textarea>`')
- Bc.Label (`<label>`)
- Bc.List\* (`<ul>`, `<ol>`, `<li>`, ...)
- Bc.Spacing (`<div>`, ...)
- Bc.Txt\* (`<hn>`, `<span>`, `<p>`, ...)
- Bc.View\* (`<div>`, ...)

### Example

```
import { Bc } from '@syyu/component'

...
  <Bc.Txt as="p">...</Bc.Txt>
  <Bc.Spacing dir="h" size="3rem" />
  <Bc.Flex flexDirection="row" flexWrap=...>...</Bc.Flex>
...
```

### Example: BindedForm

`**` [useForm API](https://github.com/brewcold/util/blob/main/react/src/use-form/README.md)

```
...
import { Bc } from '@syyu/component'
...

const handleSubmit = ({id, password}) => {
  //do something with form data
}
const { values, setValues, ... } = useContext(Bc.BindedFormContext)
  //see useForm API** to control form data precisely

  //match key with name
return (
  <Bc.BindedForm initialValues={{ id: '', password: '' }} onFormSubmit={handleSubmit}>
    <Bc.BindedForm.Input name='id' />
    <Bc.BindedForm.Input name='password' />
    <Bc.BindedForm.Button>SUBMIT</BindedForm.Button>
  <Bc.BindedForm>
)
...

```

## Tech Stack

- Core - React, TypeScript
- Styling - Emotion
- Testing - Jest
- Bundling - Rollup
npm package: @syyu/util
Description: React, Javascript/Typescript util library for practice
Author: brewcold
Latest version: 1.3.14-r
Deprecated: migrated to @frfla/react-hooks

# @syyu/util

Javascript/Typescript Utility Package for Practice

## TS

`import {...} from '@syyu/util'`

### `isServer()`, `isClient()`

### `objectKeys()`, `objectEntries()`

- Object.keys and Object.Entries with type assertion

### `isEmpty()`

- A utility function for checking if a value is empty or not
- empty values are: `'', [], {}, null, undefined, EMPTY[], EMPTY{}`
- e.g. `isEmpty({a: ''}) //true`

### `noop()`, `asyncNoop()`

- function that does nothing (`() => {}`)

### `getRandomNumber()`, `getRandomInt()`

- function that helps to get random number easily
- e.g. `const num = getRandomNumber([3,6], 'int') //returns int between 3 <= N < 6`

## REACT

`import {...} from '@syyu/util/react'`

### `useModal`

- A React hook for using Modal easily
- [DOCS](https://github.com/brewcold/util/blob/main/react/src/use-modal/README.md)

### `useForceRender`

- A React hook for forcibly rendering a component
- [DOCS](https://github.com/brewcold/util/blob/main/react/src/use-force-render/README.md)

### `useForm (beta)`

- A React hook for using form easily
- During the **beta** period, the API may unexpectedly change or new features may be added
- supports textarea and inputs (text, number, checkbox)
- provides APIs, `createUseFormContext` and `useFormContext` for integrating with Context API
- [DOCS](https://github.com/brewcold/util/blob/main/react/src/use-form/README.md)

### `useBooleanState`

- A useState hook for using boolean state conveniently
- example `const [display, show, hide, toggle] = useBooleanState(initialState)`
- If `initialState` is not provided as an argument, the default state value is set to **false**.
- [DOCS](https://github.com/brewcold/util/blob/main/react/src/use-boolean-state/README.md)

### `useTextCopy`

- A React hook for copying plain text to clipboard
- other types will be provided later
- example: `const [ copy, isCopied, restoreState ] = useTextCopy(duration, onError)`
- **works only in localhost or https**
- [DOCS](https://github.com/brewcold/util/blob/main/react/src/use-clipboard/README.md)

### `useDebouncedEffect/useDebouncedState`

- A React hook for debounced effect/state
- [DOCS](https://github.com/brewcold/util/blob/main/react/src/use-debounced/README.md)

### `useConditionalRender`

- A React hook for using conditional render easily
- useful in triggering animation with (un)mounting component
- [DOCS](https://github.com/brewcold/util/blob/main/react/src/use-conditional-render/README.md)

### `useIsomorphicLayoutEffect`

- In an SSR environment, useEffect should be used, while on the client side, useLayoutEffect should be utilized.
- helps prevent hydration errors
- [DOCS](https://github.com/brewcold/util/blob/main/react/src/use-isomorphic-layout-effect/README.md)

### `useRandomNumber`

- React hook for using random number with range easily
- [DOCS](https://github.com/brewcold/util/blob/main/react/src/use-numbers/README.md)
npm package: @sz-cis/ui
Description: 基于 Element Plus 二次封装的组件库
Author: wx-ycc
Latest version: 0.1.3

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
npm package: @sz-group/ht-block-admin
Description: A Vue.js project
Author: xiehui
Latest version: 0.1.35

## 安装

``` bash
npm i @sz-group/ht-block-admin
```

## 查看DEMO

### git工程到本地

### 安装依赖
```bash
 npm install
```
### 启动demo

```bash
 npm run dev
```
npm package: @sz-md/async-buffer
Description: Asynchronous buffer:
Author: SZ-Coder
Latest version: 0.3.0

# @sz-md/async-buffer

Asynchronous buffer:

```javascript
const AsyncBuffer = require("@sz-md/async-buffer")

async function main() {
	const buffer = await AsyncBuffer.create()

	setTimeout(() => {
		buffer.fill([1, 2])
		buffer.fill([3, 4, 5])
	}, 100)

	console.log(await buffer.read(4)) // [1, 2, 3, 4]
	console.log(await buffer.read(1)) // [5]
}

main()
```
npm package: @sz-md/mutex
Description: ```javascript const mutex = await Mutex.create(options)
Author: SZ-Coder
Latest version: 0.5.0

# @sz-md/mutex

```javascript
const mutex = await Mutex.create(options)

const release = await mutex.acquire()

/* Critical section */

release()
```

Where `options` is an object:

```javascript
{
	_maxQueueLength: 100 // maximum amount of waiters
}
```

A `waiter` is defined as:

The piece of code waiting for the Promise returned by `acquire()` to resolve.

API:

```javascript
mutex.acquire()
mutex.tryAcquire() // returns release() function or NULL
mutex.isLocked() // returns true or false
```
npm package: @sz-md/node-reconnecting-tcp-socket
Description: A reconnecting TCP socket module:
Author: SZ-Coder
Latest version: 0.5.0

# @sz-md/node-reconnecting-tcp-socket

A reconnecting TCP socket module:

```javascript
const socket = await NodeReconnectingTCPSocket.create({
	host: "localhost",
	port: 1337
})

socket.on("connected", () => {
	console.log("Socket connected.")

	socket.write("Hallo!\n")
})

socket.on("disconnected", () => {
	console.log("Socket disconnected.")
})

socket.on("data", (data) => {
	console.log("Received", data.toString())
})
```
npm package: @sz-md/node-tcp-client
Description: A simple TCP client module:
Author: SZ-Coder
Latest version: 0.1.2

# @sz-md/node-tcp-client

A simple TCP client module:

```javascript
const NodeTCPClient = require("@sz-md/node-tcp-client")
const decoder = new TextDecoder("utf8")

const client = await NodeTCPClient.create({
	host: "google.com",
	port: 80
})

client.on("data", (data) => {
	console.log("Received", decoder.decode(data), data)
	client.close()
})

await client.write("HEAD / HTTP/1.1\r\n\r\n")
```
npm package: @sz-md/node-tcp-server
Description: A simple TCP Server module:
Author: SZ-Coder
Latest version: 0.6.0

# @sz-md/node-tcp-server

A simple TCP Server module:

```javascript
const NodeTCPServer = require("@sz-md/node-tcp-server")

const server = await NodeTCPServer.create({
	port: 1337
})

server.on("connection", (client) => {
	client.on("data", console.log)
	client.write("Hello, World!\n")
	client.close()
})
```

### API

```javascript
{ port, path, host = "0.0.0.0", backlog = 511 } // Options
.on("connection", connection) // connection is of type node-tcp-client
```
npm package: @sz-md/postman
Description: A very simple asynchronous protocol using a 2 byte packet size header allowing for data transfers of up to 64kBytes.
Author: SZ-Coder
Latest version: 0.4.0

# @sz-md/postman

A very simple asynchronous protocol using a 2 byte packet size header allowing for data transfers of up to 64kBytes.

This protcol is intended for local inter process communication (IPC), but can be used outside of that scope.

API:

```javascript
const postman = require("@sz-md/postman")
const instance = await postman.create(options)

// You need to provide read/write functions like this:
instance.sendBytes = function(bytes) {
	// Send "bytes" array, bytes is an Uint8Array
}

// Call receiveBytes to process incoming data (Uint8Array)
instance.receiveBytes(buffer)

// Sending messages...
instance.send("A string")
instance.send({
	value: 100
})

// Receiving them:
await instance.receive()
```

Where `options` is an object:

```javascript
{
	_maxQueueLength: 10 /* see @sz-md/mutex */
}
```
npm package: @sz-sw-le0/flag-function-generator
Description: Creates a new function that accepts flags / modifiers.
Author: SZ-Software
Latest version: 1.0.0

# flag-function-generator

Creates a new function that accepts flags / modifiers.

Example usage:

```javascript
const flagFunctionGenerator = require("flag-function-generator")
const realFunction = function(modifiers, ...args) {
	// modifiers is an array
}

const doSomething = flagFunctionGenerator(realFunction, ["flag1", "flag2"])

// calls realFunction with flag1 and flag2 set
doSomething.flag1.flag2("something")
```
npm package: @sz-sw-le0/is-primitive
Description: Returns `true` or `false` if a value is a primitive or not.
Author: SZ-Software
Latest version: 1.0.0

# is-primitive

Returns `true` or `false` if a value is a primitive or not.

Example usage:

```javascript
const isPrimitive = require("is-primitive")

console.log(isPrimitive("Hello")) // true
```
npm package: @sz-sw-le0/named-anonymous-function
Description: Creates a named anonymous function:
Author: SZ-Software
Latest version: 1.0.0

# named-anonymous-function

Creates a named anonymous function:

Example usage:

```javascript
const namedAnonymousFunction = require("named-anonymous-function")

console.log(
	namedAnonymousFunction("myFunctionName", () => {

	})
) // [Function: myFunctionName]
```
npm package: @sz-sw-le0/no-op
Description: Module that creates a function that does nothing (no-operation).
Author: SZ-Software
Latest version: 1.0.0

# no-op

Module that creates a function that does nothing (no-operation).

Example usage:

```javascript
const noop = require("no-op")
const fn = noop(true)

// calling fn() does nothing
fn() // but it will return `true`
```
npm package: @sz-sw-le0/object-compare-prototype
Description: Compares the prototype of two objects.
Author: SZ-Software
Latest version: 1.0.0

# object-compare-prototype

Compares the prototype of two objects.

Example usage:

```javascript
const objectComparePrototype = require("object-compare-prototype")

console.log(
	objectComparePrototype("Test", "ACME")
) // logs true
```
npm package: @sz-sw-le1/expect
Description: Small assertion module.
Author: SZ-Software
Latest version: 1.0.0

# expect

Small assertion module.

|Function|Description|
|:---|:---|
|expect(`a`).toBe(`b`)|Asserts that `a` and `b` are the same (`===`).|
|expect(`a`).toBeInstanceOf(`b`)|Asserts that `a` is an instance of `b`|
|expect(`a`).toEqual(`b`)|If `b` is a primitive then:<br><br>`a === b`<br><br>If `b` is not a primitive:<br><br>• Asserts same prototype<br>• Asserts same properties<br>• Asserts property value recursively with `toEqual`|
|expect(`a`).toHaveProperty(`b`)|Asserts that object `a` has an enumerable/non-enumerable property called `b`.|
|expect(`a`).toHaveSubString(`b`)|Asserts that string `a` contains the sub-string `b`.|
|expect(`fn`).toThrowError()|Asserts that `fn` throws an error.|
|expect(`fn`).toThrowError(`message`)|Asserts that `fn` throws an error with a message containing `message`.|

All assertions (except `toThrowError`) can be negated with `.not`:

```javascript
expect(1).not.toBe(2)
```

Example usage:

```javascript
const {createExpectationsContext} = require("expect")
const {expect, end} = createExpectationsContext()

expect(1).toBe(1)
end()
```
npm package: @sz-sw-le1/object-diff-properties
Description: Compare property names of two objects `a` and `b`.
Author: SZ-Software
Latest version: 1.0.0

# object-diff-properties

Compare property names of two objects `a` and `b`.

Returns additional properties prefixed with `+` and missing properties with `-`.

If both objects have the same property names an empty array is returned.

⚠️ **Caution**
- **Don't rely on the property order returned by this module.**
- It does consider non-enumerable object properties.
- It does not traverse the prototype chain (it uses @sz-sw-le0/object-get-properties).
- It does not care about the property values.

Example usage:

```javascript
const objectDiffProperties = require("object-diff-properties")
const a = {name: "John Doe"}
const b = {age: 35}
const diff = objectDiffProperties(a, b).sort()

console.log(
	diff // logs ["+age", "-name"]
)
```
npm package: @sz-sw-le1/object-property-is-enumerable
Description: Returns whether a property is enumerable or not.
Author: SZ-Software
Latest version: 1.0.0

# object-property-is-enumerable

Returns whether a property is enumerable or not.

⚠️ **Caution**:
- Does throw error if property does not exist on object.

Example usage:

```javascript
const objectPropertyIsEnumerable = require("object-property-is-enumerable")
const obj = {}
Object.defineProperty(obj, "enumerable", {enumerable: true})
Object.defineProperty(obj, "non-enumerable", {enumerable: false})

console.log(
	objectPropertyIsEnumerable(obj, "enumerable"), // true
	objectPropertyIsEnumerable(obj, "non-enumerable") // false
)
```
npm package: @sz-sw/async-buf
Description: Asynchronous buffer:
Author: SZ-Coder
Latest version: 1.0.2

# @sz-sw/async-buf

Asynchronous buffer:

```javascript
const AsyncBuffer = require("@sz-sw/async-buf")

const buffer = AsyncBuffer.create()

async function main() {
	console.log(await buffer.read(4)) // [1, 2, 3, 4]
	console.log(await buffer.read(1)) // [5]
}

setTimeout(() => {
	buffer.fill([1, 2])
	buffer.fill([3, 4, 5])
}, 100)

main()
```
npm package: @sz-sw/events
Description: Simple event emitter module:
Author: SZ-Coder
Latest version: 2.1.4

# @sz-sw/events

Simple event emitter module:

```javascript
const Events = require("@sz-sw/events")

const events = Events.create(["error", "data"])

events.addEventListener("error", console.log)

events.emit("error", "Ooops!")
```

Events can be queued with `.enqueue()`:

```javascript
const Events = require("@sz-sw/events")

const events = Events.create(["error", "data"])

const flushEventQueue = events.enqueue()

events.addEventListener("error", console.log)

// Events will be queued
events.emit("error", "Ooops 1!")
events.emit("error", "Ooops 2!")

// Flush queue after 1 second
setTimeout(flushEventQueue, 1000)

```

Flushing the event queue will deactivate event queing.

Multiple calls to `.enqueue()` are permitted.
npm package: @sz-sw/nanf
Description: Creates a named anonymous function:
Author: SZ-Coder
Latest version: 1.0.1

# @sz-sw/nanf

Creates a named anonymous function:


```javascript
const nanf = require("@sz-sw/nanf")

console.log(
	nanf("myFunctionName", () => {

	})
) // [Function: myFunctionName]
```
npm package: @sz-sw/unwrap-p
Description: Unwraps a primitive object:
Author: SZ-Coder
Latest version: 1.0.0

# @sz-sw/unwrap-p

Unwraps a primitive object:

```javascript
const unwrap = require("@sz-sw/unwrap-p")

console.log(typeof unwrap(new Number(3)) === "number") // true
console.log(unwrap(new Number(3)) === 3) // true
```