How to import coffeescript classes into meteor 1.3 app

1

Thanks, Can’t seem to find this, how do i use imports with the following class:

class Thing
constructor: () ->

Documentation wasn’t clear to me with require etc…

1 Like
2

I guess it’s finally time to move away from coffeescript. I love the @ and ?. I wonder if they’ll ever consider adopting the rest of the nice to haves in the next version of javascript.

3

Is anybody doing this? What’s the best way to do this?

4

Oh man it is simple:

# store.coffee
ReactiveDict = require 'meteor/reactive-dict'

class Store extends ReactiveDict
  constructor: ({state = {}, @bindings}) ->
    super(state)

exports.Store = Store

# index.coffee
{Store} = require './store.coffee'

MyStore = new Store {bindings: []}
1 Like
5

I made a quick demo of this.

Basically, there’s two ways to export things from CoffeeScript, module.exports = Thing or module.exports = { Thing }. The former is equivalent to ES6 export default Thing, the latter is equivalent to export Thing.

Importing them (from CoffeScript) works just like @mrzafod described, or, in ES6, using import Thing from '../imports/thing' if you’re using the first way, and import { Thing } from '../imports/thing' if you’re using the second.

6

OK, I am missing something silly I guess, in my main.js file how do I import a coffee file? I know how to require a .js module in coffeescript but not the other way around.

Thanks,
Can’t believe this is slowing me down

7

@reduxdj check out my example I mentioned above. It’s demonstrating exactly what you’ve asked.

8

is the imports folder necessary as well? I can’t just import the file directly? Because I get ./hello_world" in /Users/Patrick_/app/server/main.js (os.osx.x86_64)

Thanks,
Patrick

9

The imports folder is necessary, otherwise there’s nothing to import (everything that’s not in an imports folder will be autoloaded).

If that’s what you want, however (in other words, the pre-1.3 behavior), then the reason you can’t see the class in other files is because CoffeeScript creates a file scope, by wrapping each file into an IIFE.

In that case you’ll need to explicitly put your class onto the global object. You can do this by putting an @ in front of the name, i.e. class @Thing = (...). See also this question on StackOverflow.

10

OK, completely makes sense to me now. Didn’t realize the imports folder was necessary. My last app had a pretty polluted global namespace, this new app i am building in 1.3 i want there to be much better flow… etc.

11

Following your example, imports folder in my root folder with hello_world.coffee, exactly like it in your app.

And then in my main.js file in my server folder:

import { Meteor } from 'meteor/meteor';
import { ServerConfig } from './config'
import { HelloWorld } from '../imports/hello_world';


Meteor.startup(() => {
  //var app = new App({'config':ServerConfig});
  console.log(1);
  // code to run on server at startup
});

nable to resolve some modules:

“…/imports/hello_world” in /Users/Patrick_/app/server/main.js (os.osx.x86_64)

12

Solved: I just konked myself on my head… I had imported restivus, but coffeescript was not imported… I feel really stupid and humble now.

13

OK it seems that the imports folder is not necessary after all. I am abel to import my coffeescript like this:

import { Meteor } from 'meteor/meteor';
import { ServerConfig } from './config'
import { App } from './app';

Meteor.startup(() => {
  var app = new App({'config':ServerConfig});
});

class App
constructor: (config) ->
console.log ‘constructed’
@config = config
@api = new Restivus(
apiPath: 'api/'
auth:
token: 'auth.apiKey’
user: ->
userId: @request.headers[‘user-id’]
token: @request.headers[‘login-token’]
defaultHeaders: ‘Content-Type’: ‘application/json’
onLoggedIn: ->
console.log @user.username + ’ (’ + @userId + ‘) logged in’
return
onLoggedOut: ->
console.log @user.username + ’ (’ + @userId + ') logged out’
return
prettyJson: true
useDefaultAuth: true
version: ‘v1’
)

@api.addRoute 'phoneNumber', authRequired: false,
  post: ->
    statusCode: 200
    body:
      status: 'success'
      message: 'Please enter your phone number'


module.exports = { App }

I20160406-11:57:31.671(-7)? constructed