Socket
Socket
Sign inDemoInstall

aurelia-framework

Package Overview
Dependencies
9
Maintainers
1
Versions
58
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.1.4 to 1.1.5

2

bower.json
{
"name": "aurelia-framework",
"version": "1.1.4",
"version": "1.1.5",
"description": "The aurelia framework brings together all the required core aurelia libraries into a ready-to-go application-building platform.",

@@ -5,0 +5,0 @@ "keywords": [

@@ -146,10 +146,14 @@ ---

> 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.
> Warning: When using the `<body>` 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)
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 raf mutationobserver-shim`), you'll need to adjust your code to load them before Aurelia is initialized.
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 bootstrapper file, e.g. `bootstrapper.js`:
In case you are using Webpack, create a file, e.g. `ie-polyfill.js`:
<code-listing heading="Polyfill Configuration">
<source-code lang="HTML">
<source-code lang="JS">
import 'mutationobserver-shim/MutationObserver'; // IE10 MutationObserver polyfill

@@ -160,4 +164,12 @@ import 'raf/polyfill'; // IE9 requestAnimationFrame polyfill

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.
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:
<code-listing heading="Polyfill Configuration">
<source-code lang="JS">
entry: {
'app': ['./ie-polyfill', 'aurelia-bootstrapper'],
</source-code>
</code-listing>
If you are using JSPM change your `index.html` startup code as follows:

@@ -179,3 +191,3 @@

}).then(function() {
return SystemJS.import('webcomponents/webcomponentsjs/MutationObserver');
return SystemJS.import('mutationobserver-shim/MutationObserver');
}).then(function() {

@@ -182,0 +194,0 @@ SystemJS.import('aurelia-bootstrapper');

@@ -163,2 +163,5 @@ ---

```
> Whenever you install new dependencies used in your app, make sure to restart the `au run` or respectivley the `au run --watch` command, in order to have the CLI rebundle your freshly added dependecies.
With these libraries installed, we now need to tell Aurelia which application bundle they should be included in and how to properly configure them with the module system. To do this, look in the `aurelia_project` folder and open up the `aurelia.json` file. This file contains all the information that the Aurelia CLI uses to build our project. If you scroll down, you will see a `bundles` section. There are two bundles defined by default: `app-bundle.js`, which contains your code and `vendor-bundle.js` which contains all 3rd party libraries. We need to add some new items to the `dependencies` array of the `vendor-bundle.js` bundle. Add the following two entries for jQuery and Bootstrap:

@@ -188,2 +191,4 @@

After you have modified the aurelia.json file, it is necessary to restart the `au run --watch` process in order for the changes to be picked up.
## [Building Out the Default Route](aurelia-doc://section/5/version/1.0.0)

@@ -190,0 +195,0 @@

@@ -152,7 +152,8 @@ ---

If you need to add a 3rd party client library to your project, first `npm install` the library. After that, open the `aurelia_project/aurelia.json` file and scroll down to the `build.bundles` section. You'll need to add the library into one of your bundle's `dependencies` sections.
The CLI provides two commands to help you add 3rd party client libraries, `au install <library>` and `au import <library>`. The `install` command will download, install and add the library to the configuration file `aurelia_project/aurelia.json`. The `import` command will add a library that you've previously installed with npm to the configuration file. Finally, both commands will give you instructions on how to access the library from your code.
> Info
> One of the first new features you'll see soon is a command to help you with 3rd party module configuration. The command will inspect a previously npm-installed package, and make a configuration recommendation to you, automating the process if you desire.
### Manual configuration
Unfortunately, not all 3rd party libraries can be successfully configured automatically by the `install` and `import` commands. In order the remedy this by manual configuration, open the `aurelia_project/aurelia.json` file and scroll down to the `build.bundles` section. You'll need to add the library into one of your bundle's `dependencies` sections.
Below is some guidance for how to manually configure several different common 3rd party library scenarios:

@@ -209,3 +210,3 @@

* `path` - This is a path to the folder where the package's source is located. This path is relative to your application's `src` folder.
* `main` - This is the main module (entry point) of the package, relative to the `path`. You should not include the file extension. `.js` will be appended automatically.
* `main` - This is the main module (entry point) of the package, relative to the `path`. You should not include the file extension. `.js` will be appended automatically. Set `main` to `false` when the package does not have a main file.

@@ -226,3 +227,3 @@ > Info: Environment-Specific Dependencies

"main":"jquery.min",
"export": "$"
"exports": "$"
},

@@ -241,3 +242,3 @@ {

* `path` - This is a path to the folder where the package's source is located. This path is relative to your application's `src` folder.
* `main` - This is the main module (entry point) of the package, relative to the `path`. You should not include the file extension. `.js` will be appended automatically.
* `main` - This is the main module (entry point) of the package, relative to the `path`. You should not include the file extension. `.js` will be appended automatically. Set `main` to `false` when the package does not have a main file.
* `deps` - This is an array of dependencies which must be loaded and available before the legacy library can be evaluated.

@@ -260,3 +261,3 @@ * `exports` - This is the name of the global variable that should be used as the exported value of the module.

"main":"jquery.min",
"export": "$"
"exports": "$"
},

@@ -408,3 +409,3 @@ {

It is possible to use packages outside of the node_modules folder. The only difference is that you need te define what the `packageRoot` is. In `aurelia.json`, you can define a package that lives outside of the node_modules folder as follows:
It is possible to use packages outside of the node_modules folder. The only difference is that you need to define what the `packageRoot` is. In `aurelia.json`, you can define a package that lives outside of the node_modules folder as follows:

@@ -518,1 +519,32 @@ <code-listing heading="Package outside of node_modules">

* Use the command `npm run au-update` to update all of the libraries in the au-update list above.
## [Javascript Minification](aurelia-doc://section/17/version/1.0.0)
The CLI will minify Javascript out of the box for the staging and production environments:
<code-listing heading="Default minification settings">
<source-code lang="JavaScript">
"options": {
"minify": "stage & prod",
"sourcemaps": "dev & stage"
},
</source-code>
</code-listing>
These options can be found in the `"build"."options"` section of `aurelia.json`. If you wish to specify the options that are used in the minification process, then replace `"minify": "stage & prod"` with:
<code-listing heading="Default minification settings">
<source-code lang="JavaScript">
"minify": {
"dev": false,
"default": {
"indent_level": 2
},
"stage & prod": {
"max-line-len": 100000
}
},
</source-code>
</code-listing>
The Aurelia-CLI uses [UglifyJS2](https://github.com/mishoo/UglifyJS2) for minification, so any option that UglifyJS2 supports is also supported by the Aurelia-CLI. With the above configuration, minification will occur for the `stage` and `prod` environments, but not for the `dev` environment. For the `stage` and `prod` environments, both the `indent_level` as well as the `max-line-len` option are passed to the minifier. The `default` key is optional, but allows you to reduce code duplication when multiple environments have similar options.

@@ -42,3 +42,3 @@ ---

* **You want an all-in-one solution** - Aurelia provides core capabilities like dependency injection, templating, routing and pub/sub, so you don't have to piece together a bunch of libraries in order to build an application. On top of this rich core, Aurelia also provides a number of additional plugins for internationalization, validation, modal dialogs, UI virtualization and much more. You also don't have to cobble together a bunch of different tools. Aurelia provides a CLI for generating and building projects, a browser plugin for debugging and a VS Code plugin as well.
* **You want an all-in-one solution** - Aurelia provides core capabilities like dependency injection, templating, routing and pub/sub, so you don't have to piece together a bunch of libraries in order to build an application. On top of this rich core, Aurelia also provides a number of additional plugins for internationalization, validation, modal dialogs, UI virtualization and much more. You also don't have to cobble together a bunch of different tools. Aurelia provides a CLI for generating and building projects, a browser plugin for debugging and a VS Code plugin as well. Yet, you're not forced to use any of these as Aurelia is structured to enable you to swap out any detail, even down to the templating/binding engine, in order to guarantee maximum flexibility.
* **You need blazing rendering speed and great memory efficiency** - In 3rd-party benchmarks like DB Monster, Aurelia renders faster than any other framework today. Because of its batched rendering and observable object pooling, Aurelia also utilizes less memory and causes less GC churn than other frameworks.

@@ -48,3 +48,3 @@ * **You require the safety of uni-directional data-flow, but need the productivity of data-binding** - Aurelia features an observable-based binding system that uses uni-directional data-flow by default, pushing data from your model into your view via a highly efficient, DOM-batching mechanism. Two-way binding can also be leveraged for HTML form controls, allowing for increased developer productivity, without sacrificing the safety of uni-directional flow or that of component encapsulation.

* **You value high standards compliance** - Focused on ES2015+ and W3C Web Components while avoiding unnecessary abstractions, Aurelia provides the cleanest and most standards-compliant component model you'll find anywhere.
* **You think a framework should "get out of your way"** - Aurelia is the only framework that lets you build components with plain, vanilla JavaScript. The framework stays out of your way so your code remains clean and easy to evolve over time.
* **You think a framework should "get out of your way"** - Aurelia is the only framework that lets you build components with plain, vanilla JavaScript/TypeScript. The framework stays out of your way so your code remains clean and easy to evolve over time.
* **You like programming models that are easy to learn and remember** - Because of its simple, consistent design, developers are able to learn a very small set of Aurelia patterns and APIs while unlocking limitless possibilities. Simple conventions help developers follow solid patterns and reduce the amount of code they have to write and maintain. This all results in less fiddling with the framework and more focus on the application.

@@ -51,0 +51,0 @@ * **You prefer a platform that integrates well with other frameworks and libraries** - Because of the extensible design of Aurelia and its strict adherence to web standards, it's easy to integrate Aurelia with any 3rd party library or framework, including jQuery, React, Polymer, Bootstrap, MaterializeCSS and many more.

{
"name": "aurelia-framework",
"version": "1.1.4",
"version": "1.1.5",
"description": "The aurelia framework brings together all the required core aurelia libraries into a ready-to-go application-building platform.",

@@ -5,0 +5,0 @@ "keywords": [

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc