open-index/open-npm huggingface dataset:
npm package: @m-c2/install
Description: A script to deploy and run a configuration for a project
Author: NoMoreDeps
Latest version: 1.0.0

## Mc2-runner

This package helps to quickly configure the behavior of cli command.
For simple usage where you do not have watch & run logic, you can use this package.

## Usage

If you already have a config file
```bash
npx @m-c2/runner
```
If you do not have a default config file, you can create it by running
```bash
npx @m-c2/runner --init
```
This will create the default template for you to edit, named mc2-runner.config.js

## Config file
```js
// mc2-runner.config.js

// Available colors
// red,       green,       yellow,       blue,       magenta,       cyan,
// brightRed, brightGreen, brightYellow, brightBlue, brightMagenta, brightCyan,
// black    , white      , gray
// or custom color if supported by your terminal : #XXXXXX as hex color

module.exports = [
  {
    // Name to display for this process (Ex: Typescript Compiler)
    name: '',
    // Command to run (Ex: yarn tsc)
    command: '',

    // If present, the process will restart when a file matching the pattern changes
    watch: {
      pattern: '', // Ex : Watching path like src/**/*.ts
    },

    // If true, the process will start automatically when the runner is started
    // If false, but a watch is configured, the process will start when a file change
    autoStart: false,

    // Color of the process in the console
    color: 'blue',
    // Color of the process in the console when a file change
    fileChangeColor: 'green',
    // When watch is active, define if the process restart or not on file change
    restartOnWatchChange: true,
    // When watch is active, Execute the method
    // This method can be async or not
    // can return void or an array of string representing a name of one of the process to start / restart
    triggerMethod: null,
  }
];
```

For exemple, if you have a small command to run when a file change, or a server to restart, you can use this package to do it.
you can do it this way
```js
// mc2-runner.config.js
module.exports = [
  {
    name    : 'TypeScript Compiler',
    command : 'yarn tsc',
    watch : {
      pattern: 'src/**/*.ts', // Watch all TypeScript files in the src directory and its subdirectories
    },
    color                : 'blue',
    fileChangeColor      : 'green',
    restartOnWatchChange : true,
    triggerMethod        : null,      // No trigger method specified for this process
  },
  {
    name    : 'Node App',
    command : 'node dist/App-Runner.js',
    watch : {
      pattern: 'out/App.js', // Watch the app.js file in the dist/js directory
    },
    restartOnWatchChange: true,
    // Function can be async or not
    triggerMethod: () => {
      // Copy new files to target directory
      // ... logic here
    },
  },
];
```
npm package: @m-c2/ripple
Description: Ripple is a powerful state management library for React applications. It offers a lightweight and intuitive solution to manage and synchronize state across components, improving the efficiency and maintainability of your codebase.
Author: NoMoreDeps
Latest version: 1.0.7

## What is Ripple ?

Ripple is a state management library for React. It's a simple and powerful alternative to Redux / Recoil / MobX...

Create a ripple with an initial state, and use it in your components. Keep the logic in the component or in a service, it's up to you.

No need for any subscription, Ripple will render your component in case of any change. Even from a service, it will not break the hook lifecycle.

***It is just easy pizy lemon squeezy !***

![img](assets/diag.svg)

### Documentation : [Here](https://ripple.m-c2.dev)
npm package: @m-c2/runner
Description: A script to handle process management based on configuration
Author: NoMoreDeps
Latest version: 1.0.9

## Mc2-runner

This package helps to quickly configure the behavior of cli command.
For simple usage where you do not have watch & run logic, you can use this package.

## Usage

If you already have a config file
```bash
npx @m-c2/runner
```
If you do not have a default config file, you can create it by running
```bash
npx @m-c2/runner --init
```
This will create the default template for you to edit, named mc2-runner.config.js

## Config file
```js
// mc2-runner.config.js

// Available colors
// red,       green,       yellow,       blue,       magenta,       cyan,
// brightRed, brightGreen, brightYellow, brightBlue, brightMagenta, brightCyan,
// black    , white      , gray
// or custom color if supported by your terminal : #XXXXXX as hex color

module.exports = [
  {
    // Name to display for this process (Ex: Typescript Compiler)
    name: '',
    // Command to run (Ex: yarn tsc)
    command: '',

    // If present, the process will restart when a file matching the pattern changes
    watch: {
      pattern: '', // Ex : Watching path like src/**/*.ts
    },

    // If true, the process will start automatically when the runner is started
    // If false, but a watch is configured, the process will start when a file change
    autoStart: false,

    // Color of the process in the console
    color: 'blue',
    // Color of the process in the console when a file change
    fileChangeColor: 'green',
    // When watch is active, define if the process restart or not on file change
    restartOnWatchChange: true,
    // When watch is active, Execute the method
    // This method can be async or not
    // can return void or an array of string representing a name of one of the process to start / restart
    triggerMethod: null,
  }
];
```

For exemple, if you have a small command to run when a file change, or a server to restart, you can use this package to do it.
you can do it this way
```js
// mc2-runner.config.js
module.exports = [
  {
    name    : 'TypeScript Compiler',
    command : 'yarn tsc',
    watch : {
      pattern: 'src/**/*.ts', // Watch all TypeScript files in the src directory and its subdirectories
    },
    color                : 'blue',
    fileChangeColor      : 'green',
    restartOnWatchChange : true,
    triggerMethod        : null,      // No trigger method specified for this process
  },
  {
    name    : 'Node App',
    command : 'node dist/App-Runner.js',
    watch : {
      pattern: 'out/App.js', // Watch the app.js file in the dist/js directory
    },
    restartOnWatchChange: true,
    // Function can be async or not
    triggerMethod: () => {
      // Copy new files to target directory
      // ... logic here
    },
  },
];
```
npm package: @m-dary-nur/react-virtual-list
Description: lightweight and flexible react virtualized list with react hooks (support for react latest version)
Author: Muhammad Dary Nur Rabbani
Latest version: 1.2.3

# react-virtual-list
lightweight and flexible React Virtualized-listist Component Wrapper (support for React v16.8 ~ v16.13.1).

`react-virtual-list` help you virtualizing list for better performance and memory.

### Benefits:
* Zero dependency (no dependencies needed)
* Very small library [ 1.8kB minified + gzipped !](https://bundlephobia.com/result?p=@m-dary-nur/react-virtual-list)
* Keep your components as a higher-order component
* Very flexible - `react-virtual-list` just wrapped your map components and it will helps your component manage virtualizing your map list.

## Installation

use yarn:

```console
> yarn add @m-dary-nur/react-virtual-list
```
or use npm:

```console
> npm install @m-dary-nur/react-virtual-list --save
```

## Usage

The `react-virtual-list` module only exports a single file.

```js
import VListWrapper from "@m-dary-nur/react-virtual-list";
```

Your inner component uses the `react-virtual-list` props to render the visible items and set a class and style to set the overall list.

```js

const bigList = [{id: 1, name: "andi"}, {id: 2, name: "budi"}, ...., {id:99999, name: "zibi"}];

<VListWrapper 
  width="100%" // or width={100} (optional / not required)
  height="100%" // or height={500} (optional / not required) 
  items={bigList} // (required)
  itemHeight={40} // default itemHeight={50} (optional / not required) 
  itemBuffer={5} // default itemBuffer={2} (optional / not required) 
>
  {({ indexStart, items, itemStyle }) => (
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>name</th>
        </tr>
      <thead>
      <tbody>
        {items.map((item, index) => (
          <tr key={item.id}>
            <td>{indexStart + index + 1}</td> // its important for get numbering each item row
            <td style={itemStyle}>{item.name}</td> // add itemStyle on item row to set height offset (required)
          <tr>
        ))}
      </tbody>
    <table>
  )}
</VListWrapper>
```

**Note:** You should set `itemStyle` props for each item its require for virtualization. 

that's it ! so simple.

#### VListWrapper properties

properties are used for setup `react-virtual-list`.

Name | Type | Default | Description
--- | --- | --- | ---
`items` | Array | - | Array of your list items.
`itemHeight` | Number | 50 | (optional) Height in pixels for each row item. if not set it will set as 50 pixel height as default.
`itemBuffer` | Number | 2 | () Number of row that should be rendered before and after the visible view.
`height` | Number / String | '100%' | Number / string for set height of `VListWrapper`
`width` | Number / String | '100%' | Number / string for set width of `VListWrapper`

#### Example Usage

[Coming soon but will be here](http://m-dary-nur.github.io/react-virtual-list)

> give a star :star2: if the library help you. :relaxed: