open-index/open-npm huggingface dataset:
npm package: @hseoy/cli-select
Description: To provide a list of selectable items on the command line
Author: Yunseo Hwang
Latest version: 1.0.1

# @hseoy/cli-select

> I re-implemented [cli-select package](https://github.com/cyrilwanner/cli-select) using TypeScript and added a test code.

To provide a list of selectable items on the command line.
npm package: @hseoy/version-webpack-plugin
Description: webpack plugin to easily update the version specified in package.json
Author: Yunseo Hwang
Latest version: 0.2.1

# @hseoy/version-webpack-plugin

webpack plugin to easily update the version specified in package.json

```
$ npm install --save-dev @hseoy/version-webpack-plugin
$ yarn add -D @hseoy/version-webpack-plugin
```
npm package: @hset/cm-core
Description: A Cloud Message Architecture Based on Nodejs
Author: archersado
Latest version: 1.0.0

<p align="center">
<b style="font-size: 32px;line-height: 32px;">A Cloud Message Architecture Based on Nodejs</b>
<br />
<br />
<br />
<em>make it easy to build a cloud message system.</em>
<br />
<br />



# install

```shell
npm i @hset/cm-core
```

# How to use 

``` typescript
import { Manager, StrategyManager, IMessageDto, Message, Context,
  ChannelManager, ContentTemplate } from '@hset/cm-core';

// 
const hcmMiddleware = {
};
// 注入上下文
const ctx = {
}

const cmManager = new Manager(new Context(ctx));
// 消息内容模板注册
cmManager.registerCore<ContentTemplate>('contentTemplate', ContentTemplate);
// 消息策略容器注册
const strategyManager = cmManager.registerManager<StrategyManager>('strategy', StrategyManager);
// 消息信道容器注册
const channelMananger = cmManager.registerManager<ChannelManager>('channel', ChannelManager);
// register your strategy
// strategyManager.register('fatigue', Fatigue, NoticeFatigueStrategy);


// register your channel
// /channelMananger.register(code, impl);

// send your message
// const messageDto: IMessageDto = {
//   sceneName,
//   app: appInfo,
//   title,
//   sender: sceneSender || sender,
//   receiver,
//   context,
//   contentTemplate,
//   template,
//   strategies: strategyList,
//   channels,
// };

// await cmManager.run(messageDto);

```
npm package: @hset/hyper-core
Description: an universal render engine for 2D/3D graphics
Author: archersado
Latest version: 1.0.7



## Install

```sh
npm install
```

## Abstract Render Interface 
Hyper defines a set of abstract render interface for different render engine, such as fabricjs, Pixijs and Threejs.

```typescript
export default abstract class Render {
    public container: HTMLElement;
    public canvas: any;
    public elements: any[];
    public config: ParticalOptions<IConfig>;
    constructor(config: ParticalOptions<IConfig>) {
        this.config = config;
    };

    // 销毁画布
    destroy() {}
    // 渲染某个元素到内存
    render(_type: string, _props: {[key: string]: any}): any {};
    // 清空画布
    clear() {};
    // 选中某个对象
    select(_obj: any) {};
    // 反选某个对象
    unselect(_obj: any) {};
    // 删除某个对象
    remove(_obj: any) {};
    // 设置画布缩放
    setZoom(_zoom: number) {};
    // 重置画布缩放    
    resetZoom() {};
    // 获取画板缩放比例
    getZoom(): number {
        return 1;
    };
    // 触发重绘
    reflow() {};
    // 渲染对象发生属性变更
    mutate(_obj: any, _key: string, _value: any): object {
        return {};
    };
    // 获取渲染对象
    getObject(_id: number): object { return {} };
    // 向渲染器注册 render hook 事件
    registerRenderHook() {}
}

```

## How To Use

### register an render engine 
```typescript
import engineManager from '@hset/hyper-core';
import FabricEngine from './engine/fabric/render';


// 渲染引擎即为实现了渲染器接口的渲染实现类
engineManager.register('fabric', FabricEngine);

```
### use an render engine 

```typescript
import hyperManager from '@hset/hyper-core';

// 向引擎注册配置
const config = {};

return hyperManager.use("fabric", config);

```


## Show your support

Give a ⭐️ if this project helped you!
npm package: @hset/react-hyper
Description: a react bridge for hyper render, you can drawing complex graphics by using react
Author: archersado
Latest version: 1.0.11


<h1 align="center"> a react bridge for hyper render</h1>

> To help build an Graphic based application effectively, we make a react custom render to connect Hyper engine and react application

## Features

* Base graphic components support by using jsx snippets and easily events bindings 
* Custom your own react component by composing the base graphic components
* Get better performance base on react reconciler when dealing with thousands of graphic elements
* Nested elements in a group will be gathered together and their position will be updated automatically


## Usage

```jsx
import React, { useState, useCallback } from 'react';
import { Button } from '@alife/hippo';
import Board, { Component } from '@hset/react-hyper';
import Test from './Test';
import './App.css';

const { Rect, Image, Group } = Component;


function App() {
  const [picWidth, setPicWidth] = useState(100);
  const [showImage, setShowImage] = useState(true);
  const widthChange = () => {
    setPicWidth(200)
    setShowImage(false);
  }

  return (
    <div id="app">
      <Board engineType="fabric" config={{ container: 'container' }} width={1000} height={500}>
        <Rect width={100} height={100} left={0} top={0} fill="red" 
          onSelected={useCallback((...args) => {console.log('selected', this, args)}, [])} 
          onMoving={useCallback(() => {console.log('moving')}, [])} 
          onMoved={useCallback(() => {console.log('moved')}, [])}  
        />
        <Image async src="https://img.alicdn.com/imgextra/i3/O1CN01EFF4Wv1xVgvxRayF9_!!6000000006449-0-tps-194-259.jpg" onMoving={() => {console.log('moving')}} width={picWidth} height={200} left={0} top={0} fill="red" />
        {
          showImage && <Test/>
        }

      </Board>
      <Button onClick={widthChange}>变宽</Button>
      <Button onClick={() => {setShowImage(true)}}>出现</Button>
    </div>

  );
}

export default App;
```

## Author

👤 **archersado**


## Show your support

Give a ⭐️ if this project helped you!
npm package: @hsgamer/side-engine
Description: A NodeJS library to execute Selenium IDE projects
Author: Huynh Tien
Latest version: 0.2.4

# side-engine - Selenium IDE Engine

A NodeJS library to execute Selenium IDE project (.side files)

Usage can be found in the [tests](https://github.com/HSGamer/side-engine/blob/master/tests/index.test.ts)

A proper README will be up when the library is stable