Upgrading FlightJS

October 6, 2015

flightjs

Flight 2.x is actively being developed. In the meantime, if you’re on an old version of Flight 1.x and looking to upgrade to the most recent version, this guide is for you!

Upgrade Core

First, head over to the [FlightJS Github](https://github.com/flightjs/flight) and replace your current core files with the most up to date versions.

Changes

this.defaultAttrs

There’s really only one big change as Flight moves into 2.x. this.defaultAttrs is being replaced with this.attributes.

The 1.x Way

This is how things work in Flight 1.x

/* Component definition */

var Hello = flight.component(hello);

function hello() {

  this.defaultAttrs({
    name: 'Jon Kuperman'
  });

  this.sayHello = function() {
    alert('Hello ' + this.attr.name);
  },

  // after initializing the component
  this.after('initialize', function() {
    this.on('click', this.sayHello);
  });
}

/* Attach the component to a DOM node */

Hello.attachTo('#hello');

The 2.x Way

The Flight 2.x version isn’t too different at first glance. You simply change:

this.defaultAttrs({
  name: 'Jon Kuperman'
});

to

this.attributes({
  name: 'Jon Kuperman'
});

A small gotcha

For the most part, a find and replace will take care of your problems. However there is a small gotcha you should be aware of. In Flight 1.x you can do something like this:

/* Component definition */

var Hello = flight.component(hello);

function hello() {

  this.defaultAttrs({
    firstName: 'Jon'
  });

  this.sayHello = function() {
    alert('Hello ' + this.attr.firstName + ' ' + this.attr.lastName);
  },

  // after initializing the component
  this.after('initialize', function() {
    this.on('click', this.sayHello);
  });
}

/* Attach the component to a DOM node */

Hello.attachTo('#hello', {lastName: 'Kuperman'});

This is a pretty common pattern for passing in attributes on the component attach but it will throw an error in Flight 2.x. Starting in 2.x, you can’t pass attributes into a component that aren’t defined. They don’t have to have their values set but they need to be defined in the this.attributes.

So you’ll have to change:

this.defaultAttrs({
  firstName: 'Jon'
});

to

this.attributes({
  firstName: 'Jon',
  lastName: null
});

so it will be happy.

Those are really the only gotcha’s you need to be mindful of when upgrading your version of FlightJS.

Good luck!