Core: Migrate from AMD to ES modules 🎉 #4541

mgol · 2019-11-14T12:58:34Z

Summary

Migrate source to ES modules. RequireJS is still used to load tests, this may perhaps be changed in a separate PR.

Reviewing by commit might be the easiest.

@timmywil I'd appreciate especially a review of the build process after my changes as custom compilation works slightly differently now (for example, I had to add an explicit import of ./core/parseHTML.js to jquery.js as otherwise excluding AJAX cut out that module as well and a lot depends on it). If you could locally test some scenarios you had in mind when you initially wrote that & make sure they still work, that'd help.

TODO:

Add AMD compilation to amd/
(optional) Add back AMD mode to QUnit

Checklist

All authors have signed the CLA at https://cla.js.foundation/jquery/jquery
~~New tests have been added to show the fix or feature works~~
Grunt build and unit tests pass locally with these changes
~~If needed, a docs issue/PR was created at https://github.com/jquery/api.jquery.com~~

ES modules bindings are immutable and we relied on the `ajax/var/nonce.js` variable being mutable. Workaround it by creating a wrapper object. We might try to compress it somehow in the future.

The export: ```js export default jQuery.fn.delay; ``` was being cut out by Rollup as it was unused but due to the possibility of the `jQuery.fn.delay` access having side effects (e.g. via getters) it left the following line in: ```js jQuery.fn.delay; ``` This fails our ESLint setup and takes unnecessary space so this commit removes the export.

Test files themselves are still loaded via RequireJS as that has to work in IE 11.

…work) Custom compilations (excluding/including some modules) is not supported yet.

When custom compilation is used, the version string can get large.

This is necessary so that excluding some non-core modules doesn't exclude "core/parseHTML.js".

test/jquery.js

…oGlobal

mgol · 2019-11-17T23:37:33Z

This PR now adds 89 bytes to the minified (non-gzipped) build & 5 bytes to the minified gzipped build. The gzipped difference mostly comes from the addition of the ./core/parseHTML.js import to jquery.js, without it it added 36 bytes to minified (non-gzipped) and actually reduced (!) the minified gzipped build by 10 bytes. This is only a result of re-shuffling the final file, apparently Uglify was compiling the previous one better.

I'm OK with such a delta given the gains from using the modern module format & removing our brittle compile process hacks as it's now mostly relying on Rollup but maybe it's possible to optimize it a little.

mgol · 2019-11-17T23:40:52Z

OK, apparently we can go back to -10 bytes minified gzipped (& minimal unminified diff from the current Git compilation) if we move the ./core/parseHTML.js from directly after the ./core.js import to just before the ./ajax/load.js one.

gibson042

This is so beautiful! 😍

src/ajax.js

jQuery source is now authored in ECMAScript modules. Native browser support for them requires full file names including extensions. Rollup works even if import paths don't specify extensions, though, so one import slipped through without such an extension, breaking native browser import of src/jquery.js. A new ESLint rule using eslint-plugin-import prevents us from regressing on that front. Ref jquerygh-4541 Ref 0753201

jQuery source is now authored in ECMAScript modules. Native browser support for them requires full file names including extensions. Rollup works even if import paths don't specify extensions, though, so one import slipped through without such an extension, breaking native browser import of src/jquery.js. A new ESLint rule using eslint-plugin-import prevents us from regressing on that front. Also, eslint-plugin-import's no-cycle rule is used to avoid import cycles. Closes gh-4544 Ref gh-4541 Ref 0753201

jQuery source has been migrated in jquerygh-4541 from AMD to ES modules. To maintain support for consumers of our AMD modules, this commits adds a task transpiling the ES modules sources in `src/` to AMD in `amd/`.

jQuery source has been migrated in jquerygh-4541 from AMD to ES modules. To maintain support for consumers of our AMD modules, this commits adds a task transpiling the ES modules sources in `src/` to AMD in `amd/`. A "Load with AMD" checkbox was also restored to the QUnit setup. Note that, contrary to jQuery 3.x, AMD files need to be generated via `grunt amd` or `grunt` as sources are not authored in ECMAScript modules. To achieve a similar no-compile experience during jQuery 4.x testing, use the new "Load as modules" checkbox which works in all supported browsers except for IE & Edge (the legacy, EdgeHTML-based one).

jQuery source has been migrated in gh-4541 from AMD to ES modules. To maintain support for consumers of our AMD modules, this commits adds a task transpiling the ES modules sources in `src/` to AMD in `amd/`. A "Load with AMD" checkbox was also restored to the QUnit setup. Note that, contrary to jQuery 3.x, AMD files need to be generated via `grunt amd` or `grunt` as sources are not authored in ECMAScript modules. To achieve a similar no-compile experience during jQuery 4.x testing, use the new "Load as modules" checkbox which works in all supported browsers except for IE & Edge (the legacy, EdgeHTML-based one). Ref gh-4541 Closes gh-4554

This commit aligns the `3.x-stable` branch with `master` in two aspects: 1. It migrates the nonce module to return an object instead of a primitive variable. This had to be changed on `master` as in ES modules you export live read-only bindings to variables, meaning you can't increment the nonce directly. Also, the way it was done so far was working differently in AMD & the single built file - in the built file one nonce variable was declared, accessed and incremented. In AMD mode separate instances were create for each module that depend on the nonce module, creating unintended nonce clashes. 2. Whether the `noGlobal` parameter was set to `true` is now checked using the typeof operator to align with `master`. Ref jquerygh-4541 Ref d0ce00c

This commit aligns the `3.x-stable` branch with `master` in two aspects: 1. It migrates the nonce module to return an object instead of a primitive variable. This had to be changed on `master` as in ES modules you export live read-only bindings to variables, meaning you can't increment the nonce directly. Also, the way it was done so far was working differently in AMD & the single built file - in the built file one nonce variable was declared, accessed and incremented. In AMD mode separate instances were create for each module that depend on the nonce module, creating unintended nonce clashes. 2. Whether the `noGlobal` parameter was set to `true` is now checked using the typeof operator to align with `master`. Closes gh-4612 Ref gh-4541 Ref d0ce00c

rart · 2020-04-03T19:07:13Z

@mgol when will this effort be published to npm?

mgol · 2020-04-03T20:16:46Z

@rart This is planned for jQuery 4.0.0 which will take at least several more months. Migrating this to the 3.x-stable line while preserving backwards compatibility of the package structure might require non-trivial amount of work so at the moment we don't have plans to do it.

rart · 2020-04-04T06:51:49Z

@mgol thanks for the quick reply.

Have you guys considered an 4.0.0.rc sort of release/publish? (alpha, beta, rc)

mgol · 2020-04-04T20:29:15Z

@rart There is still significant work planned for jQuery 4.0.0 so we don't plan any pre-release soon; it'd be too far from the final release. If you want to use ES modules from master, you can always copy our src directory. Just remember it's not stable so you'll need to be careful with upgrades.

mgol added 13 commits October 28, 2019 20:46

Core: Migrate all source AMD modules to ECMAScript modules

7993682

Core: Use explicit extensions for imports so that they work natively

11bc60a

Core: Make noGlobal handling in global.js work in ES modules mode

8cd544d

Ajax: Workaround nonce being immutable as an ES module

c90d8a1

ES modules bindings are immutable and we relied on the `ajax/var/nonce.js` variable being mutable. Workaround it by creating a wrapper object. We might try to compress it somehow in the future.

Build: Add a basic Rollup config

fa6878b

Build: Make sure the jQuery global isn't set when ES modules are used

82cb929

Tests: Convert test setup to work with source ES modules

d68ad3c

Test files themselves are still loaded via RequireJS as that has to work in IE 11.

Build: A basic fully working Rollup build (grunt & npm test both …

e0e5bff

…work) Custom compilations (excluding/including some modules) is not supported yet.

Build: Normalize srcFolder, fix rollupHypotheticalOptions usage

9dc310e

Core: disable the max-len rule for the version variable

7fe6f83

When custom compilation is used, the version string can get large.

Build: Add back support for custom compilation

c6b75df

Core: Import "./core/parseHTML.js" directly in jquery.js

1065fa3

This is necessary so that excluding some non-core modules doesn't exclude "core/parseHTML.js".

mgol added Core Needs review Behavior Change labels Nov 14, 2019

mgol added this to the 4.0.0 milestone Nov 14, 2019

mgol requested a review from timmywil November 14, 2019 12:58

mgol commented Nov 14, 2019

View reviewed changes

test/jquery.js Outdated Show resolved Hide resolved

Core: Minor comments tweaks

a4250b2

mgol force-pushed the es-modules branch from 0e8b742 to a4250b2 Compare November 14, 2019 18:33

mgol added 3 commits November 15, 2019 14:07

Build: rename jsmodules to esmodules

afeb0eb

Build: Use more of Rollup API, simplify logic

3b21968

Build: Simplify ESLint exclusions & globals, revert globalJQuery to n…

f6f0545

…oGlobal

gibson042 approved these changes Nov 18, 2019

View reviewed changes

src/ajax.js Outdated Show resolved Hide resolved

mgol added 3 commits November 18, 2019 18:54

Build: Move the parseHTML import to save size

910d815

Build: Compress ajax/var/nonce.js

c2d5407

Build: ESLint tweaks

eba151a

mgol removed the Needs review label Nov 18, 2019

mgol changed the title ~~Core: Migrate to ES modules~~ Core: Migrate from AMD to ES modules 🎉 Nov 18, 2019

mgol merged commit d0ce00c into jquery:master Nov 18, 2019

mgol deleted the es-modules branch November 18, 2019 20:15

mgol mentioned this pull request Nov 20, 2019

Build: Require extensions for ES6 imports, prevent import cycles #4544

Merged

2 tasks

azu mentioned this pull request Nov 26, 2019

2019-11-26のJS: Node.js 13.2.0(ES Modulesサポート)、jQueryがAMDからES Mod… jser/jser.github.io#681

Merged

GulajavaMinistudio mentioned this pull request Nov 26, 2019

Add specific highlight for Enum class GulajavaMinistudio/jquery#112

Merged

4 tasks

mgol mentioned this pull request Nov 30, 2019

Build: Auto-convert sources to AMD #4554

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Core: Migrate from AMD to ES modules 🎉 #4541

Core: Migrate from AMD to ES modules 🎉 #4541

mgol commented Nov 14, 2019 •

edited by timmywil

Loading

mgol commented Nov 17, 2019

mgol commented Nov 17, 2019

gibson042 left a comment •

edited

Loading

rart commented Apr 3, 2020

mgol commented Apr 3, 2020

rart commented Apr 4, 2020 •

edited

Loading

mgol commented Apr 4, 2020

Core: Migrate from AMD to ES modules 🎉 #4541

Core: Migrate from AMD to ES modules 🎉 #4541

Conversation

mgol commented Nov 14, 2019 • edited by timmywil Loading

Summary

Checklist

mgol commented Nov 17, 2019

mgol commented Nov 17, 2019

gibson042 left a comment • edited Loading

Choose a reason for hiding this comment

rart commented Apr 3, 2020

mgol commented Apr 3, 2020

rart commented Apr 4, 2020 • edited Loading

mgol commented Apr 4, 2020

mgol commented Nov 14, 2019 •

edited by timmywil

Loading

gibson042 left a comment •

edited

Loading

rart commented Apr 4, 2020 •

edited

Loading