It would be great if we could share links to specific points within the docs (gitter, github issues, stackoverflow, etc). This was possible in the preliminary docs site but the feature hasn't been carried forward into the new docs application yet.

A good example of how this could work is github's logic for rendering markdown documents. It renders heading markdown as a heading element with a link that appears when you hover over the heading:

Clicking on the link changes the url and scrolls the page to the heading:

Ultimately this enables sharing links to specific sections of the markdown document. GitHub has similar logic that enables linking to specific lines of code in the source.

It would be awesome if this capability was added to the aurelia docs app and resulted in a reusable intra-view router component. I've seen questions in the gitter about how to do things like this without breaking the standard routing logic.

<div touch.call="sayHello()">Say Hello</button>

i think this should be:

<div touch.call="sayHello()">Say Hello</div>

Seems the topic page scroll position is remembered, but is its a global position and not the position in the topic where you were viewing.

For instance if I am reviewing binding and am down toward the bottom of the page, and then navigate to templating I get placed somewhere down in the page that I have no reference (I did not navigate there) and have to scroll back to the top to get context again.

If you are going to remember position it should be for each topic page, not just a global scroll position I believe.

Thanks, looking great!

Could you add documentation how to use the built in compiler and templates in custom code. Accessing the compiler and compiling templates without the router is a powerful and good tool in applications. It gives a lot of flexibility and control for the programmer.

@EisenbergEffect Have you included the outline we discussed? I'd like to use it as a base for the wireframes.

the question always pops up and a lot of people asking, why my plugin is not working, why jquery stuff is not working, and the usual answer is do it in attached ().

so i think it would be helpful to mention in the docs that attached () is the equivalent for DOMReady, this way a lot of people wont have to ask this question and for those who are coming form jquery background it will instantly click for them.

At the moment, the documentation seems to favor ES7 with decorators, but there are some ES6 examples without decorators as well. It would be beneficial to a) standardize this and b) provide examples in all Javascript dialects, including (but not limited to) the following:

• ES5
• ES6
• ES7 (full decorators)
• ES7 (without property initializers, for examples that need it)

Supersets of JS can be supported as well, such as TypeScript and CoffeeScript.

I think that this can easily be achieved with the Bootstrap tabs feature; the Aurelia.io site already uses the Bootstrap Javascript component. As such, we could offer the code examples without affecting the document length too much by simply adding some HTML markup to support the tabs.

I think that this would go a long way towards helping people understand the specific examples in the documentation, while emphasizing the flexibility of Aurelia. Further, by establishing this practice now, we can set a precedent for later documentation examples.

I'm willing to work on the tabs feature, although I might need some assistance translating some of the code snippets. Anyone have any ideas? Objections?

I was not sure where to report this, but I noticed that in the new documentation many TypeScript examples assign fields in their ctor. For example, from "Declaring dependencies" in the cheat sheet:

export class CustomerDetail {
  constructor(private dep1: Dep1, private dep2: Dep2){
    this.dep1 = dep1;
    this.dep2 = dep2;
  }
}

The two lines in the ctor are redundant with the TS generated code.

When you put a visibility modifier before a ctor parameter it actually does two things:

• It means you declare a class field with the specified visibility and the same name as the parameter.
• It initializes the generated field with the parameter value.

I'm updating the pt-br version of the Get-Started.md. After translating the file, I'm following the tutorial, step by step, to see if there is any error. I found something that might be a problem.

The Get-Started says the following:

"You may examine the provided index.html file and the rest of the files in src and dist, however we recommend deleting these folders before moving on with this tutorial. By doing so, you can more effectively learn how to build an Aurelia app from scratch."

However, if I delete src folder, the file main.js is deleted too (of course); and this file is not being created again throughout the tutorial, which causes an error that breaks the app.

Because of that, I believe that src should not deleted. Or Am I wrong?

If you just download and run the Navigation Skeleton Project from the Getting Started page there's an upper value converter shown for the fullName binding in the Welcome.html. They should match, but probably nice to introduce it in the tutorial. Instant hit for any WPF/Silverlight devs!

In Aurelia Docs it reads:

Note: A recommended practice for your own apps is to place all your app-specific extensions, value converters, etc. into a resources folder. Then create an index.js file that turns them all into an internal feature plugin.

How to create that index.js file?

http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.0.2/doc/article/cheat-sheet

I'm guessing the </table> closing tags should not be in the following:

Illegal Select Code

<template>
  <select>
    <template repeat.for="customer of customers">
      <option>...</option>
    </select>
  </table>
</template>

Correct Select Code

<template>
  <select>
    <option repeat.for="customer of customers">...</option>
  </table>
</template>

I was really confused when first trying to use the ref attribute. The element is not available during construction, and isn't available until the attached method is called. This should be documented to help others like me figure out where we can use it.

Hi everyone,

can we get a table of contents in the new docs?
That'd be very comfortable with very long articles, especially the Cheat Sheet.

Regards

p.s.: is there an official repo for the reader? Would have been a better place to post this (or look if somebody already has). :-)

I've been thinking that we might be able to improve the build process of Aurelia around a few scenarios that have recently come up. Here's what I am proposing:

• Every repository should contain the following src files
  • imports.js - contains all the ES6 import statements for the library
  • exports.js - contains all the ES6 export statements for the library.
  • classes - one file per ES6 class. No imports or exports. Decorated with Flow types.
  • interfaces.js - contains any TypeScript interfaces needed to define "shapes" which are not defined as classes in our ES6 API
• The build process will concatenate all these files into a single index.js with the imports at the top, the classes/interfaces in the middle and the exports at the bottom.
• The build process will use Babel to compile the index.js file, which will strip the Flow types and interface definitions and generate all our supported module formats.
• The build process will use the Babel compiler with a d.ts plugin to generate a single d.ts file for the library, based on the Flow types and interfaces.
• The build process will copy the generated d.ts file into each module format folder so that it can be distributed with our source via standard package managers.

Here's what I think we can get from this:

• A single file for each Aurelia library will result in less http requests during debug scenarios, making the development experience smoother.
• A single file will reduce the amount of library code that the Babel compiler generates. Instead of it having to generate it for each class file (today), it only generates the helpers once per library. This makes Aurelia smaller.
• A single file will reduce the amount of runtime module lookup required by the ES6 loader. Thus startup should be faster.
• The flow types and plugin will allow us to get a solid d.ts file for each library and always keep it in sync with every release version.
• We preserve the flexibility of leveraging the Babel compiler.
• We might be able to also compile with the TS compiler directly.

Would be nice to have a convention documented about the structure on the src folder.

As per our discussion with @janvanderhaegen on the gitter, he suggested:

"You should be able to just create those folders and throw them in, the built-in convention understands the 'views' and 'viewmodels' convention
but you'll have to update the routes in your app start to point to the correct viewmodel folder"

I know this is not really the proper place for this, but I was just wondering if you would consider Aurelia ready for production? We are considering Aurelia and AngularJS 1.4 mainly because we like the 2 way binding capability that they both have for forms, and desire a full stack framework. I've watched your video and have gone through the getting started and really like what I see but am scared of potential gotchas down the line. Guidance?

Under section Running The E2E Tests there's a mention of a build command gulp webdriver_update but this didn't work and after looking through the build tasks for e2e I realized the correct command to be gulp webdriver-update

right now, we cant know what was newly added to the docs because there is nothing that shows that, and we have to reread the whole docs again to find the new content additions, therefore i suggest implementing some kind of tagging system, this will let us instantly dig to the latest content.

some tags i suggest

• new
• deprecated

i have attached a stupid mockup image, hope this helps

Tried jspm registry config github, Invalid argument registry.
change to registry to endpoint in docs

GitHub rate limit reached. To increase the limit use GitHub authentication.
Run jspm endpoint config github to set this up.

Get started tutorial have way too many opinions.

• Babel
• Gulp
• Node.js
• etc etc

