Loading Ractive.js adaptors in AMD using Require.js

Question

I tested the new Backbone adaptor for Ractive.js and it works like a charm loading it as the example...

<script src='lib/Ractive.js'></script>
<!-- the adaptor -->
<script src='lib/adaptors/Backbone.js'></script>

Now I'm trying to load the modules in AMD with require.js and ractive.backbone adaptor complains because ractive library has not been loaded yet...

define(["ractive","ractive.backbone"], function(Ractive) {....});

From ractive.backbone.js (Uncaught ReferenceError: Ractive is not defined )

How will it be the best practice loading Ractive adaptors with AMD?

Answer 1

There isn't a One True Way, because every AMD project is different (some people wrap Backbone in a define function, some use a shim config, everyone organises things into different folder structures...). Basically, though, the adaptor needs to run in a lexical scope that has both Ractive and Backbone.

So one way to approach it would be to create a simple wrapper module like so:

define(["ractive","backbone"], function (Ractive, Backbone) {
  // adaptor code goes here. No need to include the outer IIFE
  // (https://github.com/Rich-Harris/Ractive/blob/master/plugins/adaptors/Backbone.js)
});

Then, you can either continue doing

define(["ractive","ractive.backbone"], function(Ractive) {....});

for each module that uses both Ractive and the Backbone adaptor, or you can require the Backbone adaptor once at the start of your app - as long as it's required before Ractive renders anything, it will work:

// in main.js, or equivalent
require(["app","ractive.backbone"], function (app) {
  app.init(); // or whatever
});

Am open to suggestions as to how to make this whole thing a bit more self-explanatory!

Answer 2

In our project we use a setup very similar to the one described by Richard Harris here. I.e. we have a wrapper module (ractive.wrap.js) that contains the adaptor and then use the map option of require.config to deliver the wrapper instead of Ractive itself. Looks like so:

require.config(
{
    "map":
    {
        "*": {"ractive": "ractive.wrap"},
        "ractive.wrap": {"ractive": "ractive"}
    }
}

That way whenever you use

define (['ractive'], function(Ractive)
{
    // some cool function using ractive
});

you actually get Ractive with the Backbone adaptor on board.