Loader rebuilt

[vegarringdal]

@nchanged DO NOT MERGE YET 🗡

Using more or less the webpack loader and added some to make it work with fusebox You will need to just include the raw css files now, not the cssplugin

plugins: [
            [/\.css$/, fb.RawPlugin({extensions: ['.css']})],
            fb.HTMLPlugin({
                useDefault: true
            }),
            fb.TypeScriptHelpers()
        ]

Needs more testing #12

Link to my repo: https://github.com/vegarringdal/fuse-box-aurelia-loader/tree/new_loader

[vegarringdal]

@arabsightgot a loader here too, so maybe his work better... I dont know.. https://github.com/arabsight/aurelia-loader-fusebox

Is you loader working 100%

[vegarringdal]

CSS issue

https://github.com/fuse-box/fuse-box/issues/321

[vegarringdal]

@arjendeblok Added your HMR plugin to this one

I have a bunch more Im fixing but need to sleep After tomorrow or the day after I would love to get some feedback from you Just want to finish up a little more, its a bit messy some places atm

[arjendeblok]

@vegarringdal Can you explain why you do not use the templateRegistry anymore. These are needed for the HMR plugin. And why not using the moduleRegistry anymore for caching?

[vegarringdal]

@arjendeblok Mostly worked on taking the webpack loader and modifying to work with fusebox, the old loader is not using aurelias css-resource plugin etc etc.

But this forces us to use raw plugin for css, but created issue to ask for a way to load the css when using cssplugin without injecting it, since aurelia will do this now when using

HMR: I only tried editing some html yesterday and it worked fine. But Im sure I can improve on it, got some work left I want to do this week and you can help improve it after. But please come with question, so much I dont know, so suggestions are very helpful :-) Just dont want any PR

Module registry here: https://github.com/vegarringdal/fuse-box-aurelia-loader/blob/master/src/fuse-box-aurelia-loader.ts#L177 if it exsist it returns it Cached here: https://github.com/vegarringdal/fuse-box-aurelia-loader/blob/master/src/fuse-box-aurelia-loader.ts#L190

Template registry: https://github.com/vegarringdal/fuse-box-aurelia-loader/blob/master/src/fuse-box-aurelia-loader.ts#L103

I though get got it if it existed, else it created and then we load if not loaded

[arjendeblok]

I can see the module registry caching now. But the aurelia-hot-module-plugin HMRContext constructor asks for an object that has a Loader interface extended with a moduleRegistry and templateRegistry. I added the templateRegisty some time ago to the loader to let it work. But I only see a definition of templateRegistry but in the constructor it is not instantiated anymore not it is filled with templates.

templateRegistry definition here https://github.com/vegarringdal/fuse-box-aurelia-loader/blob/master/src/fuse-box-aurelia-loader.ts#L86

initializing here in old version https://github.com/fuse-box/fuse-box-aurelia-loader/blob/master/src/fuse-box-aurelia-loader.ts#L76

filling here in old version https://github.com/fuse-box/fuse-box-aurelia-loader/blob/master/src/fuse-box-aurelia-loader.ts#L76

I cannot see HMR work for templates without this code.

[vegarringdal]

I tested this very little yesterday, just edit the welcome.html and it updated, but maybe I got lucky :joy: Ill look more into this later tonight when I have better time :-)

Thanks for having a look at it

[vegarringdal]

@arjendeblok I just tested the hmr, looks to be working this need to be set to true for it to load

(<any>window).FUSEBOX_AURELIA_LOADER_LOGGING = true;
(<any>window).FUSEBOX_AURELIA_LOADER_HMR = true;
import 'fuse-box-aurelia-loader';

Also we cant use the cssPlugin, need to use raw

[/\.css$/, fb.RawPlugin({extensions: ['.css']})],

Have to pick up the kids soon, so Ill continue cleaning up more later today. Still a lot that needs cleaning

We should prb add all aurelia libs needed under dependencies of loader, atm I have none, since I dont need then for building after I fixed typings

[vegarringdal]

For later, so I dont forget https://github.com/fuse-box/fuse-box-aurelia-loader/issues/14

[vegarringdal]

@arjendeblok @leon-andria @Thanood @nchanged

I think I got most of it cleaned up now: https://github.com/vegarringdal/fuse-box-aurelia-loader/tree/new_loader (important, look in corrent branch...) Its pretty much a copy of @niieani webpack-loader for aurelia

You should now use [/\.css$/, fb.RawPlugin({extensions: ['.css']})] instead of fb.CssPlugin() But if you use raw plugin Aurelia will inject to css with the <require> tags in the html, and ```import 'someCss.css'````wont inject. Made the textLoader of loader return "" if its not string and have no "default", so it does not break if using cssPlugin.

The first window variables in code sample under are optional if you want to try the aurelia-hot-reload, or just want it to reload when a file change

Sample:

// add custom loader for fuse
(<any>window).FUSEBOX_AURELIA_LOADER_LOGGING = true; // activate very active logging when aurelia developmentLogging is used
(<any>window).FUSEBOX_AURELIA_LOADER_HMR = true; // active hot reload
(<any>window).FUSEBOX_AURELIA_LOADER_RELOAD = true; // just reload document on changes
import 'fuse-box-aurelia-loader';

// start aurelia bootstrapper
import 'aurelia-bootstrapper';

// aurelia configuration
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin("aurelia-v-grid");

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

Im sure there is more that can get better. Atm I would have like if we could have more control of packages when they get included, something like this: https://github.com/fuse-box/fuse-box. because for plugins I need to create own bundles.

To use the sample do first npm install under the "sample" folder, then npm run build-all It will then generate 4 bundle ,

• aurelia-v-grid, my new experimental data grid so I get to test plugin with css/html/attributes,
• aurelia-framework and all its modules,
• fuse-box-aurelia-loader from the src
• app

Next run you will only need to run npm run build-app, since you have already created the other bundles from before (it might just work right away with npm run build-app, since Ive included some of the bundles

[vegarringdal]

Info to test it you can add this to the seed repo before doing npm install "fuse-box-aurelia-loader": "git://github.com/vegarringdal/fuse-box-aurelia-loader.git#new_loader",

You will need to install the aurelia-hot-module-reload and its dependencies..

[arjendeblok]

@vegarringdal I found out the 'issue' with the templateRegistry. templateRegistry is an internal variable of Loader (which FuseBoxAureliaLoader extends). It gets modified in Loader.getOrCreateTemplateRegistryEntry(address) which you call from the fuse-box loader.

[arjendeblok]

I miss the FUSEBOX_AURELIA_LOADER_LOGGING check anywhere in the new loader. Now there is always logging.

[vegarringdal]

I found out the 'issue' with the templateRegistry. templateRegistry is an internal variable of Loader (which FuseBoxAureliaLoader extends). It gets modified in Loader.getOrCreateTemplateRegistryEntry(address) which you call from the fuse-box loader.

@arjendeblok We could just remove this one then: https://github.com/vegarringdal/fuse-box-aurelia-loader/blob/new_loader/src/fuse-box-aurelia-loader.ts#L89

I miss the FUSEBOX_AURELIA_LOADER_LOGGING check anywhere in the new loader. Now there is always logging.

@arjendeblok Nice catch, I must have managed to add that one/copy old function when rebuilding the entire loader, Ill fix that later today :+1:

[arjendeblok]

@vegarringdal The line at https://github.com/vegarringdal/fuse-box-aurelia-loader/blob/new_loader/src/fuse-box-aurelia-loader.ts#L89 is only used within typescript. It does not generate any JS code. If you remove it then you will get a TypeScript error I think that the loader passed in the HMR constructor has no templateRegistry.

[arjendeblok]

@vegarringdal I cannot understand what you mean that CSS Plugin does not work. In the aurelia seed the CSS Plugin works fine with your new loader. It inject bootstrap and the styles directly in the head. What is exact the problem?

[arabsight]

@arjendeblok we want to let aurelia do the injecting part because there's more to it then just injecting css in the head, consider this. when aurelia sees:

<require from="./app.css" as="scoped"></require>

or:

@viewResources({ src: './app.css', as: 'scoped' })

it adds the scoped attr for firefox or puts the css in the element boundary if its using shadowDom. we can't use that if we inject the styles with CSSPlugin.

[vegarringdal]

@arjendeblok

I fixed that yesterday so it returns blank and dont break app, but it wont be aurelia css-resources-plugin injecting the css anymore..

https://github.com/vegarringdal/fuse-box-aurelia-loader/blob/new_loader/src/fuse-box-aurelia-loader.ts#L169

[vegarringdal]

I miss the FUSEBOX_AURELIA_LOADER_LOGGING check anywhere in the new loader. Now there is always logging.

@arjendeblok fixed

[arjendeblok]

@arabsight @vegarringdal Regarding CSS. I used import './styles/styles.css'; in main.ts in the aurelia-seed so therefor I used the CSS Plugin. If you want the Aurelia constructs then I understand that the raw plugin is needed. I will test that also.

[vegarringdal]

@arjendeblok How did the testing go? I think everything is pretty much working now😄 Do we want to merge ?

@arabsight @Thanood @leon-andria @devmondo @nchanged Any of you have any comments you want to add?

[arjendeblok]

Merge please 😋

[vegarringdal]

Merged... if there is issues we will fix it when we find it :-)