WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:01.086 --> 00:00:05.356 align:middle
We still have work to do to get
the new.html.twig template working:

00:00:06.286 --> 00:00:09.786 align:middle
we have a script tag for this
external autocomplete library

00:00:09.786 --> 00:00:15.516 align:middle
and one for our own
public/js/algolia-autocomplete.js file...

00:00:15.826 --> 00:00:19.176 align:middle
which is our last JavaScript
file in the public/ directory!

00:00:19.626 --> 00:00:23.556 align:middle
Woo! This holds code that
adds auto-completion...

00:00:23.766 --> 00:00:25.236 align:middle
on this author box...

00:00:25.556 --> 00:00:28.136 align:middle
which, yes, is totally broken.

00:00:30.906 --> 00:00:38.076 align:middle
To start, remove the CDN link to
this autocomplete library and,

00:00:38.326 --> 00:00:41.226 align:middle
at your terminal, install it properly!

00:00:41.736 --> 00:00:50.826 align:middle
yarn add autocomplete.js -- dev Next, you know
the drill, take the algolia-autocomplete.js file

00:00:51.046 --> 00:00:54.396 align:middle
and move it into the assets/js/ directory.

00:00:54.796 --> 00:00:58.316 align:middle
But I'm not going to make
this a new entry point.

00:00:58.886 --> 00:01:04.786 align:middle
We could do that, but really, we already
have an entry file that's included

00:01:04.786 --> 00:01:07.516 align:middle
on this page: admin_article_form.

00:01:07.966 --> 00:01:15.846 align:middle
So really, admin_article_form.js should probably
just use the code from algolia-autocomplete.js.

00:01:17.586 --> 00:01:21.326 align:middle
So, move that file into the
components/ directory...

00:01:21.446 --> 00:01:24.526 align:middle
which is kind of meant for reusable modules.

00:01:24.816 --> 00:01:29.186 align:middle
And... well, this isn't really
written like a re-usable module

00:01:29.186 --> 00:01:34.096 align:middle
yet because it just executes code instead
or returning something, like a function.

00:01:34.496 --> 00:01:35.836 align:middle
But, we'll work on that later.

00:01:36.706 --> 00:01:40.376 align:middle
Let's also take the algolia-autocomplete.css
file and move

00:01:40.376 --> 00:01:44.206 align:middle
that all the way up here into assets/css/.

00:01:44.746 --> 00:01:48.476 align:middle
And just because we can,
I'll make it an SCSS file!

00:01:49.676 --> 00:01:55.966 align:middle
Okay! Back in admin_article_form.js,
let's bring in this code: import '.

00:01:56.216 --> 00:01:59.606 align:middle
/components/algolia-autocomplete'.

00:02:00.556 --> 00:02:02.856 align:middle
We don't need an import from yet...

00:02:03.116 --> 00:02:06.596 align:middle
because that file doesn't
actually export anything.

00:02:07.676 --> 00:02:10.156 align:middle
For the CSS: import '..

00:02:10.156 --> 00:02:13.636 align:middle
/css/algolia-autocomplete.scss'.

00:02:15.376 --> 00:02:19.276 align:middle
Back in new.html.twig, the great thing is,

00:02:19.596 --> 00:02:24.756 align:middle
we don't need to import this CSS file
anymore or any of these script files.

00:02:25.626 --> 00:02:28.556 align:middle
This is really how we want
our templates to look:

00:02:29.016 --> 00:02:32.996 align:middle
a single a call to {{ encore_entry_script_tags()
}} and a single call

00:02:32.996 --> 00:02:35.046 align:middle
to {{ encore_entry_link_tags() }}.

00:02:36.386 --> 00:02:40.986 align:middle
So if we refresh right now, not
surprisingly, it still won't work!

00:02:41.416 --> 00:02:43.606 align:middle
And it's our favorite error!

00:02:44.116 --> 00:02:48.166 align:middle
$ is undefined from algolia-autocomplete.js.

00:02:49.086 --> 00:02:52.796 align:middle
Yes, this is the error I see
when I close my eyes at night.

00:02:53.296 --> 00:02:54.046 align:middle
Let's get to work.

00:02:54.876 --> 00:03:00.256 align:middle
Of course, we are referencing
$. So, import $ from 'jquery'.

00:03:01.646 --> 00:03:04.926 align:middle
We're also using the autocomplete
library in here.

00:03:05.676 --> 00:03:11.746 align:middle
No problem: import autocomplete
from 'autocomplete.js'.

00:03:11.786 --> 00:03:14.036 align:middle
Wait... that's not quite right.

00:03:14.596 --> 00:03:20.276 align:middle
This autocomplete.js library is a standalone
JavaScript library that can be used

00:03:20.276 --> 00:03:22.816 align:middle
with anything - jQuery, React, whatever.

00:03:23.506 --> 00:03:29.346 align:middle
But... our existing code isn't using
the "standalone" version of the library.

00:03:29.776 --> 00:03:32.096 align:middle
It's using a jQuery plugin -

00:03:32.566 --> 00:03:36.386 align:middle
this .autocomplete() function
- that comes with that package.

00:03:37.156 --> 00:03:41.756 align:middle
So, we could refactor our code
down here to use the, kind of,

00:03:41.886 --> 00:03:45.816 align:middle
official way of using this
library - independent of jQuery.

00:03:46.306 --> 00:03:48.506 align:middle
But... that's the easy way out!

00:03:49.066 --> 00:03:52.216 align:middle
Let's see if we can get this
to work as a jQuery plugin.

00:03:52.896 --> 00:03:56.366 align:middle
I'll hold command or control
and click into autocomplete.js.

00:03:57.216 --> 00:04:00.226 align:middle
Then double-click the directory
to zoom us there.

00:04:01.456 --> 00:04:05.836 align:middle
The "main" file is this index.js
at the root of the directory.

00:04:06.226 --> 00:04:09.476 align:middle
But if you look in dist/, hey!

00:04:09.816 --> 00:04:11.746 align:middle
autocomplete.jquery.js!

00:04:11.806 --> 00:04:16.886 align:middle
That's what we were including
before via the <script> tag!

00:04:17.626 --> 00:04:25.596 align:middle
So instead of importing the main file, let's
import autocomplete.js/dist/autocomplete.jquery.

00:04:26.096 --> 00:04:30.216 align:middle
And remember, we don't use import
from with jQuery plugins...

00:04:30.406 --> 00:04:35.346 align:middle
because they don't return anything:
they modify the jQuery object.

00:04:36.386 --> 00:04:39.756 align:middle
Ok, I think we're great and I think we're ready.

00:04:40.386 --> 00:04:43.036 align:middle
Move over, refresh and...

00:04:43.396 --> 00:04:49.896 align:middle
huh: jQuery is not defined Notice
it doesn't say "$ is not defined":

00:04:50.066 --> 00:04:52.006 align:middle
it says "jQuery is not defined"...

00:04:52.006 --> 00:04:56.276 align:middle
and it's coming from autocomplete.jquery.js!

00:04:56.696 --> 00:04:59.396 align:middle
It's coming from the third party package!

00:05:00.046 --> 00:05:02.336 align:middle
This... is tricky.

00:05:02.786 --> 00:05:06.556 align:middle
Plain and simple, that file
is written incorrectly.

00:05:07.216 --> 00:05:11.796 align:middle
Yea, it only works if jQuery
is a global variable!

00:05:11.926 --> 00:05:13.086 align:middle
And in Webpack...

00:05:13.366 --> 00:05:19.376 align:middle
it's not! Let's talk more about this
and fix it with some black magic, next.