open-index/open-npm huggingface dataset:
npm package: @ff-lite-web/ffl-gossip
Description: jocoos util chatting library with TypeScript
Author: jocoos
Latest version: 0.0.2

# FlipFlop Lite Gossip Typescript SDK

[![npm version](https://img.shields.io/npm/v/ffl-gossip)](https://www.npmjs.com/package/ffl-gossip)

FlipFlop Lite Gossip Typescript SDK는 FlipFlop Lite Gossip Server와 연동하여 쉽고 다양한 채팅기능을 사용할 수 있습니다. 카카오톡과 같은 그룹 채팅방에서부터 유튜브 인터넷 방송의 오픈채팅의 기능까지 다양하게 구현할 수 있도록 높은 사용성을 제공합니다.

## Enviorment requirement

- Nodejs: 16.0+
- Browser: Latest Chrome and Firefox

## Installation

Library는 브라우저에서만 작동합니다. 케이스에 맞게 사용해주시기 바랍니다.

CDN은 지원하고 있지 않습니다. NPM과 YARN과 같은 패키지 매니저를 이용하여 라이브러리를 다운받으세요

```bash
npm i ffl-gossip
# or
yarn add ffl-gossip
```

## Quick Start

### Gossip Client 설정

#### 1. FlipFlop Lite User Console 회원가입 및 로그인

[FlipFlop Lite User Console](https://console.lite.flipflop.tv/login)에 들어가서 회원가입 후 로그인해주시기 바랍니다.

#### 2. 새로운 Application 생성

로그인 후 바로 보이는 화면에서 새로운 어플리케이션을 생성할 수 있습니다.
어플리케이션을 생성하면 ApiKey, ApiSecret키를 발급됩니다.
반드시 로컬환경에 `ApiKey`, `ApiSecret`를 저장해주세요.
앱키쌍은 복구할 수 없습니다. 키쌍을 분실시 재발급을 요청해야합니다.

#### 3. 멤버 로그인

FlipFlop Lite 생태계에서는 FlipFlop Lite User Console을 로그인하여 앱, 조직을 생성 및 관리하는 사용자는 `User`라고 칭하고 User가 만든 서비스앱의 회원들을 `Member`라고 칭합니다.

FlipFlop Lite의 비디오 생태계를 이용하기 위해서는 비디오의 주체가 되는 멤버가 필요합니다. FlipFlop Lite의 가이드에 따라 멤버는 `ApiKey`, `ApiSecret`을 이용하여 유저가 만든 앱에 로그인을 할 수 있습니다.

FlipFlop Lite의 비디오 생태계 Api는 멤버의 `appUserId`를 사용해 이용할 수 있습니다.

#### 4. 새로운 방송생성

생성된 App을 클릭하여 AppDashboard 페이지에 들어가서 방송을 생성합니다. 방송이 생성되면 해당 방송의 `ChannelKey`를 알 수 있습니다.

#### 5. Gossip Server Token 발급

위의 단계를 Step by Step으로 얻은 `ApiKey`, `ApiSecret`, `appUserId`, `ChannelKey`를 이용하여 ffl-gossip sdk를 사용할 수 있습니다.

`ApiKey`, `ApiSecret`, `appUserId`를 이용해 토큰을 발급해주세요.

발급된 `ChatToken`과 같이 `Channel Key`를 이용하면 FlipFlop 채팅방에 입장할 수 있습니다.

```typescript
import fflGossip from 'ffl-gossip';

// Get chat token and member info
const getChatToken = async () => {
  const result = await getChatToken({
    apiKey: '...',
    apiSecret: '...',
    appUserId: '...',
  });

  return result;
};

// Connect Gossip SDK
const connectGossipSdk = async () => {
  const result = await getChatToken();

  const client = fflGossip({
    token: result.data.chatToken,
    member: {
      appUserId: result.data.userId,
      username: result.data.userName,
      avatar: result.data.avatarProfileUrl,
    },
    isStreamer: true,
  });

  client.connect({
    channelKey: '...',
    receiveCallback: (message: MessageInfo) => {
      // Side Effect on Receiving Message
      if (message.messageType !== 'JOIN') {
        // Add Join Messaege Logic
        // ...
      } else {
        // Add Normal Message Logic
        // ...
      }
    },
    onConnect: () => {
      console.log('Connect Gossip');
    },
  });
};
```

### 오픈채팅

자세한 코드를 보고 싶다면 [sample-code](https://github.com/jocoos-dev/FFLGossip-Sample)를 확인해주세요
npm package: @ff-lite-web/videojs-video-loader
Description: flipflop lite video loader plugin
Author: hyehyeong jo
Latest version: 0.0.0

# videojs-video-loader

flipflop lite video loader plugin

## Table of Contents

<!-- START doctoc -->
<!-- END doctoc -->
## Installation

```sh
npm install --save @ff-lite-web/videojs-video-loader
```

## Usage

To include videojs-video-loader 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.

```html
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-video-loader.min.js"></script>
<script>
  var player = videojs('my-video');

  player.videoLoader();
</script>
```

### Browserify/CommonJS

When using with Browserify, install videojs-video-loader 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('@ff-lite-web/videojs-video-loader');

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

player.videoLoader();
```

### RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and `require` the plugin as you normally would:

```js
require(['video.js', '@ff-lite-web/videojs-video-loader'], function(videojs) {
  var player = videojs('my-video');

  player.videoLoader();
});
```

## License

MIT. Copyright (c) hyehyeong jo &lt;hyehyeong.jo@jocoos.com&gt;


[videojs]: http://videojs.com/
npm package: @ff-terminal/runtime
Description: Daemon-focused runtime package for FF Terminal SDK managed mode
Latest version: 0.1.0-beta.0

# @ff-terminal/runtime

Daemon-focused runtime package used by `@ff-terminal/sdk` managed mode.

- Node.js: `>=20`
- Package: `@ff-terminal/runtime`
- Purpose: provide a launchable FF Terminal daemon runtime for SDK clients

## Install

```bash
npm install @ff-terminal/runtime@beta
```

`@ff-terminal/sdk` also depends on this package directly, so managed mode works after installing SDK.

## Start daemon manually

```bash
ff-terminal-runtime-daemon
```

Default endpoint:

- `ws://127.0.0.1:28888`

## Notes

- Runtime artifacts are staged from the main repository build output.
- This package is daemon-focused and does not expose the full CLI UX.
npm package: @ff-tracker/watcher
Description: Local save file watcher for FF Tracker — monitors Final Fantasy Pixel Remaster saves and pushes state to the web dashboard
Latest version: 0.1.8

# @ff-tracker/watcher

Local save file watcher for FF Tracker. Monitors Final Fantasy Pixel Remaster save files on Steam and pushes game state to the web dashboard in real time.

## Installation

```bash
npm install -g @ff-tracker/watcher
```

Or run without installing:

```bash
npx @ff-tracker/watcher <game-id>
```

## Usage

```bash
ff-tracker-watcher ff6
```

Supported game IDs: `ff6` (more coming soon)

On startup, the watcher prints a session ID and dashboard URL. Open the URL in your browser to see your game progress update live as you play.

## Environment Variables

| Variable | Default | Description |
|----------|---------|-------------|
| `FF_TRACKER_API` | `https://ff-tracker-eta.vercel.app` | Dashboard API endpoint |

## Requirements

- Node.js 18+
- A supported Final Fantasy Pixel Remaster game installed on Steam
- Game must have been saved at least once

## How It Works

1. Auto-detects the save directory from Steam's `libraryfolders.vdf`
2. Watches for save file changes using filesystem polling (2s interval)
3. Decrypts and parses save files (Rijndael-256 CBC + DEFLATE)
4. Diffs the new state against the previous state
5. POSTs changes to the FF Tracker dashboard API

## Dashboard

View your progress at [ff-tracker-eta.vercel.app](https://ff-tracker-eta.vercel.app)
npm package: @ff-xiaofan/fastmcp-greeting-server
Description: A FastMCP scaffold project with greeting tool example, built with Node.js and MCP SDK
Author: ff-xiaofan
Latest version: 1.0.0

# FastMCP Greeting Server

这是一个基于Node.js和MCP SDK的FastMCP脚手架项目，包含一个简单的greeting工具示例。

[![npm version](https://img.shields.io/npm/v/@your-username/fastmcp-greeting-server.svg)](https://www.npmjs.com/package/@your-username/fastmcp-greeting-server)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 📚 快速导航

- **[MCP 配置文档](./MCP_CONFIG.md)** - 如何在 Claude Desktop 等客户端中配置使用
- **[npm 发布指南](./NPM_PUBLISH.md)** - 如何发布到 npm 仓库
- **[快速开始](./QUICKSTART.md)** - 快速上手指南

## 功能特性

- ✅ 基于TypeScript开发
- ✅ 使用MCP SDK (官方Model Context Protocol SDK)
- ✅ 支持多语言问候(中文/英文)
- ✅ 包含工具和资源示例
- ✅ 使用stdio传输协议
- ✅ 内置测试客户端

## 安装依赖

### 从 npm 安装（推荐）

```bash
npm install -g @your-username/fastmcp-greeting-server
```

安装后可直接使用：

```bash
fastmcp-greeting
```

### 本地开发安装

克隆项目并安装依赖：

```bash
git clone https://github.com/your-username/fastmcp-demo.git
cd fastmcp-demo
npm install
```

## 使用方法

### 开发模式运行

```bash
npm run dev
```

### 构建项目

```bash
npm run build
```

### 运行构建后的项目

```bash
npm start
```

### 运行测试

执行内置的测试客户端，测试greeting功能：

```bash
npm test
```

测试将会：
- 连接到MCP服务器
- 列出可用的工具
- 测试英文问候
- 测试中文问候
- 测试默认语言
- 列出可用资源
- 读取帮助文档

## 工具说明

### greeting 工具

向指定用户发送问候语。

**参数：**
- `name` (必需): 要问候的人的名字
- `language` (可选): 问候语言，支持 'zh'(中文) 或 'en'(英文)，默认为英文

**示例：**

```json
{
  "name": "Alice",
  "language": "en"
}
```

## 资源说明

### greeting://help

查看greeting工具的使用帮助文档。

## 项目结构

```
fastdemo/
├── src/
│   ├── index.ts          # 主服务器文件
│   └── test-client.ts    # 测试客户端
├── dist/                 # 编译输出目录
├── node_modules/         # 依赖包
├── package.json          # 项目配置
├── tsconfig.json         # TypeScript配置
├── .gitignore           # Git忽略文件
└── README.md            # 项目说明
```

## 技术栈

- @modelcontextprotocol/sdk 1.x (官方MCP SDK)
- TypeScript 5.x
- Node.js 20+
- Zod (参数校验)

## License

MIT

## 🔗 相关链接

- **npm 包**: https://www.npmjs.com/package/@your-username/fastmcp-greeting-server
- **GitHub 仓库**: https://github.com/your-username/fastmcp-demo
- **问题反馈**: https://github.com/your-username/fastmcp-demo/issues
- **MCP 官方文档**: https://modelcontextprotocol.io/

---

👉 **接下来做什么？**

1. 📝 查看 [MCP_CONFIG.md](./MCP_CONFIG.md) 在 Claude Desktop 中配置使用
2. 🚀 查看 [NPM_PUBLISH.md](./NPM_PUBLISH.md) 将你的服务器发布到 npm
3. 🛠️ 基于这个脚手架添加更多工具和资源

**注意**: 请将文档中的 `@your-username` 替换为你的实际 npm 用户名或 GitHub 用户名。
npm package: @ff-xiaofan/fastmcp-text-segment
Description: A FastMCP server with text segmentation tool - split text by natural paragraphs
Author: ff-xiaofan
Latest version: 1.1.0

# FastMCP Text Segment Server

A FastMCP server for intelligent text segmentation by natural paragraphs.

[![npm version](https://img.shields.io/npm/v/@ff-xiaofan/fastmcp-text-segment.svg)](https://www.npmjs.com/package/@ff-xiaofan/fastmcp-text-segment)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 功能特性

- ✅ 智能文本分段（自然段落识别）
- ✅ 多种输出格式（Array、Numbered、Markdown）
- ✅ 自动清理空段落和空白字符
- ✅ 支持双换行和单换行分段
- ✅ 基于 MCP 协议

## 快速开始

### 安装

```bash
npm install -g @ff-xiaofan/fastmcp-text-segment
```

### 使用

```bash
fastmcp-segment
```

或使用 npx（无需安装）：

```bash
npx @ff-xiaofan/fastmcp-text-segment
```

## MCP 工具

### segment_text

根据自然段落对文本进行分段处理。

**参数：**
- `text` (必需): 需要分段的文本内容
- `format` (可选): 输出格式
  - `"array"` (默认): JSON数组格式
  - `"numbered"`: 编号列表格式
  - `"markdown"`: Markdown格式

**示例：**

```json
{
  "text": "第一段内容\\n\\n第二段内容\\n\\n第三段内容",
  "format": "array"
}
```

### greeting

简单的问候工具。

**参数：**
- `name` (必需): 要问候的人的名字
- `language` (可选): 'zh' 或 'en'，默认 'en'

## Claude Desktop 配置

编辑配置文件：

**Windows:** `%APPDATA%\Claude\claude_desktop_config.json`
**macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`
**Linux:** `~/.config/Claude/claude_desktop_config.json`

添加配置：

```json
{
  "mcpServers": {
    "text-segment": {
      "command": "npx",
      "args": ["-y", "@ff-xiaofan/fastmcp-text-segment"]
    }
  }
}
```

## 分段规则

1. 优先按双换行符（`

` 或 `\r
\r
`）分段
2. 如果没有双换行，则按单换行符分段
3. 自动过滤空段落
4. 自动去除段落首尾空白

## 输出格式示例

### Array 格式

```json
[
  "第一段内容",
  "第二段内容",
  "第三段内容"
]
```

### Numbered 格式

```
1. 第一段内容

2. 第二段内容

3. 第三段内容
```

### Markdown 格式

```markdown
### 段落 1

第一段内容

### 段落 2

第二段内容

### 段落 3

第三段内容
```

## 技术栈

- MCP SDK 1.x
- TypeScript 5.x
- Node.js 18+
- Zod（参数验证）

## 开发

```bash
# 克隆项目
git clone https://github.com/ff-xiaofan/fastmcp-text-segment.git
cd fastmcp-text-segment

# 安装依赖
npm install

# 开发模式
npm run dev

# 运行测试
npm test

# 构建
npm run build
```

## License

MIT

## 相关链接

- [npm 包](https://www.npmjs.com/package/@ff-xiaofan/fastmcp-text-segment)
- [GitHub 仓库](https://github.com/ff-xiaofan/fastmcp-text-segment)
- [MCP 协议](https://modelcontextprotocol.io/)
- [详细功能文档](./SEGMENT_FEATURE.md)
npm package: @ff0000-ad-tech/ad-assets
Description: # Ad Assets
Author: RED Interactive Agency
Latest version: 3.1.5

##### RED Interactive Agency - Ad Technology

# Ad Assets

### inline-src

This class is used by https://github.com/ff0000-ad-tech/wp-plugin-assets to inline assets.

Most of our asset-bundling happens in fba-payload, as part of the polite load. However, some assets (like preloaders, for example) need to be available up-front, in the index. This module is what makes that bundle available to the framework. In the case of preloader: https://github.com/ff0000-ad-tech/ad-entry/blob/master/lib/preloader.js#L52

### image-manager

This module is used to make preloaded assets easily available throughout the build of an ad.
npm package: @ff0000-ad-tech/ad-external
Description: [![npm (tag)](https://img.shields.io/npm/v/@ff0000-ad-tech%2Fad-external.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fad-external) [![GitHub issues](https://img.shields.io/github/issues/ff0000-ad-tech/ad-external.svg?style=flat-
Author: RED Interactive Agency
Latest version: 3.1.0

##### RED Interactive Agency - Ad Technology

[![npm (tag)](https://img.shields.io/npm/v/@ff0000-ad-tech%2Fad-external.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fad-external)
[![GitHub issues](https://img.shields.io/github/issues/ff0000-ad-tech/ad-external.svg?style=flat-square)](https://github.com/ff0000-ad-tech/ad-external)
[![npm downloads](https://img.shields.io/npm/dm/@ff0000-ad-tech%2Fad-external.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fad-external)

[![GitHub contributors](https://img.shields.io/github/contributors/ff0000-ad-tech/ad-external.svg?style=flat-square)](https://github.com/ff0000-ad-tech/ad-external/graphs/contributors/)
[![GitHub commit-activity](https://img.shields.io/github/commit-activity/y/ff0000-ad-tech/ad-external.svg?style=flat-square)](https://github.com/ff0000-ad-tech/ad-external/commits/master)
[![npm license](https://img.shields.io/npm/l/@ff0000-ad-tech%2Fad-external.svg?style=flat-square)](https://github.com/ff0000-ad-tech/ad-external/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

# External
npm package: @ff0000-ad-tech/ad-polyfills
Description: [![npm (tag)](https://img.shields.io/npm/v/@ff0000-ad-tech%2Fad-polyfills.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fad-polyfills) [![GitHub issues](https://img.shields.io/github/issues/ff0000-ad-tech/ad-polyfills.svg?style=fl
Author: RED Interactive Agency
Latest version: 1.1.0

##### RED Interactive Agency - Ad Technology

[![npm (tag)](https://img.shields.io/npm/v/@ff0000-ad-tech%2Fad-polyfills.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fad-polyfills)
[![GitHub issues](https://img.shields.io/github/issues/ff0000-ad-tech/ad-polyfills.svg?style=flat-square)](https://github.com/ff0000-ad-tech/ad-polyfills)
[![npm downloads](https://img.shields.io/npm/dm/@ff0000-ad-tech%2Fad-polyfills.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fad-polyfills)

[![GitHub contributors](https://img.shields.io/github/contributors/ff0000-ad-tech/ad-polyfills.svg?style=flat-square)](https://github.com/ff0000-ad-tech/ad-polyfills/graphs/contributors/)
[![GitHub commit-activity](https://img.shields.io/github/commit-activity/y/ff0000-ad-tech/ad-polyfills.svg?style=flat-square)](https://github.com/ff0000-ad-tech/ad-polyfills/commits/master)
[![npm license](https://img.shields.io/npm/l/@ff0000-ad-tech%2Fad-polyfills.svg?style=flat-square)](https://github.com/ff0000-ad-tech/ad-polyfills/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

# Polyfills
npm package: @ff0000-ad-tech/cmd-escape
Description: Converts a list of unix params into a string that can be executed in Windows cmd.exe
Author: 160over90
Latest version: 1.1.0

## Cmd Escape

Converts a list of unix params into a string that can be executed in Windows cmd.exe

#### What it does

Items that start with `-` or `--`:
 - no change 

Other items:
 - have their `"` characters escaped with backslashes
 - are quoted with unescaped `"`

Then all items are joined with a ` ` space character.

## Install
```bash
npm install cmd-escape --save
```

## Usage
```javascript
const cmdEscape = require('cmd-escape');

const command = 'npx webpack';
const args = [
	'--config',
	'webpack.config.js'
	'--env'
	'{"deploy":{"source":{"size":"300x250","index":"index.html"},"output":{"debug":false,"context":"./3-traffic"},"profile":{"name":"default","adEnvironment":{"id":"default","runPath":"","adPath":""}}},"watch":{"api":"http://10.0.7.126:5200/api","key":"/default/300x250/index.html","watch":{"start":"/watch-start","stop":"/watch-stop","complete":"/watch-complete"},"processing":{"start":"/processing-start","stop":"/processing-stop"},"error":{"dispatch":"/error-dispatch","reset":"/error-reset"}}}'
	'--colors'
];
console.log(command, cmdEscape(args));
// => npx webpack --config "webpack.config.js" --env "{\"deploy\":{\"source\":{\"size\":\"300x250\",\"index\":\"index.html\"}}}" --colors
```
npm package: @ff0000-ad-tech/comment-hooks
Description: # Comment Hooks
Author: RED Interactive Agency
Latest version: 1.1.0

##### FF0000 Ad Tech

# Comment Hooks

Comment-hooks are a pattern that enables text documents to define specific start/end points, so that manager applications can read & write to those locations with confidence.

This library provides an interface for:

1. Parsing and stringifying hook addresses
2. Generating hook regex patterns.

With these tools, the manager application has all it needs to read & write to documents which have implemented comment hooks.

## Hook Address

`[scope].[type].[param]`

## Formatting

### Body Hooks

These hooks indicate a start-point and an end-point. All content between these two comments will be matched.

```javascript
/*-- [scope].[type].[param].[start/end] --*/
```

```html
<!-- [scope].[type].[param].[start/end] -->
```

## Insert Hooks

These hooks only indicate a single insertion point, and should be considered write-only.

```javascript
/*-- [scope].Insert.[param] --*/
```

```html
<!-- [scope].Insert.[param] -->
```
npm package: @ff0000-ad-tech/cs-plugin-apply-network
Description: [![npm (tag)](https://img.shields.io/npm/v/@ff0000-ad-tech%2Fcs-plugin-apply-network.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fcs-plugin-apply-network) [![GitHub issues](https://img.shields.io/github/issues/ff0000-ad-tech/cs-
Author: RED Interactive Agency
Latest version: 2.2.3

##### RED Interactive Agency - Ad Technology

[![npm (tag)](https://img.shields.io/npm/v/@ff0000-ad-tech%2Fcs-plugin-apply-network.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fcs-plugin-apply-network)
[![GitHub issues](https://img.shields.io/github/issues/ff0000-ad-tech/cs-plugin-apply-network.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-apply-network)
[![npm downloads](https://img.shields.io/npm/dm/@ff0000-ad-tech%2Fcs-plugin-apply-network.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fcs-plugin-apply-network)

[![GitHub contributors](https://img.shields.io/github/contributors/ff0000-ad-tech/cs-plugin-apply-network.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-apply-network/graphs/contributors/)
[![GitHub commit-activity](https://img.shields.io/github/commit-activity/y/ff0000-ad-tech/cs-plugin-apply-network.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-apply-network/commits/master)
[![npm license](https://img.shields.io/npm/l/@ff0000-ad-tech%2Fcs-plugin-apply-network.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-apply-network/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

# Creative Server Plugin - Apply Network
npm package: @ff0000-ad-tech/cs-plugin-bulk-compile
Description: [![npm (tag)](https://img.shields.io/npm/v/@ff0000-ad-tech%2Fcs-plugin-bulk-compile.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fcs-plugin-bulk-compile) [![GitHub issues](https://img.shields.io/github/issues/ff0000-ad-tech/cs-pl
Author: RED Interactive Agency
Latest version: 1.1.0

##### RED Interactive Agency - Ad Technology

[![npm (tag)](https://img.shields.io/npm/v/@ff0000-ad-tech%2Fcs-plugin-bulk-compile.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fcs-plugin-bulk-compile)
[![GitHub issues](https://img.shields.io/github/issues/ff0000-ad-tech/cs-plugin-bulk-compile.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-bulk-compile)
[![npm downloads](https://img.shields.io/npm/dm/@ff0000-ad-tech%2Fcs-plugin-bulk-compile.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fcs-plugin-bulk-compile)

[![GitHub contributors](https://img.shields.io/github/contributors/ff0000-ad-tech/cs-plugin-bulk-compile.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-bulk-compile/graphs/contributors/)
[![GitHub commit-activity](https://img.shields.io/github/commit-activity/y/ff0000-ad-tech/cs-plugin-bulk-compile.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-bulk-compile/commits/master)
[![npm license](https://img.shields.io/npm/l/@ff0000-ad-tech%2Fcs-plugin-bulk-compile.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-bulk-compile/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

# Creative Server Plugin - Bulk Compile
npm package: @ff0000-ad-tech/cs-plugin-date-picker
Description: [![npm (tag)](https://img.shields.io/npm/v/@ff0000-ad-tech%2Fcs-plugin-date-picker.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fcs-plugin-date-picker) [![GitHub issues](https://img.shields.io/github/issues/ff0000-ad-tech/cs-plug
Author: RED Interactive Agency
Latest version: 2.0.3

##### 160over90 - Ad Technology

[![npm (tag)](https://img.shields.io/npm/v/@ff0000-ad-tech%2Fcs-plugin-date-picker.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fcs-plugin-date-picker)
[![GitHub issues](https://img.shields.io/github/issues/ff0000-ad-tech/cs-plugin-date-picker.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-date-picker)
[![npm downloads](https://img.shields.io/npm/dm/@ff0000-ad-tech%2Fcs-plugin-date-picker.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fcs-plugin-date-picker)

[![GitHub contributors](https://img.shields.io/github/contributors/ff0000-ad-tech/cs-plugin-date-picker.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-date-picker/graphs/contributors/)
[![GitHub commit-activity](https://img.shields.io/github/commit-activity/y/ff0000-ad-tech/cs-plugin-date-picker.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-date-picker/commits/master)
[![npm license](https://img.shields.io/npm/l/@ff0000-ad-tech%2Fcs-plugin-date-picker.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-date-picker/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

# Creative Server Plugin - CS Date Picker
npm package: @ff0000-ad-tech/cs-plugin-dps-renderer
Description: Creative Server Plugin - DPS Renderer, enables compiling static versions of units built to dynamically load their state from DPS.
Author: 160over90
Latest version: 1.2.1

##### 160over90 - Ad Technology

# Creative Server Plugin - DPS Renderer

Used to flatten a dynamic build into a static delivery.

- Bundles required referenced DPS data into the index.
- Determines dynamic assets and bundles them into the binary payload.
- Produces a fully stand-alone HTML unit with no dynamic requests.
npm package: @ff0000-ad-tech/cs-plugin-particle-simulator
Description: Ad Particles simulator
Author: Nico Hsieh
Latest version: 1.1.3

# AdTech - Particles (ES6 version)

---

This is an updated version Particle Simulator for [ad-particles](https://stash.ff0000.com/projects/AT/repos/ad-particles/browse) to work with #FF0000 Ad Tech ES6 pipeline. The Simulator provides a visual interface to tweak [ad-particles](https://github.com/ff0000-ad-tech/ad-particles) effects in real time. There are more complex and dynamic effects can be achieved programmatically. The simulator can be installed in [Creative Server](https://github.com/ff0000-ad-tech/wp-creative-server). For details, please see [Confluence doc](hhttps://confluence.ff0000.com/display/AT/1.+Simulator+with+Creative+Server).

---

## Installation

`npm install`

## Development

To test the dev version of the project, you need to:

1. Run a [creative server](https://github.com/ff0000-ad-tech/wp-creative-server) that has Particle Simulator plugin installed.

2. Have a `.env` file at the root of the project. In the `.env` file, add `TARGET_DEV_PATH=[path to the cs-plugin-particle-simulator in node modules folder in creative server]`

3. Run `npm run dev`

4. All the source files are in `source` folder. Node API is under `source/lib`

5. Webpack will start writing files into the directory you specified. You should be able to refresh the simulator in Creative Server to see the changes.

6. Sometimes Webpack watch copy process doesn't seem to pick up new files, if that happens, just restart `npm run dev`

## Build the project for publish

`npm run build`

The built version will be in the `dist` folder. You should test installing the feature branch in Creative Server before merging it into `master`. That is it!
npm package: @ff0000-ad-tech/cs-plugin-vendor-ft
Description: Creative Server Plugin - Vendor Flashtalking
Author: RED Interactive Agency
Latest version: 1.1.2

##### RED Interactive Agency - Ad Technology

[![npm (tag)](https://img.shields.io/npm/v/@ff0000-ad-tech%2Fcs-plugin-vendor-ft.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fcs-plugin-vendor-ft)
[![GitHub issues](https://img.shields.io/github/issues/ff0000-ad-tech/cs-plugin-vendor-ft.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-vendor-ft)
[![npm downloads](https://img.shields.io/npm/dm/@ff0000-ad-tech%2Fcs-plugin-vendor-ft.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fcs-plugin-vendor-ft)

[![GitHub contributors](https://img.shields.io/github/contributors/ff0000-ad-tech/cs-plugin-vendor-ft.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-vendor-ft/graphs/contributors/)
[![GitHub commit-activity](https://img.shields.io/github/commit-activity/y/ff0000-ad-tech/cs-plugin-vendor-ft.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-vendor-ft/commits/master)
[![npm license](https://img.shields.io/npm/l/@ff0000-ad-tech%2Fcs-plugin-vendor-ft.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-vendor-ft/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

# Creative Server Plugin - Vendor Flashtalking
npm package: @ff0000-ad-tech/cs-plugin-vendor-indexes
Description: [![npm (tag)](https://img.shields.io/npm/v/@ff0000-ad-tech%2Fcs-plugin-vendor-indexes.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fcs-plugin-vendor-indexes) [![GitHub issues](https://img.shields.io/github/issues/ff0000-ad-tech/c
Author: RED Interactive Agency
Latest version: 1.1.0

##### RED Interactive Agency - Ad Technology

[![npm (tag)](https://img.shields.io/npm/v/@ff0000-ad-tech%2Fcs-plugin-vendor-indexes.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fcs-plugin-vendor-indexes)
[![GitHub issues](https://img.shields.io/github/issues/ff0000-ad-tech/cs-plugin-vendor-indexes.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-vendor-indexes)
[![npm downloads](https://img.shields.io/npm/dm/@ff0000-ad-tech%2Fcs-plugin-vendor-indexes.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fcs-plugin-vendor-indexes)

[![GitHub contributors](https://img.shields.io/github/contributors/ff0000-ad-tech/cs-plugin-vendor-indexes.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-vendor-indexes/graphs/contributors/)
[![GitHub commit-activity](https://img.shields.io/github/commit-activity/y/ff0000-ad-tech/cs-plugin-vendor-indexes.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-vendor-indexes/commits/master)
[![npm license](https://img.shields.io/npm/l/@ff0000-ad-tech%2Fcs-plugin-vendor-indexes.svg?style=flat-square)](https://github.com/ff0000-ad-tech/cs-plugin-vendor-indexes/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)


# Creative Server Plugin - Vendor Indexes
npm package: @ff0000-ad-tech/fba-compiler
Description: # FBA Compiler
Author: Kenny Arehart
Latest version: 3.0.0

##### 160over90 - Ad Technology

# FBA Compiler

This utility optionally packs binary assets (images, fonts, ...) into a single PNG file.

The benefit of doing so is that your ad will make fewer requests for assets. The downside is that additional cycles are necessary to parse the fba-payload back into dataURIs for DOM elements.

Tests should be done to see if networks supporting HTTP2 load multiple image/font requests faster than the client can parse the FBA-payload.

Switch on FBA-compiling in [Creative Server](https://github.com/ff0000-ad-tech/wp-creative-server) in the deploy profile, like:

![Creative Server: FBA-compiling switch](https://github.com/ff0000-ad-tech/fba-compiler/tree/master/docs/images/cs-control.png)
npm package: @ff0000-ad-tech/fba-loader
Description: Babel loader for binary assets like fonts and images.
Author: 160over90
Latest version: 2.0.0

##### 160over90 - Ad Technology

# FBA Loader

This is our Babel loader used for binary asset imports (images and fonts).

These assets are subsequently either:

1. Declared in the index, see [wp-plugin-index](https://github.com/ff0000-ad-tech/wp-plugin-index)

   - copied to 3-traffic for distribution
   - preloaded prior to build execution, see [ad-entry](https://github.com/ff0000-ad-tech/ad-entry)

2. Compiled into a single binary payload, see [fba-compile](https://github.com/ff0000-ad-tech/fba-compiler)

   - `fba-payload.png` output to 3-traffic for distribution
   - preloaded & parsed prior to build execution, [ad-entry](https://github.com/ff0000-ad-tech/ad-entry)

## Base64 - Deprecated

There is functionality here that could also inline the binary assets in the build bundle as base-64. We have disabled it for now, because the binary options are 25% fewer bytes.

...

Loading a binary asset will export a key to access its corresponding asset within an FBA payload (i.e. the filename without the extension):

```js
import imgFile from './img.jpg'
// imgFile === 'img'
```

You can also choose to inline certain assets by falling back on the `url-loader`. If you're inlining an asset, options you pass to this loader will apply to the `url-loader`. To inline, add the query string `?inline=true` to the end of the file import:

```js
import jif from './jif.gif'
// jif === Base64 contents of jif.gif as a data URL
```
npm package: @ff0000-ad-tech/webpack-rollup-babel-loader
Description: Forked from erikdesjardins/webpack-rollup-loader, this loader applies Babel transformations after Rollup compiles a bundle to prevent Babel from affecting Rollup's tree shaking.
Author: Erik Desjardins
Latest version: 3.1.0

# webpack-rollup-babel-loader

Forked from [erikdesjardins/webpack-rollup-loader](https://github.com/erikdesjardins/webpack-rollup-loader), this loader applies Babel transformations after Rollup compiles a bundle to prevent Babel from affecting Rollup's tree shaking.

## Installation
  
`npm install --save-dev @ff0000-ad-tech/webpack-rollup-babel-loader` 

Rollup is a peer dependency, and must also be installed:

`npm install --save-dev rollup`

## Usage

**Note:** This loader must only be applied once to the entry module. If it is applied to all `.js` files, basically anything can happen. Modules may be duplicated, Webpack may fail to terminate, cryptic errors may be generated.

Rollup can receive settings outlined [here](https://rollupjs.org/#javascript-api) from an `options` object passed alongside the loader.

Babel can receive settings from the `babelOptions` key on that `options` object, as well.

Also, make sure that Babel is not transpiling ES6 imports to CommonJS with the `transform-es2015-modules-commonjs` plugin.

**webpack.config.js:**

```js
module.exports = {
  entry: 'entry.js',
  module: {
    rules: [
      {
        test: /entry.js$/,
        use: [{
          loader: 'webpack-rollup-loader',
          options: {
            // OPTIONAL: any rollup options (except `entry`)
            // e.g.
            plugins: [rollupCommonjsPlugin()],
            external: ['moment'],
            // pass Babel options from here
            babelOptions: {
              presets: ['env']
            }
          },
        }]
      },

      // ...other rules as usual
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ]
      }
    ]
  }
};
```
npm package: @ff0000-ad-tech/wp-deploy-manager
Description: # Webpack - Deploy Manager
Author: 160over90
Latest version: 12.1.3

##### 160over90 - Ad Technology

# Webpack - Deploy Manager

Deploy Manager manages Webpack state, loaders, plugins, and optimization settings.

This helps us to keep our `webpack.config.js` update-able via node-modules, rather than manual migration of builds.

More docs are forth-coming.
npm package: @ff0000-ad-tech/wp-plugin-index
Description: # Webpack Plugin - Index
Author: 160over90
Latest version: 5.1.2

##### 160over90 - FF0000 Ad Tech

# Webpack Plugin - Index

This plugin serves a number of purposes, all relating to the `index.html`:

1. Watches `index.html` for changes.
2. Processes settings on `window.adParams` and `window.assets`.
   - Generates `@size/.inline-imports.js` as our webpack `inline` compile entry. This is usually just the `assets.preloaders` assets.
3. Injects code into `index.html`, see [Injection Types](#injection-types):
   - Values, like updated settings, as a result of:
     - Creative Server settings.
     - Assets discovered in the compile process.
   - Webpack Bundles, like:
     - Inline
     - Initial
     - Build
   - Files, like external scripts.
4. Minifies `index.html`.

A [comment-based hook pattern](https://github.com/ff0000-ad-tech/comment-hooks) is used to control where these fragments are written.

## Usage

A sample webpack configuration looks like this:

```javascript
new IndexPlugin({
	source: {
		path: `${DM.ad.get().env.build}/${DM.ad.get().paths.ad.context}/${DM.deploy.get().source.index}`,
	},
	output: {
		path: `${DM.deploy.get().output.context}/${DM.deploy.get().output.folder}/index.html`,
		minify: !DM.deploy.get().output.debug,
	},
	injections: [
		// a "value"-type injection
		{
			hook: 'Red.Settings.ad_params',
			value: `var adParams = ${JSON.stringify(DM.ad.get().settings.ref.adParams, null, '\t')};`,
		},
		// a "bundle"-type injection, corresponds to the entry-name
		{
			hook: 'Red.Bundle.inline',
			bundle: 'inline.bundle.js',
		},
		// a "file"-type injection, can find a file-path in the document, load it, and pipe the result into the doc
		{
			hook: 'Red.Bundle.initial',
			bundle: 'initial.bundle.js',
		},
		{ scope, hook: 'Red.Require.*', file: /require\(['"`]([^\)]+)['"`]\)/ },
	],
})
```

## Injection Types

<a name="injection-types"></a>

##### Value

This method pipes data known at compile time into the requested hook.

##### Bundle

This method pipes an entry/bundle from your Webpack compilation into the requested hook.

##### File

If a url/filepath has be hardwired in the webpack config, it will be injected into the specified hook.

Otherwise, this method will look in the target document for a hook of the specified name. If a file-match pattern is provided, the "required" url will be loaded and then piped back to the document. A possible implementation of this might look like:

![Require Example](https://github.com/ff0000-ad-tech/wp-plugin-index/tree/master/docs/images/require-example.png)
npm package: @ff00ff/dependency-injection
Description: Simple dependency injection library which doesn't force you to use classes and decorators.
Latest version: 1.0.2

# Dependency Injection

Simple idiomatic dependency injection library which doesn't force you to use classes and decorators.

```
npm i @ff00ff/dependency-injection
```

---

Use `di(..)` to initialize all your dependencies. You pass all dependency factories to `di` and
every factory will receive the dependencies of the previous factories.

```ts
di(
  // Pass any singletons over here. The first argument accepts just an object of your initial
  // dependencies.
  { mySingleton },

  // Collect your configuration which is automatically passed to the next factories. All without
  // losing type information.
  () => ({
    NODE_ENV: process.env.NODE_ENV!,
    FOO: process.env.FOO!,
    BAR: process.env.BAR!,
  }),

  // Create your repositories. `makeRepositories` gets passed all the previous dependencies.
  makeRepositories,

  // `makeServices` is invoked with the result of `makeRepositories` combined with all other
  // previous factory functions.
  makeServices,
);
```
npm package: @ff2005/react-translations
Description: Simple translations lib for react using hooks
Author: FF2005
Latest version: 0.0.2

# react-translations

[![MIT License](https://img.shields.io/npm/l/react-native-template-iso-starter)](https://opensource.org/licenses/MIT)
[![React](https://img.shields.io/badge/react-16.8.0-68D3FC?logo=react)](https://reactjs.org/)
[![Typescript](https://img.shields.io/badge/typescript-4.1.5-007ACC?logo=typescript)](https://www.typescriptlang.org/)

Simple library for react translation with hooks (and typescript).

## Installation

`npm install @ff2005/react-translations`

## Usage

App.js
```
import { TranslationsProvider } from '@ff2005/react-translations';
import Page from "./Page";
import en from './en.json';
import fr from './fr.json';

function App() {
  return (
    <TranslationsProvider translations={{ en, fr }}>
      <Page />
    </TranslationsProvider>
  );
}

export default App;
```


Page.js
```
import { useTranslation, useTranslationLanguage } from "@ff2005/react-translations";

function Page() {
  const [translationLanguage, setTranslationLanguage] = useTranslationLanguage();
  const t = useTranslation();

  setTimeout(() => {
    setTranslationLanguage({
      languageTag: 'fr',
      isRTL: false
    })
  }, 3000);

  return (
    <>
      <div>{t('app.title')}</div>
      <div>{JSON.stringify(translationLanguage)}</div>
    </>
  );
}

export default Page;
```


en.json
```
{
  "app": {
    "title": "My Application"
  }
}
```


fr.json
```
{
  "app": {
    "title": "Mon application"
  }
}

```

## TranslationsProvider attributes

- translations - Object with each json language
- fallback - Object for the fallback language (ex: { languageTag: 'en', isRTL: false }) 

## Contributing

Contributions are very welcome. Please check out the [contributing document](CONTRIBUTING.md).

## License

[MIT](LICENSE).