open-index/open-npm huggingface dataset:
npm package: @starportal/create-workshop
Description: The workshop template for StarPortal
Latest version: 0.3.1

create-workshop
===

The workshop template for StarPortal.

## Usage

```bash
npm create @starportal/workshop@latest
```

## Development

To start the development server, run the following command:

```bash
npx turbo dev
```

To build the project, run the following command:

```bash
npx turbo build
```

To test the project, switch to the temporary directory and run the following command:

```bash
npm exec --package=[path/to/package] create-workshop
```
npm package: @starpower/tsconfig
Description: Shared TypeScript config for my projects
Author: Cody Averett
Latest version: 0.1.0

# tsconfig

> Shared [TypeScript config](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for my projects

## Install

```
$ npm install --save-dev @sindresorhus/tsconfig
```

## Usage

`tsconfig.json`

```json
{
	"extends": "@sindresorhus/tsconfig",
	"compilerOptions": {
		"outDir": "dist",
		"target": "es2018",
		"lib": [
			"es2018"
		]
	}
}
```
npm package: @starptech/expression-parser
Description: Framework agnostic template expression parser
Author: Dustin Deus
Latest version: 0.10.0

# @starptech/expression-parser

Framework agnostic template expression parser

## Installation

```
npm install --save @starptech/expression-parser
```

## Usage

This example shows how we parse HTML

```js
const parse = require('@starptech/expression-parser')
const result = parse(`{ a + /<g></g> b }`, { brackets: ['{', '}'] })
```

## Representation

- `unescape`: Indentify a template marker as escaped. This information is useful to understand why a marker was skipped
- `expressions`: A list of template expressions
  - `start`: Start position
  - `end`: End position
  - `text`: The content of the expression

```json
{
  "unescape": "",
  "expressions": [
    {
      "start": 1,
      "end": 19,
      "text": " a + /<g></g> b "
    }
  ]
}
```

## Details

There may be more than one expression as part of one attribute value or text node, or only one replacing the entire value or node.

When used as the whole attribute value, there's no need to enclose the expression inside quotes, even if the expression contains whitespace.

Single and double quotes can be nested inside the expression.

To emit opening (left) brackets as literal text wherever an opening bracket is expected, the bracket must be prefixed with a backslash (the JS escape char '\'). This character is preserved in the output, but the parser will add a replace property for the attribute or node containing the escaped bracket, whose value is the bracket itself.

## Credits

The parser is a modificated version of [Riot](https://github.com/riot/parser) template expression parser.
npm package: @starptech/hast-util-from-webparser
Description: Produce [HAST](https://github.com/syntax-tree/hast) compatible AST from [Webparser](https://github.com/Prettyhtml/prettyhtml/tree/master/packages/webparser)
Author: Dustin Deus
Latest version: 0.10.0

# @starptech/hast-util-from-webparser

Produce [HAST](https://github.com/syntax-tree/hast) compatible AST from [Webparser](https://github.com/Prettyhtml/prettyhtml/tree/master/packages/webparser)

## Installation

```
@starptech/hast-util-from-webparser
```

## Usage

Say we have the following file, `example.html`:

```html
<!DOCTYPE html><title>Hello!</title>
<h1 id="world">World!<!--after--></h1>
```

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

```javascript
const vfile = require('to-vfile')
const inspect = require('unist-util-inspect')
const HtmlParser = require('@starptech/webparser').HtmlParser
const fromWebparser = require('@starptech/hast-util-from-webparser')

const filepath = 'example.html'
const doc = vfile.readSync(filepath)
const result = new HtmlParser({
  ignoreFirstLf: false,
  decodeEntities: false,
  selfClosingCustomElements: true
}).parse(String(doc), filepath)

const hast = fromWebparser(result.rootNodes)
```

Now, running `node example` yields:

```text
root[3] [data={"selfClosing":false}]
├─ doctype (1:1-1:15, 0-15) [name="html"]
├─ element[1] (1:15-1:36, 15-36) [tagName="title"][data={"selfClosing":false}]
│  └─ text: "Hello!" (1:22-1:28, 22-28)
└─ element[2] [tagName="h1"][properties={"id":"world"}][data={"selfClosing":false}]
   ├─ text: "World!" (1:51-1:57, 51-57)
   └─ comment: "after" (1:57-1:61, 57-61)
```

## API

### `fromWebparser(rootNodes[, options])`

Transform an `Node` to a [**HAST Node**](https://github.com/syntax-tree/hast#ast).
npm package: @starptech/prettyhtml-formatter
Description: Html formatter
Author: Dustin Deus
Latest version: 0.10.0

# @starptech/prettyhtml-formatter

HTML formatter for [HAST](https://github.com/syntax-tree/hast)

## Installation

```
npm install --save @starptech/prettyhtml-formatter
```

## Api

###### `node.data.ignore`

When the data-property `ignore` is `true` the node is skipped for formatting.

## Caveats

The implementation is a derivated from [**rehype-format Version 2.3.0**](https://github.com/rehypejs/rehype-format) rehype-format.
npm package: @starptech/prettyhtml-hast-to-html
Description: Hast to html converter
Author: Dustin Deus
Latest version: 0.10.0

# @starptech/prettyhtml-hast-to-html

[**Hast**](https://github.com/syntax-tree/hast) to HTML converter

## Installation

```
npm install --save @starptech/prettyhtml-hast-to-html
```

## Api

###### `node.data.ignore`

When this property `true` the node is skipped for attribute collapsing.

###### `node.data.preserveAttrWrapping`

When this property `true` the node is skipped for attribute collapsing.

## Caveats

The implementation is a modified version of [hast-util-to-html](https://github.com/syntax-tree/hast-util-to-html).

- Known html attributes aren't handled case-sensitively
- Consider `printWidth`
- Don't encode attribute values
- Don't escape special characters in text
- Don't omit value behind boolean attributes
npm package: @starptech/prettyhtml-hast-util-from-parse
Description: Transform Parse5’s AST to HAST
Author: Dustin Deus
Latest version: 0.0.60

<div align="center">
<h1>@starptech/prettyhtml-hast-util-from-parse</h1>
<i><b>Transform Parse5’s AST to <a href="https://github.com/syntax-tree/hast">HAST</a></b></i>
<p>The implementation is a derivated from <a href="https://github.com/syntax-tree/hast-util-from-parse5">hast-util-from-parse (Version 4.0.2)</a></p>
</div>
<br>

<div align="center">
<code>npm install --save @starptech/prettyhtml-hast-util-from-parse</code>
</div>

<p align="center">
  📖 <a href="https://github.com/syntax-tree/hast-util-from-parse5"><b>Documentation</b></a> 📖
</p>


### Modifications

* Use `@starptech/prettyhtml-hastscript`
* Link `<template>` tags with the tree and remove container elements like `#document-fragment`
npm package: @starptech/prettyhtml-hastscript
Description: Hyperscript compatible DSL for creating virtual HAST trees
Author: Dustin Deus
Latest version: 0.10.0

# @starptech/prettyhtml-hastscript

Hyperscript compatible DSL for creating virtual HAST trees

## Installation

```
npm install --save @starptech/prettyhtml-hastscript
```

## Caveats

The implementation is a modified version of [**Hastscript Version 4.0.0**](https://github.com/syntax-tree/hastscript)

- Known html attributes aren't handled case-sensitively
- Don't coerce or optimize attribute values
- Don't house `<template>` node through `content` property. Handle it like any other element.
npm package: @starptech/prettyhtml-parse
Description: HTML parser and serializer.
Author: Dustin Deus
Latest version: 0.0.25

<p align="center">
    <a href="https://github.com/inikulin/parse5">
        <img src="https://raw.github.com/inikulin/parse5/master/media/logo.png" alt="parse5" />
    </a>
</p>

<div align="center">
<h1>parse5</h1>
<i><b>HTML parser and serializer.</b></i>
</div>
<br>

<div align="center">
<code>npm install --save @starptech/prettyhtml-parse</code>
</div>
<br>

<p align="center">
  📖 <a href="https://github.com/inikulin/parse5/tree/master/packages/parse5/docs/index.md"><b>Documentation</b></a> 📖
</p>

---

<p align="center">
  <a href="https://github.com/inikulin/parse5/tree/master/docs/list-of-packages.md">List of parse5 toolset packages</a>
</p>

<p align="center">
    <a href="https://github.com/inikulin/parse5">GitHub</a>
</p>

<p align="center">
  <a href="http://astexplorer.net/#/1CHlCXc4n4">Online playground</a>
</p>

<p align="center">
    <a href="https://github.com/inikulin/parse5/tree/master/docs/version-history.md">Version history</a>
</p>
npm package: @starptech/prettyhtml-quick
Description: Runs [Prettyhtml](https://github.com/Prettyhtml/prettyhtml) on your changed (based on Git) files.
Author: Dustin Deus
Latest version: 0.10.1

# prettyhtml-quick

Runs [Prettyhtml](https://github.com/Prettyhtml/prettyhtml) on your changed (based on Git) files.

Example:

```
prettyhtml-quick
🔍  Finding changed files since git revision 2eb4337.
🎯  Found 1 changed file.
    ☝  printWidth: 80, tabWidth: 2
✍️  Fixing up test.html.
✅  Everything is awesome!
```

## Install

```shellsession
npm install --save-dev @starptech/prettyhtml-quick
```

## Usage

With [`npx`](https://npm.im/npx): (No install required)

```shellsession
npx @starptech/prettyhtml-quick
```

## Pre-Commit Hook

You can run `prettyhtml-quick` as a pre-commit hook using [`husky`](https://github.com/typicode/husky).

```shellstream
yarn add --dev husky
```

In `package.json`'s `"scripts"` section, add:

```
"precommit": "prettyhtml-quick"
```

## CLI Flags

### `-s --staged`

Only staged files will be formatted, and they will be re-staged after formatting.

## Formatter options

We use prettier [`resolveConfig`](https://prettier.io/docs/en/api.html#prettierresolveconfigfilepath-options) to indentify your tabWidth and printWidth. It will fallback to `.editorconfig`.
npm package: @starptech/prettyhtml-rehype-parse
Description: HTML parser for rehype
Author: Dustin Deus
Latest version: 0.0.60

<div align="center">
<h1>@starptech/prettyhtml-rehype-parse</h1>
<i><b>Parser for unified. Parses HTML to a HAST syntax tree. Used in the <a href="https://github.com/rehypejs/rehype">rehype</a> processor.</b></i>
<p>The implementation is a derivated from <a href="https://github.com/rehypejs/rehype/tree/master/packages/rehype-parse">rehype-parse (Version 4.1.0)</a>.</p>
</div>
<br>

<div align="center">
<code>npm install --save @starptech/prettyhtml-rehype-parse</code>
</div>
<br>

<p align="center">
  📖 <a href="https://github.com/rehypejs/rehype/tree/master/packages/rehype-parse"><b>Documentation</b></a> 📖
</p>

### Modifications

* Use `@starptech/prettyhtml-hast-util-from-parse` and `@starptech/prettyhtml-parse`
npm package: @starptech/rehype-webparser
Description: Parses HTML via [**Webparser**](https://github.com/Prettyhtml/prettyhtml/tree/master/packages/webparser) to a [**HAST**](https://github.com/syntax-tree/hast) syntax tree.
Author: Dustin Deus
Latest version: 0.10.0

# @starptech/rehype-webparser

Parses HTML via [**Webparser**](https://github.com/Prettyhtml/prettyhtml/tree/master/packages/webparser) to a [**HAST**](https://github.com/syntax-tree/hast) syntax tree.

## Installation

```
npm install --save @starptech/rehype-webparser
```

## Usage

This example shows how we parse HTML with [**Webparser**](https://github.com/Prettyhtml/prettyhtml/blob/master/packages/webparser) transform it into [**HAST**](https://github.com/syntax-tree/hast) compatible structure and finally compile that data back to HTML with [hast-util-to-html](https://github.com/syntax-tree/hast-util-to-html).

Say we have the following file, `example.html`:

```html
<!DOCTYPE html>
<title>Hello!</title>
<h1 id="world">World!</h1>
```

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

```javascript
const vfile = require('to-vfile')
const report = require('vfile-reporter')
const unified = require('unified')
const parse = require('@starptech/rehype-webparser')
const toHTML = require('hast-util-to-html')

// A compiler is needed to inform unified how to transform it back to HTML
function stringify() {
  this.Compiler = compiler

  function compiler(tree) {
    return toHTML(tree)
  }
}

unified()
  .use(parse)
  //.use(yourPlugin)
  .use(stringify)
  .process(vfile.readSync('example.html'), function(err, file) {
    console.error(report(err || file))
    console.log(String(file))
  })
```

Now, running `node example` yields:

```text
<!doctype html>
<title>Hello!</title>
<h1 id="world">World!</h1>
```

## API

### `processor.use(webparser[, options])`

Configure the `processor` to read HTML as input and process a
[**HAST**](https://github.com/syntax-tree/hast) syntax tree.

###### `options.*`

[**Webparser**](https://github.com/Prettyhtml/prettyhtml/blob/master/packages/webparser) options.
npm package: @starptech/webparser
Description: Optimized html parser for HTML5 Web Components.
Author: Dustin Deus
Latest version: 0.10.0

# @starptech/webparser

Optimized html parser for HTML5 Web Components.
The parser supports features which are very useful if you want to implement a HTML formatter or anything else where a less strict parser is needed to keep all informations in the ast.

## Installation

```
npm install --save @starptech/webparser
```

## Usage

This example shows how we parse HTML

```js
const parser = new HtmlParser(options)
const result = parser.parse('<div></div>')
```

## Representation

There are four different types of nodes

- Doctype

```js
{
  value: '<!doctype html>',
  sourceSpan: null
}
```

- Element

```js
{
  name: 'div',
  attrs: [],
  children: [],
  implicitNs: false,
  sourceSpan: null,
  startSourceSpan: null,
  endSourceSpan
}
```

Void or self-closing elements can be checked when the `startSourceSpan` is equals the `endSourceSpan`.

- Attribute

```js
{
  name: 'div',
  value: 'foo',
  children: [],
  implicitNs: false,
  sourceSpan:null,
  valueSpan: null
}
```

- Comment

```js
{
  value: 'foo comment',
  sourceSpan: null
}
```

## API

##### `HtmlParser.parse(doc: string): ParseTreeResult`

Parse a document and returns a `ParseTreeResult` result.

###### `options.decodeEntities` (enabled by default)

Decode html entities in text and attributes according to HTML5 specification.

###### `options.ignoreFirstLf` (enabled by default)

Ignore first line feed of `pre`, `textarea` and `listing` tags according to HTML5 specification.

###### `options.selfClosingCustomElements` (disabled by default)

Allow custom self-closing elements.

###### `options.selfClosingElements` (disabled by default)

Allow custom and known self closing HTML elements.

###### `options.insertRequiredParents` (disabled by default)

Insert the required parent element according to the HTML5 specification.

## Credits

The parser is a modificated version of [Angular 6](https://github.com/angular/angular) template parser.
npm package: @starrah/prototype-utils
Description: A set of utils about prototype manipulation. Use as your own risks.
Author: Starrah
Latest version: 0.1.1

prototype-utils
===================
Some utils function about prototype manipulation, mix two class prototypes, create function in which `this` points to itself, and so on.

This package is developed mainly for personal usage. Use as your own risk.

## API
`export function insertPrototype<T>(obj: any, newProto: T): T`  
Make `obj`'s prototype points to `newProto`, and connect the end of the protochain of `newProto` to the start of the protochain of the origin prototype of `obj`.  
return the `obj`.  

`export function extendPrototype<T>(obj: any, objWithNewProto: T)`  
Similar to `insertPrototype`, but:  
- `objWithNewProto` should be a object whose prototype is `newProto`, rather than pass the prototype directly.  
- Properties on `objWithNewProto` will be copied to `obj`, by using `Object.assign(obj, objWithNewProto)`  

`export function getParamsString(count: number): string`  
Create a string as `p0,p1,p2,...,p_count`  

`export function bindSelf<T extends Function>(fn: T): T`  
Create a function whose `this` is bind to itself.  
Typically `a.f.bind(a)` return a new function with `this` points to the `a` object, rather than the new function.  
With this method, you can create a function which will execute `fn` with `this` pointing to the new function itself.  
Example:  
```js
const {bindSelf} = require("@starrah/prototype-utils")
function example() {
    return this
}
// use `bind` function
const a = example.bind(example)
const thisInA = a()
console.log(thisInA === a) // false
// use `bindSelf`
const b = bindSelf(example)
const thisInB = b()
console.log(thisInB === b) // true
```
npm package: @starrnx/puck-plugin-emotion-cache
Description: Inject [emotion cache](https://emotion.sh/docs/@emotion/cache) into the Puck iframe.
Author: Measured Corporation Ltd
Latest version: 0.16.0-canary.ffc4536

# plugin-emotion-cache

Inject [emotion cache](https://emotion.sh/docs/@emotion/cache) into the Puck iframe.

## Quick start

```sh
npm i @measured/puck-plugin-emotion-cache
```

```jsx
import { Puck } from "@measured/puck";
import createEmotionCache from "@measured/puck-plugin-emotion-cache";

// Create your emotion cache plugin. This example configures it for Chakra.
const chakraEmotionCache = createEmotionCache("cha");

// Render Puck
export function Page() {
  return <Puck config={config} data={data} plugins={[chakraEmotionCache]} />;
}
```

## Args

| Param         | Example | Type   | Status   |
| ------------- | ------- | ------ | -------- |
| [`key`](#key) | `cha`   | String | Required |

### Required args

#### `key`

Key to pass to Emotion's [`createCache` method](https://emotion.sh/docs/@emotion/cache#createcache).

## License

MIT © [Measured Corporation Ltd](https://measured.co)
npm package: @starrnx/puck-plugin-heading-analyzer
Description: Visualise your heading outline structure and identify missing heading levels. Respects WCAG 2.
Author: Measured Corporation Ltd
Latest version: 0.16.0-canary.ffc4536

# plugin-heading-analyzer

Visualise your heading outline structure and identify missing heading levels. Respects WCAG 2.

<img src="https://i.imgur.com/POqtgHu.jpg" alt="example" width="156px" />

## Quick start

```sh
npm i @measured/puck-plugin-heading-analyzer
```

```jsx
import { Puck } from "@measured/puck";
import headingAnalyzer from "@measured/puck-plugin-heading-analyzer";
import "@measured/puck-plugin-heading-analyzer/dist/index.css";

...

// Render Puck
export function Page() {
  return <Puck
    config={config}
    data={data}
    plugins={[
        headingAnalyzer
    ]}
  />;
}
```

## License

MIT © [Measured Corporation Ltd](https://measured.co)
npm package: @starrsoftware/aye-aye-api
Description: API Management that allows easy logging and start and stop functions useful for loading screens
Author: starrsoftware
Latest version: 0.2.1

# aye-aye-api

> API Management that allows easy logging and start and stop functions useful for loading screens

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

## Install

```bash
npm install --save @starrsoftware/aye-aye-api
```

## Single Call Usage

```jsx
import React from 'react';
import Call from '@starrsoftware/aye-aye-api';

export default function SingleCallExample(props) {
   const [temperature, setTemperature] = useState(Number.NaN);

   useEffect(() => {
      //Call single API (this one is fake)
      Call({ url: 'http://weather.com/SanJose/GetTemperature/' })
         .then((result) => {
            setTemperature(result.data);
         })
         .catch((error) => {
            console.error(error);
         });
   });

   return <div>Temp: {temperature}&#176;F</div>;
}
```

## Multiple Call Usage

```jsx
import React from 'react';
import Call from '@starrsoftware/aye-aye-api';

export default function SingleCallExample(props) {
   const [temperature, setTemperature] = useState(Number.NaN);
   const [windSpeed, setWindSpeed] = useState(Number.NaN);
   const [windDirection, setWindDirection] = useState(Number.NaN);
   const [humidity, setHumidity] = useState(Number.NaN);

   useEffect(async () => {
      //Call single API (this one is fake)
      let promises = await Call([
         { url: 'http://weather.com/SanJose/GetTemperature/' },
         { url: 'http://weather.com/SanJose/GetWindSpeed/' },
         { url: 'http://weather.com/SanJose/GetWindDirection/' },
         { url: 'http://weather.com/SanJose/GetHumidity/' }
      ]);

      promises[0]
         .then((result) => {
            setTemperature(result.data);
         })
         .catch((error) => {
            console.error('Temperature Error');
         });

      promises[1]
         .then((result) => {
            setwindSpeed(result.data);
         })
         .catch((error) => {
            console.error('Wind Speed Error');
         });

      promises[2]
         .then((result) => {
            setWindDirection(result.data);
         })
         .catch((error) => {
            console.error('Wind Direction Error');
         });

      promises[3]
         .then((result) => {
            setHumidity(result.data);
         })
         .catch((error) => {
            console.error('Humidity Error');
         });
   });

   return (
      <div>
         <div>Temp: {temperature} &#176;F</div>
         <div>Wind Speed: {windSpeed} m/s</div>
         <div>Wind Direction: {windDirection} &#176;</div>
         <div>Humidity: {humidity} %</div>
      </div>
   );
}
```

## License

MIT © [iwdwebman](https://github.com/iwdwebman)
npm package: @starrsoftware/aye-aye-for-api
Description: API Usage Management that allows easy logging and adding multiple functions to act on different endpoints. Especially designed for AWS Lambda functions
Author: starrsoftware
Latest version: 0.0.2

# aye-aye-for-api

> API Usage Management that allows easy logging and adding multiple functions to act on different endpoints. Especially designed for AWS Lambda functions

[![NPM](https://img.shields.io/npm/v/@starrsoftware/aye-aye-for-api.svg)](https://www.npmjs.com/package/@starrsoftware/aye-aye-for-api) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @starrsoftware/aye-aye-for-api
```

## Example

TODO

## License

MIT © [iwdwebman](https://github.com/iwdwebman)
npm package: @starrsoftware/barcodehandler
Description: Globally Handles paste events for barcodes and gives subscribed functions an object with the barcode and what type it conforms to
Author: starrsoftware
Latest version: 0.2.0

# BarcodeHandler

Globally Handles paste events for barcodes and gives subscribed functions an object with the barcode and what type it conforms to

[![NPM](https://img.shields.io/npm/v/@starrsoftware/barcodehandler.svg)](https://www.npmjs.com/package/@starrsoftware/barcodehandler) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @starrsoftware/barcodehandler
```

## Example Usage

```jsx
import React, { useState } from 'react';
import BarcodeHandler, { AddListener } from '@starrsoftware/barcodehandler';

export default function BarcodeHandlerExample(props) {
   const [barcode, setBarcode] = useState({});

   useEffect(() => {
      AddListener('HomePage', onScan);
   });

   const onScan = (value, type, typeName) => {
      //Do some stuff with your barcode
      console.log(`${typeName}:${value}`);

      setBarcode({ value, type, typeName });
   };

   return (
      <React.Fragment>
         <BarcodeHandler />
         <div>Barcode Type: {barcode.typeName}</div>
         <div>Barcode Value: {barcode.name}</div>
      </React.Fragment>
   );
}
```