open-index/open-npm huggingface dataset:
npm package: @joyful-tools/pipe
Description: A JavaScript/TypeScript utility for function composition that allows you to pipe values through a series of functions.
Latest version: 0.0.11

# @joyful/pipe

A JavaScript/TypeScript utility for function composition that allows you to pipe
values through a series of functions.

## Installation

```bash
# npm
npm install @joyful-tools/pipe

# pnpm
pnpm add @joyful-tools/pipe

# bun
bun add @joyful-tools/pipe

# npm (from JSR)
npx jsr add @joyful/pipe

# pnpm 10.9+ (from JSR)
pnpm add jsr:@joyful/pipe

# yarn 4.9+ (from JSR)
yarn add jsr:@joyful/pipe

# deno
deno add jsr:@joyful/pipe
```

> The examples below use `@joyful/pipe` (the JSR name) in imports. If you
> installed from npm, use `@joyful-tools/pipe` instead.

## Usage

The `pipe` function takes a value and a series of functions, applying each
function to the result of the previous one.

```typescript
import { pipe } from "@joyful/pipe";

const double = (x: number) => x * 2;
const square = (x: number) => x * x;
const addFive = (x: number) => x + 5;

// Basic usage
const result = pipe(4, double, square, addFive);
// result = 69
// Explanation: 4 → double(4) = 8 → square(8) = 64 → addFive(64) = 69
```

## API Reference

### `pipe(value, ...functions)`

**Parameters:**

- `value: T` - The initial value to pipe through the functions
- `...functions: ((value: T) => U)[]` - Functions to apply in sequence

**Returns:**

- The final result after applying all functions

## Example

### String Processing

```typescript
const trim = (s: string) => s.trim();
const toUpperCase = (s: string) => s.toUpperCase();
const addExclamation = (s: string) => s + "!";

const result = pipe("  hello world  ", trim, toUpperCase, addExclamation);
// result = "HELLO WORLD!"
```

## Benefits

- **Type Safety**: Full TypeScript support with proper type inference
- **Readability**: Left-to-right function composition is easier to read than
  nested function calls
- **Immutability**: Creates new values without mutating the original
- **Composable**: Easy to create reusable function pipelines

## License

MIT
npm package: @joyfulelement/gatsby-remark-embed-video
Description: Embed Videos (Youtube, Vimeo, VideoPress) in Gatsby via Markdown
Author: Kevin C Chen base off from Neal Bürger
Latest version: 3.1.1

# gatsby-remark-embed-video

Embed a Youtube Video in your Markdown

Inspired by [gatsby-remark-embed-youtube](https://github.com/ntwcklng/gatsby-remark-embed-youtube)



## Install

1.  Install plugin to your site:

```bash
npm i @joyfulelement/gatsby-remark-embed-video

yarn add @joyfulelement/gatsby-remark-embed-video
```

2.  Add following to your `gatsby-config.js`:

```js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-embed-video",
            options: {
              width: 800,
              ratio: 1.77, // Optional: Defaults to 16/9 = 1.77
              height: 400, // Optional: Overrides optional.ratio
              related: false, //Optional: Will remove related videos from the end of an embedded YouTube video.
              noIframeBorder: true, //Optional: Disable insertion of <style> border: 0
              loadingStrategy: 'lazy', //Optional: Enable support for lazy-load offscreen iframes. Default is disabled.
              urlOverrides: [
                {
                  id: "youtube",
                  embedURL: videoId =>
                    `https://www.youtube-nocookie.com/embed/${videoId}`,
                },
              ], //Optional: Override URL of a service provider, e.g to enable youtube-nocookie support
              containerClass: "embedVideo-container", //Optional: Custom CSS class for iframe container, for multiple classes separate them by space
            },
          },
        ],
      },
    },
  ],
};
```

Note: if you also rely on `gatsby-remark-responsive-iframe`, `gatsby-remark-images`, or `gatsby-remark-prismjs`, you have to define the embed-youtube plugin first:

```js
plugins: [
  "gatsby-remark-embed-video",
  "gatsby-remark-responsive-iframe",
  "gatsby-remark-prismjs",
  "gatsby-remark-images"
]
```

Note: you can style the videoIframe using `.embedVideo-container` or by specifying a custom class

1.  Restart gatsby.

## Usage

```markdown
# Look at this Video:

`video: https://www.youtube.com/embed/2Xc9gXyf2G4`
`youtube: https://www.youtube.com/watch?v=2Xc9gXyf2G4`
`youtube: 2Xc9gXyf2G4`

`vimeo: https://vimeo.com/5299404`
`vimeo: 5299404`

`videoPress: https://videopress.com/v/kUJmAcSf`
`videoPress: kUJmAcSf`

`twitch: https://player.twitch.tv/?channel=dakotaz`
`twitch: https://player.twitch.tv/?autoplay=false&video=v273436948`
`twitch: 273436948`
`twitchLive: dakotaz`
```

**Version 3**
Added A11y support

`video: [VideoTitle](https://www.youtube.com/embed/2Xc9gXyf2G4)`
`youtube: [Cool Youtube Video](https://www.youtube.com/watch?v=2Xc9gXyf2G4)`


## License

MIT
npm package: @joyfulljs/draggable
Description: make element draggable
Author: elvin zhu
Latest version: 1.0.6

# make element draggable

# useage

```JS
import Draggable from '@joyfulljs/draggable';

// ...
mount(){
  this.instance = new Draggable(this.refs.el);
},
active(){
  // if need to reset to origin state
  this.instance.reset()
},
unmount(){
  this.instance.destroy()
}
// ...

```

# api

[docs](./index.d.ts)

# tip

You can combine 'maxX/maxY/minX/minY' to achieve some special functionality.  
for example:  
- set `maxX=0` and `minX=0` at the same time to make only draggable at y direction
- set `maxY=0` and `minY=0` at the same time to make only draggable at x direction

Return `false` inside `onMoving` callback to prevent moving the element. 

# LICENSE

MIT
npm package: @joyfulljs/dragsort
Description: drag to sort
Author: elvin zhu
Latest version: 1.0.2

# dragsort
drag to sort. support both pc and mobile

# installation

```
npm install @joyfulljs/dragsort
```

# usage

```js
import DragItem, { DragHandle } from '@joyfulljs/dragsort';
import '@joyfulljs/dragsort/src/index.css';

// ...
handeSortChange = (list) => {
  this.setState({ list });
};
render() {
  const { list } = this.state;
  return (
    <div>
      {list.map((item, index) => {
        return (
          <DragItem key={index} items={list} onChange={this.handeSortChange}>
            {item.label}
            {/* use default drag handle */ }
            <DragHandle />
            {/* customize drag handle
            <DragHandle>Drag Me</DragHandle>
            */}
          </DragItem>
        );
      })}
    </div>
  );
}
// ...
```

# note

- It will use `DragItem` as the drag handle when `DragHandle` is omitted

# licese

MIT@[elvinzhu](https://github.com/elvinzhu)
npm package: @joyfulljs/imagemin
Description: read file & compress image
Author: elvin zhu
Latest version: 1.0.2

# resize/compress image with aspect ratio or not

# API
- **createImage(src: string): Promise\<HTMLImageElement\>**  
  *Create a HTMLImageElement*  
  *@param src image url*  

- **readFile(file: File): Promise\<string\>**  
 *Read base64 content from a File object*  
 *@param file A single file obtained by input[type=file]*  
 
- **compress(img: HTMLImageElement, width: number, height: number, options: IOptions): string**  
 *Compress file to specified width & height*  
 *@param img img element*  
 *@param width width*  
 *@param height height*  
 *@param options options { quality?: number, mineType?: string = 'image/png' }*

- **compressWithRatio(img: HTMLImageElement, settings: ISettings): string**  
 *Compress image file while preserving the aspect ratio.*  
 *@param img img element*  
 *@param settings Settings { maxWidth?: number, maxHeight?: number, quality?: number, mineType?: string = 'image/png' }*

- **dataURLtoFile(dataUrl: string, filename: string): File**  
 *Convert base64 image to File object*  
 *@param dataUrl base64 image*  
 *@param filename file name*

# DEMO

```JS
import { compressWithRatio, readFile, compress, createImage } from '@joyfulljs/imagemin';

// compress from a url
createImage('http://yourhost.com/your/img/path/xx.jpg')
.then(img=>{
  return compress(img, 80, 80)
}).then(dataUrl=>{
  console.log(dataUrl)
});

// compress file from input[type=file]
readFile(fileInput.files[0])
.then(createImage)
.then(img=>{
  return compressWithRatio(img, { maxWidth: 800 })
}).then(dataUrl=>{
  console.log(dataUrl)
});
```

# LICENSE

MIT
npm package: @joyfulljs/jest-utils
Description: some utils for jest test
Latest version: 1.0.1

# jest-utils
some utils for jest test

# install

`npm install @joyfulljs/jest-utils --save-dev`

# usage

```js
const jestUtils = require('@joyfulljs/jest-utils');
```

# api

**.mockEventBinding(): void**  
mock addEventListener/removeEventListener using jQuery so you can use jQuery to trigger event.


# license
MIT
npm package: @joyfulljs/rotate-image
Description: rotate image each time for 90 degree.
Author: elvin zhu
Latest version: 1.0.1

# rotate-image

rotate image each time by 90 degree.

# installation

`npm install @joyfulljs/rotate-image`

# usage

```jsx
import imageRotate from '@joyfulljs/rotate-image';

// { ... omitted .... }

<img ref={imgRef} src="...." />;

var dataUrl = roteteImage(imgRef.current);
imgRef.current.src = dataUrl;
```

# api

`roateImage(img: HTMLImageElement, options: { quality?: number, mineType?: string }): string`

- `options.quality` default to `1`
- `options.mineType` default to `image/jpeg`

most of times you do not need to provide `options`, in case you need to save rotated image back to server;

# license

MIT
npm package: @joyfulljs/scalable
Description: make element scalable by nouse wheel
Author: elvin zhu
Latest version: 1.0.2

# make element scalable by mouse wheel

# useage

```JS
import Scalable from '@joyfulljs/scalable';

// ...
mount(){
  this.instance = new Scalale(this.refs.el, {
    followMouse: true,
    maxScale: 5,
    minScale: 1,
    onScaleChange: ( { scale } )=>{ console.log(scale) }
  });
},
active(){
  // if need to reset to origin state
  this.instance.reset()
},
unmount(){
  this.instance.destroy()
}
// ...

```


# api

[docs](./index.d.ts)

```

# LICENSE

MIT
npm package: @joyfulljs/vendor-property
Description: get browser vendor specific property name
Author: elvin zhu
Latest version: 1.0.1

# vendor-property
get browser vendor specific property name. currently only 'webkit' 'ms' 'moz' 'o' are in the list.

# useage

```js
import { getProperty, getEventProperty } from '@joyfulljs/vendor-property';

// use default property owner: document.body.style.
console.log(getProperty('transform'));
// output in lastest browser: transform
// output in old ie: msTransform

// use `window` as property owner
console.log(getProperty('requestAnimationFrame', window));
// output in lastest browser: requestAnimationFrame
// output in old chrome: webkitRequestAnimationFrame

console.log(getEventProperty('animationend'));
// output in lastest browser: animationend
// output in old chrome: webkitanimationend
```

# note

1. `getEventProperty` return event name that without `on` prefix, can be used directly in `addEventListener`.  
2. It will return what passed in when the property is not in the owner.

# license

MIT
npm package: @joyfulljs/vue-video-control-bar
Description: a simple vide control bar
Author: elvin zhu
Latest version: 1.0.1

# vue-video-control-bar
a simple vide control bar for vue

# appearance

<img src="./demo/assets/simple.png" alt="drawing" width="300"/>

# warn
The exported code stays a single file component, make sure to include this in your build process.
npm package: @joyfulljs/xtouch
Description: bind touch or mouse event cross env
Author: elvin zhu
Latest version: 1.0.5

# xtouch

With `XTouch`, you only need to handle `touch` event only, it will just works fine on both touch device and mouse device or device that support both.

# useage

```JS
import XTouch from "@joyfulljs/xtouch";

function onStart(e){};
function onMove(e){};
function onEnd(e){};

const capture = false; // { passive: false }
const unbind = XTouch(div, { onStart, onMove, onEnd, capture });

// unbind();
```

# api

[docs](./index.d.ts)

# license

MIT@[elvinzhu](https://github.com/elvinzhu)
npm package: @joyid/ckb
Description: See [JoyID Docs](https://docs.joyid.dev/apis) for more information.
Latest version: 1.1.4

# @joyid/ckb

See [JoyID Docs](https://docs.joyid.dev/apis) for more information.

## JoyID Contract Deployment

- Mainnet: https://explorer.nervos.org/scripts#JoyID
- Testnet: https://pudge.explorer.nervos.org/scripts#JoyID
npm package: @joyingsoft/ng-timeago
Description: Angular Date, DateTime, and timeago
Author: JoyingSoft
Latest version: 0.0.101

# NgTimeago

Angular 9 Date, DateTime, and timeago

Currently only support Chinese language.

## Usage

### [demo](https://joyingsoft.github.io/ng-timeago/)

### Install

`npm i @joyingsoft/ng-timeago`

### Import

```angular
import { NgTimeagoModule } from 'ng-timeago';
@NgModule({
      imports: [..., NgTimeagoModule]
      ...})
```

### use

```angular
      .color-b {color:green;}
      ...
      <ng-timeago [date]="dt"
                  [styles]="'color-b'"></ng-timeago>
      <ng-timeago [date]="dt"
                  [show]="'date'"></ng-timeago>
      <ng-timeago [date]="dt"
                  [show]="'dateTime'"></ng-timeago>
      <ng-timeago [date]="dt"
                  [show]="'timeago'"></ng-timeago>
```

This library was generated with [Angular CLI](https://github.com/angular/angular-cli)
npm package: @joyned/html-fairy
Description: A simple, tiny, and XSS-protected tool for creating HTML structures from strings and arguments.
Author: EladHeller
Latest version: 0.1.16

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/gamitee-dev/html-fairy/blob/develop/LICENSE) [![npm version](https://img.shields.io/npm/v/@joyned/html-fairy.svg?style=flat)](https://www.npmjs.com/package/@joyned/html-fairy) [![packge size](https://img.shields.io/bundlephobia/minzip/@joyned/html-fairy.svg)](https://bundlephobia.com/package/@joyned/html-fairy)

[![CI](https://github.com/gamitee-dev/html-fairy/actions/workflows/linter.yml/badge.svg)](https://github.com/gamitee-dev/html-fairy/actions/workflows/linter.yml) [![CD](https://github.com/gamitee-dev/html-fairy/actions/workflows/deploy.yml/badge.svg)](https://github.com/gamitee-dev/html-fairy/actions/workflows/deploy.yml)

# html-fairy
A simple, tiny, and XSS-protected tool for creating HTML structures from strings and arguments.

## Installation
``` js
npm install @joyned/html-fairy
```

## Usage
``` js
import htmlFairy from "@joyned/html-fairy";

const element = htmlFairy`<div data-attribute="value">Content</div>`;
```

Any argument that is an HTML element will be included in the resulting structure in the same position as the corresponding placeholder in the template string. Non-element arguments will be converted to HTML-escaped strings and included in the resulting structure.

``` js
import htmlFairy from "@joyned/html-fairy";

const value = 'foo';
const element = htmlFairy`<div data-attribute="${value}">Content</div>`;
```
Arrays of elements can also be passed as arguments, and the resulting structure will include all the elements from the array in the correct nested position.

``` js
import htmlFairy from "@joyned/html-fairy";

const list = ['a', 'b', 'c'].map((x) => htmlFairy`<li>${x}</li>`);
const element = htmlFairy`<ul>${list}</ul>`;
```
It's prevent XSS by default.

``` js
import htmlFairy from "@joyned/html-fairy";

const evilUserInput = '<script>alert("XSS")</script>';
const someElement = htmlFairy`<div>no xss</div>`;
const element = htmlFairy`<div>${someElement}${evilUserInput}</div>`;
```
<img src="./resources/print-screen-no-xss.jpeg" alt="no-xss" width="150"/>


## License
html-fairy is released under the MIT License. See the [LICENSE](./LICENSE) file for details.
npm package: @joyo-angular/data-service
Description: Joyo For Ionic apps
Author: JoyoDuan
Latest version: 3.1.0

<a style="float:right;font-size:12px;" href="http://github.com/ionic-team/ionic-native/edit/master/src/@ionic-native/plugins/data-service/index.ts#L8">
  Improve this doc
</a>

# DataService