A lot of 'you can do it with something else but we think this is better so go here and learn it'. When you have that many dependency on a simple start up project, how many developer will stop by and get through it?

If you take look at angularjs or even durandal's get start. It just list a simple html with some javascript reference and its done.

Shouldn't that get started tutorial can be done with notepad with least effort and get something done in a few min?

When someone look at new libraries or framework as non frontend developer, most of time they will try to check out how easier it is to get something in to their project without any advanced tools.

Babel have browser.js, it doesn't even require you to pre-compile your code.

The easier it is to do a hello world app and with advanced setup afterward, the easier to get people from different skill range to hook up.

On the bus on my 13" MBP. Can't scroll down the list of links to navigate the docs page.

Section Setting up the Project Structure and Build states that

npm install -g yo generator-aurelia
yo aurelia

is equivalent to

Begin by downloading the navigation skeleton. Unzip it and rename the folder to navigation-app.

This is not correct, because yo arelia command does not only downloads the application skeleton, but it also runs internally the following two commands

npm install
jspm install

Improved view model implementation:

export class IssueSearch {
  filteredIssues = [];
  _searchText = '';

  constructor(allIssues) {
    this.allIssues = allIssues;
  }

  get searchText() {
    return this._searchText;
  }
  set searchText(newValue) {
    this._searchText = newValue;
    if (newValue === '') {
      this.filteredIssues = [];
    } else {
      this.filteredIssues = this.allIssues.filter(x => x.abstract.indexOf(this.searchText) !== -1);
    }
  }
}

You have a 2nd example for the model, but there's no code for what the view should be.

As a kickstarter to the conversation here are some things we are hoping to hear back on. Feel free to number your responses and keep them as short as needed but as long as necessary -

1. What is your favorite or easiest to use documentation? (ex. Bootstrap 3.2 docs)
2. What topic(s) should we prioritize next in documentation?
3. What is one must have feature of the documentation?

In the custom element doc, there is no explanation on how we can integrate 3rd party js plugin, particularly jQuery plugins.

Would be great to add a tutorial or chapter on how this could be done with bindings, event handlers etc.

My browser is Safari.

Scott

This particular view is a basic input form, styled using bootstrap classes.

It does not seem obvious where the bootstrap classes get involved on that view. I am nitpicking on this one sentence since it is my long time impression that the "use of bootstrap" is veiled in secrecy (a bit of poetic freedom here).

The point is that nothing written in this document up to this point mentions bootstrap, so if this is a forward reference please warn the reader about this.

It is my understanding that bootstrap gets involved here

This is the log:

DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected].
aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected].
aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected].
aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected].
aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected].
aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected].
aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected].
aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected].
aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected].
aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected].
aurelia-logging-console.js:46 INFO [aurelia] Aurelia Started
aurelia-logging-console.js:38 DEBUG [templating] importing resources for undefined []

and the rendered UI

Getting more interested in aurelia, I just browsed the documentation: http://aurelia.io/docs.html

Type in the browser search: "behavior" I find 14 results. That seems ok at first sight.

But when I look closer at the results I am totally missing something.

I would have expected a headliner like "BEHAVIORS" - what they are and where you need them bla....

Please improve that :-)

Attempting to install in Windows 8.1 using the Command Prompt (cmd.exe) or Windows Powershell is a complete exercise in frustration. The jspm install step invariably starts getting timeout errors halfway through, even when you have configured jspm with your GitHub credentials. In contrast I've found the install using Git Bash is fast, smooth and error free.

The Getting Started process should be necessarily ultra smooth. There should be a prominent indication in the Getting Started and other docs to recommend a Git Bash install for Windows users..

Update the docs to reflect the breaking changes in the latest release.

In the Custom Attribute documentation, it's mentioned that you can pass options to @bindable in the ES6 class decorators, like so:

@bindable({
  name:'myProperty', //name of the property on the class
  attribute:'my-property', //name of the attribute in HTML
  changeHandler:'myPropertyChanged', //name of the method to invoke when the property changes
  defaultBindingMode: bindingMode.oneWay, //default binding mode used with the .bind command
  defaultValue: undefined //default value of the property, if not bound or set in HTML
})

