Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Problem/Motivation
Provide a smooth, fast & safe way to transform our code to ES6.
Proposed resolution
Use https://github.com/facebook/jscodeshift as toolkit.
Remaining tasks
- Pick the high-quality codemod plugins and use in Drupal
User interface changes
- N/A
API changes
- N/A
Data model changes
- N/A
Comment | File | Size | Author |
---|---|---|---|
#7 | core-es6-codemod-2809735-7.patch | 4.74 KB | nod_ |
#5 | core-es6-codemod-2809735-5.patch | 4.83 KB | nod_ |
Comments
Comment #2
nod_I have no opinion on which tool to use for making this happen. If this one is better, make a patch, i'll test and we'll probably change for this :)
Comment #3
nod_Tried it out, looks like it'd be more useful for things like refactoring during version upgrades than use as a tool to compile our JS. I didn't see how we could create a new file from that.
Comment #4
nod_Oh ok, my mistake. You're right we should use that.
Comment #5
nod_This is awesome :) Worked on it today. Confusing to get started but after a while is mostly ok. Attached a codemod that replace calls to jquery each with for of loops (since they support it now).
After applying some codemods from https://github.com/cpojer/js-codemod (no-vars and arrow-function) and mine, the code looks like this (and running eslint --fix):
Before
After
It'll take a while to get all the codemods working but it's definitely worth it. Instant upgrade for any drupal js. the amount of modifications don't require a compilation to work on modern browsers (see https://kangax.github.io/compat-table/es6/).
Comment #6
nod_And maybe the most visible change is in theme functions:
before
after
Comment #7
nod_Added some more changes:
before
after
Some issues with nested .each() in the first rule but it could be manually dealt with, there are about 4 places where it fails on core code.
If you're wondering about the utility of getting rid of .each() call, when #2402103: Add once.js to core lands, it'll be easier to refactor.Not like it's required but I'm happy when we don't use jquery-specific apis. It does help for passing from jquery to native selector, since this is possibleComment #9
Wim LeersDidn't #2818825: Rename all JS files to *.es6.js and compile them already do this?
Comment #10
Wim LeersPer #2809281-39: Use ES6 for core JavaScript development, #2880007: Auto-fix ESLint errors and warnings already did this.