Skip to content

TsumiNa/meteor-aurelia

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

84 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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.

About

Aurelia meets Meteor

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •