AssetMapper: Modern JS with Zero Build System

Hey @Fabrice

Thank you for your feedback! I'll share it with the team

By the way, I've always wondered if it was possible to override EasyAdmin to use DataTables instead and have it use Ajax requests.

Honestly, I don't know how hard/easy it would be to do so. I know you can override a bunch of stuff of EasyAdmin though

Cheers!

Hi @Amine

It's easy, just click the link "Buy Access" and after the subscription block find link with text "No thanks, I just want to buy AssetMapper: Modern JS with Zero Build System for $12.00." and go through normal checkout process

Cheers!

Thank you for your feedback. What I often do is just check if you may have changed the design.

I suggest revisiting your designs as they no longer seem to be suitable in terms of accessibility.

Hey @Milica-S!

That's an excellent question! Currently, it's not possible with AssetMapper - and maybe it will never be. In Webpack Encore, you can import images to get their versioned filename... but that's really a Webpack trick: it doesn't make sense in a browser environment to import images.

And, it is probably ok that this doesn't work :). There are 2 alternative solutions:

1) Pass the image filenames to your JavaScript. If using Stimulus, you would do this with values - https://stimulus.hotwired.dev/reference/values - e.g.

<div
    {{ stimulus_controller('gallery', {
        images: images
    }) }}
>

Where images is an array of the image filenames. To populate this in a controller, you should be able to autowire the Symfony\Component\Asset\Packages and pass the "logical path" to any of your images.

2) An even BETTER approach is just to... generate the <img> tags in Twig. Even if you wanted to do something fancy with your images in JavaScript, you could still start with all of the <img> tags in Twig - e.g.

<div data-controller="gallery">
    <img src="{{ asset('logical-path1.png') }}">
    <img src="{{ asset('logical-path2.png') }}">
</div>

If you need to do something specifically with the <img> tags, you could use Stimulus targets to easily fetch those items.

So, this feature doesn't exist, but that's in part because we're embracing passing things TO JavaScript or, better, rendering the HTML in Twig instead of JavaScript.

Cheers!

Hey @BigBenJr!

Sorry for my very slow reply!

1) If I want my pictures to be well ranked on Google image, it would be bad if the url changed every time I do a slight modification on the image (for example correction of an error or improving quality of the image).

If you're actually worried about the google ranking of your images themselves, this very well may be true. Most of the time, images are not the "star" themselves: they are just component we use on our site. And I'd argue that, for situations where the image IS so important, it's more likely these are images you're uploading to your site (vs creating and committing to your code). And in that case, the images aren't versioned. But if you have this use-case of wanting the images to have a high ranking and your images are committed to your code, then thinking about this is a good idea. In that case, you could put the images directly into public/

Cheers!

Hey @lexhartman!

Good question! You can use vue, ux-turbo, stimulus, etc with Webpack Encore just fine. So the REAL question is: can I use Encore & AssetMapper in the same project. The answer is: theoretically yes, but I wouldn't recommend it. They weren't designed with this in mind, so you would likely need to do some manual, weird stuff to get them to play together nicely.

I really like assetmapper so i want to use it in my new project but i also would like to keep my "react or vue-parts" in my new project

Get rid of those parts ;). Ok, real answer: you DO need a build system still for React and Vue. React is actually fairly easy: you just need something to convert the .jsx files to .js files... then those can be served directly via AssetMapper. We do this on ux.symfony.com. It's not ideal - but works - https://github.com/symfony/ux/blob/2.x/ux.symfony.com/package.json#L12

Vue is much harder, because the SFC can even contain styling. I actually could NOT figure out a way to make this work. Vue REALLY wants you to be inside a full build system like Vite or Webpack that handles JS, CSS, etc. In the end, for ux.symfony.com, I had to NOT use SFC - and instead use the template key: https://github.com/symfony/ux/blob/2.x/ux.symfony.com/assets/vue/controllers/PackageSearch.js

If i check the symfony docs it seems that react is easier to handle with assetmapper. Is it then possible to use react without a build system?

Actually, it's HARDER to use React with AssetMapper. Well, React isn't too bad. But the point is, React & Vue need a build. AssetMapper, by design, doesn't provide that. My overall advice these days is: (1) build a full SPA with something like React/Vue and use their tooling all the way and Symfony as an API OR (2) get rid of React/Vue and build a HTML-powered app like we do in the LAST Stack tutorial - https://symfonycasts.com/screencast/last-stack. That's what we do and it feels GREAT

Cheers!

Thanks for the comprehensive answer!

For my purpose i would prefer scenario 2 (get rid of React/Vue and build a HTML-powered app like we do in the LAST Stack tutorial). BUT i am lazy and i really like the https://jsonforms.io/ for quick and dynamic building forms/ questionnary's/ quizes (it uses React or Vue) instead of doing all the complex and hard work with entities and formtypes and so on. Is there any way (or maybe an alternative) that you can think of using this json formbuilder without React or Vue? Otherwise i am going for scenario 1 😅

hey!
i'd like also to use jsonforms with symfony (or laravel) : how could I proceed ? did you follow your idea?
Thx

I finally chose for the combination of Assetmapper without react/ vue and/or jsonforms. The dynamicforms fulfilled my needs! It's explained here: https://symfonycasts.com/screencast/last-stack/live-forms#dependent-form-fields

Hey @lexhartman!

that you can think of using this json formbuilder without React or Vue?

I don't know that library, but I don't think there's anything quite the automatic. I don't mind Symfony's form types at all - but fair enough if you want to use something like this :). If you build this with React, you could still have a fairly simple path to scenario 1.

Cheers!

Hey @Ruslan!

By "test for Stimulus controllers", you do mean actually write tests (e.g. unit/functional tests) for Stimulus controllers? If so, not in this tutorial - but that IS something we should chat about. We're releasing some testing courses, that should be part of it somewhere I realize 🤔.