open-index/open-npm huggingface dataset:
npm package: @jamsesso/use-async
Description: useAsync is a React hook that makes using async functions in your components easier
Author: Sam Jesso
Latest version: 1.1.0

# useAsync

The `useAsync` hook makes consuming async function in React components easier. Inspired by the Apollo `useQuery`/`useMutation` hooks, `useAsync` aims to provide a similar API for general-purpose async functions.

# Dependencies

- Compatible with React >= 16.8.0.
- Written in ES5 CJS.

# Install

```
npm i --save @jamsesso/use-async
```

# Usage

```js
import { useEffect, useCallback } from 'react';
import useAsync from '@jamsesso/use-async';

function getMoviesFromApi() {
  return fetch(/* your async code example */).then(res => res.json());
}

function MovieList() {
  const [getMovieList, { loading, error, result }] = useAsync(getMoviesFromApi);

  useEffect(() => {
    getMovieList();
  }, []);

  const refreshList = useCallback(() => getMovieList(), []);

  return (
    <div class="movie-list">
      <h1>Movies</h1>
      {loading && <p>Loading...</p>}
      {error && <p>Oh no! Unable to load the movies 😭</p>}
      {result && (
        <ul>
          {result.map(movie => (
            <li key={movie.id}>{movie.title}</li>
          ))}
        </ul>
      )}
      <button onClick={refreshList}>Refresh movie list</button>
    </div>
  );
}
```

A few key things are outlined in this example:

- `useEffect` does not need an IIFE to call the function because the component re-renders as the promise is executed.
- `getMoviesFromApi` is the original async function.
- You can invoke `getMovieList` any number of times - state will cycle between `loading`, `error`, and `result` properly. Here it is used for the initial load and also to refresh the list on a button click event.
npm package: @jamshaidazeem/test-react-lib
Description: Made with create-react-library
Author: jamshaidazeem
Latest version: 1.0.6

# test-react-lib

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/test-react-lib.svg)](https://www.npmjs.com/package/test-react-lib) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save test-react-lib
```

## Usage

```tsx
import React, { Component } from 'react'

import MyComponent from 'test-react-lib'
import 'test-react-lib/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [jamshaidazeem](https://github.com/jamshaidazeem)
npm package: @jamshop/eleventy-filter-dump
Description: A useful debug filter for 11ty that can dump almost anything.
Latest version: 1.0.4

# Eleventy Filter - Dump

A useful debug filter for 11ty that can dump almost anything. 

Install:

```
npm install @jamshop/eleventy-filter-dump
```

## Usage

In you main config `.eleventy.js`: 
```
const dumpFilter = require("@jamshop/eleventy-filter-dump");

module.exports = (eleventyConfig) => {
  eleventyConfig.addFilter("dump", dumpFilter);
  // and the rest of your config
};
```

Then in your templates:

```
{{ "something" | dump | safe }}
```

It needs `| safe` because it will output a `<script>` tag. The script renders the formatted contents of the dump to the top of the page.

It uses the Node inspect utility: https://nodejs.org/api/util.html#util_util_inspect_object_options

This means you can dump almost anything including many object in 11ty that normally can't be stringified:

```
{{ collections | dump | safe }}
```

It's formatted and colored with syntax highlighting.

It's probably the best dump filter for 11ty. This is objectively true.
npm package: @jamshop/eleventy-plugin-array-filters
Description: A bunch of useful array filters for 11ty.
Latest version: 1.0.1

# Eleventy Plugin - Array filters

A bunch of useful array filters for 11ty.

Install:

```
npm install @jamshop/eleventy-plugin-array-filters
```

## Usage

In you main config `.eleventy.js`: 

```js
const pluginArrayFilters = require("@jamshop/eleventy-plugin-array-filters");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginArrayFilters);
  // and the rest of your config
};
```

Or import an individual filter:

```js
const { unique } = require("@jamshop/eleventy-plugin-array-filters");

module.exports = (eleventyConfig) => {
  eleventyConfig.addFilter("unique", unique);
  // and the rest of your config
};
```

Filters include:

 - `isArray`
 - `isNotArray`
 - `isEmpty`
 - `isNotEmpty`
 - `flat`
 - `ampersandList`
 - `sentenceList`
 - `ul`
 - `ol`
 - `dl`
 - `sum`

### Examples

All examples assume the following front-matter data is available and use nunjucks templates.

```
---
fruits: ["banana", "mango", "peach", "apple", "apple", "kiwi", "strawberry"]
count: [1, 3, 5, 1, 2, 3]
empty: []
nested: [["banana"], ["mango","peach"]]
--- 
```

#### `isArray`

```
{% if fruits | isArray %}
  <p>Yes, "fruits" is an array</p>
{% endif %}
```

#### `isNotArray`

```
{% if "notArray" | isNotArray %}
  <p>Yes, the string "notArray" is not an array.</p>
{% endif %}
```

#### `isEmpty`

```
{% if empty | isEmpty %}
  <p>Yes, "empty" is empty.</p>
{% endif %}
```

#### `isNotEmpty`

```
{% if fruits | isNotEmpty %}
  <p>Yes, "fruits" is not empty.</p>
{% endif %}
```

Result: `<p>There are 7 fruits in the array.</p>`

#### `flat`

```
<p>
  nested has {{ nested | count }} items, 
  but "nested | flat: has {{ nested | flat | count }} items.
</p>

```

Result: `<p>nested has 2 items, but "nested | flat" has 3 items</p>`

#### `ampersandList`

```
<p>{{ fruits | ampersandList }}</p>
```
Result: `banana, mango, peach, apple, apple, kiwi & strawberry`

#### `sentenceList`

```
<p>{{ fruits | sentenceList }}</p>
```
Result: `banana, mango, peach, apple, apple, kiwi and strawberry`
#### `ul`

```
{{ fruits | ul | safe }}
```
Result: 

```html
<ul>
  <li>banana</li>
  <li>mango</li>
  <li>peach</li>
  <li>apple</li>
  <li>apple</li>
  <li>kiwi</li>
  <li>strawberry</li>
</ul>
```

#### `ol`

```
{{ fruits | ol | safe }}
```
Result: 

```html
<ol>
  <li>banana</li>
  <li>mango</li>
  <li>peach</li>
  <li>apple</li>
  <li>apple</li>
  <li>kiwi</li>
  <li>strawberry</li>
</ol>
```
#### `dl`

```
{{ fruits | dl | safe }}
```
Result: 

```html
<dl>
  <dt>banana</dt>
  <dt>mango</dt>
  <dt>peach</dt>
  <dt>apple</dt>
  <dt>apple</dt>
  <dt>kiwi</dt>
  <dt>strawberry</dt>
</dl>
```

#### `sum`

```
<p>The sum of count is: {{ count | sum }}</p>
```
Result: `The sum of count is: 15`
npm package: @jamshop/eleventy-plugin-avatars
Description: Converts an email or any unique identifier into an SVG avatars using: https://github.com/DiceBear/avatars
Latest version: 1.0.0

# Eleventy Plugin - Avatars

Converts an email or any unique identifier into an SVG avatars using: https://github.com/DiceBear/avatars

Install:

```
npm install @jamshop/eleventy-plugin-avatar
```

## Usage

In config:

```js
const pluginAvatars = require("@jamshop/eleventy-plugin-avatars");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginAvatars, options);
  // and the rest of your config
};
```
Options can be set for each of the sprite types using the following keys:

{
  avataaars: { ...options },
  bottts: { ...options },
  female: { ...options },
  gridy: { ...options },
  human: { ...options },
  identicon: { ...options },
  initials: { ...options },
  jdenticon: { ...options },
  male: { ...options },
}

See https://avatars.dicebear.com/styles/avataaars#options for examples of options available to the `avataaars` sprite package.

In templates:

```html
<div class="grid">
  {{ "MikeRiethmuller" | avataaarsAvatar | safe }}
  {{ "MikeRiethmuller" | botttsAvatar | safe }}
  {{ "MikeRiethmuller" | femaleAvatar | safe }}
  {{ "MikeRiethmuller" | gridyAvatar | safe }}
  {{ "MikeRiethmuller" | humanAvatar | safe }}
  {{ "MikeRiethmuller" | identiconAvatar | safe }}
  {{ "MikeRiethmuller" | jdenticonAvatar | safe }}
  {{ "MikeRiethmuller" | maleAvatar | safe }}
  {{ "MikeRiethmuller" | avatar | safe }}
</div>
```

A default sprite package can be selected with the `default` option, e.g. `{default: "avataaars" }`. This will allow you to use the `avatar` filter:

```
  {{ "MikeRiethmuller" | avatar | safe }}
  ```

(`avataaars` is the default for the `avatar` filter)

Also included are `gravatar`, `githubAvatar` and `twitterAvatar` options. These work a little differently in that they provide an image src. The value should match username for the platform.

Usage:

```html
<img src="{{ "mike@madebymike.com.au" | gravatar }}"/>
<img src="{{ "MadeByMike" | githubAvatar }}">
<img src="{{ "MikeRiethmuller" | twitterAvatar }}">
```

Github allows a size option however the maximum size is `460`:

```
{
  github: { size: 200 }
}
```

Gravatar options can be seen here: https://github.com/emerleite/node-gravatar#readme


```
{
  gravatar: { ...options }
}
```

Twiter does not provide an official API or any customisation options.
npm package: @jamshop/eleventy-plugin-esbuild
Description: Install:
Author: Mike Riethmuller
Latest version: 1.0.2

# Eleventy Plugin - ESbuild

Install:

```
npm install @jamshop/eleventy-plugin-esbuild
```

## Usage

In you main config `.eleventy.js`: 
```js
const pluginESbuild = require("@jamshop/eleventy-plugin-esbuild");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginESbuild, {
    entryPoints: {
      main: "src/index.js"
    }
    output: "_site/js"
  });
  // and the rest of your config
};
```

This will transpile JavaScript in`src/index.js` to `_site/js/main.js`. 

Their are 2 main options, `entryPoints` which is required and should contain a set of key/value pairs. The key represents the output file name (without extensions) and the value is the path to the source file. 

The second option `output` is optional although required in most situations. This is the output directory for the transpiled JavaScript. The generated file path will be a combination of the key and the `output`.

The third option is `esbuild` which allows you to provide options directly to esbuild's [Build API](https://esbuild.github.io/api/#build-api). If using esbuild options directly you may wish to prevent the plugin from generating the `outfile` by not providing the `output` option above.

## Examples

React:

```js
  eleventyConfig.addPlugin(pluginEsbuild, {
    entryPoints: { "main-react": require.resolve("./stubs/react.jsx") }, 
    output: "_site/js",
  });
```

Esbuild will automatically recognise some file extensions such as JSX and apply the appropiate loaders.

Preact:

```js
eleventyConfig.addPlugin(pluginEsbuild, {
  entryPoints: { "main-preact": require.resolve("./stubs/preact.js") }, 
  output: "_site/js",
  esbuild: {
    loader: {".js": "jsx"},
    jsxFactory: "h"
  }
});
```
It's also possible to specify which `loader` to use and which `jsxFactory`.

## Bonus

It also comes with a shortcode:

```js
const pluginESbuild = require("@jamshop/eleventy-plugin-esbuild");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPairedShortcode("javascript", pluginEsbuild.esBuildShortcode)
  // and the rest of your config
};
```

Get your esbuild on in templates with a shortcode:

```
{{#javascript}}  
  console.log("hello world!");
{{/javascript}}`
```

## Bonus Bonus

It also comes with a transform:

```js
const pluginESbuild = require("@jamshop/eleventy-plugin-esbuild");

module.exports = (eleventyConfig) => {
  eleventyConfig.addTransform("transform-name", pluginESbuild.esBuildTransform);
  // and the rest of your config
};
```
Will transform the following file types: "js", "jsx", "ts", "tsx".
npm package: @jamshop/eleventy-plugin-images
Description: Dynamically resizes images on the fly with Sharp. Rather than preprocessing all the images in an assets folder this plugin will wait until the shortcode is used and only process the images required in your templates.
Author: Mike Riethmuller
Latest version: 1.1.1

# Eleventy Plugin - Images

Dynamically resizes images on the fly with Sharp. Rather than preprocessing all the images in an assets folder this plugin will wait until the shortcode is used and only process the images required in your templates.

If the same image is used across multiple pages the image processing will only be done once. 

Install:

```
npm install @jamshop/eleventy-plugin-images
```

### Usage

In `.eleventy.js` (minimal configuration here in favour of a flexible shortcode).

```js
eleventyConfig.addPlugin(imagePlugin, {
  siteRoot: "_site", // The directory you compile 11ty to. Sorry, I need this to construct URLs 
  input: "src/images/", // The input directory this is where we look for source images
  output: "_site/assets/", // The output directory (must be in the siteRoot)
});
``` 

In templates:

```
{% image filename, alt_text, width, height, gravity %}
```

#### Single dimension (no crop)
````
{% image "test-image.jpg", "a beach from above" 200 %}
````

#### Crop center (default)

````
{% image "test-image.jpg", "a beach from above", 200, 150 %}
````

#### Crop south

````
{% image "test-image.jpg", "a beach from above", 200, 150, "south" %}
````

#### Crop north

````
{% image "test-image.jpg", "a beach from above", 200, 150, "north" %}

````

#### URL only  

```
{% imageURL "test-image.jpg", 500, 250, "south" %}{% imageURL "test-image.jpg", 500, 250, "south" %}
```
npm package: @jamshop/eleventy-plugin-scss
Description: Install:
Latest version: 1.0.0

# Eleventy Plugin - SCSS

Install:

```
npm install @jamshop/eleventy-plugin-scss
```

## Usage

In you main config `.eleventy.js`: 
```js
const pluginSCSS = require("@jamshop/eleventy-plugin-scss");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginSCSS, {
    entryPoints: {
      main: "src/scss/main.scss"
    }
    output: "_site/css"
  });
  // and the rest of your config
};
```

This will transpile SCSS in`src/scss/main.scss` to `_site/css/main.css`. 

Their are 2 options, `entryPoints` which is required and should contain a set of key/value pairs. The key represents the output file name (without file extensions) and the value is the path to the source file. 

The second option `output` is optional although required in most situations. This is the output directory for the compiled CSS. The generated file path will be a combination of the key and the `output` option.

The plugin will take note of any files changed and add them to the watcher. It's smart about re-building only changed files.

## Bonus

It also comes with a shortcode:

```js
const pluginSCSS = require("@jamshop/eleventy-plugin-scss");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPairedShortcode("scss", pluginSCSS.scssShortcode)
  // and the rest of your config
};
```

Get your scss on in templates with a shortcode (this example uses handlebars):

```
{{#javascript}}  
  console.log("hello world!");
{{/javascript}}`
```

## Todo: 

 - Add a transform
npm package: @jamshop/eleventy-plugin-string-filters
Description: A bunch of useful string filters for 11ty.
Latest version: 1.0.0

# Eleventy Plugin - String filters

A bunch of useful string filters for 11ty.

Install:

```
npm install @jamshop/eleventy-plugin-string-filters
```

## Usage

In your main config `.eleventy.js`: 

```js
const pluginStringFilters = require("@jamshop/eleventy-plugin-string-filters");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginStringFilters);
  // and the rest of your config
};
```

Or import an individual filter:

```js
const { plural } = require("@jamshop/eleventy-plugin-string-filters");

module.exports = (eleventyConfig) => {
  eleventyConfig.addFilter("plural", unique);
  // and the rest of your config
};
```

Filters include:

 - `camelize`
 - `deslugify`
 - `embedUrl`
 - `excerpt`
 - `isAlpha`
 - `isAlphanumeric`
 - `isEmail`
 - `isEmbeddable`
 - `isNumeric`
 - `isUrl`
 - `lcfirst`
 - `singular`
 - `singular`
 - `plural`
 - `minify`
 - `readTime`
 - `swapCase`
 - `title`
 - `ucfirst`
 - `underscored`
 - `wordCount`
npm package: @jamshop/eleventy-plugin-svg
Description: A shortcode to fetch and optimise SVG assets in 11ty.
Author: Mike Riethmuller
Latest version: 2.0.0

# Eleventy Plugin - SVG

A simple shortcode to fetch and optimise SVG assets. Always will always return inline SVG.

Install:

```
npm install @jamshop/eleventy-plugin-svg
```

### Usage

In `.eleventy.js`:

```js
eleventyConfig.addPlugin(svgPlugin, {
  input: "src/svg/"
});
``` 

In templates:

```
{% svg "name-of-svg", "optional classnames added to svg element" %}
```

Filename should be without the extension (plugin assumes `.svg`).
npm package: @jamshop/eleventy-plugin-tailwind
Description: Tailwind CSS for 11ty.
Latest version: 1.4.0

# Eleventy Plugin - Tailwind

Install:

```
npm install @jamshop/eleventy-plugin-tailwind autoprefixer postcss tailwindcss
```

## Usage

In you main config `.eleventy.js`: 
```js
const pluginTailwind = require("@jamshop/eleventy-plugin-tailwind");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginTailwind, {
    entry: "src/tailwind.css",
    output: "_site/css/tailwind.css",
    inputDir: "site"
  });
  // and the rest of your config
};
```

This will compile `src/tailwind.css` to `_site/css/tailwind.css`.

In `src/tailwind.css` you can add Tailwind directives such as:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

The `inputDir` option is required and should match your 11ty input directory. This is used to create a default Tailwind config that will correctly purge unused classnames from tailwindCSS. 

The default config can be extended by the inclusion of a `tailwind.config.js` file in the root directoy of your project or by passing a `tailwindConfig` option to the plugin. These option will be merged with the default configuration.

Tailwind v2 will only purge when `NODE_ENV` is set to `production`: https://tailwindcss.com/docs/optimizing-for-production. This is not a requirement for V3.
npm package: @jamshop/eleventy-plugin-typography
Description: This is just a thin wrapper around: https://github.com/ekalinin/typogr.js with the 2 additional filters `nl2br` and `paragraphs`.
Latest version: 1.0.0

# Eleventy Plugin - Typography

This is just a thin wrapper around: https://github.com/ekalinin/typogr.js with the 2 additional filters `nl2br` and `paragraphs`.

Install:

```
npm install @jamshop/eleventy-plugin-typography
```

## Usage

In you main config `.eleventy.js`: 
```
const typographyPlugin = require("@jamshop/eleventy-plugin-typography");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(typographyPlugin);
  // and the rest of your config
};
```

Then in your templates:

```
{{ content | typogrify | safe }}
```

Applies various transformations to plain text in order to deliver typographically-improved HTML. See the Typogrify docs for: https://github.com/ekalinin/typogr.js info. It needs the `| safe` filter because it will output HTML.

Each of the individual `typogr` can be used as a filter:

```
{{ content | typogrify | safe }}
{{ content | caps | safe }}
{{ content | amp  | safe }}
{{ content | initQuotes  | safe }}
{{ content | smartypants  | safe }}
{{ content | widont  | safe }}
{{ content | caps  | safe }}
{{ content | ord  | safe }}
```

There are 2 additional filter that are not part of typogr: 
  - `nl2br` converts new lines to `<br>` 
  - `paragraphs` converts new lines to `<p>`.

Each of these is smart and will collapse empty paragraphs or multiple line breaks.

```
{{ someText | nl2b | safe }}
{{ someText | paragraphs | safe }}
```
npm package: @jamshop/eleventy-plugin-webpack
Description: Install:
Latest version: 1.0.0

# Eleventy Plugin - Webpack

Install:

```
npm install @jamshop/eleventy-plugin-webpack
```

## Usage

In you main config `.eleventy.js`: 
```js
const pluginWebpack = require("@jamshop/eleventy-plugin-webpack");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginWebpack, {
    entryPoints: {
      main: "src/index.js"
    }
    output: "_site/js",
    configFunction, // A function that recieves a webpack config to modify and return
  });
  // and the rest of your config
};
```

This will transpile JavaScript in`src/index.js` to `_site/js/main.js`. 

Their are 3 main options, `entryPoints` which is required and should contain a set of key/value pairs. The key represents the output file name (without extensions) and the value is the path to the source file. 

The second option `output` is optional although required in most situations. This is the output directory for the transpiled JavaScript. The generated file path will be a combination of the key and the `output`.

The third option `configFunction` allows you to modify the webpack config.
npm package: @jamsinclair/react-native-notifications
Description: Advanced Push Notifications (Silent, interactive notifications) for iOS & Android
Latest version: 5.1.1

<h1 align="center">
  <img src=".logo.png"/><br/>
  React Native Notifications
</h1>

![npm](https://img.shields.io/npm/dw/react-native-notifications.svg)
[![Build Status](https://img.shields.io/jenkins/s/http/jenkins-oss.wixpress.com:8080/job/multi-react-native-notifications-master.svg)](https://jenkins-oss.wixpress.com/job/multi-react-native-notifications-master/)
[![npm (tag)](https://img.shields.io/npm/v/react-native-notifications/latest.svg)](https://github.com/wix/react-native-notifications/tree/master)
[![npm (tag)](https://img.shields.io/npm/v/react-native-notifications/snapshot.svg)](https://github.com/wix/react-native-notifications/tree/master)

Handle all the aspects of push notifications for your app, including remote and local notifications, interactive notifications, silent notifications, and more.

**All the native iOS notifications features are supported!**

_For information regarding proper integration with [react-native-navigation](https://github.com/wix/react-native-navigation), follow [this wiki](https://github.com/wix/react-native-notifications/wiki/Android:-working-with-RNN)._

# Requirements

Apps using React Native Notifications may target iOS 10 and Android 5.0 (API 21). You may use Windows, macOS or Linux as your development operating system.

### iOS

<!-- <img src="https://s3.amazonaws.com/nrjio/interactive.gif" alt="Interactive notifications example" width=350/> -->

- Remote (push) notifications
- Local notifications
- Background/Managed notifications (notifications that can be cleared from the server, like Facebook messenger and Whatsapp web)
- PushKit API (for VoIP and other background messages)
- Interactive notifications (allows you to provide additional functionality to your users outside of your application such as action buttons)

### Android

- Receiving notifications in any App state (foreground, background, "dead")
- Built-in notification drawer management
- High degree of code extensibility to allow for advanced custom layouts and any specific notifications behavior as available by [Android's API](https://developer.android.com/training/notify-user/build-notification.html)
- Android equivalent of React-Native's implementation of [`PushNotificationsIOS.getInitialNotification()`](https://facebook.github.io/react-native/docs/pushnotificationios.html#getinitialnotification).

_Upcoming: local notifications, background-state Rx queue (iOS equivalent)_

# Quick Links

- [Getting Started](https://wix.github.io/react-native-notifications/docs/getting-started)
- [API](https://wix.github.io/react-native-notifications/api/general-api)
- [Documentation](https://wix.github.io/react-native-notifications/)

# License

The MIT License.

See [LICENSE](LICENSE)
npm package: @jamsite/jamsite
Description: Jamsite - JAMstack framework
Author: Aleksandr Tsertkov
Latest version: 0.0.30

# jamsite

Jamsite - JAMstack framework where static goes dynamic.

## Overview

This package is intended for production use only: jamsite server or static files generation.

See [@jamsite/jamsite-dev](https://www.npmjs.com/package/@jamsite/jamsite-dev) for development mode.

## Usage

Install `jamsite-cli` globally with `npm i -g @jamsite/jamsite-cli`.

Execute `jamsite start` in a folder with site template (e.g. https://github.com/jamsite/site-starter-hello-world):

`% jamsite start`

Open url from output in a browser:

`jamsite: Accepting connections on http://127.0.0.1:3000`

## TODO

- :heavy_check_mark: implement frontmatter rewrite rules handling
- :heavy_check_mark: implement custom destination file path handling
- :heavy_check_mark: impement multifile handling
- :heavy_check_mark: setup test system
- :heavy_check_mark: support for api and file system routing
- :heavy_check_mark: use micro programmatically
- :heavy_check_mark: split jamsite and jamsite-dev
- :heavy_check_mark: pluggable server middleware (gzip, html minification, etc)
- :heavy_check_mark: static templates (dynamic frontmatter, but static page content)
- :heavy_check_mark: support toml for data-static files
- :heavy_check_mark: windows support
- :heavy_check_mark: pluggable core
- :heavy_check_mark: support jamsite-config
- :heavy_check_mark: task runner
- :heavy_check_mark: support .env
- :heavy_check_mark: config: error pages, headers, redirects, rewrite, etc.
- save generated pages as static files
- i18n concept (locale aware templates, locale aware data)
- data explorer
- fix premature ready event in chokidar

## Performance

```bash
% ./test-performance.sh
Running 40s test @ http://127.0.0.1:3000/hello-world.html
100 connections with 10 pipelining factor

┌─────────┬──────┬──────┬───────┬───────┬─────────┬─────────┬───────────┐
│ Stat    │ 2.5% │ 50%  │ 97.5% │ 99%   │ Avg     │ Stdev   │ Max       │
├─────────┼──────┼──────┼───────┼───────┼─────────┼─────────┼───────────┤
│ Latency │ 0 ms │ 0 ms │ 12 ms │ 13 ms │ 1.22 ms │ 3.67 ms │ 100.33 ms │
└─────────┴──────┴──────┴───────┴───────┴─────────┴─────────┴───────────┘
┌───────────┬─────────┬─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐
│ Stat      │ 1%      │ 2.5%    │ 50%     │ 97.5%   │ Avg     │ Stdev   │ Min     │
├───────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤
│ Req/Sec   │ 61663   │ 61663   │ 79167   │ 79743   │ 78612.4 │ 2769.29 │ 61650   │
├───────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤
│ Bytes/Sec │ 9.44 MB │ 9.44 MB │ 12.1 MB │ 12.2 MB │ 12 MB   │ 424 kB  │ 9.43 MB │
└───────────┴─────────┴─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘

Req/Bytes counts sampled once per second.

3144k requests in 40.05s, 481 MB read
```
npm package: @jamsite/jamsite-cli
Description: Jamsite cli - JAMstack framework cli interface
Author: Aleksandr Tsertkov
Latest version: 0.0.6

# jamsite-cli

Jamsite cli - JAMstack framework command line interface.

# Install

jamsite-cli is inteded to be installed globally, but can will work locally as well.

`npm i -g @jamsite/jamsite-cli`

## Usage

Execute `jamsite` or `npx jamsite` inside your jamsite root directory (the one with package.json).

## Commands

```
Usage: jamsite <command> [options]

Commands:
  jamsite start             Start jamsite server in production mode.
  jamsite start-dev         Start jamsite in development mode.
  jamsite new               Generate new site from template.
  jamsite data              Start node repl with jamsite data context.
  jamsite build             Generate static files.
  jamsite build:<command>   Run local build command given by name.

Options:
  -h, --help                Show help
```
npm package: @jamsite/jamsite-dev
Description: Jamsite - JAMstack framework (development mode)
Author: Aleksandr Tsertkov
Latest version: 0.0.36

# jamsite-dev

Jamsite-dev - Development version of Jamsite framework.

## Usage

Install `jamsite-cli` globally with `npm i -g @jamsite/jamsite-cli`.

Execute `jamsite start-dev` in a folder with site template (e.g. https://github.com/jamsite/site-starter-hello-world):

`% jamsite start-dev`

Open Browsersync url from output in a browser (http://localhost:3000):

```
[Browsersync] Proxying: http://localhost:3030
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.239:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
 ```

## TODO

- :heavy_check_mark: pluggable asset bundler (webpack, rollup)
- restart server on api changes
- dev mode custom error page with mini tutorial
- dev api, e.g. create new page interface from default 404 page
npm package: @jamsite/plugin-helmet
Description: Add security HTTP headers with helmet middleware.
Author: Aleksandr Tsertkov
Latest version: 0.0.1

# plugin-helmet

Add security HTTP headers with helmet middleware.

## Install

`npm i @jamsite/plugin-helmet`

## Options

Options are passed directly to helmet module.

See https://github.com/helmetjs/helmet#how-it-works.
npm package: @jamsite/plugin-robots-txt
Description: Creates robots.txt page
Author: Aleksandr Tsertkov
Latest version: 0.0.2

# plugin-robots-txt

Creates robots.txt file.

## Install

`npm i @jamsite/plugin-robots-txt`

## Options

- `disallow [default:true]`  - outputs Disallow: /
- `sitemap  [default:false]` - outputs Sitemap: /sitemap.xml
npm package: @jamsite/plugin-source-wp
Description: Read Wordpress site data with rest api
Author: Aleksandr Tsertkov
Latest version: 0.0.4

# plugin-source-wp

Wordpress Jamsite source plugin. Reads Wordpress site data with rest api.

## Install

`npm i @jamsite/plugin-source-wp`

## Cache

Downloaded data may be serialized and saved in cache directory as json files.

## Options

- `refreshCache [default:false]` - refetch data and update cache
- `useCache [default:true]` - enable cache
- `endpoint` - wp rest-api endpoint
- `exclude` - array of content types to exclude
npm package: @jamsocket/react
Description: React hooks for interacting with session backends and the Jamsocket platform.
Author: Taylor Baldwin
Latest version: 1.1.6

# @jamsocket/react

[![GitHub Repo stars](https://img.shields.io/github/stars/jamsocket/jamsocket?style=social)](https://github.com/jamsocket/jamsocket)
[![Chat on Discord](https://img.shields.io/discord/939641163265232947)](https://discord.gg/N5sEpsuhh9)
[![npm](https://img.shields.io/npm/v/@jamsocket/react)](https://www.npmjs.com/package/@jamsocket/react)

React hooks for interacting with session backends and the Jamsocket platform.

Read the [docs here](https://docs.jamsocket.com/platform)

## Installation
```bash copy
npm install @jamsocket/react
```

## Example

Here's an example of how different parts of Jamsocket's client libraries work together.

```tsx filename="server.tsx"
import { Jamsocket } from '@jamsocket/server'

const jamsocket = new Jamsocket({
   account: '[YOUR ACCOUNT]',
   token: '[YOUR TOKEN]',
   service: '[YOUR SERVICE]',
   // during development, you can simply pass { dev: true }
})

const connectResponse = await jamsocket.connect() // returns an instance of ConnectResponse
```

```tsx filename="client.tsx"
import { type ConnectResponse, SessionBackendProvider, useReady } from '@jamsocket/react'

function Root() {
  return(
    <SessionBackendProvider connectResponse={connectResponse}>
      <MyComponent sessionBackendUrl={connectResponse.url} />
    </SessionBackendProvider>
  )
}

function MyComponent({ sessionBackendUrl }) {
  const ready = useReady()

  useEffect(() => {
    if (ready) {
      // make a request to your session backend
      fetch(sessionBackendUrl)
    }
  }, [ready])

  return ready ? <MyChildren /> : <Spinner />
}
```

# Library Reference
## @jamsocket/react

### `SessionBackendProvider`
Wrap the root of your project with the `SessionBackendProvider` so that the children components can utilize the React hooks.

<Callout>The `SessionBackendProvider` must be used in conjunction with `@jamsocket/server` in order to access the connect response returned by the `connect` function.</Callout>

```tsx
import { SessionBackendProvider, type ConnectResponse } from '@jamsocket/react'

export default function HomeContainer({ connectResponse }: { connectResponse: ConnectResponse }) {
  return (
    <SessionBackendProvider connectResponse={connectResponse}>
        <Home />
    </SessionBackendProvider>
  )
}
```

#### `useReady`
Is a React hook that returns a boolean that is true if the session backend is ready.
```tsx
import { useReady } from '@jamsocket/react'

const isReady = useReady()
```

### Other exports

The `@jamsocket/react` package also re-exports all of the `@jamsocket/client` and `@jamsocket/types` packages' exports, including classes and types.
npm package: @jamsocket/session-backend
Description: A preview of the upcoming Jamsocket Backend SDK
Latest version: 0.0.5

## Usage

```ts
import { JamsocketBackend } from '@jamsocket/session-backend'

const jamsocketBackend = new JamsocketBackend() // auto-configures itself from environment variables

// listenForRequests is assumed to start your application server on the given port. We can either do this
// before or after awaiting the key assignment, but we MUST be ready for requests on jamsocketBackend.port before
// we call assignment.ready().
listenForRequests(jamsocketBackend.port)

const assignment = await jamsocketBackend.assignment()

console.log('key', assignment.key)
console.log('backendId', assignment.backendId)

// Optionally, do some initialization work here based on the key or other fields of assignment.

assignment.ready()
```
npm package: @jamsr-ui/collapsible
Description: A modern and beautiful Next.js UI components library.
Author: @jamsrworld
Latest version: 0.1.4

# 🚀 **JamsrUI**

**A Next.js UI Components Library for Developers**

> **NOTE**: 🚧 Currently a work in progress. Stay tuned for updates!

## 📖 **Overview**

[JamsrUI](https://jamsr-ui.jamsrworld.com) is a developer-friendly and production-ready UI components library for **Next.js** projects. It simplifies frontend development by offering reusable, customizable, and efficient UI components to help you build world-class websites faster.

## 🚀 Getting Started

Boost & Build your websites using [JamsrUI](https://jamsr-ui.jamsrworld.com).

## ✨ Features

- 🚀 **Production-Ready**: Optimized for modern Next.js projects.
- 🎨 **Customizable**: Easily override styles and themes.
- 🛠️ **Reusable Components**: Save time with prebuilt, efficient UI elements.
- ⚡ **Developer-Friendly**: Simple API and well-documented usage.
- 📦 **Lightweight**: Minimal dependencies for fast performance.
- 🖥️ **Modern Design**: Clean, responsive, and user-friendly components.

## 🌱 Community

We’re thrilled to see the community actively engage with **JamsrUI**! Whether you're sharing feedback, reporting bugs, requesting features, or showcasing projects built with JamsrUI, your involvement helps us grow and improve.

### How to Engage

- 💬 **Report Bugs**: [GitHub Issues](https://github.com/jamsrworld/jamsr-ui/issues)
- 🚀 **Request Features**: Share ideas for new components.
- 🤝 **Showcase Projects**: Let us know how you use JamsrUI.

## Contributing

We welcome contributions from developers of all skill levels!

## ⭐ Support the Project

If you find **JamsrUI** helpful, consider giving it a ⭐ on [GitHub](https://github.com/jamsrworld/jamsr-ui).

## 📄 License

This project is licensed under the [MIT License](https://choosealicense.com/licenses/mit/).
npm package: @jamsr-ui/otp-input
Description: A modern and beautiful Next.js UI components library.
Author: @jamsrworld
Latest version: 0.1.4


# OTP Input

The One-Time Password (OTP) component is designed to facilitate secure, user-friendly and enhancing the user experience during multi-factor authentication.

![see here](https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExNXU5Y3Fzam1peXp3ZnowYjY1bDNxdjlubjRmYjZhdXA3ZmdxNGZyZCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/uTZ1glAAI7o15iC0PV/giphy.gif)


## Getting Started

Live Demo [https://jamsr-ui.jamsrworld.com/components/otp-input](https://jamsr-ui.jamsrworld.com/components/otp-input) to get started with JamsrUI OTP Input.

## Community

We're excited to see the community adopt JamsrUI, raise issues, and provide feedback.
Whether it's a feature request, bug report, or a project to showcase, please get involved!

## Contributing

Contributions are always welcome!

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @jamsr-ui/react
Description: A modern and beautiful Next.js UI components library.
Author: @jamsrworld
Latest version: 0.1.23

# 🚀 **JamsrUI**

**A comprehensive React UI component library designed for developers, with Tailwind CSS integration for seamless styling.**


## 📖 **Overview**

[JamsrUI](https://jamsr-ui.jamsrworld.com) is designed to help developers build modern, fast and visually appealing web applications with ease.

## 🚀 Getting Started 

Boost & Build your websites using [JamsrUI](https://jamsr-ui.jamsrworld.com).

## ✨ Features

- 🚀 **Production-Ready**: Optimized for modern React projects.
- 🎨 **Customizable**: Easily override styles and themes.
- 🛠️ **Reusable Components**: Save time with prebuilt, efficient UI elements.
- ⚡ **Developer-Friendly**: Simple API and well-documented usage.
- 📦 **Lightweight**: Minimal dependencies for fast performance.
- 🖥️ **Modern Design**: Clean, responsive, and user-friendly components.

## 🌱 Community

We’re thrilled to see the community actively engage with **JamsrUI**! Whether you're sharing feedback, reporting bugs, requesting features, or showcasing projects built with JamsrUI, your involvement helps us grow and improve.

### How to Engage

- 💬 **Report Bugs**: [GitHub Issues](https://github.com/jamsrworld/jamsr-ui/issues)
- 🚀 **Request Features**: Share ideas for new components.
- 🤝 **Showcase Projects**: Let us know how you use JamsrUI.

## Contributing

We welcome contributions from developers of all skill levels!

## ⭐ Support the Project

If you find **JamsrUI** helpful, consider giving it a ⭐ on [GitHub](https://github.com/jamsrworld/jamsr-ui).
npm package: @jamsrui/accordion
Description: A modern and beautiful Next.js UI components library.
Author: @jamsrworld
Latest version: 0.1.0

# 🚀 **JamsrUI**

**A comprehensive React UI component library designed for developers, with Tailwind CSS integration for seamless styling.**

## 📖 **Overview**

[JamsrUI](https://jamsr-ui.jamsrworld.com) is designed to help developers build modern, fast and visually appealing web applications with ease.

## 🚀 Getting Started

Boost & Build your websites using [JamsrUI](https://jamsr-ui.jamsrworld.com).

## ✨ Features

- 🚀 **Production-Ready**: Optimized for modern React projects.
- 🎨 **Customizable**: Easily override styles and themes.
- 🛠️ **Reusable Components**: Save time with prebuilt, efficient UI elements.
- ⚡ **Developer-Friendly**: Simple API and well-documented usage.
- 📦 **Lightweight**: Minimal dependencies for fast performance.
- 🖥️ **Modern Design**: Clean, responsive, and user-friendly components.

## 🌱 Community

We’re thrilled to see the community actively engage with **JamsrUI**! Whether you're sharing feedback, reporting bugs, requesting features, or showcasing projects built with JamsrUI, your involvement helps us grow and improve.

### How to Engage

- 💬 **Report Bugs**: [GitHub Issues](https://github.com/jamsrworld/jamsr-ui/issues)
- 🚀 **Request Features**: Share ideas for new components.
- 🤝 **Showcase Projects**: Let us know how you use JamsrUI.

## Contributing

We welcome contributions from developers of all skill levels!

## ⭐ Support the Project

If you find **JamsrUI** helpful, consider giving it a ⭐ on [GitHub](https://github.com/jamsrworld/jamsr-ui).
npm package: @jamsrui/alert
Description: A modern and beautiful Next.js UI components library.
Author: @jamsrworld
Latest version: 0.1.0

# 🚀 **JamsrUI**

**A comprehensive React UI component library designed for developers, with Tailwind CSS integration for seamless styling.**

## 📖 **Overview**

[JamsrUI](https://jamsr-ui.jamsrworld.com) is designed to help developers build modern, fast and visually appealing web applications with ease.

## 🚀 Getting Started

Boost & Build your websites using [JamsrUI](https://jamsr-ui.jamsrworld.com).

## ✨ Features

- 🚀 **Production-Ready**: Optimized for modern React projects.
- 🎨 **Customizable**: Easily override styles and themes.
- 🛠️ **Reusable Components**: Save time with prebuilt, efficient UI elements.
- ⚡ **Developer-Friendly**: Simple API and well-documented usage.
- 📦 **Lightweight**: Minimal dependencies for fast performance.
- 🖥️ **Modern Design**: Clean, responsive, and user-friendly components.

## 🌱 Community

We’re thrilled to see the community actively engage with **JamsrUI**! Whether you're sharing feedback, reporting bugs, requesting features, or showcasing projects built with JamsrUI, your involvement helps us grow and improve.

### How to Engage

- 💬 **Report Bugs**: [GitHub Issues](https://github.com/jamsrworld/jamsr-ui/issues)
- 🚀 **Request Features**: Share ideas for new components.
- 🤝 **Showcase Projects**: Let us know how you use JamsrUI.

## Contributing

We welcome contributions from developers of all skill levels!

## ⭐ Support the Project

If you find **JamsrUI** helpful, consider giving it a ⭐ on [GitHub](https://github.com/jamsrworld/jamsr-ui).
npm package: @jamsrui/alert-dialog
Description: A modern and beautiful Next.js UI components library.
Author: @jamsrworld
Latest version: 0.1.0

# 🚀 **JamsrUI**

**A comprehensive React UI component library designed for developers, with Tailwind CSS integration for seamless styling.**

## 📖 **Overview**

[JamsrUI](https://jamsr-ui.jamsrworld.com) is designed to help developers build modern, fast and visually appealing web applications with ease.

## 🚀 Getting Started

Boost & Build your websites using [JamsrUI](https://jamsr-ui.jamsrworld.com).

## ✨ Features

- 🚀 **Production-Ready**: Optimized for modern React projects.
- 🎨 **Customizable**: Easily override styles and themes.
- 🛠️ **Reusable Components**: Save time with prebuilt, efficient UI elements.
- ⚡ **Developer-Friendly**: Simple API and well-documented usage.
- 📦 **Lightweight**: Minimal dependencies for fast performance.
- 🖥️ **Modern Design**: Clean, responsive, and user-friendly components.

## 🌱 Community

We’re thrilled to see the community actively engage with **JamsrUI**! Whether you're sharing feedback, reporting bugs, requesting features, or showcasing projects built with JamsrUI, your involvement helps us grow and improve.

### How to Engage

- 💬 **Report Bugs**: [GitHub Issues](https://github.com/jamsrworld/jamsr-ui/issues)
- 🚀 **Request Features**: Share ideas for new components.
- 🤝 **Showcase Projects**: Let us know how you use JamsrUI.

## Contributing

We welcome contributions from developers of all skill levels!

## ⭐ Support the Project

If you find **JamsrUI** helpful, consider giving it a ⭐ on [GitHub](https://github.com/jamsrworld/jamsr-ui).
npm package: @jamsrui/alert-popover
Description: A modern and beautiful Next.js UI components library.
Author: @jamsrworld
Latest version: 0.0.12

# 🚀 **JamsrUI**

**A comprehensive React UI component library designed for developers, with Tailwind CSS integration for seamless styling.**


## 📖 **Overview**

[JamsrUI](https://jamsr-ui.jamsrworld.com) is designed to help developers build modern, fast and visually appealing web applications with ease.

## 🚀 Getting Started 

Boost & Build your websites using [JamsrUI](https://jamsr-ui.jamsrworld.com).

## ✨ Features

- 🚀 **Production-Ready**: Optimized for modern React projects.
- 🎨 **Customizable**: Easily override styles and themes.
- 🛠️ **Reusable Components**: Save time with prebuilt, efficient UI elements.
- ⚡ **Developer-Friendly**: Simple API and well-documented usage.
- 📦 **Lightweight**: Minimal dependencies for fast performance.
- 🖥️ **Modern Design**: Clean, responsive, and user-friendly components.

## 🌱 Community

We’re thrilled to see the community actively engage with **JamsrUI**! Whether you're sharing feedback, reporting bugs, requesting features, or showcasing projects built with JamsrUI, your involvement helps us grow and improve.

### How to Engage

- 💬 **Report Bugs**: [GitHub Issues](https://github.com/jamsrworld/jamsr-ui/issues)
- 🚀 **Request Features**: Share ideas for new components.
- 🤝 **Showcase Projects**: Let us know how you use JamsrUI.

## Contributing

We welcome contributions from developers of all skill levels!

## ⭐ Support the Project

If you find **JamsrUI** helpful, consider giving it a ⭐ on [GitHub](https://github.com/jamsrworld/jamsr-ui).
npm package: @jamsrui/autocomplete
Description: A modern and beautiful Next.js UI components library.
Author: @jamsrworld
Latest version: 0.1.0

# 🚀 **JamsrUI**

**A comprehensive React UI component library designed for developers, with Tailwind CSS integration for seamless styling.**

## 📖 **Overview**

[JamsrUI](https://jamsr-ui.jamsrworld.com) is designed to help developers build modern, fast and visually appealing web applications with ease.

## 🚀 Getting Started

Boost & Build your websites using [JamsrUI](https://jamsr-ui.jamsrworld.com).

## ✨ Features

- 🚀 **Production-Ready**: Optimized for modern React projects.
- 🎨 **Customizable**: Easily override styles and themes.
- 🛠️ **Reusable Components**: Save time with prebuilt, efficient UI elements.
- ⚡ **Developer-Friendly**: Simple API and well-documented usage.
- 📦 **Lightweight**: Minimal dependencies for fast performance.
- 🖥️ **Modern Design**: Clean, responsive, and user-friendly components.

## 🌱 Community

We’re thrilled to see the community actively engage with **JamsrUI**! Whether you're sharing feedback, reporting bugs, requesting features, or showcasing projects built with JamsrUI, your involvement helps us grow and improve.

### How to Engage

- 💬 **Report Bugs**: [GitHub Issues](https://github.com/jamsrworld/jamsr-ui/issues)
- 🚀 **Request Features**: Share ideas for new components.
- 🤝 **Showcase Projects**: Let us know how you use JamsrUI.

## Contributing

We welcome contributions from developers of all skill levels!

## ⭐ Support the Project

If you find **JamsrUI** helpful, consider giving it a ⭐ on [GitHub](https://github.com/jamsrworld/jamsr-ui).
npm package: @jamsrui/avatar
Description: A modern and beautiful Next.js UI components library.
Author: @jamsrworld
Latest version: 0.1.0

# 🚀 **JamsrUI**

**A comprehensive React UI component library designed for developers, with Tailwind CSS integration for seamless styling.**

## 📖 **Overview**

[JamsrUI](https://jamsr-ui.jamsrworld.com) is designed to help developers build modern, fast and visually appealing web applications with ease.

## 🚀 Getting Started

Boost & Build your websites using [JamsrUI](https://jamsr-ui.jamsrworld.com).

## ✨ Features

- 🚀 **Production-Ready**: Optimized for modern React projects.
- 🎨 **Customizable**: Easily override styles and themes.
- 🛠️ **Reusable Components**: Save time with prebuilt, efficient UI elements.
- ⚡ **Developer-Friendly**: Simple API and well-documented usage.
- 📦 **Lightweight**: Minimal dependencies for fast performance.
- 🖥️ **Modern Design**: Clean, responsive, and user-friendly components.

## 🌱 Community

We’re thrilled to see the community actively engage with **JamsrUI**! Whether you're sharing feedback, reporting bugs, requesting features, or showcasing projects built with JamsrUI, your involvement helps us grow and improve.

### How to Engage

- 💬 **Report Bugs**: [GitHub Issues](https://github.com/jamsrworld/jamsr-ui/issues)
- 🚀 **Request Features**: Share ideas for new components.
- 🤝 **Showcase Projects**: Let us know how you use JamsrUI.

## Contributing

We welcome contributions from developers of all skill levels!

## ⭐ Support the Project

If you find **JamsrUI** helpful, consider giving it a ⭐ on [GitHub](https://github.com/jamsrworld/jamsr-ui).