diff --git a/src/Swup/CHANGELOG.md b/src/Swup/CHANGELOG.md index ec2b62ff0d0..4bc85e3806d 100644 --- a/src/Swup/CHANGELOG.md +++ b/src/Swup/CHANGELOG.md @@ -5,7 +5,10 @@ - Support for `stimulus` version 2 was removed and support for `@hotwired/stimulus` version 3 was added. See the [@symfony/stimulus-bridge CHANGELOG](https://github.com/symfony/stimulus-bridge/blob/main/CHANGELOG.md#300) for more details. -- Support added for Symfony 6 +- All options were changed from `data-` attributes to Stimulus values. See + The README for updated instructions. +- Added a new `swup:pre-connect` event. +- Support added for Symfony 6. ## 1.3 diff --git a/src/Swup/README.md b/src/Swup/README.md index 5ce03644341..a3d04a863a8 100644 --- a/src/Swup/README.md +++ b/src/Swup/README.md @@ -72,8 +72,9 @@ additional containers, for instance to have a navigation menu that updates when {% endblock %} {# ... #} @@ -88,7 +89,9 @@ additional containers, for instance to have a navigation menu that updates when ``` -You can configure several other options using data-attributes on the `body` tag: +You can configure several other options using values on the controller. +Most of these correspond to [Swup Options](https://swup.js.org/options), +but there are a few extra added: ```twig @@ -96,18 +99,27 @@ You can configure several other options using data-attributes on the `body` tag: Swup {# ... #} ``` +The extra options are: + +- `theme`: either `slide` or `fade` (the default); +- `debug`: add this attribute to enable debug. + ### Extend the default behavior Symfony UX Swup allows you to extend its default behavior using a custom Stimulus controller: @@ -119,12 +131,19 @@ import { Controller } from '@hotwired/stimulus'; export default class extends Controller { connect() { + this.element.addEventListener('swup:pre-connect', this._onPreConnect); this.element.addEventListener('swup:connect', this._onConnect); } disconnect() { // You should always remove listeners when the controller is disconnected to avoid side-effects - this.element.removeEventListener('swup:connect', this._onConnect); + this.element.removeEventListener('swup:pre-connect', this._onConnect); + this.element.removeEventListener('swup:connect', this._onPreConnect); + } + + _onPreConnect(event) { + // Swup has not been initialized - options can be changed + console.log(event.detail.options); // Options that will be used to initialize Swup } _onConnect(event) { diff --git a/src/Swup/Resources/assets/dist/controller.js b/src/Swup/Resources/assets/dist/controller.js index 1d7faf350f2..7eb92054a01 100644 --- a/src/Swup/Resources/assets/dist/controller.js +++ b/src/Swup/Resources/assets/dist/controller.js @@ -5,29 +5,31 @@ import SwupFormsPlugin from '@swup/forms-plugin'; import SwupFadeTheme from '@swup/fade-theme'; import SwupSlideTheme from '@swup/slide-theme'; -class controller extends Controller { +class default_1 extends Controller { connect() { const options = { containers: ['#swup'], - cache: this.element.hasAttribute('data-cache'), - animateHistoryBrowsing: this.element.hasAttribute('data-animate-history-browsing'), - plugins: [ - 'slide' === this.element.getAttribute('data-theme') ? new SwupSlideTheme() : new SwupFadeTheme(), - new SwupFormsPlugin(), - ], + plugins: ['slide' === this.themeValue ? new SwupSlideTheme() : new SwupFadeTheme(), new SwupFormsPlugin()], }; - if (this.element.getAttribute('data-containers')) { - options.containers = this.element.getAttribute('data-containers').split(' '); + if (this.hasAnimateHistoryBrowsingValue) { + options.animateHistoryBrowsing = this.animateHistoryBrowsingValue; } - if (this.element.getAttribute('data-link-selector')) { - options.linkSelector = this.element.getAttribute('data-link-selector'); + if (this.hasAnimationSelectorValue) { + options.animationSelector = this.animationSelectorValue; } - if (this.element.getAttribute('data-animation-selector')) { - options.animationSelector = this.element.getAttribute('data-animation-selector'); + if (this.hasCacheValue) { + options.cache = this.cacheValue; } - if (this.element.hasAttribute('data-debug')) { + if (this.hasContainersValue) { + options.containers = this.containersValue; + } + if (this.hasLinkSelectorValue) { + options.linkSelector = this.linkSelectorValue; + } + if (this.debugValue) { options.plugins.push(new SwupDebugPlugin()); } + this._dispatchEvent('swup:pre-connect', { options }); const swup = new Swup(options); this._dispatchEvent('swup:connect', { swup, options }); } @@ -37,5 +39,14 @@ class controller extends Controller { this.element.dispatchEvent(userEvent); } } +default_1.values = { + animateHistoryBrowsing: Boolean, + animationSelector: String, + cache: Boolean, + containers: Array, + linkSelector: String, + theme: String, + debug: Boolean, +}; -export { controller as default }; +export { default_1 as default }; diff --git a/src/Swup/Resources/assets/src/controller.ts b/src/Swup/Resources/assets/src/controller.ts index f52b3e88276..2058f8f8079 100644 --- a/src/Swup/Resources/assets/src/controller.ts +++ b/src/Swup/Resources/assets/src/controller.ts @@ -17,33 +17,45 @@ import SwupFadeTheme from '@swup/fade-theme'; import SwupSlideTheme from '@swup/slide-theme'; export default class extends Controller { + static values = { + animateHistoryBrowsing: Boolean, + animationSelector: String, + cache: Boolean, + containers: Array, + linkSelector: String, + + // custom values + theme: String, + debug: Boolean, + }; + connect() { const options = { containers: ['#swup'], - cache: this.element.hasAttribute('data-cache'), - animateHistoryBrowsing: this.element.hasAttribute('data-animate-history-browsing'), - plugins: [ - 'slide' === this.element.getAttribute('data-theme') ? new SwupSlideTheme() : new SwupFadeTheme(), - new SwupFormsPlugin(), - ], + plugins: ['slide' === this.themeValue ? new SwupSlideTheme() : new SwupFadeTheme(), new SwupFormsPlugin()], }; - if (this.element.getAttribute('data-containers')) { - options.containers = this.element.getAttribute('data-containers').split(' '); + if (this.hasAnimateHistoryBrowsingValue) { + options.animateHistoryBrowsing = this.animateHistoryBrowsingValue; } - - if (this.element.getAttribute('data-link-selector')) { - options.linkSelector = this.element.getAttribute('data-link-selector'); + if (this.hasAnimationSelectorValue) { + options.animationSelector = this.animationSelectorValue; } - - if (this.element.getAttribute('data-animation-selector')) { - options.animationSelector = this.element.getAttribute('data-animation-selector'); + if (this.hasCacheValue) { + options.cache = this.cacheValue; } - - if (this.element.hasAttribute('data-debug')) { + if (this.hasContainersValue) { + options.containers = this.containersValue; + } + if (this.hasLinkSelectorValue) { + options.linkSelector = this.linkSelectorValue; + } + if (this.debugValue) { options.plugins.push(new SwupDebugPlugin()); } + this._dispatchEvent('swup:pre-connect', { options }); + const swup = new Swup(options); this._dispatchEvent('swup:connect', { swup, options }); diff --git a/src/Swup/Resources/assets/test/controller.test.ts b/src/Swup/Resources/assets/test/controller.test.ts index 3ce7f41471b..4255344431d 100644 --- a/src/Swup/Resources/assets/test/controller.test.ts +++ b/src/Swup/Resources/assets/test/controller.test.ts @@ -14,9 +14,15 @@ import { getByTestId, waitFor } from '@testing-library/dom'; import { clearDOM, mountDOM } from '@symfony/stimulus-testing'; import SwupController from '../src/controller'; +let actualSwupOptions: any = null; + // Controller used to check the actual controller was properly booted class CheckController extends Controller { connect() { + this.element.addEventListener('swup:pre-connect', (event) => { + actualSwupOptions = event.detail.options; + }); + this.element.addEventListener('swup:connect', () => { this.element.classList.add('connected'); }); @@ -42,12 +48,12 @@ describe('SwupController', () => {
+ data-swup-containers-value="["#swup", "#nav"]" + data-swup-link-selector-value="a" + data-swup-animation-selector-value="[transition-*]" + data-swup-debug-value="data-debug" + data-swup-cache-value="data-cache" + data-swup-animate-history-browsing-value="data-animate-history-browsing">
Link @@ -60,12 +66,19 @@ describe('SwupController', () => { afterEach(() => { clearDOM(); + actualSwupOptions = null; }); it('connect', async () => { - expect(getByTestId(container, 'body')).not.toHaveClass('connected'); + const bodyElement = getByTestId(container, 'body'); + expect(bodyElement).not.toHaveClass('connected'); startStimulus(); - await waitFor(() => expect(getByTestId(container, 'body')).toHaveClass('connected')); + await waitFor(() => expect(bodyElement).toHaveClass('connected')); + expect(actualSwupOptions.containers).toEqual(['#swup', '#nav']); + expect(actualSwupOptions.linkSelector).toBe('a'); + expect(actualSwupOptions.animationSelector).toBe('[transition-*]'); + expect(actualSwupOptions.cache).toBe(true); + expect(actualSwupOptions.animateHistoryBrowsing).toBe(true); }); });