Aurelia

Aurelia Babel 6 and JSPM Update

Introduction

Aurelia

Aurelia


Aurelia Babel 6 and JSPM Update

Posted by Aurelia on .
Featured

Aurelia Babel 6 and JSPM Update

Posted by Aurelia on .

Today, we're happy to announce an update to Aurelia that is built with Babel 6 along with updates to our codebase to work with JSPM 0.17 Beta.

Babel 6

With the exception of i18n, all Aurelia core libraries and official plugins have now been updated to build with Babel 6. We've also updated our skeletons. We'll be releasing an updated version of i18n soon as well. For the moment you can use the current i18n library with the updated Aurelia libs without any issues.

At this point, you may be interested in updating your own Babel-based projects to Babel 6. Here's a few steps to help you through the process:

  • Remove the old Babel versions.
npm uninstall gulp-babel karma-babel-preprocessor --save-dev  
  • Install the new version.
npm install gulp-babel karma-babel-preprocessor babel-preset-es2015 babel-preset-es2015-loose babel-preset-stage-1 babel-plugin-transform-decorators-legacy babel-plugin-transform-es2015-modules-amd babel-plugin-transform-es2015-modules-commonjs babel-plugin-transform-es2015-modules-systemjs babel-plugin-syntax-flow babel-plugin-transform-flow-strip-types --save-dev  
  • Update your Babel build options. Our new skeleton's babel-options.js file looks something like this:
var path = require('path');

exports.base = function() {  
  return {
    filename: '',
    filenameRelative: '',
    sourceMap: true,
    sourceRoot: '',
    moduleRoot: path.resolve('src').replace(/\\/g, '/'),
    moduleIds: false,
    comments: false,
    compact: false,
    code:true,
    presets: [ 'es2015-loose', 'stage-1'],
    plugins: [
      'syntax-flow',
      'transform-decorators-legacy',
      'transform-flow-strip-types'
    ]
  };
};

exports.commonjs = function() {  
  var options = exports.base();
  options.plugins.push('transform-es2015-modules-commonjs');
  return options;
};

exports.amd = function() {  
  var options = exports.base();
  options.plugins.push('transform-es2015-modules-amd');
  return options;
};

exports.system = function() {  
  var options = exports.base();
  options.plugins.push('transform-es2015-modules-systemjs');
  return options;
};

exports.es2015 = function() {  
  var options = exports.base();
  options.presets = ['stage-1']
  return options;
};

Note: that Babel 6 is based on presets and plugins. Without these, the compiler won't actually transform anything. Above we provide a base configuration and then helper methods to output the code in various module formats.

  • Update your Gulp build.js file. Here's the relevent part of our skeleton's new build task:
gulp.task('build-system', function() {  
  return gulp.src(paths.source)
    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
    .pipe(changed(paths.output, {extension: '.js'}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(to5(assign({}, compilerOptions.system())))
    .pipe(sourcemaps.write({includeContent: false, sourceRoot: '/src'}))
    .pipe(gulp.dest(paths.output));
});
  • If using Karma for unit testing, update the babelPreprocessor section of the karma.conf.js file to look like this:
'babelPreprocessor': {  
  options: {
    sourceMap: 'inline',
    presets: [ 'es2015-loose', 'stage-1'],
    plugins: [
      'syntax-flow',
      'transform-decorators-legacy',
      'transform-flow-strip-types'
    ]
  }
}

JSPM 0.17

We've updated our packages and library source code to support JSPM 0.17.x. We've done some testing and everything seems to be working. You probably don't want to update to JSPM 0.17 just yet though. It's still in beta. There are many breaking changes and we've recently discovered that those also affect our bundler. So while Aurelia will work fine at runtime with 0.17, it won't bundle correctly. We are working to resolve this. In the mean time, we would appreciate anyone who would like to try out JSPM 0.17 with their Aurelia project to help us drive out any issues we may not be aware of.

New Features

There are a few new features in this release. Here are some highlights:

  • Simpler DI when a super class is present. The sub class no longer needs to declare the injected items that the super class needs. It can simply use a rest parameter to pass them along to the super constructor.
  • The computedFrom decorator now supports expressions.
  • The binding expression language now supports cloning and rebasing for expression re-writing and other advanced scenarios.
  • There's now an option, compareQueryParams, for the router to compare and invalidate on query string changes for the same component.
  • The view pipeline now enables pipeline plugins to hook into the beforeBind and beforeUnbind hooks of the view. This opens up a bunch of new scenarios, namely the ability to provide additional binding context data and functionality through a view require.
  • A new AbstractRepeater base class for repeaters has been introduced to make creating custom repeat attributes easier.
  • Dialogs can now switch out their render and the dialog system tracks open dialogs.

Validation

Since aurelia-valiation is not yet in beta, it is subject to breaking changes. We've mentioned that we are doing an overhaul on the library. As of this release of the aurelia-valiation library, we have dropped support for the ensure decorator. The ensure API is still present, but the decorator is no longer supported. Your code will continue to work without runtime errors when using the decorator, but its correct functioning is not guaranteed and it will be removed in the next release. We will be replacing this with a collection of decorators that provide a clearer, easier to use API soon.

Dialog

The aurelia-dailog plugin is still in beta and undergoing some changes as well. In this release we've had a minor changes to configuration. If you are providing custom configuration for the plugin, you will now need to call the useDefaults() method. Also, the settings have been moved to a settings object. Here's an example configuration:

export function configure(aurelia) {  
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-dialog', config => {
      config.useDefaults();
      config.settings.lock = true;
      config.settings.centerHorizontalOnly = false;
      config.settings.startingZIndex = 5;
    });

  aurelia.start().then(a => a.setRoot());
}

