open-index/open-npm huggingface dataset:
npm package: @sylphx/zen-router
Description: Tiny URL router for zen state management.
Author: Sylphx
Latest version: 5.0.35

# @sylphx/zen-router

Tiny URL router integration for `@sylphx/zen` state management. Uses browser History API.

## Installation

```bash
npm install @sylphx/zen-router @sylphx/zen
# or
yarn add @sylphx/zen-router @sylphx/zen
# or
pnpm add @sylphx/zen-router @sylphx/zen
# or
bun add @sylphx/zen-router @sylphx/zen
```

## Basic Usage

```typescript
import { $router, defineRoutes, startHistoryListener, open, matchRoutes, RouteConfig } from '@sylphx/zen-router';
import { subscribe, get } from '@sylphx/zen';

// 1. Define your routes
// RouteConfig allows arbitrary data associated with a path
interface MyRouteConfig extends RouteConfig {
  componentName: string;
  title: string;
}

const routes: MyRouteConfig[] = [
  { path: '/', componentName: 'Home', title: 'Homepage' },
  { path: '/about', componentName: 'About', title: 'About Us' },
  { path: '/users/:id', componentName: 'UserProfile', title: 'User Profile' }, // Dynamic segment
  { path: '*', componentName: 'NotFound', title: 'Not Found' }, // Catch-all
];
defineRoutes(routes);

// 2. Subscribe to the router state atom ($router)
const unsubscribeRouter = subscribe($router, (routerState) => {
  console.log('Path:', routerState.path);
  console.log('Params:', routerState.params); // e.g., { id: '123' } for /users/123
  console.log('Search:', routerState.search); // e.g., { q: 'test' } for /?q=test

  // You often need to match the current path again to get associated route data
  const currentMatch = matchRoutes(routerState.path, routes);
  if (currentMatch) {
    console.log('Current Component:', (currentMatch.route as MyRouteConfig).componentName);
    document.title = (currentMatch.route as MyRouteConfig).title;
  } else {
     console.log('No matching route component found (404)');
     document.title = 'Not Found';
  }
});

// 3. Start listening to history changes (popstate, link clicks)
// Needs to run in a browser environment
startHistoryListener();

// 4. Navigate programmatically
// open('/about'); // Navigates to /about using pushState
// redirect('/users/456?ref=test'); // Navigates using replaceState

// Initial state based on current URL (e.g., if loaded at /users/10)
const initialState = get($router);
console.log('Initial State:', initialState);

// To clean up:
// unsubscribeRouter();
// stopHistoryListener(); // If needed
```

## Features

*   Integrates seamlessly with `@sylphx/zen` map stores.
*   Minimal API surface (`$router`, `defineRoutes`, `matchRoutes`, `open`, `redirect`, `startHistoryListener`, `stopHistoryListener`).
*   Tiny size.
*   Supports dynamic segments (`:param`) and optional segments (`:param?`).
*   Basic catch-all routes (`*`).
*   Automatic parsing of query parameters (`search` state).
*   Intercepts clicks on local `<a>` tags for SPA navigation.
*   Uses browser History API (`pushState`, `replaceState`, `popstate`).

## API Documentation

Detailed API documentation can be found [here](../../../docs/modules/_sylph_router.html). (Link assumes TypeDoc output in `/docs` at repo root).

## License

MIT
npm package: @sylphx/zen-router-preact
Description: Preact integration for @sylphx/zen-router
Author: Sylphx
Latest version: 5.0.35

# @sylphx/zen-router-preact

Preact integration for @sylphx/zen-router. Use Zen router in Preact components with hooks.

## Installation

```bash
npm install @sylphx/zen-router-preact
# or
bun add @sylphx/zen-router-preact
```

## Usage

```tsx
import { useRouter } from '@sylphx/zen-router-preact';

function App() {
  const router = useRouter();

  return (
    <div>
      <p>Current path: {router.path}</p>
      <p>Page param: {router.params.page}</p>
    </div>
  );
}
```

## API

### `useRouter(): RouterState`

Returns the current router state, re-rendering the component when it changes.

**Returns:**
- `path`: Current URL path
- `search`: Parsed query parameters
- `params`: Route parameters

## License

MIT
npm package: @sylphx/zen-vue
Description: Vue integration for Zen state manager
Author: Sylphx
Latest version: 5.0.35

# @sylphx/zen-vue

Vue integration for Zen state manager. Use Zen stores in Vue components with automatic reactivity.

## Installation

```bash
npm install @sylphx/zen-vue
# or
bun add @sylphx/zen-vue
```

## Usage

### Basic Example

