Skip to content

Bartheleway/ember-cli-moment-shim

 
 

Repository files navigation

ember-cli-moment-shim

Build Status npm Version Ember Observer Score

ember-cli ES6 module shim for momentjs and moment timezone within your Ember applications. It will also conditionally bundle in specific locale/timezone data for those concerned about payload size.

Usage

  • ember install ember-cli-moment-shim
import moment from 'moment';

Features

  • ES6 accessible module for moment
  • Trim your build sizes by bundling locale & timezone data through simple configuration
  • FastBoot support

Enabling moment-timezone

// config.environment.js
module.exports = function(environment) {
  return {
    moment: {
      // Options:
      // 'all' - all years, all timezones
      // 'subset' - subset of the timezone data to cover 2010-2020 (or 2012-2022 as of 0.5.12). all timezones.
      // 'none' - no data, just timezone API
      includeTimezone: 'all'
    }
  };
}

i18n support

Cherry pick locales (optimal)

// config.environment.js
module.exports = function(environment) {
  return {
    moment: {
      // To cherry-pick specific locale support into your application.
      // Full list of locales: https://github.com/moment/moment/tree/master/locale
      includeLocales: ['es', 'fr-ca']
    }
  };

NOTE: English is bundled automatically – no need to add en in includeLocales

Include all locales

// config.environment.js
module.exports = function(environment) {
  return {
    moment: {
      includeLocales: true
    }
  };

Configure default runtime locale

// app/routes/applicaton.js
import moment from 'moment';

export default Ember.Route.extend({
  beforeModel() {
    // sets the application locale to Spanish
    moment.locale('es');
  }
});

Single module use

The default behavior for loading moment locales is an IIFE which is added into the vendor.js file. The consequence of that is that you have no control over when that code is run. That code also triggers setting of the moment locale, which means that at arbitrary times in your application you don't know what the locale is.

Included in ember-cli-moment-shim is a module that allows you to specify which localization you would like to load, and when you would like it invoked. This enables you to configure timing based upon application constraints. (With the initial state being en.)

// config.environment.js
module.exports = function(environment) {
  return {
    moment: {
      includeLocales: ['es', 'fr-ca'],
      singleModule: true
    }
  };
// app/routes/applicaton.js
import Route from '@ember/routing/route';
import defineLocale from 'ember-cli-moment-shim/define-locale';
import moment from 'moment';
import { inject as service } from '@ember/service';

export default Route.extend({
  moment: service(),

  beforeModel() {
    const desiredLocale = 'en-us';

    // This adds the configuration for *just* the locale you want.
    // All locales specified as bundled by `includeLocales` will be available.
    defineLocale(desiredLocale);
    
    // Set the locale:
    moment.locale(desiredLocale);

    // It is possible for the locale in the `ember-moment`-supplied service to
    // get out of sync with the locale set in moment itself:
    // https://github.com/stefanpenner/ember-moment/blob/b8a262b/addon/services/moment.js#L50-L53
    // If using both the service and ES6 approach be sure to keep those values
    // consistent.
    this.get('moment').setLocale(desiredLocale);
  }
});

Write all locales to a folder that is relative to dist

// config.environment.js
module.exports = function(environment) {
  return {
    moment: {
      // This will output _all_ locale scripts to assets/moment-locales
      // this option does not respect includeLocales
      localeOutputPath: 'assets/moment-locales'
    }
  };

The feature set for i18n support within moment can be found here: http://momentjs.com/docs/#/i18n/

License

ember-cli-moment-shim shims is MIT Licensed.

About

ember-cli shim for momentjs

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 91.8%
  • HTML 8.2%