Merge pull request #9 from virtualidentityag/dependency-management

Dependency management, minification
virtualidentityag · Jan 26, 2017 · a0c0e52 · a0c0e52
2 parents 41fb39c + b8fbed1
commit a0c0e52
Show file tree

Hide file tree

Showing 18 changed files with 866 additions and 140 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = tab
+indent_size = 4
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[bower.json]
+indent_style = space
+indent_size = 2
+
+[package.json]
+indent_style = space
+indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/node_modules
+/.idea
diff --git a/README.md b/README.md
@@ -27,17 +27,31 @@ $(document).on('ready', function() {
       paths: ['js/jquery.component.js']
   },
   {
-      paths: ['js/jquery.component.js', 'css/component.css'],
+      paths: ['js/jquery.component2.js', 'css/component2.css'],
+      dependsOn: [js/jquery.component.js]
       base: 'resources-content/'          
   },
   {
-      paths: ['js/jquery.component.js', 'css/component.css'],
-      base: 'resources-content/',   
+      paths: ['js/jquery.component3.js', 'css/component3.css'],
+      dependsOn: [js/jquery.component2.js]
+      base: 'resources-content/',
       test: (function() { return true; })
   }
 ]
 ```
 
+__paths__:  array with the files to load, absolute and relative paths can be used, all files are only loaded once
+
+__dependsOn__: array with dependencies for the paths array. Note: dependencies are not loaded automatically
+
+__base__: specify a different base path for relative filenames
+
+__test__: configure a test that must return true in order to load the files
+
+In this demo the load order is: jquery.component.js -> resources-content/js/jquery.component2.js, resources-content/css/component2.css -> resources-content/js/jquery.component3.js, resources-content/css/component3.css
+
+
+---
 **Syntax for data-init attribute:**
 ```javascript
 data-init="(function($elm) { $elm.component(); })"

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "resourceLoader",
   "homepage": "https://github.com/virtualidentityag/conditional-resource-loader",
-  "version": "0.0.8",
+  "version": "1.2.0",
   "main": "resourceLoader.js"
 }
diff --git a/demo/demo-debug.html b/demo/demo-debug.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>Demo for conditional loader</title>
+		<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
+		<!--<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>-->
+		<script src="../src/resourceLoader.js"></script>
+		<script>
+			$(document).ready(function(){
+				console.log('domReady fired!');
+
+				$(window).on('resourcesReady', function() {
+					console.log('ressourcesReady fired!');
+
+					//initiazlie components with data-init attribute
+					 $('*[data-init]').each(function() {
+						 var init = eval($(this).attr('data-init'));
+						 init($(this));
+					 });
+				});
+
+				resourceLoader({
+					base: 'resources/',
+					baseMap: {
+						'##content': 'resources-content/'
+					},
+					debug: true
+				});
+			});
+		</script>
+	</head>
+	<body>
+		<div class="demo4"
+			 data-init="(function($elm) { $elm.component2(); $elm.component1(); })"
+			 data-resources="
+			 [
+			 	{
+			 		paths: ['js/jquery.component1.js']
+			 	},
+			 	{
+			 		paths: ['js/jquery.component2.js', '/demo/resources-content/css/demo4.css'],
+			 		dependsOn: ['js/jquery.component1.js']
+			 	}
+			 ]">
+			Resources are loaded in order of dependencies: component1.js -> component2.js, demo4.css
+		</div>
+	</body>
+</html>
diff --git a/demo/demo.html b/demo/demo.html
@@ -3,8 +3,9 @@
 	<head>
 		<meta charset="utf-8" />
 		<title>Demo for conditional loader</title>
