open-index/open-npm huggingface dataset:
npm package: @lukesheard/esbuild-scripts
Description: <div align="center"> <h1>Create Esbuild App / esbuild-scripts 🔥</h1>
Latest version: 5.0.0

<div align="center">
<h1>Create Esbuild App / esbuild-scripts 🔥</h1>

<p>An extremely fast create-react-app replacement.</p>
</div>

---

<!-- prettier-ignore-start -->
[![Build](https://github.com/LukeSheard/esbuild-scripts/actions/workflows/node.js.yml/badge.svg)](https://github.com/LukeSheard/esbuild-scripts/actions/workflows/node.js.yml?query=branch%3Amain)
<!-- prettier-ignore-end -->

## What is it?

<img width="15%" align="right" src="https://esbuild.github.io/favicon.svg">

`create-esbuild-app` is a wrapper around `create-react-app` while `esbuild-scripts` is a `react-scripts` compatible CLI which can be dropped in as a replacement. They use the toolchain and development experience already provided by the Create React App ecosystem but provide an faster experience by abstracting esbuild as a bundler and using native esbuild plugins for speed.

`esbuild-scripts` in most cases should be a drop in replacement for `react-scripts`.

## Creating an App

```sh
yarn create @lukesheard/esbuild-app my-app
cd my-app
yarn start
```

If you've previously installed `create-esbuild-app` globally you can run `yarn global remove create-esbuild-app` to remove it - this will ensure that you always use the latest version when creating a new app.

**Note:** The API of `create-esbuild-app` mirrors that of `create-react-app` but will default the template of a new app to _TypeScript_. However if you want to use a custom template you can do so
by supplying a `--template` argument like so

```sh
yarn create @lukesheard/esbuild-app my-app --template my-template
```

Supplying an empty template will default to the JavaScript template from `create-react-app`. This is because in most instances I've noticed users default to this template anyway - so I wanted to abstract this in a way which made it simple to pick convetional defaults.

For more documentation on creating an App refer to the [Create React App documentation](https://create-react-app.dev/docs/folder-structure).
npm package: @lukesilva/banana-phone
Description: Play the Banana Phone theme while running another command
Author: Mathias Buus
Latest version: 1.3.0

# banana-phone

Play the banana phone theme while running another command

```
npm install -g banana-phone

banana-phone # just play banana phone
banana-phone sleep 10 # play for 10 s
banana-phone make # when compiling
banana-phone npm install -g dat # installing node modules
```

## Linux users

Make sure to install the following dependencies first if you are on linux

```
sudo apt-get install sox libsox-fmt-mp3
```

Alternatively you can install mplayer and it'll just use that

## License

MIT
npm package: @lukesmetham/styled-grid
Description: styled-grid React component
Author: Luke Smetham
Latest version: 0.1.15

# styled-grid

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

README coming soon.

## 🗒 Todo

- Add tests.
- Add configurable breakpoints

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @lukesmurray/rehype-img-size
Description: rehype plugin to set local image size properties to img tag
Author: Luke Murray
Latest version: 1.0.3

# rehype-img-size

[![main](https://github.com/ksoichiro/rehype-img-size/actions/workflows/main.yaml/badge.svg?branch=master)](https://github.com/ksoichiro/rehype-img-size/actions/workflows/main.yaml)
[![codecov](https://codecov.io/gh/ksoichiro/rehype-img-size/branch/master/graph/badge.svg?token=71EXFOOV6T)](https://codecov.io/gh/ksoichiro/rehype-img-size)
[![npm](https://img.shields.io/npm/v/rehype-img-size.svg)](https://www.npmjs.com/package/rehype-img-size)

**[rehype](https://github.com/rehypejs/rehype)** plugin to set local image size properties to img tag.

This can be used to improve *Cumulative Layout Shift*: [Images without dimensions](https://web.dev/optimize-cls/#images-without-dimensions)

## Install

```
npm install rehype-img-size
```

## Use

Say we have the following file, `index.md`:

```markdown
![](img.png)
```

And our script, `example.js`, looks as follows:

```js
import {unified} from 'unified'
import parse from 'remark-parse'
import remark2rehype from 'remark-rehype'
import stringify from 'rehype-stringify'
import * as vfile from 'to-vfile'
import rehypeImgSize from 'rehype-img-size'

unified()
  .use(parse)
  .use(remark2rehype)
  .use(rehypeImgSize)
  .use(stringify)
  .process(vfile.readSync('index.md'), function(err, file) {
    if (err) throw err
    console.log(file.value)
  })
```

Now, running `node example` yields:

```html
<p><img src="img.png" alt="" width="640" height="480"></p>
```

See examples/esm directory for the entire code.

You can also keep using this as a CommonJS package. See examples/cjs directory.

## API

### `rehype().use(rehypeImgSize[, options])`

Add `width` and `height` properties to `img` tag which refers local image file.
This plugin read the target file to know the size of the image, so file path must be able to resolve.

Supported formats depend on [image-size](https://www.npmjs.com/package/image-size).

##### `options`

###### `options.dir`

Directory to resolve image file path.
This is useful when Markdown files and image files are located in the separate directories.

## nuxt/content

If you use this plugin for [nuxt/content](https://content.nuxtjs.org/), you can use it by configuring your `nuxt.config.js` like below:

```js
content: {
  markdown: {
    rehypePlugins: [
      [ 'rehype-img-size', { dir: 'static' } ]
    ],
```

## License

MIT &copy; ksoichiro
npm package: @lukestanbery/compass
Description: Package for interfacing with a directory of ports and static IPs addresses on the LAN.
Author: Luke Stanbery
Latest version: 1.0.3

[![Unit Tests](https://github.com/LukeStanbery89/compass/actions/workflows/unit-tests.yml/badge.svg)](https://github.com/LukeStanbery89/compass/actions/workflows/unit-tests.yml)
[![CodeQL](https://github.com/LukeStanbery89/compass/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/LukeStanbery89/compass/actions/workflows/codeql-analysis.yml)

# Compass
Package for interfacing with a directory of ports and static IPs addresses on the LAN.

# Installation
Install Compass using the follow command:

```
npm install @lukestanbery/compass
```

# Configuration
Compass requires two config files:

**Master Config** - This file can have any name and can be located anywhere on the same machine, but it requires the following JSON schema, where `MY_SERVER` is the name given to the device such as a server, and `MY_APP` is the name of a single application:

**Note:** Compass currently only supports locally-hosted master config files. Support for remote/CDN-hosted files is coming soon.

```json
{
    "deviceMap": {
        "MY_SERVER": {
            "ip": "192.168.86.100"
        },
        ...
    },
    "serviceMap": {
        "MY_APP": {
            "device": "MY_SERVER",
            "protocol": "https",
            "port": "1000",
            "path": "/"
        },
        ...
    }
}
```

**.compassrc.json** - This is the config file that contains the Compass config for your project. This file will tell your project where the Master Config file is located. The only supported format is JSON and the only supported file name is `.compassrc.json`.

```json
{
    "configpath": "/path/to/compass/config.json"
}
```

# Usage
```javascript
const compass = require('@lukestanbery/compass');

const pathToMyApp = compass.getServiceURL('MY_APP');
console.log(pathToMyApp); // https://192.168.86.100:1000/
```

# Additional Caveats
Compass currently only supports CommonJS modules.
npm package: @lukestanbery/ledger
Description: A simple logger package.
Author: Luke Stanbery
Latest version: 0.2.0

[![CodeQL](https://github.com/LukeStanbery89/npm-package-boilerplate/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/LukeStanbery89/npm-package-boilerplate/actions/workflows/codeql-analysis.yml)
[![Unit Tests](https://github.com/LukeStanbery89/npm-package-boilerplate/actions/workflows/unit-tests.yml/badge.svg)](https://github.com/LukeStanbery89/npm-package-boilerplate/actions/workflows/unit-tests.yml)

# Ledger
A simple logging package.

# Installation
Install using the follow command:

```
npm install @lukestanbery/ledger
```
npm package: @lukestanbery/meta-importer
Description: Webpack loader which aggregates all modules in a directory into a single module.
Author: Luke Stanbery
Latest version: 1.0.1

# Meta Importer
A Webpack loader which, given a file path, will aggregate all of the modules in the same directory into a single export. This is useful for bootstrapping some of the boilerplate code for event handler files.

# Installation
Install using the follow command:

```
npm install @lukestanbery/meta-importer
```

# Usage
The intended use case of this package is to make the process of registering new event handlers more scalable – but perhaps you will find your use case! As an example, let's take this module whose default export is a function to register websocket events:

```ts
// sockets/index.ts

import socketHandlers from "./handlers";

const registerSocketEvents = (socket) => {
    // Additional event registrations
    for (const [event, handler] of Object.entries(socketHandlers)) {
        socket.on(event, handler);
    }

    return socket;
};

export default registerSocketEvents;
```

Let's now place all of our websocket event handlers in a single subdirectory called `handlers`:

![Screenshot 2023-08-13 at 2 11 28 PM](https://github.com/LukeStanbery89/meta-importer/assets/9427182/c374f303-5d7e-4173-b88a-722b08dcf1f4)

Our `index.ts` file probably looks something like this:

```ts
// sockets/handlers/index.ts

import update_sim_progress from "./update_sim_progress";
import update_sim_status from "./update_sim_status";
/// additional imports

const handlers: { [key: string]: (...params: any) => any } = {
    update_sim_progress,
    update_sim_status,
    // additional handlers...
};

export default handlers;
```

This works, but now every time we add a new handler function, we need to add it to our `handlers` export. Instead, let's replace this file with an empty `index.ts` file and add the following to our webpack.config.json:

```js
// webpack.config.json

module.exports = {
    // Other Webpack config values...
    module: {
        rules: [
            {
                test: /handlers\/index.ts$/,
                loader: "@lukestanbery/meta-importer",
                exclude: [/node_modules/],
            },
        ],
    }
};
```

Now all of our new handlers are automatically registered!
npm package: @lukestanbery/satchel
Description: Simple and lightweight package for caching data to a local key value store.
Author: Luke Stanbery
Latest version: 1.0.4

[![CodeQL](https://github.com/LukeStanbery89/satchel/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/LukeStanbery89/satchel/actions/workflows/codeql-analysis.yml)
[![Unit Tests](https://github.com/LukeStanbery89/satchel/actions/workflows/unit-tests.yml/badge.svg)](https://github.com/LukeStanbery89/satchel/actions/workflows/unit-tests.yml)

# Satchel
Simple and lightweight package for caching data to a local key value store.

# Installation
Install using the follow command:

```
npm install @lukestanbery/satchel
```

# Usage
```javascript
const satchel = require('@lukestanbery/satchel');

const cacheID = 'myVal';
const data = 'Hello, World!';
const lifespan = 15; // lifespan in minutes

satchel.write(cacheID, data, lifespan);

satchel.read('myVal'); // Hello, World!

// 15 minutes later

satchel.read('myVal'); // undefined
```

Here is the full API:
```javascript
// Returns all records in the cache store
satchel.all();

// Logs a new record to the cache store. Lifespan arg is optional. Default lifespan is 15 minutes.
satchel.write(cacheID, data, lifespan);

// Reads a given record from the cache store
satchel.read(cacheID);

// Deletes a given record from the cache store
satchel.remove(cacheID);

// Refreshes the expiry time of a given cache store record. Lifespan arg is optional. Default lifespan is 15 minutes.
satchel.hydrate(cacheID, lifespan);

// Sets a given cache store record to expire right away, but does not delete it from the store.
satchel.invalidate(cacheID);

// Returns the expiry timestamp for a given cache store record.
satchel.getExpiry(cacheID);

// Manually sets the expiry timestamp for a given cache record.
satchel.setExpiry(cacheID, lifespan);
```