feat(all): new template registry and global loader

This is a BREAKING CHANGE. The new base loader manages a template
registry. This is uses to properly track loaded templates, their
dependencies, the final view resources associated with each template
and the factory that instantiates views from the template. This is a
foundational pieces used by concrete loaders. The default-loader
leverages this as part of the way it plugs into the system and
require.js loader.

This commit also the old createDefaultLoader api in favor of using a
global variable for this so that it’s easier to re-use the bootstrapper.

Finally, we have changes the name of the “import” element to
“au-import” This makes it clearer that this is part of Aurelia as well
enables supporting IE9.

README.md

@@ -14,7 +14,7 @@ This library is part of the [Aurelia](http://www.aurelia.io/) platform and conta
 
 ## Dependencies
 
-This library has **NO** external dependencies other than the above Polyfills.
+* [aurelia-path](https://github.com/aurelia/path)
 
 ## Used By
 

config.js

@@ -10,6 +10,7 @@ System.config({
 System.config({
   "map": {
     "aurelia-html-template-element": "github:aurelia/html-template-element@0.1.3",
+    "aurelia-path": "github:aurelia/path@0.4.5",
     "core-js": "npm:core-js@0.4.6",
     "webcomponentsjs": "github:webcomponents/webcomponentsjs@0.5.3",
     "github:jspm/nodelibs-process@0.1.0": {

package.json

@@ -26,6 +26,7 @@
     },
     "dependencies": {
       "aurelia-html-template-element": "github:aurelia/html-template-element@^0.1.3",
+      "aurelia-path": "github:aurelia/path@^0.4.5",
       "core-js": "npm:core-js@^0.4.1",
       "webcomponentsjs": "github:webcomponents/webcomponentsjs@^0.5.2"
     }

src/index.js

@@ -1,3 +1,5 @@
+import {TemplateRegistryEntry} from './template-registry-entry';
+
 var hasTemplateElement = ('content' in document.createElement('template'));
 
 function importElements(frag, link, callback) {
@@ -11,8 +13,8 @@ function importElements(frag, link, callback) {
 }
 
 export class Loader {
-  static createDefaultLoader(){
-    throw new Error('No default loader module imported.');
+  constructor(){
+    this.templateRegistry = {};
   }
 
   loadModule(id){
@@ -27,6 +29,16 @@ export class Loader {
     throw new Error('Loader must implement loadTemplate(url).');
   }
 
+  getOrCreateTemplateRegistryEntry(id){
+    var entry = this.templateRegistry[id];
+
+    if(entry === undefined){
+      this.templateRegistry[id] = entry = new TemplateRegistryEntry(id);
+    }
+
+    return entry;
+  }
+
   importDocument(url){
     return new Promise((resolve, reject) => {
       var frag = document.createDocumentFragment();
@@ -59,4 +71,4 @@ export class Loader {
 
     return template;
   }
-}
+}

src/template-registry-entry.js

@@ -0,0 +1,65 @@
+import {relativeToFile} from 'aurelia-path';
+
+export class TemplateDependency {
+  constructor(src, name){
+    this.src = src;
+    this.name = name;
+  }
+}
+
+export class TemplateRegistryEntry {
+  constructor(id){
+    this.id = id;
+    this.template = null;
+    this.dependencies = null;
+    this.resources = null;
+    this.factory = null;
+  }
+
+  get templateIsLoaded(){
+    return this.template !== null;
+  }
+
+  get isReady(){
+    return this.factory !== null;
+  }
+
+  setTemplate(template){
+    var id = this.id,
+        auImportElements, i, ii, current, src;
+
+    this.template = template;
+    auImportElements = template.content.querySelectorAll('au-import');
+    this.dependencies = new Array(auImportElements.length);
+
+    if(auImportElements.length === 0){
+      return;
+    }
+
+    for(i = 0, ii = auImportElements.length; i < ii; ++i){
+      current = auImportElements[i];
+      src = current.getAttribute('from');
+
+      if(!src){
+        throw new Error(`au-import element in ${this.id} has no "from" attribute.`);
+      }
+
+      this.dependencies[i] = new TemplateDependency(
+        relativeToFile(src, id),
+        current.getAttribute('as')
+      );
+
+      if(current.parentNode){
+        current.parentNode.removeChild(current);
+      }
+    }
+  }
+
+  setResources(resources){
+    this.resources = resources;
+  }
+
+  setFactory(factory){
+    this.factory = factory;
+  }
+}