Fix breaking changes in FastBoot 1.0

[simonihmig]

The current ember-cli-fastboot releases (1.0.0-rc.1 and above) introduce breaking changes. These will most likely break your current FastBoot implementation.

See https://github.com/ember-fastboot/ember-cli-fastboot/issues/387 for more information and a guide on how to fix your addon. Also you may want to visit the -fastboot Slack channel to get help from other users.

Note: this issue has been created automatically, by searching for certain patterns in your code. If you think this has been falsely created, feel free to close!

[Redsandro]

@tomdale @simonihmig @gmurphey can someone help with this?

Here's the old fastBoot code:

'use strict';

module.exports = {
  name: 'ember-masonry-grid',

  included: function (app) {
    this._super.included(app);

    if (!process.env.EMBER_CLI_FASTBOOT) {
      app.import({
        development: app.bowerDirectory + '/masonry/dist/masonry.pkgd.js',
        production: app.bowerDirectory + '/masonry/dist/masonry.pkgd.min.js'
      });

      app.import({
        development: app.bowerDirectory + '/imagesloaded/imagesloaded.pkgd.js',
        production: app.bowerDirectory + '/imagesloaded/imagesloaded.pkgd.min.js'
      });
    }
  }
};

I've been trying for a couple of hours to get it to work but every step a new issue arises. I've never developed an ember-plugin, and I'm just trying to get this to work.

This is where I'm at so far:

'use strict';

var Funnel = require('broccoli-funnel');
var map = require('broccoli-stew').map
var mergeTrees = require('broccoli-merge-trees');

module.exports = {
  name: 'ember-masonry-grid',

  treeForVendor(defaultTree) {
    var browserVendorLib = new Funnel('bower_components', {
      files: [
        '/masonry/dist/masonry.pkgd.js',
        '/imagesloaded/imagesloaded.pkgd.js'
      ],
      destDir: 'vendor'
    });

    browserVendorLib = map(
      browserVendorLib,
      (content) => `if (typeof FastBoot === 'undefined') { ${content} }`
    );

    return new mergeTrees([defaultTree, browserVendorLib]);
  },

  included(app) {
    this._super.included(app);

    app.import('vendor/masonry.pkgd.js');
    app.import('vendor/imagesloaded.pkgd.js');
  }
};

[Redsandro]

This seems to load masonry properly, but now masonry crashes with the error "Uncaught ReferenceError: imagesLoaded is not defined"

Skip that, it doesn't do anything.

'use strict';

const fastbootTransform = require('fastboot-transform');

module.exports = {
  name: 'ember-masonry-grid',

  options: {
    nodeAssets: {
      'masonry': {
        import: {
          include: ['bower_components/masonry/dist/masonry.pkgd.js'],
          processTree(input) {
            return fastbootTransform(input);
          }
        }
      },
      'imagesLoaded': {
        import: {
          include: ['bower_components/imagesloaded/imagesloaded.pkgd.js'],
          processTree(input) {
            return fastbootTransform(input);
          }
        }
      }
    }
  }
};

[RobbieTheWagner]

@Redsandro I'm not sure what issue you are having. I've used ember-cli-node-assets with fastboot-transform several times with success. Here is an example of one of them https://github.com/shipshapecode/ember-flatpickr/blob/master/index.js

[Redsandro]

@rwwagner90 the issue I am having is that I can't get masonry and imagesloaded to be attached to either the window or the jquery object like they did before the fastboot update.

I have copy/pasted different initialisation transforms I've seen in different plugins, but I just can't get it to work. It doesn't help that I don't really know what I am doing, because I'm not a plugin developer.

It seems that nobody cares about this plugin. I'll try to find a different plugin which can do masonry-style ordering.

[RobbieTheWagner]

@Redsandro this is an extremely outdated addon. I would recommend just using masonry directly, as I would assume this addon will not be updated, since it has not been updated in 2 years.

You can npm install masonry-layout --save to grab the package.

Then you can import it using the newly updated methods listed here https://guides.emberjs.com/v3.0.0/addons-and-dependencies/managing-dependencies/

I believe for this case it would be just adding this to your ember-cli-build.js in your app.

app.import('node_modules/masonry-layout/masonry.js', {
  using: [
    { transformation: 'amd', as: 'masonry' }
  ]
});

Then you can just grab it in files you want to use it in by doing: import masonry from 'masonry';

Please let me know if this helps. Are you on the Ember Slack? It might be easier to talk through things in real time there.

[Redsandro]

@rwwagner90 thank you. I didn't know this was possible. This simple import will switch on fastboot automatically?

Either way, with a fresh look, I decided to simplify my life by dropping some older browser support and use some media queries and the new css tag column-count in stead. It will automatically fill the empty spaces.

I will take your advice and go to the Ember Slack next time.

[RobbieTheWagner]

@Redsandro no, it will not do anything with fastboot, that needs to be handled separately.