Migrate to Webpacker by ferblape · Pull Request #7464 · decidim/decidim

ferblape · 2021-02-25T15:17:39Z

🎩 What? Why?

This PR migrates javascripts from the old and beloved Asset Pipeline to they young and modern Webpacker

The migration has been divided in two PRs:

this one takes care of migrating javascript, but keeps asset pipeline for CSS and images
Migrate to Webpacker (CSS and images) #7733 is based on this one and takes care of migrating CSSs, fonts and images, and takes cares of updating the docs

This migration doesn't include decidim-elections (see #7291 (comment))

This PR uses a beta version of Webpacker 6 gem, which is almost ready to be released and uses the modern Webpack v5. At the time of creating this PR that version hasn't been released yet.

The approach followed is that Decidim takes care of controlling Webpacker, so the applications using Decidim will rely on the Decidim Webpacker instance to compile the assets, this way we can manage all the dependencies in the package.json of Decidim.

Yarn has been introduced to manage frontend dependencies, and all the assets vendorized has been replaced by the npmjs version except those included in decidim-core/app/packs/src/decidim/vendor:

foundation-datepicker.js - it was modified from the original source code
jquery-tmpl.js - it was modified from the original source code
leaflet-tilelayer-here.js - it was modified from the original source code
modernizr.js - it was a custom build
tribute.js - it was modified from the original source code

Development process

The development process is very smooth, in the root folder of Decidim the webpack-dev-server is available via bin/webpack-dev-server and the development_app is configured to use Decidim's Webpacker, so asset changes are detected and automatic reloading is enabled.

Testing environment

Node has been added to all github workflows, together with a yarn install (using a cache folder to speedup) and it's necessary to precompile the assets before running the specs.

📌 Related Issues

Implements part of Migrate to webpacker #7291
Fixes Update NodeJS to 14 and NPM to 7 #7305
Fixes Resolve Webpack warnings #6523

Testing

You should create a new development_app, start webpack dev server and start browsing:

you should see packs compiled in development_app/public/packs
if you inspect the source code you should see the new packs
if you change any js you should see the page reloading
and of course everything should work as before!

📋 Checklist

🚨 Please review the guidelines for contributing to this repository.

📷 Screenshots

Please add screenshots of the changes you're proposing

♥️ Thank you!

qlty-cloud-legacy

The PR diff size of 48510 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 48510 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 71956 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 71956 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 73396 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102108 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102132 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102139 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102139 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102139 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102160 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102162 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102162 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102259 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102259 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102259 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102289 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102438 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102469 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 102502 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 121869 lines exceeds the maximum allowed for the inline comments feature.

qlty-cloud-legacy

The PR diff size of 121879 lines exceeds the maximum allowed for the inline comments feature.

ferblape · 2021-04-16T05:13:03Z

OMG all green! Thanks @beagleknight for your help

mrcasals · 2021-04-16T07:13:50Z

decidim-core/vendor/assets/javascripts/datepicker-locales/foundation-datepicker.ar.js

-/**
- * Arabic translation for foundation-datepicker
- * Nico Mollet <nico.mollet@gmail.com>
- */
-;(function($){
-	$.fn.fdatepicker.dates['ar'] = {


@ferblape I see all these files have been removed, where are they now? I can't see them being moved... Thanks

Ah, I see foundation-datepicker is added as a depndency in the package.json

mrcasals · 2021-04-16T07:14:31Z

Excellent job @ferblape, thank you so much! I left you a comment above regarding some translation files, could you check it out, please?

Edit: I see it's marked as a dependency, all good!

* develop: New Crowdin updates (#7850) Accessibility tool for development environments (#7810) Attempt to fix puffing-billy runtime error (#7853) Dynamically get all participatory space role tables for the `visible_meeting_for` query (#7855) Fix joining a meetings that the user already follows (#7854) Improve proposals import options (#7669) Fix proposal form attachment errors (#7856) New Crowdin updates (#7844) Fix branch name on generators (#7849) Conditionally render questions in election booth (#7822) Fix node version for version managers (#7848) Migrate to Webpacker (#7464)

microstudi · 2021-04-22T13:30:34Z

@mrcasals @entantoencuanto @andreslucena this has been merged without any technical documentation? Or there's something that we haven't spot?
this is a huge change and forces everyone that contributes to change their know how. It should've been a requirement IMHO.

ferblape · 2021-04-22T13:33:15Z

hi @microstudi there's a second PR that hasn't been merged yet #7733 that includes documentation and a couple of guides to migrate apps and components. If you could check it and provide feedback in case you miss something I'd really appreciate it

Thanks!

microstudi · 2021-04-22T13:38:08Z

Thanks @ferblape ! very helpful!

qlty-cloud-legacy bot reviewed Feb 25, 2021

View reviewed changes

ferblape mentioned this pull request Feb 25, 2021

Migrate to webpacker #7291

Closed

qlty-cloud-legacy bot reviewed Feb 26, 2021

View reviewed changes

ferblape force-pushed the 7291-migrate-to-webpacker branch from 2344979 to fb23e05 Compare February 26, 2021 14:54

qlty-cloud-legacy bot reviewed Feb 26, 2021

View reviewed changes

qlty-cloud-legacy bot reviewed Mar 1, 2021

View reviewed changes

ferblape force-pushed the 7291-migrate-to-webpacker branch from b4d8622 to a34c32b Compare March 1, 2021 14:23

qlty-cloud-legacy bot reviewed Mar 1, 2021

View reviewed changes

ferblape force-pushed the 7291-migrate-to-webpacker branch from 20757f6 to 00205aa Compare March 2, 2021 08:41

qlty-cloud-legacy bot reviewed Mar 2, 2021

View reviewed changes

ferblape force-pushed the 7291-migrate-to-webpacker branch from 00205aa to d501a9d Compare March 2, 2021 15:11

qlty-cloud-legacy bot reviewed Mar 2, 2021

View reviewed changes

ferblape force-pushed the 7291-migrate-to-webpacker branch from 49cc732 to eb40dcd Compare March 3, 2021 05:43

qlty-cloud-legacy bot reviewed Mar 3, 2021

View reviewed changes

ferblape force-pushed the 7291-migrate-to-webpacker branch from 6c52fe1 to 3471555 Compare March 3, 2021 10:13

qlty-cloud-legacy bot reviewed Mar 3, 2021

View reviewed changes

ferblape force-pushed the 7291-migrate-to-webpacker branch from ab25ff1 to 8fad38c Compare March 4, 2021 06:06

qlty-cloud-legacy bot reviewed Mar 4, 2021

View reviewed changes

ferblape force-pushed the 7291-migrate-to-webpacker branch from 17ce54b to 8113753 Compare March 4, 2021 15:07

qlty-cloud-legacy bot reviewed Mar 4, 2021

View reviewed changes

ferblape force-pushed the 7291-migrate-to-webpacker branch from 8113753 to 9ae26c5 Compare March 8, 2021 04:47

Fix import

cbd3974

qlty-cloud-legacy bot reviewed Apr 16, 2021

View reviewed changes

Conditionally load the setup voting component

a6aee10

qlty-cloud-legacy bot reviewed Apr 16, 2021

View reviewed changes

mrcasals reviewed Apr 16, 2021

View reviewed changes

mrcasals merged commit 05b8ee7 into develop Apr 16, 2021

mrcasals deleted the 7291-migrate-to-webpacker branch April 16, 2021 07:19

mrcasals added the target: developer-experience label Apr 16, 2021

This was referenced Apr 16, 2021

Webpack issues #7847

Closed

Fix node version for version managers #7848

Merged

Fix branch name on generators #7849

Merged

ahukkanen mentioned this pull request Apr 28, 2021

Fix JS errors in the admin panel #7903

Merged

12 tasks

This was referenced Apr 29, 2021

Make webpacker build available in production #7915

Merged

Production applications don't work with webpacker #7916

Closed

This was referenced May 27, 2021

Configure webpacker additional paths and entry points programmatically #8066

Merged

Webpacker: Do not override the application's package.json #8094

Merged

ahukkanen mentioned this pull request Jun 6, 2021

Remove the relative paths from the fontface file #8108

Merged

12 tasks

ahukkanen mentioned this pull request Jul 1, 2021

Make the webpacker gem a core dependency #8181

Merged

12 tasks

ferblape mentioned this pull request Jul 2, 2021

Remove Sprockets dependant gems #8183

Merged

12 tasks

carlobeltrame mentioned this pull request Jun 7, 2022

window.Decidim.createMapController is not exposed anymore #9399

Closed

alecslupu mentioned this pull request Feb 23, 2023

Switch away from Webpacker to Shakapacker #10389

Merged

alecslupu mentioned this pull request Apr 3, 2023

Fix editor toolbar #10673

Merged

ahukkanen mentioned this pull request Jun 29, 2023

Fix issues with overriding maps and loading Leaflet #11105

Merged

ahukkanen mentioned this pull request Feb 19, 2024

Remove tributejs NPM package as an NPM dependency #12483

Merged

Uh oh!

Conversation

ferblape commented Feb 25, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎩 What? Why?

📌 Related Issues

Testing

📋 Checklist

📷 Screenshots

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

Uh oh!

ferblape commented Apr 16, 2021

Uh oh!

mrcasals Apr 16, 2021

Choose a reason for hiding this comment

ferblape commented Feb 25, 2021 •

edited

Loading

mrcasals commented Apr 16, 2021 •

edited

Loading