open-index/open-npm huggingface dataset:
npm package: @jokay03j-v2/sasslib
Description: beautiful css module
Author: jokay03j-v2
Latest version: 1.3.0

[![npm badge](https://nodei.co/npm/@jokay03j-v2/sasslib.png)](https://www.npmjs.com/package/@jokay03j-v2/sasslib)\
[![monthly downloads](https://img.shields.io/npm/dw/@jokay03j-v2/sasslib?style=flat-square)](https://www.npmjs.com/package/@jokay03j-v2/sasslib)
[![minified package](https://img.shields.io/bundlephobia/min/@jokay03j-v2/sasslib?style=flat-square)](https://www.npmjs.com/package/@jokay03j-v2/sasslib)
[![package version](https://img.shields.io/npm/v/@jokay03j-v2/sasslib?style=flat-square)](https://www.npmjs.com/package/@jokay03j-v2/sasslib)
[![package license](https://img.shields.io/npm/l/@jokay03j-v2/sasslib?style=flat-square)](https://www.npmjs.com/package/@jokay03j-v2/sasslib)

# sasslib

beautiful css mobule

# shinobie

shinobie is deprecated and no longer receive major update

# documentation

documentation is [here](https://jokay03j-v2.github.io/sasslib/)

# disclaimer

this projet is for education only

# credit

thanks to [the net ninja](https://www.youtube.com/@NetNinja) for original idea

## fonts

thanks to [Poppins font](https://fonts.google.com/specimen/Poppins) and their authors(Indian Type Foundry, and Jonny Pinhorn)
npm package: @jokay03j-v2/w3c-validator
Description: CLI for check file or url with W3C Markup Service
Author: jokay03J @Jokay03J
Latest version: 2.2.5

# w3c-validator

> CLI for check file or url with W3C Markup Service

## Docs

You can see docs for the cli [here](https://jokay03j-v2.github.io/w3c-validator/docs/category/cli)

## Exemple

```bash
pnpm dlx @jokay03j-v2/w3c-validator COMMAND [ARGS]
```

```bash
npx @jokay03j-v2/w3c-validator COMMAND [ARGS]
```

## How to contribute ?

### Build project

On shell run.

```bash
pnpm run build
```

### Run development build

On current directory.

On shell run.

```bash
./bin/dev.js [COMMAND]
```

### Run builded project

You must [build](#build-project) before.

On shell run.

```bash
./bin/run.js [COMMAND]
```

### Run tests

On shell run.

```bash
pnpm run test
```
npm package: @joker.front/ast
Description: ### Overview
Author: Zohar
Latest version: 1.3.31

# Joker AST ![npm](https://img.shields.io/npm/v/%40joker.front%2Fast)![NPM Downloads](https://img.shields.io/npm/dw/%40joker.front%2Fast)

### Overview

The AST (Abstract Syntax Tree) is the structured data for templates in Joker. It is ultimately combined with component instances to render virtual nodes, which are then rendered onto the corresponding platform.

There are two sources for AST:

-   **Single File Components (SFCs)**: Written within the `<template>` tag of an SFC. Follow the syntax rules outlined in the [Template Guide](http://www.jokers.pub#/base/template). These templates are converted into `AST.Node[]` via the **CLI**.
-   **JavaScript API**: Using methods like `createText` and `createCommand` provided by the Joker Core to programmatically generate `AST.Node[]` in JavaScript. Assign the result to the `template` property of a component. Refer to the [Component Properties](http://www.jokers.pub#/base/component-property) documentation for details on the `template` property.

Both methods produce `AST.Node[]`. The `AST.Node` is the base class for all AST nodes and is categorized into four types based on functionality: `Text`, `Element`, `Comment`, and `Component`. The base `AST.Node` class has the following properties:

| Property  | Description | Type       |
| --------- | ----------- | ---------- |
| childrens | Child nodes | AST.Node[] |
| type      | Node type   | NodeType   |

Determine the specific type of an `AST.Node` by checking its `type` property against the `NodeType` enum:

```ts
// This enum is available as AST.NodeType
export enum NodeType {
    TEXT, // Text
    COMMENT, // Comment
    ELEMENT, // HTML Element
    COMMAND, // Directive
    COMPONENT // Dynamic Component
}

// Example usage:
item.type === AST.NodeType.COMMENT;
```

## Documentation

[Official Website](http://www.jokers.pub)

[Help Documentation](http://front.jokers.pub)
npm package: @joker.front/cli
Description: The Next-Generation Front-End Toolchain: Swift, Efficient, and Adaptive.
Author: Zohar
Latest version: 1.1.159

# Joker CLI Project ![NPM Version](https://img.shields.io/npm/v/%40joker.front%2Fcli)

The Next-Generation Front-End Toolchain: Swift, Efficient, and Adaptive.

## Features

-   **ESM (Module) Support**: Joker CLI embraces the ESM (EcmaScript Modules) mode. This empowers it to harness the latest JavaScript module standard and offer on-demand compilation. This mode not only augments loading efficiency but also ensures that only the code truly required by the user is compiled and parsed, thereby remarkably enhancing the application's responsiveness and performance.
-   **Asynchronous Static Scanning of Front-End Entry Dependencies**: The asynchronous static scanning of front-end entry dependencies is executed without impeding the main thread. This transforms the pre-compilation of third-party dependencies into directly executable files. This characteristic is especially conspicuous during cold start, capable of substantially diminishing application startup time and optimizing user experience.
-   **Hot Module Replacement (HMR) Functionality**: The support for hot module replacement enables developers to instantaneously witness the effects of code alterations while the application is running, eliminating the necessity to reload the page or restart the application. This is of utmost significance for augmenting development efficiency and iteration speed.
-   **Adherence to Rollup Plugin Specification**: Conforming to the Rollup plugin specification allows Joker CLI to seamlessly integrate with the widely adopted Rollup plugin ecosystem, endowing developers with extensive flexibility and expandability.
-   **Production Build Support**: Joker CLI backs production environment builds, signifying that it can generate optimized code for the production environment, facilitating developers in creating high-performance, optimized applications.
-   **Support for Joker Syntax Compilation**: The Joker SFC plugin is employed for compiling Joker files and is deeply integrated with HRM (Hot Module Replacement), exhibiting outstanding performance.
-   **Low-Code Platform Internal Compilation**: It internally integrates real-time compilation capabilities for the low-code platform, boasting remarkable performance, rapid responsiveness, and timely operation.

## Installation and Usage

```
pnpm add @joker.front/cli
```

It furnishes two commands, "server" and "build", which respectively denote development and production build. It also has internal integration for parsing Joker SFC files.

## Documentation

[Official Website](https://www.jokers.pub)

[Help Documentation](https://front.jokers.pub/cli/introduction)

[Visual Coding IDE](https://vicode.jokers.pub)
npm package: @joker.front/cli-plugin-legacy
Description: joker.front/cli 兼容性转换插件
Author: Zohar
Latest version: 1.0.2

# Joker.front/cli 浏览器兼容插件

Joker.front/cli 的默认浏览器支持基线是原生 ESM、原生 ESM 动态导入和 import.meta。此插件为在构建生产环境时提供不支持这些功能的旧版浏览器的支持。

默认情况下，此插件将：
为最终包中的每个块生成相应的旧版块，使用 @babel/preset-env 转换并作为 SystemJS 模块发出（仍然支持代码分割！）。
生成一个包含 SystemJS 运行时和通过指定浏览器目标和实际使用情况确定的必要 polyfills 的 polyfills 块。

## 如何使用

此插件为`@joker.front/cli`的扩展插件，需要在`CLI配置文件中`进行插件配置（例如：`joker.config.js`）：

```js
import legacy from "@joker.front/cli-plugin-legacy";

export default {
    plugins: [
        legacy({
            //默认为“-legacy”
            legacyName: "-legacy",
            targets: ["chrome 80", "ie >= 10"],
            modernPolyfills: ["es.promise.finally"]
        })
    ]
};
```

## 文档

[官网](http://www.jokers.pub)

[帮助文档](http://www.jokers.pub#/cli/plugins)
npm package: @joker.front/requester
Description: Joker 接口请求库，可通过该类库实现与@joker.server/core的快速对接。
Author: Zohar
Latest version: 1.0.48

# Joker Requester ![NPM Version](https://img.shields.io/npm/v/%40joker.front%2Frequester)

The `@joker.front/requester` library offers a wide range of configurable properties, which greatly assist developers in efficiently managing requests within their projects. It simplifies the process of handling various types of requests, such as HTTP requests, and provides flexibility in customizing the request behavior according to the specific requirements of the application.

### How to Use

To start using the `@joker.front/requester` in your project, follow these steps:

```ts
import { Requester } from "@joker.front/requester";

// Create a new instance of the Requester class. The constructor accepts an object with configuration options.
// In this example, we set the 'base' option to '/server'. This base URL will be prepended to all the relative paths specified in the subsequent requests. It allows you to define a common root for your API endpoints, making it easier to manage and update the API URLs in case of any changes.
// You can also configure other options here, such as headers, timeouts, authentication mechanisms, etc., depending on your application's needs.
let requester = new Requester({
    base: "/server"
    //... other configuration options can be added here
});

// Use the'requester' instance to send a request. The'request' method takes two parameters: the first is the relative URL path of the request (in this case, "/user/add"), and the second is an object containing the request data.
// Here, we are sending a request to add a user. The request data includes the username and password. The data object can be used to send various types of data, such as form data, JSON data, etc., depending on the API's requirements.
requester.request("/user/add", {
    data: {
        userName: "zohar",
        pwd: "1234"
    }
});
```

## Documentation

[Official Website](https://jokers.pub)

[Help Docs](https://front.jokers.pub/requester)

[Visual Coding IDE](https://viscode.jokers.pub)
npm package: @joker.front/router
Description: Joker Front Router 路由管理
Author: Zohar
Latest version: 1.0.49

# Joker Router ![NPM Version](https://img.shields.io/npm/v/%40joker.front%2Frouter)

`@joker.front/router` serves as the core routing component within the Joker front-end framework. It plays a crucial role in handling the navigation and URL management of web applications.

## How To Use

To utilize the `@joker.front/router` in your application, you can follow these steps:

```ts
import { Router } from "@joker.front/router";

// Create a new instance of the Router and configure it with necessary options
new Router({
    // Set the logger level. In this case, it is set to "info", which can be used to log routing-related information at an appropriate level for debugging and monitoring purposes.
    loggerLeve: "info",
    // Define the route configurations. Each route object contains properties such as 'path' and 'component'.
    // The 'path' specifies the URL path, and 'component' indicates the corresponding component to be rendered when that path is accessed.
    // Here, we have a root route ("/") that redirects to "/a". The "/a" route has its own component 'a' and can have child routes.
    // The child routes of "/a" are defined within the 'children' array. For example, an empty path "" within the children of "/a" maps to the component 'a1', and the path "a2" maps to the component 'a2'.
    routes: [
        { path: "/", redirect: "/a" },
        {
            path: "/a",
            component: a,
            children: [
                { path: "", component: a1 },
                { path: "a2", component: a2 }
            ]
        }
    ]
});
```

Within a component, you can access and manipulate routing information by reading the `router` property:

```ts
import { router } from "@joker.front/router";

export default class extends Component {
    test() {
        // Navigate to a new route. In this example, it redirects to the route with the path "b".
        // This is useful when you want to perform a programmatic navigation, such as after a certain action or condition is met.
        router.push({
            path: "b"
        });

        // Go back to the previous route. This mimics the behavior of the browser's back button and can be used to provide a seamless user experience when navigating back in the application's history.
        router.back();

        // Retrieve the current route information. The 'value' property holds the details of the currently active route, which can be used for various purposes, such as conditional rendering or performing actions based on the current route.
        router.route.value;
    }
}
```

## Documentation

[Help Docs](https://front.jokers.pub/router/introduction)

[Visual Coding IDE](https://jokers.pub)
npm package: @joker.server/core
Description: `@joker.server/core` is the core server-side framework of the Joker ecosystem. Built upon the KOA framework, it's designed to empower developers with an efficient and streamlined experience for building server-side applications. By inheriting KOA's lightw
Author: Zohar
Latest version: 1.0.180

# @joker.server/core

`@joker.server/core` is the core server-side framework of the Joker ecosystem. Built upon the KOA framework, it's designed to empower developers with an efficient and streamlined experience for building server-side applications. By inheriting KOA's lightweight and flexible nature, it simplifies common server-side development workflows through thoughtful encapsulation and extensions.

## Key Features

-   **KOA-Powered Foundation**: Fully compatible with KOA's middleware architecture and ecosystem. Seamlessly integrate existing KOA middleware (e.g., `koa-router`, `koa-bodyparser`) to minimize learning curve and migration efforts.
-   **Simplified Configuration**: Offers straightforward initialization and sensible defaults, reducing boilerplate code and letting developers focus on business logic.
-   **Batteries-Included**: Bundles essential features like routing, request handling, and error trapping, eliminating the need to stitch together multiple libraries.
-   **Highly Extensible**: Supports custom middleware and plugins, adapting flexibly to diverse project requirements.
-   **Integrated Caching**: Manages multiple caching strategies (in-memory, Redis, etc.) to boost response times and reduce server load.
-   **Request Validation**: Automatically checks incoming parameters against predefined rules (types, ranges, required fields), minimizing manual validation code.
-   **JWT Authentication**: Implements JSON Web Token authentication with token generation, verification, and role-based access control for secure API endpoints.

## Quick Start

### Installation

Install via npm or yarn:

```bash
npm install @joker.server/core
# or
pnpm add @joker.server/core
```

### Basic Usage

Initialize the server, register routes, and start serving requests in just a few lines of code.

## Relationship with KOA

`@joker.server/core` is built on top of KOA, inheriting its core `app` instance. This means:

-   All native KOA methods (e.g., `use`, `listen`) work out-of-the-box.
-   KOA ecosystem middleware can be directly imported and used, ensuring full compatibility with existing KOA projects.
-   Leverages KOA's `async/await`-based asynchronous flow control for cleaner, more readable code without callback hell.
npm package: @joker.server/redis
Description: Joker 服务端 Redis 缓存方案插件
Author: Zohar
Latest version: 1.0.4

# Joker Server Redis Cache

Joker Server Redis Cache Solution Plugin

## How to Use

```
pnpm add @joker.server/redis
```

Specify the cache strategy during Server initialization

```js
let redisCache = new RedisCache({
    url: "your redis service address"
});

//Wait for the connection to be established
await redisCache.client.connect();

//Configure cache strategy, please refer to the Server help document for initCacheOption
initCacheOption(redisCache);
```
npm package: @jokerc/vue-flow-minimap
Description: This is a minimap component for Vue Flow. It can be used to add a minimap to the canvas, which will show a smaller version of the canvas with your nodes. The minimap can also be used to pan and zoom the main canvas.
Author: Burak Cakmakoglu
Latest version: 1.5.3

# Vue Flow: MiniMap Component

This is a minimap component for Vue Flow.
It can be used to add a minimap to the canvas, which will show a smaller version of the canvas with your nodes.
The minimap can also be used to pan and zoom the main canvas.

## 🛠 Setup

```bash
# install
$ yarn add @vue-flow/minimap

# or
$ npm i --save @vue-flow/minimap
```

## 🎮 Quickstart

```vue
<script setup>
import { VueFlow } from '@vue-flow/core'
import { MiniMap } from '@vue-flow/minimap'

// import default minimap styles
import '@vue-flow/minimap/dist/style.css'

import initialElements from './initial-elements'

// some nodes and edges
const elements = ref(initialElements)
</script>

<template>
  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
    <MiniMap />
  </VueFlow>
</template>
```
npm package: @jokerc/vue-flow-node-toolbar
Description: This is a toolbar component for Vue Flow. It can be used to create a floating Toolbar next to your nodes. You can either display the Toolbar by setting the visibility prop or automatically showing the Toolbar on selected nodes.
Author: Burak Cakmakoglu
Latest version: 1.1.1

# Vue Flow: Toolbar Component

This is a toolbar component for Vue Flow.
It can be used to create a floating Toolbar next to your nodes.
You can either display the Toolbar by setting the visibility prop or automatically showing the Toolbar
on selected nodes.

## 🛠 Setup

```bash
# install
$ yarn add @vue-flow/node-toolbar

# or
$ npm i --save @vue-flow/node-toolbar
```

## 🎮 Quickstart

```vue
<script setup>
import { VueFlow } from '@vue-flow/core'
import initialElements from './initial-elements'

// some nodes and edges
const elements = ref(initialElements)
</script>

<template>
  <VueFlow v-model="elements" fit-view-on-init>
    <template #node-custom="nodeProps">
      <CustomNode :data="nodeProps.data" :label="nodeProps.label" />
    </template>
  </VueFlow>
</template>
```

```vue
<script lang="ts" setup>
import { Handle, Position } from '@vue-flow/core'
import { NodeToolbar } from '@vue-flow/node-toolbar'

interface NodeData {
  toolbarVisible: boolean
  toolbarPosition: Position
}

interface Props {
  data: NodeData
  label: string
}

defineProps<Props>()
</script>

<template>
  <NodeToolbar :is-visible="data.toolbarVisible" :position="data.toolbarPosition">
    <button>delete</button>
    <button>copy</button>
    <button>expand</button>
  </NodeToolbar>

  <div :style="{ padding: '10px 20px' }">
    {{ label }}
  </div>

  <Handle type="target" :position="Position.Left" />
  <Handle type="source" :position="Position.Right" />
</template>
```
npm package: @jokerdpf/jimeng4-mcp
Description: 火山引擎即梦AI图片生成MCP工具 - 专注即梦4.0图片生成
Author: bachstudio
Latest version: 1.0.10

# @jokerdpf/jimeng4-mcp

一个精简版的即梦 MCP 服务，只保留 `jimeng-v40-generate` 这一个能力。

## 当前能力

### `jimeng-v40-generate`

即梦 4.0 图片生成工具，支持：

- 文生图
- 单图编辑
- 多图组合生成
- 4K 超高清输出

主要参数：

- `prompt`: 必填，生成提示词
- `image_urls`: 可选，输入图片 URL 列表，最多 10 张
- `width` / `height`: 可选，需同时传入
- `size`: 可选，生成面积；若传入 `1024` / `2048` / `4096` 这类值，服务端会自动按边长转换为面积
- `scale`: 可选，文本影响强度，范围 `[0,1]`
- `force_single`: 可选，是否强制单图输出
- `seed`: 可选，随机种子
- `min_ratio`: 可选，最小宽高比
- `max_ratio`: 可选，最大宽高比

## 轮询优化

`jimeng-v40-generate` 仍然是同步返回结果，但内部等待逻辑已优化为低占用轮询：

- 提交任务后不会立刻查询，先等待首个冷启动窗口
- 后续查询使用退避策略，逐步拉长间隔
- 相比固定 5 秒轮询，可显著减少空查询请求和服务端压力

## 环境变量

使用前需要配置：

```bash
export JIMENG_ACCESS_KEY=your_access_key
export JIMENG_SECRET_KEY=your_secret_key
```

## MCP 配置示例

```json
{
  "mcpServers": {
    "jimeng": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@jokerdpf/jimeng4-mcp"],
      "env": {
        "JIMENG_ACCESS_KEY": "your_access_key",
        "JIMENG_SECRET_KEY": "your_secret_key"
      }
    }
  }
}
```

## 开发

```bash
npm install
npm run build
npm run dev
```