The ES7 property decorators negate the need for the name property, but it's not explicitly stated that you can do this, which seems to work:

@bindable({ attribute:'my-property', changeHandler:'myPropertyChanged', defaultBindingMode: bindingMode.oneWay, defaultValue: undefined }) name;

It might be worthwhile to add an explicit example of this.

This is the Adding Navigation Section and here are the issues:

• Defining the app.js and app.html as stated in the document and running the app at that point, results with

INFO [aurelia] Aurelia Started
system.src.js:3987 GET http://localhost:9000/dist/css.js 404 (Not Found)M @ system.src.js:3987(anonymous function) @ system.src.js:3987b @ shim.min.js:1526o.fetch @ system.src.js:3987(anonymous function) @ system.src.js:3987(anonymous function) @ system.src.js:3987(anonymous function) @ system.src.js:3987(anonymous function) @ system.src.js:3987(anonymous function) @ system.src.js:3987(anonymous function) @ system.src.js:3987(anonymous function) @ system.src.js:3987(anonymous function) @ system.src.js:3987f @ shim.min.js:1415(anonymous function) @ shim.min.js:1423b.exports @ shim.min.js:453b.(anonymous function) @ shim.min.js:1625f @ shim.min.js:1596q @ shim.min.js:1600
shim.min.js:1444 Unhandled promise rejection Error: XHR error (404 Not Found) loading http://localhost:9000/dist/css.js(…)

Note that this is precisely the problem I was facing for last several weeks using my own mini-app, patterned after Skeleton Navigation vers 0.17.0 and 0.18.0

• The Get started guide advises to remove the whole content of the src folder, but if one runs gulp watch right after initial installation, these same files will also appear in dist folder (this is what I did for example). So, is this the reason for getting the error shown below ??

GET http://localhost:9000/dist/css.js 404 (Not Found)M @ system.src.js:3987(anonymous function) @ system.src.js:3987b @ shim.min.js:1526o.fetch @ system.src.js:3987(anonymous function) @ system.src.js:3987(anonymous function) @ system.src.js:3987(anonymous function) @ system.src.js:3987(anonymous function) @ system.src.js:3987(anonymous function) @ system.src.js:3987(anonymous function) @ system.src.js:3987(anonymous function) @ system.src.js:3987(anonymous function) @ system.src.js:3987f @ shim.min.js:1415(anonymous function) @ shim.min.js:1423b.exports @ shim.min.js:453b.(anonymous function) @ shim.min.js:1625f @ shim.min.js:1596q @ shim.min.js:1600

• There is no reference to http://localhost:9000/dist/css.js in the whole application so this error message must be a consequence of some "configuration by default" that is not being met.

Ideally a resolution independent SVG file but high res bitmaps at the least for "retina" displays.

command gulp watch applied to the app described here results with

DEBUG [templating] importing resources for undefined ["nav-bar.html", "bootstrap/css/bootstrap.css"]
aurelia-logging-console.js:38 DEBUG [templating] importing resources for undefined []
aurelia-logging-console.js:38 DEBUG [templating] importing resources for undefined []

The following code snippet is erroneous:

import {Behavior} from 'aurelia-framework';

export class Show {
  static metadata(){
    return Behavior
      .attachedBehavior('show')
      .withProperty('value', 'valueChanged', 'show');
  }

  static inject() { return [Element]; }
  constructor(element) {
    this.element = element;
  }

  valueChanged(newValue){
    if (newValue) {
      this.element.classList.remove('aurelia-hide');
    } else {
      this.element.classList.add('aurelia-hide');
    }
  }
}

The inject function references the Element class but it is not imported at the top of the snippet, and nowhere else in the documentation indicates where to import Element from either.

It would be pretty nice if the markdown compiler used for the webpage could automatically create ID-Attributes for the headings. The reason is when you send links to people you don't have to say "go to docs and section XYZ" but could directly send a link with the proper anchor.

