open-index/open-npm huggingface dataset:
npm package: @krofdrakula/prop-docs-preact
Description: A tool to extract prop types from Preact components
Author: Klemen Slavič
Latest version: 0.0.9

This package is part of the `@krofdrakula/prop-docs-*` ecosystem. Please visit
the monorepository for a complete walkthrough:

https://github.com/krofdrakula/prop-docs

<!--#content-->

## Preact

Install the `preact` package:

```
yarn add @krofdrakula/prop-docs-preact
```

Here's an example component file (`components.tsx`):

```ts
interface BadgeProps {
  /** Name of person */
  name: string;
  /** Notification count */
  count: number;
}

export const Badge: FunctionalComponent<BadgeProps> = ({ name, count }) => {
  return (
    <div>
      {name} ({count})
    </div>
  );
};

interface ProfileProps {
  /** Person's image URL */
  image: string;
  /** Person's name */
  name: string;
}

export class Profile extends Component<ProfileProps> {
  render() {
    const { image, name } = this.props;
    return <img src={image} title={name} />;
  }
}
```

To use the package, you'll need to instantiate the `Project` class and configure
it for your code base:

```ts
import { Project } from "ts-morph";
import { extractComponents } from "@krofdrakula/prop-docs-preact";

const project = new Project({
  // Configure your tsconfig.json path and other options.
  // You can opt to explicitly add your own source files instead and configure
  // `compilerOptions` here if needed.
});

const { Badge, Profile } = extractComponents(project, "components.tsx");
//             ^? { image: string; name: string; }
//      ^? { name: string; count: number; }
```

The return types are instances of [`Type`](https://ts-morph.com/details/types)
which provides the description of the props object.

<!--#/content-->
npm package: @krofdrakula/prop-docs-storybook
Description: A tool to translate TS types to Storybook ArgTypes
Author: Klemen Slavič
Latest version: 0.0.9

This package is part of the `@krofdrakula/prop-docs-*` ecosystem. Please visit
the monorepository for a complete guide:

https://github.com/krofdrakula/prop-docs

<!--#content-->

## Storybook

```
yarn add @krofdrakula/prop-docs-storybook
```

When provided with an extracted [`Type`](https://ts-morph.com/details/types)
this package will enable you to create an `ArgTypes` description for a specific
component.

For example, extracting a Preact component requires parsing the components using
`@krofdrakula/prop-docs-preact` and then using `convertType` to return the
correct description:

```ts
import { Project } from "ts-morph";
import { getPropsType } from "@krofdrakula/prop-docs-preact";
import { extractCSF, convertType } from "@krofdrakula/prop-docs-storybook";

const project = new Project();
// this project assumes that `components.tsx` exists as in the Preact example
const { Profile } = extractCSF(project, "components.tsx", getPropsType);
const profileArgTypes = convertType(Profile);
//    ^? {
//         name: {
//           type: { name: "string", required: true },
//           description: "Person's name"
//         },
//         image: {
//           type: { name: "string", required: true },
//           description: "Person's image URL"
//         }
//       }
```

<!--#/content-->
npm package: @krokky/react-hls-player
Description: A simple HTTP Live Streaming player
Author: krokky
Latest version: 0.1.1

# react-hls-player
A simple React HTTP Live Streaming player. It uses [hls.js](https://github.com/video-dev/hls.js) to play your hls live stream if your browser supports `html 5 video` and `MediaSource Extension`.

## Examples

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import ReactHlsPlayer from 'react-hls-player';

ReactDOM.render(
  <ReactHlsPlayer
    controls
    src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
  />,
  document.getElementById('app')
);
```

## Props

All [video properties](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) are supported and pass to the video element.

| Prop                 | Type                 | Description                                                  |
| -------------------- | -------------------- | ------------------------------------------------------------ |
| src                  | `String`, `required` | The hls url that you want to play                            |
| hlsConfig `Object`   | `Object`             | `hls.js` config, you can see all config [here](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning) |
| autoPlay             | `Boolean`            | Autoplay when component is ready. Defaults to `false` (Sometimes it may not work. You need to check this) |
| ...other video props |                      | All video properties are supported.                          |

## Ref
You can access video element,  hls instances and initPlayer function through ref.

```javascript
import React, {useEffect} from 'react';
import ReactDOM from 'react-dom';
import ReactHlsPlayer from 'react-hls-player';

const App = () => {
  const hlsRef = useRef(null);

  useEffect(() => {
    console.log(hlsRef.current); // {getHlsInstance: ƒ (), initPlayer: ƒ (), video: video}
  }, []);

  return (
    <ReactHlsPlayer
      ref={hlsRef}
      controls
      src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
    />
  );
};
```
npm package: @krol44/nuxt-smart-cache
Description: Cache pages on ssr, anti-ddos
Author: krol44
Latest version: 1.0.5

# nuxt-smart-cache

[![NPM version](https://img.shields.io/npm/v/@krol44/nuxt-smart-cache)](https://www.npmjs.com/package/@krol44/nuxt-smart-cache)

## About

Nuxtjs 2 module - cache pages on ssr to the disk, anti-ddos

## Demo

https://langlija.com - if you press f5 many times, spa mode will be activated

## Setup

1. `npm i --save @krol44/nuxt-smart-cache`
2. `add to nuxt.config.js`


```javascript
modules: [
  ['@krol44/nuxt-smart-cache', {
    antiDdos: {
      // default true
      enable: true,
      // default - 20 request for 5 seconds and will be locked
      maxRequestsForTime: [20, 5],
      // default 600 seconds
      timeToLockingSsr: 600
    },
    cache: {
      // default true
      enable: true,
      // default - /tmp/nuxt_cache_pages
      pathTempFiles: '/tmp/langlija_cache_pages',
      // default - token
      nameCookieForDisable: 'token',
      // default - true
      rmAllAfterStart: false,
      // default - 3600 seconds
      ttlFile: 3600 * 24 * 10,
      // default - []
      ignorePages: [
        '/',
        /\/dictionary.*/
      ]
    }
  }]
]
```

## License

MIT
npm package: @krolis/opentype
Description: A high-performance, ultra-lightweight OpenType metadata parser focusing on font metrics.
Author: army8735
Latest version: 0.1.0

# @krolis/opentype

A high-performance, ultra-lightweight OpenType metadata parser focusing on font metrics.

高性能、轻量级的OpenType字体元数据解析其器，专注提取字体度量信息。

[![NPM version](https://img.shields.io/npm/v/@krolis/opentype.svg)](https://npmjs.org/package/@krolis/opentype)

## Install

```shell
npm i @krolis/opentype
```

## Usage

```ts
import { parse } from '@krolis/opentype';

const fm = parse(buffer);
console.log(fm); // { name: 'fontFamily', emSquare: 1000, ascent: 600, descent: 400, lineGap: 20 }
```

## Intro

这是一个从 opentype.js 深度精简而来的高性能解析工具。它剥离了复杂的字形（Glyph）渲染和路径解析逻辑，仅保留字体元数据的读取核心。

This is a high-performance font parser derived from opentype.js. By stripping away complex glyph rendering and path parsing, it focuses solely on extracting essential font metadata with minimal overhead.

本库专门提取以下关键字段：

This library specifically extracts the following key metrics:

```ts
type FontMetrics = {
  name: string,
  emSquare: number,
  ascent: number,
  descent: number,
  lineGap: number,
}
```

# License

[MIT License]
npm package: @kroma/core-utils
Description: [Kroma] Core typescript utilities
Author: Lightscale Inc.
Latest version: 1.0.0

# @kroma-network/core-utils

## What is this?

`@kroma-network/core-utils` contains the Kroma core utilities.

## Getting started

### Building and usage

After cloning and switching to the repository, install dependencies:

```shell
> yarn
```

Use the following commands to build, use, test, and lint:

```shell
> yarn build
> yarn start
> yarn test
> yarn lint
```

### L2 Fees

`TxGasLimit` can be used to `encode` and `decode` the L2 Gas Limit
locally.

```typescript
import { TxGasLimit } from '@kroma-network/core-utils'
import { JsonRpcProvider } from 'ethers'

const L2Provider = new JsonRpcProvider(L2_JSON_RPC_URL)
const L1Provider = new JsonRpcProvider(L1_JSON_RPC_URL)

const l2GasLimit = await L2Provider.send('eth_estimateExecutionGas', [tx])
const l1GasPrice = await L1Provider.getGasPrice()

const encoded = TxGasLimit.encode({
  data: '0x',
  l1GasPrice,
  l2GasLimit,
  l2GasPrice: 10000000,
})

const decoded = TxGasLimit.decode(encoded)
assert(decoded.eq(gasLimit))

const estimate = await L2Provider.estimateGas()
assert(estimate.eq(encoded))
```
npm package: @kroma/hardhat-deploy-config
Description: [Kroma] Hardhat deploy configuration plugin
Author: Lightscale Inc.
Latest version: 1.0.0

# @kroma-network/hardhat-deploy-config

`hardhat-deploy-config` is a simple plugin that adds support for global deploy configuration values.

## Installation

```shell
> yarn add @kroma-network/hardhat-deploy-config
```
npm package: @kroma/sdk
Description: [Kroma] Tools for working with Kroma
Author: Lightscale Inc.
Latest version: 1.0.0

# @kroma/sdk

The `@kroma/sdk` package provides a set of tools for interacting with Kroma.

## Installation

```shell
> npm install @kroma/sdk
```

## Using the SDK

### CrossChainMessenger

The [`CrossChainMessenger`] class simplifies the process of moving assets and data between Ethereum and Kroma.
You can use this class to, for example, initiate a withdrawal of ERC20 tokens from Kroma back to Ethereum, accurately
track when the withdrawal is ready to be finalized on Ethereum, and execute the finalization transaction after
the challenge period has elapsed.
The `CrossChainMessenger` can handle deposits and withdrawals of ETH and any ERC20-compatible token.
Detailed API descriptions can be found at [sdk.optimism.io](https://sdk.optimism.io/classes/crosschainmessenger).
The `CrossChainMessenger` automatically connects to all relevant contracts so complex configuration is not necessary.

[`CrossChainMessenger`]: ./src/cross-chain-messenger.ts

### L2Provider and related utilities

The Kroma SDK includes [various utilities] for handling Kroma's [transaction fee model].
For instance, [`estimateTotalGasCost`] will estimate the total cost (in wei) to send at transaction on Kroma including
both the L2 execution cost and the L1 data cost. You can also use the [`asL2Provider`] function to wrap an ethers
Provider object into an `L2Provider` which will have all of these helper functions attached.

[various utilities]: ./src/l2-provider.ts
[transaction fee model]: https://community.optimism.io/docs/developers/build/transaction-fees/
[`estimateTotalGasCost`]: https://sdk.optimism.io/modules.html#estimateTotalGasCost
[`asL2Provider`]: https://sdk.optimism.io/modules.html#asL2Provider

### Other utilities

The SDK contains other useful helper functions and constants.
For a complete list, refer to the auto-generated [SDK documentation](https://sdk.optimism.io/)
npm package: @kroma2/core-utils
Description: [Kroma] Core typescript utilities
Author: Lightscale Inc.
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @kroma2/core-utils

## What is this?

`@kroma2/core-utils` contains the Kroma core utilities.

## Getting started

### Building and usage

After cloning and switching to the repository, install dependencies:

```shell
> yarn
```

Use the following commands to build, use, test, and lint:

```shell
> yarn build
> yarn start
> yarn test
> yarn lint
```

### L2 Fees

`TxGasLimit` can be used to `encode` and `decode` the L2 Gas Limit
locally.

```typescript
import { TxGasLimit } from '@kroma2/core-utils'
import { JsonRpcProvider } from 'ethers'

const L2Provider = new JsonRpcProvider(L2_JSON_RPC_URL)
const L1Provider = new JsonRpcProvider(L1_JSON_RPC_URL)

const l2GasLimit = await L2Provider.send('eth_estimateExecutionGas', [tx])
const l1GasPrice = await L1Provider.getGasPrice()

const encoded = TxGasLimit.encode({
  data: '0x',
  l1GasPrice,
  l2GasLimit,
  l2GasPrice: 10000000,
})

const decoded = TxGasLimit.decode(encoded)
assert(decoded.eq(gasLimit))

const estimate = await L2Provider.estimateGas()
assert(estimate.eq(encoded))
```
npm package: @kromiii/notion-to-slides
Description: Convert notion page to pdf slides
Author: Hiroyuki Kuromiya
Latest version: 0.1.15

# notion-to-slides

A simple npm package to convert a Notion page to a Marp Slides presentation.

H1 and H2 Heading in the notion page will be used as the slide title, and the rest of the content will be used as the slide body.

You can see the usage from [getting started slides](https://speakerdeck.com/khiroyuki1993/notion-to-slides-convert-notion-page-to-presentation-slides), which is also created by this package. The original notion page is [here](https://khiroyuki1993.notion.site/notion-to-slides-451e4062f4644dbab60f4848cb35cb87).

## Demo Movie

https://github.com/user-attachments/assets/064ef684-e19f-4eae-95bf-e921f82015f5


## Usage

### 1. Prepare the notion token

1. Create an [integration token](https://www.notion.so/my-integrations) in Notion
1. Open the Notion page you want to convert
1. Add your integration to the page

### 2. Set the notion token to the environment variable

```bash
$ export NOTION_TOKEN=[your notion token]
```

### 3. Install and run the script

```bash
$ npx kromiii/notion-to-slides --url [your notion page url] --theme [marp theme] --port [port number]
```

You can change the theme by setting the `--theme` option. The default theme is `default`.

Available themes are: default, uncover, and gaia. See [Marp Core Themes](https://github.com/marp-team/marp-core/tree/main/themes) for more details.

### 4. Check and export the slides as pdf

Once the script is finished, it will open the browser with the slides. You can check the slides by clicking the "Print" button (cmd + P on Mac). Then you can export the slides as pdf.

## Example

```bash
$ npx kromiii/notion-to-slides --url https://www.notion.so/khiroyuki1993/CTOA-LT-4-c2769d7bc90a4f428adae7a2192d258a --theme uncover --port 8080
```

## Options

| Option | Description | Default | Required |
| --- | --- | --- | --- |
| `--url` | The Notion page URL to convert | | `required` |
| `--theme` | The Marp theme to use | `default` | `optional` |
 | `--port` | The port number to use | `8080` | `optional` | 

## Development

```bash
$ git clone git@github.com:kromiii/notion-to-slides.git
$ npm i
$ npm run start [your notion page url] -- --port [port number] -- --theme [marp theme]
```

## License

MIT
npm package: @kromtech/react-expression
Description: Flexible UI expression builder for React.
Author: lempiy
Latest version: 1.3.7

# react-expression

[![NPM](https://img.shields.io/npm/v/@kromtech/react-expression.svg)](https://www.npmjs.com/package/@kromtech/react-expression) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

> Flexibile UI expression builder for React.

## Install

```bash
npm install --save react-expression
```

## Usage

```js
import React, { useState } from 'react';
import Expression from 'react-expression';

const presets = {
  functions: {/* functions presets */},
  datatypes: {/* datatypes presets */},
  references: [/* references presets */],
  operators: {/* operators presets */},
  suggestions: {/* suggestions presets */},
};

function Example() {
  const [operation, setOperation] = useState({
    uuid: '',
    args: [],
  });
  const [errors, setErrors] = useState([]);

  const props = {
    ...presets,
    operation
  };
  const onChange = (operation, errors) => {
    setOperation(operation);
    setErrors(errors);
  }

  return (
    <>
      <Expression {...props} isEditable onChange={onChange} />
      Errors: {errors.join('; ')}
    </>
  );
};
```


## Available Scripts

In the project directory, you can run:

```bash
npm run start
```

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br>
You will also see any lint errors in the console.

```bash
cd example && npm run start
```

Runs the example app in the development mode.<br>
By default open [http://localhost:3000](http://localhost:3000) to view it in the browser.

```bash
npm run build
```

Builds the app for production to the `dist` folder.

```bash
npm run test
```

Launches the `jest` test runner in the interactive watch mode.

```bash
npm run cypress:run
```

Runs Cypress tests to completion. <br>
Before running, you need to run `npm install` and `npm run build` in the example (`cd example`).

```bash
npm run cypress:open
```

Opens the Cypress Test Runner. <br>
Before running, you need to run `npm install` and `npm run build` in the example (`cd example`).

## License

[MIT License](https://github.com/jonschlinkert/parse-author/blob/HEAD/LICENSE) ©. <br>
Author  [lempiy](https://github.com/lempiy).
Collaborator [grimm](https://github.com/seriy-gry).