Skip to content

Instantly share code, notes, and snippets.

@ZoolWay

ZoolWay/app.html

Last active February 11, 2024 22:35
Show Gist options
  • Save ZoolWay/c7ed477bc652540ed8b0702d843f1832 to your computer and use it in GitHub Desktop.
Save ZoolWay/c7ed477bc652540ed8b0702d843f1832 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Plugin Loader
Raw
app.html
<template>
<require from="./component"></require>
<require from="./comp2!gate"></require><!-- Issue 1 -->
<require from="./styles.css!gate"></require>
<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>
Raw
app.js
//import { inject, TaskQueue } from 'aurelia-framework';
export class App {
messages = undefined;
constructor() {
this.messages = new Array();
this.messages.push('Start');
}
}
Raw
comp2.html
<template>
<p style="border: 1px solid orange; padding: 1rem;">Comp2</p>
</template>
Raw
comp2.js
console.info('Comp2 module loaded');
export class Comp2 {
}
Raw
component.html
<template>
<p style="border: 1px solid gray; padding: 1rem;">Component</p>
</template>
Raw
component.js
export class Component {
}
Raw
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://unpkg.com/systemjs@0.20.0-rc.4/dist/system.js"></script>
<script>
console.info('Start');
System.config({
transpiler: 'plugin-babel',
map: {
'plugin-babel': 'https://unpkg.com/systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'https://unpkg.com/systemjs-plugin-babel/systemjs-babel-browser.js',
'aurelia-binding': 'https://unpkg.com/aurelia-binding/dist/amd/aurelia-binding.js',
'aurelia-bootstrapper': 'https://unpkg.com/aurelia-bootstrapper/dist/amd/aurelia-bootstrapper.js',
'aurelia-dependency-injection': 'https://unpkg.com/aurelia-dependency-injection/dist/amd/aurelia-dependency-injection.js',
'aurelia-event-aggregator': 'https://unpkg.com/aurelia-event-aggregator/dist/amd/aurelia-event-aggregator.js',
'aurelia-framework': 'https://unpkg.com/aurelia-framework/dist/amd/aurelia-framework.js',
'aurelia-history': 'https://unpkg.com/aurelia-history/dist/amd/aurelia-history.js',
'aurelia-history-browser': 'https://unpkg.com/aurelia-history-browser/dist/amd/aurelia-history-browser.js',
'aurelia-loader': 'https://unpkg.com/aurelia-loader/dist/amd/aurelia-loader.js',
'aurelia-loader-default': 'https://unpkg.com/aurelia-loader-default/dist/amd/aurelia-loader-default.js',
'aurelia-logging': 'https://unpkg.com/aurelia-logging/dist/amd/aurelia-logging.js',
'aurelia-logging-console': 'https://unpkg.com/aurelia-logging-console/dist/amd/aurelia-logging-console.js',
'aurelia-metadata': 'https://unpkg.com/aurelia-metadata/dist/amd/aurelia-metadata.js',
'aurelia-pal': 'https://unpkg.com/aurelia-pal/dist/amd/aurelia-pal.js',
'aurelia-pal-browser': 'https://unpkg.com/aurelia-pal-browser/dist/amd/aurelia-pal-browser.js',
'aurelia-path': 'https://unpkg.com/aurelia-path/dist/amd/aurelia-path.js',
'aurelia-polyfills': 'https://unpkg.com/aurelia-polyfills/dist/amd/aurelia-polyfills.js',
'aurelia-router': 'https://unpkg.com/aurelia-router/dist/amd/aurelia-router.js',
'aurelia-route-recognizer': 'https://unpkg.com/aurelia-route-recognizer/dist/amd/aurelia-route-recognizer.js',
'aurelia-task-queue': 'https://unpkg.com/aurelia-task-queue/dist/amd/aurelia-task-queue.js',
'aurelia-templating': 'https://unpkg.com/aurelia-templating/dist/amd/aurelia-templating.js',
'aurelia-templating-binding': 'https://unpkg.com/aurelia-templating-binding/dist/amd/aurelia-templating-binding.js',
'aurelia-templating-resources': 'https://unpkg.com/aurelia-templating-resources/dist/amd',
'aurelia-templating-router': 'https://unpkg.com/aurelia-templating-router/dist/amd',
},
packages: {
'/': {
defaultExtension: 'js',
},
'aurelia-templating-resources': {
main: 'aurelia-templating-resources.js',
defaultExtension: 'js',
},
'aurelia-templating-router': {
main: 'aurelia-templating-router.js',
defaultExtension: 'js',
}
}
});
function patchDefaultLoader(DefaultLoader) {
// fix issue where the map function was using `System.map[id] = source`
// https://github.com/aurelia/loader-default/blob/1.0.0/src/index.js#L222
DefaultLoader.prototype.map = function(id, source) {
// System.map[id] = source; // <--- original
System.config({ map: { [id]: source } }); // <--- fix
};
}
System.import('aurelia-loader-default')
.then(({ DefaultLoader }) => patchDefaultLoader(DefaultLoader))
.then(() => System.import('aurelia-bootstrapper'));
</script>
</body>
</html>
Raw
main.js
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());
}
Raw
styles.css
body {
font-family: Tahoma;
}
Raw
tsconfig.json
{
"version": "1.8.10",
"compilerOptions": {
"rootDir": "./",
"sourceMap": true,
"target": "es6",
"module": "amd",
"declaration": false,
"noImplicitAny": false,
"noResolve": true,
"removeComments": true,
"noLib": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment