open-index/open-npm huggingface dataset:
npm package: @im-openclaw/potato
Description: Potato Bot channel plugin for OpenClaw
Latest version: 0.1.9

# @openclaw/potato

Potato Bot channel plugin for [OpenClaw](https://openclaw.ai).

Connect your OpenClaw assistant to [Potato](https://potato.im) — a Telegram-compatible messaging platform popular in Asia.

## Install

```bash
openclaw plugins install @openclaw/potato
```

Or from source:

```bash
openclaw plugins install -l ./openclaw-channel-potato
```

## Configure

Add to `~/.openclaw/openclaw.json`:

```json
{
  "channels": {
    "potato": {
      "botToken": "123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
    }
  }
}
```

Then restart the gateway:

```bash
openclaw gateway
```

### Allow all users (open access)

```json
{
  "channels": {
    "potato": {
      "botToken": "...",
      "dmPolicy": "open",
      "allowFrom": ["*"],
      "groupPolicy": "open",
      "groupAllowFrom": ["*"],
      "groups": {
        "*": { "requireMention": false }
      }
    }
  }
}
```

### Pairing (default — private use)

By default only approved users can send messages. Unknown senders receive a code:

```bash
openclaw pairing list potato
openclaw pairing approve potato <CODE>
```

## Full Config Reference

| Key | Default | Description |
|---|---|---|
| `botToken` | — | Bot token from @BotFather in Potato |
| `dmPolicy` | `"pairing"` | `pairing` / `allowlist` / `open` |
| `allowFrom` | `[]` | Allowed user IDs. Use `["*"]` for everyone |
| `groupPolicy` | `"allowlist"` | `allowlist` / `open` / `disabled` |
| `groups` | `{}` | Group allowlist. `"*"` matches all groups |
| `groupAllowFrom` | (inherits `allowFrom`) | Allowed sender IDs in groups |
| `streaming` | `"off"` | `off` / `partial` / `block` / `progress` |
| `markdown` | `true` | Enable Markdown rendering |
| `typingIndicator` | `true` | Show typing action while processing |
| `pollTimeout` | `30` | Long-poll timeout in seconds |
| `webhookUrl` | — | Enable webhook mode (Active Mode) |
| `webhookSecret` | — | Secret path component for webhook URL |

## Potato API Differences from Telegram

- API base: `https://api.rct2008.com:8443/<token>/METHOD`
- Every send call requires `chat_type` (1=DM, 2=Group, 3=SuperGroup)
- Send method: `sendTextMessage` (not `sendMessage`)
- Markdown flag: `markdown: true` (not `parse_mode`)
- Delete webhook: `delWebhook` (not `deleteWebhook`)
- No reactions, no forum topics

## License

MIT
npm package: @im-sang-tae/vanilla
Description: state management library that are not dependent on the framework
Latest version: 1.0.1

# @im-sang-tae/vanilla - A Global State Management Library

@im-sang-tae/vanilla is a global state management library for JavaScript applications. It's designed to provide a simple and intuitive API for managing state in an efficient and scalable way.

## Features

- Supports both atom and selector for managing state.
- Easy to integrate with any JavaScript application.
- Efficient updates and minimal re-renders.
- Support for tracking dependencies between selectors.

## Installation

```bash
# using npm
npm install @im-sang-tae/vanilla

# using yarn
yarn add @im-sang-tae/vanilla
```

## Usage

To start using IM_SANG_TAE in your project, you need to create atoms or selectors with an initial state:

```javascript
import { createAtom } from "@im-sang-tae/vanilla";

// create atom
const myAtom = createAtom({
  key: "myAtom",
  initialState: 0,
});

// create selector
const mySelector = createAtom({
    key: "mySelector",
    get: ({get}) => {
        return get(myAtom) + 1;
    }
})
```

You can get the current state and set a new state using the atomState method from the state manager:

```javascript
import { atomState, subscribe } from "@im-sang-tae/vanilla";

const [getMyAtom, setMyAtom] = atomState(myAtom);
const [getMySelector, setMySelector] = atomState(mySelector);

subscribe(myAtom, () => {
  console.log(getMyAtom());
});

subscribe(mySelector, () => {
  console.log(getMySelector());
});
```

## License

This project is licensed under the MIT License.

## Contribute

[Contribute](https://github.com/modern-agile-team/im-sang-tae/blob/master/.github/workflows/CONTRIBUTE.md).
npm package: @im2wddrf/listfiles
Description: A simple npm package that leverages the power of javascript's `console.table()` to print out files in the current directory. This package is best used as a command-line program, similar to `ls`.
Author: Christian Valenzuela
Latest version: 1.0.1

# List Files

A simple npm package that leverages the power of javascript's `console.table()` to print out files in the current directory. This package is best used as a command-line program, similar to `ls`. 

## Installation
To install this package, run the following command in your terminal: 

```node
npm install @im2wddrf/listfiles --global
```

## Arguments
Since `listfiles` is intended to be used as a command line program, it will read any arguments that are passed along with its execution. Currently `listfiles` has the following flags: 

* `--filter-`: filter the files that are display in the current directory
  * `day-{number, between 1 and 31 inclusive}`
  * `month-{month name or number, between 1 and 12 inclusive}`
  * `year-{four digit year}`
  * `weekday-{weekday, number or first three letters of weekday}`
  * `filetype-{file, folder, fifo, socket, symlink}`
* `--show-filter`: this displays the filters that were successfully parsed

## Examples

The below command will display only files and directories that fall on November: 

```zsh
# the below are all equivalent, notice how it is not case sensitive
lsjs --filter-month-12
lsjs --filter-month-November
lsjs --filter-month-nov
```

With z-shell, you can easily add multiple filters at once!

```zsh
lsjs --filter-{month-6,year-2019}          # files from June 2019
lsjs --filter-{year-2020,month-{6..12}}    # files from June-December 2019
lsjs --filter-weekday-{mon,fri}            # show files that fall on monday or friday
```

## Notes 
If you find this program useful, I would install it globally via `npm install -g`. By default the program lists directories in alpha order first, then all other files in alpha order.
npm package: @im30etherpad/ep_catalog_plugin
Description: etherpad catalog plugin
Author: cuishijie
Latest version: 0.0.1

# ep_catalog_plugin
![Publish Status](https://github.com/csj5588/ep_catalog_plugin/workflows/Node.js%20Package/badge.svg) ![Publish Status](https://github.com/csj5588/ep_catalog_plugin/workflows/Node.js%20Package/badge.svg)
![Screenshot](https://user-images.githubusercontent.com/220864/107214131-5c3dd600-6a01-11eb-82d9-b2d67ec8ae93.png)
## What is ep_catalog_plugin?
An Etherpad Plugin to apply the ep_catalog_plugin functionality in a pad. (describe in minimum 50 Letters what it is)
Currently supports:
* ep_catalog_plugin functionality 1
* ep_catalog_plugin functionality 2
* ep_catalog_plugin functionality 3
* ep_catalog_plugin functionality 4
## ep_catalog_plugin Usage
Experimental.  As a special attribute on Etherpad, some weirdness may be experienced by using ep_catalog_plugin.
## ep_catalog_plugin History
I decided to copy/paste the ep_t3 over ep_catalog_plugin to create that plugin.
## ep_catalog_plugin License
/**
  * Copyright 2022 by cuishijie <1839333350@qq.com>
  *
  * This file is part of ep_catalog_plugin.
  *
  * Permission is hereby granted, free of charge, to any person 
  * obtaining a copy of this software and associated documentation 
  * files (the "Software"), to deal in the Software without restriction, 
  * including without limitation the rights to use, copy, modify, merge, 
  * publish, distribute, sublicense, and/or sell copies of the Software, 
  * and to permit persons to whom the Software is furnished to do so, 
  * subject to the following conditions:
  *
  * The above copyright notice and this permission notice shall be included 
  * in all copies or substantial portions of the Software.
  *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
  * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
  * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
## ep_catalog_plugin Development
I did the development for free to help support continued learning due to disruptions by the coronavirus.
## ep_catalog_plugin Author
cuishijie <1839333350@qq.com>, https://github.com/csj5588
## ep_catalog_plugin Contributors

## Help Funding ep_catalog_plugin
Place your funding information here.
 SEND
 MORE
-----
MONEY
Thanks
cuishijie
npm package: @im33357/uniswap-v2-sdk
Description: 🛠 An SDK for building applications on top of Uniswap.
Latest version: 3.0.9

# Uniswap SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/Uniswap/uniswap-sdk/workflows/CI/badge.svg)](https://github.com/Uniswap/uniswap-sdk)
[![npm version](https://img.shields.io/npm/v/@uniswap/sdk/latest.svg)](https://www.npmjs.com/package/@uniswap/sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/sdk/latest.svg)](https://bundlephobia.com/result?p=@uniswap/sdk@latest)

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/Uniswap/uniswap-sdk.git
```

Move into the uniswap-sdk working directory

```sh
cd uniswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @im__reaper/apex
Description: <h1 align="center"> Apex </h1> <p align="center">Minimal Web Code Editor</p>
Author: sidgroks@gmail.com
Latest version: 1.0.8

<h1 align="center">
Apex
</h1>
<p align="center">Minimal Web Code Editor</p>

### Demo

[Apex](https://apex.reaper.im)

### Installation

```sh
npm i --save @im__reaper/apex
```

### Features

- Tab Indentation (defaults to 2 Spaces)
- Has non-blocking highlighting, you'll have to use something like PrismJS to return a highlighted code/span elements

### Usage

The API is very simple and small as the editor doesn't really try to solve a lot of problems.

```js
Apex({
  el: document.getElementById("editor"), //element to attach too
  tabSpace: 2, // number of spaces to be added on TAB
  font: "Hack,monospace", // font to be used
  fontSize: "14", //font size for the editor
  placeholder: "Enter Code here", // Placeholder
  value: `console.log()`, // default value
  className: "custom-editor", //classname for the editor
  onChange: (code) => {
    // On code change
  },
  highlight: (
    code // specify a highligher
  ) => Prism.highlight(code, Prism.languages.js, "javascript"),
});
```
npm package: @im_cjh/mz-ui
Description: A react library developed with dumi
Latest version: 0.0.2

# antd

[![NPM version](https://img.shields.io/npm/v/antd.svg?style=flat)](https://npmjs.org/package/antd)
[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat)](https://npmjs.org/package/antd)

A react library developed with dumi

## Usage

TODO

## Options

TODO

## Development

```bash
# install dependencies
$ npm install

# develop library by docs demo
$ npm start

# build library source code
$ npm run build

# build library source code in watch mode
$ npm run build:watch

# build docs
$ npm run docs:build

# Locally preview the production build.
$ npm run docs:preview

# check your project for potential problems
$ npm run doctor
```

## LICENSE

MIT
npm package: @ima-worldhealth/coral
Description: PDF renderer based on puppeteer than inlines assets
Author: jniles
Latest version: 4.3.0

Coral
======

A PDF rendering engine based on puppeteer for IMA World Health projects, with automatic inlining
of assets and sensible defaults.

### Usage
```js
const render = require('@ima-worldhealth/coral');

async function toPdf(html) {
  const rendered = await render(html);
  return rendered;
}
```

### License
[MIT](./LICENSE)
npm package: @ima-worldhealth/odk-central-api
Description: ODK Central API ------
Author: Jonathan Niles
Latest version: 1.3.0

ODK Central API
------

This repository contains a NodeJS wrapper for the [ODK Central API](https://odkcentral.docs.apiary.io/).  It is an
[ECMAScript module](https://nodejs.org/api/esm.html) and requires a NodeJS version that supports ESM.

#### Download
```
yarn add @ima-worldhealth/odk-central-api
```


#### Usage
By default, the module uses three environmental variables defined in the `.env.sample` file.  When using this module,
ensure those environmental variables are set using something like [`dotenv`](https://www.npmjs.com/package/dotenv).

```js
import { api, auth } from '@ima-worldhealth/odk-central-api';

(async () => {
  const projects = await api.getProjects();
	console.log(projects);  // => [{ /* projects.. */ }]
});
```

This library is MIT licensed.  It is used for IMA World Health's internal projects.  Feel free to fork, copy, and adapt
as needed.  Issues and Pull Requests are welcome!
npm package: @ima-worldhealth/odk-central-api-cjs
Description: ``` yarn add @ima-worldhealth/odk-central-api ```
Author: Jonathan Niles
Latest version: 2.4.0

ODK Central API
------

This repository contains a NodeJS wrapper for the [ODK Central API](https://odkcentral.docs.apiary.io/).  It is an
[ECMAScript module](https://nodejs.org/api/esm.html) and requires a NodeJS version that supports ESM.

#### Download
```
yarn add @ima-worldhealth/odk-central-api
```


#### Usage
By default, the module uses three environmental variables defined in the `.env.sample` file.  When using this module,
ensure those environmental variables are set using something like [`dotenv`](https://www.npmjs.com/package/dotenv).

```js
import { api, auth } from '@ima-worldhealth/odk-central-api';

(async () => {
  const projects = await api.getProjects();
	console.log(projects);  // => [{ /* projects.. */ }]
});
```

This library is MIT licensed.  It is used for IMA World Health's internal projects.  Feel free to fork, copy, and adapt
as needed.  Issues and Pull Requests are welcome!
npm package: @ima-worldhealth/sunfish
Description: A webapp for configuring DHIS2 email reports
Author: jniles
Latest version: 4.4.0

Sunfish
-------

Sunfish is an application to screenshot DHIS2 dashboards into PDFs and email them to members of user groups
on a set schedule.

This application is used internally at IMA World Health to deliver monthly dashboards to users of DHIS2 in
various programs.

How It Works
------------

Sunfish relies on three other projects of IMA World Health:
 1. [dhis2-api](https://github.com/IMA-WorldHealth/dhis2-api)
 2. [dhis2-crawler](https://github.com/IMA-WorldHealth/dhis2-crawler)
 3. [coral](https://github.com/IMA-WorldHealth/coral)


In brief, dhis2-api is a nodejs abstraction for the DHIS2 Web API, and provides authentication for
users and downloads lists of dashboards, user groups, and users.  dhis2-crawler is a [puppeteer](https://www.npmjs.com/package/puppeteer) 
wrapper for logging into and accessing DHIS2 dashbaords.  coral is a rendering engine also using
puppeteer to turn HTML templates into PDFs before emailing them.

Authentication is managed by DHIS2 - if a user has an account with DHIS2, they automatically have an account
with Sunfish.  Sunfish forwards on their username/password to DHIS2 for authentication.

A user sets up a schedule by specifying an email to deliver (subject and body), a user group to send it to, and
a frequency (daily, weekly, monthly).  The frequency is represented in standard unix cron syntax.  Schedules are
_not_ namespaced, so all users see all schedules and can manipulate them.

Schedules are stored in SQLite3 database for portability and use [cron-scheduler](https://npmjs.com/package/cron-scheduler)
to manage when they are run.

When a schedule is run, the following events take place:
 1. The schedule is loaded from the database.
 2. The dhis2-crawler spins up a headless browser and logs into DHIS2
 3. The dhi2-crawler navigates to each dashboard specified in the schedule using the dashboard id.  DHIS2 embeds these in the
 DOM, so it is able to navigate to these dashboards using CSS selectors.
 4. The dashboards are downloaded by converting each graph or table into a PNG Data URI.
 5. The DHIS2 API is queried to find out what users are in the user group specified.  Their email addresses are retrieved.
 6. Using coral, the dashboards are templated into an HTML template and converted into PDFs.  Each dashboard is 
 a separate PDF.
 7. The PDFs are added as attachments to the email message.
 8. MailGun sends the email to all addresses as a BCC list.
 9. Everything is shut down and cleaned up.


### LICENSE
[MIT](./LICENSE)
npm package: @ima-worldhealth/topic
Description: Emit events across multiple processes via Redis
Author: jniles
Latest version: 1.0.1

# Topic.js

[![Build Status](https://travis-ci.org/IMA-WorldHealth/topic.svg?branch=master)](https://travis-ci.org/IMA-WorldHealth/topic)
[![Coverage Status](https://coveralls.io/repos/github/IMA-WorldHealth/topic/badge.svg?branch=master)](https://coveralls.io/github/IMA-WorldHealth/topic?branch=master)

A wrapper for Pub/Sub across cores and servers via Redis and NodeJS.
npm package: @ima/cli
Description: IMA.js CLI tool to build, develop and work with IMA.js applications.
Author: Jan Šimeček
Latest version: 20.0.2

<p align="center">
  <img height="130" src="https://imajs.io/img/logo.svg" />
</p>

<h1 align="center">@ima/cli</h1>
<p align="center"><i><code>@ima/cli</code> takes care of building and running the IMA.js application in dev (watch) mode.</i></p>

---

Small CLI wrapper around webpack used to build and watch IMA.js applications during development. It takes care of generating webpack configurations and running webpack based on passed arguments and ima config.

It also leverages the `@ima/hmr-client` and `@ima/error-overlay` in dev environment to provide better developer experience.

For more information on how to customize ima apps though `ima.config.js` or how to use the CLI and define custom CLI plugins, [take a look at the documentation](https://imajs.io).

## Installation

```
npm install @ima/cli --save-dev
```

## Usage

```
npx ima dev
npx ima build
npx ima --help
```

---

This package is part of the IMA.js application stack, see [imajs.io](https://imajs.io/) for more info about the whole project.
npm package: @ima/cli-plugin-analyze
Description: Plugin for @ima/cli adding analyze bundle functionality.
Author: Jan Šimeček
Latest version: 3.0.0

# @ima/cli-plugin-analyze

Pre-configures [bundle-stats-webpack-plugin](https://npmjs.com/package/bundle-stats-webpack-plugin) and [webpack-bundle-analyzer](https://npmjs.com/package/webpack-bundle-analyzer) webpack plugins for fast and easy bundle analyzing.

## Installation

```bash npm2yarn
npm install @ima/cli-plugin-analyze -D
```

## Usage

```js title=./ima.config.js
const { AnalyzePlugin } = require('@ima/cli-plugin-analyze');

/**
 * @type import('@ima/cli').ImaConfig
 */
module.exports = {
  plugins: [new AnalyzePlugin()],
};
```

## CLI Arguments

### --analyze

> `client | client.es | server`

Run the ima build command with `--analyze` argument and pick one of the three produced bundles you want to analyze. For example: `npx ima build --analyze=client`.

## Options

```ts
new AnalyzePlugin(options: {
  open?: boolean;
  bundleStatsOptions?: BundleStatsWebpackPlugin.Options;
  bundleAnalyzerOptions?: BundleAnalyzerPlugin.Options;
});
```

### open

> `boolean = true`

Set to false if you don't want to automatically open the browser window with the html reports when the build finishes.

### bundleStatsOptions

> `object`

Pass any option that the `BundleStatsWebpackPlugin` accepts. These are then merged with some of our custom defaults.

### bundleAnalyzerOptions

> `object`

Pass any option that the `BundleAnalyzerPlugin` accepts. These are then merged with some of our custom defaults.

---

For more information, take a look at the [IMA.js documentation](https://imajs.io/cli/plugins/analyze-plugin).
npm package: @ima/cli-plugin-legacy-css
Description: Plugin for @ima/cli adding additional legacy CSS bundle output.
Author: Jan Šimeček
Latest version: 2.0.0

# @ima/cli-plugin-legacy-css

Adds ability to built another CSS bundle with `client` bundle with different `postcss-present-env` configuration. This allows you to build 2 bundles with different amount of CSS polyfillying (which results in larger file size) and serve the best version to targetted browser.

## Installation

```bash
npm install @ima/cli-plugin-legacy-css -D
```

## Usage

```js title=./ima.config.js
const { LegacyCSSPlugin } = require('@ima/cli-plugin-legacy-css');

/**
 * @type import('@ima/cli').ImaConfig
 */
module.exports = {
  plugins: [new LegacyCSSPlugin({
    /**
     * Browserslist configuration string for postcss-preset-env for legacy CSS.
     */
    cssBrowsersTarget: '>0.3%, not dead, not op_mini all',

    /**
     * Equivalent to postcss function but for legacy css,
     * when enabled with enableLegacyCss option. [optional]
     */
    postcss: (config) => config,
  })],
};
```

### Server hook

You need to define your own detector for the server hook. It accepts callback function which should return true for legacy CSS to be served.

```js title=./server/app.js
const { createIMAServer } = require('@ima/server');
const { createLegacyCssHook } = require('@ima/cli-plugin-legacy-css/server');

const imaServer = createIMAServer();
createLegacyCssHook((event) => {
  /**
   * You have access to server event object here, so you can do detection based
   * on multiple things. We recommend using new `Sec-CH-UA` headers. Return true
   * to server legacy CSS, otherwise return false.
   */
  return true;
}, imaServer);
```

### Dev testing
When running the application in development don't forget to run it with `--writeToDisk` and `--legacy` options.
npm package: @ima/core
Description: IMA.js framework for isomorphic javascript application
Author: Miroslav Jancarik
Latest version: 20.0.2

# @ima/core

[![Build Status](https://travis-ci.org/seznam/ima.svg?branch=master)](https://travis-ci.org/seznam/ima) [![dependencies Status](https://david-dm.org/seznam/ima/status.svg)](https://david-dm.org/seznam/ima)
[![Known Vulnerabilities](https://snyk.io/test/npm/ima/badge.svg)](https://snyk.io/test/npm/ima)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

This is the ima library of the IMA.js application stack, see [imajs.io](https://imajs.io/) for more info about the whole project.
npm package: @ima/dev-utils
Description: IMA.js dev utils used used mainly in @ima/cli and other dev-related utilities.
Author: Jan Šimeček
Latest version: 20.0.0

<p align="center">
  <img height="130" src="https://imajs.io/img/logo.svg" />
</p>

<h1 align="center">@ima/dev-utils</h1>
<p align="center"><i>Used to share common methods and utils used across other dev packages (@ima/cli, @ima/error-overlay, etc.).</i></p>

---

Currently it mainly contains methods for compile and runtime error parsing which are used in multiple other packages.

There's intentionally no "main" export or index file and each utils file has to be imported with it's direct path. This is because some packages are used on client only while others may contain some nodejs specific syntax.

This means that you need to import each utility as:
```javascript
import { extractSourceMappingUrl } from '@ima/dev-utils/sourceMapUtils';
import { FragmentLine } from '@ima/dev-utils/sourceFragment';
import { parseCompileError } from '@ima/dev-utils/compileErrorParser';
// ...
```


## Contents
- `compileErrorParser` - used to parse compile errors from currently used loaders.
- `cliUtils` - utilities for CLI error formatting.
- `helpers` - general regexps and other helpers.
- `sourceFragment` - utility to create source fragment object containing X number of lines of code around highlighted line from provided source.
- `sourceMapUtils` - utils to extract source map URL from file contents.

---

This package is part of the IMA.js application stack, see [imajs.io](https://imajs.io/) for more info about the whole project.
npm package: @ima/error-overlay
Description: IMA.js error-overlay used in development mode for error reporting.
Author: Jan Šimeček
Latest version: 20.0.0

<p align="center">
  <img height="130" src="https://imajs.io/img/logo.svg">
</p>

<h1 align="center">@ima/error-overlay</h1>
  <p align="center"><i>Simple web component which provides UI around runtime and compile errors emitted through <code>@ima/hmr-client</code> event emitter.</i>
</p>

---

It is used on server (injected in **server** error-view ejs template) and **client**. The `@ima/hmr-client` package takes care of the initialization of the web component on the client side.

## Description

The error overlay **tries to parse received errors** with the aid of utilities from `@ima/dev-utils` using available source maps and show original file contents snippet in order to aid with faster and simpler debugging when error occurs. When no source maps are available, the overlay at least falls back to the compiled sources.

There are currently only 2 types of error the overlay shows `runtime` and `compile`. Compile errors occur when webpack compilation fails, while runtime errors are caused by an error in the application itself.

## Usage:
Inject `overlay.js` script into the application (available in dist directory) and create web component element:
```html
<ima-error-overlay public-url="http://localhost:3101" server-error="" />
```
The component accepts 2 arguments:
- `public-url` - url of the `@ima/cli` dev server. The error overlay uses API of this dev server to download static files, their source maps and handle file opening in editor. Without this attribute the error-overlay functionality is very limited.
- `server-error` **(optional)** - JSON stringified error object. This is used to send an error data to the overlay on server-side in the error-view.

The web component injects it's **styles** into the `shadowDOM` in order to eliminate any possible conflicts with the application styles.

---

This package is part of the IMA.js application stack, see [imajs.io](https://imajs.io/) for more info about the whole project.
npm package: @ima/gulp-task-loader
Description: Automatic gulp task loader for IMA.js applications.
Author: Seznam.cz, a.s.
Latest version: 18.0.0-rc.0

# @ima/gulp-task-loader

[![Build Status](https://travis-ci.org/seznam/ima.svg?branch=master)](https://travis-ci.org/seznam/ima) [![dependencies Status](https://david-dm.org/seznam/ima/status.svg)](https://david-dm.org/seznam/ima)
[![Known Vulnerabilities](https://snyk.io/test/npm/ima/badge.svg)](https://snyk.io/test/npm/ima)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

This repository houses the build tasks loader for IMA.js applications, see [imajs.io](https://imajs.io/) for more info about the whole project.
npm package: @ima/helpers
Description: Various helpers for the IMA.js framework.
Author: Miroslav Jancarik
Latest version: 20.0.0

# @ima/helpers

[![Build Status](https://travis-ci.org/seznam/ima.svg?branch=master)](https://travis-ci.org/seznam/ima) [![dependencies Status](https://david-dm.org/seznam/ima/status.svg)](https://david-dm.org/seznam/ima)
[![Known Vulnerabilities](https://snyk.io/test/npm/ima/badge.svg)](https://snyk.io/test/npm/ima)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

This repository contains various helpers for the IMA.js framework, see [imajs.io](https://imajs.io/) for more info about the whole project.
npm package: @ima/plugin-analytic
Description: Seznam IMA.js abstract analytic plugin
Author: Miroslav Jancarik
Latest version: 7.0.0

# @ima/plugin-analytic

This is the abstract analytic plugin for the IMA.js application.
You can visit our site [imajs.io](https://imajs.io).

## Installation

```bash
npm install @ima/plugin-analytic --save
```

```javascript
// /app/build.js

var vendors = {
	common: [
		'@ima/plugin-analytic'
	]
};

/*
Now is the analytic plugin available as:

import { events as AnalyticEvents, AbstractAnalytic } from '@ima/plugin-analytic';
*/

```

## Implementing analytics in v2.0

The createGlobalDefinition method is renamed to _createGlobalDefinition and set as protected. LOAD event is fired only once.

## Implementing analytics in v1.0

Since version 1.0 all analytics implement deferred loading of analytic scripts. Initialization was splitted into 2 methods.

- `init()` - initializes global variables that mock analytic before it's loaded. This method should be called as soon as possible in your loading sequace.
  - optionally takes `initConfig` object with these settings:
    - `initConfig.purposeConsents` sets user's consents in format `{ '1': true, '2': false }`, see: https://iabeurope.eu/iab-europe-transparency-consent-framework-policies/#A_Purposes
- `load()` - actually loads the analytic script and executes every hit that has been made until this method call. This method should be called at the end of your loading sequence.
npm package: @ima/plugin-analytic-fb-pixel
Description: Seznam IMA.js analytic plugin for Facebook Pixel
Author: Vojtěch Šimko
Latest version: 8.0.0

# @ima/plugin-analytic-fb-pixel

This is the Facebook Pixel analytic plugin for the IMA.js application. You can visit our site <https://imajs.io>.

## Installation

```javascript

npm install @ima/plugin-analytic-fb-pixel @ima/plugin-script-loader --save

```

```javascript
// /app/build.js

var vendors = {
	common: [
		'@ima/plugin-analytic-fb-pixel',
		'@ima/plugin-analytic',
		'@ima/plugin-script-loader'
	]
};

/*
Now is FB Pixel analytic plugin available from:

import { FacebookPixelAnalytic, defaultDependencies } from '@ima/plugin-analytic-fb-pixel';
*/

```

```javascript
// /app/config/settings.js

prod: {
	$Http: { ... },
	$Cache: { ... },
	$Page:{ ... },
	plugin : {
		analytic: {
			fbPixel: {
				id: 'XXX'
			}
		}
	}
}
```

```javascript
// /app/config/services.js
import { FacebookPixelAnalytic } from '@ima/plugin-analytic-fb-pixel'
import { RouterEvents } from '@ima/core';

var $window = oc.get('$Window');
var $dispatcher = oc.get('$Dispatcher');
var fbPixelAnalytic = oc.get(FacebookPixelAnalytic);


if ($window.isClient()) {

	// initialize analytic
	fbPixelAnalytic.init();

	//set hit page view to analytic
	$dispatcher.listen(RouterEvents.AFTER_HANDLE_ROUTE, (pageData) => {

		if (pageData &&
				pageData.response &&
				(pageData.response.status >= 200 &&
				pageData.response.status < 300)) {

			fbPixelAnalytic.hitPageView(pageData);
		}
	});
}
```

## Version 1.0 notice

Since version 1.0 you need to additionally call a `load()` method. The later you call this method the better.
If you don't have a specific point in your app where you know that the page has finished loading you can call the `load()` method immediatelly after `init()` method

```javascript
if ($window.isClient()) {

	// insert analytic script to page and initialization analytic
	fbPixelAnalytic.init();
	fbPixelAnalytic.load();

	// ...
```

## Dependencies
If you are looking more details, you should
follow this links:
[https://github.com/seznam/IMA.js-plugins/tree/master/packages/plugin-analytic](https://github.com/seznam/IMA.js-plugins/tree/master/packages/plugin-analytic,
[https://github.com/seznam/IMA.js-plugins/tree/master/packages/plugin-script-loader](https://github.com/seznam/IMA.js-plugins/tree/master/packages/plugin-script-loader)
npm package: @ima/plugin-atoms
Description: IMA.js UI React atoms
Author: Miroslav Jancarik
Latest version: 11.0.0

# @ima/plugin-atoms

The [IMA](https://imajs.io) UI atoms are elementary UI components based on
the [Pattern Lab](http://patternlab.io/) design pattern for creating atomic design
systems.

This package provides various most commonly needed atoms, but both their functionality and
their number are likely to be extended in the future.

The Image, Iframe and others atoms provide the lazy loading functionality by default.

## Installation

```javascript

npm install @ima/plugin-atoms --save

```

## Usage

```javascript

import { H1, H2, H3, Iframe, Image, Link, Loader, Paragraph, LAYOUT } from '@ima/plugin-atoms';

function MyComponent({title, subtitle, image, embed, text, html, link}) {
  return (
    <>
      <H1>{title}</H1>
      <H2>{subtitle}</H2>
      <div>
        <Paragraph>{text}</Paragraph>
        <Paragraph html={html}/>
        <Link href={lnk.href}>More</Link>
      </div>
      <H3>Examples:<H3>
      <Image src={image.source} width={400} height={300} layout={LAYOUT.RESPONSIVE}/>
      <Iframe src={embed.source} width={300} height={300} layout={LAYOUT.RESPONSIVE}/>
    </>
  )
}
```
npm package: @ima/plugin-local-storage
Description: Seznam IMA.js local-storage plugin
Author: Miroslav Jancarik
Latest version: 5.0.0

# @ima/plugin-local-storage

This is the local-storage plugin for the IMA.js application.
You can visit our site [imajs.io](https://imajs.io).

## Installation

```bash
npm install @ima/plugin-local-storage --save
```

```javascript
// /app/build.js

var vendors = {
	common: [
        '@ima/plugin-local-storage'
	]
};
```
```javascript
// /app/config/bind.js

import { LocalStorage } from '@ima/plugin-local-storage';

oc.bind('LocalStorage', LocalStorage);
```
```javascript
// /app/config/service.js

const localStorage = oc.get('LocalStorage');

if ($window.isClient()) {
	...
	// initializes local storage
	localStorage.init();
	...
}
```

## Usage

The localStorage class extends [ima storage interface](https://github.com/seznam/IMA.js-core/blob/master/storage/Storage.js). You can easy use common storage methods like [has](https://github.com/seznam/IMA.js-core/blob/master/storage/Storage.js#L28), [get](https://github.com/seznam/IMA.js-core/blob/master/storage/Storage.js#L40), [set](https://github.com/seznam/IMA.js-core/blob/master/storage/Storage.js#L50), [delete](https://github.com/seznam/IMA.js-core/blob/master/storage/Storage.js#L58), [clear](https://github.com/seznam/IMA.js-core/blob/master/storage/Storage.js#L65), etc.

```javascript
const exist = localStorage.has('key');

if (!exist) {
  localStorage.set('key', { some: 'value' }, { expired: 24 * 60 * 60 });
}

const value = localStorage.get('key');
// some logic
localStorage.delete('key');
```
npm package: @ima/plugin-logger
Description: Seznam IMA.js logger plugin
Author: Ondrej Base
Latest version: 7.0.0

# @ima/plugin-logger

A logging tool for [IMA.js](https://imajs.io/) framework.

## Installation

```javascript

npm install @ima/plugin-logger --save

```

```javascript
// /app/build.js

var vendors = {
    common: [
		'@ima/plugin-logger'
    ]
};

/*
import {
	...
} from '@ima/plugin-logger';
*/
```

## Functions

- `configureLogger(option)`: It configures the plugin. The parameter `options`
  must be an `object` with some plugin's [options](#options) as properties.
- `beSilent()`: It sets [`silentMode` option](#silentmode) to `true`.
- `isSilent()`: Returns [`silentMode` option](#silentmode)'s value.
- `debug(message)`: Outputs a debug message.
- `error(message)`: Outputs an error message.
- `info(message)`: Outputs an informational message.
- `log(message)`: Outputs a message.
- `warn(message)`: Outputs a warning message.
- `debugIf(message)`: Outputs a debug message if a condition is met.
- `errorIf(message)`: Outputs an error message if a condition is met.
- `infoIf(message)`: Outputs an informational message if a condition is met.
- `logIf(message)`: Outputs a message if a condition is met.
- `warnIf(message)`: Outputs a warning message if a condition is met.
- `throwIf(condition, expression)`: Throws a user-defined exception if a
  condition is met.
- `rejectIf(condition, reason)`: Returns a rejected promise if a condition is
  met.

## Options

### `silentMode`

`boolean`, defaults to `false`

If it's set to `false`, the plugin outputs messages. If it's set to `true`,
the plugin doesn't output anything.
npm package: @ima/plugin-merkur
Description: The Plugin merkur
Author: Miroslav Jancarik
Latest version: 5.0.0

# @ima/plugin-merkur

The [@ima/plugin-merkur](https://gitlab.seznam.net/IMA.js/ima-plugins/tree/master/packages/plugin-merkur) is for easy integration [merkur](https://merkur.js.org/) widget to [ima](https://imajs.io) application.

## Instalace

```javascript
npm install @ima/plugin-merkur --save
```

```javascript
// /app/build.js

var vendors = {
    common: [
      '@ima/plugin-merkur'
    ]
};
```

## Usage

```javascript
// /app/page/home/HomeController
import { AbstractController } from '@ima/core';
import { MerkurResource } from '@ima/plugin-merkur';

class HomeController extends AbstractController {
  /** @type {import('@ima/core').Dependencies} */
  static get $dependencies() {
    return [MerkurResource];
  }

  constructor(merkurResource) {
    super();

    this._merkurResource = merkurResource;
  }

  load() {
    const data = {
      containerSelector: '.widget__container',
      // When using merkur slot
      slot: {
        headline: {
          containerSelector: '.widget__headline-slot'
        }
      }
    };

    const widgetProperties = this._merkurResource
      .get('http://localhost:4444/widget', data)
      .then((response) => response.body);


    return {
      widgetProperties
    }
  }
}

// /app/page/home/HomeView
import React from 'react';
import { MerkurWidget } from '@merkur/integration-react';

class HomeView extends React.Component {
  render() {
    const { widgetProperties } = this.props;

    return (
      <div>
        <MerkurWidget widgetProperties={widgetProperties}>
          <div>Loading phrase</div>
        </MerkurWidget>
      </div>
    );
  }
}

```
npm package: @ima/plugin-resource-loader
Description: Seznam IMA.js plugin for loading web resources
Author: Miroslav Jancarik
Latest version: 4.0.0

# @ima/plugin-resource-loader

This is the base plugin for loading scripts and styles for the IMA.js application.
You can find the IMA.js skeleton application at <https://github.com/seznam/IMA.js-skeleton>
or follow link <https://imajs.io>.

## Installation

```javascript

npm install @ima/plugin-resource-loader --save

```

```javascript
// /app/build.js

var vendors = {
	common: [
		'@ima/plugin-resource-loader'
	]
};

/*
Now is script loader plugin available as:

import { ResourceLoader } from '@ima/plugin-resource-loader';
*/

```
npm package: @ima/plugin-script-loader
Description: Seznam IMA.js plugin for loading script
Author: Miroslav Jancarik
Latest version: 5.0.0

# @ima/plugin-script-loader

This is the plugin for loading 3rd party scripts for the IMA.js application.
You can visit our site <https://imajs.io>.

## Installation

```javascript

npm install @ima/plugin-script-loader --save

```

```javascript
// /app/build.js

var vendors = {
	common: [
		'@ima/plugin-script-loader'
	]
};

/*
Now is script loader plugin available as:

import { ScriptLoaderPlugin, Events, defaultDependencies } from '@ima/plugin-script-loader';
*/

```

## Usage

### Basic Usage

```javascript
import Dispatcher from 'ima/event/Dispatcher';
import { ScriptLoader, Events as ScriptLoaderEvents, ScriptLoaderOptions } from '@ima/plugin-script-loader';

oc
	.get(ScriptLoader)
	.load('//www.example.com/script.js')
	.then((result) => {
		console.log('Script is loaded.', result.url);
	})
	.catch((error) => {
		console.log('Script failed to load.', error);
	});

oc
	.get(Dispatcher)
	.listen(ScriptLoaderEvents.LOADED, (result) => {
		if (result.error) {
			console.log('Script is not loaded.', result.url);
		} else {
			console.log('Script is loaded.', result.url);
		}
	});

```

### Loading ES Modules

```javascript
import { ScriptLoader } from '@ima/plugin-script-loader';

// Load ES module with type="module"
oc
	.get(ScriptLoader)
	.load('//www.example.com/module.js', null, false, { module: true })
	.then((result) => {
		console.log('ES module is loaded.', result.url);
	});
```

### Advanced Configuration

```javascript
import { ScriptLoader } from '@ima/plugin-script-loader';

// Load script with custom attributes
oc
	.get(ScriptLoader)
	.load('//www.example.com/script.js', null, false, {
		module: true,  // Load as ES module
		async: false,  // Disable async loading
		attributes: {
			'crossorigin': 'anonymous',
			'data-version': '1.0.0'
		}
	});
```

### Configuration Options

The `load` method accepts an optional `options` parameter of type `ScriptLoaderOptions`:

- `module?: boolean` - Set to `true` to load the script as an ES module with `type="module"`
- `async?: boolean` - Set to `false` to disable async loading (default: `true`)
- `attributes?: Record<string, string>` - Custom attributes to set on the script element
npm package: @ima/plugin-self-xss
Description: The plugin is trying to mitigate Self-XSS security attack by sending simple message into console
Author: Miroslav Jancarik
Latest version: 5.0.0

# @ima/plugin-self-xss

The [IMA](https://imajs.io) plugin is trying to mitigate Self-XSS security attack by sending simple
 message into console.

## Installation

```console
npm install @ima/plugin-self-xss --save
```

Add language paths to `ima.config.js` using the `languages` config settings. Follwing settings should cover all `@ima/` plugins:

```javascript
// ./ima.config.js
module.exports = {
  languages: {
    cs: [
      './node_modules/@ima/**/*CS.json',
      './app/**/*CS.json',
    ],
    en: [
      './node_modules/@ima/**/*EN.json',
      './app/**/*EN.json',
    ],
  },
};

```

```js
// ./app/config/services.js
import { SelfXSS } from '@ima/plugin-self-xss';

export default (ns, oc, config) => {
	// ...
	oc.get(SelfXSS).init();
};

```
npm package: @ima/plugin-style-loader
Description: Seznam IMA.js plugin for loading style
Author: Ondrej Base
Latest version: 5.0.0

# @ima/plugin-style-loader

This is the plugin for loading 3rd party styles for the IMA.js application.
You can visit our site <https://imajs.io>.

## Installation

```javascript

npm install @ima/plugin-style-loader --save

```

```javascript
// /app/build.js

var vendors = {
	common: [
		'@ima/plugin-style-loader'
	]
};

/*
Now is script loader plugin available as:

import { StyleLoaderPlugin, events, defaultDependencies } from '@ima/plugin-style-loader';
*/

```

## Usage

```javascript
import { Dispatcher } from '@ima/core';
import { StyleLoaderPlugin, events as StyleLoaderEvents } from '@ima/plugin-style-loader';

oc
	.get(StyleLoaderPlugin)
	.load('//www.example.com/style.css')
	.then((result) => {
		console.log('Style is loaded.', result.url);
	})
	.catch((error) => {
		console.log('Style failed to load.', error);
	});

oc
	.get(Dispatcher)
	.listen(StyleLoaderEvents.LOADED, (result) => {
		if (result.error) {
			console.log('Style is not loaded.', result.url);
		} else {
			console.log('Style is loaded.', result.url);
		}
	});

```
npm package: @ima/plugin-useragent
Description: Seznam IMA.js plugin user-agent
Author: Martin Urban
Latest version: 7.0.0

# @ima/plugin-useragent

## Installation

```javascript

npm install @ima/plugin-useragent --save

```

```javascript
// /app/build.js

var vendors = {
    common: [
        '@ima/plugin-useragent'
    ]
};

/*
Now is plugin UserAgent available from:

ns.ima.plugin.userAgent.PlatformJS;
ns.ima.plugin.userAgent.ClientUserAgent;
ns.ima.plugin.userAgent.ServerUserAgent;
ns.ima.plugin.userAgent.UserAgent;

import { PlatformJS, ClientUserAgent, ServerUserAgent, UserAgent } from '@ima/plugin-useragent';
*/

```

```javascript
// /app/config/bind.js
import { UserAgent } from '@ima/plugin-useragent';

oc.bind('UserAgent', UserAgent);

```

##Usage

```javascript
// /app/config/bind.js
oc.bind('Foo', ns.App.Foo, ['UserAgent']);

```

```javascript
// /app/foo.js
class Foo {
	constructor(userAgent) {
		...
		var os = userAgent.getOSFamily();

		var browser = userAgent.getName();

		var version = userAgent.getVersion();
		if (version !== 'unknown' ) {
			browser += version;
		}

		var os = userAgent.getOSFamily();
		...
	}
}
```
npm package: @ima/react-page-renderer
Description: IMA.js React page renderer.
Author: Matěj Marčišovský
Latest version: 20.0.1

# @ima/react-page-renderer

Adds support for rendering pages with React for IMA@18 and higher. For legacy IMA@17 use page renderers included in core package.

## Installation

```bash npm2yarn
npm install @ima/react-page-renderer
```

## Usage

### app/config/bind.js
```javascript
import {
  defaultCssClasses as cssClassNameProcessor,
  PageRendererFactory,
  ServerPageRenderer,
} from '@ima/react-page-renderer';
import { ClientPageRenderer } from '@ima/react-page-renderer/renderer/ClientPageRenderer';

export default (ns, oc, config) => {
  oc.bind('$CssClasses', function () {
    return cssClassNameProcessor;
  });

  oc.get(ComponentUtils).register({
    $CssClasses: '$CssClasses',
  });

  oc.inject(PageRendererFactory, [ComponentUtils]);
  oc.bind('$PageRendererFactory', PageRendererFactory);

  if (oc.get(Window).isClient()) {
    oc.provide(PageRenderer, ClientPageRenderer, [
      PageRendererFactory,
      '$Helper',
      '$Dispatcher',
      '$Settings',
      Window,
    ]);
  } else {
    oc.provide(PageRenderer, ServerPageRenderer, [
      PageRendererFactory,
      '$Helper',
      '$Dispatcher',
      '$Settings',
      Cache,
    ]);
  }
  oc.bind('$PageRenderer', PageRenderer);
};
```

If your app is using legacy React@17, use legacy client page renderer instead of the default one.
```javascript
import { ClientPageRenderer } from '@ima/react-page-renderer/renderer/LegacyClientPageRenderer';
```

### app/config/settings.js
```javascript
import DocumentView from 'app/document/DocumentView';

export default (ns, oc, config) => {
  return {
    prod: {
      $Page: {
        $Render: {
          documentView: DocumentView,
          masterElementId: 'page',
        },
      },
    },
  };
};
```

### server/app.js
```javascript
// You should already have this line in your file
const imaServer = require('@ima/server')();

require('@ima/react-page-renderer/hook/server')(imaServer);
```

### Components
```javascript
import { AbstractComponent, AbstractPureComponent } from '@ima/react-page-renderer';

export default class MyComponent extends AbstractComponent {}
```
npm package: @ima/server
Description: Default dev server for IMA.js applications.
Author: Seznam.cz, a.s.
Latest version: 20.0.5

# @ima/server

[![Build Status](https://travis-ci.org/seznam/ima.svg?branch=master)](https://travis-ci.org/seznam/ima) [![dependencies Status](https://david-dm.org/seznam/ima/status.svg)](https://david-dm.org/seznam/ima)
[![Known Vulnerabilities](https://snyk.io/test/npm/ima/badge.svg)](https://snyk.io/test/npm/ima)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

This repository houses the default development server for IMA.js applications, see [imajs.io](https://imajs.io/) for more info about the whole project.
npm package: @imacdonald/esbuild-plugin-svgr
Description: A fork of esbuild-plugin-svgr, a plugin for esbuild that enables importing *.svg files as React components.
Author: Kazi Jawad
Latest version: 2.2.1

# esbuild-plugin-svgr

A plugin for [esbuild](https://github.com/evanw/esbuild) that adds support for `*.svg` file imports as React components. This is a fork of [kazijawad/esbuild-plugin-svgr](https://github.com/kazijawad/esbuild-plugin-svgr) that updates the dependencies to support esbuild ^0.20.0. The plugin is built on top of [SVGR](https://github.com/gregberge/svgr).

## Installation

The plugin can be installed using [npm](https://www.npmjs.com).

```bash
npm i -D @imacdonald/esbuild-plugin-svgr
```

## Basic Usage

Please reference the [example](example/) directory for basic usage.

## Author

This fork is maintained by [Ian MacDonald](https://github.com/immacdonald). Originally by [Kazi Jawad](https://github.com/kazijawad).

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.