Requiring SweetAlert2
Keep on Learning!
If you liked what you've learned so far, dive in! Subscribe to get access to this tutorial plus video, code and script downloads.
With a Subscription, click any sentence in the script to jump to that part of the video!
Login SubscribeHey! We can install and require third-party libraries. That's amazing! And it makes our code more reliable: we do not need to hope that someone remembered to include jQuery on this page.
RepLogApp also depends on two other vendor libraries: Routing from FOSJsRoutingBundle and SweetAlert2:
| // ... lines 1 - 5 | |
| (function(window, Routing, swal) { | |
| // ... lines 7 - 216 | |
| })(window, Routing, swal); |
Let's save Routing for later and skip straight to SweetAlert.
It's the exact same situation as jQuery, except that - this time - the script tag is included on this specific page, not in the layout. Open app/Resources/views/lift/index.html.twig. At the bottom, yep! There is the script tag for SweetAlert:
| // ... lines 1 - 53 | |
| {% block javascripts %} | |
| // ... lines 55 - 56 | |
| <script src="https://cdn.jsdelivr.net/sweetalert2/6.1.0/sweetalert2.min.js"></script> | |
| // ... lines 58 - 65 | |
| {% endblock %} |
We do not want that anymore!
First, we need to download SweetAlert via Yarn. If you're not sure about the name of a package, check out https://npms.io/. Search for "SweetAlert2". The first looks like a good match and... when we click it... yep! This is the exact library we're using.
So go get it peeps! Find your terminal and run:
yarn add sweetalert2@6.6.6 --dev
Tip
To strictly follow the tutorial, please, make sure you install exactly the same
@6.6.6 version of SweetAlert2.
Require sweetalert2
Perfect! Back in RepLogApp, add const swal = require('sweetalert2'). Then, remove the extra swal from the top of the self-executing function and on the bottom: there's no need for that complexity:
| // ... lines 1 - 4 | |
| const swal = require('sweetalert2'); | |
| (function(window, Routing) { | |
| // ... lines 8 - 217 | |
| })(window, Routing); |
And guess what! SweetAlert is only used by RepLogApp... so we can safely remove the script tag from the template. Woohoo!
Try it: head back to LiftStuff and refresh. Yes! It still loads!
But when we hit "Delete"... woh... something isn't right: it looks like I designed this... which you do not want. And... I can't hit "Cancel". What's going on here?
When JS needs CSS
I'll open up my debugger. Huh... no errors. This is actually a CSS problem. When we installed sweetalert2, it installed version 6.6.6:
| { | |
| // ... lines 2 - 7 | |
| "devDependencies": { | |
| // ... line 9 | |
| "sweetalert2": "^6.6.6", | |
| // ... line 11 | |
| } | |
| } |
Woh... ominous. And when you use SweetAlert, you actually need to make sure you include its JavaScript on the page... and also the SweetAlert CSS file. We're loading the CSS file from a CDN... but at a different, slightly less evil version: 6.1.0:
| // ... lines 1 - 47 | |
| {% block stylesheets %} | |
| // ... lines 49 - 50 | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.1.0/sweetalert2.min.css" /> | |
| {% endblock %} | |
| // ... lines 53 - 67 |
Change this to 6.6.0 - that's a close enough version:
| // ... lines 1 - 47 | |
| {% block stylesheets %} | |
| // ... lines 49 - 50 | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.6.0/sweetalert2.min.css" /> | |
| {% endblock %} | |
| // ... lines 53 - 66 |
Now refresh... and hit "Delete". Much, much better!
But... this just uncovered a huge flaw in our setup! Sure, we no longer need to hope that the SweetAlert JS file was included on our page... but we still do need to hope that we remembered to include the SweetAlert CSS link tag! This CSS file is really a dependency of RepLogApp... but there's no way for us to require it like with JS... well... no way yet. Stay tuned.
But before we get there, it's time to leverage the require key to modularize our code even more.
Yarn fetched sweetalert2 version 6.10.1 for me instead of v6.6.6. To get the delete alert to work I had to change the css link to:
<link rel="stylesheet" href="https://cdnjs.cloudflare.co..."/>