open-index/open-npm huggingface dataset:
npm package: @g2a/standard-error
Description: Library extending javascript error
Latest version: 1.3.3

# Standard error

Library extending javascript error.

## Usage:

Creating new standard error:

```javascript
  import BaseError from '@g2a/standard-error';

  class ExampleError extends BaseError {
    static defaultMessage = 'Example error';
  }

  // You can throw error with default message
  throw new ExampleError();

  // You can throw error with your own message
  throw new ExampleError('<NEW_MESSAGE>');

  // You can throw error with your own message, optional code and
  // some optional fields which will be converted to error details
  throw new ExampleError('<NEW_MESSAGE>', { code: '<ERROR_CODE>', foo: 'foo' });

  // You can throw error only with optional code
  // or some optional fields which will be converted to details
  throw new ExampleError({ code: '<ERROR_CODE>' });
```

Creating standard error based on normal error (or something else):

```javascript
  import BaseError from '@g2a/standard-error';

  const error = new Error('<ERROR_MESSAGE>');
  const yourError = BaseError.from(error);
```
npm package: @g2crowd/extract-options
Description: Pull namespaced options out of a hash
Author: Michael Wheeler
Latest version: 1.3.1

# extract-options

This package is responsible for extracting a subset of a hash, based on a namespaced key.

It is useful for reading options out of DOM data attributes, where there may be multiple keys
with different concerns.

## Installation

    npm install @g2crowd/extract-options --save

## Usage

This will create a new hash, seperating out keys based on a common prefix:

```javascript
import { extractOptions } from '@g2crowd/extract-options';
const startingHash = { prefixOne: 1, prefixTwo: 2, otherKey: 3 };

extractOptions(startingHash, 'prefix'); //=> { one: 1, two: 2 }
```

It will treat keys with an `Options` suffix as special. It will expect a hash of raw options to follow:

```javascript
const startingHash = { prefixOne: 1, prefixTwo: 2, otherKey: 3, prefixOptions: { three: 3 } };

extractOptions(startingHash, 'prefix'); //=> { one: 1, two: 2, three: 3 }
```

Pairs nicely with `jQuery.data`:

```html
<div id="element" data-prefix-one="1" data-prefix-two="2" data-other-key="3"></div>
```

```javascript
let data = $('#element').data();
const options = extractOptions(data, 'prefix'); //=> { one: 1, two: 2 }
```
npm package: @g2crowd/review-widget
Description: Webcomponent review-widget following open-wc recommendations
Author: g2
Latest version: 1.7.0

# Review Widget
### - See npm package [here](https://www.npmjs.com/package/@g2crowd/review-widget)

### - This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
yarn install
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
yarn run lint
```

To automatically fix linting and formatting errors, run

```bash
yarn run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
yarn run test
```

To run the tests in interactive watch mode run:

```bash
yarn run test:watch
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

# Development Notes
## Publishing

Make sure you have access to the G2 NPM account.

To publish a new version of the widget, update the version number in `package.json` and commit the changes.

```bash
  npm login
```
then
```bash
  yarn start
  yarn build
  yarn publish
```

## Staging

This only works with chubbywombat in it's current state. 

1. Build and publish using instructions above
2. Update review-widget version in UE package.json and run `yarn install`
3. Deploy to chubbywombat with updates
4. When using tags outside of the my g2 preview, use the 'env' attribute to point to the correct environment, The preview on my g2 does this automatically.
   5. `<review-widget widget-id="<WIDGET_UUID>" env="staging"></review-widget> `


## Local
```bash
  yarn start
  yarn build
```

```html
  <script src="http://localhost:8000/build-modern/components/review-widget.js"></script>
  <review-widget widget-id="<WIDGET_UUID>" env="development"></review-widget> 
```

The **env** attribute is necessary to ensure api calls are made to your local UE server (development).

You'll need to run `yarn build` after every change

## Testing in UE

UE includes this widget in `package.json`. To update UE to use this local version, you can use `yarn link`:

From the UE directory, create a link to this directory with:

```bash
  > yarn link --relative ../review-widget
```

Update any HTML tags to point to the local widget.

```html
  <script src="https://www.g2.test/assets/review_widget.js"></script>
  <review-widget widget-id="<WIDGET_UUID>" env="development"></review-widget> 
```

## Enable Shadow dom in Chrome inspect
1.  Open Dev tool by pressing F12
2. Click on the cog icon in the right top
3. Enable option "Show Shadow DOM" under Elements category
4. Go to Elements panel and you will see the component DOM with all styles
npm package: @g2crowd/widget
Description: Rails-friendly plugin wrapper
Author: Michael Wheeler
Latest version: 2.3.1

# vvidget

vvidget is an abstraction for creating uniform JavaScript plugins.

It creates plugins that take care of a few problems:

* Use a single naming-and-selector convention for defining all widgets
  * Helps avoid lots of random selectors sprinkled through the code
  * You always know which DOM elements are carrying one of these widgets
* Reliably binding to ready and page-refresh events, to initialize ajax-loaded elements once and only once.
  * Helps manage PJAX reloads and HTML fragment injection
  * Nested widgets can be easily and safely activated
* Loading options from data attributes.
  * Namespaces keep collisions from occurring, so a single DOM element can safely be host to multiple widgets

## Basic usage

Create an instance of the plugin builder with your preferred configuration:

```javascript
import widgetSetup from 'widget';

const widget = widgetSetup({ attr: 'ue', data: 'ue-widget' }, 'page-refreshed', 'fragment-refreshed');
// DOM elements with selector of `ue`, or `data-ue-widget` will activate widgets created with this
// config
```

This configuration let's us describe widgets and pass options in data attributes:

```html
<div class='simple-widget'
     data-ue-widget='widget-name'
     data-widget-name-option-one='option1'
     data-widget-name-option-two='option2'>
```

This will be mapped to the plugin we create with the matching name:

```javascript
widget('widget-name', function(opts, ready) {
  $el = this;

  ready(() => {
    // teardown
  });
}, {
  defaults: {},
  init: 'nextTick'
});
```

### Multiple widgets

You may attach multiple widgets to the same DOM element by
separating the widget names with a space character.

Example:

```html
<div data-ue-widget='widget-1 widget-2'></div>
```

This is equivalent to:

```html
<div ue='widget-1 widget-2'></div>
```

### Page refresh events

There is a legacy event-driven mode, that requires triggering events to initialize widgets.
This is useful for PJAX and other page-refreshing systems.

```javascript
widget('remote-resource', function(opts, ready) {
  fetch('/example').then((htmlFragment) => {
    this.append(htmlFragment);
    this.trigger('fragment-refreshed');

    // any widgets nested within the HTML fragment will be activated
  });

  this.addEventListener('click', fetchData);

  ready(() => {
    this.removeEventListener('click', fetchData);
  });
})
```

### DOM Mutation Observer

Instead of manually triggering events, you can also choose to opt into using a MutationObserver to detect when
new elements are added to the DOM.

```javascript
import widgetSetup from 'widget';

const widget = widgetSetup({ attr: 'ue', data: 'ue-widget' }, 'page-refreshed', 'fragment-refreshed');

widget.stopWatchingEvents();
widget.startWatchingDOM();
```