Skip to content
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.

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

Switch away from assetic #292

Closed
imphil opened this issue Jan 3, 2019 · 9 comments

Comments

@imphil
Copy link
Contributor

@imphil imphil commented Jan 3, 2019

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.

@imphil imphil added the enhancement label Jan 3, 2019
@agathver agathver self-assigned this Feb 5, 2019
@aquibbaig

This comment has been minimized.

Copy link
Collaborator

@aquibbaig aquibbaig commented Apr 15, 2019

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

@aquibbaig aquibbaig referenced this issue Apr 30, 2019
imphil added a commit that referenced this issue May 4, 2019
The regex in Assetic's CssUtils::REGEX_COMMENTS causes a
PREG_BACKTRACK_LIMIT_ERROR at least with PHP 7.3, which updated PCRE to
PCRE2. Removing the comments works around that issue for now until we
switch away from Assetic, which is underway in #292.
@agathver agathver removed their assignment May 10, 2019
@aquibbaig

This comment has been minimized.

Copy link
Collaborator

@aquibbaig aquibbaig commented May 19, 2019

#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

@agathver

This comment has been minimized.

Copy link
Collaborator

@agathver agathver commented May 20, 2019

@imphil Do we even use trumbowyg anywhere?

@imphil

This comment has been minimized.

Copy link
Contributor Author

@imphil imphil commented May 20, 2019

page-specific CSS files.

did you mean JS files?

@imphil

This comment has been minimized.

Copy link
Contributor Author

@imphil imphil commented May 20, 2019

@imphil Do we even use trumbowyg anywhere?

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

@aquibbaig

This comment has been minimized.

Copy link
Collaborator

@aquibbaig aquibbaig commented May 20, 2019

@agathver in the LICENSE and Description fields

@aquibbaig

This comment has been minimized.

Copy link
Collaborator

@aquibbaig aquibbaig commented May 20, 2019

page-specific CSS files.

did you mean JS files?

Yes.

@agathver

This comment has been minimized.

Copy link
Collaborator

@agathver agathver commented May 20, 2019

@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

This comment has been minimized.

Copy link
Collaborator

@aquibbaig aquibbaig commented May 23, 2019

@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?

@aquibbaig aquibbaig added this to To do in GSoC 2019 Jun 2, 2019
@aquibbaig aquibbaig moved this from To do to Review in progress in GSoC 2019 Jun 2, 2019
@agathver agathver added the has pr label Jun 3, 2019
@imphil imphil closed this in 2dfec83 Jun 9, 2019
GSoC 2019 automation moved this from Review in progress to Done Jun 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
GSoC 2019
  
Done
3 participants
You can’t perform that action at this time.