This is what I get when trying to look at the getting started on IE 11 and Edge. Chrome is fine.
This is the url I'm hitting http://aurelia.io/docs.html#/aurelia/framework/latest/doc/article/getting-started
Forgive me if this is the wrong repo. I couldn't find the one with the official site code.

First of all: great work releasing beta1 and the new docs!

I did not find the repository for the new documentation reader released yesterday, so I'm trying it here. Hope it's okay.. :-)

There are some articles that are quite long but don't display a scrollbar - at least on chrome desktop. It'd make it easier to see how much text is still available on the page and that - at least for me - is easier to read.

For instance the cheat sheet.

I've added the following style in developer tools to make that happen for me.

au-view.content {
    height: 100%;
    overflow: auto;
}

I would have issued a PR but didn't find a repo for the new reader.

Coming from Durandal, dynamic composition allowed a view model instance to be passed directly to the compose binding and the view would be determined dynamically based on the type of view model.

It seems this approach is not supported in Aurelia, instead you bind to a model and specify the type of view model that the compose Custom Element should create to wrap (as it is passed to activate) that model.

Is my understanding correct?
If it is, what were the reasons for not including this ability in Aurelia?

Assuming my understanding is correct, it might be worth adding a note to the docs for Durandal users to explicitly state this difference. I'd be happy to contribute this, but would like to know the reasons its not included first.

I just had a frustrating few hours with custom elements, working out the lifecycle (and specifically, figuring out that the class constructor is the wrong place to be fiddling with the DOM). Need to document all the lifecycle events of a custom element together with example code on how and when to set them up.

I have a pushState router with two routes set up like so:

{ route: "/organisations", moduleId: "modules/organisations/organisations"},
{ route: "/organisations/:org", moduleId: "modules/organisations/organisation”}

When I navigate to the second route, aurelia tries to load the view from /organisations/dist/modules/organisations/organisation.html (which 404s).

When I remove the pushState option - it works as expected (loads view from /dist/modules/organisations/organisation.html)

@EisenbergEffect suggested adding a base tag:

<base href="/" />

This fixes the issue. This is a reminder to include using a base tag in the docs if using pushState.

... most often in JSON as the name: value pair "type": "instrinct"

Is this a typo/mis-spelling of "intrinsic"? It seems pervasive. I have not seen (but cannot say I've looked exhaustively) anywhere that code is looking for the value "instrinct".

If in fact this should be "intrinsic" I would be willing to try to fix it everywhere.

We should figure out how to bundle all the libraries together in a way that can be loaded with one or two script tags. This would make it easy for people to try out Aurelia without having to install any tooling at all. It would also simplify use cases like jsbin, jsfiddle, etc..

Create a style guide as a guideline for contribution as well as a guide for the community to follow when writing their ES6 code.

Create a curated list of plugins we can begin developing on.

Current contains the following
COMPONENTS:
Buttons
Actions
Tabs
Collections
Collapsible
Select
Typehead
Dropdown
Modal
Dialog
Progress
Card
DataGrid
Table
Shadows
Grid
Color
Draggable

LAYOUT:
ui-main
ui-body
ui-section
ui-nav
ui-aside
ui-header
ui-footer
ui-view
ui-grid
ui-custom

Plugins:
uiLayoutService
uiToggle
uiAnimate
uiWaves
uiText
uiBg

need to document the new feature about navigationStrategy

Hi I have been working on my next revision of my stamp-web application which is written in Aurelia.....

the readme needs to be updated to reflect more about the project, and I need to work on tests but I am actively developing it. It does not really fit with "examples" or "demos" it is more like sample application.... someone may find some nice tricks or examples..... we are using a lot of it as an example in my "business work".... I am sure as more people develop applications they will want to add them to the show-case or examples pile.....

https://github.com/stamp-web/stamp-web-aurelia

The BabelJS docs page for Bluebird Coroutines is no longer where the link in the docs points to. It is now at http://babeljs.io/docs/usage/transformers/other/bluebird-coroutines/