diff --git a/BACKERS.md b/BACKERS.md new file mode 100644 index 00000000..5035d458 --- /dev/null +++ b/BACKERS.md @@ -0,0 +1,69 @@ +# Aurelia Backers + +Below you'll find a list of the wonderful people and organizations that have made financial contributions to Aurelia. Please consider joining them in supporting open source by making [your own contribution on Open Collective](https://opencollective.com/aurelia/). + +## Gold Sponsors + +* [Hogia](https://www.hogia.se/) + +## Silver Sponsors + +* [Simployer](https://www.simployer.no/) + +## Bronze Sponsors + +* [AmVenture](https://www.amventure.com/) +* [Diapason](https://www.diapason-treasury.com/trms/) +* [Effectory](https://www.effectory.com/) +* [Merchise](http://www.merchise.cl/) +* [Nordic Trustee](https://nordictrustee.com/) +* [Ormasoft](http://www.ormasoft.cl/) +* [Team Extension](https://teamextension.io/) + +## Wood Sponsors + +* [Adam Żurański](https://opencollective.com/adam-zuranski) +* [Alexander Taran](https://github.com/alexander-taran) +* [Allen Joslin](https://opencollective.com/allen-joslin) +* [Andrew Camilleri](https://github.com/Kukks) +* [Arturo Martinez](https://twitter.com/artmasa) +* [Ats Uiboupin](https://github.com/atsu85) +* [Brandon Ryan](https://mainstream-tech.com) +* [Christian Kotzbauer](https://code-chris.github.io) +* [Christoph Noe](http://neonnoe.com/) +* [CP Huo](https://opencollective.com/cp-huo) +* [David Snell](https://twitter.com/mentalengine) +* [Dwayne Charrington](https://ilikekillnerds.com) +* [Enrico Padovani](https://alchemists.it) +* [Erik Lieben](https://www.eriklieben.com) +* [Fabian Ituarte](http://fabianituarte.com/) +* [Fabio Chines](https://tagsistemi.it) +* [John D'Amore](https://www.diameterhealth.com/) +* [Juliën Hanssens](https://hanssens.com) +* [Khuzema Kanore](http://wisdom.com.kw) +* [Luka Cetina](https://opencollective.com/luka-cetina) +* [Michael Lakerveld](https://twitter.com/lakerfld) +* [Nick Floyd](http://archcoder.com) +* [Prasan Kumar](https://antaressystems.com) +* [Red Feet](https://twitter.com/redfeet) +* [Richard Sykora](https://twitter.com/richardsykora) +* [Robert B](https://opencollective.com/robert-b) +* [Saqib Rokadia](https://invioinc.com/) +* [Shannon Horn](http://smoothirish.com) +* [Steven Pena](https://twitter.com/steven_pena) +* [Tyler Presley](https://strengthen.io) +* [Veikko Eeva](https://twitter.com/veikkoeeva) +* [Vildan Softic](http://pragmatic-coder.net) +* [weagle08](https://github.com/weagle08) + +## Generous One-Time Gifts + +* [Brian Oommen](https://opencollective.com/brian-oommen) +* [COMsulting](http://www.comsulting.de/) +* [Huberto Kusters](https://opencollective.com/huberto-kusters) +* [John Kattestaart](https://twitter.com/Jkattestaart) +* [Miroslav Popovic](https://miroslavpopovic.com) +* [Radenko Zec](https://opencollective.com/radenkozec) +* [Richard Bartley](https://twitter.com/RBRbBartley) +* [Steven Moore](https://twitter.com/smoore4moma) +* [Waldemar Bandosz](https://twitter.com/wbanos) diff --git a/LICENSE b/LICENSE index d291c0b0..0d4338e0 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2010 - 2016 Blue Spire Inc. +Copyright (c) 2010 - 2018 Blue Spire Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 12352e4f..fd8b703e 100644 --- a/README.md +++ b/README.md @@ -7,11 +7,11 @@ This library is part of the [Aurelia](http://www.aurelia.io/) platform and contains the aurelia framework which brings together all the required core aurelia libraries into a ready-to-go application-building platform. -> To keep up to date on [Aurelia](http://www.aurelia.io/), please visit and subscribe to [the official blog](http://blog.aurelia.io/) and [our email list](http://eepurl.com/ces50j). We also invite you to [follow us on twitter](https://twitter.com/aureliaeffect). If you have questions, please [join our community on Gitter](https://gitter.im/aurelia/discuss) or use [stack overflow](http://stackoverflow.com/search?q=aurelia). Documentation can be found [in our developer hub](http://aurelia.io/hub.html). If you would like to have deeper insight into our development process, please install the [ZenHub](https://zenhub.io) Chrome or Firefox Extension and visit any of our repository's boards. +> To keep up to date on [Aurelia](http://www.aurelia.io/), please visit and subscribe to [the official blog](http://blog.aurelia.io/) and [our email list](http://eepurl.com/ces50j). We also invite you to [follow us on twitter](https://twitter.com/aureliaeffect). If you have questions look around our [Discourse forums](https://discourse.aurelia.io/), chat in our [community on Gitter](https://gitter.im/aurelia/discuss) or use [stack overflow](http://stackoverflow.com/search?q=aurelia). Documentation can be found [in our developer hub](http://aurelia.io/docs). If you would like to have deeper insight into our development process, please install the [ZenHub](https://zenhub.io) Chrome or Firefox Extension and visit any of our repository's boards. ## Documention -You can read the documentation for the aurelia framework [here](http://aurelia.io/docs.html). If you would like to help improve this documentation, the source for many of the docs can be found in the doc folder within this repository. Other docs, not related to the general framework, but directed at specific libraries, can be found in the doc folder of those libraries. +You can read the documentation for the aurelia framework [here](http://aurelia.io/docs). If you would like to help improve this documentation, the source for many of the docs can be found in the doc folder within this repository. Other docs, not related to the general framework, but directed at specific libraries, can be found in the doc folder of those libraries. ## Platform Support diff --git a/bower.json b/bower.json index 799905ac..aa588a14 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "aurelia-framework", - "version": "1.1.5", + "version": "1.2.0", "description": "The aurelia framework brings together all the required core aurelia libraries into a ready-to-go application-building platform.", "keywords": [ "aurelia", diff --git a/dist/amd/aurelia-framework.js b/dist/amd/aurelia-framework.js index 53cc1ea9..f5ed1b7a 100644 --- a/dist/amd/aurelia-framework.js +++ b/dist/amd/aurelia-framework.js @@ -154,8 +154,8 @@ define(['exports', 'aurelia-dependency-injection', 'aurelia-binding', 'aurelia-m Aurelia.prototype.enhance = function enhance() { var _this2 = this; - var bindingContext = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; - var applicationHost = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1]; + var bindingContext = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + var applicationHost = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; this._configureHost(applicationHost || _aureliaPal.DOM.querySelectorAll('body')[0]); @@ -171,8 +171,8 @@ define(['exports', 'aurelia-dependency-injection', 'aurelia-binding', 'aurelia-m Aurelia.prototype.setRoot = function setRoot() { var _this3 = this; - var root = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0]; - var applicationHost = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1]; + var root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + var applicationHost = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; var instruction = {}; @@ -401,7 +401,7 @@ define(['exports', 'aurelia-dependency-injection', 'aurelia-binding', 'aurelia-m }; FrameworkConfiguration.prototype.feature = function feature(plugin) { - var config = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var hasIndex = /\/index$/i.test(plugin); var moduleId = hasIndex || getExt(plugin) ? plugin : plugin + '/index'; @@ -497,14 +497,20 @@ define(['exports', 'aurelia-dependency-injection', 'aurelia-binding', 'aurelia-m return this.basicConfiguration().history().router(); }; - FrameworkConfiguration.prototype.developmentLogging = function developmentLogging() { + FrameworkConfiguration.prototype.developmentLogging = function developmentLogging(level) { var _this6 = this; + var logLevel = level ? TheLogManager.logLevel[level] : undefined; + + if (logLevel === undefined) { + logLevel = TheLogManager.logLevel.debug; + } + this.preTask(function () { return _this6.aurelia.loader.normalize('aurelia-logging-console', _this6.bootstrapperName).then(function (name) { return _this6.aurelia.loader.loadModule(name).then(function (m) { TheLogManager.addAppender(new m.ConsoleAppender()); - TheLogManager.setLevel(TheLogManager.logLevel.debug); + TheLogManager.setLevel(logLevel); }); }); }); diff --git a/dist/aurelia-framework.d.ts b/dist/aurelia-framework.d.ts index 721ddc6d..4cbcadde 100644 --- a/dist/aurelia-framework.d.ts +++ b/dist/aurelia-framework.d.ts @@ -26,33 +26,33 @@ import { * The framework core that provides the main Aurelia object. */ export declare class Aurelia { - + /** * The DOM Element that Aurelia will attach to. */ host: Element; - + /** /** * The loader used by the application. */ loader: Loader; - + /** * The root DI container used by the application. */ container: Container; - + /** * The global view resources used by the application. */ resources: ViewResources; - + /** * The configuration used during application startup. */ use: FrameworkConfiguration; - + /** * Creates an instance of Aurelia. * @param loader The loader for this Aurelia instance to use. If a loader is not specified, Aurelia will use the loader type specified by PLATFORM.Loader. @@ -60,13 +60,13 @@ export declare class Aurelia { * @param resources The resource registry for this Aurelia instance to use. If a resource registry is not specified, Aurelia will create an empty registry. */ constructor(loader?: Loader, container?: Container, resources?: ViewResources); - + /** * Loads plugins, then resources, and then starts the Aurelia instance. * @return Returns a Promise with the started Aurelia instance. */ start(): Promise; - + /** * Enhances the host's existing elements with behaviors and bindings. * @param bindingContext A binding context for the enhanced elements. @@ -74,7 +74,7 @@ export declare class Aurelia { * @return Returns a Promise for the current Aurelia instance. */ enhance(bindingContext?: Object, applicationHost?: string | Element): Promise; - + /** * Instantiates the root component and adds it to the DOM. * @param root The root component to load upon bootstrap. @@ -88,23 +88,23 @@ export declare class Aurelia { * Manages configuring the aurelia framework instance. */ export declare class FrameworkConfiguration { - + /** * The root DI container used by the application. */ container: Container; - + /** * The aurelia instance. */ aurelia: Aurelia; - + /** * Creates an instance of FrameworkConfiguration. * @param aurelia An instance of Aurelia. */ constructor(aurelia: Aurelia); - + /** * Adds an existing object to the framework's dependency injection container. * @param type The object type of the dependency that the framework will inject. @@ -112,7 +112,7 @@ export declare class FrameworkConfiguration { * @return Returns the current FrameworkConfiguration instance. */ instance(type: any, instance: any): FrameworkConfiguration; - + /** * Adds a singleton to the framework's dependency injection container. * @param type The object type of the dependency that the framework will inject. @@ -120,7 +120,7 @@ export declare class FrameworkConfiguration { * @return Returns the current FrameworkConfiguration instance. */ singleton(type: any, implementation?: Function): FrameworkConfiguration; - + /** * Adds a transient to the framework's dependency injection container. * @param type The object type of the dependency that the framework will inject. @@ -128,21 +128,21 @@ export declare class FrameworkConfiguration { * @return Returns the current FrameworkConfiguration instance. */ transient(type: any, implementation?: Function): FrameworkConfiguration; - + /** * Adds an async function that runs before the plugins are run. * @param task The function to run before start. * @return Returns the current FrameworkConfiguration instance. */ preTask(task: Function): FrameworkConfiguration; - + /** * Adds an async function that runs after the plugins are run. * @param task The function to run after start. * @return Returns the current FrameworkConfiguration instance. */ postTask(task: Function): FrameworkConfiguration; - + /** * Configures an internal feature plugin before Aurelia starts. * @param plugin The folder for the internal plugin to configure (expects an index.js in that folder). @@ -150,14 +150,14 @@ export declare class FrameworkConfiguration { * @return Returns the current FrameworkConfiguration instance. */ feature(plugin: string, config?: any): FrameworkConfiguration; - + /** * Adds globally available view resources to be imported into the Aurelia framework. * @param resources The relative module id to the resource. (Relative to the plugin's installer.) * @return Returns the current FrameworkConfiguration instance. */ globalResources(resources: string | string[]): FrameworkConfiguration; - + /** * Renames a global resource that was imported. * @param resourcePath The path to the resource. @@ -165,7 +165,7 @@ export declare class FrameworkConfiguration { * @return Returns the current FrameworkConfiguration instance. */ globalName(resourcePath: string, newName: string): FrameworkConfiguration; - + /** * Configures an external, 3rd party plugin before Aurelia starts. * @param plugin The ID of the 3rd party plugin to configure. @@ -173,55 +173,63 @@ export declare class FrameworkConfiguration { * @return Returns the current FrameworkConfiguration instance. */ plugin(plugin: string, config?: any): FrameworkConfiguration; - + + // Default configuration helpers + // Note: Please do NOT add PLATFORM.moduleName() around those module names. + // Those functions are not guaranteed to be called, they are here to faciliate + // common configurations. If they are not called, we don't want to include a + // static dependency on those modules. + // Including those modules in the bundle or not is a decision that must be + // taken by the bundling tool, at build time. /** * Plugs in the default binding language from aurelia-templating-binding. * @return Returns the current FrameworkConfiguration instance. */ defaultBindingLanguage(): FrameworkConfiguration; - + /** * Plugs in the router from aurelia-templating-router. * @return Returns the current FrameworkConfiguration instance. */ router(): FrameworkConfiguration; - + /** * Plugs in the default history implementation from aurelia-history-browser. * @return Returns the current FrameworkConfiguration instance. */ history(): FrameworkConfiguration; - + /** * Plugs in the default templating resources (if, repeat, show, compose, etc.) from aurelia-templating-resources. * @return Returns the current FrameworkConfiguration instance. */ defaultResources(): FrameworkConfiguration; - + /** * Plugs in the event aggregator from aurelia-event-aggregator. * @return Returns the current FrameworkConfiguration instance. */ eventAggregator(): FrameworkConfiguration; - + /** * Sets up a basic Aurelia configuration. This is equivalent to calling `.defaultBindingLanguage().defaultResources().eventAggregator();` * @return Returns the current FrameworkConfiguration instance. */ basicConfiguration(): FrameworkConfiguration; - + /** * Sets up the standard Aurelia configuration. This is equivalent to calling `.defaultBindingLanguage().defaultResources().eventAggregator().history().router();` * @return Returns the current FrameworkConfiguration instance. */ standardConfiguration(): FrameworkConfiguration; - + /** * Plugs in the ConsoleAppender and sets the log level to debug. + * @param level The log level (none/error/warn/info/debug), default to 'debug'. * @return {FrameworkConfiguration} Returns the current FrameworkConfiguration instance. */ - developmentLogging(): FrameworkConfiguration; - + developmentLogging(level?: String): FrameworkConfiguration; + /** * Loads and configures the plugins registered with this instance. * @return Returns a promise which resolves when all plugins are loaded and configured. @@ -235,8 +243,8 @@ export * from 'aurelia-templating'; export * from 'aurelia-loader'; export * from 'aurelia-task-queue'; export * from 'aurelia-path'; -export * from 'aurelia-pal'; /** - * The log manager. - */ - export const LogManager: any; + * The log manager. + */ +export const LogManager: typeof TheLogManager; +export * from 'aurelia-pal'; diff --git a/dist/aurelia-framework.js b/dist/aurelia-framework.js index 5358e657..bf6e32b4 100644 --- a/dist/aurelia-framework.js +++ b/dist/aurelia-framework.js @@ -524,14 +524,21 @@ export class FrameworkConfiguration { /** * Plugs in the ConsoleAppender and sets the log level to debug. + * @param level The log level (none/error/warn/info/debug), default to 'debug'. * @return {FrameworkConfiguration} Returns the current FrameworkConfiguration instance. */ - developmentLogging(): FrameworkConfiguration { + developmentLogging(level?: String): FrameworkConfiguration { + let logLevel = level ? TheLogManager.logLevel[level] : undefined; + + if (logLevel === undefined) { + logLevel = TheLogManager.logLevel.debug; + } + this.preTask(() => { return this.aurelia.loader.normalize('aurelia-logging-console', this.bootstrapperName).then(name => { return this.aurelia.loader.loadModule(name).then(m => { TheLogManager.addAppender(new m.ConsoleAppender()); - TheLogManager.setLevel(TheLogManager.logLevel.debug); + TheLogManager.setLevel(logLevel); }); }); }); diff --git a/dist/commonjs/aurelia-framework.js b/dist/commonjs/aurelia-framework.js index 16be22d9..37b49003 100644 --- a/dist/commonjs/aurelia-framework.js +++ b/dist/commonjs/aurelia-framework.js @@ -164,8 +164,8 @@ var Aurelia = exports.Aurelia = function () { Aurelia.prototype.enhance = function enhance() { var _this2 = this; - var bindingContext = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; - var applicationHost = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1]; + var bindingContext = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + var applicationHost = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; this._configureHost(applicationHost || _aureliaPal.DOM.querySelectorAll('body')[0]); @@ -181,8 +181,8 @@ var Aurelia = exports.Aurelia = function () { Aurelia.prototype.setRoot = function setRoot() { var _this3 = this; - var root = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0]; - var applicationHost = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1]; + var root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + var applicationHost = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; var instruction = {}; @@ -411,7 +411,7 @@ var FrameworkConfiguration = function () { }; FrameworkConfiguration.prototype.feature = function feature(plugin) { - var config = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var hasIndex = /\/index$/i.test(plugin); var moduleId = hasIndex || getExt(plugin) ? plugin : plugin + '/index'; @@ -507,14 +507,20 @@ var FrameworkConfiguration = function () { return this.basicConfiguration().history().router(); }; - FrameworkConfiguration.prototype.developmentLogging = function developmentLogging() { + FrameworkConfiguration.prototype.developmentLogging = function developmentLogging(level) { var _this6 = this; + var logLevel = level ? TheLogManager.logLevel[level] : undefined; + + if (logLevel === undefined) { + logLevel = TheLogManager.logLevel.debug; + } + this.preTask(function () { return _this6.aurelia.loader.normalize('aurelia-logging-console', _this6.bootstrapperName).then(function (name) { return _this6.aurelia.loader.loadModule(name).then(function (m) { TheLogManager.addAppender(new m.ConsoleAppender()); - TheLogManager.setLevel(TheLogManager.logLevel.debug); + TheLogManager.setLevel(logLevel); }); }); }); diff --git a/dist/es2015/aurelia-framework.js b/dist/es2015/aurelia-framework.js index 19a3f2b2..d79ca65f 100644 --- a/dist/es2015/aurelia-framework.js +++ b/dist/es2015/aurelia-framework.js @@ -147,7 +147,7 @@ function runTasks(config, tasks) { } function loadPlugin(config, loader, info) { - logger.debug(`Loading plugin ${ info.moduleId }.`); + logger.debug(`Loading plugin ${info.moduleId}.`); config.resourcesRelativeTo = info.resourcesRelativeTo; let id = info.moduleId; @@ -163,12 +163,12 @@ function loadPlugin(config, loader, info) { if ('configure' in m) { return Promise.resolve(m.configure(config, info.config || {})).then(() => { config.resourcesRelativeTo = null; - logger.debug(`Configured plugin ${ info.moduleId }.`); + logger.debug(`Configured plugin ${info.moduleId}.`); }); } config.resourcesRelativeTo = null; - logger.debug(`Loaded plugin ${ info.moduleId }.`); + logger.debug(`Loaded plugin ${info.moduleId}.`); }); } } @@ -291,7 +291,7 @@ export let FrameworkConfiguration = class FrameworkConfiguration { for (let i = 0, ii = toAdd.length; i < ii; ++i) { resource = toAdd[i]; if (typeof resource !== 'string') { - throw new Error(`Invalid resource path [${ resource }]. Resources must be specified as relative module IDs.`); + throw new Error(`Invalid resource path [${resource}]. Resources must be specified as relative module IDs.`); } let parent = resourcesRelativeTo[0]; @@ -367,12 +367,18 @@ export let FrameworkConfiguration = class FrameworkConfiguration { return this.basicConfiguration().history().router(); } - developmentLogging() { + developmentLogging(level) { + let logLevel = level ? TheLogManager.logLevel[level] : undefined; + + if (logLevel === undefined) { + logLevel = TheLogManager.logLevel.debug; + } + this.preTask(() => { return this.aurelia.loader.normalize('aurelia-logging-console', this.bootstrapperName).then(name => { return this.aurelia.loader.loadModule(name).then(m => { TheLogManager.addAppender(new m.ConsoleAppender()); - TheLogManager.setLevel(TheLogManager.logLevel.debug); + TheLogManager.setLevel(logLevel); }); }); }); diff --git a/dist/native-modules/aurelia-framework.js b/dist/native-modules/aurelia-framework.js index b2d83f18..5ecebbdf 100644 --- a/dist/native-modules/aurelia-framework.js +++ b/dist/native-modules/aurelia-framework.js @@ -62,8 +62,8 @@ export var Aurelia = function () { Aurelia.prototype.enhance = function enhance() { var _this2 = this; - var bindingContext = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; - var applicationHost = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1]; + var bindingContext = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + var applicationHost = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; this._configureHost(applicationHost || DOM.querySelectorAll('body')[0]); @@ -79,8 +79,8 @@ export var Aurelia = function () { Aurelia.prototype.setRoot = function setRoot() { var _this3 = this; - var root = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0]; - var applicationHost = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1]; + var root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + var applicationHost = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; var instruction = {}; @@ -309,7 +309,7 @@ var FrameworkConfiguration = function () { }; FrameworkConfiguration.prototype.feature = function feature(plugin) { - var config = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var hasIndex = /\/index$/i.test(plugin); var moduleId = hasIndex || getExt(plugin) ? plugin : plugin + '/index'; @@ -405,14 +405,20 @@ var FrameworkConfiguration = function () { return this.basicConfiguration().history().router(); }; - FrameworkConfiguration.prototype.developmentLogging = function developmentLogging() { + FrameworkConfiguration.prototype.developmentLogging = function developmentLogging(level) { var _this6 = this; + var logLevel = level ? TheLogManager.logLevel[level] : undefined; + + if (logLevel === undefined) { + logLevel = TheLogManager.logLevel.debug; + } + this.preTask(function () { return _this6.aurelia.loader.normalize('aurelia-logging-console', _this6.bootstrapperName).then(function (name) { return _this6.aurelia.loader.loadModule(name).then(function (m) { TheLogManager.addAppender(new m.ConsoleAppender()); - TheLogManager.setLevel(TheLogManager.logLevel.debug); + TheLogManager.setLevel(logLevel); }); }); }); diff --git a/dist/system/aurelia-framework.js b/dist/system/aurelia-framework.js index 075ca48b..f837117e 100644 --- a/dist/system/aurelia-framework.js +++ b/dist/system/aurelia-framework.js @@ -5,7 +5,7 @@ System.register(['aurelia-logging', 'aurelia-dependency-injection', 'aurelia-loa var TheLogManager, Container, Loader, BindingLanguage, ViewSlot, ViewResources, TemplatingEngine, CompositionTransaction, ViewEngine, DOM, PLATFORM, relativeToFile, join, Aurelia, logger, extPattern, FrameworkConfiguration, LogManager; - + function preventActionlessFormSubmit() { DOM.addEventListener('submit', function (evt) { @@ -207,7 +207,7 @@ System.register(['aurelia-logging', 'aurelia-dependency-injection', 'aurelia-loa execute: function () { _export('Aurelia', Aurelia = function () { function Aurelia(loader, container, resources) { - + this.loader = loader || new PLATFORM.Loader(); this.container = container || new Container().makeGlobal(); @@ -249,8 +249,8 @@ System.register(['aurelia-logging', 'aurelia-dependency-injection', 'aurelia-loa Aurelia.prototype.enhance = function enhance() { var _this2 = this; - var bindingContext = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; - var applicationHost = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1]; + var bindingContext = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + var applicationHost = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; this._configureHost(applicationHost || DOM.querySelectorAll('body')[0]); @@ -266,8 +266,8 @@ System.register(['aurelia-logging', 'aurelia-dependency-injection', 'aurelia-loa Aurelia.prototype.setRoot = function setRoot() { var _this3 = this; - var root = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0]; - var applicationHost = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1]; + var root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + var applicationHost = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; var instruction = {}; @@ -345,7 +345,7 @@ System.register(['aurelia-logging', 'aurelia-dependency-injection', 'aurelia-loa function FrameworkConfiguration(aurelia) { var _this4 = this; - + this.aurelia = aurelia; this.container = aurelia.container; @@ -392,7 +392,7 @@ System.register(['aurelia-logging', 'aurelia-dependency-injection', 'aurelia-loa }; FrameworkConfiguration.prototype.feature = function feature(plugin) { - var config = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var hasIndex = /\/index$/i.test(plugin); var moduleId = hasIndex || getExt(plugin) ? plugin : plugin + '/index'; @@ -488,14 +488,20 @@ System.register(['aurelia-logging', 'aurelia-dependency-injection', 'aurelia-loa return this.basicConfiguration().history().router(); }; - FrameworkConfiguration.prototype.developmentLogging = function developmentLogging() { + FrameworkConfiguration.prototype.developmentLogging = function developmentLogging(level) { var _this6 = this; + var logLevel = level ? TheLogManager.logLevel[level] : undefined; + + if (logLevel === undefined) { + logLevel = TheLogManager.logLevel.debug; + } + this.preTask(function () { return _this6.aurelia.loader.normalize('aurelia-logging-console', _this6.bootstrapperName).then(function (name) { return _this6.aurelia.loader.loadModule(name).then(function (m) { TheLogManager.addAppender(new m.ConsoleAppender()); - TheLogManager.setLevel(TheLogManager.logLevel.debug); + TheLogManager.setLevel(logLevel); }); }); }); @@ -541,4 +547,4 @@ System.register(['aurelia-logging', 'aurelia-dependency-injection', 'aurelia-loa _export('LogManager', LogManager); } }; -}); +}); \ No newline at end of file diff --git a/dist/system/index.js b/dist/system/index.js index eb0ffdb3..47eaf2cc 100644 --- a/dist/system/index.js +++ b/dist/system/index.js @@ -15,4 +15,4 @@ System.register(['./aurelia-framework'], function (_export, _context) { }], execute: function () {} }; -}); +}); \ No newline at end of file diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md index 0cc51c69..2f5fb954 100644 --- a/doc/CHANGELOG.md +++ b/doc/CHANGELOG.md @@ -1,3 +1,22 @@ + +# [1.2.0](https://github.com/aurelia/framework/compare/1.1.5...1.2.0) (2018-03-29) + + +### Bug Fixes + +* **doc:** clarify when detached() is called ([6eee2b9](https://github.com/aurelia/framework/commit/6eee2b9)) +* **doc:** updated contact detail screenshot to bootstrap 4 styles ([5cdfe26](https://github.com/aurelia/framework/commit/5cdfe26)) +* **doc:** updated screenshots to bootstrap 4 styles ([88f0210](https://github.com/aurelia/framework/commit/88f0210)) +* **doc:** updated the form layout in the contact manager tutorial ([19a5dbe](https://github.com/aurelia/framework/commit/19a5dbe)) +* **doc:** upgrade contacts tutorial to bootstrap 4 ([2bb2f55](https://github.com/aurelia/framework/commit/2bb2f55)) + + +### Features + +* **log:** support optional log level param to developmentLogging(). ([7962912](https://github.com/aurelia/framework/commit/7962912)) + + + ## [1.1.3](https://github.com/aurelia/framework/compare/1.1.2...v1.1.3) (2017-07-11) diff --git a/doc/api.json b/doc/api.json index cf4759ce..db34f6b7 100644 --- a/doc/api.json +++ b/doc/api.json @@ -1 +1 @@ -{"name":"aurelia-framework","children":[{"id":2,"name":"Aurelia","kind":128,"kindString":"Class","flags":{"isExported":true},"comment":{"shortText":"The framework core that provides the main Aurelia object."},"children":[{"id":8,"name":"constructor","kind":512,"kindString":"Constructor","flags":{"isExported":true},"comment":{"shortText":"Creates an instance of Aurelia."},"signatures":[{"id":9,"name":"new Aurelia","kind":16384,"kindString":"Constructor signature","flags":{},"comment":{"shortText":"Creates an instance of Aurelia."},"parameters":[{"id":10,"name":"loader","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"shortText":"The loader for this Aurelia instance to use. If a loader is not specified, Aurelia will use the loader type specified by PLATFORM.Loader."},"type":{"type":"reference","name":"Loader"}},{"id":11,"name":"container","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"shortText":"The dependency injection container for this Aurelia instance to use. If a container is not specified, Aurelia will create an empty, global container."},"type":{"type":"reference","name":"Container"}},{"id":12,"name":"resources","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"shortText":"The resource registry for this Aurelia instance to use. If a resource registry is not specified, Aurelia will create an empty registry.\n"},"type":{"type":"reference","name":"ViewResources"}}],"type":{"type":"reference","name":"Aurelia","id":2}}]},{"id":5,"name":"container","kind":1024,"kindString":"Property","flags":{"isExported":true},"comment":{"shortText":"The root DI container used by the application."},"type":{"type":"reference","name":"Container"}},{"id":3,"name":"host","kind":1024,"kindString":"Property","flags":{"isExported":true},"comment":{"shortText":"The DOM Element that Aurelia will attach to."},"type":{"type":"reference","name":"Element"}},{"id":4,"name":"loader","kind":1024,"kindString":"Property","flags":{"isExported":true},"comment":{"shortText":"/**\nThe loader used by the application."},"type":{"type":"reference","name":"Loader"}},{"id":6,"name":"resources","kind":1024,"kindString":"Property","flags":{"isExported":true},"comment":{"shortText":"The global view resources used by the application."},"type":{"type":"reference","name":"ViewResources"}},{"id":7,"name":"use","kind":1024,"kindString":"Property","flags":{"isExported":true},"comment":{"shortText":"The configuration used during application startup."},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}},{"id":15,"name":"enhance","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":16,"name":"enhance","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Enhances the host's existing elements with behaviors and bindings.","returns":"Returns a Promise for the current Aurelia instance.\n"},"parameters":[{"id":17,"name":"bindingContext","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"A binding context for the enhanced elements."},"type":{"type":"reference","name":"Object"}},{"id":18,"name":"applicationHost","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The DOM object that Aurelia will enhance."},"type":{"type":"union","types":[{"type":"instrinct","name":"string"},{"type":"reference","name":"Element"}]}}],"type":{"type":"reference","name":"Promise","typeArguments":[{"type":"reference","name":"Aurelia","id":2}]}}]},{"id":19,"name":"setRoot","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":20,"name":"setRoot","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Instantiates the root component and adds it to the DOM.","returns":"Returns a Promise of the current Aurelia instance.\n"},"parameters":[{"id":21,"name":"root","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The root component to load upon bootstrap."},"type":{"type":"instrinct","name":"string"}},{"id":22,"name":"applicationHost","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The DOM object that Aurelia will attach to."},"type":{"type":"union","types":[{"type":"instrinct","name":"string"},{"type":"reference","name":"Element"}]}}],"type":{"type":"reference","name":"Promise","typeArguments":[{"type":"reference","name":"Aurelia","id":2}]}}]},{"id":13,"name":"start","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":14,"name":"start","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Loads plugins, then resources, and then starts the Aurelia instance.","returns":"Returns a Promise with the started Aurelia instance.\n"},"type":{"type":"reference","name":"Promise","typeArguments":[{"type":"reference","name":"Aurelia","id":2}]}}]}],"groups":[{"title":"Constructors","kind":512,"children":[8]},{"title":"Properties","kind":1024,"children":[5,3,4,6,7]},{"title":"Methods","kind":2048,"children":[15,19,13]}]},{"id":23,"name":"FrameworkConfiguration","kind":128,"kindString":"Class","flags":{"isExported":true},"comment":{"shortText":"Manages configuring the aurelia framework instance."},"children":[{"id":26,"name":"constructor","kind":512,"kindString":"Constructor","flags":{"isExported":true},"comment":{"shortText":"Creates an instance of FrameworkConfiguration."},"signatures":[{"id":27,"name":"new FrameworkConfiguration","kind":16384,"kindString":"Constructor signature","flags":{},"comment":{"shortText":"Creates an instance of FrameworkConfiguration."},"parameters":[{"id":28,"name":"aurelia","kind":32768,"kindString":"Parameter","flags":{},"comment":{"shortText":"An instance of Aurelia.\n"},"type":{"type":"reference","name":"Aurelia","id":2}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":25,"name":"aurelia","kind":1024,"kindString":"Property","flags":{"isExported":true},"comment":{"shortText":"The aurelia instance."},"type":{"type":"reference","name":"Aurelia","id":2}},{"id":24,"name":"container","kind":1024,"kindString":"Property","flags":{"isExported":true},"comment":{"shortText":"The root DI container used by the application."},"type":{"type":"reference","name":"Container"}},{"id":78,"name":"apply","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":79,"name":"apply","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Loads and configures the plugins registered with this instance.","returns":"Returns a promise which resolves when all plugins are loaded and configured.\n"},"type":{"type":"reference","name":"Promise","typeArguments":[{"type":"instrinct","name":"void"}]}}]},{"id":72,"name":"basicConfiguration","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":73,"name":"basicConfiguration","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Sets up a basic Aurelia configuration. This is equivalent to calling `.defaultBindingLanguage().defaultResources().eventAggregator();`","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":62,"name":"defaultBindingLanguage","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":63,"name":"defaultBindingLanguage","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Plugs in the default binding language from aurelia-templating-binding.","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":68,"name":"defaultResources","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":69,"name":"defaultResources","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Plugs in the default templating resources (if, repeat, show, compose, etc.) from aurelia-templating-resources.","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":76,"name":"developmentLogging","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":77,"name":"developmentLogging","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Plugs in the ConsoleAppender and sets the log level to debug.","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":70,"name":"eventAggregator","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":71,"name":"eventAggregator","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Plugs in the event aggregator from aurelia-event-aggregator.","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":47,"name":"feature","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":48,"name":"feature","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Configures an internal feature plugin before Aurelia starts.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":49,"name":"plugin","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The folder for the internal plugin to configure (expects an index.js in that folder)."},"type":{"type":"instrinct","name":"string"}},{"id":50,"name":"config","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The configuration for the specified plugin."},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":54,"name":"globalName","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":55,"name":"globalName","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Renames a global resource that was imported.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":56,"name":"resourcePath","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The path to the resource."},"type":{"type":"instrinct","name":"string"}},{"id":57,"name":"newName","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The new name."},"type":{"type":"instrinct","name":"string"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":51,"name":"globalResources","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":52,"name":"globalResources","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Adds globally available view resources to be imported into the Aurelia framework.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":53,"name":"resources","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The relative module id to the resource. (Relative to the plugin's installer.)"},"type":{"type":"union","types":[{"type":"instrinct","name":"string"},{"type":"instrinct","isArray":true,"name":"string"}]}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":66,"name":"history","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":67,"name":"history","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Plugs in the default history implementation from aurelia-history-browser.","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":29,"name":"instance","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":30,"name":"instance","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Adds an existing object to the framework's dependency injection container.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":31,"name":"type","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The object type of the dependency that the framework will inject."},"type":{"type":"instrinct","name":"any"}},{"id":32,"name":"instance","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The existing instance of the dependency that the framework will inject."},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":58,"name":"plugin","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":59,"name":"plugin","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Configures an external, 3rd party plugin before Aurelia starts.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":60,"name":"plugin","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The ID of the 3rd party plugin to configure."},"type":{"type":"instrinct","name":"string"}},{"id":61,"name":"config","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The configuration for the specified plugin."},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":44,"name":"postTask","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":45,"name":"postTask","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Adds an async function that runs after the plugins are run.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":46,"name":"task","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The function to run after start."},"type":{"type":"reference","name":"Function"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":41,"name":"preTask","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":42,"name":"preTask","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Adds an async function that runs before the plugins are run.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":43,"name":"task","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The function to run before start."},"type":{"type":"reference","name":"Function"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":64,"name":"router","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":65,"name":"router","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Plugs in the router from aurelia-templating-router.","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":33,"name":"singleton","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":34,"name":"singleton","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Adds a singleton to the framework's dependency injection container.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":35,"name":"type","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The object type of the dependency that the framework will inject."},"type":{"type":"instrinct","name":"any"}},{"id":36,"name":"implementation","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The constructor function of the dependency that the framework will inject."},"type":{"type":"reference","name":"Function"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":74,"name":"standardConfiguration","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":75,"name":"standardConfiguration","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Sets up the standard Aurelia configuration. This is equivalent to calling `.defaultBindingLanguage().defaultResources().eventAggregator().history().router();`","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]},{"id":37,"name":"transient","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":38,"name":"transient","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Adds a transient to the framework's dependency injection container.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":39,"name":"type","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The object type of the dependency that the framework will inject."},"type":{"type":"instrinct","name":"any"}},{"id":40,"name":"implementation","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The constructor function of the dependency that the framework will inject."},"type":{"type":"reference","name":"Function"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}]}],"groups":[{"title":"Constructors","kind":512,"children":[26]},{"title":"Properties","kind":1024,"children":[25,24]},{"title":"Methods","kind":2048,"children":[78,72,62,68,76,70,47,54,51,66,29,58,44,41,64,33,74,37]}]}],"groups":[{"title":"Classes","kind":128,"children":[2,23]}]} \ No newline at end of file +{"name":"aurelia-framework","children":[{"id":2,"name":"Aurelia","kind":128,"kindString":"Class","flags":{"isExported":true},"comment":{"shortText":"The framework core that provides the main Aurelia object."},"children":[{"id":8,"name":"constructor","kind":512,"kindString":"Constructor","flags":{"isExported":true},"comment":{"shortText":"Creates an instance of Aurelia."},"signatures":[{"id":9,"name":"new Aurelia","kind":16384,"kindString":"Constructor signature","flags":{},"comment":{"shortText":"Creates an instance of Aurelia."},"parameters":[{"id":10,"name":"loader","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"shortText":"The loader for this Aurelia instance to use. If a loader is not specified, Aurelia will use the loader type specified by PLATFORM.Loader."},"type":{"type":"reference","name":"Loader"}},{"id":11,"name":"container","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"shortText":"The dependency injection container for this Aurelia instance to use. If a container is not specified, Aurelia will create an empty, global container."},"type":{"type":"reference","name":"Container"}},{"id":12,"name":"resources","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"shortText":"The resource registry for this Aurelia instance to use. If a resource registry is not specified, Aurelia will create an empty registry.\n"},"type":{"type":"reference","name":"ViewResources"}}],"type":{"type":"reference","name":"Aurelia","id":2}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":54,"character":30}]},{"id":5,"name":"container","kind":1024,"kindString":"Property","flags":{"isExported":true},"comment":{"shortText":"The root DI container used by the application."},"sources":[{"fileName":"aurelia-framework.d.ts","line":44,"character":11}],"type":{"type":"reference","name":"Container"}},{"id":3,"name":"host","kind":1024,"kindString":"Property","flags":{"isExported":true},"comment":{"shortText":"The DOM Element that Aurelia will attach to."},"sources":[{"fileName":"aurelia-framework.d.ts","line":33,"character":6}],"type":{"type":"reference","name":"Element"}},{"id":4,"name":"loader","kind":1024,"kindString":"Property","flags":{"isExported":true},"comment":{"shortText":"/**\nThe loader used by the application."},"sources":[{"fileName":"aurelia-framework.d.ts","line":39,"character":8}],"type":{"type":"reference","name":"Loader"}},{"id":6,"name":"resources","kind":1024,"kindString":"Property","flags":{"isExported":true},"comment":{"shortText":"The global view resources used by the application."},"sources":[{"fileName":"aurelia-framework.d.ts","line":49,"character":11}],"type":{"type":"reference","name":"ViewResources"}},{"id":7,"name":"use","kind":1024,"kindString":"Property","flags":{"isExported":true},"comment":{"shortText":"The configuration used during application startup."},"sources":[{"fileName":"aurelia-framework.d.ts","line":54,"character":5}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}},{"id":15,"name":"enhance","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":16,"name":"enhance","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Enhances the host's existing elements with behaviors and bindings.","returns":"Returns a Promise for the current Aurelia instance.\n"},"parameters":[{"id":17,"name":"bindingContext","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"A binding context for the enhanced elements."},"type":{"type":"reference","name":"Object"}},{"id":18,"name":"applicationHost","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The DOM object that Aurelia will enhance."},"type":{"type":"union","types":[{"type":"intrinsic","name":"string"},{"type":"reference","name":"Element"}]}}],"type":{"type":"reference","name":"Promise","typeArguments":[{"type":"reference","name":"Aurelia","id":2}]}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":76,"character":9}]},{"id":19,"name":"setRoot","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":20,"name":"setRoot","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Instantiates the root component and adds it to the DOM.","returns":"Returns a Promise of the current Aurelia instance.\n"},"parameters":[{"id":21,"name":"root","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The root component to load upon bootstrap."},"type":{"type":"intrinsic","name":"string"}},{"id":22,"name":"applicationHost","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The DOM object that Aurelia will attach to."},"type":{"type":"union","types":[{"type":"intrinsic","name":"string"},{"type":"reference","name":"Element"}]}}],"type":{"type":"reference","name":"Promise","typeArguments":[{"type":"reference","name":"Aurelia","id":2}]}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":84,"character":9}]},{"id":13,"name":"start","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":14,"name":"start","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Loads plugins, then resources, and then starts the Aurelia instance.","returns":"Returns a Promise with the started Aurelia instance.\n"},"type":{"type":"reference","name":"Promise","typeArguments":[{"type":"reference","name":"Aurelia","id":2}]}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":68,"character":7}]}],"groups":[{"title":"Constructors","kind":512,"children":[8]},{"title":"Properties","kind":1024,"children":[5,3,4,6,7]},{"title":"Methods","kind":2048,"children":[15,19,13]}],"sources":[{"fileName":"aurelia-framework.d.ts","line":28,"character":28}]},{"id":23,"name":"FrameworkConfiguration","kind":128,"kindString":"Class","flags":{"isExported":true},"comment":{"shortText":"Manages configuring the aurelia framework instance."},"children":[{"id":26,"name":"constructor","kind":512,"kindString":"Constructor","flags":{"isExported":true},"comment":{"shortText":"Creates an instance of FrameworkConfiguration."},"signatures":[{"id":27,"name":"new FrameworkConfiguration","kind":16384,"kindString":"Constructor signature","flags":{},"comment":{"shortText":"Creates an instance of FrameworkConfiguration."},"parameters":[{"id":28,"name":"aurelia","kind":32768,"kindString":"Parameter","flags":{},"comment":{"shortText":"An instance of Aurelia.\n"},"type":{"type":"reference","name":"Aurelia","id":2}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":100,"character":19}]},{"id":25,"name":"aurelia","kind":1024,"kindString":"Property","flags":{"isExported":true},"comment":{"shortText":"The aurelia instance."},"sources":[{"fileName":"aurelia-framework.d.ts","line":100,"character":9}],"type":{"type":"reference","name":"Aurelia","id":2}},{"id":24,"name":"container","kind":1024,"kindString":"Property","flags":{"isExported":true},"comment":{"shortText":"The root DI container used by the application."},"sources":[{"fileName":"aurelia-framework.d.ts","line":95,"character":11}],"type":{"type":"reference","name":"Container"}},{"id":79,"name":"apply","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":80,"name":"apply","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Loads and configures the plugins registered with this instance.","returns":"Returns a promise which resolves when all plugins are loaded and configured.\n"},"type":{"type":"reference","name":"Promise","typeArguments":[{"type":"intrinsic","name":"void"}]}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":237,"character":7}]},{"id":72,"name":"basicConfiguration","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":73,"name":"basicConfiguration","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Sets up a basic Aurelia configuration. This is equivalent to calling `.defaultBindingLanguage().defaultResources().eventAggregator();`","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":218,"character":20}]},{"id":62,"name":"defaultBindingLanguage","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":63,"name":"defaultBindingLanguage","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Plugs in the default binding language from aurelia-templating-binding.","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":188,"character":24}]},{"id":68,"name":"defaultResources","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":69,"name":"defaultResources","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Plugs in the default templating resources (if, repeat, show, compose, etc.) from aurelia-templating-resources.","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":206,"character":18}]},{"id":76,"name":"developmentLogging","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":77,"name":"developmentLogging","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Plugs in the ConsoleAppender and sets the log level to debug.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":78,"name":"level","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The log level (none/error/warn/info/debug), default to 'debug'."},"type":{"type":"reference","name":"String"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":231,"character":20}]},{"id":70,"name":"eventAggregator","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":71,"name":"eventAggregator","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Plugs in the event aggregator from aurelia-event-aggregator.","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":212,"character":17}]},{"id":47,"name":"feature","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":48,"name":"feature","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Configures an internal feature plugin before Aurelia starts.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":49,"name":"plugin","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The folder for the internal plugin to configure (expects an index.js in that folder)."},"type":{"type":"intrinsic","name":"string"}},{"id":50,"name":"config","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The configuration for the specified plugin."},"type":{"type":"intrinsic","name":"any"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":152,"character":9}]},{"id":54,"name":"globalName","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":55,"name":"globalName","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Renames a global resource that was imported.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":56,"name":"resourcePath","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The path to the resource."},"type":{"type":"intrinsic","name":"string"}},{"id":57,"name":"newName","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The new name."},"type":{"type":"intrinsic","name":"string"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":167,"character":12}]},{"id":51,"name":"globalResources","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":52,"name":"globalResources","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Adds globally available view resources to be imported into the Aurelia framework.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":53,"name":"resources","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The relative module id to the resource. (Relative to the plugin's installer.)"},"type":{"type":"union","types":[{"type":"intrinsic","name":"string"},{"type":"array","elementType":{"type":"intrinsic","name":"string"}}]}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":159,"character":17}]},{"id":66,"name":"history","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":67,"name":"history","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Plugs in the default history implementation from aurelia-history-browser.","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":200,"character":9}]},{"id":29,"name":"instance","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":30,"name":"instance","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Adds an existing object to the framework's dependency injection container.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":31,"name":"type","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The object type of the dependency that the framework will inject."},"type":{"type":"intrinsic","name":"any"}},{"id":32,"name":"instance","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The existing instance of the dependency that the framework will inject."},"type":{"type":"intrinsic","name":"any"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":114,"character":10}]},{"id":58,"name":"plugin","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":59,"name":"plugin","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Configures an external, 3rd party plugin before Aurelia starts.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":60,"name":"plugin","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The ID of the 3rd party plugin to configure."},"type":{"type":"intrinsic","name":"string"}},{"id":61,"name":"config","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The configuration for the specified plugin."},"type":{"type":"intrinsic","name":"any"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":175,"character":8}]},{"id":44,"name":"postTask","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":45,"name":"postTask","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Adds an async function that runs after the plugins are run.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":46,"name":"task","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The function to run after start."},"type":{"type":"reference","name":"Function"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":144,"character":10}]},{"id":41,"name":"preTask","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":42,"name":"preTask","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Adds an async function that runs before the plugins are run.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":43,"name":"task","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The function to run before start."},"type":{"type":"reference","name":"Function"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":137,"character":9}]},{"id":64,"name":"router","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":65,"name":"router","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Plugs in the router from aurelia-templating-router.","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":194,"character":8}]},{"id":33,"name":"singleton","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":34,"name":"singleton","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Adds a singleton to the framework's dependency injection container.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":35,"name":"type","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The object type of the dependency that the framework will inject."},"type":{"type":"intrinsic","name":"any"}},{"id":36,"name":"implementation","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The constructor function of the dependency that the framework will inject."},"type":{"type":"reference","name":"Function"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":122,"character":11}]},{"id":74,"name":"standardConfiguration","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":75,"name":"standardConfiguration","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Sets up the standard Aurelia configuration. This is equivalent to calling `.defaultBindingLanguage().defaultResources().eventAggregator().history().router();`","returns":"Returns the current FrameworkConfiguration instance.\n"},"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":224,"character":23}]},{"id":37,"name":"transient","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":38,"name":"transient","kind":4096,"kindString":"Call signature","flags":{},"comment":{"shortText":"Adds a transient to the framework's dependency injection container.","returns":"Returns the current FrameworkConfiguration instance.\n"},"parameters":[{"id":39,"name":"type","kind":32768,"kindString":"Parameter","flags":{},"comment":{"text":"The object type of the dependency that the framework will inject."},"type":{"type":"intrinsic","name":"any"}},{"id":40,"name":"implementation","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"comment":{"text":"The constructor function of the dependency that the framework will inject."},"type":{"type":"reference","name":"Function"}}],"type":{"type":"reference","name":"FrameworkConfiguration","id":23}}],"sources":[{"fileName":"aurelia-framework.d.ts","line":130,"character":11}]}],"groups":[{"title":"Constructors","kind":512,"children":[26]},{"title":"Properties","kind":1024,"children":[25,24]},{"title":"Methods","kind":2048,"children":[79,72,62,68,76,70,47,54,51,66,29,58,44,41,64,33,74,37]}],"sources":[{"fileName":"aurelia-framework.d.ts","line":90,"character":43}]},{"id":81,"name":"LogManager","kind":32,"kindString":"Variable","flags":{"isExported":true,"isConst":true},"comment":{"shortText":"The log manager."},"sources":[{"fileName":"aurelia-framework.d.ts","line":249,"character":23}],"type":{"type":"reference","name":"\"/Users/EisenbergEffect/Documents/GitHub/aurelia/framework/node_modules/aurelia-logging/dist/aurelia-logging\""}}],"groups":[{"title":"Classes","kind":128,"children":[2,23]},{"title":"Variables","kind":32,"children":[81]}]} \ No newline at end of file diff --git a/doc/article/drafts/Aurelia Project Structure.md.md b/doc/article/drafts/Aurelia Project Structure.md similarity index 100% rename from doc/article/drafts/Aurelia Project Structure.md.md rename to doc/article/drafts/Aurelia Project Structure.md diff --git a/doc/article/en-US/app-configuration-and-startup.md b/doc/article/en-US/app-configuration-and-startup.md index 205f4714..891ad0ec 100644 --- a/doc/article/en-US/app-configuration-and-startup.md +++ b/doc/article/en-US/app-configuration-and-startup.md @@ -1,19 +1,9 @@ --- -{ - "name": "App Configuration and Startup", - "culture": "en-US", - "description": "In this article you'll learn the various ways to bootstrap and configure Aurelia, along with different mechanisms for controlling the initial render strategy.", - "engines" : { "aurelia-doc" : "^1.0.0" }, - "author": { - "name": "Rob Eisenberg", - "url": "http://robeisenberg.com" - }, - "contributors": [], - "translators": [], - "keywords": ["Framework", "Configuration", "Startup"] -} +name: App Configuration and Startup +description: In this article you'll learn the various ways to bootstrap and configure Aurelia, along with different mechanisms for controlling the initial render strategy. +author: Rob Eisenberg (http://robeisenberg.com) --- -## [Bootstrapping Aurelia](aurelia-doc://section/1/version/1.0.0) +## Bootstrapping Aurelia Most platforms have a "main" or entry point for code execution. Aurelia is no different. If you've read the Quick Start, then you've seen the `aurelia-app` attribute. Simply place this on an HTML element and Aurelia's bootstrapper will load an _app${context.language.fileExtension}_ and _app.html_, databind them together and inject them into the DOM element on which you placed that attribute. @@ -44,6 +34,9 @@ Often times you want to configure the framework or run some code prior to displa So, if you want to keep all the default settings, it's really easy. Just call `standardConfiguration()` to configure the standard set of plugins. Then call `developmentLogging()` to turn on logging in debug mode, output to the `console`. +> Warning +> Some Aurelia modules will not behave correctly if they are imported before the Aurelia Platform Abstraction Layer (PAL) is initialized, which happens during `aurelia.start()`. If you need these modules in your configuration module, you need to initialize the PAL yourself before the file is loaded. [This Github issue](https://github.com/aurelia/pal-browser/issues/17) describes how you can manually initialize the PAL before starting the bootstrapping process. + The `use` property on the `aurelia` instance is an instance of `FrameworkConfiguration`. It has many helper methods for configuring Aurelia. For example, if you wanted to manually configure all the standard plugins without using the `standardConfiguration()` helper method to do so and you wanted to configure logging without using the helper method for that, this is how you would utilize the `FrameworkConfiguration` instance: @@ -114,7 +107,7 @@ You can see that this code configures the default data-binding language (.bind, Once you've configured the framework, you need to start things up by calling `aurelia.start()`. This API returns a promise. Once it's resolved, the framework is ready, including all plugins, and it is now safe to interact with the services and begin rendering. -## [Rendering the Root Component](aurelia-doc://section/2/version/1.0.0) +## Rendering the Root Component The root component is set by calling `aurelia.setRoot()`. If no values are provided, this defaults to treating the element with the `aurelia-app` attribute as the DOM host for your app and `app${context.language.fileExtension}`/`app.html` as the source for the root component. However, you can specify whatever you want, just like this: @@ -143,18 +136,19 @@ The root component is set by calling `aurelia.setRoot()`. If no values are provi This causes the `my-root${context.language.fileExtension}`/`my-root.html` to be loaded as the root component and injected into the `some-element` HTML element. -> Note: The content of the app host element, the one marked with `aurelia-app` or passed to `Aurelia.prototype.setRoot`, will be replaced when `Aurelia.prototype.setRoot` completes. +> Info +> The content of the app host element, the one marked with `aurelia-app` or passed to `Aurelia.prototype.setRoot`, will be replaced when `Aurelia.prototype.setRoot` completes. > Warning: When using the `` element as the app host, bear in mind that any content added prior to the completion of `Aurelia.prototype.setRoot` will be removed. -## [Bootstrapping Older Browsers](aurelia-doc://section/3/version/1.0.0) +## Bootstrapping Older Browsers Aurelia was originally designed for Evergreen Browsers. This includes Chrome, Firefox, IE11 and Safari 8. However, we also support IE9 and above through the use of additional polyfills. To support these earlier browsers, you need the [requestAnimationFrame Polyfill](https://www.npmjs.com/package/raf) and the [MutationObserver polyfill](https://github.com/megawac/MutationObserver.js). Once you have installed these (via `npm install --save-dev raf mutationobserver-shim`), you'll need to adjust your code to load them before Aurelia is initialized. In case you are using Webpack, create a file, e.g. `ie-polyfill.js`: - + import 'mutationobserver-shim/MutationObserver'; // IE10 MutationObserver polyfill import 'raf/polyfill'; // IE9 requestAnimationFrame polyfill @@ -163,13 +157,12 @@ In case you are using Webpack, create a file, e.g. `ie-polyfill.js`: After you have created the file, add it as the first file in your `aurelia-bootstrapper` bundle. You can find bundle configuration in the `webpack.config.js` file, something like: - + entry: { 'app': ['./ie-polyfill', 'aurelia-bootstrapper'], - If you are using JSPM change your `index.html` startup code as follows: @@ -196,13 +189,13 @@ If you are using JSPM change your `index.html` startup code as follows: -> Note: Module Loaders and Bundlers +> Info: Module Loaders and Bundlers > The code in this article demonstrates loading via SystemJS. However, these techniques can be accomplished with other module loaders just as readily. Be sure to lookup the appropriate APIs for your chosen loader or bundler in order to translate these samples into the required code for your own app. > Warning: Promises in Edge > Currently, the Edge browser has a serious performance problem with its Promise implementation. This deficiency can greatly increase startup time of your app. If you are targeting the Edge browser, it is highly recommended that you use the [bluebird promise](http://bluebirdjs.com/docs/getting-started.html) library to replace Edge's native implementation. You can do this by simply referencing the library prior to loading other libraries. -## [Manual Bootstrapping](aurelia-doc://section/4/version/1.0.0) +## Manual Bootstrapping So far, we've been bootstrapping our app declaratively by using the `aurelia-app` attribute. That's not the only way though. You can manually bootstrap the framework as well. In case of JSPM, here's how you would change your HTML file to use manual bootstrapping: @@ -265,7 +258,7 @@ In case you use Webpack, you can replace the `aurelia-bootstrapper-webpack` pack The function you pass to the `bootstrap` method is the same as the `configure` function from the examples above. -## [Making Resources Global](aurelia-doc://section/5/version/1.0.0) +## Making Resources Global When you create a view in Aurelia, it is completely encapsulated. In the same way that you must `import` modules into an ES2015/TypeScript module, you must also import or `require` components into an Aurelia view. However, certain components are used so frequently across views that it can become very tedious to import them over and over again. To solve this problem, Aurelia lets you explicitly declare certain "view resources" as global. In fact, the configuration helper method `defaultResources()` mentioned above does just that. It takes the default set of view resources, such as `repeat`, `if`, `compose`, etc, and makes them globally usable in every view. You can do the same with your own components. Here's how we could make the `my-component` custom element, located in a _resources_ subfolder of your project, globally available in all views. @@ -294,7 +287,7 @@ When you create a view in Aurelia, it is completely encapsulated. In the same wa -## [Organizing Your App with Features](aurelia-doc://section/6/version/1.0.0) +## Organizing Your App with Features Sometimes you have whole group of components or related functionality that collectively form a "feature". This "feature" may even be owned by a particular set of developers on your team. You want these developers to be able to manage the configuration and resources of their own feature, without interfering with the other parts of the app. For this scenario, Aurelia provides the "feature" feature. @@ -346,7 +339,10 @@ How then do we turn this feature on in our app? Here's an app configuration file -## [Installing Plugins](aurelia-doc://section/7/version/1.0.0) +> Info: Features with Webpack +> When using Webpack, the syntax for enabling a feature is a little different. Instead of calling `.feature('my-feature');`, you will want to use the `PLATFORM.moduleName(...)` helper that allows the Aurelia Webpack plugin to understand dynamic module references. In this case, your syntax will look like `.feature(PLATFORM.moduleName('my-feature/index'));` Notice that in addition to the use of the `PLATFORM.moduleName(...)` helper, the index file must be directly referenced. + +## Installing Plugins Similar to features, you can install 3rd party plugins. The main difference is that a "feature" is provided internally by your application, while a plugin is installed from a 3rd party source through your package manager. @@ -377,9 +373,46 @@ To use a plugin, you first install the package. For example `jspm install my-plu -Simply provide the same name used during installation, to the plugin API. Some plugins may require configuration (see the plugin's documentation for details). If so, pass the configuration object or configuration callback function as the second parameter of the `plugin` API. +Simply provide the same name used during installation to the plugin API. Some plugins may require configuration (see the plugin's documentation for details). If so, pass the configuration object or configuration callback function as the second parameter of the `plugin` API. + +While all plugins work in a similar manner, consider the real-world example of adding and configuring the dialog plugin by using a configuration callback. The configuration parameter in this case is a type of `DialogConfiguration` and the above code would become: + + + + export function configure(aurelia) {s + aurelia.use + .standardConfiguration() + .developmentLogging() + .plugin('aurelia-dialog', config => { + config.useDefaults(); + config.settings.lock = true; + config.settings.centerHorizontalOnly = false; + config.settings.startingZIndex = 5; + config.settings.keyboard = true; + }); + + aurelia.start().then(() => aurelia.setRoot()); + } + + + export function configure(aurelia: Aurelia): void { + aurelia.use + .standardConfiguration() + .developmentLogging() + .plugin('aurelia-dialog', config => { + config.useDefaults(); + config.settings.lock = true; + config.settings.centerHorizontalOnly = false; + config.settings.startingZIndex = 5; + config.settings.keyboard = true; + }); + + aurelia.start().then(() => aurelia.setRoot()); + } + + -## [Leveraging Progressive Enhancement](aurelia-doc://section/8/version/1.0.0) +## Leveraging Progressive Enhancement So far you've seen Aurelia replacing a portion of the DOM with a root component. However, that's not the only way to render with Aurelia. Aurelia can also progressively enhance existing HTML. @@ -508,7 +541,7 @@ You can't use the `aurelia.enhance` method multiple times because it was not des -## [Customizing Conventions](aurelia-doc://section/9/version/1.0.0) +## Customizing Conventions There are many things you may want to customize or configure as part of your application's bootstrap process. Once you have your main `configure` method in place and `aurelia-app` is pointing to that module, you can do just about anything you want. One of the most common aspects of Aurelia that developers may want to customize, is its conventions. @@ -632,7 +665,7 @@ In addition to customizing the mapping logic of the `ConventionalViewStrategy` y -## [Logging](aurelia-doc://section/10/version/1.0.0) +## Logging Aurelia has a simple logging abstraction that the framework itself uses. By default it is a no-op. The configuration in the above examples shows how to install an appender which will take the log data and output it to the console. Here's the code again, for convenience: diff --git a/doc/article/en-US/bundling-jspm.md b/doc/article/en-US/bundling-jspm.md index 78abff28..76de4aaf 100755 --- a/doc/article/en-US/bundling-jspm.md +++ b/doc/article/en-US/bundling-jspm.md @@ -1,19 +1,9 @@ --- -{ - "name": "Bundling with JSPM", - "culture": "en-US", - "description": "Before deploying your app to production, you'll want to bundle the assets for efficient use of the network.", - "engines" : { "aurelia-doc" : "^1.0.0" }, - "author": { - "name": "Shuhel Ahmed", - "url": "https://github.com/ahmedshuhel" - }, - "contributors": [], - "translators": [], - "keywords": ["Deploy", "Bundling"] -} +name: Bundling with JSPM +description: Before deploying your app to production, you'll want to bundle the assets for efficient use of the network. +author: Shuhel Ahmed (https://github.com/ahmedshuhel) --- -## [Introduction](aurelia-doc://section/1/version/1.0.0) +## Introduction Most of the current major browsers limit the number of simultaneous connections per hostname to six. This means that while six requests are being processed, additional requests for assets on a host will be queued by the browser. In the image below, the Chrome F12 developer tools network tab shows the timing for assets required by the `welcome view` of the skeleton-navigation application. @@ -25,7 +15,7 @@ In the past, the most common browser limit has been 2 connections. This may have You may wonder: If this limit can have such a great impact on performance, then why don't browsers give us a higher limit? Most well-known browsers choose not to grant this wish in order to prevent the server from being overloaded by a small number of browsers. Such activity would be similar in nature to a DDOS attack. -## [Bundling & Minification](aurelia-doc://section/2/version/1.0.0) +## Bundling & Minification This connection limit will not cause slowness in our application if we can manage resources well enough to avoid it. When the page is first loaded, this is the initial request that returns HTML content. When the browser processes the HTML content, it spawns more requests to load resources like JS, CSS and images. It also executes JavaScript and sends AJAX requests to the server. @@ -33,13 +23,13 @@ To make this process efficient, we need to compress the assets and make fewer (p Bundling along with minification are techniques that can also be used to improve load time. Bundling and minification improve load time by reducing the number of requests to the server as well as reducing the size of requested assets such as views, view-models and CSS. -## [Bundling an Aurelia JSPM Application](aurelia-doc://section/3/version/1.0.0) +## Bundling an Aurelia JSPM Application We can use [Aurelia Bundler](http://github.com/aurelia/bundler) to create a gulp task for bundling our JSPM app. Let's jump right into it. We will use the `skeleton-navigation` as our app to bundle. If you don't have that set up. Follow [these steps](https://github.com/aurelia/skeleton-navigation#running-the-app). Now that we have our app running, let's start by installing `aurelia-bundler`. To do so `cd` into `skeleton-navigation` and run the following command: -```shell +```Shell npm install aurelia-bundler --save-dev ``` @@ -47,7 +37,6 @@ Now, let's create a `bundle.js` file in `build/tasks/bundle.js` as follows: - var gulp = require('gulp'); var bundle = require('aurelia-bundler').bundle; @@ -101,7 +90,7 @@ Now, let's create a `bundle.js` file in `build/tasks/bundle.js` as follows: With that file in place, let's run the command below: -```shell +```Shell gulp bundle ``` @@ -117,19 +106,18 @@ Now, if we refresh/reload the app from the browser, we will see much less networ Just 9 requests tells the story. We have also managed to minimize the size from 1.2MB to just 773KB here. -## [Multiple Bundles](aurelia-doc://section/4/version/1.0.0) +## Multiple Bundles We can create as many bundles as we want. Here we have created two: one for our application code and another for Aurelia and third-party libraries. We can create just a single bundle, if we want, that combines both application code and third-party libraries. The number of bundles we would like to have mostly depends on our application structure and the usage patterns of our app. For example, if our app was built in a modular fashion, such that it is a collection of child-app/sections, then a `common` bundle for third-party libraries and a `bundle per section` makes much more sense and performs better than a huge single bundle that needs to be loaded up front. -## [Bundling a JSPM v0.17 App](aurelia-doc://section/5/version/1.0.0) +## Bundling a JSPM v0.17 App In a JSPM v0.17 style app, we have two separate config files: `jspm.browser.js` and `jspm.config.js`. In such case the `configPath` in the bundle config should look like: `configPath: ['./jspm.browser.js', './jspm.config.js']`. We also have to add another `injectionConfigPath` to indicate which config file should host the bundle and depCache injection. Here is a typical bundle configuration for a `JSPM v0.17` app. - var config = { force: true, baseURL: '.', // baseURL of the application @@ -155,7 +143,7 @@ In a JSPM v0.17 style app, we have two separate config files: `jspm.browser.js` -## [Duplicate Modules in Multiple Bundles](aurelia-doc://section/6/version/1.0.0) +## Duplicate Modules in Multiple Bundles Creating multiple bundles requires us to be extra careful because multiple bundles may contain duplicate modules. Before explaining that, we need to understand how bundling works behind the scenes a bit. Let's consider the example modules `A` and `B` below: @@ -240,7 +228,7 @@ Our goal is to create a bundle of our application code only. We have to somehow `[*.js]` will exclude the dependencies of each module that the glob pattern `*.js` yields. In the above case it will exclude `aurelia-framework`, `aurelia-fetch-client` and so on. -## [Bundle Configuration](aurelia-doc://section/7/version/1.0.0) +## Bundle Configuration Here is a typical bundle configuration in all its glory: @@ -289,17 +277,17 @@ Here is a typical bundle configuration in all its glory: - **force** : If this is set to `true` the task will overwrite any existing file/bundle with the same name. Set it to false if you are not sure about it. - **packagePath** : By default it is `'.'`, You can change this if your `package.json` file is somewhere else other than the base of your app. `aurelia-bundler` uses this file to find `config.js`, `baseURL`, the `jspm_packages` folder and other important project configuration. -## [Bundling HTML Imports](aurelia-doc://section/8/version/1.0.0) +## Bundling HTML Imports At this point, if you are thinking: "Well, this is all good but we have already developed an application that uses Polymer and `HTML Imports` extensively. We want to bundle them as well." As you may already know, we have created a separate plugin [aurelia-html-import-template-loader](https://github.com/aurelia/html-import-template-loader) exclusively for this use case. We have bundling support for that too. This is how we can do it. It's actually a two part process. First let's install the `aurelia-html-import-template-loader` plugin with the command below: -```shell +```Shell jspm install aurelia-html-import-template-loader ``` Now, let's open `src/main.js` and add this line: -```javascript +```JavaScript aurelia.use.plugin('aurelia-html-import-template-loader') ``` @@ -325,7 +313,6 @@ With this little change Aurelia Loader will now use `HTML Imports` to load all t - "dist/view-bundle": { htmlimports: true, includes: 'dist/*.html', @@ -343,7 +330,6 @@ We will also change the first bundle a little bit to exclude all the `html` and - var gulp = require('gulp'); var bundle = require('aurelia-bundler').bundle; @@ -395,7 +381,7 @@ We will also change the first bundle a little bit to exclude all the `html` and We have changed the source code (src/main.js), so we need to rebuild our app. The command below should do that: -```shell +```Shell gulp serve ``` @@ -430,6 +416,6 @@ The above pattern will bundle all the views in `dist` and its child folders exce -## [Conclusion](aurelia-doc://section/9/version/1.0.0) +## Conclusion In this article, you've learned both the why and how of bundling. We've covered the `bundler` library, how to configure it for use with Gulp and demonstrated several different scenarios. To bundle your own app, we recommend that you begin with one of the configurations above and customize it. You may have a small app that makes sense as a single bundle or a larger one that can be broken down into features. Each application is different, but the bundler will help you to create the optimal deployment for your unique scenarios. diff --git a/doc/article/en-US/bundling-webpack.md b/doc/article/en-US/bundling-webpack.md index 61a3c392..5a34ea3d 100755 --- a/doc/article/en-US/bundling-webpack.md +++ b/doc/article/en-US/bundling-webpack.md @@ -1,19 +1,9 @@ --- -{ - "name": "Bundling with Webpack", - "culture": "en-US", - "description": "Before deploying your app to production, you'll want to bundle the assets for efficient use of the network.", - "engines" : { "aurelia-doc" : "^1.0.0" }, - "author": { - "name": "Bazyli Brzóska", - "url": "https://invent.life" - }, - "contributors": [], - "translators": [], - "keywords": ["Deploy", "Bundling", "Webpack"] -} +name: Bundling with Webpack +description: Before deploying your app to production, you'll want to bundle the assets for efficient use of the network. +author: Bazyli Brzóska (https://invent.life) --- -## [Introduction](aurelia-doc://section/1/version/1.0.0) +## Introduction Most of the current major browsers limit the number of simultaneous connections per hostname to six. This means that while six requests are being processed, additional requests for assets on a host will be queued by the browser. In the image below, the Chrome F12 developer tools network tab shows the timing for assets required by the `welcome view` of the unbundled, JSPM-based skeleton-navigation application. @@ -25,7 +15,7 @@ In the past, the most common browser limit has been 2 connections. This may have You may wonder: If this limit can have such a great impact on performance, then why don't browsers give us a higher limit? Most well-known browsers choose not to grant this wish in order to prevent the server from being overloaded by a small number of browsers. Such activity would be similar in nature to a DDOS attack. -## [Bundling & Minification](aurelia-doc://section/2/version/1.0.0) +## Bundling & Minification This connection limit will not cause slowness in our application if we can manage resources well enough to avoid it. When the page is first loaded, this is the initial request that returns HTML content. When the browser processes the HTML content, it spawns more requests to load resources like JS, CSS and images. It also executes JavaScript and sends AJAX requests to the server. @@ -33,7 +23,7 @@ To make this process efficient, we need to compress the assets and make fewer (p Bundling along with minification are techniques that can also be used to improve load time. Bundling and minification improve load time by reducing the number of requests to the server as well as reducing the size of requested assets such as views, view-models and CSS. -## [Bundling an Aurelia Webpack Application](aurelia-doc://section/3/version/1.0.0) +## Bundling an Aurelia Webpack Application In the following example, we will use the `skeleton-navigation` as our app to bundle. If you don't have that set up. Follow [these steps](https://github.com/aurelia/skeleton-navigation#running-the-app). @@ -41,13 +31,13 @@ Now that we have our app running, let's try to build the preconfigured bundle. W To build the development bundle execute: -```shell +```Shell npm run build ``` To build an optimized, minified production bundle execute: -```shell +```Shell npm run build:prod ``` @@ -60,27 +50,27 @@ After the bundle is created, by default you'll find the output in the `dist` fol To start a simple web server and test either the development or production build execute: -```shell +```Shell npm run server:prod ``` After executing the command, you'll see a link which will run your bundled application. -## [Entry Bundles](aurelia-doc://section/4/version/1.0.0) +## Entry Bundles -The skeleton-navigation is configured to create 3 explicit entry bundles by default: +The skeleton-navigation is configured to create 3 explicit entry bundles by default: - `aurelia-bootstrap` - contains modules needed to be loaded first, such as polyfills and Aurelia's Platform Abstraction Layer - `aurelia` - contains all of the aurelia's modules - `app` - contains files from within the `src` folder and their dependencies -However, you are free to define as many entry bundles as we want, by listing adding the packages as entry points of `webpack.config.js`: +However, you are free to define as many entry bundles as we want, by listing the packages as entry points of `webpack.config.js`: -```js +```JavaScript const baseConfig = { entry: { 'app': [], // (...) // - 'vendor': ['moment'] + 'vendor': ['moment'] }, output: { path: outDir, @@ -94,7 +84,7 @@ Defining entry bundles is only useful when you want to be able to make use of cl To make it easier to see whether it's necessary to update a certain bundle, the production bundles by default contain a hash in their filename. -## [Code-Splitting: Chunks / Async Bundles](aurelia-doc://section/5/version/1.0.0) +## Code-Splitting: Chunks / Async Bundles By default, all of our application code is contained in the `app` entry bundle. If our application is small enough, we can keep using just that single bundle, however the number of bundles we would like to have should mostly depend on our application structure and the usage patterns of our app. For example, if our app was built in a modular fashion, such that it is a collection of child-app/sections, then a `common` bundle for third-party libraries and a `bundle per section` makes much more sense and performs better than a huge single bundle that needs to be loaded up front. @@ -112,7 +102,7 @@ For most use-cases, I recommend using the centralized approach, as it makes it e Let's say we want to separate out the View and ViewModel: `src/users` contained in the skeleton and defer its loading to when the user clicks on a link to that route, you could define an async bundle as follows: - + "aurelia": { "build": { "resources": [ @@ -154,21 +144,21 @@ For quickly declaring a certain `` as lazy (deferred loading), or in te Both the `lazy` and the `bundle` attributes are optional. If you do not specify the bundle name, the chunk number will be used instead. -## [Declaring Build Resources](aurelia-doc://section/6/version/1.0.0) +## Declaring Build Resources By default, all the production dependencies declared in the `package.json` that have a `main` entry file are considered as build resources. In case Aurelia is supposed to load an external file or an external module that was not defined as a resource by any of its the dependencies, resources must also be specified manually. > Warning -> Since the syntax is still relatively new, many Aurelia plugins do not declare their resources. If you are developing an Aurelia plugin, make sure you do this, so that your users do not have to. The `package.json` syntax is similar, with the one exception that resources are relative to the root directory of the plugin, as there is no `src` folder. +> Since the syntax is still relatively new, many Aurelia plugins do not declare their resources. If you are developing an Aurelia plugin, make sure you do this, so that your users do not have to. The `package.json` syntax is similar, with the one exception that resources are relative to the root directory of the plugin, as there is no `src` folder. There might reasons not to declare those resources in all cases,for example when the plugin is to be partially consumed (e.g. only one Button element from a package containing multiple Aurelia elements). If we'd like to consume such external resources, we should declare them ourselves, for example: - + "aurelia": { "build": { "resources": [ @@ -183,7 +173,7 @@ If we'd like to consume such external resources, we should declare them ourselve You can also combine both features to separate out plugins or resources for lazy-loading: - + "aurelia": { "build": { "resources": [ @@ -209,7 +199,7 @@ You can also combine both features to separate out plugins or resources for lazy -## [Chunking Code When It Is Not Loaded By Aurelia](aurelia-doc://section/7/version/1.0.0) +## Chunking Code When It Is Not Loaded By Aurelia If you have code that you'd like to load asynchronously in your ${context.language.name} files, you can make use of the System loader compliant syntax to create split-points. Example use-cases for this are: conditionally loading foreign language support based on the user's selection or conditionally polyfilling certain features. @@ -250,7 +240,7 @@ When using TypeScript and the `System.import` API means you do not get any Typin -## [Duplicate Modules in Multiple Bundles](aurelia-doc://section/8/version/1.0.0) +## Duplicate Modules in Multiple Bundles By default, the `webpack.config.js` uses the `CommonsChunkPlugin` under the hood, to eliminate code duplication across bundles by placing common code in the `app` bundle. If you have additional custom entry bundles, or somehow misused or misconfigured them, you may end up with duplicated modules in multiple bundles. @@ -273,7 +263,7 @@ When we want to bundle `a.js`, Webpack will analyze the source code of the modul To have full control over how Webpack distributes and de-duplicates the modules in the chunks, please refer to [Webpack documentation](https://github.com/webpack/docs/wiki/optimization#multi-page-app) on the matter and replace the `@easy-webpack/config-common-chunks-simple` configuration with a custom one. -## [Bundle Configuration and Easy Webpack](aurelia-doc://section/9/version/1.0.0) +## Bundle Configuration and Easy Webpack Webpack is a very advanced piece technology, but it can be quite intimidating to beginners and hard to re-configure even for seasoned users. For this very reason, the skeleton-navigation example uses a package called [Easy Webpack](https://github.com/easy-webpack/core) that allows us to quickly stich together a number of configuration objects and supports presets. In more advanced use-cases, we can still override its configuration values, or replace the presets with custom configuration. @@ -296,7 +286,7 @@ Let's take a look at how a configuration file can be put together: baseConfig, require('@easy-webpack/config-env-production')(), - + require('@easy-webpack/config-aurelia') ({root: rootDir, src: srcDir, title: title, baseUrl: baseUrl}), @@ -335,6 +325,6 @@ The names of the packages are self-explanatory. The skeleton-navigation config f You can easily replace all the preset packages with your own configuration objects. Please refer to the [Easy Webpack](https://github.com/easy-webpack/core) documentation for more information about its capabilities. -## [Conclusion](aurelia-doc://section/10/version/1.0.0) +## Conclusion In this article, you've learned both the why and how of bundling with Webpack. We've covered how to configure Webpack's configuration file for use with Aurelia and demonstrated several different scenarios for asynchonous loading of parts of your code. To bundle your own app, we recommend that you begin with the skeleton-navigation configuration file and customize it. You may have a small app that makes sense as a single bundle or a larger one that can be broken down into features. Each application is different, but Webpack is extremely flexible and should help you to create the optimal deployment for your unique scenarios. diff --git a/doc/article/en-US/business-advantages.md b/doc/article/en-US/business-advantages.md index cad54ff2..67283c2e 100644 --- a/doc/article/en-US/business-advantages.md +++ b/doc/article/en-US/business-advantages.md @@ -1,37 +1,27 @@ --- -{ - "name": "Business Advantages", - "culture": "en-US", - "description": "Aurelia is open source platform with commercial backing. If your business is going to spend significant money building software, you want to do it on a platform that's committed to you as a customer. You want to be able to form a relationship with your technology provider to ensure that you and your developers have a solid platform upon which to build your business now and in the years to come.", - "engines" : { "aurelia-doc" : "^1.0.0" }, - "author": { - "name": "Rob Eisenberg", - "url": "http://robeisenberg.com" - }, - "contributors": [], - "translators": [], - "keywords": ["Benefits", "Business"] -} +name: Business Advantages +description: Aurelia is open source platform with commercial backing. If your business is going to spend significant money building software, you want to do it on a platform that's committed to you as a customer. You want to be able to form a relationship with your technology provider to ensure that you and your developers have a solid platform upon which to build your business now and in the years to come. +author: Rob Eisenberg (http://robeisenberg.com) --- -## [Commercially Backed](aurelia-doc://section/1/version/1.0.0) +## Commercially Backed * Commercial support options available. * Custom contracts available for enterprises. * Internally "dogfooded" by Blue Spire Inc. in its own products. -## [Commercial Products and Services](aurelia-doc://section/2/version/1.0.0) +## Commercial Products and Services * Official on-site or virtual training. * Consulting, advisory, and code-review services. * Aurelia UX (In Development) - Cross-platform, mobile UI components. -## [Strategic Partnerships](aurelia-doc://section/3/version/1.0.0) +## Strategic Partnerships * Partnerships with both large and boutique consulting organizations in order to provide scale-out of developer resources as needed by businesses adopting Aurelia. * Official training partners around the world to deliver training anywhere and anytime. -## [Broad Customer Reach](aurelia-doc://section/4/version/1.0.0) +## Broad Customer Reach * Applications developed in virtually every space: healthcare, insurance, finance, entertainment, technology, developer tools, LOB, gaming, etc. * Used internally at many well-known enterprises. diff --git a/doc/article/en-US/cheat-sheet.md b/doc/article/en-US/cheat-sheet.md index d3016a2d..17b28044 100644 --- a/doc/article/en-US/cheat-sheet.md +++ b/doc/article/en-US/cheat-sheet.md @@ -1,19 +1,9 @@ --- -{ - "name": "Cheat Sheet", - "culture": "en-US", - "description": "Forgot the syntax for bindings? Need to know how to create a custom attribute? This article contains answers to questions like those as well as a bunch of quick snippets for common tasks.", - "engines" : { "aurelia-doc" : "^1.0.0" }, - "author": { - "name": "Rob Eisenberg", - "url": "http://robeisenberg.com" - }, - "contributors": [], - "translators": [], - "keywords": ["Help", "Cheat Sheet"] -} +name: Cheat Sheet +description: Forgot the syntax for bindings? Need to know how to create a custom attribute? This article contains answers to questions like those as well as a bunch of quick snippets for common tasks. +author: Rob Eisenberg (http://robeisenberg.com) --- -## [Configuration and Startup](aurelia-doc://section/1/version/1.0.0) +## Configuration and Startup @@ -144,7 +134,7 @@ -## [Creating Components](aurelia-doc://section/2/version/1.0.0) +## Creating Components UI components consist of two parts: a view-model and a view. Simply create each part in its own file. Use the same file name but different file extensions for the two parts. For example: _hello${context.language.fileExtension}_ and _hello.html_. @@ -185,7 +175,7 @@ Components have a well-defined lifecycle: 5. `detached()` - At some point in the future, the component may be removed from the DOM. If/When this happens, and if the view-model has a `detached` callback, this is when it will be invoked. 6. `unbind()` - After a component is detached, it's usually unbound. If your view-model has the `unbind` callback, it will be invoked during this process. -## [Dependency Injection](aurelia-doc://section/3/version/1.0.0) +## Dependency Injection @@ -314,7 +304,7 @@ Components have a well-defined lifecycle: -## [Templating Basics](aurelia-doc://section/4/version/1.0.0) +## Templating Basics @@ -420,7 +410,7 @@ Note that when a `containerless` attribute is used, the container is stripped *a -## [Databinding](aurelia-doc://section/5/version/1.0.0) +## Databinding ### bind, one-way, two-way & one-time @@ -773,7 +763,7 @@ You can bind a css string or object to an element's `style` attribute. Use the ` -## [Templating View Resources](aurelia-doc://section/6/version/1.0.0) +## Templating View Resources @@ -871,7 +861,7 @@ Contextual items available inside a repeat template: -## [Routing](aurelia-doc://section/7/version/1.0.0) +## Routing @@ -1250,7 +1240,7 @@ Since the view model's navigation lifecycle is called only once, you may have pr -## [Custom Attributes](aurelia-doc://section/8/version/1.0.0) +## Custom Attributes @@ -1489,7 +1479,7 @@ Since the view model's navigation lifecycle is called only once, you may have pr -## [Custom Elements](aurelia-doc://section/9/version/1.0.0) +## Custom Elements @@ -1810,7 +1800,7 @@ The developer can also specify a different method name to use - -## [The Event Aggregator](aurelia-doc://section/10/version/1.0.0) +## The Event Aggregator If you include the `aurelia-event-aggregator` plugin using "basicConfiguration" or "standardConfiguration" then the singleton EventAggregator's API will be also present on the `Aurelia` object. You can also create additional instances of the EventAggregator, if needed, and "merge" them into any object. To do this, import `includeEventsIn` and invoke it with the object you wish to turn into an event aggregator. For example `includeEventsIn(myObject)`. Now my object has `publish` and `subscribe` methods and can be used in the same way as the global event aggregator, detailed below. diff --git a/doc/article/en-US/contact-manager-tutorial.md b/doc/article/en-US/contact-manager-tutorial.md index cb63f25f..870822a4 100644 --- a/doc/article/en-US/contact-manager-tutorial.md +++ b/doc/article/en-US/contact-manager-tutorial.md @@ -1,19 +1,9 @@ --- -{ - "name": "Contact Manager Tutorial", - "culture": "en-US", - "description": "Now that you've got the basics down, you need to learn how to use the CLI, build a more complex app and get a solid knowledge foundation for real-world work. In this tutorial we'll build a small contact manager app and demonstrate a variety of Aurelia's features as well as learn some useful techniques.", - "engines" : { "aurelia-doc" : "^1.0.0" }, - "author": { - "name": "Rob Eisenberg", - "url": "http://robeisenberg.com" - }, - "contributors": [], - "translators": [], - "keywords": ["Getting Started", "ES2015", "ES2016", "TypeScript"] -} +name: Contact Manager Tutorial +description: Now that you've got the basics down, you need to learn how to use the CLI, build a more complex app and get a solid knowledge foundation for real-world work. In this tutorial we'll build a small contact manager app and demonstrate a variety of Aurelia's features as well as learn some useful techniques. +author: Rob Eisenberg (http://robeisenberg.com) --- -## [Setting Up Your Machine](aurelia-doc://section/1/version/1.0.0) +## Setting Up Your Machine For this tutorial, we're going to use the Aurelia CLI. If you've already setup your machine with the CLI, you can skip to the next section. If not, then please install the following CLI prerequisites: @@ -24,11 +14,11 @@ For this tutorial, we're going to use the Aurelia CLI. If you've already setup y * Here's [a standard client](https://git-scm.com). > Warning -> Note on Git for Windows installation: When installing Git for Windows, there is an option to `use git bash only`, `run git from windows command prompt`, or `run git and included unix tools from windows command prompt`. You have to choose `run git from windows command prompt` or `run git and included unix tools from windows command prompt` in order for Aurelia CLI to work. +> When installing Git for Windows, there is an option to `use git bash only`, `run git from windows command prompt`, or `run git and included unix tools from windows command prompt`. You must choose `run git from windows command prompt` or `run git and included unix tools from windows command prompt` in order for the Aurelia CLI to work. Once you have the prerequisites installed, you can install the Aurelia CLI itself. From the command line, use npm to install the CLI globally: -``` +```Shell npm install aurelia-cli -g ``` @@ -38,7 +28,7 @@ npm install aurelia-cli -g > Warning > While creating a new project doesn't require NPM 3, front-end development, in general, requires a flat-package structure, which is not available with NPM versions prior to 3. It is recommended that you update to NPM 3, which will be able to manage this structural requirement. You can check your NPM version with `npm -v`. If you need to update, run `npm install npm -g`. -## [Creating A New Aurelia Project](aurelia-doc://section/2/version/1.0.0) +## Creating A New Aurelia Project Now, that you've got your machine setup, we can create our contact manager app. To create the project, run `au new` from the command line. You will be presented with a number of options. Name the project "contact-manager" and then select either the "Default ESNext" or "Default TypeScript" option depending on what is most comfortable for you. (Do not select "Custom" for this tutorial.) @@ -46,7 +36,7 @@ Once you've made your choice, the CLI will show you your selections and ask if y Once the dependencies are installed (it will take a few minutes), your project is ready to go. Just change directory into the project folder and run it by typing `au run --watch`. This will run the app and watch the project's source for changes. Open a web browser and navigate to the url indicated in the CLI's output. If you've got everything setup correctly, you should see the message "Hello World!" in the browser. -## [Adding Required Assets](aurelia-doc://section/3/version/1.0.0) +## Adding Required Assets For this tutorial, we're going to be working against a fake, in-memory backend. We've also pre-created the CSS and some utility functions, so we don't have to waste time on that here. Before we begin writing the app, you'll need to download these required assets and add them to your project. @@ -62,10 +52,10 @@ Once you've downloaded the zip file, extract it and you'll find three files: Copy all of these files to the `src` folder of your project. TypeScript users should also rename the file extensions from `.js` to `.ts`. -## [Building the Application Shell](aurelia-doc://section/4/version/1.0.0) +## Building the Application Shell > Warning -> Before proceeding any further, please make sure you are familiar with the concepts introduced in the Quick Start Guide or otherwise have some basic experience with Aurelia. Topics covered in the Quick Start will not be explained again here. +> Before proceeding any further, please make sure you are familiar with the concepts introduced in [Creating a Todo App](docs/tutorials/creating-a-todo-app) or otherwise have some basic experience with Aurelia. Topics covered in [Creating a Todo App](docs/tutorials/creating-a-todo-app) will not be covered in this article. Let's start by looking at a picture of the final product of this tutorial. It will help us to see the application's structure and the pieces we need to build. @@ -77,12 +67,14 @@ To begin, we're going to setup our `App` class by configuring it with a router. + import {PLATFORM} from 'aurelia-pal'; + export class App { configureRouter(config, router){ config.title = 'Contacts'; config.map([ - { route: '', moduleId: 'no-selection', title: 'Select'}, - { route: 'contacts/:id', moduleId: 'contact-detail', name:'contacts' } + { route: '', moduleId: PLATFORM.moduleName('no-selection'), title: 'Select' }, + { route: 'contacts/:id', moduleId: PLATFORM.moduleName('contact-detail'), name:'contacts' } ]); this.router = router; @@ -91,6 +83,7 @@ To begin, we're going to setup our `App` class by configuring it with a router. import {Router, RouterConfiguration} from 'aurelia-router'; + import {PLATFORM} from 'aurelia-pal'; export class App { router: Router; @@ -98,8 +91,8 @@ To begin, we're going to setup our `App` class by configuring it with a router. configureRouter(config: RouterConfiguration, router: Router){ config.title = 'Contacts'; config.map([ - { route: '', moduleId: 'no-selection', title: 'Select'}, - { route: 'contacts/:id', moduleId: 'contact-detail', name:'contacts' } + { route: '', moduleId: PLATFORM.moduleName('no-selection'), title: 'Select' }, + { route: 'contacts/:id', moduleId: PLATFORM.moduleName('contact-detail'), name:'contacts' } ]); this.router = router; @@ -108,10 +101,16 @@ To begin, we're going to setup our `App` class by configuring it with a router. +> Warning +> After changing the code above, if you immediately try to compile, you may receive a compile error on your unit tests because the sample test references the `App` class, which we just changed. To address this, remove the dummy unit test. + To add routing to your app, all you have to do is add a `configureRouter` method to your `App` class. The framework will call this method, passing it a `RouterConfiguration` and a `Router`. You can use the configuration object to get the router setup with the routes you want. Use the `map` method to map route patterns to the modules that should handle the patterns. Minimally, each route needs at least a `route` pattern and a `moduleId`. In the case above, we are registering two routes. The first route is empty, indicated by `route: ''`. This will be the default route that is matched when there is no fragment. This route will cause the `no-selection` module to load. We'll use this to display a nice message to the user, if they haven't selected a contact to view. The second route has the pattern `contacts/:id`. This will match the literal `contacts/` followed by a parameter, which we've named `id`. When this route is matched, the router will load the `contact-detail` module so that we can display the selected contact. +> Info +> Did you notice the calls to `PLATFORM.moduleName(....)`? This is a special API that is used in Aurelia Webpack projects to allow Webpack to identify strings that represent modules. This enables Webpack to include the referenced module in the built package. + There are a couple more points of interest with this configuration. First, notice that we've set the `config.title` property. This sets a base "title" to be used in the document's title for the browser. We can also set a `title` on each route. When we do that, the router's title and the matched route's title will be joined together to form the final document title. The second thing to notice is that the second route has a `name` property. We'll be able to use this later to generate routes without needing to copy/paste the route pattern everywhere. Instead, we can just refer to the route by name. Now that we've configured our application's navigation structure, we need to put the visual structure in place. To do that, replace your `app.html` file with the following markup: @@ -119,16 +118,13 @@ Now that we've configured our application's navigation structure, we need to put