Skip to content
Aurelia meets Meteor
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
plugin
.gitignore
.travis.yml
.versions
README.md
jsconfig.json
meteor-aurelia-tests.js
package.js

README.md

Aurelia Meteor

Build Status Join the chat at https://gitter.im/TsumiNa/meteor-typescript

Aurelia and Meteor power combined.Use Jade and html-minify to speed up your works.

This package adds SystemJS Module Loader to your project. It bundle with meteor-systemjs as default.

You must remove blaze-html-templates and spacebars packages because this package will handle *.html files. Just use:

$ meteor remove blaze-html-templates spacebars

Index

Conventions

  • Use .sys.js for every javascript file that Aurelia will handle. with meteor-typescript can use .ts
  • Use .au.html, .html or .jade for every Aurelia Templates.

use .au.js for compatible

You can mix these things if your wish.

If you want use typescript, you can add meteor-typescript package to you meteor app project. Get corresponding definition files of Aurelia here

change log

0.9.9

  • Bug fix, fix Path reservation conflict error when your have two or more files have exactly identical content.

0.9.1

  • Update to Aurelia@1.0.0-beta.1

0.8.2

  • Improve sourecMap support.
  • Fixed some bugs.

0.8.1

  • Add HTML/Jade syntax error check
  • Some bug fix

0.8.0

  • [breaking change]:

    • You must remove blaze-html-templates and spacebars packages because this package will take control of the html files. Just meteor remove blaze-html-templates spacebars
    • Now template files can use *.html extension, *.au.html is also available for incompatibility.
    • The index.html under the root is the only one will be compiled to normal html template. You can't write your body codes here such as <div aurelia-app="client/app/main"></div>

Quick start

  1. Install Meteor $ curl https://install.meteor.com | /bin/sh
  2. Create a new meteor app using $ meteor create myapp or navigate to the root of your existing app
  3. Install Aurelia and meteor-typescript:
$ meteor remove blaze-html-templates spacebars
$ meteor add tsumina:meteor-aurelia
$ meteor add tsumina:meteor-typescript  # if you need typescript support

Example

Tutorial

Aurelia use conventions to keep code simple and clean, to bootstrap a aurelia app you need a index.html (in the root of an Meteor app), include:

<body>
  <div aurelia-app="client/main"></div>
  
  <script>
    System.import('aurelia-bootstrapper');
  </script>

</body>

The aurelia-app="client/main" attribute points to the Aurelia configuration file named main, which is main.sys.js.

Assume you use es6 js and html template. In the client folder create main.sys.js and insert:

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.start().then(a => a.setRoot('client/app'));
}

The main.sys.js is the file where the configuration is done to bootstrap Aurelia.

In this case the main file tells where the entry point of the app is located ('client/app'), which means go look for the app.html, app.sys.js pair.

By convention Aurelia uses view/view-model pairs of the same name.

In the client folder, create app.html and insert:

<template>
  <input type="text" placeholder="Your name" value.bind="name">
  <h2>Hello ${name}!</h2>
</template>

Then create app.sys.js and insert:

export class App {
  constructor(){
    this.name = "";
  }
}

Infact, you can use SystemJS Module loader on both client/server. Simple write code like this(the root of an Meteor app):

  • index.html
<body>
  <div aurelia-app="client/main"></div>
</body>
  • entry.js
if (Meteor.isClient) {
  Meteor.startup(function(){
    System.import('aurelia-bootstrapper');
  })
}

if (Meteor.isServer) {
  Meteor.startup(function(){
    // some codes
  })
}

c/s

Create Package

See the example here.

Details

meteor-aurelia and meteor-typescript compile files with their package name as root path. If codes not in a package, package name is null, for example: main.sys.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-animator-css')
    .plugin('tsumina:ui-virtualization');

  aurelia.start().then(a => a.setRoot('client/app'));
}

to main.js

System.register("client/main",[], function (_export) {
  'use strict';  
  _export('configure', configure);  
  function configure(aurelia) {  
    aurelia.use.standardConfiguration().developmentLogging().plugin('aurelia-animator-css').plugin('tsumina:ui-virtualization');
    aurelia.start().then(function (a) {
      return a.setRoot('client/app'); 
    }); 
  } 

  return { 
    setters: [], 
    execute: function () {} 
  }; 
}) 

Now assume the main.sys.js in a package named yourname:package-name. In this case, the package name will be used as the root path. main.js

System.register("yourname:package-name/client/main",[], function (_export) {
  'use strict';  
  _export('configure', configure);  
  function configure(aurelia) {  
    aurelia.use.standardConfiguration().developmentLogging().plugin('aurelia-animator-css').plugin('tsumina:ui-virtualization');
    aurelia.start().then(function (a) {
      return a.setRoot('client/app'); 
    }); 
  } 

  return { 
    setters: [], 
    execute: function () {} 
  }; 
}) 

So if you create a aurelia package with a entry index.sys.js at your package root, Name your package yourname:package-name, and want other users load it like

plugin('yourname:package-name');

you should add a lib/init.js file to you package sources with content:

System.registerDynamic("yourname:package-name", ["yourname:package-name/index"], true, function($__require, exports, module) {
  ;
  var global = this,
      __define = global.define;
  global.define = undefined;
  module.exports = $__require('yourname:package-name');
  global.define = __define;
  return module.exports;
});

Copyright and license

Code and documentation © 2015 TsumiNa Released under the MIT license.

You can’t perform that action at this time.