12-02-2021
Symfony

Выпущены Webpack Encore 1.0 и Stimulus Bridge 2.0!

Symfony команда была занята инициативой Symfony UX. Но недавно выпустили обновление.

Выпущен Encore 1.0 (поддержка Webpack 5)

Спустя 4 года (уже будучи стабильной) рады приветствовать Webpack Encore 1.0 в семье. Что нового:

Encore теперь использует Webpack 5, который сам по себе представляет множество функций
Постоянный кеш сборки: благодаря новому методу Encore.enableBuildCache() вы можете наслаждаться более быстрыми «последующими» сборками. Смотри подробности в файле index.js на Encore.

Для обновления запусти:

yarn upgrade "@symfony/webpack-encore@^1.0.0"

Когда в следующий раз запустишь Encore, он, вероятно, уведомит о других зависимостях, которые следует обновить. Смотри полную версию 1.0.0 CHANGELOG.

symfony/stimulus-bridge 2.0

В основе инициативы Symfony UX Initiative лежит Stimulus и stimulus-bridge, который помогает автоматически загружать контроллеры из пакетов UX, а также собственные настраиваемые контроллеры. 2.0 приносит несколько замечательных обновлений.

Если ты хочешь углубиться в подробности, скоро подробно поговорим о Stimulus в учебнике по стимулам на SymfonyCasts.

Ленивый контроллер

Во-первых, в controllers.json ключ webpackMode был заменен на fetch. Это дает возможность использовать новую мощную функцию: если установить для пакета режим отложенной загрузки, JavaScript этого пакета не будет загружен, пока он не понадобится! Как такое возможно? Внутри (с помощью Stimulus и Webpack) код контроллера разбивается на отдельный файл JavaScript. Затем, как только соответствующий data-controller= появится на странице, файл будет загружен и выполнен.

Отличный вариант использования — ux-chartjs. Установив fetch: 'lazy', ты можешь создать диаграмму в PHP и отобразить ее на любой странице… но без дополнительного кода в JavaScript, который загружается при загрузке страницы.

Лень для контроллеров

Эта функция «ленивых контроллеров» настолько удобна, что они хотели позволить тебе использовать ее для ваших собственных контроллеров. По умолчанию, если поместить файл контроллера в assets/controllers, он будет автоматически загружен, но включен на каждую страницу. Что, если тебе нужен этот контроллер только в редких случаях?

Теперь можно указать stimulus-loader загружать контроллер «лениво», украсив его специальным комментарием:

// assets/controllers/hello_controller.js
import { Controller } from 'stimulus';

/* stimulusFetch: 'lazy' */
export default class extends Controller {
    // ...
}

При включении комментария /* stimulusFetch: 'lazy' */ весь этот файл контроллера (и его зависимости) не будет загружен до тех пор, пока на странице не появится соответствующий элемент контроллера данных.

Обновление stimulus-bridge 2.0

Для обновления убедись, что установлена версия пакета 2.0 и версия Encore не ниже 1.0:

yarn upgrade "@symfony/stimulus-bridge@^2.0.0"
yarn upgrade "@symfony/webpack-encore@^1.0.0"

Также убедись, что у установлена последняя версия symfony/flex, чтобы он установил новую опцию выборки в controllers.json:

composer up symfony/flex

Наконец, в assets/bootstrap.js внеси следующие изменения:

import { startStimulusApp } from '@symfony/stimulus-bridge';
- import '@symfony/autoimport';

- export const app = startStimulusApp(require.context('./controllers', true, /\.(j|t)sx?$/));
+ export const app = startStimulusApp(require.context(
+     '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
+     true,
+     /\.(j|t)sx?$/
+ ));

Наверх