Версия библиотеки 2.0 (И Яндекс Карты 3.0)

[daniluk4000]

Всем привет! Для начала, хотел бы представиться - меня зовут Данил и я буду помогать @PNKBizz с обслуживанием этой библиотеки, я же сделал версию либы 2.0 (и буду отвечать на вопросы/баги по ней).

Текущий статус

Выпущен релиз кандидат.

Документация.

Статус готовности к релизу можно отслеживать в Milestone 2.0.

Что такое vue-yandex-maps 2.0

Библиотека была, по сути, написана с нуля.

Что изменилось

• Переезд на Яндекс Карты 3.0
• Поддержка официальных @yandex/ymaps3-types и обновлений независимо от нашей библиотеки (кроме новых компонентов)
• Поддержка Vue2/Vue3 в рамках одной версии
• Полная поддержка Nuxt 2/Bridge/3, включая конфигурацию из Nuxt Config
• Поддержка SSR
• Полная поддержка TypeScript, в том числе при задании настроек
• Переход на ES Modules
• Отказ от Event Emmitter в пользу реактивных ref в namespace проекта
• Поддержка разных способов загрузки карты
• Загрузка карты автоматически при первом вызове компонента Карт

Изменения по сравнению с 1.0 (и другими)

• Полная реактивность настроек компонентов
• Поддержаны все компоненты, документированные Яндексом в Картах 3.0
• Слот Маркера теперь реактивен, все изменения внутри него обновляются в Картах мгновенно

Улучшения по сравнению с Картами 3.0 (vanilla)

• Вы можете использовать многие классы оттуда как компоненты (как в их библиотеке для React, за парой отличий)
• При использовании компонента, для доступа к которому необходимо сделать импорт из Карт, импорт произойдет автоматически (например, так работают ползунки зума и пр.)

Изменения в Картах 3.0 читайте на сайте Яндекса.

Процесс релиза

В рамках релиза я планирую идти по схеме, где:

• Версия alpha не содержит документации и полного набора компонентов. Это внутренняя версия для тестирования на различных проектах мной
• Версия beta идёт с документацией, но без Migration Guide и, вероятно, примеров работы. Она содержит все компоненты и готова к тестированию
• Версия rc (Release Candidate) является полностью готовым и документированным продуктом
• Релизная версия отличается от RC исключительно исправлением ошибок

Релизную версию я планирую выпустить до конца года.

FAQ

Почему так долго?

Библиотеку я пишу в свободное время по выходным.

Тяжело будет переходить?

Да. Готовьтесь к тому, что код нужно будет писать с нуля. Я постараюсь сделать настолько подробный Migration Guide, насколько это возможно, но всего он не покроет.

Причина этому не столько то, что всё было написано с нуля, сколько полностью изменившееся API Яндекса. Можете почитать их Migration Guide - он, мягко говоря, не покрывает всего, что они поменяли.

Что будет с репозиторием vue-yandex-map и версией 1.0.0?

Решение примет @PNKBizz, но в моём понимании 1.0.0 прекратит поддержку, а репозиторий vue-yandex-map станет readonly и будет вести на этот репозиторий через Readme.

Когда будет бета?

Бета-версию я планирую выпустить в сентябре-октябре.

Если тебя собьет машина, то как библиотека будет поддерживать актуальность?

Большинство настроек сделано таким образом, что вы сможете самостоятельно обновлять версию @yandex/ymaps3-types и получать актуальную типизацию. В том числе поэтому настройки передаются через settings, а не отдельные props.

В случае, если Яндекс добавит новые компоненты, и некому по каким-то причинам будет добавить их в библиотеку (по ряду причин), вы всегда сможете добавить компоненты через инстанс карты (addChild/addLayer и пр.), как указано в документации Яндекса.

Vue 2 будет поддерживаться вечно?

Нет. Данная версия поддерживает Vue 2/Nuxt 2/Nuxt Bridge через жертву в виде написания кода template через return в setup. Любые другие решения не работают и теряют совместимость.

В таком виде поддержку планирую продолжать как максимум до момента, пока библиотеку будет невозможно поддерживать и сохранять обе версии. После этого версию для Vue 2 придется дропнуть, а Vue 3 переписать на нормальную интеграцию с <template> и потенциально <script setup> в версии по типу v3.

Также рассмотреть дроп поддержки планирую после официального окончания поддержки Vue 2 (декабрь 2023) + еще несколько месяцев.

После дропа поддержки будет выпущена версия 3.0, где будут внесены Breaking Changes (по необходимости) и внедрены нормальные template.

Цель же сейчас - дать пользователям Vue 2 возможность использовать Карты 3.0 (а заодно избавиться от страданий в виде двух разных версий пакетов).

---

Данный пост я написал, чтобы немного посвятить вас в свои планы, так как, уверен, Карт 3.0 ждут многие. Лично мне они понравились своей скоростью работы и возможностью нормально сделать реактивность. Код на них, пока что, писать было удовольствием.

Если у кого-то здесь есть ещё вопросы, буду рад на них ответить :)

[simensBat]

@daniluk4000 Привет. Хотел поиграться с текущим кодом, но у меня не получилось запустить карты на nuxt 2 и vue 2.

Первая ошибка была в функции isDev в utils.ts

export function isDev() {
  // @ts-expect-error
  return (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') || (import.meta?.env?.DEV);
}

Похоже import.meta?.env?.DEV для 2 nuxt не работает, из за этого билд не собирается, как я понял это связано с webpack 4, он не умеет работать с import meta. Если эту проверку убрать, билд собирается.

Дальше я хотел посмотреть на работу карты, но у меня падает страница с ошибками:

1. "The "data" option should be a function that returns a per-instance value in component definitions." "YandexMap"
2. Failed to mount component: template or render function not defined.

Как я понял это связано с тем, что вы писали выше "Данная версия поддерживает Vue 2/Nuxt 2/Nuxt Bridge через жертву в виде написания кода template через return в setup. Любые другие решения не работают и теряют совместимость"

Пробую возвращать в функции setup() рендер функцию, но она не исправляет ситуацию, ошибки такие же. Пример кода.

import { defineComponent, h } from 'vue';
import {
  YandexMap,
  // YandexMapDefaultFeaturesLayer
  YandexMapDefaultSchemeLayer,
} from 'vue-yandex-maps';

export default defineComponent({
  setup() {
    return () => {
      // @ts-expect-error
      return h(YandexMap, {
        props: {
          width: '50dvw',
          height: '75dvh',
          settings: { location: { center: [37.588144, 55.733842], zoom: 7 } } 
        }
      // @ts-expect-error
      }, [h(YandexMapDefaultSchemeLayer, {}, {props: {settings: { theme: 'dark' }}})])
    } 
  }
});

Как можно исправить проблему, чтоб посмотреть на работу карты?

[simensBat]

Версия Vue 2.7.14. Модуль установлен. 10 Винда, 20 нода, chrome. Что я делал:

1. Cклонировал вашу ветку v2
2. Установил зависимости yarn под 20 ноду yarn

3. Сбилдил пакет либы yarn build
4. Пробую запускать nuxt 2 для теста yarn workspace example-nuxt2 dev
5. Проект собрался, есть ошибки в консоле. Это если поправить код isDev

Ошибка при сборке, если не править isDev

Для своего примера я убрал почти все, чтоб попытаться понять в чем проблема, взял только YandexMap и слой, чтоб запустить карту.

Про токен вкурсе, с 3 версией карт уже работал. Решил пока свой не ставить, т.к если запустить 3 пример карт на vue 3, они работают и там карта грузится. Стоит ваш токен, значит сделал вывод, что дело не в нем.

[daniluk4000]

Очень интересно. В выходные постараюсь посмотреть. Возможно, я что-то сломал, оно работало))

Спасибо!

В целом я карты уже заводил на реальном Nuxt 3 проекте, на Vue 2 честно пока только в демке, но существенных различий быть не должно.

[daniluk4000]

Нашел проблему. Vue 2 не любит такие манипуляции со слотами, которые делал я :)
В целом я его понимаю. Мне бы тоже не нравилось.

Также почитал, Evan You говорит, что общение между слотом и родителем через эмит слишком непредсказуемое, поэтому они это не реализовали. А я судя по всему сделал что-то не совсем законное :D

Остальные ошибки также починил. Опубликовал 2.0.0-alpha.15.

[simensBat]

Да сейчас на nuxt 2 запускается. Хотел еще один вопрос прояснить.

У Vue 2.7 есть нативная поддержка composition api, исходя из этого возникает вопрос, можно ли убрать плагин @vue/composition-api для версий nuxt >= 2.6.13(вроде там добавили Vue 2.7 в ядро nuxt) или для vue >= 2.7?

Для теста решил проверить пример example-nuxt2, убрал из него все лишние зависимости.

Как итог карта не запустилась.

Предупреждения появляются внутри setup функции в компоненте YandexMap.vue. Странные ошибки честно говоря.

[daniluk4000]

Тут всё просто.

1. Да, для Vue 2.7 плагин @vue/composition-api не нужен
2. Но вот для Nuxt 2 @nuxtjs/composition-api нужен обязательно, кроме версии Bridge, потому что по другому Nuxt 2 не заведется даже на Vue 2.7

[vermorag]

