search

symfony / webpack-encore-bundle

Symfony integration with Webpack Encore!
https://symfony.com/webpack-encore
MIT License
933 stars 83 forks source link

import js & css files from TwigExtension with stimulus controllers #201

Closed Aziz403 closed 1 year ago

Aziz403 commented 1 year ago

Hi, i'm trying to create TwigExtension for my bundle returns : <div {{ stimulus_controller('mycontroller') }}></div> i need to import js file with this is view, the js file can changed base on condition. i think its will be better if we have some feature to import files like controller-name.autoimport from controllers.json. maybe that impossible because webpack needs to build files before, but what if we can add files in controllers.json controller-name.related-assets and choice any assets we wants import from our twigExtension or controller. I hope I have made my point clear. Thank you

weaverryan commented 1 year ago

Hi!

Do you still have this issue? I know what bundle you're referring to now :).

maybe that impossible because webpack needs to build files before

Yes, Webpack needs to know all of the files at build time - that part can't change at runtime.

i need to import js file with this is view, the js file can changed base on condition.

What is the condition? It is likely that you will need 2 different controllers for the 2 different situations. And the user chooses which to use somehow.

Cheers!

Aziz403 commented 1 year ago

Hello !

First of all, I am very proud and happy to talk to you. It's only been 6 months since I started Symfony through your lessons on Symfonycasts.

In datatables.net we have many datatables themes , and i want to give the developer the possiblity to choices the theme easy by passe the name of theme to the Datatable object. to use the object later in TwigExtension to render the datatable and import the theme in the same time.

The current solution is like what you said :

What is the condition? It is likely that you will need 2 different controllers for the 2 different situations. And the user chooses which to use somehow.

separate the themes using empty controllers by import the theme js & css file inside .

I don't know if it's the best pratique ?

weaverryan commented 1 year ago

Thanks for your kind words ❤️ . And congrats for coming so far in just 6 months!

In datatables.net we have many datatables themes , and i want to give the developer the possiblity to choices the theme easy by passe the name of theme to the Datatable object

Unfortunately, while this makes sense from a user perspective, Webpack needs to know "at build time" which CSS files to include. So, this config needs to live in some file that Webpack parses - e.g. controllers.json. There's not going to be a great way to handle this in Symfony config or when the user renders the data table.

If changing from one theme to another is only a matter of using one CSS file vs another CSS file, then the best way to handle this is using autoimport in controllers.json. I'd recommend shipping with one CSS file enabled by default, then maybe a few other CSS files in autoimport for other themes, which are disabled by default. Example: https://github.com/symfony/ux/blob/b7f636b1c22cc8dd8bcf3a7785bff96e8eb5b64c/src/Autocomplete/assets/package.json#L15-L18

Cheers!

Aziz403 commented 1 year ago

Thanks for your time ! Unfortunately, the themes is contians JS & CSS files. so i think in this is situation we have one solution :

separate the themes using empty controllers by import the theme js & css file inside .

weaverryan commented 1 year ago

I agree - cheers!