CODEWITHSUNDEEP
meteorfamo.us
Keith Nicholas
Keith Nicholas

Reputation: 44306

How can I use the famo.us CDN links in a meteor application?

With the release of famo.us, it has all the libraries as CDN hosted libs. How can I use these from within a meteor app?

I get a lot of problems with the "define" in the famo.us code...

What I've done is create a new meteor app, and then from the famo.us boilerplate, I've taken the html and put it into a client folder so it looks like

<head>  
  <title>famo.us App</title>
        <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />

        <!-- shims for backwards compatibility -->
        <script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
        <script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
        <script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>

        <!-- module loader -->
        <script type="text/javascript" src="http://code.famo.us/lib/require.js"></script>

        <!-- famous -->
        <link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.2/famous.css" />
        <script type="text/javascript" src="http://code.famo.us/famous/0.2/famous.min.js"></script>

        <!-- app code -->
        <link rel="stylesheet" type="text/css" href="css/app.css" />
        <script type="text/javascript">
            require.config({'localhost:3000': 'public/'});
            require(['main']);
        </script>

</head>

<body>  
</body>

Then I've taken the main.js in the src folder of the boiler plate and put it into the client/compatibility folder of meteor. But it doesn't really work. Comes back with

Uncaught ReferenceError: define is not defined

from main.js

and main.js looks like

define(function(require, exports, module) {
    // import dependencies
    var Engine = require('famous/core/Engine');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var ImageSurface = require('famous/surfaces/ImageSurface');

    // create the main context
    var mainContext = Engine.createContext();

    // your app here
    var logo = new ImageSurface({
        size: [200, 200],
        content: 'http://code.famo.us/assets/famous_logo.svg',
        classes: ['double-sided']
    });

    var initialTime = Date.now();
    var centerSpinModifier = new Modifier({
        origin: [0.5, 0.5],
        transform : function(){
            return Transform.rotateY(.002 * (Date.now() - initialTime));
        }
    });

    mainContext.add(centerSpinModifier).add(logo);
});

from looking at the source, it looks like its because meteor has compiled main.js and included before the famo.us stuff gets loaded.

Upvotes: 3

Views: 1579

Answers (3)

Lucas Blancas
Lucas Blancas

Reputation: 561

Have you tried to import mjn:famous package into your meteor project?

meteor add mjn:famous

Upvotes: 1

neaumusic
neaumusic

Reputation: 10474

great question; famo.us is moving away from Yeoman / Grunt

to clean up rich's answer, here's a simple index.html

<html>
  <script src='http://code.famo.us/lib/require.js'></script>
  <script src='http://code.famo.us/famous/0.2/famous.min.js'></script>

  <script>
    require([
      'famous/core/Engine',
      'famous/core/Surface',
      'famous/core/Modifier'
    ], function(Engine, Surface, Modifier){
      var context = Engine.createContext();

      var helloSurf = new Surface({
        content: 'hello world',
        properties: {
          backgroundColor:'red'
        }
      });

      var helloMod = new Modifier({
        size: [100, 100],
        origin: [.5, 0]
      });

      context.add(helloMod).add(helloSurf);
    });
  </script>
<html>

Upvotes: 0

rich
rich

Reputation: 196

Have you tried loading main.js directly in the script tag instead of using the script tag to "require" it in. I'm doing something similar where I inject the main.js code directly into the html, but here is an example where I've split it out and it works (although I'm not using meteor.)

Clearly I'm also making a bit of an alteration to the code and not using define, but this change is straight forward. Here are the html and js... html:

<html>
<head>
<title>Debug Output</title>
<meta name='viewport' content='width=device-width, maximum-scale=1, user-scalable=no' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<script type='text/javascript' src='http://code.famo.us/lib/functionPrototypeBind.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/classList.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/requestAnimationFrame.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/require.js'></script>
<link rel='stylesheet' type='text/css' href='http://code.famo.us/famous/0.2/famous.css' />
<script type='text/javascript' src='http://code.famo.us/famous/0.2/famous.min.js'></script>
<link rel='stylesheet' type='text/css' href='styles/app.css' />
<script type='text/javascript' src='tstPackage.js'>
</script>
</head>
<body>
</body>
</html>

js:

require(['famous/core/Engine','famous/core/Surface'],function(Engine,Surface) {
// Famo.us Context Example 
//var Engine  = require('famous/core/Engine');
//var Surface = require('famous/core/Surface');

var mainContext = Engine.createContext();

var surface = new Surface({
    size: [200, 200],
    content: 'Hello World',
    classes: ['red-bg'],
    properties: {
    lineHeight: '200px',
    textAlign: 'center'
}
});

mainContext.add(surface);
// from https://famo.us/examples/0.2.0/core/context/example

});

Upvotes: 3

Related Questions