Автоимпорт всего 🚀
Раньше мы импортировали все эти компоненты в каждый .vue файл - импорт и регистрация их снова и снова становились утомительной задачей.
Затем замечательная команда Nuxt.js выпустила @nuxt/components для автоматического импорта компонентов проекта и сторонних библиотек 🚀 Больше импорта не потребовалось. Больше никакой регистрации компонентов.
Вот и все! Чистые проекты, чистые компоненты, чистые куски веб-пакетов.
Так я думал по крайней мере.
А как насчет Headless CMS?
В нашем диджитал-агентстве у нас есть куча проектов, использующих безголовые CMS - Storyblok в качестве одного из них. Storyblok дает разработчику и заказчику свободу вложения компонентов всеми возможными способами - динамически.
Поэтому мы хотели загружать компоненты динамически.
Неа.
На момент написания этой статьи это было невозможно - по крайней мере, с @nuxt/components из коробки (проблема № 43).
Поэтому я решил покопаться в коде - давайте посмотрим, как работает этот модуль Nuxt.js.
Похоже, что модуль получает компоненты на основе того, что передано в ловушку components:dirs.
Он подготавливает массив компонентов с их именами (PascalCase и kebab-case) и их относительными путями к файлам.
На втором этапе все .vue файлы будут просканированы для загрузки компонентов, используемых в данном шаблоне (и для импорта этих компонентов). Вот почему автоматический импорт динамического компонента вообще не работает.
Вернуться к корням - импортировать все эти компоненты вручную? Все из 14328 возможностей?
Ни за что!
Что ж, давайте попробуем выяснить, как мы можем решить эту проблему.
Основная магия
Хорошо: динамический компонент может быть отрисован, если мы передадим имя импортированного компонента vue или если мы передадим сам компонент. Помните: @nuxt/components знает все относительные пути для механизма автоматического импорта. Итак, если мы можем сделать динамический импорт веб-пакетов с этими путями доступным внутри компонента, мы сможем загрузить его дочерние элементы.
Плагин спешит на помощь
Мы можем подключиться к ловушке components:extend и получить все имена компонентов при построении модуля.
Теперь мы создаем операторы динамического импорта для всех компонентов внутри плагина, который вставляет загрузчики в каждый компонент vue.
Это переводится примерно так:
Это было легко, амирит?
Увлажняйте все
Теперь можно выполнить внедренный асинхронный импорт для загрузки определенного компонента - для этого мы будем использовать vue-lazy-hydration (большое спасибо Маркусу Оберленеру).
После выполнения отложенного импорта загруженный компонент можно передать в: is prop. NuxtDynamic теперь можно использовать для автоматического импорта каждого динамического компонента.
Вот и все, у нас получилось! Nuxt.js автоматически импортирует динамические компоненты 🚀
Чистую и доработанную версию изложенной идеи можно найти на github и установить как пакет npm.
Официальную документацию для @blokwise/dynamic можно найти на сайте dynamic.blokwise.io.
