New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modularize Javascript and Introduce Webpack #6977

Merged
merged 27 commits into from Oct 9, 2018

Conversation

Projects
None yet
2 participants
@spencerfinnell
Copy link
Member

spencerfinnell commented Oct 9, 2018

Fixes #3535

Proposed Changes:

  1. Only load relevant javascript on admin pages.

To test:

It should be ensured that all scripts listed in https://github.com/easydigitaldownloads/easy-digital-downloads/tree/test/webpack/assets/js are loaded on their necessary pages.


This is my proposal for updating EDD's Javascript infrastructure. I consider this "Step 1" since this implementation does not change any of the code's base architecture, and only changes how it is loaded.

The major component of this proposal is using Webpack to help bundle the Javascript. My reason for introducing Webpack is eventually I would like to see it be used for handling all of EDD's assets, and the removal of Grunt.

Webpack is currently the bundler of choice for Gutenberg (all hail) and the majority of the principles for how it is being used in this PR are based off that. Webpack works with standard Node packages which means any of the existing Grunt-wrapper packages can easily be converted to their native libraries in the future (removing dependencies).

Webpack also allows trans/compilers like Babel (which is implemented in this proposal) to use "next generation" Javascript which is not currently supported in all browsers. This is the basis for implementing this PR as it allows for easy import/export functionality between Javascript files.

This PR also introduces ESLint and the standard WordPress coding standards for Javascript (again mainly taken from Gutenberg). Linting can be run by the npm run lint command and automatic fixes applied with npm run lint:fix


To make this implementation easier to test and to avoid changing the development process of the repository further, minified scripts and sourcemaps have been committed to this branch. This means if a user downloads the repository they will have access to a working plugin because all scripts are included. The committed scripts are automatically in development mode and their sourcemaps will allow for easy user debugging.

In my opinion it would be more ideal in the future to remove these scripts from the repository and require developers who work directly from the repository to run the necessary build scripts. This will ensure a better developer experience (cleaner diffs, up to date scripts, and locked dependencies) while ensuring the repository remains a development-only resource. Users will still be able to download built packages from tagged releases.


tl;dr Everything should work exactly how it was before. This creates no functional or visual changes.

@spencerfinnell

This comment has been minimized.

Copy link
Member Author

spencerfinnell commented Oct 9, 2018

Here is an example of the types of simple refactors that comes much easier when only working with a single component: test/webpack...js/dashboard

@JJJ

This comment has been minimized.

Copy link
Collaborator

JJJ commented Oct 9, 2018

Merged release/3.0 changes into test/webpack to prepare this for merging back the other direction.

@spencerfinnell spencerfinnell changed the title Modularize Javascript Modularize Javascript and Introduce Webpack Oct 9, 2018

JJJ added some commits Oct 9, 2018

Scripts: rearrange actions to register early and enqueue on the prope…
…r hook.

Also rename jQuery Credit Card Validator to camelCase as needed by some case-sensitive environments.

This ensures that webpack'ed scripts are adaptable and enqueued in the places and ways that are the most predictable.

@JJJ JJJ merged commit d416c8e into release/3.0 Oct 9, 2018

1 check was pending

continuous-integration/travis-ci/pr The Travis CI build is in progress
Details

@JJJ JJJ added this to the 3.0 milestone Oct 9, 2018

@JJJ JJJ deleted the test/webpack branch Oct 9, 2018

JJJ added a commit that referenced this pull request Oct 10, 2018

Scripts & Styles:
* Move custom Chosen styling into `edd-admin-chosen.css`
* Revert camelCase of Credit Card Validator JS - enqueue process abstracts this
* Add jQuery Flot Time back in for back-compat support
* Remove suffix logic from Graph classes (these always use minified versions)
* Introduce `edd_doing_script_debug()` to abstract `SCRIPT_DEBUG` constant check
* Update Webpack and Grunt config files as needed

See #6977.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment