open-index/open-npm huggingface dataset:
npm package: @rblopes/generator-phaser-plus-template-default
Description: Create Phaser Web games with ease.
Author: Rafael Barbosa Lopes
Latest version: 1.0.0-beta.6

# `generator-phaser-plus` _default_ template

[![npm version](https://img.shields.io/npm/v/@rblopes/generator-phaser-plus-template-default.svg?style=flat-square)](https://www.npmjs.com/package/@rblopes/generator-phaser-plus-template-default) [![dependencies status](https://david-dm.org/rblopes/generator-phaser-plus/status.svg?style=flat-square&path=packages/generator-phaser-plus-template-default)](https://david-dm.org/rblopes/generator-phaser-plus?path=packages/generator-phaser-plus-template-default/) [![devDependencies status](https://david-dm.org/rblopes/generator-phaser-plus/dev-status.svg?style=flat-square&path=packages/generator-phaser-plus-template-default)](https://david-dm.org/rblopes/generator-phaser-plus?path=packages/generator-phaser-plus-template-default/&type=dev) [![Travis CI Build Status](https://img.shields.io/travis/rblopes/generator-phaser-plus.svg?style=flat-square)](https://travis-ci.org/rblopes/generator-phaser-plus)

>   Create Phaser Web games with ease.

[`generator-phaser-plus`](https://www.npmjs.com/package/generator-phaser-plus) is a [Yeoman generator](http://yeoman.io/) that makes starting up [Phaser 3](http://phaser.io/) game projects dead simple.

This supplementary package contains the **`default`** project template of `generator-phaser-plus`.

The sample project has the following features:

-   A basic set of [Gulp](https://github.com/gulpjs/gulp/) tasks for development and bundling the application for distribution;

-   [Webpack](https://webpack.js.org/) for code bundling;

-   [Browsersync](https://browsersync.io/) for cross-device, cross-browser testing;

-   [Babel](http://babeljs.io/), configured with [`babel-preset-env`](https://github.com/babel/babel/tree/master/packages/babel-preset-env), to compile scripts in a format compatible with today's browsers and devices.

-   A sample Phaser 3 application, enough for a small Web game, including a splash screen component and a organized directory structure.

You can create your own Web games powered by Phaser too. Install `generator-phaser-plus` now, via npm or Yarn, and start right away! Visit the [project page on GitHub](https://github.com/rblopes/generator-phaser-plus#readme) to learn more.


## License

This software is distributed under the terms of the [MIT License](../../LICENSE.md).
npm package: @rbn/cherry
Description: Extract structured data from something. Something is HTML, for now.
Author: Robin Hägg
Latest version: 0.0.1

<div align="center" class="panel panel-success">
<img src="https://cdn.jsdelivr.net/npm/twemoji@11.0.1/2/svg/1f352.svg" width="100px" border="0px"></img>
</div>
<div align="center" class="panel panel-success">
<h1 color="red">Work in progress</h1>
</div>

# Cherry
Cherry started life as a scraping library, picky-scrape, similar to [jsonframe-cheerio](https://github.com/gahabeen/jsonframe-cheerio). While it was developed independently, Picky ended up being similar to jsonframes with mainly a few differences in template syntax and depending less on built in functions, instead allowing arrow functions for one-time hacks and user extensions of the function library to support code reuse. Picky was never released to the public as it was not yet polished enough for production use. 

Cherry is not limited to scraping HTML, not limited to using CSS selectors, and not even limited to using a DOM. Unlike jsonframe and picky, cherry does not depend on [cheerio](https://github.com/cheeriojs) or *any one CSS/HTML/DOM library*.

# Design
Cherry loads an engine at startup, see [ENGINES.md](docs/ENGINES.md) for more information. The engine being used defines what cherry becomes. Currently the only one is the HTML/CSS engine *Fb55*. It is named after the developer who created [htmlparser2](https://github.com/fb55/htmlparser2), one of the most useful node.js libraries for data junkies ever created. The Fb55 engine simply wraps htmlparser2 and CSSselect (also maintained by Fb55), which yields a fairly simple JSON-template scraper.

Planned engines and features include XML, XPath, and just about any graph-based document format I can think of. Remote graphs are being considered.

# Extractors
The templates used to obtain structured data from HTML, XML, or whatever the engine used supports are called `Extractors`. They work hieararchically, progressively selecting chunks of the document of interest.

## Usage: Sample extractor
The following extractor will list all the 'hot' threads per-category from the swedish site flashback.info using the simplest possible syntax. Works as of 2019-04-23

```js
import cherry from 'cherry'

const extractor = [{
  $: "table",                    
  category: "$ caption | text",
  posts: [{
    $:"tr",
    title:"$ .thread-title | text",
    url:"$ a | attr href"
  }]
}]

cherry.pick('html goes here', extractor)
```

### Explanation
* For each - `[]` - \<table\> element - `$: "table"`
  * Extract the category name - `category: "$ caption | text"`
  * For each - `[]` - row - `$: "tr"` - *in the table* (key is on a level above the table selector)
    * Extract the post title - `title:"$ .thread-title | text"`
    * Extract the post URL `url:"$ a | attr href"`
npm package: @rbnd/flows
Description: A better way to onboard users and drive product adoption.
Latest version: 0.0.28

# Flows JS - Onboarding for modern SaaS

- A better way to onboard users and drive product adoption.

[![npm version](https://badge.fury.io/js/@rbnd%2Fflows.svg)](https://badge.fury.io/js/@rbnd%2Fflows)

## Examples

- [Javascript](https://github.com/RBND-studio/flows-js/tree/main/examples/vanilla-js) ([Demo](https://vanilla.flows.sh))
- [React](https://github.com/RBND-studio/flows-js/tree/main/examples/react-nextjs) ([Demo](http://react-nextjs.flows.sh))

## Getting Started

### NPM package

```bash
npm install @rbnd/flows
```

### Via CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@rbnd/flows@0.0.28/dist/index.global.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rbnd/flows@0.0.28/public/flows.css" />
```

### Usage

```js
import { init } from "@rbnd/flows"

init({ flows: [ ... ] })

// or CDN
window.FlowsJS?.init({ flows: [ ... ] })
```

---

Created by [rbnd.studio](https://rbnd.studio/).
npm package: @rbnd/react-dark-mode
Description: React hook for switching between light, dark and system color mode.
Author: Vojtěch Vidra
Latest version: 2.0.2

# @rbnd/react-dark-mode

Inspired by [use-dark-mode](https://github.com/donavon/use-dark-mode). And after being frustrated by it's shortcomings, `@rbnd/react-dark-mode` was created.

[![npm version](https://badge.fury.io/js/@rbnd%2Freact-dark-mode.svg)](https://badge.fury.io/js/@rbnd%2Freact-dark-mode)

## How it works

This package will take care of switching between `light`, `dark` and `system` preference. It will also get rid of the annoying flash between dark-light mode you get when opening a webpage. Supports `typescript` out of the box!

## Example

[Demo example project](https://rbnd-react-dark-mode.netlify.app), the source code can be found in [example directory](https://github.com/RBND-studio/react-dark-mode/tree/master/example) of this repository.

## Installation

```bash
$ npm i @rbnd/react-dark-mode
# Or Yarn
$ yarn add @rbnd/react-dark-mode
# Or pnpm
$ pnpm add @rbnd/react-dark-mode

```

## Usage

### 1. Add provider to the root of your app

```jsx
import { DarkModeProvider } from "@rbnd/react-dark-mode"

const App = () => {

  // ...

  return (
    <DarkModeProvider>
      {/* Your other components */}
    </DarkModeProvider>
  )
}
```

### 2. Change modes

```jsx
import { useDarkMode } from "@rbnd/react-dark-mode"

const Settings = () => {
  const { mode, setMode } = useDarkMode()

  return (
    <Button
      onClick={() => setMode("dark")}
      active={mode === "dark"}>
      Dark
    </Button>
  )
}
```

### 3. Implement styles

Class name will be applied to the html element.

```css
.light-mode {
  color-scheme: light;
  background-color: white;
  color: black;
}
.dark-mode {
  /* Don't forget the color-scheme css attribute. This will avoid light scrollbars in dark mode. */
  color-scheme: dark;
  background-color: black;
  color: white;
}
```

### 4. Get rid of the flash

Copy the `noflash.min.js` from `node_modules/@rbnd/react-dark-mode/src/noflash.min.js` to your `public` folder and add it as a script to your `<head>`.

```html
<html>
  <head>
    <!-- ... -->
    <script src="/noflash.min.js"></script>
  </head>
  <body>
  </body>
</html>
```

---

Created by [rbnd.studio](https://rbnd.studio/). Check out [Atmos](https://atmos.style/) our tool for creating professional color palettes, hey it's free!
npm package: @rbnlffl/esbuild-plugin-browser-sync
Description: easily integrate browser-sync into your esbuild development flow 🌊
Author: Robin Löffel
Latest version: 0.0.1

# @rbnlffl/esbuild-plugin-browser-sync

[![latest version on npm](https://img.shields.io/npm/v/@rbnlffl/esbuild-plugin-browser-sync)](https://www.npmjs.com/package/@rbnlffl/esbuild-plugin-browser-sync)
[![npm downloads a month](https://img.shields.io/npm/dm/@rbnlffl/esbuild-plugin-browser-sync)](https://www.npmjs.com/package/@rbnlffl/esbuild-plugin-browser-sync)
[![browser-sync dep](https://img.shields.io/npm/dependency-version/@rbnlffl/esbuild-plugin-browser-sync/browser-sync)](https://github.com/BrowserSync/browser-sync)
[![required node version](https://img.shields.io/node/v/@rbnlffl/esbuild-plugin-browser-sync)](https://github.com/nodejs/Release)
[![package license](https://img.shields.io/npm/l/@rbnlffl/esbuild-plugin-browser-sync)](license)

> easily integrate [`browser-sync`](https://github.com/BrowserSync/browser-sync) into your [`esbuild`](https://github.com/esbuild/esbuild) development flow 🌊

## install

```bash
yarn install --dev @rbnlffl/esbuild-plugin-browser-sync
```

## use

```typescript
import esbuild from "esbuild";
import browserSync from "@rbnlffl/esbuild-plugin-browser-sync";

const context = await esbuild.context({
  /* esbuild config */
  plugins: [
    browserSync({ /* options */ })
  ]
});
context.watch();
```

## config

all of the supplied configuration options get directly forwarded to `browser-sync`. you can find the official docs here: https://browsersync.io/docs/options

## caveats

since `esbuild` doesn't expose to its plugins whether it's in watch mode or not, whenever you include this bad boy, it will spin up a brand new `browser-sync` session for you. even if you just once call `esbuild.build`. so be mindful of that.

furthermore, if you are in `esbuild`'s watch mode, and you've configured `browser-sync` to watch certain files, as well, make sure there are no overlaps in your [`files`](https://browsersync.io/docs/options#option-files) prop and the actual sources you're piping to `esbuild`. the plugin will automatically trigger a [`reload`](https://browsersync.io/docs/api#api-reload) every time one of the source files that `esbuild` knows of, change. this may otherwise lead to multiple reloads, and unnecessary work for your cpu.

the best way to use this plugin is to have `esbuild` take care of watching the source files, and instruct `browser-sync` to watch assets that are outside of what you process via esbuild, like html files, an svg sprite, images, and so on. this allows you to have a smooth and very performant dx for web pages.

## license

[mit](license)
npm package: @rbnlffl/gulp-sass
Description: Lightweight gulp wrapper around sass. 🏄🏼‍♂️
Author: Robin Löffel
Latest version: 0.2.3

# @rbnlffl/gulp-sass

[![latest version on npm](https://img.shields.io/npm/v/@rbnlffl/gulp-sass)](https://www.npmjs.com/package/@rbnlffl/gulp-sass)
[![npm downloads a month](https://img.shields.io/npm/dm/@rbnlffl/gulp-sass)](https://www.npmjs.com/package/@rbnlffl/gulp-sass)
[![required node version](https://img.shields.io/node/v/@rbnlffl/gulp-sass)](https://github.com/nodejs/Release)
[![gulp peer dep](https://img.shields.io/npm/dependency-version/@rbnlffl/gulp-sass/peer/gulp?label=gulp%20peer%20dep)](https://github.com/gulpjs/gulp)
[![sass peer dep](https://img.shields.io/npm/dependency-version/@rbnlffl/gulp-sass/peer/sass?label=sass%20peer%20dep)](https://github.com/sass/dart-sass)

> Lightweight [`gulp`](https://github.com/gulpjs/gulp) wrapper around [`sass`](https://github.com/sass/sass). 🏄🏼‍♂️

## How

```sh
npm i -D @rbnlffl/gulp-sass sass
```

```js
const { src, dest } = require('gulp');
const sass = require('@rbnlffl/gulp-sass');

const css = () => src('source/css/*.scss')
  .pipe(sass())
  .pipe(dest('public/css'));

module.exports.css = css;
```

## Config

The plugin takes an options object and passes it directly to `sass`. You can see a full documentation of what props are available [here](https://sass-lang.com/documentation/js-api/interfaces/options/). Mind you that directly manipulating options regarding the file input and sourcemaps output is strongly discouraged, as this gets handled by the plugin itself. Below you'll find the most common options.

### `includePaths`

Type: `string[]`<br>
Default: `undefined`<br>

Tells `sass` where it can look for files to import from. A popular use case would be `node_modules`.

### `outputStyle`

Type: `string`<br>
Default: `'expanded'`<br>

Controls the output style of the emitted CSS chunks. Valid options are `'expanded'` and `'compressed'`.

### `indentType`

Type: `string`<br>
Default: `'space'`<br>

Whether to use a `space` or a `tab` character to use for indentation. Used together with [`indentWidth`](#indentwidth).

### `indentWidth`

Type: `number`<br>
Default: `2`<br>

How many `space` or `tab` characters should be used per indentation level.

## Why a new plugin?

Because [`gulp-sass`](https://github.com/dlmanning/gulp-sass) uses [`node-sass`](https://github.com/sass/node-sass) under the hood, which in turn relies on [`node-gyp`](https://github.com/nodejs/node-gyp) and needs to be built every fresh install. This is prone to leading to compile errors on newer versions of macOS. See [here](https://github.com/nodejs/node-gyp/blob/master/macOS_Catalina.md), for example.

## License

MIT
npm package: @rbnlffl/rollup-plugin-browser-sync
Description: easily integrate browser-sync into your rollup development flow 🌊
Author: Robin Löffel
Latest version: 0.0.3

# @rbnlffl/rollup-plugin-browser-sync

[![latest version on npm](https://img.shields.io/npm/v/@rbnlffl/rollup-plugin-browser-sync)](https://www.npmjs.com/package/@rbnlffl/rollup-plugin-browser-sync)
[![npm downloads a month](https://img.shields.io/npm/dm/@rbnlffl/rollup-plugin-browser-sync)](https://www.npmjs.com/package/@rbnlffl/rollup-plugin-browser-sync)
[![browser-sync dep](https://img.shields.io/npm/dependency-version/@rbnlffl/rollup-plugin-browser-sync/browser-sync)](https://github.com/BrowserSync/browser-sync)
[![required node version](https://img.shields.io/node/v/@rbnlffl/rollup-plugin-browser-sync)](https://github.com/nodejs/Release)
[![package license](https://img.shields.io/npm/l/@rbnlffl/rollup-plugin-browser-sync)](license)

> easily integrate [`browser-sync`](https://github.com/BrowserSync/browser-sync) into your [`rollup`](https://github.com/rollup/rollup) development flow 🌊

## install

```bash
yarn install --dev @rbnlffl/rollup-plugin-browser-sync
```

## use

```typescript
import browserSync from "@rbnlffl/rollup-plugin-browser-sync";

export default {
  /* rollup config */
  plugins: [
    /* rollup plugins */
    browserSync({ /* options */ })
  ]
};
```

_be aware that the plugin only works in watch mode_

## config

all of the supplied configuration options get directly forwarded to `browser-sync`. you can find the official docs here: https://browsersync.io/docs/options

## license

[mit](https://choosealicense.com/licenses/mit)