open-index/open-npm huggingface dataset:
npm package: @ikasoba000/okome.js
Description: minimum frontend framework.
Author: github.com/ikasoba
Latest version: 0.1.1

# Okome.js

Okome.js is a minimal, modern frontend framework.
Performance is currently not good.

# Usage

```tsx
import { Signal } from "@ikasoba000/okome.js/signal";
import { useEffect } from "@ikasoba000/okome.js/hooks/useEffect";
import { toDOMNode } from "@ikasoba000/okome.js";

function App() {
  const count = new Signal<number>(0);

  useEffect(() => {
    console.log("count:", count.value);
  }, [count]);

  return (
    <>
      <button on:click={() => count.value++}>count: {count}</button>
    </>
  );
}

document.body.append(toDOMNode(<App />));
```
npm package: @ikasoba000/parsing
Description: Parsing is a small parser combinator.
Author: github.com/ikasoba
Latest version: 2.4.2

# parsing
Parsing is a small parser combinator.

## example
```ts
import {ignore, every, token, regex} from "@ikasoba000/parsing"
const whitespace = ignore(regex(/\s+/))
const helloWorld = every(token("Hello,"), whitespace, token("world!"))

console.log(helloWorld("Hello, world!", 0)?.[0], helloWorld("hello, world!", 0)?.[0]) // [ 'hello,', 'world' ] undefined
```

# usage

```ts
type Parser<T = string, E = never> = (src: string, index: number) => ParsingError | null | ParserResult<T, E>
```

## token(pattern: string | RegExp): Parser
Generate a parser that matches a string or regexp.

## regex(pattern: RegExp): Parser
Generate a parser that matches the regular expression.

## option(parser: Parser): Parser
Generates an optional parser.

## ignore(parser: Parser): IgnoreParser
If parsing succeeds, only the next index is returned.

## some(...parsers: Parser[]): Parser
Generate a parser that matches any one of the parsers.

## every(...parsers: Parser[]): Parser
Combine multiple parsers to produce a single parser.
Even when nested, the array depth remains 1.
```ts
every(token("1"), token("2"), token("3"))("123", 0)        // [["1", "2", "3"], 3]
every(every(token("1"), token("2")), token("3"))("123", 0) // [["1", "2", "3"], 3]
// Both the top and bottom parsers have the same function.
```

## map&lt;T>(parser: Parser, converter: x => T): Parser&lt;T>
it is useful for generating values from strings that can be parsed.
```ts
map(token(/[0-9]+/), x => parseInt(x))("123", 0) // {type: "normal", res: 123, index: 0, length: 3 }
```
npm package: @ikasoba000/pigmo
Description: Compact document-based Database for prototyping.
Author: https://github.com/ikasoba
Latest version: 0.1.3

<h1 align="center">
Pigmo
</h1>
<p align="center">
Compact document-based database for prototyping.
</p>

# Installation

```sh
# npm
npm i @ikasoba000/pigmo

# pnpm
pnpm i @ikasoba000/pigmo
```
npm package: @ikasoba000/result-ts
Description: <p align="center"> result-ts provides a class that is useful when dealing with exceptions in TypeScript. </p>
Latest version: 1.0.1

<p align="center">
result-ts provides a class that is useful when dealing with exceptions in TypeScript.
</p>

