8000 Adding `importmap_polyfill` by ThomasLandauer · Pull Request #18537 · symfony/symfony-docs · GitHub
[go: up one dir, main page]
Skip to content

Adding importmap_polyfill #18537

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.

Sign up for GitHub

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

Closed
wants to merge 3 commits into from
Closed

Adding importmap_polyfill #18537

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d7876af
Adding `importmap_polyfill`
ThomasLandauer Jul 7, 2023
cb39421
Update asset_mapper.rst
ThomasLandauer Jul 7, 2023
91be222
Update asset_mapper.rst
ThomasLandauer Jul 7, 2023
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
20 changes: 15 additions & 5 deletions frontend/asset_mapper.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,17 +289,27 @@ Preloading and Initializing "app.js"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

In addition to the importmap, the ``{{ importmap() }}`` Twig function also renders
an `ES module shim`_ and a few other things, like a set of "preloads":
an `ES module shim`_ by default. You can configure this in your ``config/packages/asset_mapper.yaml``
configuration file:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably also document the fact that we can customize the source of the shim, not just disabling it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added it as comment inside the code block. Not very elegant - I have to admit ;-)


.. code-block:: html
.. code-block:: yaml
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should have the configuration block for all supported formats, like elsewhere

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I don't know the other formats' syntax :-( But starting with YAML is certainly better than nothing...


<link rel="modulepreload" href="/assets/app-4e986c1a2318dd050b1d47db8d856278.js">
<link rel="modulepreload" href="/assets/duck-1b7a64b3b3d31219c262cf72521a5267.js">
framework:
asset_mapper:
importmap_polyfill: false # disable the shim ...
# importmap_polyfill: 'https://...' # ... or pass some custom URL

In ``importmap.php``, each entry can have a ``preload`` option. If set to ``true``,
a ``<link rel="modulepreload">`` tag is rendered for that entry as well as for
any JavaScript files it imports (this happens for "relative" - ``./`` or ``../`` -
imports only). This is a performance optimization and you can learn more about below
imports only):

.. code-block:: html

<link rel="modulepreload" href="/assets/app-4e986c1a2318dd050b1d47db8d856278.js">
<link rel="modulepreload" href="/assets/duck-1b7a64b3b3d31219c262cf72521a5267.js">

This is a performance optimization and you can learn more about below
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would keep this in the same paragraph than before instead of moving the code block in the middle of the explanation.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I'm not sure what you mean. And (more important) I can't quite imagine what it will finally look like, just by looking at GitHub's diff.
So maybe merge it as-is, then you move it?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When moving the existing code block, you split the existing paragraph in 2, putting the code block in the middle.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So you want me to move the <link rel="moduleprelo AFEE ad"... code block down after "learn more about below in Performance: Add Preloading."?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a different idea:

A) Add all of this to a new section under Configuration Options instead of here - https://github.com/symfony/symfony-docs/blob/91be2224cb6e6d62d643a546618d054a5e80dfe0/frontend/asset_mapper.rst#configuration-options

B) Leave this section unchanged, except change the top to point to that config section

In addition to the importmap, the ``{{ importmap() }}`` Twig function also renders
an `ES module shim`_ (see the :ref:`config-importmap-polyfill <polyfill config>` and
a few other things, like a set of "preloads":

(below, above the new section, you'd add .. _config-importmap-polyfill: so that the above :ref:works.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, I opened a new PR: #18554

in :ref:`Performance: Add Preloading <performance-preloading>`.

.. _importmap-app-entry:
Expand Down
0