open-index/open-npm huggingface dataset:
npm package: @googlicius/load-assets
Description: Load assets helper
Author: googlicius
Latest version: 1.0.7

# Load Assets

Utilities to load assets programatically: javascript, css, images,...

[![Test](https://github.com/googlicius/load-assets/actions/workflows/ci.yml/badge.svg)](https://github.com/googlicius/load-assets/actions/workflows/ci.yml)

## Motivation

I am a fan of using javascript libraries from their CDN rather than include them in the application bundle. If you are building application with React.js, Angular, or Vue.js, there are many wrapper of libraries you need. But it causes a problem called [`bi-incompatible`](#two-way-incompatible) (that's what I call it) when you upgrade your framework to latest version. Some javascript libraries doesn't support npm installation, or you just want to load it as lazy way (when user reach a specific page).

## Installation

```
npm install @googlicius/load-assets
```

Or Yarn

```
yarn add @googlicius/load-assets
```

## Usage

```javascript
import { loadScript } from '@googlicius/load-assets';

loadScript(
  'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js',
).then(() => {
  // Lodash available here.
});
```

Loads and runs 2 javascript files in parallel.

```javascript
loadScript(
  'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js',
  'https://connect.facebook.net/en_US/sdk.js',
).then(() => {
  // Lodash and Facebook SDK available here.
});
```

Load 2 javascript files in parallel but runs in order,
which means the second script depends on the first one.

```javascript
loadScript([
  'https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js',
  'https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/autoloader/prism-autoloader.min.js',
]).then(() => {
  // Prism initialized with its autoloader.
});
```

Often a library is not only have javascript but also with its own css file.
So to load css and js we simple use `loadAsset`:

```javascript
import loadAsset from '@googlicius/load-assets';

loadAsset(
  'https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-twilight.min.css',
  'https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js',
).then(() => {
  // Prism initialized with its styles.
});
```

Load with custom attributes:

```javascript
loadScript('https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js', {
  'data-manual': 'true',
}).then(() => {
  // ...
});
```

## API

- **loadScript**: Load one or more javascript file(s) from cdn or external sources.
- **loadCss**: Load one or more css file(s) from cdn or external sources.
- **loadImage**: Load one or more image(s) from cdn or external sources.
- **loadAsset**: Load any file type, based on file extension. This method is a combination of all api above.

## License

MIT

---

## Two-way incompatible

When you upgradge your framework to higher version, but that version possibly incompatible with some library wrappers in your project, or you want to use the latest version of a library but it possibly haven't supported. For example, Reactstrap currently support Bootstrap 4, so you cannot use Bootstrap 5 at this time.
npm package: @goong/map-component
Description: ### Using with CDN ```js <script src='https://cdn.jsdelivr.net/npm/@goong/map-component@1.1.6/dist/goong-maps-component.min.js'></script> <link href="https://cdn.jsdelivr.net/npm/@goong/map-component@1.1.6/dist/goong-maps-component.min.css" rel="styleshee
Latest version: 1.1.6

### GoongMapComponents

### Using with CDN
```js
<script src='https://cdn.jsdelivr.net/npm/@goong/map-component@1.1.6/dist/goong-maps-component.min.js'></script>
<link href="https://cdn.jsdelivr.net/npm/@goong/map-component@1.1.6/dist/goong-maps-component.min.css" rel="stylesheet" type="text/css"/>
```

#### Examples

[ Simple Map ](https://codesandbox.io/s/simple-map-js-kl8hs)

[ Search Component ](https://codesandbox.io/s/markers-4l3sb)

[ Multi Markers ](https://codesandbox.io/s/search-component-8d3do)

[ Advance ](https://codesandbox.io/s/advance-wirui)

### React Component

[ Simple Map ](https://codesandbox.io/s/simple-map-yyixp)

[ Search Component ](https://codesandbox.io/s/react-marker-y4ue4)

[ Multi Markers ](https://codesandbox.io/s/react-search-tn1s8)

[ Advance ](https://codesandbox.io/s/react-advance-15k07)

### Install

```
yarn add @goong/map-component
```

Or

```
npm install @goong/map-component
```

#### Component Examples

```js
import * as GoongMap from "@goong/map-component";
import "@goong/map-component/dist/goong-maps-component.min.css";

function GoongComponentReact(props) {
  const markers = [
    {
      lngLat: [105.4, 21.3],
      name: "Hà Nội",
      description: "Thành phố Hà Nội, Việt Nam"
    },
    {
      lngLat: [105.1, 21.2],
      name: "Hà Nội",
      description: "Thành phố Hà Nội, Việt Nam"
    },
    {
      lngLat: [105.0, 21.0],
      name: "Hà Nội",
      description: "Thành phố Hà Nội, Việt Nam"
    }
  ];

  return (
    <GoongMap.Component
      accessToken="MAP LOAD API KEY",
      zoom={9}
      enabledSearch={false}
      markerIcon={null}
      markerSize={50}
      onSearch={(marker) => {
        console.log(marker);
      }}
      apiKey="SERVICE API KEY"
      leftPane="false"
      center={[105.0,21.0]},
      markers={markers},
      control={true}
    /> 
  );
}
```

### Props

| Key         | Type - Description |
| ----------- | ----------- |
| accessToken | String - API Key for Mapload/Maptile   |
| zoom        | Number - Default Zoom for Init Map        |
| enabledSearch | Boolean - Enabled Search/Autocomplete on the Map, This requirement with apiKey |
| apiKey | String - API Key for call Resfult API |
| leftPane | Boolean - Using for having some markers, and you need show list marker then click to going it |
| center | LngLatArray - Default center for init Map |
| control | Boolean - Show or hidden button zoomin/zoomout in Map |
| markers | Array<Markers> - List of marker for show in Map |
| markerIcon | String - URL of icon png for use in Map |
| markerSize | Number - Size by pixel for marker icon |
| onSearch | Using only for React - handle poi when searching... |

### Events

> ES5 handle events with method .on("eventName", function(obj){ //... })

| Events | Object |
| ------ | ------ |
| search | MarkerObj |