[![npm](https://img.shields.io/npm/v/@ikasoba000/result-ts?style=flat-square)](https://www.npmjs.com/package/@ikasoba000/result-ts)
![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/ikasoba/result-ts/test.yaml?label=test&style=flat-square)

```ts
import { Result } from "@ikasoba000/result-ts";

async function fetchUser(): Promise<Result<User, number>> {
  const response = await fetch( ... );
  if (!response.ok) return Result.err(response.status);
  return Result.ok(await response.json());
}

const result = await fetchUser()

if (result.isError()){
  console.error(
      "Failed to fetch user."
    + `Status code: ${result.value}`
  );
  process.exit(1);
}

console.log(`hello, ${result.value.name}!`)
```

# Result.ok&lt;T>(value: T): Result&lt;T, never>

Returns a `successful` Result.

# Result.err&lt;E>(value: E): Result&lt;never, E>

Returns a `Result` containing an exception.

# Result.toCurrentResult&lt;T, E>(result: ResultLike&lt;T, E>): Result&lt;T, E>

Generates a `Result` from a `ResultLike`.

This is useful when converting Results between different versions.

# Result#isOk(): boolean

Check to see if the Result was successful.

# Result#isError(): boolean

Check to see if the Result failed.
npm package: @ikasoba000/tokoroten
Description: tokoroten is a utility for matching JSON-like input to a schema.
Author: https://github.com/ikasoba
Latest version: 0.1.2

# tokoroten

tokoroten is a utility for matching JSON-like input to a schema.

```ts
import * as t from "@ikasoba000/tokoroten"

const Note = t.object({
  type: t.const("Note"),
  content: t.string,
  mediaType: t.opt(t.string),
  published: t.map(t.string, x => new Date(x))
})

const note = Note({
  type: "Note",
  content: "hogehoge",
  mediaType: 1234,
  published: "2024-02-14T04:48:47.155Z"
})

console.log(note)
// {
//   value: {
//     type: "Note",
//     content: "hoogehoge",
//     published: 2024-02-14T04:48:47.155Z
//   }
// }
```
npm package: @ikasoba000/vite-cdn
Description: cdn plugin for vite
Author: https://github.com/ikasoba
Latest version: 0.2.3
Deprecated: This package does not conform to the vite plugin naming conventions and has been moved to @ikasoba000/vite-plugin-cdn

<h1>
<p align="center">vite-plugin-cdn📦</p>
</h1>

<p align="center">Plugin to use javascript package cdn in vite.</p>

```ts
import { defineConfig } from "vite";
import cdn from "@ikasoba000/vite-plugin-cdn";

export default defineConfig({
  plugins: [
    cdn()
  ],
});
```

# about

vite-cdn refers to esm.sh by default, but it can also refer to cdn such as skypack.

```ts
export default defineConfig({
  plugins: [
    cdn({
      // :name, :version, and :path are specifiers for substitution.
      pattern: "https://cdn.skypack.dev/:name@:version/:path"
    })
  ],
});
```

A function can also be specified for a pattern.

```ts
export default defineConfig({
  plugins: [
    cdn({
      pattern(name: string, version: string, path?: string) {
        return name == "react"
          ? `https://esm.sh/preact@${version}/${path ?? ""}`
          : `https://cdn.skypack.dev/${name}@${version}/${path ?? ""}`;
      }
    })
  ],
});
```

You can explicitly select or exclude packages to be loaded from cdn.

```ts
export default defineConfig({
  plugins: [
    cdn({
      // By default, all packages are loaded from cdn.
      packages: [ <package-name>, ... ]
    })
  ],
});

// or

export default defineConfig({
  plugins: [
    cdn({
      // Packages specified here are not loaded from cdn,
      // but are bundled by vite in many cases.
      excludes: [ <package-name>, ... ]
    })
  ],
});
```
npm package: @ikasoba000/vite-plugin-cdn
Description: cdn plugin for vite
Author: https://github.com/ikasoba
Latest version: 0.2.3

<h1>
<p align="center">vite-plugin-cdn📦</p>
</h1>

<p align="center">Plugin to use javascript package cdn in vite.</p>

```ts
import { defineConfig } from "vite";
import cdn from "@ikasoba000/vite-plugin-cdn";

export default defineConfig({
  plugins: [
    cdn()
  ],
});
```

# about

vite-plugin-cdn refers to esm.sh by default, but it can also refer to cdn such as skypack.

```ts
export default defineConfig({
  plugins: [
    cdn({
      // :name, :version, and :path are variable items.
      format: "https://cdn.skypack.dev/:name@:version/:path"
    })
  ],
});
```

The pattern can also specify a function.

```ts
export default defineConfig({
  plugins: [
    cdn({
      format(name: string, version: string, path?: string) {
        return name == "react"
          ? `https://esm.sh/preact@${version}/${path ?? ""}`
          : `https://cdn.skypack.dev/${name}@${version}/${path ?? ""}`;
      }
    })
  ],
});
```

You can explicitly select or exclude packages to be loaded from cdn.

```ts
export default defineConfig({
  plugins: [
    cdn({
      // By default, all packages are loaded from cdn.
      includes: [ <package-name>, ... ]
    })
  ],
});

