Merge pull request #27 from vegarringdal/new_loader

Removed hmr/reload and better errors

Author: vegarringdal

README.md

@@ -1,39 +1,35 @@
 # fuse-box-aurelia-loader
 
-###How to install
+### How to install
 ```npm install git://github.com/fuse-box/fuse-box-aurelia-loader```
 
-###Sample
+
+### How to use
+
 ```javascript
 
 // optional..
 // activate logging (when aurelia developmentLogging is used)
-(<any>window).FUSEBOX_AURELIA_LOADER_LOGGING = true; 
+// have this as optional, since it prints out a lot.
+window.FUSEBOX_AURELIA_LOADER_LOGGING = true; 
 
-// activate hot reload, need aurelia-hot-module-reload to work, and "useCache" needs to be set to true
-(<any>window).FUSEBOX_AURELIA_LOADER_HMR = true; 
 
-// just reload document on fusebox hrm event (file change)
-(<any>window).FUSEBOX_AURELIA_LOADER_RELOAD = true; 
-
-//These can also be set by using the "EnvPlugin" in fuse.
-//fb.EnvPlugin({ 
+//These can also be set by using the "EnvPlugin" in fuse build setup
+// EnvPlugin({ 
 //    FB_AU_LOG: false,
-//    FB_AU_HMR: false,
-//    FB_AU_RELOAD: true 
 //})
 
-// if you are having issues check console for FuseBox.import("process").env to make sure it set
-
-
+// TIP: If you are having issues check console for FuseBox.import("process").env to make sure it set
 
 
+// The next 2 import statements can be replaced by plugin in your fuse build setup
+// See "autoLoadAureliaLoaders" in next code block
 // add custom loader for fuse
 import 'fuse-box-aurelia-loader';
-
 // start aurelia bootstrapper
 import 'aurelia-bootstrapper';
 
+
 // aurelia configuration
 export function configure(aurelia) {
   aurelia.use
@@ -45,3 +41,23 @@ export function configure(aurelia) {
 ```
 
 
+### Plugin sample
+Simple auto load plugin to inject the loaders
+
+```javascript
+var autoLoadAureliaLoaders =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();
+}
+```
+
+
+### How to develop/improve loader
+ * run `node setup` to to npm install in root and sample folder
+ * run `gulp watch` to start sample
+ * run `gulp build` to create new build

sample/fuse.js renamed to build/watch.js

@@ -1,39 +1,79 @@
+var gulp = require('gulp');
+var path = require('path');
+var runSequence = require('run-sequence');
+var autoLoadAureliaLoaders =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();
+}
+
+// so fusebox uses correct path
+process.env.PROJECT_ROOT = path.resolve(process.cwd(), './sample/')
+
 // builtin plugins
 const {
     RawPlugin,
     FuseBox,
     HTMLPlugin,
     CSSPlugin,
     Sparky
-} = require("fuse-box");
+} = require("../sample/node_modules/fuse-box");
 
+var TypeHelper = require('../sample/node_modules/fuse-box-typechecker').TypeHelper
 
 
+gulp.task('copy-fonts', () => {
+    return gulp.src('node_modules/materialize-css/dist/fonts/**/**.**')
+        .pipe(gulp.dest('fonts/'));
+});
 
 
-Sparky.task('copy-fonts', () => {
-    Sparky.src('node_modules/materialize-css/dist/fonts/**/**.**')
-        .dest('fonts/');
+// sample typechecker
+gulp.task('sample-typechecker', function () {
+    // set correct dir first..
+    process.chdir('./sample');
+    var testWatch = TypeHelper({
+        tsConfig: './tsconfig.json',
+        name: 'Sample Watch'
+    })
+    testWatch.runWatch('./src')
+    return true;
 });
 
 
+gulp.task('plugin-typechecker', function () {
+    // set correct dir first..
+
+    var testWatch = TypeHelper({
+        tsConfig: './tsconfig.json',
+        name: 'Plugin Watch'
+    })
+    testWatch.runWatch('./src')
+    return true;
+});
+
 
 
+// this task will start fusebox
+gulp.task('fuse-sample', function () {
 
-Sparky.task('dev', () => {
-    // typechecker (minor bug first time when caching vendor bundle, its on my todo list(vegar)... just need to talk to fusebox team..)
-    const TypeCheckPlugin = require('fuse-box-typechecker').TypeCheckPlugin;
+    // init fusebox
     const fuse = FuseBox.init({
         homeDir: './src',
         output: './dist/$name.js',
         plugins: [
-            TypeCheckPlugin(),
+            autoLoadAureliaLoaders(),
             CSSPlugin(),
             HTMLPlugin(),
-            RawPlugin(['.css', '.woff'])
+            RawPlugin(['.css'])
         ]
     });
 
+
     fuse.register('materialize-css-styles', {
         homeDir: 'node_modules/materialize-css/dist/css',
         main: 'materialize.css',
@@ -48,7 +88,7 @@ Sparky.task('dev', () => {
         instructions: '**/*.{html,css,js}'
     });
 
-
+    // vendor bundle
     fuse.bundle("vendor")
         .cache(true)
         .instructions(` 
@@ -61,15 +101,16 @@ Sparky.task('dev', () => {
         + aurelia-fetch-client
         + aurelia-pal-browser
         + aurelia-animator-css
+        + fuse-box-css
         + aurelia-logging-console 
         + aurelia-templating-binding 
         + aurelia-templating-resources 
         + aurelia-event-aggregator 
         + aurelia-history-browser 
         + aurelia-templating-router
         + aurelia-materialize-bridge
-        + materialize-css-styles`)
-        .alias({
+        + materialize-css-styles
+        `).alias({
             'jQuery': 'jquery'
         })
         .shim({
@@ -93,54 +134,47 @@ Sparky.task('dev', () => {
             + [**/*.{ts,html,css}]
         `);
 
-
-
+    // web server    
     fuse.dev({
         root: './'
     });
-    fuse.run();
-});
-
 
+    // run
+    return fuse.run()
+});
 
 
+// this task will start fusebox
+gulp.task('fuse-plugin', function () {
 
-Sparky.task('loader', () => {
-    // typechecker (minor bug first time when caching vendor bundle, its on my todo list(vegar)... just need to talk to fusebox team..)
-    const TypeCheckPlugin = require('fuse-box-typechecker').TypeCheckPlugin;
+    // package init
     const fuse = FuseBox.init({
         homeDir: '../src',
         output: './dist/$name.js',
-        plugins: [
-            TypeCheckPlugin(),
-            CSSPlugin(),
-            HTMLPlugin(),
-            RawPlugin(['.css', '.woff'])
-        ],
+        plugins: [],
         package: {
             name: "fuse-box-aurelia-loader",
             main: "fuse-box-aurelia-loader.ts"
         },
     });
 
 
-    // app bundle
-    // todo, we need to have vendor bundle and app bundle...
+    // plugin bundle
     fuse.bundle('fuse-box-aurelia-loader')
         .watch().cache(false)
         .instructions(`
             [*.ts]
-           
         `).sourceMaps(true);
 
 
-
-
-    fuse.run();
+    //build file    
+    return fuse.run();
 });
 
 
-// run dev and loader build in parallell
-Sparky.task("run", ["&loader", "&dev"], () => {
-
+// this task will start fusebox
+gulp.task('watch', function () {
+    return runSequence(
+        'fuse-plugin', 'fuse-sample', 'plugin-typechecker', 'sample-typechecker', 'copy-fonts'
+    );
 });