Skip to content

[AssetMapper] Adding notes about global variables and tailwind-bundle #18459

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 28, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions frontend/asset_mapper.rst
Original file line number Diff line number Diff line change
Expand Up @@ -341,6 +341,47 @@ also shows how you can require multiple packages at once:

$ php bin/console importmap:require highlight.js/lib/core highlight.js/lib/languages/javascript

Global Variables like jQuery
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You might be accustomed to relying on global variables - like jQuery's ``$``
variable:

.. code-block:: javascript

// assets/app.js
import 'jquery';

// app.js or any other file
$('.something').hide(); // WILL NOT WORK!

But in a module environment (like with AssetMapper), when you import
a library like ``jquery``, it does *not* create a global variable. Instead, you
should import it and set it to a variable in *every* file you need it:

.. code-block:: javascript

import $ from 'jquery';
$('.something').hide();

You can even do this from an inline script tag:

.. code-block:: html

<script type="module">
import $ from 'jquery';
$('.something').hide();
</script>

If you *do* need something to become a global variable, you do it manually
from inside ``app.js``:

.. code-block:: javascript

import $ from 'jquery';
// things on "window" become global variables
window.$ = $;

Handling 3rd-Party CSS
----------------------

Expand Down Expand Up @@ -713,6 +754,11 @@ component.
Using Tailwind CSS
------------------

.. seealso::

Check out `symfonycasts/tailwind-bundle`_ for an even easier way to use
Tailwind with Symfony.

Want to use the `Tailwind`_ CSS framework with the AssetMapper component? No problem.
First, install the ``tailwindcss`` binary. This can be installed via npm (run
``npm --init`` if you don't already have a ``package.json`` file):
Expand Down Expand Up @@ -1095,3 +1141,4 @@ This will force the AssetMapper component to re-calculate the content of all fil
.. _BabdevPagerfantaBundle: https://github.com/BabDev/PagerfantaBundle
.. _Cloudflare: https://www.cloudflare.com/
.. _EasyAdminBundle: https://github.com/EasyCorp/EasyAdminBundle
.. _symfonycasts/tailwind-bundle: https://github.com/SymfonyCasts/tailwind-bundle