@bloomstack/stem - npm Package Compare versions

Comparing version 1.0.0-alpha.2 to 1.0.0-alpha.3

cli/build/index.js

@@ -55,5 +55,7 @@ const theme = require('../theme');
                     alias: 'w',
+                    describe: "Will watch source files for changes and recompile on demand",
                     default: false
                 })
                 .option('dev', {
+                    describe: "Builds in development mode",
                     default: false
@@ -63,4 +65,9 @@ })
                     alias: 'o',
+                    describe: "The output directory to build to",
                     default: path.join(cwd, '/dist')
                 })
+                .option('config', {
+                    alias: 'c',
+                    describe: "If provided you can override all builder options with your own module"
+                })
             })
@@ -75,16 +82,32 @@ },
         options.mode = argv.dev?'development':'production';
-        ['debug', 'watch', 'output', 'src'].forEach((key) => {
+        ['debug', 'watch', 'output', 'src', 'config', 'dev'].forEach((key) => {
             options[key] = argv[key];
-        })
+        });
 
-        let config = defaults(cwd, options);
+        let buildOptions = [];
 
-        config.state = {};
+        // pickup user config
+        if ( options.config ) {
+            let userOptions = require(path.resolve(path.join(cwd, options.config)));
+            if ( userOptions.constructor !== Array ) {
+                userOptions = [userOptions];
+            }
+            buildOptions = buildOptions.concat(userOptions);
+        } else {
+            // defaults to no user options 
+            buildOptions.push({});
+        }
 
-        build(config, options)
-            .catch(err => {
-                console.log(err.stack);
-                console.error(theme.error(err));
-            });
+        return Promise.all(buildOptions.map((userOptions) => {
+            userOptions = Object.assign({}, options, userOptions);
+            let config = defaults(cwd, userOptions);
+            config.state = {};
+
+            return build(config, userOptions)
+                .catch(err => {
+                    console.log(err.stack);
+                    console.error(theme.error(err));
+                });
+        }));
     }
 }

cli/build/webpack/index.js

@@ -5,2 +5,3 @@ const theme = require('../../theme');
 const path = require('path');
+const WebServer = require('./webServer');
 
@@ -26,6 +27,2 @@ const modules = [
 
-        externals: {
-            jquery: 'jQuery'
-        },
-
         optimization: {
@@ -73,6 +70,24 @@ minimizer: [
         config.output = Object.assign({}, config.output || {}, {
-            path: path.resolve(options.output)
+            path: path.resolve(options.output),
         });
     }
 
+    if ( options.filename ) {
+        config.output = Object.assign({}, config.output || {}, {
+            filename: options.filename,
+        });
+    }
+
+    if ( options.library ) {
+        config.output = Object.assign({}, config.output || {}, {
+            library: options.library
+        });
+    }
+
+    if ( options.libraryTarget ) {
+        config.output = Object.assign({}, config.output || {}, {
+            libraryTarget: options.type
+        });
+    }
+
     if ( options.debug ) {
@@ -96,2 +111,5 @@ console.log(config);
             let watchOptions = Object.assign({}, {
+                devServer: {
+                    contentBase: options.output,
+                },
                 aggregateTimeout: 300,
@@ -105,3 +123,3 @@ ignored: /node_modules/,
             }
-
+            
             compiler.watch(watchOptions, (err, stats) => {
@@ -123,2 +141,7 @@ console.log(theme.success("Building..."));
             });
+
+            if ( options.dev ) {
+                WebServer(config, options, compiler);
+            }
+
         } else {
@@ -125,0 +148,0 @@ compiler.run((err, stats) => {

demo/app.js

 import WebApp from '../src/index';
+import Resources from '../src/resources';
 import { ChildToggle } from '@bloomstack/panda/es/utils';
-import $ from 'jquery';
 
@@ -9,7 +9,11 @@ import './style.scss';
 import { Home, Page1, Page2 } from './pages';
+import FontAwesome from '../src/thirdparty/fontawesome';
 
+let $ = null;
+
 export default class DemoApp extends WebApp {
 
     requiredComponents = [
-        ChildToggle
+        ChildToggle,
+        FontAwesome
     ]
@@ -24,19 +28,19 @@
             enabled: false,
-            selector: () => $(this.selector).find('.content:first')
+            selector: () => this.$(this.selector).find('.content:first')
         });
     }
 
+    async onJqueryLoaded(jQuery) {
+        $ = jQuery;
+    }
+
     async onAppStart() {
-        this.togglePage('home');
+        const toggler = ChildToggle.of(this);
+        await toggler.toggle('home');
     }
 
-    async togglePage(pageName) {
-        console.log(this._components);
+    async onRouteChange(router, route) {
         const toggler = ChildToggle.of(this);
-        if ( toggler ) {
-            console.log(toggler);
-            await toggler.toggle(pageName);
-        }
+        await toggler.toggle(route);
     }
-
 }

package.json

 {
   "name": "@bloomstack/stem",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "description": "A js bloomstack app starter.",
@@ -10,3 +10,4 @@ "main": "src/index.js",
   "scripts": {
-    "build:demo": "stem build ./demo -o ./demo/dist",
+    "build:demo": "stem build ./demo -c ./stem.demo.config.js",
+    "dev:demo": "stem build ./demo -c ./stem.demo.config.js --watch --dev",
     "clean:demo": "stem clean ./demo/dist"
@@ -42,2 +43,3 @@ },
     "chalk": "^2.4.1",
+    "express": "^4.16.4",
     "file-loader": "^2.0.0",
@@ -52,2 +54,3 @@ "fs-extra": "^7.0.1",
     "webpack": "^4.27.1",
+    "webpack-dev-middleware": "^3.4.0",
     "webpack-livereload-plugin": "^2.1.1",
@@ -54,0 +57,0 @@ "yargs": "^12.0.5"

src/HTML.js

 import Component, { Container, safe } from '@bloomstack/panda';
-import $ from 'jquery';
+import Resources from './resources';
+import JQuery from './thirdparty/jquery';
 
+let $ = null;
+
 /**
@@ -18,3 +21,8 @@ * Base page class for bloomstack applications
 
+    async onJqueryLoaded(jQuery) {
+        $ = jQuery;
+    }
+
     async onUpdate() {
+        await this.broadcast('onPrepareRender', this, (this.baseComponent || this).props);
         if ( this.template ) {
@@ -26,2 +34,6 @@ this.html = this.template((this.baseComponent || this).props);
     async onAfterUpdate() {
+        if ( !$ ) {
+            return;
+        }
+
         let selector = safe(this.selector);
@@ -28,0 +40,0 @@

src/HTMLRouter.js

 import Component from '@bloomstack/panda';
-import $ from 'jquery';
+//import $ from 'jquery';
 import HTML from './HTML';
@@ -15,2 +15,6 @@
 
+    async onJqueryLoaded(jQuery) {
+        $ = jQuery;
+    }
+
     async onBeforeRender(web) {
@@ -17,0 +21,0 @@ web.$el

src/index.js

 import Component from '@bloomstack/panda';
+import { Event } from '@bloomstack/panda/es/utils';
+import Resources from './resources';
 import HTML from './HTML';
 import HTMLRouter from './HTMLRouter';
-import $ from 'jquery';
 
+import JQuery from './thirdparty/jquery';
+import Bootstrap from './thirdparty/bootstrap';
+//import $ from 'jquery';
+
+let $;
+
 export { HTML, HTMLRouter, WebApp };
 
+export class WebAppInitEvent extends Event {
+    constructor(app, resources) {
+        super(false);
+
+        this.app = app;
+        this.resources = resources;
+    }
+}
+
 /**
@@ -14,3 +30,6 @@ * Bloomstack apps base application class
         HTML,
-        HTMLRouter
+        HTMLRouter,
+        Resources,
+        JQuery,
+        Bootstrap
     ]
@@ -21,17 +40,31 @@
         this.selector = selector;
+        this.name = 'WebApp';
     }
 
+    get $() {
+        return JQuery.of(this).$;
+    }
+
     async onInit() {
-        $(this.selector).addClass("bloomstack-app");
+        this.resources = Resources.of(this);
+        this.canUpdate = false;
+
+        return null;
     }
 
-    async onLateStart() {
-        this.send("onAppStart");
+    async onStart() {
+        let e = new WebAppInitEvent(this, this.resources);
+        return await this.broadcast('onAppInit', e);
     }
 
-    async onRouteChange(router, route) {
-        this.togglePage(route);
+    async onJqueryLoaded(jQuery) {
+        $ = jQuery;
     }
+
+    async onAfterAllResourcesLoaded(resources) {
+        this.canUpdate = true;
+        return await this.update().then(() => this.broadcast('onAppStart'));
+    }
 }
 
 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37891

increased by40.43%

Number of package files

38

increased by18.75%

Lines of code

838

increased by56.05%

Worsened metrics

Dev dependency count

36

increased by5.88%

Number of low supply chain risk alerts

5

increased by25%

No dependency changes