open-index/open-npm huggingface dataset:
npm package: @firere/roact-hooked
Description: Roact hooks based on Kampfkarren's hooks & React Hooks, compatible with my version of Roact
Author: Firere
Latest version: 2.3.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# [@firere/roact-hooked](https://www.npmjs.com/package/@firere/roact-hooked)

Roact hooks based on [Kampfkarren's hooks](https://github.com/Kampfkarren/roact-hooks) & [React Hooks](https://reactjs.org/docs/hooks-intro.html)

## Note

This fork exists purely for use with [my version of Roact](https://www.npmjs.com/package/@firere/roact) and is not compatible with [`@rbxts/roact`](https://www.npmjs.com/package/@rbxts/roact).

## Install

```
npm install @firere/roact-hooked
```

## Usage with hook detection

Version 2.4.0 adds the `withHookDetection` function to allow hooks in function components without manually using HOCs.

It modifies `Roact.createElement` to detect hook use and wrap them in `withHooks` or `withHooksPure` HOCs.

```tsx
// MyComponent.tsx
import Roact from "@firere/roact";
import { markPureComponent, useEffect, useState } from "@firere/roact-hooked";

interface Props {
	name?: string;
}

export default function MyComponent({ name = "David Baszucki" }: Props) {
	const [count, setCount] = useState(0);

	useEffect(() => {
		print("Counter: " + count);
	}, [count]);

	return (
		<textbutton
			Size={new UDim2(1, 0, 1, 0)}
			Text={`${name} pressed ${count} times`}
			Event={{
				Activated: () => setCount((value) => value + 1),
			}}
		/>
	);
}

// Optional: mark the component as a PureComponent
markPureComponent(MyComponent);
```

```tsx
// mount.client.ts
import Roact from "@firere/roact";
import { withHookDetection } from "@firere/roact-hooked";
import { Players } from "@rbxts/services";
import MyComponent from "./MyComponent";

withHookDetection(Roact);

Roact.mount(<MyComponent />, Players.LocalPlayer.WaitForChild("PlayerGui"));
```

## Usage with HOCs

Using the HOCs directly is still possible if you do not want to modify `Roact.createElement` for hook detection.

```tsx
import Roact from "@firere/roact";
import { withHooks, withHooksPure, useEffect, useState } from "@firere/roact-hooked";

interface Props {
	name?: string;
}

function MyComponent({ name = "David Baszucki" }: Props) {
	const [count, setCount] = useState(0);

	useEffect(() => {
		print("Counter: " + count);
	}, [count]);

	return (
		<textbutton
			Size={new UDim2(1, 0, 1, 0)}
			Text={`${name} pressed ${count} times`}
			Event={{
				Activated: () => setCount((value) => value + 1),
			}}
		/>
	);
}

export default withHooks(MyComponent);

// Optional: wrap the FC in a PureComponent instead
export default withHooksPure(MyComponent);
```
npm package: @firerian/fireui
Description: A modern Vue 3 UI component library
Author: firerian
Latest version: 1.0.3

# FireUI

一个基于 Vue 3 + TypeScript + Vite 构建的高性能 UI 组件库。

## 特性

- 🚀 **高性能**：基于 Vite 构建，支持 Tree-shaking
- 📦 **TypeScript**：完整的类型定义
- 🎨 **Tailwind CSS**：原子化样式支持
- 📱 **响应式**：完美支持移动端和桌面端
- 🌙 **主题定制**：灵活的 SCSS 变量系统

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建组件库

```bash
npm run build:lib
```

### 运行测试

```bash
npm run test
```

### 开发文档

```bash
npm run docs:dev
```

## 目录结构

```
FireUI/
├── src/
│   ├── components/     # UI 组件源码
│   ├── styles/         # 全局样式
│   ├── utils/          # 工具函数
│   ├── types/          # 类型定义
│   └── index.ts        # 入口文件
├── docs/               # 文档源码
├── playground/         # 本地调试项目
├── dist/               # 构建输出目录
└── package.json
```

## 使用示例

```ts
import { createApp } from 'vue'
import FireUI from 'fireui'
import 'fireui/dist/style.css'

const app = createApp(App)
app.use(FireUI)
```

## License

MIT
npm package: @firescar96/videojs-quality-selector
Description: VideoJS plugin that leverages videojs-contrib-quality-levels plugin to offer manual user-selectable level selection options for adaptive http streams.
Author: Justin Fujita
Latest version: 0.0.1

# videojs-source-selector

[![NPM](https://nodei.co/npm/@firescar96/videojs-source-selector.png)](https://nodei.co/npm/@firscar96/videojs-source-selector)

VideoJS plugin that leverages videojs-contrib-quality-levels plugin to offer manual user-selectable level selection options for adaptive http streams.

![Alt text](doc/images/example.png "Source selector")

# Test it with your stream [here](https://vod.dev)

Compatible with vjs 7 and up.

### Labels:
Level labels are generated from the ```id``` and ```label``` metadata parsed from the stream QualityLevels sources.


# Installation

```sh
npm install --save videojs-contrib-quality-levels
npm install --save @firescar96/videojs-source-selector
```

# Dependencies
Requires videojs-contrib-quality-levels

# Usage

To include videojs-source-selector on your website or web application, use any of the following methods.

### `<script>` tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin _after_ you include [video.js][videojs], so that the `videojs` global is available. You can configure the plugin with the options described above.  

```html
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-source-selector.min.js"></script>
<script src="//path/to/videojs-contrib-quality-levels.min.js"></script>
<script>
  var options =
  {
    // no options are allowed for now, but in the future options can be placed here
    // plugins: {
    //   httpSourceSelector: {}
    // }
  };
  var player = videojs('my-video', options);
  player.httpSourceSelector();
</script>
```

### Browserify/CommonJS

When using with Browserify, install videojs-source-selector via npm and `require` the plugin as you would any other module.

```js
var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('@firescar96/videojs-source-selector');

var player = videojs('my-video');

player.httpSourceSelector();
```

### ES6


```js
  import videojs from 'video.js';
  import 'videojs-contrib-quality-levels';
  import '@firescar96/videojs-source-selector';

  var player = videojs('my-video');

  player.httpSourceSelector();
});
```

### Building from src
To build, checkout the repo, run ```npm install``` && ```npm start```,
go to localhost:9999 (or the next free port) and test out the plugin.

### Pushing
* ```npm install```
* ```npm build```
* ```npm version major/minor/patch```
* ```git push origin master --tags```
* ```npm publish```

## License

MIT. Copyright (c) Justin Fujita, Nchinda Nchinda;