```vue
<script setup lang="ts">
import { zen, set } from '@sylphx/zen';
import { useStore } from '@sylphx/zen-vue';

// Create a zen store
const count = zen(0);

// Use it in a Vue component - returns a reactive ref
const countRef = useStore(count);

const increment = () => {
  set(count, countRef.value + 1);
};
</script>

<template>
  <div>
    <p>Count: {{ countRef }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
```

### With Computed Values

```vue
<script setup lang="ts">
import { zen, computed } from '@sylphx/zen';
import { useStore } from '@sylphx/zen-vue';

const count = zen(0);
const doubled = computed(count, (n) => n * 2);

const countRef = useStore(count);
const doubledRef = useStore(doubled);
</script>

<template>
  <div>
    <p>Count: {{ countRef }}</p>
    <p>Doubled: {{ doubledRef }}</p>
  </div>
</template>
```

### Shared State Across Components

```typescript
// stores/counter.ts
import { zen } from '@sylphx/zen';

export const counter = zen(0);
```

```vue
<!-- ComponentA.vue -->
<script setup lang="ts">
import { useStore } from '@sylphx/zen-vue';
import { counter } from './stores/counter';

const count = useStore(counter);
</script>

<template>
  <p>Count: {{ count }}</p>
</template>
```

```vue
<!-- ComponentB.vue -->
<script setup lang="ts">
import { set } from '@sylphx/zen';
import { useStore } from '@sylphx/zen-vue';
import { counter } from './stores/counter';

const count = useStore(counter);

const increment = () => set(counter, count.value + 1);
</script>

<template>
  <button @click="increment">Increment</button>
</template>
```

## API

### `useStore<Value>(store: Zen<Value>): Ref<Value>`

Subscribes to a Zen store and returns its value as a reactive Vue ref.

**Parameters:**
- `store`: Any Zen store (zen, computed, map, etc.)

**Returns:**
- A reactive Vue `Ref` that automatically updates when the store changes

**Features:**
- Automatically subscribes on component mount
- Automatically unsubscribes on component unmount
- SSR-safe
- TypeScript support

## Why Use Zen with Vue?

- 🎯 **Framework-agnostic stores**: Share state logic across different frameworks
- 🪶 **Tiny bundle size**: Minimal overhead (~200 bytes)
- ⚡ **Performance**: Optimized for reactive updates
- 📦 **Simple API**: Just one hook to learn
- 🔒 **Type-safe**: Full TypeScript support

## License

MIT
npm package: @sylvainle/angular-protractor-cucumber
Description: A collection of sentences for cucumber js - cucumber 2+
Author: Sylvain LERAY
Latest version: 1.0.7

# angular-protractor-cucumber

github : https://github.com/sylvainle/angular-protractor-cucumber/

