Skip to content

Instantly share code, notes, and snippets.

@ZoolWay
Last active January 24, 2017 10:07
Show Gist options
  • Select an option

  • Save ZoolWay/1ddd4233e3afc40d89eb64b751e1dd8f to your computer and use it in GitHub Desktop.

Select an option

Save ZoolWay/1ddd4233e3afc40d89eb64b751e1dd8f to your computer and use it in GitHub Desktop.
Aurelia Plugin Loader II
<template>
<require from="./component"></require>
<require from="./comp2!gate"></require><!-- Issue 1 -->
<h2>Plugin Loader</h2>
<hr />
<div>
<h3>Component direct</h3>
<component></component>
</div>
<hr />
<div>
<h3>Comp2 direct</h3>
<comp2></comp2><!-- Issue 2 -->
</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!gate"></compose><!-- Issue 3 -->
</div>
<hr />
<div>
<div repeat.for="msg of messages">
${msg}
</div>
</div>
</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</p>
</template>
import { useView } from 'aurelia-framework';
console.info('Comp2 module loaded');
@useView('./comp2.html')// Issue 4
export class Comp2 {
/*getViewStrategy() {
return './compxxxxxx2.html';
}*/
}
<template>
<p style="border: 1px solid gray; padding: 1rem;">Component</p>
</template>
export class Component {
}
<!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 { DOM } from 'aurelia-pal-browser';
export function configure(aurelia) {
console.info('Adding plugin');
const loader = aurelia.loader;
loader.addPlugin('gate', {
fetch(address) {
console.info('Intercepted:', address);
var tmpParts = address.split('.');
var extension = tmpParts[tmpParts.length - 1].toLowerCase();
if (extension == 'css') {
console.debug('Loading as styles', address);
return loader.loadText(address);
/*return loader.loadText(address).then((cssText) => {
DOM.injectStyles(cssText); // not sure if best way...
});*/
} else if(extension == 'html') {
console.debug('Loading as template:', address);
return loader.loadTemplate(address);
} else {
console.debug('Loading as module:', address);
return loader.loadModule(address);
}
}
});
aurelia.use
.standardConfiguration()
;
aurelia.start().then(() => aurelia.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment