open-index/open-npm huggingface dataset:
npm package: @jamen/new-chrome-ext
Description: Create boilerplate for a Chrome extension.
Author: Jamen Marz
Latest version: 0.1.0


# new-chrome-ext

Create boilerplate for a Chrome extension.

```
.
├── src
│   └── manifest.json
├── .gitignore
├── Makefile
├── package.json
└── readme.md
```

## Usage

Use the package with `npx`:

```sh
$ npx @jamen/new-chrome-ext [directory]
```

Defaults to the current directory.

### Makefile

The available Makefile tasks are:

- `make`: Build the extension.
- `make clean`: Remove the build files.
npm package: @jamen/new-common
Description: Base functions for project generators.
Author: Jamen Marz
Latest version: 1.0.0


# @jamen/new-common

Base functions for project generators.

## Install

```sh
npm i @jamen/new-common
```

## Usage

### `create(output, questions, templates)`

Prompts for the `questions` then writes to the `output` using `templates`.

- `output` is the directory where templates created.
- `questions` is a function of `questions(output) -> Promise<Array<question>>` (see [propmts][1])
- `templates` is a function of `templates(answers) -> Promise<Array<template>>` (see [Templates][2])

```js
create(
    process.cwd(),
    questions,
    templates
)
```

### `preview(output, questions, templates)`

Like `create()`, but doesn't create any files. Just runs the prompts and displays a file tree at the end.  This is helpful, because answers can often affect the structure of the output.

### Templates

Each template is:

```js
templates : {
    input: String,
    create: Function<answers> -> Promise<Array<template>>
}

template : {
    from: String,
    to: String,
    use: Function<from, to, answers>
}
```

The function in `use` is called a "directive" or simply a "use", and its job is to copy or create the source (if there is one) to the destination, using prompt answers to add variance to the output.

Note that `from` can be absent, since the files wont always have static contents (i.e. empty contents, or completely dynamic contents).

### Uses

The package has common uses for templating, merging, and creating files.

- `createTemplateNormal`: Templates with [lodash.template][3]
- `createTemplateJson`: Templates and then merges into destination (e.g. a `package.json`)
- `createTemplateUniq`: Templates and enforces unique lines (e.g. a `.gitignore`)
- `createLicense`: Creates a `license` file given a license type answer.
- `createFile`: Creates any file.

An example of how two variations of these functions would look:

```js
const templates = answers => [
    {
        from: 'package.json',
        to: 'package.json',
        use: createTemplateJson
    },
    {
        from: 'lib/project.js',
        to: `lib/${basename(answers.name)}.js`,
        use: createTemplateNormal
    },
    {
        to: 'license',
        use: createLicense
    },
]
```

### Utils

The package has other utility functions for common tasks

- `exactTemplates(input, templates)` is used for composing templates from a different generator.
- `installNpmPackages(dir, packages, dev)` is to install dependencies (with `yarn`, `pnpm`, or `npm`).
- `templateFile(from, answers)` is used for reading and templating a file without writing it yet.
- `message` are functions to create any message logged by the core functions.
- `prompts` is [prompts][1].

Other utils are functions from Node core that have been promisified.

[1]: https://npmjs.com/prompts
[2]: #templates
[3]: https://npmjs.com/lodash.template
npm package: @jamen/new-website
Description: Create boilerplate files for a website.
Author: Jamen Marz
Latest version: 3.0.0


# @jamen/new-website

Create boilerplate files for a website.

```
.
├── src
│   ├── app.js
│   ├── app.scss
│   └── index.html
├── .gitignore
├── Makefile
├── package.json
├── readme.md
└── rollup.config.js
```

## Usage

Use the package with `npx`:

```
$ npx @jamen/new-website [directory]
```

Defaults to the current directory.

### Makefile

The available Makefile tasks are:

- `make`: Build the website files
- `make start`: Starts a dev server with autoreloading.
- `make js css html`: Misc tasks for building files.
- `make clean`: Removes previously built files.
npm package: @jamen/query-string
Description: Small query-string encode and decode.
Author: Jamen Marz
Latest version: 0.1.0


# @jamen/query-string

Small query-string encode and decode.

Fork of [`@whaaaley/query-string`](https://npmjs.com/@whaaaley/query-string) to support Node.js and URI-encoded values.

## Install

```
npm i @jamen/query-string
```

## Usage

Your module system needs to support es2015 modules to use this package.

### `decode(str) -> obj`

```js
decode('?foo=bar&baz=qux&quux=corge')
// => { foo: 'bar', baz: 'qux', quux: 'corge' }
```

### `encode(obj) -> str`

```js
encode({ foo: 'bar', baz: 'qux', quux: 'corge' })
// => '?foo=bar&baz=qux&quux=corge'
```
npm package: @jamen/reload-server
Description: Dev server that reloads from streamed events.
Author: Jamen Marz
Latest version: 2.0.0


# reload-server

Dev server that reloads from streamed events.

![example](example.gif)

## Install

```sh
$ npm i -D @jamen/reload-server
```

## Usage

### `reload-server [entry]`

Start a static server at `entry` (defaults to cwd).

```sh
$ reloader | reload-server [entry]
```

The `reloader` is any command which streams newline-delimited events.
Like [`@jamen/watch-exec`](https://github.com/jamen/watch-exec):

```sh
$ watch-exec --watch "src/*.*" "make" | reload-server srv
```

The server can be configured through the environment variables:

- `RELOAD_ADDRESS`
- `RELOAD_PORT`
npm package: @jamen/serve-dev
Description: ZEIT's serve remade with auto-reloading and Make rebuilding.
Author: Jamen Marz
Latest version: 0.4.0

# serve-dev

ZEIT's [serve](https://github.com/zeit/serve) remade with auto-reloading and GNU Make rebuilding.

![serve-dev demo](./demo.png)

## Install

```
npm i @jamen/serve-dev
```

## Usage

### `serve-dev [public] [options]`

Starts a static file serve with optional rebuilding and auto-reloading.

The available options are:

- `--listen <listen_uri>` Specifies where the server listens from. Its the same as `serve`.
- `--config <path>` Loads a JSON file of `serve-handler` options.
- `--watch <pattern>` A file, directory, or glob pattern where the server watches files.
- `--make <target>` A make target that corrosponds to a watcher.
- `--https` Enables HTTPS. Uses `--key` and `--cert`.
- `--program <name>` Use something other than `make` for building.
- `--reload <path>` The server endpoint where reload events are pushed.

### Auto-reloading

In order for auto-reloading to work, your application needs to support it. This is demonstrated below with simple code.

```js
// Receive a reload
const src = new EventSource('/__reload')

// Call the reload
src.onmessage = () => window.location.reload()
```

However, this is probably too simple. Here is another one that fixes [a bug](https://bugzilla.mozilla.org/show_bug.cgi?id=833462) with Firefox and adds reconnecting.

```js
connect()

function connect () {
    let src

    try {
        src = new EventSource('/__reload')
    } catch (error) {
        // Retry connection every 5 seconds
        setTimeout(() => connect(), 5000)
    }

    if (src && src.readyState < 2) {
        // Call the reload
        src.onmessage = () => window.location.reload()

        // Fix bug with Firefox, close EventSource just before page reloads
        window.addEventListener('beforeunload', () => {
            if (src && src.readyState < 2) {
                src.close()
            }
        })
    }
}
```
npm package: @jamen/svelte-router
Description: Svelte router with a store and components.
Author: Jamen Marz
Latest version: 1.0.0

# @jamen/svelte-router

Svelte router with a store and components.

**NOTE:** Consider using [SvelteKit](https://kit.svelte.dev/) with [@sveltejs/adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static) instead. It has routing.

## Usage

First setup a view with `<Router>`:

```html
<script>
    import { Router } from '@jamen/svelte-router'
    import * as pages from './pages.js'

    const routes = {
        '/': pages.Home,
        '/contact': pages.Contact,
        404: pages.Lost,
        // ...
    }
</script>

<Router {routes} />
```

Then you can use `<Link>` to change the view:

```html
<script>
    import { Link } from '@jamen/svelte-router'
</script>

<nav>
    <Link href='/'>Home</Link>
    <Link href='/contact'>Contact</Link>
</nav>
```

And you can use the `router` store to have your own routing:

```html
<script>
    import { router } from '@jamen/svelte-router'
</script>

{#if $router.query.name}
    <h1>Hello {$router.query.name}!</h1>
{/if}

<p>You visited {$router.path}.</p>
```

If you want to use your own store, then both `Router` and `Link` accept a `router` to change the store:

```html
<script>
    import { Router, Link } from '@jamen/svelte-router'
    import { custom } from '../stores.js'
    // ...
</script>

<Router router={custom} {routes} />
<Link router={custom} href='/'>Home</Link>
```

With this you may want your own link component:

```html
<script>
    import { Link } from '@jamen/svelte-router'
    import { custom } from '../stores.js'
</script>

<Link router={custom} {..$$props}><slot></slot></Link>
```
npm package: @jamen/watch-exec
Description: Watch files, execute commands, and stream the events.
Author: Jamen Marz
Latest version: 1.1.0


# @jamen/watch-exec

Watch files, execute commands, and stream the events.

## Install

```sh
$ npm i -g @jamen/watch-exec
```

## Usage

### `watch-exec --watch <glob> <command>`

Watches the `glob` for changes then executes `command`, while streaming LDJSON events.

```sh
watch-exec --watch "src/**/*.js" "make js"
watch-exec --watch "src/**/*.js" "cat $FILE"
```

Or with multiple watchers:

```sh
watch-exec --watch "src/**/*.js" "make js" \
           --watch "src/**/*.css" "make css" \
           --watch "src/**/*.html" "make html"
```

Use `$FILE` inside the command string if you need access to the path.

### Event stream

Events are [Line-delimited JSON](https://en.wikipedia.org/wiki/JSON_streaming#Line-delimited_JSON) in the form `[type, data]`. The types being `update` and `error`. The events can be used by other tools (i.e. [`@jamen/reload-server`](https://github.com/jamen/reload-server)):

```sh
watch-exec --watch "src/*.*" "make" | reload-server srv
```

### `watchExec(args, write, send)`

A function that takes a `process.argv` array, `write` receives chunks of the commands' output, and a `send` handles the watch events.

```js
watchExec(
    process.argv.slice(3),
    chunk => process.stderr.write(chunk),
    evt => client.send(JSON.stringify(evt))
})
```
npm package: @jamen/watch-make
Description: A file watcher that executes Make and broadcasts the changes through an HTTP server.
Author: Jamen Marz
Latest version: 0.2.0

# watch-make

A file watcher that executes Make and broadcasts the changes through an HTTP server.

This lets you rebuild source files and reload your application.

## Install

```
npm i @jamen/watch-make
```

## Usage

### `watch-make`

Watches files and executes Make targets. It also starts a server and broadcasts the file changes through it, allowing your app to reload.

```
watch-make -p 5001 "src/*.js" "src/*.scss" "src/asset"
```

### Connecting to the server

You use the [`EventSource` web API](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) to connect to the reload server.

```js
const src = new EventSource('http://localhost:5001')

src.onmessage = message => {
    console.log('file', message.data)
}
```

For example, a simple auto-reloader:

```js
new EventSource('https://localhost:5001').onmessage = () => window.location.reload()
```