@daniluk4000 Добрый день. Тоже решил провести эксперимент с картой на vue3 - есть потребность поменять location у нее после монтирования (location прокинут через pinia хранилище). В коде вижу отсылку, что settings не реактивно и надо пользоваться setLocation. Однако с кодом ниже ничего не работает:

<script lang="ts" setup>
    import { YandexMap, YandexMapDefaultSchemeLayer, YandexMapDefaultFeaturesLayer } from 'vue-yandex-maps';
    import useStorage from '../store/map';
    import { toRaw, watch } from 'vue';
    import { YMap } from 'ymaps3/*';

    let map: YMap | null;

    const mapStorage = useStorage();

    watch(mapStorage.location, () => {
        if (map) {
            map.setLocation(toRaw(mapStorage.location));
        }
    });
</script>

<template>
    <YandexMap :settings="{ location: mapStorage.location }" @update:modelValue="(e: YMap) => (map = e)">
        <YandexMapDefaultSchemeLayer />
        <YandexMapDefaultFeaturesLayer />
    </YandexMap>
</template>

watch отрабатывает, метод setLocation вызывается, но карта остается там же, где и была. Других методов как мне получить рабочий экземпляр карты и у него поменять параметры я не нашел. Можешь подсказать?

[daniluk4000]

Таким образом я отбираю свободу у разработчика.

В общем я запишу себе в туду, это вполне реально поработать так, чтобы было кайфом.

То, что оно работает, я знаю)

[vermorag]

И чем отбирается свобода?
Передавать или нет доп параметры - это же выбор разработчика.

[daniluk4000]

А, имеется в виду передача настроек анимации в location прям в settings

Тут есть другой момент - нужно будет модифицировать немного объект настроек: по хорошему не передавать поля с анимацией при инициализации карты, кроме того, надо будет расширить YMapProps и заменить там location на объект настроек setLocation - иначе тайпскрипт не будет рад

Как и сказал, запишу в туду)

[daniluk4000]

@vermorag #75

До RC сделаю

[daniluk4000]

Смешная история, на самом деле. Делал вчера новые примеры и решил заодно это сделать.

Вы упоминали, что Яндекс в своей обертке для реакта сделали это, но на самом деле в примере они всё меняют вручную через setLocation/setBounds и тд) Это забавно

И да - там Яндексом всё из коробки поддерживается, всё лучше, чем я думал, даже типы не пришлось менять. Немного подхимичил с изменением location/camera, в остальном реализация полностью нативная.

Вот тут документировал

[simensBat]

@daniluk4000 Есть не только у дев тулзов проблема с производительностью. Возможно это только на vue 2.7 или я где-то в коде косяк сделал, но плавность при раскрытии большого кластера уходит. Я открыл условно Питер, где очень много маркеров и кластеров, выбрал большой кластер, раскрыл его(сделал зум в область кластера, часть маркеров из кластера показались) и плавность ушла. Вместо 60 кадров стало 30.

Далее эти 30 кадров уходили на другие города, если я просто меняю локацию и количество кластеров и маркеров.

Чтобы починить плавность для других локаций, где маркеров может быть мало, нужно убивать карту и заново ее рендерить.

[daniluk4000]

@Batyodie

1. Нашел проблему с перфомансом. Это из-за того, как именно библиотека рисует компоненты. По сути, мы позволяем вам максимально удобно писать код, но из-за этого все компоненты кладутся прямо в DOM. Посмотрел, как сделано у Яндекса, в целом можно повеселиться и сделать так же. Завел ишью на разработку режима с высокой производительностью: Улучшение производительности кластера #81
2. По основному багу, по ощущениям, всё же связано с кэшированием от Яндекса. Если у вас проблема сохраняется с новым апдейтом, заведите, пожалуйста, ишью, я попытаюсь выкинуть кэш Яндекса целиком

[daniluk4000]

@Batyodie и это снова я. Прокачал кластер. 5 тысяч элементов щелкает как орешки. Выкатил в 2.0.0-beta.7.

[simensBat]

@daniluk4000 Привет. Круто! Как будет время, посмотрю. Есть сейчас понимание, когда проект можно будет поставить через npm? Сейчас не очень удобно его тестировать.

[daniluk4000]

@Batyodie а вы как ставили?) Сочувствую

Версия уже в npm под тэгом next

https://yandex-maps-unofficial.github.io/vue-yandex-maps/guide/vue3.html

[simensBat]

@daniluk4000 Понял, не знал. Я билдил проект локально в ручную, потом исходники переносил куда мне нужно.

[aleksei-deets]

Добый день.
Подскажите пожалуйста, есть ли у бибилиотеки поддержка Vue фреймворка Quasar Framework?