open-index/open-npm huggingface dataset:
npm package: @ngyewch/chartjs-v4-webcomponent
Description: Chart.js v4 web component
Latest version: 0.4.0

[![npm](https://img.shields.io/npm/v/@ngyewch/chartjs-v4-webcomponent)](https://www.npmjs.com/package/@ngyewch/chartjs-v4-webcomponent)
![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/ngyewch/chartjs-v4-webcomponent/CI.yml)
![GitHub last commit](https://img.shields.io/github/last-commit/ngyewch/chartjs-v4-webcomponent)

# chartjs-v4-webcomponent

Simple web component for displaying [Chart.js](https://www.chartjs.org/) v4 charts.

## Usage

### Import

Script tag:
```
<script type="module" src="https://cdn.jsdelivr.net/npm/@ngyewch/chartjs-v4-webcomponent@0.4.0/dist/chartjs-v4-webcomponent.js"></script>
```

### Markup

```
    <chartjs-v4>
        <script type="application/json">
            {
                "type": "bar",
                "data": {
                    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
                    "datasets": [
                        {
                            "label": "My First Dataset",
                            "data": [65, 59, 80, 81, 56, 55, 40]
                        }
                    ]
                },
                "options": {
                    "maintainAspectRatio": false,
                    "scales": {
                        "y": {
                            "beginAtZero": true
                        }
                    }
                }
            }
        </script>
    </chartjs-v4>
```
npm package: @ngyewch/gpx
Description: GPX parser
Latest version: 0.1.0

# @ngyewch/gpx

Javascript GPX parser.

## Overview

This project is an implementation of Topografix's [GPX format](https://www.topografix.com/gpx.asp).

## Usage

```typescript
import {parse} from '@ngyewch/gpx';

const gpx = parse(gpxXmlString);
```
npm package: @ngyewch/leaflet-expandable-control
Description: Leaflet expandable control
Latest version: 0.1.0

[![npm](https://img.shields.io/npm/v/@ngyewch/leaflet-expandable-control)](https://www.npmjs.com/package/@ngyewch/leaflet-expandable-control)
![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/ngyewch/leaflet-expandable-control/CI.yml)
![GitHub last commit](https://img.shields.io/github/last-commit/ngyewch/leaflet-expandable-control)

# @ngyewch/leaflet-expandable-control

Library for creating expandable controls similar to [Control.Layers](https://leafletjs.com/reference.html#control-layers).
npm package: @ngyuki/browser-sync-webpack-plugin
Description: BrowserSync and Webpack integration
Author: Valentyn Barmashyn
Latest version: 2.2.3

# [BrowserSync](https://browsersync.io/) plugin for [Webpack](https://webpack.js.org/)

Easily use BrowserSync in your Webpack project.

## Install:

```bash
$ npm install --save-dev browser-sync-webpack-plugin
```
or
```bash
$ yarn add --dev browser-sync-webpack-plugin
```

With release of 2.0.0 the plugin is expected to be used in Node v4+ environment.
Support for Node v3 and lower was dropped, but you can install and use the plugin version of 1.2.0 in older environments.

## Usage:

BrowserSync will start only when you run Webpack in [watch mode](http://webpack.github.io/docs/tutorials/getting-started/#watch-mode):

```bash
$ webpack --watch
```

### Basic:

If you're not using Webpack Dev Server, you can make BrowserSync to serve your project.
The setup is pretty easy: just pass the [BrowserSync options](http://www.browsersync.io/docs/options/) to the plugin as the first argument.

In your `webpack.config.js`:

```javascript
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new BrowserSyncPlugin({
      // browse to http://localhost:3000/ during development,
      // ./public directory is being served
      host: 'localhost',
      port: 3000,
      server: { baseDir: ['public'] }
    })
  ]
}
```

### Advanced:

The advanced usage is about using [Webpack Dev Server](https://github.com/webpack/webpack-dev-server) with BrowserSync in order to use awesome features of both.

To achieve this, BrowserSync offers the [proxy](http://www.browsersync.io/docs/options/#option-proxy) option.
So, basically, you are about to proxy the output from the Webpack Dev Server through BrowserSync to get the best out of both.

In your `webpack.config.js`:

```javascript
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new BrowserSyncPlugin(
      // BrowserSync options
      {
        // browse to http://localhost:3000/ during development
        host: 'localhost',
        port: 3000,
        // proxy the Webpack Dev Server endpoint
        // (which should be serving on http://localhost:3100/)
        // through BrowserSync
        proxy: 'http://localhost:3100/'
      },
      // plugin options
      {
        // prevent BrowserSync from reloading the page
        // and let Webpack Dev Server take care of this
        reload: false
      }
    )
  ]
}
```

---

Other supported plugin options are:

* `name` - default: `bs-webpack-plugin`, BrowserSync [instance name](http://www.browsersync.io/docs/api/#api-name)
* `callback` - default: `undefined`, BrowserSync [instance init callback](http://www.browsersync.io/docs/api/#api-cb).
* `injectCss` - default: `false`, allows BrowserSync to inject changes inplace instead of reloading the page when changed chunks are all CSS files

## Contributing:

Feel free to open issues to propose stuff and participate. Pull requests are also welcome.

## Licence:

[MIT](http://en.wikipedia.org/wiki/MIT_License)
npm package: @ngyv/object-utils
Description: Object getter setters
Author: Yvonne Ng
Latest version: 1.0.1

# object-utils [![Build Status](https://travis-ci.org/ngyv/object-utils.svg?branch=master)](https://travis-ci.org/ngyv/object-utils)

> Object getter setters


## Install

```
$ npm install @ngyv/object-utils
```


## Usage

```js
import objectUtils from '@ngyv/object-utils';

let car = {
  type: 'Fancy',
  manufactured: {
    country: 'Malaysia',
    year: 2018,
  },
};

objectUtils.get(car, 'manufactured.year');
//=> 2018

objectUtils.set(car, 'certification.year', 2017);
//=> {
//     type: 'Fancy',
//     manufactured: {
//       country: 'Malaysia',
//       year: 2018,
//     },
//     certification: {
//       year: 2017,
//     }
//   }

let anotherCar = {
  type: 'Mediocre',
  certification: false,
};

objectUtils.pluckSubset(anotherCar, car, car);
//=> {
//     type: 'Fancy',
//   }

objectUtils.difference(anotherCar, car);
//=> {
//     type: ['Mediocre', 'Fancy'],
//   }

objectUtils.mergeObject({ ate: true }, 'string', 10, [], { hashbrown: 'breakfast' });
//=> { ate: true, hashbrown: 'breakfast' }


let objectFunction = { sing() { this.lyrics = 'Hello,'; } };
let anotherObjectFunction = { sing() { this.lyrics += " it's me";  } };
const mergedObjectFunctions = objectUtils.mergeObject(objectFunction, anotherObjectFunction);

mergedObjectFunctions.sing();
mergedObjectFunctions.lyrics;
//=> "Hello, it's me"
//=>
```


## License

MIT © [Yvonne Ng](http://github.com/ngyv)
npm package: @ngyv/prop-utils
Description: Utility functions for properties management
Author: Yvonne Ng
Latest version: 1.3.3

# prop-utils [![Build Status](https://travis-ci.org/ngyv/prop-utils.svg?branch=master)](https://travis-ci.org/ngyv/prop-utils) [![codecov](https://codecov.io/gh/ngyv/prop-utils/branch/master/graph/badge.svg)](https://codecov.io/gh/ngyv/prop-utils) [![npm download](https://img.shields.io/npm/dt/@ngyv/prop-utils.svg)](https://www.npmjs.com/package/@ngyv/prop-utils)  


> Utility functions for properties management


## Install

```
$ npm i @ngyv/prop-utils --save
```


## Usage

```js
import {
  types,
  getPropertyTypeName,
  identify,
  compareType,
  isEqual,
  parseValueToType,
  parseJson,
} from '@ngyv/prop-utils'

const propertyA = {
  name: 'Siti Nurhaliza',
  age: undefined,
};

const propertyB = {
  name: 'Siti Nurhaliza',
  age: 21,
};

identify(propertyA.age) === types.undefined;
//=> true

getPropertyTypeName(propertyA.name);
//=> 'string'

compareType(propertyA, propertyB);
//=> true

const similar = { nil: [types.undefined, types.null] };
compareType(undefined, null, similar);
//=> true

class Banana {
  shout() {
    return 'HELLO!';
  }
}
class B1 extends Banana {}
class B2 extends Banana {}
const b1 = new B1();
const b2 = new B2();
compareValue(b1, b2);
//=> false

compareValue(b1, b2, { classComparator: (b1, b2) => return b1.shout() === b2.shout() });
//=> true

comparePropertyToType('str', types.null);
//=> false

const acceptedTypes = { strings: [types.string, types.null, types.emptyString] };
comparePropertyToType('str', types.null, acceptedTypes);
//=> true

isEqual(propertyA, propertyB);
//=> false

parseValueToType('12.1', types.number);
//=> 12.1

parseValueToType(null, types.number);
//=> null

const json = {
  accountId: 1,
  createdAt: '2018-04-02T09:12:20.221Z',
}
const expectedTypes = {
  accountId: types.number,
  createdAt: types.date,
}

parseJson(json, expectedTypes);
//=> { accountId: 1, createdAt: Date 2018-04-02 09:12:20 221ms Z }
```


## License

MIT © [Yvonne Ng](http://github.com/ngyv)