Switch from Encore to AssetMapper

[tacman]

Since the demo is running Symfony 6.3, what do you think of using AssetMapper instead of Encore?

https://symfony.com/blog/new-in-symfony-6-3-assetmapper-component

It seems like it'd be so much easier to set up than encore, this would be a wonderful project to show off as an example of how to use it.

Thanks.

[javiereguiluz]

This looks like a good idea.

Let's ask @weaverryan if he thinks that this is OK for a project like this. Our requirements are that the application is fully usable (all CSS and JS) just by downloading it (the end user should do nothing: run no command, configure nothing, etc.)

Also, don't know if the application should be offline or not. It should probably be offline because this demo app is used to do benchmarks (even by the PHP core team), so maybe it has to be fully usable without Internet connection. So maybe we need to use the --download option.

So, what are your thoughts? Thanks!

[tacman]

Diving into this a bit deeper, I see that the search component is already set up as a Live Component, and indeed base already includes the importmap calls:

        {% block stylesheets %}
            <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
        {% block javascripts %}
            {{ importmap() }}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}

So I installed the asset mapper component, then symfony ux-chart. Everything looked good, it ran the importmap:require commands

 - Installing symfony/stimulus-bundle (v2.9.1): Extracting archive
  - Installing symfony/ux-chartjs (v2.9.1): Extracting archive
Generating autoload files

Symfony operations: 2 recipes (7935fc80834e8dd033302e75e564f3dc)
  - Configuring symfony/stimulus-bundle (>=2.8): From github.com/symfony/recipes:main
  - Configuring symfony/ux-chartjs (>=v2.9.1): From auto-generated recipe
Executing script importmap:require [OK]
Executing script importmap:require [OK]
Executing script cache:clear [OK]
Executing script assets:install public [OK]

As importmap was already being called in base, I didn't do anything, but when I loaded a page with a render_chart() twig call, I didn't get anything. Then I made the mistake of running yarn install --force && yarn dev, and everything broke.

So two questions: Can webpack and assetmapper be installed in the same project? And what is the level of effort to get rid of webpack altogether? If we did that, we could also use it as an opportunity to upgrade to bootstrap 5, drop jQuery, and use more Symfony UX components.

I see that Ryan is giving a talk today on this exact topic.

[tacman]

How about at least documenting how to use assetmapper instead of webpack, even if it's a separate branch or even just a note.

I'm sure I'm not the only one that installs the demo with every new Symfony version to see what the latest best practices are. There are only a handful of external assets used, even manually installing them would be an interesting exercise / tutorial.

And, of course, seeing how webpack and assetmapper play together during the migration. I can't wait to drop the build system, so seeing this demo without Webpack would be awesome. @weaverryan ?

[weaverryan]

We should target this for 6.4 as there are a few changes from 6.3 -> 6.4.

If anyone wants to tackle this, I'd be happy to consult for any questions you have.

Our requirements are that the application is fully usable (all CSS and JS) just by downloading it

For 6.4, you WILL need to run a php bin/console importmap:install command - basically the equivalent of composer install. It downloads any 3rd party assets into assets/vendor/. Is that ok @javiereguiluz? Bonus: yes, it will be useable "offline".

[tacman]

Where are the 6.4 changes documented? I'd like to help, even if it's just with testing.

!!  
!!  In ImportMapConfigReader.php line 43:
!!                                                                                 
!!    The following keys are not valid for the importmap entry "app": "preload".   
!!    Valid keys are: "path", "url", "downloaded_to", "type", "entrypoint".        
!!                                                                                 

[weaverryan]

Definitely not documented anywhere yet as they're still happening. You can watch ux.symfony.com being adapted here https://github.com/symfony/ux/tree/2.x/ux.symfony.com

For the error above specifically, preload is gone. And app should get an 'entrypoint' => true option.

[tacman]

Thanks.

Are there instructions related to css? Even just an example would be great.

[weaverryan]

Check ux.symfony.com again in a week or so - we've just got too many open AssetMapper PR's right now on symfony/symfony - it's a super moving target.

Are there instructions related to css?

But yes, you can import './styles/app.css' from inside assets/app.js like you would do from Encore, and now a <link rel="stylesheet"> will dump out from the {{ importmap() }} Twig function :)

[tacman]

Bumped my playground app to 6.4 and saw this:

bin/console importmap:require flowbite 

 [OK] 2 new items (flowbite, flowbite/dist/flowbite.min.css) added to the importmap.php!                                

Woohoo!! CSS!

Not sure where to put this question. Is there a way to select another CDN besides jsdelivr? Like Skypack? Maybe an option for importmap:require, or an environment variable?

https://github.com/fullcalendar/fullcalendar/issues/7474

[weaverryan]

Once this PR is merged https://github.com/symfony/symfony/pull/51786 all files will be downloaded locally (like Composer). No more CDN usage.

However, behind the scenes, we download from jsdelivr. Your related issue is the first time i've heard of there being a problem with a package from jsdelivr: we're using them because all of the other ones seem to have problems / work inconsistently.

[seb-jean]

This issue can be closed