npm package: @popovdk/async-loading-vue-component
Description: Async loading component Vue 2
Author: popovdk
Latest version: 0.0.8

## Асинхронная загрузка Vue 2 компонента при вхождении в область реагирования триггера

Плагин находится на стадии тестирования

Демо - https://async-loading-vue-component.netlify.app/

### Установка

```
npm i @popovdk/async-loading-vue-component
```

```
import Vue from 'vue'
import AsyncLoadingVueComponent from '@popovdk/async-loading-vue-component'

Vue.use(AsyncLoadingVueComponent)
```

### О плагине

Плагин `async-loading-vue-component` позволяет асинхронно загружать Vue 2 компоненты
когда в область просмотра браузера пользователя попадает некий триггер или его область.
Это в разы улучшает быстродействие приложения и пользовательский опыт.

Принцип работы основан на IntersectionObserver, плагин предоставляет два компонента:
 AsyncLoading создает и настраивает триггер - обычный html элемент, загружает асинхронный компонет и
  берет пропсы, евенты, слоты из AsyncComponent и пробрасывает их на будущий компонент, когда 
  он загрузится, соберется он встает в DOM вместо тригера.

#### AsyncLoading
Компонент для асинхронной загрузки компонентов когда в зону просмотра
браузера пользователя попадает триггер.
Основан на IntersectionObserver - https://developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API

- slots
    - default - Если асинхронно загружаемому компоненту требуется проброс пропсов, евентов, слотов,
     то обязятельно должен передаваться AsyncComponent и все это должно передаваться ему
     как будто это тот самый компонент который будет загружен
    - loader - Будет показывается пока асинхронно загружаемый компонент не попадает в DOM
- props 
    - component - Функция для асинхронной загрузки компонента, например `() => import('@/components/MapLocation')`
    - triggerTag - название тега для тригера, по умолчанию это div
    - rootMargin - Виртуальные отступы вокруг тригера которые позволяют расширить зону реагирования.
    Могут иметь значения как свойство css margin: "10px 20px 30px 40px" (top, right, bottom, left).
    Значения можно задавать в процентах. По умолчанию все параметры установлены в нули. 
    - threshold - Число или массив чисел, указывающий, при каком проценте видимости целевого элемента должена начаться загрузка компонента.
    Например, в этом случае будет начинаться загрузка при появлении в зоне видимости каждый 25% целевого элемента:  [0, 0.25, 0.5, 0.75, 1], 
    по умолчанию 0 тоесть при любом контакте с зоной тригера начнется загрузка.
    
- events 
    - intersecting - Зона тригера пересеклась с зоной просмотра, начало загрузки чанка компонента
    - loaded - Чанк компонента загружен, начало сборки компонента
    - make - компонент собран и смонтирован в DOM вместо тригера
### Пример использования:

```
<async-loading
  :component="() => import('@/components/MapLocation')"
  :threshold="0"
  root-margin="300px"
>
  <async-component
    :coords="[
      54.82896654088406,
      39.831893822753904
    ]"
    zoom="10"
    @click="clickHandler"
  >
    Какой то текст в default слоте
    <template #title> Тестовый заголовок из слота title </template>
  </async-component>
</async-loading>
```