Note: We have some reports of a regression in the latest dialog plugin release. We are looking into it and should have a fix shortly.

What's Next?

In preparation for our release candidate, we're working on fixing a few more issues as well switching our Shadow DOM implementation over to be based on the new Shadow DOM v1 spec. We're particularly excited about this because that would make Aurelia the first framework to implement the updated spec. This will be a breaking change when we hit RC, however, if you have been following the practices outlined in our Beta announcement, it should be fairly easy for you to migrate your code.

In addition to working on the Shadow DOM update, we're also working on improving support for other package managers, loaders and bundlers. The community has been making good progress in improving our new Webpack skeleton, which has some updates in today's releases. Core team members are also working on an NPM/RequireJS workflow.

Stay tuned...more good things to come :)

Release Notes

aurelia-pal 1.0.0-beta.1.2.0

Bug Fixes

  • dom: mark optional parameters (3485be0f)
  • platform: fix type of global (6eb6937c)

aurelia-polyfills 1.0.0-beta.1.1.0

Features

  • all: add iterator support to Array.from (5f237887)
  • all:* add symbols (f11b8f42)
  • collections: add weak map and set (59d58dc6)

Bug Fixes

  • symbol: treat null value the same as undefined (4b705bb1, closes #13)
  • array:* make proto methods non enumerable (6ed412fd, closes #12)
  • symbol: remove window global (14916c10)
  • object: assign ignores null or undefined (941a892f)
  • object: correct es6 Object.keys behavior for primitives (11852935)

aurelia-dependency-injection 1.0.0-beta.1.2.0

Features

  • inheritence: allow injection w/ inheritance (0615ac1d)

aurelia-binding 1.0.0-beta.1.3.0

Bug Fixes

  • parser: remove unnecessary spaces from unparser output (e776287e)

Features

  • Expression: enable cloning and rebasing (d3e52957)
  • NameExpression: enable binding behaviors (f698c27a)
  • computedFrom: support expressions (461a3d56, closes #149)

aurelia-router 1.0.0-beta.1.2.0

Features

  • router: add option to compare query params (37ab9fad, closes #268)

aurelia-templating 1.0.0-beta.1.2.0 (2016-03-22)

Bug Fixes

  • bindable-property: fix typo in comment (dfde78aa, closes #291)

Features

  • ViewSlot: save override context during binding for later eval (657ff3dc)
  • view: add new view pipeline hooks beforeBind and beforeUnbind (e39e052b)

aurelia-templating-binding 1.0.0-beta.1.2.0

Bug Fixes

  • determineDefaultBindingMode: only assign when conditions are matched (c952286f)

Features

  • syntax-interpreter: single quoted strings in options attributes (f26cd40a)

aurelia-templating-binding 1.0.0-beta.1.2.0

Bug Fixes

  • all: replace removed file and fix lint errors (6de4d2e6)
  • css: throw on missing CSS file (e6a2d45e, closes #189)
  • if: queue up changes when animating (ae57e50d)
  • repeat: throw on non-repeatable expressions (1d7bbccc)

Features

  • abstract-repeater: add abstract repeater base class (949d0091)

aurelia-framework 1.0.0-beta.1.2.0

Bug Fixes

  • feature configuration (8d5eaa17)
  • feature: check extension. (4bfd6c47)
  • test: fix loadGlobalResource related tests (8fbd24d5)

Features

  • enhance: use document.body as fallback (e1cbfcc2)

aurelia-loader-default 1.0.0-beta.1.2.0

Bug Fixes

  • DefaultLoader: do not map name to address in requirejs mode (30016b6e)

aurelia-animator-css 1.0.0-beta.1.2.0

Bug Fixes

aurelia-dialog 0.5.9

Features

  • dialog: track controllers in service (b58d17f5, closes #121)

aurelia-validation 0.6.5

Bug Fixes

  • decorators: deprecate the ensure decorator (0e82a6bb)
View Comments...