Create a plugin

[nchanged]

We need a plugin that:

1) Injects aurelia loader into the bundle 2) Injects dependencies

  + aurelia-framework
    + aurelia-polyfills
    + aurelia-fetch-client
    + aurelia-pal-browser
    + aurelia-animator-css
    + aurelia-logging-console 
    + aurelia-templating-binding 
    + aurelia-templating-resources 
    + aurelia-event-aggregator 
    + aurelia-history-browser 
    + aurelia-templating-router

[vegarringdal]

So this plugin will pretty much just require the loader and aurleia-boostrap so we dont haveto do this:

import 'fuse-box-aurelia-loader'
import 'aurelia-bootstrapper';

Info for later, looks like this is all...

+ aurelia-bootstrapper
    + aurelia-framework
    + aurelia-pal
    + aurelia-metadata
    + aurelia-loader-default
    + aurelia-polyfills
    + aurelia-fetch-client
    + aurelia-pal-browser
    + aurelia-animator-css
    + aurelia-logging-console 
    + aurelia-templating-binding 
    + aurelia-templating-resources 
    + aurelia-event-aggregator 
    + aurelia-history-browser 
    + aurelia-templating-router`

[nchanged]

So how would fuse-box-aurelia-loader look like in the end? CommonJs? If yes, we need to add import every single dependency in the index.

[nchanged]

Or it's faster if we publish a fusebox bundle

[vegarringdal]

Im all for making simple plugin to autoload loader and bootstrapper. & making the loader to fusebox package 👍 Its not like any other bundler is going to need it :-)

[nchanged]

@vegarringdal believe it or not WebPack swallows a minified fusebox bundle =) and works with it.

[vegarringdal]

@arjendeblok

Played around making a plugin to autoload loader and boostrapper

here is the code, need to put it somewhere for now for later never made plugin, so this can get A LOT better

const AureliaPluginClass = class {
    constructor(options) {
        if(options.addDep){
            this.dependencies = [
                'fuse-box-aurelia-loader',
                'aurelia-bootstrapper',
                'aurelia-framework',
                'aurelia-pal',
                'aurelia-metadata',
                'aurelia-loader-default',
                'aurelia-polyfills',
                'aurelia-fetch-client',
                'aurelia-pal-browser',
                'aurelia-animator-css',
                'aurelia-logging-console',
                'aurelia-templating-binding',
                'aurelia-templating-resources',
                'aurelia-event-aggregator',
                'aurelia-history-browser',
                'aurelia-templating-router'
            ]
        }
    }
    init(context){
      //todo, but needs to be here
    }
    bundleStart(context){
      //todo  
    }
    bundleEnd(context) {
        context.source.addContent(`          
            FuseBox.import('fuse-box-aurelia-loader');
            FuseBox.import('aurelia-bootstrapper');
            console.log("fuse-box-aurelia-loader & aurelia-bootstrapper loaded")
        `);
    }
}

const AureliaPlugin = (options) => {
    return new AureliaPluginClass(options);
}

const fuseBox = FuseBox.init({
    homeDir: "src",
    outFile: "bundle.js",
    sourceMap: {
        bundleReference: "bundle.js.map",
        outFile: "bundle.js.map",
    },
    plugins: [
        fsbx.CSSPlugin(),
        fsbx.HTMLPlugin({
            useDefault: true
        }),
        fsbx.TypeScriptHelpers(),
        fsbx.SourceMapPlainJsPlugin(),
        AureliaPlugin({addDep:false})
    ]
});

[nchanged]

It would be cool to automatically inject all dependencies tho..

[vegarringdal]

yes, but I have no clue how to do that :-) Any hints ? Can I add pure ts code it it will be transpiled too ? Because we could mabe inject the entire fuse-box-aurelia-package even though it might be simple for people to come with bugfixes if this was a seperate source If we are going to add/inject all dependencies then should have it as a option {addDep:true}

[vegarringdal]

figured it out, updated code comment above, looks like its working

[ghost]

Will this allow me to just have fuse.bundle("vendor").instructions('~ main.ts') in my code and it would work with aurelia? Any plans on officially adding the AureliaPlugin to fuse-box?

[nchanged]

@stevensheehy we need to yes, gotta talk to @vegarringdal

[vegarringdal]

Dont see the need for official plugin, since most would want to control the bundles, but for getting bootstrap and loader ready someone could add this

var aureliaFuseboxBootstrapPlugin =function() {
    var loader = function(){}
    loader.prototype.init = function(context) {}
    loader.prototype.bundleEnd = function(context) {
        context.source.addContent(`FuseBox.import("fuse-box-aurelia-loader")`);
        context.source.addContent(`FuseBox.import("aurelia-bootstrapper")`);
    }
    return new loader();
}

[vegarringdal]

closing this, I would not like a plugin that injected everything, new fusebox is good at making vendor bundles etc, so this should be up to user, so closing this