Oasis and RSVP including in brocolli and ember-cli


#1

Hi, I’m trying to get oasis running inside an ember-cli app. I’v read all the posts on moment and have ended up trying both amd and non, inclusion of oasis. My steps : 1 . bower install oasis --save 2 . bower install rsvp --save I had to include rsvp because oasis has a dep on it 3 . Brocoli.js

app.import('bower_components/rsvp/rsvp.amd.js', {
    exports: {
        'rsvp': [
            'default',
            'defineFixture',
            'lookupFixture',
            'raw',
            'request'
        ]
    }
});

app.import('bower_components/oasis.js/dist/oasis.amd.js', {
    exports: {
        'oasis': [
            'default',
            'defineFixture',
            'lookupFixture',
            'raw',
            'request'
        ]
    }
});


module.exports = app.toTree();

4 . View where I want to create a sandbox :

import Ember from 'ember';
// import an amd
import { raw as oasis } from 'oasis';


export default Ember.View.extend({
    classNames :['panel', 'panel-default'],
    didInsertElement : function(){
        var sandbox = oasis.createSandbox({
            url: 'http://example.com/profile_viewer.html',
            type: 'html',
            capabilities: [ 'account' ]
        });
        this.$('.child-app-m1').append(sandbox.el);
    }
});

This builds but in the browser I get :

"Error while processing route: m1" "Could not find module rsvp" "requireModule@http://localhost:4200/assets/vendor.js:58:7
reify@http://localhost:4200/assets/vendor.js:41:9
requireModule@http://localhost:4200/assets/vendor.js:69:7
reify@http://localhost:4200/assets/vendor.js:41:9
requireModule@http://localhost:4200/assets/vendor.js:69:7
reify@http://localhost:4200/assets/vendor.js:41:9
requireModule@http://localhost:4200/assets/vendor.js:69:7
resolveOther@http://localhost:4200/assets/vendor.js:61524:11
apply@http://localhost:4200/assets/vendor.js:31547:18
superWrapper@http://localhost:4200/assets/vendor.js:31125:9
__exports__.default<.resolveView@http://localhost:4200/assets/vendor.js:16757:9
__exports__.default<.resolve@http://localhost:4200/assets/vendor.js:16638:11
resolve@http://localhost:4200/assets/vendor.js:16280:9
resolve@http://localhost:4200/assets/vendor.js:14730:11
Container.prototype.resolve@http://localhost:4200/assets/vendor.js:14325:9
factoryFor@http://localhost:4200/assets/vendor.js:14813:11
instantiate@http://localhost:4200/assets/vendor.js:14866:11
lookup@http://localhost:4200/assets/vendor.js:14751:11
Container.prototype.lookup@http://localhost:4200/assets/vendor.js:14407:9
Route<.render@http://localhost:4200/assets/vendor.js:36887:13
Route<.renderTemplate@http://localhost:4200/assets/vendor.js:36740:9
Route<.setup@http://localhost:4200/assets/vendor.js:36157:11
applyHook@http://localhost:4200/assets/vendor.js:58657:9
callHook@http://localhost:4200/assets/vendor.js:58651:7
handlerEnteredOrUpdated@http://localhost:4200/assets/vendor.js:57411:7
setupContexts/<@http://localhost:4200/assets/vendor.js:57380:11
forEach@http://localhost:4200/assets/vendor.js:58541:37
setupContexts@http://localhost:4200/assets/vendor.js:57379:9
finalizeTransition@http://localhost:4200/assets/vendor.js:57552:9
Router.prototype.transitionByIntent/newTransition.promise<@http://localhost:4200/assets/vendor.js:57052:13
tryCatch@http://localhost:4200/assets/vendor.js:58985:9
invokeCallback@http://localhost:4200/assets/vendor.js:58997:9
publish@http://localhost:4200/assets/vendor.js:58968:11
@http://localhost:4200/assets/vendor.js:42236:9
DeferredActionQueues.prototype.invoke@http://localhost:4200/assets/vendor.js:13801:11
DeferredActionQueues.prototype.flush@http://localhost:4200/assets/vendor.js:13851:15
Backburner.prototype.end@http://localhost:4200/assets/vendor.js:13314:11
Backburner.prototype.run@http://localhost:4200/assets/vendor.js:13369:15
apply@http://localhost:4200/assets/vendor.js:31548:18
run@http://localhost:4200/assets/vendor.js:30166:7
runInitialize@http://localhost:4200/assets/vendor.js:15606:13
jQuery.Callbacks/fire@http://localhost:4200/assets/vendor.js:3230:1
jQuery.Callbacks/self.fireWith@http://localhost:4200/assets/vendor.js:3342:7
.ready@http://localhost:4200/assets/vendor.js:3554:38
completed@http://localhost:4200/assets/vendor.js:3585:3

I tried this in a non amd fashion and got the same result …

So… how do I get oasis to recognise RSVP ??

Cheers, Stephen.


#2

Hi Guys, I managed to fix this by including the correct js files … duh … Although after opening up the oasis.js I noticed it was using ES6 style imports … I included the dist/oasis.js.html file like this :

app.import('bower_components/rsvp/rsvp.js');
app.import('bower_components/oasis.js/dist/oasis.js');

and then in my view :

/* global oasis */

Although now … I’m trying to load another ember app in the sandbox which I have included in my main dashboad-app … I’v included the m1-ui ember app in dashboard-app/bower.json and am now trying to get it into the sandbox but am really just fiddling in the abyss …

import Ember from 'ember';
import M1 from 'm1-ui/app';

// defines oasis as a global
/* global oasis */

export default Ember.View.extend({
    classNames :['panel', 'panel-default'],
    didInsertElement : function(){
        var sandbox = oasis.createSandbox({
            url: M1,
            type: 'js',
            capabilities: [ 'account' ]
        });
        this.$('.child-app-m1').append(sandbox.el);
    }
});

Any ideas? /Stephen.


#3

I’m using Conductor on a project with ember-cli and we import the global (non-AMD) conductor build and use Conductor as a global. We’re using the iframe adapter. Works fine.

You appear to be attempting to use the inline adapter (which FYI, has been battle-tested far less – haven’t heard of a production deployment yet). I’m pretty use that you can’t pass an Ember app instance to the url property. I’m not sure what the library would be expected to do in that circumstance.

It is not necessary to use something like Conductor/Oasis to have two ember-cli apps on one page. Ember-cli’s namespacing was built to try to accommodate this use case.


#4

cool! I’m just going through conductors docs … hmm. I have a few issues and I guess mainly how do I get my child app ( card ) into the card ? Is it that I need to Conductor.require(’/vendor/my-child-ember-app.js’); and Conductor.require(’/vendor/my-child-ember-templates.js’); ? Would be great to see a real example if anyone has one?

I guess also, as you say that ember-cli’s namespacing should accommodate this use case, would be great to see some examples if possible? /Stephen.