open-index/open-npm huggingface dataset:
npm package: @raneio/reflex
Description: Reflex adds reactivity to build-in HTML elements.
Author: Rane Ahonen
Latest version: 2.2.0

# REFLEX

Reflex adds reactivity to build-in HTML elements. It works like [Vue](https://vuejs.org) and [React](https://reactjs.org/), but the Reflex filesize is only **3kb**. Reflex is based on web components – more precisely customized built-in elements.

**Why Reflex?**

- Light, fast and simple
- Minimalistic API
- Global state _(get and set data easily at the site wide)_
- No CLI
- No compiler
- No virtual DOM

**DEMO: https://codepen.io/raneio/full/bGVbrLw**

**NPM: https://www.npmjs.com/package/@raneio/reflex**

---

## Get started

```javascript
import 'https://cdn.skypack.dev/@ungap/custom-elements-builtin?min' // Polyfill for Safari
import Reflex from "https://cdn.skypack.dev/@raneio/reflex?min";

// You can also install Reflex and polyfill locally
// npm install @raneio/reflex @ungap/custom-elements-builtin

window.reflex = new Reflex({
  elements: ["h3", "div", "img", "input"],
  state: {
    title: "Awesome monkeys!",
    titleUpperCase: "",
    subtitle: "Everyone <strong>loves</strong> monkeys.",
    showExample: true,
    animals: [
      {
        name: "Monk",
        photo: "https://source.unsplash.com/Z05GiksmqYU/150x150",
      },
      {
        name: "Twins",
        photo: "https://source.unsplash.com/aXqlZFeVFrU/150x150",
      },
      {
        name: "Jon Snow",
        photo: "https://source.unsplash.com/iJ7cD_VocxE/150x150",
      },
    ],
  },
});
```

## text / html

```html
<h3 is="x-h3" text="title"></h3>
<div is="x-div" html="subtitle"></div>
```

> ### Awesome monkeys!
>
> Everyone **loves** monkeys.

## :attribute

```html
<img is="x-img" :src="animals.0.photo" :alt="animals.0.name" />
```

> ![Monk](https://source.unsplash.com/Z05GiksmqYU/150x150)

## for

```html
<div is="x-div" for="animal in animals">
  <img
    is="x-img"
    :src="animal.photo"
    :alt="animal.name"
    :data-index="#animal"
  /> 
</div>
```

> ![Monk](https://source.unsplash.com/Z05GiksmqYU/150x150) ![Twins](https://source.unsplash.com/aXqlZFeVFrU/150x150) ![Jon Snow](https://source.unsplash.com/iJ7cD_VocxE/150x150)

## show

```html
<div is="x-div" show="showExample"></div>
```

## set()

```javascript
reflex.set("title", "Monkeys are awesome!");
```

```html
<input
  is="x-input"
  :value="title"
  oninput="reflex.set(this.path.value, this.value)"
/>
```

## get()

```javascript
const title = reflex.get("title");
// or
const title = reflex.state.title;
```

## observe()

```javascript
reflex.observe({
  path: "title",
  handler: (newValue, oldValue) => {
    reflex.set("titleUpperCase", newValue.toUpperCase());
  },
  immediate: true,
});
```

```html
<div is="x-div" text="title"></div>
<div is="x-div" text="titleUpperCase"></div>
```

> Monkeys are awesome!  
> MONKEYS ARE AWESOME!

## Package update guide
https://docs.npmjs.com/updating-your-published-package-version-number

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright 2021, Rane Ahonen, [Rane.io](https://rane.io)
npm package: @raneio/scoped-style
Description: Scope css styles
Author: Rane Ahonen
Latest version: 1.0.1

# Scope css styles

### Get started

```html
 <script type="module" src="https://cdn.skypack.dev/@raneio/scoped-style?min"></script>
```

```html
<div class="test">
  <p>This should be red</p>
  <p class="info">This info should be blue</p>
</div>

<div>
  <p>This should be black</p>
  <p class="info">This info should be black</p>
</div>

<scoped-style scope=".test">
  <style media="not all">
    :root {
      color: red;
    }

    .info {
      color: cornflowerblue;
    }
  </style>
</scoped-style>
``` 

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright 2021, Rane Ahonen, [Rane.io](https://rane.io)
npm package: @ranfdev/deepobj
Description: get, set, delete deep objects in javascript. Get the last object reference
Author: ranfdev
Latest version: 1.0.2

# deepobj(action, obj, path)

Get, set, delete or do what you want with a deep object (it keeps the object reference).
inspired from [dlv](https://github.com/developit/dlv) and [dset](https://github.com/lukeed/dset/)

# Install:
```npm i @ranfdev/deepobj```

## Examples:

```
import deepobj from "@ranfdev/deepobj"
const objectToTest = {a: {b: {c: {d: 2}}}}


// define some basic actions

const get = (obj, prop) => obj[prop];
const set = n => (obj, prop) => (obj[prop] = n);

// You can do what you want, even deleting the nested object
const del = (obj, prop) => delete obj[prop];

// use them
deepobj(get, objectToTest, 'a.b.c.d') // 2
deepobj(set(10), objectToTest, 'e.f.g')

console.log(objectToTest.e.f.g) //10
```

## Why i made this

dlv only returns the value of the nested object. I needed a way to get the reference of the nested object
npm package: @ranganadissa/ng-storybook-achieve
Description: Storybook design systems tutorial
Author: ranganadissa
Latest version: 0.1.16

# Storybook

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.11.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @range3/eslint-config
Description: My ESLint config
Author: range3
Latest version: 2.0.0

# @range3/eslint-config
> My ESLint config

## Usage
### Install
``` bash
$ yarn add --dev @range3/eslint-config
```

### .eslintrc.js
``` js
module.exports = {
  extends: [
    '@range3',
  ],
}
```
npm package: @range3/lru-file-cache
Description: A LRU cache storage persists on local files
Author: range3
Latest version: 0.1.0

# @range3/lru-file-cache

> A LRU cache storage persists on local files

## Install

```bash
$ yarn add @range3/lru-file-cache
```

## Usage

```js
const LruFileCache = require("@range3/lru-file-cache");

(async () => {
  cache = await LruFileCache.open("/tmp/my-lru-cache", {
    capacities: 1024 * 1024 // default 1MiB
  });

  await cache.set("key1", { hello: "LRU cahce" });
  await cache.set("key2", { hoge: 100 });
  await cache.set("key3", "val3");

  await cache.get("key1");

  await cache.keys()

  await cache.set('user1', {name: 'Ichiro', age: 10})
  await cache.update('key1', user => {
    user.age = 20
    return user
  })

  await cache.remove('key2')


})();
```

See also: ./test/
npm package: @range3/match-transform
Description: line-by-line stream str.match(regexp)
Author: range3
Latest version: 1.0.1

# @range3/match-transform
line-by-line stream str.match(regexp)

## Install
``` bash
$ npm install @range3/match-transform
```

## Usage
``` js
const fs = require('fs')
const MatchTransform = require('@range3/match-transform')

const matchTransform = new MatchTransform(
  /^.*range3.*$/, // pattern
  // 'utf8' default encoding
)

fs.createReadStream(__filename)
  .pipe(matchTransform)
  .on('match', match => {
    console.log(match)
  })
  .pipe(process.stdout)
```

## License
MIT
npm package: @range3/mdtest
Description: A wrapper of the mdtest benchmark for Node.js
Author: range3
Latest version: 1.0.2

# @range3/mdtest
> A wrapper of the mdtest benchmark for Node.js

## Install
``` bash
$ yarn add @range3/mdtest
```
### Requirements
- Open MPI
- mdtest


## Usage
``` js
const Mdtest = require('@range3/mdtest')

;(async () => {
  const mdtest = new Mdtest({
    // mpirunPath: '/path/to/mpirun',
    // mdtestPath: '/path/to/mdtest',
  })
  mdtest
    // mpirun options
    .hostfile(
      new Mdtest.HostFile()
        .host('host1', {
          slots: 2,
        })
        .host('host2', {
          slots: 2,
        }))
    .np(4)
    .mpirunOptions({ // other mpirun options
      '-option': 'value',
    })
    // mdtest options
    .d('/path/to/dir')
    .n(100)
    // .unique(true) // -u
    // .onlyFiles() // -F
    // .onlyDirs() // -D
    // .onlyPhase(Mdtest.PHASE.write) // write, stat, read, delete
    // .hard() // io-500 mdtest-hard
    .mdtestOptions({ // other mdtest options
      '-option': 'value', // enable the option '-option value'
      '-C': true,  // enable the option '-C'
      '-F': false, // disable the option
    })

  const results = await mdtest.run()

  const parsedResults = Mdtest.parse(results.stdout)
})()
```
npm package: @range3/narou
Description: Narou lib
Author: range3
Latest version: 0.5.2

# @range3/narou
[![npm version](https://badge.fury.io/js/%40range3%2Fnarou.svg)](https://badge.fury.io/js/%40range3%2Fnarou)

> 小説家になろうNode.jsライブラリ

## Install
```bash
$ yarn add @range3/narou
```

## Usage
```js
const Narou = require('@range3/narou')

const narou = new Narou()
const novel = narou.novel('ncode')
await novel.fetch()

// 小説メタデータ(なろう小説API出力を参照)
// https://dev.syosetu.com/man/api/#link6
const novel.metadata 

// 目次
const toc = novel.toc.toArray()
// [
//     { type: 'chapter', title: 'チャプター１タイトル' },
//     {
//       type: 'episode',
//       path: '/ncodeXXXXXX/1/',
//       no: 1,
//       subtitle: '１話サブタイトル',
//       created: '2018/07/27 11:26',
//       updated: '2018/10/20 14:04'
//     },
//     {
//       type: 'episode',
//       path: '/ncodeXXXXX/2/',
//       no: 2,
//       subtitle: '2話サブタイトル',
//       created: '2018/07/27 19:02',
//       updated: '2018/09/29 06:14'
//     },
//     { type: 'chapter', title: 'チャプター2タイトル' },
//     ...
// ]

console.log(novel.episodeLength)
const episode = novel.episode(10)
await episode.fetch()
console.log(episode.subtitle)
console.log(episode.preface)
console.log(episode.content)
console.log(episode.afterword)

// Bulk-get
const novels = await narou.getNovels(['n5519gi', 'nxxxxx'])
```

## TODO
- 短編小説対応
npm package: @range3/parse2ch
Description: 2ch parser for Node.js
Author: range3
Latest version: 1.0.0

# node-parse2ch

## Install

```bash
$ npm install @range3/parse2ch
```

## Usage

```bash
const Parse2ch = require('@range3/parse2ch')

const board = Parse2ch.board('http://example.com/boardname/')

for await (const thread of board.threads()) {
  console.log(thread.subject)
  for await (const post of thread.posts()) {
    console.log(
      post.name,
      post.mail,
      post.timestamp,
      post.id,
      post.text,
      post.subject)
  }
}

```

## Plugin
You can make plugins to parse any 2ch-like BBSs that do not provide DAT data.
See `./src/dat/index.js`, It is a example of plugin object.

Add plugin object to parse2ch like below.
``` bash
const Parse2ch = require('@range3/parse2ch')
const myPlugin = require('parse2ch-my-plugin')
Parse2ch.use(myPlugin)
...
```