Page MenuHomePhabricator

Enable babel transpiling in MobileFrontend
Closed, ResolvedPublic5 Story Points

Description

We would like to make use of babel presets for transpiling.

Adopting transpiling amongst other things would empower:

  • the adoption of jsx like syntax
  • the ability to use class keyword and module imports and exports as well as ES6 syntax in our source code. We begin by focusing on the former.
  • The ability to use const/let
  • ES6 syntax for more readable code

Background

This task encompasses the work to enable ES6 syntax via Babel transpilation for functional and test code under src/. Code under src/ and webpack.config.js should be revised as part of this task at minimum to use import and export instead of require and module.exports.

We were very careful in Popups to forbid ES6 syntax in the build product. This task encompasses the work to either duplicate the effort in MobileFrontend. As part of this task and assuming we wish to keep the check, pushing the ES5 config from Popups to the Wikimedia ESLint config should be considered and may expand the effort required to complete the task.

Acceptance criteria

  • A transpiler is added that allows ES6 to ES5 transpilation
  • Important!: No changes to code have been made to make it possible to adopt ES6 syntax (we will consider and importantly discuss all the possibilities separately, so hold off those huge patches that switch var to let/const).
  • ES6 syntax cannot end up in the built output e.g. "const x = 1" it doesn't end up in production code. A grep of const in resources/dist should show no results

Sign off steps

  • Change a var to a const and confirm it's not in the built output
  • Setup a chat for talking through how we will make use of the transpiler (maybe super happy dev time)

Related Objects

StatusAssignedTask
OpenNone
OpenNone
OpenNone
ResolvedJdlrobson
OpenNone
OpenNone
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedJdrewniak
Resolvedpmiazga
ResolvedJdlrobson
ResolvedNone
ResolvedNone
ResolvedJdlrobson
ResolvedJdrewniak
ResolvedJdlrobson
ResolvedNone
ResolvedNone
Resolvedphuedx
ResolvedJdlrobson
ResolvedJdrewniak
ResolvedJdlrobson
OpenNone
OpenNone
ResolvedJdlrobson
ResolvedJdlrobson
Resolvedpmiazga
OpenNone
OpenNone
OpenNone
OpenNone
ResolvedNiedzielski

Event Timeline

Niedzielski triaged this task as High priority.Aug 24 2018, 3:14 PM
Niedzielski created this task.
Jdlrobson renamed this task from Add ES5 linter to Add ES5 linter to allow usage of ES6 syntax in MobileFrontend.Aug 28 2018, 10:35 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Jdlrobson.

As part of this task and assuming we wish to keep the check, pushing the ES5 config from Popups to the Wikimedia ESLint config should be considered and may expand the effort required to complete the task.

I'm not sure how that would work here, given the eslint-config-wikimedia is targeting something different. It would make sense to push this into a new repo however, given more than one thing will now use it.

This is further down the road IMO so not upcoming but I'm open to a conversation with the team. We should certainly estimate it.

If we use a transpiler like Babel to convert ES6 to ES5 syntax, that would guarantee that the compiled code would be ES5 compatible wouldn't it?

Jdlrobson lowered the priority of this task from High to Low.Aug 30 2018, 1:34 AM

I'm not sure how that would work here, given the eslint-config-wikimedia is targeting something different.

This could be a new config in eslint-config-wikimedia like their QUnit config.

If we use a transpiler like Babel to convert ES6 to ES5 syntax, that would guarantee that the compiled code would be ES5 compatible wouldn't it?

+1, zero issues in Popups so far as I know.

Jdlrobson renamed this task from Add ES5 linter to allow usage of ES6 syntax in MobileFrontend to Use ES6 syntax in MobileFrontend.Sep 10 2018, 5:35 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson raised the priority of this task from Low to Normal.Oct 2 2018, 8:34 PM
Jdlrobson changed the task status from Open to Stalled.Oct 5 2018, 5:49 PM

Would you like to be further along in the migration before we work on this, as I don't want to have a mixture of Es6 and ES5 code.

Jdlrobson renamed this task from Use ES6 syntax in MobileFrontend to Use ES6 syntax in MobileFrontend for class constructs .Jan 2 2019, 4:59 PM
Jdlrobson changed the task status from Stalled to Open.
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Needs Prioritization to Upcoming on the Readers-Web-Backlog board.

remove need of mfExtend in favor of ES6 classes

I would like to talk about alternatives to classes in a super happy dev time. Popups does not use them.

Jdlrobson renamed this task from Use ES6 syntax in MobileFrontend for class constructs to Use ES6 syntax in MobileFrontend.Jan 5 2019, 12:58 AM
Jdlrobson renamed this task from Use ES6 syntax in MobileFrontend to Enable babel transpiling in MobileFrontend.
Jdlrobson updated the task description. (Show Details)

Change 482386 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Allow safe ES6 usage in src folder

https://gerrit.wikimedia.org/r/482386

Jdlrobson raised the priority of this task from Normal to High.Jan 17 2019, 9:40 PM
Jdlrobson removed a project: Patch-For-Review.
Jdlrobson updated the task description. (Show Details)Jan 18 2019, 4:39 PM
Jdlrobson set the point value for this task to 5.Jan 24 2019, 9:51 PM

via async estimation..

nray removed nray as the assignee of this task.Feb 7 2019, 12:39 AM
nray added a subscriber: nray.
Niedzielski removed Niedzielski as the assignee of this task.Feb 7 2019, 8:05 PM

Change 482386 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Transpiling (allow safe ES6 usage in /src and /tests/node-qunit folders)

https://gerrit.wikimedia.org/r/482386

Change 489767 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/extensions/MobileFrontend@master] Make tests/node-qunit/.eslintrc.json extend the .eslintrc in /src

https://gerrit.wikimedia.org/r/489767

Change 489768 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/extensions/MobileFrontend@master] Remove NODE_ENV=test env variable when running tests

https://gerrit.wikimedia.org/r/489768

Change 489767 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Make tests/node-qunit/.eslintrc.json extend the .eslintrc in /src

https://gerrit.wikimedia.org/r/489767

Change 489768 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Remove NODE_ENV=test env variable when running tests

https://gerrit.wikimedia.org/r/489768

Niedzielski closed this task as Resolved.Feb 11 2019, 7:39 PM
Niedzielski updated the task description. (Show Details)