ZoolWay/app.html

## app.html
<template>
  <require from="./component"></require>
  <require from="./comp2"></require>
  <require from="./comp3!gate"></require>
  <require from="./ext-styles.css!gate" as="scoped"></require>
  <h2>Plugin Loader</h2>
  <hr />
  <div>
    <h3>Component direct</h3>
    <component></component>
  </div>
  <hr />
  <div>
    <h3>Comp2 direct</h3>
    <comp2></comp2><
  </div>
  <hr />
  <div>
    <h3>Comp3 (gate in require) direct</h3>
    <comp3></comp3>
    <comp3></comp3>
  </div>
  <hr />
  <div>
    <h3>Component in compose</h3>
    <compose view-model="./component"></compose>
  </div>
  <hr />
  <div>
    <h3>Comp2 in compose</h3>
    <compose view-model="./comp2"></compose>
  </div>
  <div>
    <h3>Comp3 with gate in compose</h3>
    <compose view-model="./comp3!gate"></compose>
    <compose view-model="./comp3!gate"></compose>
  </div>
  <hr />
</template>

## app.js
//import { inject, TaskQueue } from 'aurelia-framework';

export class App {

  messages = undefined;

  constructor() {
    this.messages = new Array();
    this.messages.push('Start');
  }

}

## comp2.html
<template>
  <p style="border: 1px solid orange; padding: 1rem;">Comp2: ${myVar}</p>
</template>

## comp2.js
import { useView } from 'aurelia-framework';

console.info('Comp2 module loaded');

//@useView('./comp2.html')// Issue 4
export class Comp2 {

  myVar = 'Hello from Comp2, my number is: ' + Math.floor((Math.random() * 100) + 1);
  /*getViewStrategy() {
    return './compxxxxxx2.html';
  }*/
}

## component.html
<template>
  <p style="border: 1px solid gray; padding: 1rem;">Component</p>
</template>

## component.js
export class Component {
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      console.info('START');
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
import { ViewLocator, DOM } from 'aurelia-framework';

export function configure(aurelia) {
  console.info('Adding plugin');
  const loader = aurelia.loader;
  loader.addPlugin('gate', {
    fetch(address) {

      console.info('Intercepted:', address);

      // gist.host/run/1485511037643/script.js:1 Hello World!
      // https://gist.host/run/1485514524192/ext-styles.css
      var idxLastSlash = address.lastIndexOf('/');
      var resourceId = address.substr(idxLastSlash+1);
      var resourceParts = resourceId.split('.');
      var extension = resourceParts[resourceParts.length-1];
      var newAddress = 'https://gist.host/run/1485514524192/' + resourceId;

      console.info('Changed to:', newAddress);

      if (extension === 'css') {
        console.debug('CSS load for resource', resourceId);
        return loader.loadText(newAddress).then((cssText) => {
          DOM.injectStyles(cssText);
        });
      } else {
        console.debug('Module load for resource', resourceId);
        return System.import(newAddress);
      }
    }
  });

  // monkey patch order when adding template-registry-entry
  loader.org_applyPluginToUrl = loader.applyPluginToUrl;
  loader.applyPluginToUrl = (url, pluginName) => {
    let idxFirstPlugin = url.indexOf('!');
    if ((pluginName === 'template-registry-entry') && (idxFirstPlugin >= 0)) {
        let currentPlugins = url.substr(idxFirstPlugin);
        let newUrl = url.substr(0, idxFirstPlugin) + '!' + pluginName + currentPlugins;
        return newUrl;
    } else {
        return `${url}!${pluginName}`;
        //return loader.org_applyPluginToUrl(url, pluginName);
    }
  };

  aurelia.use.standardConfiguration();
  aurelia.start().then(() => aurelia.setRoot());
}
	<template>
	<require from="./component"></require>
	<require from="./comp2"></require>
	<require from="./comp3!gate"></require>
	<require from="./ext-styles.css!gate" as="scoped"></require>
	<h2>Plugin Loader</h2>
	<hr />
	<div>
	<h3>Component direct</h3>
	<component></component>
	</div>
	<hr />
	<div>
	<h3>Comp2 direct</h3>
	<comp2></comp2><
	</div>
	<hr />
	<div>
	<h3>Comp3 (gate in require) direct</h3>
	<comp3></comp3>
	<comp3></comp3>
	</div>
	<hr />
	<div>
	<h3>Component in compose</h3>
	<compose view-model="./component"></compose>
	</div>
	<hr />
	<div>
	<h3>Comp2 in compose</h3>
	<compose view-model="./comp2"></compose>
	</div>
	<div>
	<h3>Comp3 with gate in compose</h3>
	<compose view-model="./comp3!gate"></compose>
	<compose view-model="./comp3!gate"></compose>
	</div>
	<hr />
	</template>
	//import { inject, TaskQueue } from 'aurelia-framework';

	export class App {

	messages = undefined;

	constructor() {
	this.messages = new Array();
	this.messages.push('Start');
	}

	}
	<template>
	<p style="border: 1px solid orange; padding: 1rem;">Comp2: ${myVar}</p>
	</template>
	import { useView } from 'aurelia-framework';

	console.info('Comp2 module loaded');

	//@useView('./comp2.html')// Issue 4
	export class Comp2 {

	myVar = 'Hello from Comp2, my number is: ' + Math.floor((Math.random() * 100) + 1);
	/*getViewStrategy() {
	return './compxxxxxx2.html';
	}*/
	}
	<template>
	<p style="border: 1px solid gray; padding: 1rem;">Component</p>
	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	console.info('START');
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	import { ViewLocator, DOM } from 'aurelia-framework';

	export function configure(aurelia) {
	console.info('Adding plugin');
	const loader = aurelia.loader;
	loader.addPlugin('gate', {
	fetch(address) {

	console.info('Intercepted:', address);

	// gist.host/run/1485511037643/script.js:1 Hello World!
	// https://gist.host/run/1485514524192/ext-styles.css
	var idxLastSlash = address.lastIndexOf('/');
	var resourceId = address.substr(idxLastSlash+1);
	var resourceParts = resourceId.split('.');
	var extension = resourceParts[resourceParts.length-1];
	var newAddress = 'https://gist.host/run/1485514524192/' + resourceId;

	console.info('Changed to:', newAddress);

	if (extension === 'css') {
	console.debug('CSS load for resource', resourceId);
	return loader.loadText(newAddress).then((cssText) => {
	DOM.injectStyles(cssText);
	});
	} else {
	console.debug('Module load for resource', resourceId);
	return System.import(newAddress);
	}
	}
	});

	// monkey patch order when adding template-registry-entry
	loader.org_applyPluginToUrl = loader.applyPluginToUrl;
	loader.applyPluginToUrl = (url, pluginName) => {
	let idxFirstPlugin = url.indexOf('!');
	if ((pluginName === 'template-registry-entry') && (idxFirstPlugin >= 0)) {
	let currentPlugins = url.substr(idxFirstPlugin);
	let newUrl = url.substr(0, idxFirstPlugin) + '!' + pluginName + currentPlugins;
	return newUrl;
	} else {
	return `${url}!${pluginName}`;
	//return loader.org_applyPluginToUrl(url, pluginName);
	}
	};

	aurelia.use.standardConfiguration();
	aurelia.start().then(() => aurelia.setRoot());
	}