8000 Switch from Encore to AssetMapper · Issue #1423 · symfony/demo · GitHub
[go: up one dir, main page]
Skip to content

Switch from Encore to AssetMapper #1423

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

Jump to bottom
Closed
tacman opened this issue Jun 16, 2023 · 11 comments
Closed

Switch from Encore to AssetMapper #1423

tacman opened this issue Jun 16, 2023 · 11 comments

Comments

@tacman
Copy link
Contributor
tacman commented Jun 16, 2023 •
edited
Loading

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
Copy link
Member

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
Copy link
Contributor Author
tacman commented Jun 16, 2023

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
Copy link
Contributor Author
tacman commented Sep 30, 2023

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
Copy link
Member

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
Copy link
Contributor Author
tacman commented Oct 3, 2023

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
Copy link
Member

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
Copy link
Contributor Author
tacman commented Oct 4, 2023 •
edited
Loading

Thanks.

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

@weaverryan
Copy link
Member

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
Copy link
Contributor Author
tacman commented Oct 5, 2023

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?

fullcalendar/fullcalendar#7474

@weaverryan
Copy link
Member

Once this PR is merged symfony/symfony#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
Copy link
Contributor

This issue can be closed

@tacman tacman closed this as completed Dec 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@javiereguiluz @weaverryan @tacman @seb-jean
0