Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

ferblape
Copy link
Contributor

@ferblape ferblape commented Feb 25, 2021

🎩 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

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.

  • CONSIDER adding a unit test if your PR resolves an issue.
  • ✔️ DO check open PR's to avoid duplicates.
  • ✔️ DO keep pull requests small so they can be easily reviewed.
  • ✔️ DO build locally before pushing.
  • ✔️ DO make sure tests pass.
  • ✔️ DO make sure any new changes are documented in docs/.
  • ✔️ DO add and modify seeds if necessary.
  • ✔️ DO add CHANGELOG upgrade notes if required.
  • ✔️ DO add to GraphQL API if there are new public fields.
  • ✔️ DO add link to MetaDecidim if it's a new feature.
  • AVOID breaking the continuous integration build.
  • AVOID making significant changes to the overall architecture.

📷 Screenshots

Please add screenshots of the changes you're proposing
Description

♥️ Thank you!

Copy link

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@ferblape ferblape mentioned this pull request Feb 25, 2021
Copy link

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

@qlty-cloud-legacy qlty-cloud-legacy bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@ferblape
Copy link
Contributor Author

OMG all green! Thanks @beagleknight for your help

Comment on lines -1 to -6
/**
* Arabic translation for foundation-datepicker
* Nico Mollet <[email protected]>
*/
;(function($){
$.fn.fdatepicker.dates['ar'] = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@mrcasals
Copy link
Contributor

mrcasals commented Apr 16, 2021

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!

@mrcasals mrcasals merged commit 05b8ee7 into develop Apr 16, 2021
@mrcasals mrcasals deleted the 7291-migrate-to-webpacker branch April 16, 2021 07:19
entantoencuanto added a commit that referenced this pull request Apr 19, 2021
* 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
Copy link
Contributor

@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
Copy link
Contributor Author

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
Copy link
Contributor

Thanks @ferblape ! very helpful!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update NodeJS to 14 and NPM to 7 Migrate to webpacker Resolve Webpack warnings
5 participants