Requiring SweetAlert2

With a Subscription, click any sentence in the script to jump to that part of the video!

Hey! 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:

            
            218 lines
            
            web/assets/js/RepLogApp.js
        
                                                    ... 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:

            
            67 lines
            
            app/Resources/views/lift/index.html.twig
        
                                                    ... 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:

            
            219 lines
            
            web/assets/js/RepLogApp.js
        
                                                    ... 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:

            
            14 lines
            
            package.json
        
            {
        
                                                    ... 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:

            
            67 lines
            
            app/Resources/views/lift/index.html.twig
        
                                                    ... 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:

            
            66 lines
            
            app/Resources/views/lift/index.html.twig
        
                                                    ... 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.

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "symfony/symfony": "3.3.*", // v3.3.16
        "twig/twig": "2.10.*", // v2.10.0
        "doctrine/orm": "^2.5", // v2.7.0
        "doctrine/doctrine-bundle": "^1.6", // 1.10.3
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.5
        "symfony/swiftmailer-bundle": "^2.3", // v2.6.3
        "symfony/monolog-bundle": "^2.8", // v2.12.1
        "symfony/polyfill-apcu": "^1.0", // v1.4.0
        "sensio/distribution-bundle": "^5.0", // v5.0.22
        "sensio/framework-extra-bundle": "^3.0.2", // v3.0.26
        "incenteev/composer-parameter-handler": "^2.0", // v2.1.2
        "friendsofsymfony/user-bundle": "^2.0", // v2.1.2
        "doctrine/doctrine-fixtures-bundle": "~2.3", // v2.4.1
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.3.2
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "friendsofsymfony/jsrouting-bundle": "^1.6" // 1.6.0
    },
    "require-dev": {
        "sensio/generator-bundle": "^3.0", // v3.1.6
        "symfony/phpunit-bridge": "^3.0" // v3.3.5
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "dependencies": [],
    "devDependencies": {
        "babel-core": "^6.25.0", // 6.25.0
        "babel-loader": "^7.1.1", // 7.1.1
        "babel-plugin-syntax-dynamic-import": "^6.18.0", // 6.18.0
        "babel-preset-env": "^1.6.0", // 1.6.0
        "bootstrap-sass": "^3.3.7", // 3.3.7
        "clean-webpack-plugin": "^0.1.16", // 0.1.16
        "copy-webpack-plugin": "^4.0.1", // 4.0.1
        "core-js": "^2.4.1", // 2.4.1
        "css-loader": "^0.28.4", // 0.28.4
        "extract-text-webpack-plugin": "^3.0.0", // 3.0.0
        "file-loader": "^0.11.2", // 0.11.2
        "font-awesome": "^4.7.0", // 4.7.0
        "jquery": "^3.2.1", // 3.2.1
        "lodash": "^4.17.4", // 4.17.4
        "node-sass": "^4.5.3", // 4.5.3
        "resolve-url-loader": "^2.1.0", // 2.1.0
        "sass-loader": "^6.0.6", // 6.0.6
        "style-loader": "^0.18.2", // 0.18.2
        "sweetalert2": "^6.6.6", // 6.6.6
        "webpack": "^3.4.1", // 3.4.1
        "webpack-chunk-hash": "^0.4.0", // 0.4.0
        "webpack-dev-server": "^2.6.1", // 2.6.1
        "webpack-manifest-plugin": "^1.2.1" // 1.2.1
    }
}

Edit on GitHub

TRACK

JavaScript Fundamentals >

COURSE

JavaScript for PHP Geeks: Webpack for Module Loading Awesomeness

Requiring SweetAlert2

Keep on Learning!

Require sweetalert2

When JS needs CSS

Leave a comment!

What PHP libraries does this tutorial use?

What JavaScript libraries does this tutorial use?

	... lines 1 - 5
	(function(window, Routing, swal) {
	... lines 7 - 216
	})(window, Routing, swal);

	... 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 %}

	... lines 1 - 4
	const swal = require('sweetalert2');

	(function(window, Routing) {
	... lines 8 - 217
	})(window, Routing);

	{
	... lines 2 - 7
	"devDependencies": {
	... line 9
	"sweetalert2": "^6.6.6",
	... line 11
	}
	}

	... 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