|
1 | 1 | # Symfony UX Swup
|
2 | 2 |
|
| 3 | +> [!WARNING] |
| 4 | +> **Deprecated**: This package has been **deprecated** in 2.x and will be removed in the next major version. |
| 5 | +
|
| 6 | +We |
| 7 | +To keep the same functionality in your Symfony application, follow these migration steps: |
| 8 | + |
| 9 | +1. Install the `swup` library and its plugins: |
| 10 | + |
| 11 | +```bash |
| 12 | +# If using Symfony AssetMapper: |
| 13 | +php bin/console importmap:require swup @swup/fade-theme @swup/slide-theme @swup/forms-plugin @swup/debug-plugin |
| 14 | + |
| 15 | +# If using NPM (e.g.: with Webpack Encore): |
| 16 | +npm install swup @swup/fade-theme @swup/slide-theme @swup/forms-plugin @swup/debug-plugin |
| 17 | +``` |
| 18 | + |
| 19 | +2. Add the following code to your app: |
| 20 | + |
| 21 | +<details><summary><code>assets/controllers/swup_controller.js</code></summary> |
| 22 | + |
| 23 | +```javascript |
| 24 | +import { Controller } from '@hotwired/stimulus'; |
| 25 | +import Swup from 'swup'; |
| 26 | +import SwupFadeTheme from '@swup/fade-theme'; |
| 27 | +import SwupSlideTheme from '@swup/slide-theme'; |
| 28 | +import SwupFormsPlugin from '@swup/forms-plugin'; |
| 29 | +import SwupDebugPlugin from '@swup/debug-plugin'; |
| 30 | + |
| 31 | +export default class extends Controller { |
| 32 | + static values = { |
| 33 | + containers: Array, |
| 34 | + mainElement: String, |
| 35 | + animateHistoryBrowsing: Boolean, |
| 36 | + animationSelector: String, |
| 37 | + cache: Boolean, |
| 38 | + linkSelector: String, |
| 39 | + theme: String, |
| 40 | + debug: Boolean, |
| 41 | + }; |
| 42 | + |
| 43 | + connect() { |
| 44 | + const dataContainers = this.containersValue; |
| 45 | + const mainElement = this.mainElementValue || dataContainers[0] || '#swup'; |
| 46 | + const allElements = [mainElement].concat(dataContainers); |
| 47 | + const containersList = allElements.filter((item, index) => { |
| 48 | + return allElements.indexOf(item) === index; |
| 49 | + }); |
| 50 | + |
| 51 | + const options = { |
| 52 | + containers: containersList, |
| 53 | + plugins: [ |
| 54 | + 'slide' === this.themeValue |
| 55 | + ? new SwupSlideTheme({ mainElement: mainElement }) |
| 56 | + : new SwupFadeTheme({ mainElement: mainElement }), |
| 57 | + new SwupFormsPlugin(), |
| 58 | + ], |
| 59 | + }; |
| 60 | + |
| 61 | + if (this.hasMainElementValue) { |
| 62 | + options.mainElement = this.mainElementValue; |
| 63 | + } |
| 64 | + |
| 65 | + if (this.hasAnimateHistoryBrowsingValue) { |
| 66 | + options.animateHistoryBrowsing = this.animateHistoryBrowsingValue; |
| 67 | + } |
| 68 | + if (this.hasAnimationSelectorValue) { |
| 69 | + options.animationSelector = this.animationSelectorValue; |
| 70 | + } |
| 71 | + if (this.hasCacheValue) { |
| 72 | + options.cache = this.cacheValue; |
| 73 | + } |
| 74 | + if (this.hasLinkSelectorValue) { |
| 75 | + options.linkSelector = this.linkSelectorValue; |
| 76 | + } |
| 77 | + if (this.debugValue) { |
| 78 | + options.plugins.push(new SwupDebugPlugin()); |
| 79 | + } |
| 80 | + |
| 81 | + this.dispatchEvent('pre-connect', { options }); |
| 82 | + const swup = new Swup(options); |
| 83 | + this.dispatchEvent('connect', { swup, options }); |
| 84 | + } |
| 85 | + |
| 86 | + dispatchEvent(name, payload) { |
| 87 | + this.dispatch(name, { detail: payload, prefix: 'swup' }); |
| 88 | + } |
| 89 | +} |
| 90 | +``` |
| 91 | + |
| 92 | +</details> |
| 93 | + |
| 94 | +3. Replace the `symfony--ux-swup` occurrences in your templates with `swup`, for example: |
| 95 | + |
| 96 | +```diff |
| 97 | +-<body {{ stimulus_controller('symfony/ux-swup/swup') }}> |
| 98 | ++<body {{ stimulus_controller('swup') }}> |
| 99 | +``` |
| 100 | + |
| 101 | +4. Remove `symfony/ux-swup` from your dependencies: |
| 102 | + |
| 103 | +```bash |
| 104 | +composer remove symfony/ux-swup |
| 105 | +``` |
| 106 | + |
| 107 | +You're done! |
| 108 | + |
| 109 | +--- |
| 110 | + |
3 | 111 | Symfony UX Swup is a Symfony bundle integrating [Swup](https://swup.js.org/) in
|
4 | 112 | Symfony applications. It is part of [the Symfony UX initiative](https://ux.symfony.com/).
|
5 | 113 |
|
|
0 commit comments