Hello AssetMapper Documentation #18370
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,44 @@ | ||
| Symfony Frontend Tools | ||
| ====================== | ||
|
|
||
| Symfony ships with two different options for handling the CSS and JavaScript in | ||
| your app: | ||
|
|
||
| * :ref:`Webpack Encore <frontend-webpack-encore>` is a powerful tool build with Node | ||
| on top of `Webpack`_ that allows you to write modern CSS & JavaScript and handle | ||
| things like JSX (React), Vur or TypeScript. It's the recommended option for | ||
| new Symfony apps. | ||
|
|
||
| * :ref:`Asset Mapper <frontend-asset-mapper>`, is a production-ready simpler alternative | ||
| to Webpack Encore that runs entirely in PHP. It's currently experimental. | ||
|
|
||
| Overall, `Asset Mapper` is powerful & simpler, but doesn't support certain | ||
| features like JSX or TypeScript: | ||
|
|
||
| ========================================= ================= ================= | ||
| Encore AssetMapper | ||
| ========================================= ================= ================= | ||
| Production Ready? yes yes | ||
| Stable? yes experimental | ||
| Requirements node none: pure PHP | ||
| Requires a build step? yes no | ||
| Works in all browsers? yes yes | ||
| Supports :doc:`Stimulus/UX </frontend/ux>` yes yes | ||
| Supports Sass/Tailwind yes :ref:`yes <asset-mapper-extras>` | ||
| Supports JSX, Vue? yes no | ||
| Supports TypeScript yes no | ||
| ========================================= ================= ================= | ||
|
|
||
| .. _frontend-webpack-encore: | ||
|
|
||
| Webpack Encore | ||
| -------------- | ||
|
|
||
| .. admonition:: Screencast | ||
| :class: screencast | ||
weaverryan marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| Do you prefer video tutorials? Check out the `Webpack Encore screencast series`_. | ||
|
|
||
| `Webpack Encore`_ is a simpler way to integrate `Webpack`_ into your application. | ||
| It *wraps* Webpack, giving you a clean & powerful API for bundling JavaScript modules, | ||
| pre-processing CSS & JS and compiling and minifying assets. Encore gives you professional | ||
|
|
@@ -84,26 +107,44 @@ Full API | |
|
|
||
| * `Full API`_ | ||
|
|
||
| .. _frontend-asset-mapper: | ||
|
|
||
| Asset Mapper | ||
| ------------ | ||
|
|
||
| Asset Mapper is an alternative to Webpack Encore that runs entirely in PHP | ||
| without any complex build steps. It leverages the ``importmap`` feature of | ||
| your browser, which is available in all browsers thanks to a polyfill. | ||
| Asset Mapper is currently experimental. | ||
|
|
||
| * :doc:`Install AssetMapper </frontend/asset_mapper/installation>` | ||
| * :doc:`Using AssetMapper </frontend/asset_mapper/usage>` | ||
| * :doc:`Handling CSS </frontend/asset_mapper/css>` | ||
| * :doc:`FAQ & Common Issues </frontend/asset_mapper/faq>` | ||
|
|
||
| Symfony UX Components | ||
| --------------------- | ||
|
|
||
| * :doc:`/frontend/ux` | ||
|
|
||
| .. include:: /frontend/_ux-libraries.rst.inc | ||
|
|
||
| Other Front-End Articles | ||
| ------------------------ | ||
|
|
||
| * :doc:`/frontend/create_ux_bundle` | ||
| * :doc:`/frontend/custom_version_strategy` | ||
|
|
||
| .. toctree:: | ||
| :hidden: | ||
| :glob: | ||
|
|
||
| frontend/encore/installation | ||
| frontend/encore/simple-example | ||
| frontend/encore/* | ||
| frontend/asset_mapper/installation | ||
| frontend/asset_mapper/usage | ||
| frontend/asset_mapper/* | ||
| frontend/* | ||
|
There was a problem hiding this comment. The bottom of https://symfony.com/doc/current/frontend.html is currently "wonky". I think the intention was for the the first, So, I reduced this to just ONE There was a problem hiding this comment. Fun fact, including documents in a toctree entry is no longer relevant with the PHP based parser IIRC There was a problem hiding this comment. That IS a fun fact, thank you! |
||
|
|
||
| .. _`Webpack Encore`: https://www.npmjs.com/package/@symfony/webpack-encore | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This document is now a bit more important than before. On https://symfony.com/doc/current/index.html, I don't think we link to it at all. After we merge this, we probably should.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"Webpack Encore" is linking to it. We should probably do the same as with Security and call it "Introduction"?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good idea. I added some TODO to the PR description for post-merge changes to the main documentation page.