Comments (11)
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".
from demo.
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!
from demo.
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.
from demo.
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 ?
from demo.
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".
!!
from demo.
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.
from demo.
Thanks.
Are there instructions related to css? Even just an example would be great.
from demo.
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 :)
from demo.
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
from demo.
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.
from demo.
This issue can be closed
from demo.
Related Issues (20)
- PHPStan - Symfony + Doctrine HOT 1
- Psalm HOT 3
- Enable foreign keys in SQLite HOT 8
- Persian Translation HOT 3
- Can't find when the var/sessions folder used
- Flash message translations HOT 1
- No route found Error HOT 2
- Cannot update to latest v6.3.2 version
- Add switch language in homepage HOT 1
- Should we do 303 redirects upon form submit? HOT 3
- Use DTOs to map requests (using MapRequestPayload & MapQueryString) HOT 10
- Translation editor for XLIFF HOT 3
- Question: Doctrine columns order HOT 1
- Invisible flash messages (no "fade in" animation) ?
- Symfony 7 Demo and Migration Questions HOT 2
- Remove unnecessary SQL queries HOT 1
- Don't use Twig CodeExtension helpers outside of a profiler panel HOT 2
- bug(ux): LiveProp not initialized while using the search form HOT 1
- Pass Request to EntityValueResolver's expression
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from demo.