open-index/open-npm huggingface dataset:
npm package: @ice/screenshot
Description: Take a screenshot of web page
Author: ICE Team
Latest version: 0.1.9

# @ice/screenshot

Take a screenshot of a web page in the terminal.

Options:

```
-V, --version                output the version number
-u, --url <url>              The target url or path to local server
-l, --local [local]          Set up a local server in [local] directory and take screenshot, defaults set up in `./`
-s, --selector <selector>    Select a element through CSS selector
-o, --output <output>        Output path
-h, --help                   output usage information
```

## Usage

Install:

```bash
$ npm i -g @ice/screenshot
```

For ICE materials, you can take screenshot use following commands:

```bash
# for scaffold
$ npm run build && screenshot -l

# for block
$ npm run build && screenshot -l -s \#mountNode
```

Others:

```bash
# take a screenshot of taobao.com
$ screenshot -u https://www.taobao.com

# take screenshot of a element
$ screenshot -u https://www.taobao.com -s .service.J_Service

# take screenshot export to ~/taobao.jpg
$ screenshot -u https://www.taobao.com -o ~/taboa.jpg

# Set up local server in current working directory and take screenshot of http://localhost:8100/public/index.html
# By default, this will run the contents of current directory on a local server, the URL is http://localhost:8100
$ screenshot -u /public/index.html -l

# Set up local server in ./public directory and take screenshot of http://localhost:8100/index.html
# By default, this will run the contents of `public/` directory on a local server, the URL is http://localhost:8100
$ screenshot -u /index.html -l ./public
```

## Puppeteer

