Switch away from assetic

[imphil]

The symfony assetic bundle is being deprecated, the suggested replacement is Webpack Encore (https://symfony.com/doc/current/frontend.html). We should consider switching as well to give us (in addition to a maintained library) a more "standard" frontend experience and enable the use of frameworks like vue.js for some frontend pieces.

[aquibbaig]

If we implement this, it will solve #260 as well.

[aquibbaig]

#353 currently is in progress to migrate from Assetic to webpack.
There are a few things we need to tackle for configuring page-specific js files. Each file that webpack builds is an independent file of its own with all its dependencies intact. We have some twig files in which we need to pass twig parameters to the jquery functions.

For example:

$('#{{ form.descriptionText.vars.id }}').trumbowyg(trumbowyg_config);
$('#{{ form.licenseText.vars.id }}').trumbowyg(trumbowyg_config);

The above code here is from LibrecoresProjectRepoBundle:Project:settings.html.twig which uses a twig parameter {{ form.descriptionText.vars.id }}. For bundling it with webpack, this parameter needs to be accessed inside a single javascript file. I believe refactoring all the javascript in this page, i.e. LibrecoresProjectRepoBundle:Project:settings.html.twig to a single js file can be an example to refactor other similar situations. Can anyone help me out in this? @agathver @imphil @sandipbhuyan

[recrsn]

@imphil Do we even use trumbowyg anywhere?

[imphil]

page-specific CSS files.

did you mean JS files?

[imphil]

@imphil Do we even use trumbowyg anywhere?

yes, in the project settings page for the LICENSE and README text boxes

[aquibbaig]

@agathver in the LICENSE and Description fields

[aquibbaig]

page-specific CSS files.

did you mean JS files?

Yes.

[recrsn]

@aquibbaig Here's a suggested approach:

• Assign a class (let's say: .trumbowyg-textbox) to each of the text areas that use trumbowyg.
• Use a jQuery selector to find any .trumbowyg-textbox in a page.
• Use dynamic imports to load trumbowyg and initialize them.

let textareas = $('.trumbowyg-textbox);
if(textareas.length) {
    import('/modules/my-module.js')
        .then(() => {
            textareas.trumbowyg({
                // ...
            });
    });
}

[aquibbaig]

@agathver Did a few console.log() to figure out id's and replaced the earlier code. Any workaround for accessing the classificationHierarchy variable passed from the controller in an external js file?