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- Use
.sys.jsfor every javascript file that Aurelia will handle. withmeteor-typescriptcan use.ts - Use
.au.html,.htmlor.jadefor every Aurelia Templates.
use
.au.jsfor 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
- Bug fix, fix
Path reservation conflicterror when your have two or more files have exactly identical content.
- Update to Aurelia@1.0.0-beta.1
- Improve sourecMap support.
- Fixed some bugs.
- Add HTML/Jade syntax error check
- Some bug fix
-
[breaking change]:
- You must remove
blaze-html-templatesandspacebarspackages because this package will take control of thehtmlfiles. Justmeteor remove blaze-html-templates spacebars - Now template files can use
*.htmlextension,*.au.htmlis also available for incompatibility. - The
index.htmlunder 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>
- You must remove
- Install Meteor
$ curl https://install.meteor.com | /bin/sh - Create a new meteor app using
$ meteor create myappor navigate to the root of your existing app - 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 application : A meteor-aurelia port of skeleton-navigation
-
Aurelia-TODO-App is an simple example to show how to play with typescript and aurelia.
-
aurelia-meteor-todos is another one port from advanced meteor todos app by Markusxmr. Here to see the live demo
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
})
}
See the example here.
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;
});Code and documentation © 2015 TsumiNa Released under the MIT license.