The CLI based on [Puppeteer](https://github.com/GoogleChrome/puppeteer). But we don't want to depend on puppeteer locally, because puppeteer takes a long to install, it's easy to install failed. So we will find puppeteer in the local node_modules, if not found, find in the global node_modules, if still not found, we will install it globally, and you don't need to install it again next time.
npm package: @ice/stark-app
Description: icestark-app is a JavaScript library for icestark, used by sub-application.
Latest version: 1.5.0

# icestark-app

> icestark micro-frontends solution, APIs used by sub-application. [icestark docs](https://ice-lab.github.io/icestark/).

[![NPM version](https://img.shields.io/npm/v/@ice/stark-app.svg?style=flat)](https://npmjs.org/package/@ice/stark-app) [![Package Quality](https://npm.packagequality.com/shield/@ice%2Fstark-app.svg)](https://packagequality.com/#?package=@ice%2Fstark-app) [![build status](https://img.shields.io/travis/ice-lab/icestark.svg?style=flat-square)](https://travis-ci.org/ice-lab/icestark) [![Test coverage](https://img.shields.io/codecov/c/github/ice-lab/icestark.svg?style=flat-square)](https://codecov.io/gh/ice-lab/icestark) [![NPM downloads](http://img.shields.io/npm/dm/@ice/stark-app.svg?style=flat)](https://npmjs.org/package/@ice/stark-app) [![David deps](https://img.shields.io/david/ice-lab/icestark.svg?style=flat-square)](https://david-dm.org/ice-lab/icestark)

## Installation

```bash
npm install @ice/stark-app --save
```

#### Why is the sub-application API to be drawn separately `@ice/stark-app`?

- The APIs used by sub-applications are very stable and do not have to be updated frequently with the main package
- Sub-application APIs are more compatible and support non-relay systems

#### Compatibility

`icestark-app` supports all major browsers and supports all popular frameworks such as react, vue, angular, jQuery, etc.

## Contributors

Feel free to report any questions as an [issue](https://github.com/ice-lab/icestark/issues/new), we'd love to have your helping hand on `icestark`.

If you're interested in `icestark`, see [CONTRIBUTING.md](https://github.com/alibaba/ice/blob/master/.github/CONTRIBUTING.md) for more information to learn how to get started.

## License

[MIT](LICENSE)
npm package: @ice/stark-data
Description: icestark-data is a JavaScript library for icestark, used for communication.
Latest version: 0.1.3

# icestark-data

> icestark sommunication solution. [icestark docs](https://ice-lab.github.io/icestark/).

[![NPM version](https://img.shields.io/npm/v/@ice/stark-data.svg?style=flat)](https://npmjs.org/package/@ice/stark-data) [![Package Quality](https://npm.packagequality.com/shield/@ice%2Fstark-data.svg)](https://packagequality.com/#?package=@ice%2Fstark-data) [![build status](https://img.shields.io/travis/ice-lab/icestark.svg?style=flat-square)](https://travis-ci.org/ice-lab/icestark) [![Test coverage](https://img.shields.io/codecov/c/github/ice-lab/icestark.svg?style=flat-square)](https://codecov.io/gh/ice-lab/icestark) [![NPM downloads](http://img.shields.io/npm/dm/@ice/stark-data.svg?style=flat)](https://npmjs.org/package/@ice/stark-data) [![David deps](https://img.shields.io/david/ice-lab/icestark.svg?style=flat-square)](https://david-dm.org/ice-lab/icestark)

## Installation

```bash
npm install @ice/stark-data --save
```

## API

### Store

Global Store, unified management of all variables

- get(key)
- set(key, value)
- on(key, callback, force), when `force` is true, callback will be called immediately when initializing
- off(key, callback)

#### example

```javascript
// Framework
import { store } from '@ice/stark-data';

const userInfo = { name: 'Tom', age: 18 };
store.set('user', userInfo); // set UserInfo
store.set('language', 'CH');

// Sub-application A
import { store } from '@ice/stark-data';

const userInfo = store.get('user'); // get UserInfo

function showLang(lang) {
  console.log(`current language is ${lang}`);
}

store.on('language', showLang, true); // add callback for 'language', callback will be called whenever 'language' is changed

store.off('language', showLang); // remove callback for 'language'
```


### Event

Global Event, unified management of all events

- on(key, callback)  `callback` will be called with (...rest)
- off(key, callback)
- emit(key, ...rest)

#### example

```javascript
// Framework
import { event } from '@ice/stark-data';

function fresh(needFresh) {
  if (!needFresh) return;

  fetch('/api/fresh/message').then(res => {
    // ...
  });
}

event.on('freshMessage', fresh);

// Sub-application A
import { event } from '@ice/stark-data';

event.emit('freshMessage', false);
// ...
event.emit('freshMessage', true);
```

## Contributors

Feel free to report any questions as an [issue](https://github.com/ice-lab/icestark/issues/new), we'd love to have your helping hand on `icestark`.

If you're interested in `icestark`, see [CONTRIBUTING.md](https://github.com/alibaba/ice/blob/master/.github/CONTRIBUTING.md) for more information to learn how to get started.

## License

[MIT](LICENSE)
npm package: @ice/stark-html
Description: icestark-html is a JavaScript library for icestark, used for processing html.
Latest version: 0.2.5

# icestark-html

> icestark sommunication solution. [icestark docs](https://ice.work/docs/icestark/about).

[![NPM version](https://img.shields.io/npm/v/@ice/stark-html.svg?style=flat)](https://npmjs.org/package/@ice/stark-html) [![Package Quality](https://npm.packagequality.com/shield/@ice%2Fstark-html.svg)](https://packagequality.com/#?package=@ice%2Fstark-html) [![build status](https://img.shields.io/travis/ice-lab/icestark.svg?style=flat-square)](https://travis-ci.org/ice-lab/icestark) [![Test coverage](https://img.shields.io/codecov/c/github/ice-lab/icestark.svg?style=flat-square)](https://codecov.io/gh/ice-lab/icestark) [![NPM downloads](http://img.shields.io/npm/dm/@ice/stark-html.svg?style=flat)](https://npmjs.org/package/@ice/stark-html) [![David deps](https://img.shields.io/david/ice-lab/icestark.svg?style=flat-square)](https://david-dm.org/ice-lab/icestark)

## Installation

```bash
npm install @ice/stark-html --save
```

#### example

```javascript
import processHtml from '@ice/stark-html';

const htmlContent = processHtml(oldHtmlContent);
```

## Contributors

Feel free to report any questions as an [issue](https://github.com/ice-lab/icestark/issues/new), we'd love to have your helping hand on `icestark`.

If you're interested in `icestark`, see [CONTRIBUTING.md](https://github.com/alibaba/ice/blob/master/.github/CONTRIBUTING.md) for more information to learn how to get started.

## License

[MIT](LICENSE)
npm package: @ice/stark-loader
Description: icestark-loader is a JavaScript library for loading module.
Latest version: 0.1.0

# icestark-loader

> icestark-loader is a JavaScript library for loading module. [icestark docs](https://ice.work/docs/icestark/about).

[![NPM version](https://img.shields.io/npm/v/@ice/stark-loader.svg?style=flat)](https://npmjs.org/package/@ice/stark-loader) [![Package Quality](https://npm.packagequality.com/shield/@ice%2Fstark-loader.svg)](https://packagequality.com/#?package=@ice%2Fstark-loader) [![build status](https://img.shields.io/travis/ice-lab/icestark.svg?style=flat-square)](https://travis-ci.org/ice-lab/icestark) [![Test coverage](https://img.shields.io/codecov/c/github/ice-lab/icestark.svg?style=flat-square)](https://codecov.io/gh/ice-lab/icestark) [![NPM downloads](http://img.shields.io/npm/dm/@ice/stark-loader.svg?style=flat)](https://npmjs.org/package/@ice/stark-loader) [![David deps](https://img.shields.io/david/ice-lab/icestark.svg?style=flat-square)](https://david-dm.org/ice-lab/icestark)

## Installation

```bash
npm install @ice/stark-loader --save
```

## API

### mount: function

mount(rootElement, entry, rootId: string = 'icestark-loader')

- rootElement: string | function | HTMLElement
- entry: string | string[]
  - string with '<head>' is treated as htmlContent
  - string without '<head>' is treated as htmlUrl
  - string[] is treated as urls for js/css asserts
- rootId: string (defalut 'icestark-loader')

### unmount: function

#### example

```html
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ICE BLOCK</title>
  </head>
  <body>
    <div id="moduleWrapper">
  </body>
</html>
```

```javascript
import { mount, unmount } from '@ice/stark-loader';

// trigger mount
mount('moduleWrapper', 'https://unpkg.com/@icedesign/ability-introduction-block@3.0.1/build/index.html');

// trigger unmount
unmount();
```

## Contributors

Feel free to report any questions as an [issue](https://github.com/ice-lab/icestark/issues/new), we'd love to have your helping hand on `icestark`.

If you're interested in `icestark`, see [CONTRIBUTING.md](https://github.com/alibaba/ice/blob/master/.github/CONTRIBUTING.md) for more information to learn how to get started.

## License

[MIT](LICENSE)
npm package: @ice/stark-router
Description: A router package for @ice/srark.
Latest version: 0.1.2

# icestark-router
A router package for @ice/srark

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

## Installation

```bash
npm install @ice/stark-router --save
```

## Example

```javascript
import React from 'react';
import IceStarkRouter from '@ice/stark-router';

class App extends React.Component {
  render() {
    const routers = [{
      path: '/',
      key: 'index',
      component: () => <div>index page</div>,
      exact: true,
    }, {
      path: '/home',
      key: 'home',
      component: () => <div>home page</div>,
    }, {
      path: '/about',
      key: 'about',
      component: () => <div>about page</div>,
    }];
    return (
      <div>
        <IceStarkRouter routers={routers}/>
      </div>
    );
  }
}
```
npm package: @ice/store-logger
Description: icestore logger middleware
Latest version: 0.1.0

# icestore-logger

> icestore 调试 middleware


## 安装

```bash
npm install @ice/store-logger --save
```

## 简介

`icestore-logger` 是 `icestore` 官方提供的调试中间件，使用该中间件用户可以方便地跟踪 state 的 diff、触发 action 等信息，提升问题排查效率。

## 快速开始

在注册 store 之前，使用 `applyMiddleware` 方法将 logger 中间件加入到中间件队列中

```javascript
import todos from './todos';
import Icestore from '@ice/store';
import logger from '@ice/store-logger';

const icestore = new Icestore();

const middlewares = [];

// 线上环境不开启调试中间件
if (process.env.NODE_ENV !== 'production') {
  middlewares.push(logger);
}

icestore.applyMiddleware(middlewares);
icestore.registerStore('todos', todos);
```

注册成功后，当 `store` 中的 action 被调用时，在浏览器的 DevTools 中将能看到实时的日志：

<img src="https://user-images.githubusercontent.com/5419233/62607025-ee0de400-b92f-11e9-8936-6b6370672f27.png"  width="320" />

日志中包含以下几个部分：

* Store Name: 当前子 store 对应的 namespace
* Action Name: 当前触发的 action 名
* Added / Deleted / Updated: state 变化的 diff
* Old state: 更新前的 state
* New state: 更新后的 state

## Contributors

欢迎反馈问题 [issue 链接](https://github.com/alibaba/ice/issues/new)
如果对 `icestore` 感兴趣，欢迎参考 [CONTRIBUTING.md](https://github.com/alibaba/ice/blob/master/.github/CONTRIBUTING.md) 学习如何贡献代码。

## License

[MIT](LICENSE)
npm package: @ice/style-import
Description: automatic import style by transform code
Latest version: 1.1.0

# `@ice/style-import`

A transform function for automatic import style.

## Usage

```js
import transform from '@ice/style-import';

transform(`import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);`, [{
  libraryName: 'antd',
  style: (importSpecifiers) =>
    importSpecifiers.map(specifier =>
      `import 'antd/es/${specifier}/style'`).join('\n'),
}]);

// the code will turn out as blew:
/* 
import { Button } from 'Button';
import 'antd/es/Button/style';
ReactDOM.render(<Button>xxxx</Button>); */
```