Framer studio, NPM module example

[tehfailsafe]

Following along the NPM example http://framerjs.com/docs/#modules-npm-example, I am getting undefined is not a function while trying _.map [1,2,3], (num) -> num * 3

This is working though, prints » [object Object], so I assume the module is loaded properly?

_ = require "underscore"

print _

[tehfailsafe]

Realized that underscore is already included in Framer which was throwing me off. Let's try React?

npm install react

modues/react.coffee exports.react = require('react')

framer file

React = require("react")
console.log React

Gives me this interesting recursion...

[koenbok]

Both good points. I'll make this better.

I think what's happening in the second is that the module imports itself :-) maybe I should note that and recommend to put all your npm modules in an npm.coffee.

[tehfailsafe]

ah, now I see. Framer adds it's own exports object, so we have to call it on top of that. This is working:

npmModules.coffee

exports.React = require('react')

Framer

npm = require('npmModules')

HelloWorld = npm.React.createClass
    render: ->
        style =
            color: "#333"
            backgroundColor: "#F00"

        npm.React.DOM.div {style: style}, "Hello World"

element = npm.React.createElement(HelloWorld)
npm.React.render(element, document.body)

Now, if I could figure out jsx transforms...

[koenbok]

:-) actually I'm going to leave this open as a todo for tomorrow.