// or

export default defineConfig({
  plugins: [
    cdn({
      // Packages specified here are not loaded from cdn,
      // but are bundled by vite in many cases.
      excludes: [ <package-name>, ... ]
    })
  ],
});
```
npm package: @ikaxio/i18nt
Description: i18next封装包,配合i18nt-scaner使用
Author: kaxio
Latest version: 0.0.7

# i18nt
i18next封装包,配合i18nt-scaner使用

### 搭建
```shell
yarn
node ./demo/index.js
```
输出 "中文" 成功

### 作用
为要翻译的字符自动生成文件的key

**以前：**
zh.json
```json
{
    "key": "值"
}
```
en.json
```json
{
    "key": "value"
}
```
i18next.t("key")
中文环境得到：值
英文环境得到：value

**现在:**
zh.json
```json
{
    "(key自动生)": "值"
}
```
en.json
```json
{
    "(key自动生)": "value"
}
```
i18next.t("值");
中文环境得到：值
英文环境得到：value

不再需要自己写json文件了，配合(i18nt-scaner)[https://github.com/ikaxio/i18nt-scaner]使用。
npm package: @ikaxio/i18nt-scaner
Description: npm i @ikaxio/i18nt-scaner
Author: kaxio
Latest version: 1.0.12

# i18nt-scaner

npm i @ikaxio/i18nt-scaner

i18nt 
或
i18nt -t src

在业务代码中使用[i18nt](https://github.com/ikaxio/i18nt/blob/master/README.md)

- todo 启动服务将json上传到服务器，创建一个站点专门管理翻译
npm package: @ikbenbas/editorjs-button
Description: Button tool for Editor.js
Author: Bas van Wouwen
Latest version: 1.0.0

# Button

Button for the [Editor.js](https://codex.so/editor).

## Features

Allows to add a button link to a given url.

## Installation

### Install via NPM

Get the package

```shell
npm i @ikbenbas/editorjs-button
```

Include module at your application

```javascript
const Button = require('@ikbenbas/editorjs-button');
```

### Download to your project's source dir

1. Download folder `dist` from repository
2. Add `dist/bundle.js` file to your page.

## Usage

Add the Button to the `tools` property of the Editor.js initial config.

This Button can have to following configuration:

| Field          | Type      | Description                     |
| -------------- | --------- | ------------------------------- |
| label          | `string`  | Default text label                |
| target         | `string`  | Default target: One of the following options: _self, _blank, _parent or _top |
| classes        | `array`   | Extra classes added to the button in the editor for a better wysiwyg result        |


```javascript
var editor = EditorJS({
  ...

  tools: {
    ...
    button: {
      class: Button,
      config: {
        label: "Click",
        target: "_blank",
        classes: ["button", "is-primary"]
      }
    }
  }
  ...
});
```
## Output data

This Tool returns `data` with following format:

| Field          | Type      | Description                     |
| -------------- | --------- | ------------------------------- |
| url            | `string`  | Link url                        |
| label          | `string`  | Text label on the button        |
| target         | `string`  | One of the following options: _self, _blank, _parent or _top |
| centered       | `boolean` | true or false; Button aligned centered or not  |
| stretched      | `boolean` | true or false; Button full width or not        |
| large          | `boolean` | true or false; Button size large or not        |

```json
{
    "type": "button",
    "data": {
        "url": "http://www.example.com",
        "label": "Click me!",
        "target": "_self",
        "centered": true,
        "stretched": false,
        "large": true
    }
}
```

> **Side note:** I created this plugin as a small project while learning TypeScript. I'm still working on it, and still learning. So don't judge me too harshly ;)
npm package: @ikbendaan/react-video-recorder
Description: ## Installation
Author: Daan Smit
Latest version: 0.0.6-development

# react-video-recorder

## Installation

```
yarn add react-video-recorder
```

## Usage

Basic usage [(edit in stakblitz)](https://stackblitz.com/edit/react-video-recorder-demo):

```js
import React from 'react'
import { render } from 'react-dom'
import VideoRecorder from 'react-video-recorder'

const App = () => <VideoRecorder />

render(<App />, document.getElementById('root'))
```

Also check the [Storybook](https://react-video-recorder.surge.sh/) for more demos and usage examples.

**Note:** if you click the **"Show info"** button in the top-right corner, you should be able to see a table with the supported prop-types.

### Modifying the UI

All the UI can be customized by passing the following props:

#### `renderDisconnectedView`

View that's rendered before the user enables the camera access.

**Default value:** `() => <DisconnectedView />`

[See `<DisconnectedView />` source here.](src/defaults/disconnected-view.js)

#### `renderLoadingView`

View that's rendered while the camera is initializing.

`() => <LoadingView />`

[See `<LoadingView />` source here.](src/defaults/loading-view.js)

#### `renderVideoInputView`

View that's rendered when the browser does not support inline recording but allows opening the native camera (mainly iOS).

**Default value:** `({ videoInput }) => <Fragment>{videoInput}</Fragment/>`

#### `renderUnsupportedView`

View that's rendered when the browser does not support recording video.

**Default value:** `() => <UnsupportedView />`

[See `<UnsupportedView />` source here.](src/defaults/unsupported-view.js)

#### `renderErrorView`

View that's rendered an unexpected error occurs.

**Default value:** `() => <ErrorView />`

[See `<ErrorView />` source here.](src/defaults/error-view.js)

#### `renderActions`

Overlay that's rendered on top of the views and that contains the elements like the buttons, the timer or the countdown.

[See the default implementation here.](src/defaults/render-actions.js)

## Development

Requirements

`node version ">=8.3"`

Install packages

```sh
yarn install
```

Run the storybook demo

```sh
yarn start
```
npm package: @ike_doliv/react-native-picker-horizontal
Description: React native value picker with horizontal scroll
Author: Ike DOliv
Latest version: 0.1.1

# react-native-picker-horizontal
![Node.js CI](https://github.com/andrey-sh/react-native-picker-horizontal/actions/workflows/nodejs.yml/badge.svg)

A picker component for React Native. Allows to select the item from horizontal scrolling container with custom animations.

![Picker example](https://github.com/andrey-sh/react-native-picker-horizontal/blob/master/screen1.gif)
![Picker example](https://github.com/andrey-sh/react-native-picker-horizontal/blob/master/screen2.gif)

## Getting Started

### Installing

```
npm install react-native-picker-horizontal
```

### Basic Usage

```js
import Picker from 'react-native-picker-horizontal';

const Items = Array.from(Array(30).keys());
const itemWidth = 50;

export const Picker = () => (
  <Picker
    data={Items}
    renderItem={rednerItem}
    itemWidth={itemWidth}
    initialIndex={selected}
    onChange={newValue => {}}
  />
);

const rednerItem = (item, index) => (
  <Text style={{ width: itemWidth }}>
    { item }
  </Text>
);
```

### Props

| Name                  | Type                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Details                  |
| ----------------------|------------------------ | -------------------------------------------------------------------------------------------------------- | ------------------------ |
| `data`                | any[]                   | Array of scrolling items  | **Required**
| `renderItem`          | (item: any, index: number) => ReactNode | Function generates `ReactNode` scrolling items  | **Required**
| `itemWidth`           | number                  | Should be same as width of `renderItem` result  | **Required**
| `initialIndex`        | number                  | Index of initial selected element
| `onChange`            | (position: number) => void | Callback which returns new `position`
| `mark`                | ReactNode               | Create your own mark for selected element
| `interpolateScale`    | (index: number, itemWidth: number) => Animated.InterpolationConfigType | Set custom animation effect for items scale
| `interpolateOpacity`  | (index: number, itemWidth: number) => Animated.InterpolationConfigType | Set custom animation effect for items opacity