Skip to content
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

Allow base scripts to run within a module loader #290

Merged
merged 1 commit into from Jul 5, 2016
Merged

Allow base scripts to run within a module loader #290

merged 1 commit into from Jul 5, 2016

Conversation

colinrotherham
Copy link
Contributor

Hi,

So I can avoid multiple <script> includes, I'm adding base modules via Browserify (same principle for Webpack, Rollup etc) using this sort of syntax:

require('govuk/selection-buttons');
require('govuk/analytics/analytics');

Problem is, I've noticed a lot of the modules use this but that wrongly assumes this == window.

To resolve, this fork ensures all base modules attach to the window global for compatibility. I've also noticed use of root internally so I've further rolled this out to all modules for consistency.

These changes make no assumption that the GOVUK global variable exists. Some modules tested for this, some didn’t. Checks for this have now been tidied up.

This is a stepping-stone to a nice dependency-injected asynchonrous module future, without adding/removing properties on the window.GOVUK global.

Hope this helps.

@tvararu
Copy link

tvararu commented Jul 4, 2016

I'm fine with this and it's something I've thought about before, good work!

👍 from me.

@colinrotherham
Copy link
Contributor Author

colinrotherham commented Jul 4, 2016

Thanks @tvararu,

A further (future) approach could be to:

  1. Convert each *.js base script to CommonJS module syntax
  2. Add module.exports return values (or similar shim like UMD)
  3. Keep the window.GOVUK.moduleName mechanism for backwards-compatibility

Perhaps I've got the ball rolling.

@NickColley
Copy link
Contributor

NickColley commented Jul 4, 2016

Hey @colinrotherham 👋

Thanks a lot for this PR 💃

I'm 👍 have a thought...

To reduce the amount of time you have to refer to root we could have it scoped inside the closure then reassign back to the window at the end?

(function (global) {
  var GOVUK = global.GOVUK || {};

  GOVUK.module = function () {};

  global.GOVUK = GOVUK;
})(window);

We also need to update https://github.com/alphagov/styleguides/blob/master/js.md#modules if this lands.

Attach to "window" global for compatibilty. Why? Within a module-loader (e.g. Browserify) "this" may refer to the empty object wrapper.
@colinrotherham
Copy link
Contributor Author

colinrotherham commented Jul 4, 2016

Thanks @NickColley.

Yeah good idea, I've re-pushed my commit. I stuck with root as it was already a convention so didn't want to introduce anything new—now it’s global instead, as suggested.

This way, the minifier can reduce the closure’s var GOVUK to var a or similar, saving a few more bytes in each base script. But, we could go further if needed, see below:

This suggestion

GOVUK.performance = GOVUK.performance || {};

GOVUK.performance.method1 = function() {
  /* Do something */
};

GOVUK.performance.method2 = function() {
  /* Do something else */
};

Future improvement

function method1() {
  /* Do something */
};

function method2() {
  /* Do something else */
};

GOVUK.performance = {
  method1: method1,
  method1: method2
}

Which when minified reduces down nicely:

function b() {
  /* Do something */
};

function c() {
  /* Do something else */
};

a.performance = {
  method1: b,
  method1: c
}

We could do the same and remove Instance.prototype used throughout the other base scripts as it's not very minifier-friendly and makes quite a wordy output*.

This can be a starting point though, perhaps move the other suggestions to a couple of new issues?

*Unless you’re actually making thousands of instances (e.g. a canvas particle generator) and need the prototype tree to reduce memory usage, it’s not worth it.

// Sending events on click:
//
//
// <a class="help-button" href="#" data-journey-click="stage:help:info">See more info...</a>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sorry, I've got "trim whitespace" enabled in my editor.

Copy link

Choose a reason for hiding this comment

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

Trim away. ✂️

@dsingleton
Copy link
Contributor

👏 to moving towards more formal modules - i've been looking at something like UMD as part of de-rails-ing some of the existing JS dependencies, so this is a great step.

This can be a starting point though, perhaps move the other suggestions to a couple of new issues?

👍