(Forked from https://github.com/donkeycode/angular-protractor-cucumber/)

BREAKING CHANGES :
- Support cucumber js releases >= 2.x.x (but releases < 2.0.0 must stay on forked lib)
- Steps and support file upgraded
- Hooks upgraded

New features :
- Test added to angular-protractor-cucumber
- Add beforeFeature (file) capabilities

Usage :
- npm install angular-protractor-cucumber
- [if needed] add node_modules/.bin to your environment paths
- [under windows] close and reopen cmd
- exec "webdriver-manager update"
- create/update your protractor.conf.js with your downloaded seleniumServerJar release version
- create/update your tests (example under node_modules/@sylvainle/angular-protractor-cucumber/test)
- available steps are under node_modules/@sylvainle/angular-protractor-cucumber/src/step-definitions
- available support content is under node_modules/@sylvainle/angular-protractor-cucumber/src/support
- don't forget to include angular-protractor-cucumber step-definitions and support content in your protractor.conf.js (cucumberOpts.require) :
```
// protractor.conf.js
exports.config = {
    allScriptsTimeout: 99999,
    directConnect: true,
    capabilities: {'browserName': 'chrome'},
    baseUrl: 'https://angularjs.org',

    framework: 'custom',
    frameworkPath: 'node_modules/protractor-cucumber-framework',

    specs: ['test/e2e/**/*.feature'],

    cucumberOpts: {
        require: [
            'node_modules/@sylvainle/angular-protractor-cucumber/src/step-definitions/**/*.js',
            'node_modules/@sylvainle/angular-protractor-cucumber/src/step-definitions/support/**/*.js',
            'test/e2e/step-definitions/**/*.js',
            'test/e2e/support/**/*.js'
        ],
        format: 'progress',
    },

    resultJsonOutputFile: './results/e2e/results.json'
};
```
- test it with a simple example :
```
Feature: Simple feature
Scenario: Simple test
Given I wait 2 seconds
```
npm package: @sylvainpolletvillard/setup-linters
Description: Auto setup linters for JS, CSS, HTML
Author: Sylvain Pollet-Villard
Latest version: 1.0.0

# setup-linters

Auto setup linters for JS, CSS, HTML in a new project. My opiniated config, but can be easily changed.

Install and configure eslint, stylelint, htmllint and lint-staged to lint your changed files before a commit.

```bash
cd my-new-project
npm i @sylvainpolletvillard/setup-linters --save-dev
npx setup-linters
```
npm package: @sylvanas-cry/eslint-config
Description: ESLint Shared Config.
Author: Sylvanas Cry
Latest version: 1.0.3

# ESLint Config

The ESLint configuration for TypeScript.

## Installation and Usage

Install the library:

```shell
npm i -D @sylvanas-cry/eslint-config
```

Install peer dependencies:
```shell
npm i -D \
  eslint \
  eslint-plugin-import \
  eslint-plugin-simple-import-sort \
  @typescript-eslint/parser \
  @typescript-eslint/eslint-plugin
```

Create file named `.eslintrc` at the root of your project:

```json
{
  "extends": "@sylvanas-cry/eslint-config"
}
```

You can override rules this way:
```json
{
  "extends": "@sylvanas-cry/eslint-config",
  "rules": {
    "no-console": "off"
  }
}
```

## License

The scripts and documentation in this project are released under the [MIT License](./LICENSE).
npm package: @sylvanas-cry/json-lines-colorize
Description: Colorizes the JSON-strings input stream (stdin).
Author: Sylvanas Cry
Latest version: 1.2.3

# json-lines-colorize

Colorizes the JSON-strings input stream (stdin).

<img src="https://i.imgur.com/TXpqcKo.png" alt="jlc" />


## Installation

```shell
npm install -g @sylvanas-cry/json-lines-colorize
```

## Usage

```shell
<output_stream> | jlc [options]
```

Where options is:
  - `-c, --comma` — add comma to the end of every JSON object
  - `-n, --no-pretty` — disable pretty-print of JSON objects
  - `-o, --override <property>,<value>,<hex-color>` — replaces property name and string literal
    colors with given `hex-color` if JSON object has `property` with `value` 

## Examples

```shell
echo '{"foo":"bar"}' | jlc
```

```shell
echo '{"level":"error","message":"error"}\n{"level":"log","message":"ok"}' | \
jlc -o level,error,ff0000
```

```shell
echo '{"a":"b"}\n{"c":"d"}' | jlc -o a,b,ff0000 -o c,d,\#00FF00
```

```shell
tail -f /var/log/my-service.log | jlc -n -c
```

```shell
kubectl logs -n my-namespace --follow my-pod | jlc
```

## License

The scripts and documentation in this project are released under the [MIT License](./LICENSE).
npm package: @sylvesteraswin/react-lazyload-image
Description: Lazyload image react component.
Author: Sylveter Aswin Stanley
Latest version: 1.0.6

# @sylvesteraswin/react-lazyload-image

A react hook based no dependency lazy load image component.

```bash
$ yarn add @sylvesteraswin/react-lazyload-image
```

For documentation [click here](https://react-lazyload-image.sylvester.app/).
npm package: @sylviste/elysia-jwt
Description: Plugin for Elysia for using JWT Authentication
Author: saltyAom
Latest version: 1.1.0-beta.5

# @elysiajs/static

Plugin for [Elysia](https://github.com/elysiajs/elysia) for using JWT Authentication.

## Installation

```bash
bun add @elysiajs/jwt
```

## Example

```typescript
import { Elysia, t } from 'elysia';
import { jwt } from '@elysiajs/jwt';
import { cookie } from '@elysiajs/cookie';

const app = new Elysia()
  .use(
    jwt({
      name: 'jwt',
      // This should be Environment Variable
      secret: 'MY_SECRETS',
    })
  )
  .use(cookie())
  .get('/sign/:name', async ({ jwt, cookie, setCookie, params }) => {
    setCookie('auth', await jwt.sign(params), {
      httpOnly: true,
    });

    return `Sign in as ${params.name}`;
  })
  .get('/profile', async ({ jwt, set, cookie: { auth } }) => {
    const profile = await jwt.verify(auth);

    if (!profile) {
      set.status = 401;
      return 'Unauthorized';
    }

    return `Hello ${profile.name}`;
  })
  .listen(8080);
```

## Config

This package extends [jose](https://github.com/panva/jose), most config is inherited from Jose.

Below are configurable properties for using JWT plugin

### name

Name to decorate method as:

For example, `jwt` will decorate Context with `Context.jwt`

### secret

JWT secret key

### schema

Type strict validation for JWT payload

## Jose's config

Below is the config inherits from [jose](https://github.com/panva/jose)

### alg

@default 'HS256'

Algorithm to sign JWT with

### crit

Critical Header Parameter.

### iss

JWT Issuer

@see [RFC7519#section-4.1.1](https://www.rfc-editor.org/rfc/rfc7519#section-4.1.1)

### sub

JWT Subject

@see [RFC7519#section-4.1.2](https://www.rfc-editor.org/rfc/rfc7519#section-4.1.2)

### aud

JWT Audience

@see [RFC7519#section-4.1.3](https://www.rfc-editor.org/rfc/rfc7519#section-4.1.3)

### jti

JWT ID

@see [RFC7519#section-4.1.7](https://www.rfc-editor.org/rfc/rfc7519#section-4.1.7)

### nbf

JWT Not Before

@see [RFC7519#section-4.1.5](https://www.rfc-editor.org/rfc/rfc7519#section-4.1.5)

### exp

JWT Expiration Time

@see [RFC7519#section-4.1.4](https://www.rfc-editor.org/rfc/rfc7519#section-4.1.4)

### iat

JWT Issued At

@see [RFC7519#section-4.1.6](https://www.rfc-editor.org/rfc/rfc7519#section-4.1.6)
npm package: @sylvox-form-create/sylvox-designer
Description: Sylvox基于 form-create-designer 二次开发的自定义表单设计器
Author: Sylvox
Latest version: 3.4.8

<p align="center">
    <a href="https://www.form-create.com">
        <img width="300" alt="FormCreate" src="https://static.form-create.com/file/img/info-logo2.png">
    </a>
</p>

<p align="center">
    <a href="https://www.form-create.com/" target="_blank">官网</a>
    <span>&nbsp;|&nbsp;</span>
    <a href="https://view.form-create.com/" target="_blank">帮助文档</a>
    <span>&nbsp;|&nbsp;</span>
    <a href="https://form-create.com/v3/designer/" target="_blank">在线演示</a>
    <span>&nbsp;|&nbsp;</span>
    <a href="https://form-create.com/v3/" target="_blank">FormCreate 文档</a>
</p>

<p align="center">
  <a href="https://github.com/xaboy/form-create" target="_blank"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="TIM" /></a>
  <a href="https://github.com/xaboy/form-create" target="_blank"><img src="https://img.shields.io/npm/dt/@form-create/designer.svg" alt="dt" /></a>
</p>

**FcDesigner 是基于 [@form-create/element-ui](https://github.com/xaboy/form-create) 实现的低代码表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。支持Vue2和Vue3**

**AI 表单助理已开源:[GitHub](https://github.com/xaboy/form-create-assistant)，用于根据自然语言描述自动生成和修改 FormCreate 表单规则**

[![FcDesigner](https://static.form-create.com/file/img/banner-m2.jpg?20251027)](https://pro.form-create.com/view)

## 特点
- 使用JSON数据生成表单
- 支持扩展自定义组件
- 内置30+常用的表单组件和布局组件
- 提供丰富的表单操作API
- 支持子表单和分组
- 支持事件配置
- 支持样式配置
- 支持表格布局
- 支持表单验证
- 支持多语言
- 支持表单多语言
- 支持AI表单助理

## 支持的UI框架

[![FcDesigner](https://static.form-create.com/file/img/products.jpg)](https://form-create.com/)

> 如果对您有帮助，您可以点右上角 **"Star"** 支持一下 谢谢！本项目还在不断开发完善中,如有任何建议或问题[请在这里提出](https://github.com/xaboy/form-create-designer/issues/new)

> 开发者讨论群[629709230](https://jq.qq.com/?_wv=1027&k=F1FlEFIV)

- **预览**

![demo1](https://static.form-create.com/file/img/open-designer.jpg)

## 引入

**CDN:**

```html
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"></link>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script>
```

**NodeJs:**

```shell
npm install @form-create/designer@next
npm install @form-create/element-ui@next
npm install element-plus
```

```js
import FcDesigner from '@form-create/designer'
import ELEMENT from 'element-plus';
import 'element-plus/dist/index.css';

app.use(ELEMENT);
app.use(FcDesigner)
app.use(FcDesigner.formCreate)
```

## 使用

```html
<fc-designer ref="designer"/>
```

## 联系

![http://static.form-create.com/file/img/support.jpg](http://static.form-create.com/file/img/support.jpg)

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2021-present xaboy