-		<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
-		<script src="../resourceLoader.js"></script>
+		<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
+		<!--<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>-->
+		<script src="../src/resourceLoader.js"></script>
 		<script>
 			$(document).ready(function(){
 				console.log('domReady fired!');
@@ -29,12 +30,84 @@
 		</script>
 	</head>
 	<body>
-		<div class="demo1" data-init="(function($elm) { $elm.plugin(); })" data-resources="[{test: (function() {return true;}), paths: ['js/jquery.plugin.js', 'css/demo.css', 'css/demo1.css']}]">
+
+		<div class="demo1"
+			 data-init="(function($elm) { $elm.plugin(); })"
+			 data-resources="[
+			 	{
+			 		test: (function() {return true;}),
+			 		paths: ['js/jquery.plugin.js', 'css/demo.css', 'css/demo1.css']
+			 	}
+			 ]">
 			This component's resources (css and js) are loaded via conditional loader!
 		</div>
 
-		<div class="demo2" data-init="(function($elm) { $elm.plugin(); })" data-resources="[{paths: ['/demo/resources/js/jquery.plugin.js', '/demo/resources/css/demo.css']}, {paths: ['css/demo2.css'], base: '##content'}]">
+		<div class="demo2"
+			 data-init="(function($elm) { $elm.plugin(); })"
+			 data-resources="[
+			 	{
+			 		paths: ['/demo/resources/js/jquery.plugin.js', '/demo/resources/css/demo.css']
+			 	},
+			 	{
+			 		paths: ['css/demo2.css'],
+			 		base: '##content'
+			 	}
+			 ]">
 			This component's resources are loaded via conditional loader, using relative and absolute paths.
 		</div>
+
+		<div class="demo3"
+			 data-init="(function($elm) { $elm.plugin(); $elm.component(); })"
+			 data-resources="[
+			 	{
+			 		paths: ['/demo/resources/js/jquery.plugin.js', '/demo/resources/css/demo3.css']
+			 	},
+			 	{
+			 		paths: ['js/jquery.component.js'],
+			 		dependsOn: ['js/jquery.plugin.js']
+			 	}
+			 ]">
+			This component's resources are loaded via conditional loader. One resource depends on another. plugin.js -> component.js
+		</div>
+
+		<div class="demo4"
+			 data-init="(function($elm) { $elm.component2(); $elm.component(); $elm.component3(); })"
+			 data-resources="
+			 [
+				{
+					paths: ['js/jquery.component.js', 'css/demo.css']
+				},
+				{
+					paths: ['css/demo4.css'],
+					base: '##content'
+				},
+			 	{
+			 		paths: ['js/jquery.component2.js'],
+			 		dependsOn: ['js/jquery.component.js']
+			 	}, {
+			 		paths: ['js/jquery.component3.js'],
+			 		dependsOn: ['js/jquery.component2.js', '/demo/resources/js/jquery.plugin.js']
+			 	}
+			 ]">
+			Resources are loaded in order of dependencies: component.js -> component2.js -> component3.js<br/>
+			plugin.js is loaded on other demos or skipped. if skipped an error will be thrown, but component3.js will still be loaded
+		</div>
+
+<!--
+        <div class="demo5"
+             data-init="(function($elm) { $elm.component();})"
+             data-resources="
+                     [
+                        {
+                            paths: ['js/jquery.component5.js'],
+                            dependsOn: ['js/jquery.component6.js']
+                        }, {
+                            paths: ['js/jquery.component6.js'],
+                            dependsOn: ['js/jquery.component5.js']
+                        }
+                     ]">
+            Circle dependencies are not resolvable. resourcesReady is never triggered.
+        </div>
+-->
 	</body>
 </html>
diff --git a/demo/resources-content/css/demo4.css b/demo/resources-content/css/demo4.css
@@ -0,0 +1,12 @@
+.demo1,
+.demo2,
+.demo3,
+.demo4 {
+	font-weight: bold;
+}
+
+.demo4 {
+	padding: 20px;
+	margin-bottom: 20px;
+	background-color: greenyellow;
+}
diff --git a/demo/resources/css/demo.css b/demo/resources/css/demo.css
@@ -1,5 +1,6 @@
 .demo1,
-.demo2 {
+.demo2,
+.demo3 {
 	padding: 20px;
 	margin-bottom: 20px;
 }
diff --git a/demo/resources/css/demo3.css b/demo/resources/css/demo3.css
@@ -0,0 +1,3 @@
+.demo3 {
+    background-color: lightblue;
+}
diff --git a/demo/resources/js/jquery.component.js b/demo/resources/js/jquery.component.js
@@ -0,0 +1,65 @@
+/**
+ * @name          jQuery Boilerplate
+ * @version       1.0
+ * @lastmodified  2015-04-24
+ * @package       html-css-js
+ * @subpackage    jQuery plugin
+ * @author        JR, VI
+ *
+ * based on: http://jqueryboilerplate.com/
+ */
+
+;(function ($, window, document, undefined) {
+  'use strict';
+
+  var pluginName = 'component',
+    defaults = {
+      foo: 'bar'
+    };
+
+  // The actual plugin constructor
+  function Plugin(element, options) {
+    this.$element = $(element);
+    this.options = $.extend({}, defaults, options);
+    this.init();
+  }
+
+  // methods
+  var methods = {
+    init: function() {
+      // your init is goes here
+      this.myFunction();
+    },
+
+    myFunction: function(){
+      console.log('initializing component');
+    }
+  };
+
+  // build
+  $.extend(Plugin.prototype, methods);
+
+  // A really lightweight plugin wrapper around the constructor,
+  // preventing against multiple instantiations
+  $.fn[pluginName] = function(options) {
+    this.each(function() {
+      if(!$.data(this, 'plugin_' + pluginName)) {
+        $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
+
+        /**
+         * DEV-note: Use trigger failsafe events if other plugins depend on this plugins ready state
+         */
+        // trigger ready event on element - optional
+        //$.triggerFailsafeEvent($(this), 'plugin_' + pluginName + '.ready');
+      }
+    });
+
+    // trigger ready event globally - optional
+    //if(this.length > 0) {
+    //    $.triggerFailsafeEvent($(window), 'plugin_' + pluginName + '.ready_all');
+    //}
+
+    return this;
+  };
+
+})(jQuery, window, document);
diff --git a/demo/resources/js/jquery.component1.js b/demo/resources/js/jquery.component1.js
@@ -0,0 +1,65 @@
+/**
+ * @name          jQuery Boilerplate
+ * @version       1.0
+ * @lastmodified  2015-04-24
+ * @package       html-css-js
+ * @subpackage    jQuery plugin
+ * @author        JR, VI
+ *
+ * based on: http://jqueryboilerplate.com/
+ */
+
+;(function ($, window, document, undefined) {
+  'use strict';
+
+  var pluginName = 'component1',
+    defaults = {
+      foo: 'bar'
+    };
+
+  // The actual plugin constructor
+  function Plugin(element, options) {
+    this.$element = $(element);
+    this.options = $.extend({}, defaults, options);
+    this.init();
+  }
+
+  // methods
+  var methods = {
+    init: function() {
+      // your init is goes here
+      this.myFunction();
+    },
+
+    myFunction: function(){
+      console.log('initializing component1');
+    }
+  };
+
+  // build
+  $.extend(Plugin.prototype, methods);
+
+  // A really lightweight plugin wrapper around the constructor,
+  // preventing against multiple instantiations
+  $.fn[pluginName] = function(options) {
+    this.each(function() {
+      if(!$.data(this, 'plugin_' + pluginName)) {
+        $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
+
+        /**
+         * DEV-note: Use trigger failsafe events if other plugins depend on this plugins ready state
+         */
+        // trigger ready event on element - optional
+        //$.triggerFailsafeEvent($(this), 'plugin_' + pluginName + '.ready');
+      }
+    });
+
+    // trigger ready event globally - optional
+    //if(this.length > 0) {
+    //    $.triggerFailsafeEvent($(window), 'plugin_' + pluginName + '.ready_all');
+    //}
+
+    return this;
+  };
+
+})(jQuery, window, document);