@dsingleton dsingleton merged commit d018082 into alphagov:master Jul 5, 2016
@robinwhittleton
Copy link
Contributor

robinwhittleton commented Jul 5, 2016

A possible follow-up PR: we explicitly bind $ to global.jQuery in the core JS (e.g. stop-scrolling-at-footer.js) but not in the analytics files (e.g. download-link-tracker.js). This probably needs adding.

NickColley added a commit to alphagov/styleguides that referenced this pull request Jul 5, 2016
Updated to reflect @colinrotherham 's changes to enable support for module loaders.
alphagov/govuk_frontend_toolkit#290
(Hopefully in the future we can remove this boilerplate in favour of a proper module system 🙌 )
robinwhittleton pushed a commit to alphagov/verify-frontend that referenced this pull request Jul 22, 2016
govuk_frontend_toolkit has a new module pattern (alphagov/govuk_frontend_toolkit#290). Our JS should match the standard where possible for simplicity. This commit updates govuk_frontend_toolkit to the latest version and brings our JS in line.

It also updates jasmine_rails to the latest point version, which fixes a potential memory leak issue.

Author: @robinwhittleton
gemmaleigh added a commit to alphagov/govuk_elements that referenced this pull request Aug 4, 2016
# 4.14.1

- Fix tabular number sizing in Firefox ([PR
#301](alphagov/govuk_frontend_toolkit#301))

# 4.14.0

- Allow use of multiple GA customDimensionIndex. See [this
section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/
docs/javascript.md#using-google-custom-dimensions-with-your-own-statisti
cal-model) of the documentation for more information.
- Configurable duration (in days) for AB Test cookie. See [this
section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/
docs/javascript.md#multivariate-test-framework) of the documentation
for more information.
- Allow base scripts to run within a module loader. See [this
PR](alphagov/govuk_frontend_toolkit#290) for
more information.
gemmaleigh added a commit to alphagov/govuk-prototype-kit that referenced this pull request Aug 4, 2016
# 4.14.1

- Fix tabular number sizing in Firefox ([PR
#301](alphagov/govuk_frontend_toolkit#301))

# 4.14.0

- Allow use of multiple GA customDimensionIndex. See [this
section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/
docs/javascript.md#using-google-custom-dimensions-with-your-own-statisti
cal-model) of the documentation for more information.
- Configurable duration (in days) for AB Test cookie. See [this
section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/
docs/javascript.md#multivariate-test-framework) of the documentation
for more information.
- Allow base scripts to run within a module loader. See [this
PR](alphagov/govuk_frontend_toolkit#290) for
more information.

https://raw.githubusercontent.com/alphagov/govuk_frontend_toolkit/master
/CHANGELOG.md
gemmaleigh added a commit to alphagov/govuk_accessibility_sandbox that referenced this pull request Sep 6, 2016
https://github.com/alphagov/govuk_frontend_toolkit/blob/master/CHANGELOG
.md

# 4.18.0

- Add GOVUK.ShowHideContent JavaScript to support showing and hiding
content, toggled by radio buttons and checkboxes ([PR
#315](alphagov/govuk_frontend_toolkit#315)).

# 4.17.0

- SelectionButtons will add a class to the label with the type of the
child input ([PR
#317](alphagov/govuk_frontend_toolkit#317))

# 4.16.1

- Fix anchor-buttons.js to trigger a native click event, also rename to
shimLinksWithButtonRole.js to explain what it does
- Add tests for shimLinksWithButtonRole ([PR
#310](alphagov/govuk_frontend_toolkit#310))

# 4.16.0

- Add Department for International Trade organisation ([PR
#308](alphagov/govuk_frontend_toolkit#308))

# 4.15.0

- Add support for Google Analytics fieldsObject ([PR
#298](alphagov/govuk_frontend_toolkit#298))
- anchor-buttons.js: normalise keyboard behaviour between buttons and
links with a button role ([PR
#297](alphagov/govuk_frontend_toolkit#297))

# 4.14.1

- Fix tabular number sizing in Firefox ([PR
#301](alphagov/govuk_frontend_toolkit#301))

# 4.14.0

- Allow use of multiple GA customDimensionIndex. See [this
section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/
docs/javascript.md#using-google-custom-dimensions-with-your-own-statisti
cal-model) of the documentation for more information.
- Configurable duration (in days) for AB Test cookie. See [this
section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/
docs/javascript.md#multivariate-test-framework) of the documentation
for more information.
- Allow base scripts to run within a module loader. See [this
PR](alphagov/govuk_frontend_toolkit#290) for
more information.

# 4.13.0

- Make headings block-level by default (PR #200). If you are styling
elements you want to be inline with heading includes, you’ll need to
explicitly make them inline in your CSS.

# 4.12.0

- Increase button padding to match padding from GOV.UK elements (PR
#275).
If you have UI which depends on the padding set by the button mixin in
the frontend toolkit and this is not overridden by button padding set
by GOV.UK elements, this change will affect it.

# 4.11.0

- Remove the GDS-Logo font-face definition (PR #272)
- Move the @Viewport statements to govuk_template (PR #272). If you
upgrade to this version of govuk_frontend_toolkit and you’re also using
govuk_template you’ll need to upgrade that to at least 0.17.2 to
maintain compatibility with desktop IE10 in snap mode.

# 4.10.0

- Allow New Transport font stack to be overridden by apps using
`$toolkit-font-stack`
and `$toolkit-font-stack-tabular` (PR #230)

# 4.9.1

- Fix phase banner alignment (PR #266)

# 4.9.0

- Add websafe organisation colours
- Split colours into two files with backwards-compatible colours.scss
replacement

# 4.8.2

- Add GOV.UK lint to lint scss files (PR #260)
- Remove reference to old colour palette (PR #256)
- Fix link to GOV.UK elements - tabular data

# 4.8.1

- Update DEFRA brand colour to new green (PR #249)

# 4.8.0

- Pass cohort name to analytics when using multivariate test (PR #251)

# 4.7.0

- Add 'mailto' tracking to GOV.UK Analytics (PR #244)

# 4.6.1

- Use the Sass variable $light-blue for link active and hover colours
(PR #242)
@colinrotherham colinrotherham deleted the module-support branch September 15, 2016 15:04
gemmaleigh added a commit to alphagov/service-manual-frontend that referenced this pull request Oct 7, 2016
https://github.com/alphagov/govuk_frontend_toolkit/blob/master/CHANGELOG
.md

# 4.18.3

- For smaller screens (<768px) ensure that the
GOVUK.StickAtTopWhenScrolling JS "unsticks" the element which was
previously "stuck" (by removing both the class which sets fixed
positioning and the shim). ([PR
#329](alphagov/govuk_frontend_toolkit#329))

# 4.18.2

- Remove unnecessary print font fallback that causes regression
downstream ([PR
#328](alphagov/govuk_frontend_toolkit#328))
- Update tooling to use npm script rather than grunt-shell ([PR
#327](alphagov/govuk_frontend_toolkit#327))

# 4.18.1

- Fix error in IE - remove trailing comma from shimLinksWithButtonRole
JavaScript ([PR
#323](alphagov/govuk_frontend_toolkit#323)).

# 4.18.0

- Add GOVUK.ShowHideContent JavaScript to support showing and hiding
content, toggled by radio buttons and checkboxes ([PR
#315](alphagov/govuk_frontend_toolkit#315)).

# 4.17.0

- SelectionButtons will add a class to the label with the type of the
child input ([PR
#317](alphagov/govuk_frontend_toolkit#317))

# 4.16.1

- Fix anchor-buttons.js to trigger a native click event, also rename to
shimLinksWithButtonRole.js to explain what it does
- Add tests for shimLinksWithButtonRole ([PR
#310](alphagov/govuk_frontend_toolkit#310))

# 4.16.0

- Add Department for International Trade organisation ([PR
#308](alphagov/govuk_frontend_toolkit#308))

# 4.15.0

- Add support for Google Analytics fieldsObject ([PR
#298](alphagov/govuk_frontend_toolkit#298))
- anchor-buttons.js: normalise keyboard behaviour between buttons and
links with a button role ([PR
#297](alphagov/govuk_frontend_toolkit#297))

# 4.14.1

- Fix tabular number sizing in Firefox ([PR
#301](alphagov/govuk_frontend_toolkit#301))

# 4.14.0

- Allow use of multiple GA customDimensionIndex. See [this
section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/
docs/javascript.md#using-google-custom-dimensions-with-your-own-statisti
cal-model) of the documentation for more information.
- Configurable duration (in days) for AB Test cookie. See [this
section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/
docs/javascript.md#multivariate-test-framework) of the documentation
for more information.
- Allow base scripts to run within a module loader. See [this
PR](alphagov/govuk_frontend_toolkit#290) for
more information.

# 4.13.0

- Make headings block-level by default (PR #200). If you are styling
elements you want to be inline with heading includes, you’ll need to
explicitly make them inline in your CSS.

# 4.12.0

- Increase button padding to match padding from GOV.UK elements (PR
#275).
If you have UI which depends on the padding set by the button mixin in
the frontend toolkit and this is not overridden by button padding set
by GOV.UK elements, this change will affect it.

# 4.11.0

- Remove the GDS-Logo font-face definition (PR #272)
- Move the @Viewport statements to govuk_template (PR #272). If you
upgrade to this version of govuk_frontend_toolkit and you’re also using
govuk_template you’ll need to upgrade that to at least 0.17.2 to
maintain compatibility with desktop IE10 in snap mode.
gemmaleigh added a commit to alphagov/service-manual-frontend that referenced this pull request Oct 8, 2016
https://github.com/alphagov/govuk_frontend_toolkit/blob/master/CHANGELOG
.md

4.18.3

- For smaller screens (<768px) ensure that the
GOVUK.StickAtTopWhenScrolling JS "unsticks" the element which was
previously "stuck" (by removing both the class which sets fixed
positioning and the shim). ([PR 329](alphagov/govuk_frontend_toolkit#329))

4.18.2

- Remove unnecessary print font fallback that causes regression
downstream ([PR 328](alphagov/govuk_frontend_toolkit#328))
- Update tooling to use npm script rather than grunt-shell ([PR 327](alphagov/govuk_frontend_toolkit#327))

4.18.1

- Fix error in IE - remove trailing comma from shimLinksWithButtonRole
JavaScript ([PR 323](alphagov/govuk_frontend_toolkit#323)).

4.18.0

- Add GOVUK.ShowHideContent JavaScript to support showing and hiding
content, toggled by radio buttons and checkboxes ([PR 315](alphagov/govuk_frontend_toolkit#315)).

4.17.0

- SelectionButtons will add a class to the label with the type of the
child input ([PR 317](alphagov/govuk_frontend_toolkit#317))

4.16.1

- Fix anchor-buttons.js to trigger a native click event, also rename to
shimLinksWithButtonRole.js to explain what it does
- Add tests for shimLinksWithButtonRole ([PR 310](alphagov/govuk_frontend_toolkit#310))

4.16.0

- Add Department for International Trade organisation ([PR 308](alphagov/govuk_frontend_toolkit#308))

4.15.0

- Add support for Google Analytics fieldsObject ([PR 298](alphagov/govuk_frontend_toolkit#298))
- anchor-buttons.js: normalise keyboard behaviour between buttons and
links with a button role ([PR 297](alphagov/govuk_frontend_toolkit#297))

4.14.1

- Fix tabular number sizing in Firefox ([PR 301](alphagov/govuk_frontend_toolkit#301))

4.14.0

- Allow use of multiple GA customDimensionIndex. See [this
section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/
docs/javascript.md#using-google-custom-dimensions-with-your-own-statisti
cal-model) of the documentation for more information.
- Configurable duration (in days) for AB Test cookie. See [this
section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/
docs/javascript.md#multivariate-test-framework) of the documentation
for more information.
- Allow base scripts to run within a module loader. See [this
PR](alphagov/govuk_frontend_toolkit#290) for
more information.

4.13.0

- Make headings block-level by default (PR #200). If you are styling
elements you want to be inline with heading includes, you’ll need to
explicitly make them inline in your CSS.

4.12.0

- Increase button padding to match padding from GOV.UK elements (PR 275).
If you have UI which depends on the padding set by the button mixin in
the frontend toolkit and this is not overridden by button padding set
by GOV.UK elements, this change will affect it.

4.11.0

- Remove the GDS-Logo font-face definition (PR #272)
- Move the @Viewport statements to govuk_template (PR #272). If you
upgrade to this version of govuk_frontend_toolkit and you’re also using
govuk_template you’ll need to upgrade that to at least 0.17.2 to
maintain compatibility with desktop IE10 in snap mode.
gemmaleigh added a commit to alphagov/service-manual-frontend that referenced this pull request Oct 8, 2016
https://github.com/alphagov/govuk_frontend_toolkit/blob/master/CHANGELOG
.md

4.18.3

- For smaller screens (<768px) ensure that the
GOVUK.StickAtTopWhenScrolling JS "unsticks" the element which was
previously "stuck" (by removing both the class which sets fixed
positioning and the shim). ([PR 329](alphagov/govuk_frontend_toolkit#329))

4.18.2

- Remove unnecessary print font fallback that causes regression
downstream ([PR 328](alphagov/govuk_frontend_toolkit#328))
- Update tooling to use npm script rather than grunt-shell ([PR 327](alphagov/govuk_frontend_toolkit#327))

4.18.1

- Fix error in IE - remove trailing comma from shimLinksWithButtonRole
JavaScript ([PR 323](alphagov/govuk_frontend_toolkit#323)).

4.18.0

- Add GOVUK.ShowHideContent JavaScript to support showing and hiding
content, toggled by radio buttons and checkboxes ([PR 315](alphagov/govuk_frontend_toolkit#315)).

4.17.0

- SelectionButtons will add a class to the label with the type of the
child input ([PR 317](alphagov/govuk_frontend_toolkit#317))

4.16.1

- Fix anchor-buttons.js to trigger a native click event, also rename to
shimLinksWithButtonRole.js to explain what it does
- Add tests for shimLinksWithButtonRole ([PR 310](alphagov/govuk_frontend_toolkit#310))

4.16.0

- Add Department for International Trade organisation ([PR 308](alphagov/govuk_frontend_toolkit#308))

4.15.0

- Add support for Google Analytics fieldsObject ([PR 298](alphagov/govuk_frontend_toolkit#298))
- anchor-buttons.js: normalise keyboard behaviour between buttons and
links with a button role ([PR 297](alphagov/govuk_frontend_toolkit#297))

4.14.1

- Fix tabular number sizing in Firefox ([PR 301](alphagov/govuk_frontend_toolkit#301))

4.14.0

- Allow use of multiple GA customDimensionIndex. See [this
section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/
docs/javascript.md#using-google-custom-dimensions-with-your-own-statisti
cal-model) of the documentation for more information.
- Configurable duration (in days) for AB Test cookie. See [this
section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/
docs/javascript.md#multivariate-test-framework) of the documentation
for more information.
- Allow base scripts to run within a module loader. See [this
PR](alphagov/govuk_frontend_toolkit#290) for
more information.

4.13.0

- Make headings block-level by default (PR #200). If you are styling
elements you want to be inline with heading includes, you’ll need to
explicitly make them inline in your CSS.

4.12.0

- Increase button padding to match padding from GOV.UK elements (PR 275).
If you have UI which depends on the padding set by the button mixin in
the frontend toolkit and this is not overridden by button padding set
by GOV.UK elements, this change will affect it.

4.11.0

- Remove the GDS-Logo font-face definition (PR #272)
- Move the @Viewport statements to govuk_template (PR #272). If you
upgrade to this version of govuk_frontend_toolkit and you’re also using
govuk_template you’ll need to upgrade that to at least 0.17.2 to
maintain compatibility with desktop IE10 in snap mode.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants