Add explicit resource type definition

pyrsmk · Apr 10, 2016 · bc8ebb5 · bc8ebb5
1 parent d64226a
commit bc8ebb5
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 97 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-toast 2.0.0
+toast 2.1.0
 ===========
 
 Toast is a tiny resource loader for JS and CSS files.
@@ -65,6 +65,15 @@ toast(
 	}
 ```
 
+Define resource type explicitly
+-------------------------------
+
+Toast is guessing your resource type by its extension. But sometimes, like with Google Fonts, there's no extension at the end of the URL. Then we'll need to set the resource type to help toast to load the resource as expected :
+
+```js
+toast('[css]https://fonts.googleapis.com/css?family=Open+Sans');
+```
+
 License
 -------
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "pyrsmk-toast",
   "description": "A simple CSS/JS resource loader",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Aurélien Delogu <pyrsmk@dreamysource.fr> (http://dreamysource.fr)",
   "repository": {
     "type": "git",

diff --git a/src/toast.js b/src/toast.js
@@ -1,4 +1,4 @@
-/*! toast 2.0.0 (https://github.com/pyrsmk/toast) */
+/*! toast 2.1.0 (https://github.com/pyrsmk/toast) */
 
 var handled_resources = {};
 
@@ -35,55 +35,70 @@ function toast() {
 
 	// Load one resource
 	loadResource = function(resource) {
-		// Extract resource name
-		var name = /(^.+\.\w+)(\?.*)?$/.exec(resource)[1],
-			node;
-		// Verify if the resource is not already handled
-		if(name in handled_resources) {
+		// Extract resource type
+		var implicit_type = /\.(\w+)$/.exec(resource),
+			explicit_type = /^\[(\w+)\](.+)/.exec(resource),
+			type, node;
+		if(explicit_type !== null) {
+			type = explicit_type[1];
+			resource = explicit_type[2];
+		}
+		else if(implicit_type !== null) {
+			type = implicit_type[1];
+		}
+		else {
 			return;
 		}
-		// Add resource to loading stack
-		handled_resources[name] = false;
-		// JS
-		if(/\.js$/.test(name)) {
-			// Create SCRIPT element
-			node = document.createElement('script');
-			node.src = resource;
-			node.type = 'text/javascript';
-			head.appendChild(node);
-			// Watch loading state
-			var version = navigator.appVersion.match(/MSIE (\d)/);
-			if(version !== null && parseInt(version[1], 10) < 9) {
-				// IE
-				node.onreadystatechange = function() {
-					if(/ded|co/.test(this.readyState)) {
-						handled_resources[name] = true;
-					}
-				};
-			}
-			else {
-				// Other browsers
-				node.onload = function() {
-					handled_resources[name] = true;
-				};
-			}
+		// Verify if the resource is not already handled
+		if(resource in handled_resources) {
+			return;
 		}
-		// CSS
-		else if(/\.css$/.test(name)) {
-			// Create LINK element
-			node = document.createElement('link');
-			node.rel = 'styleSheet';
-			node.href = resource;
-			head.appendChild(node);
-			// Watch loading state
-			watchStylesheet(node, name);
+		// Mark the resource as handled (but not loaded yet)
+		handled_resources[resource] = false;
+		// Load resource
+		switch(type) {
+			case 'js':
+				// Create SCRIPT element
+				node = document.createElement('script');
+				node.src = resource;
+				node.type = 'text/javascript';
+				head.appendChild(node);
+				// Watch loading state
+				var version = navigator.appVersion.match(/MSIE (\d)/);
+				if(version !== null && parseInt(version[1], 10) < 9) {
+					// IE<9
+					node.onreadystatechange = function() {
+						if(/ded|co/.test(this.readyState)) {
+							handled_resources[resource] = true;
+						}
+					};
+				}
+				else {
+					// Other browsers
+					node.onload = function() {
+						handled_resources[resource] = true;
+					};
+				}
+				break;
+			case 'css':
+				// Create LINK element
+				node = document.createElement('link');
+				node.rel = 'styleSheet';
+				node.href = resource;
+				head.appendChild(node);
+				// Watch loading state
+				watchStylesheet(node, resource);
+				break;
+			default:
+				delete handled_resources[resource];
+				return;
 		}
 	},
 
 	// Watch if all resources have been loaded
 	watchResources = function(callback, resourcesToLoad) {
-		for(var name in handled_resources) {
-			if(!handled_resources[name]) {
+		for(var resource in handled_resources) {
+			if(!handled_resources[resource]) {
 				setTimeout(function() {
 					watchResources(callback, resourcesToLoad);
 				}, 50);
@@ -97,13 +112,13 @@ function toast() {
 	},
 
 	// Watch if a CSS resource has been loaded
-	watchStylesheet = function(node, name) {
+	watchStylesheet = function(node, resource) {
 		if(node.sheet || node.styleSheet) {
-			handled_resources[name] = true;
+			handled_resources[resource] = true;
 		}
 		else {
 			setTimeout(function() {
-				watchStylesheet(node, name);
+				watchStylesheet(node, resource);
 			}, 50);
 		}
 	};

diff --git a/tests/tests.js b/tests/tests.js
@@ -27,22 +27,24 @@ QUnit.test('Several resources', function(assert) {
 	var done1 = assert.async(),
 		done2 = assert.async();
 
-	assert.expect(4);
+	assert.expect(5);
 
 	toast(
 		'https://code.jquery.com/jquery-2.2.3.min.js',
-		'https://rawgit.com/pyrsmk/qwest/master/qwest.min.js',
+		'[js]https://rawgit.com/pyrsmk/qwest/master/qwest.min.js',
 		'https://rawgit.com/pyrsmk/Horizon/master/build/minified/Horizon.min.js',
+		'[css]https://fonts.googleapis.com/css?family=Open+Sans',
 		function() {
 			assert.ok(typeof jQuery == 'function', 'jQuery loaded');			
-			assert.ok(typeof qwest == 'object', 'qwest loaded');
+			assert.ok(typeof qwest == 'object', 'qwest loaded [explicit]');
 			assert.ok(typeof Horizon == 'object', 'Horizon loaded');
+			assert.ok(document.styleSheets.length == 3, 'Google font loaded [explicit]');
 			done1();
 
 			toast(
 				'foo.js',
 				function() {
-					assert.ok(foo == 1, 'Cannot load a resource twice');
+					assert.ok(foo == 1, 'Cannot load the same resource twice');
 					done2();
 				}
 			);

diff --git a/toast.js b/toast.js
@@ -7,7 +7,7 @@
     root.toast = factory();
   }
 }(this, function() {
-/*! toast 2.0.0 (https://github.com/pyrsmk/toast) */
+/*! toast 2.1.0 (https://github.com/pyrsmk/toast) */
 
 var handled_resources = {};
 
@@ -44,55 +44,70 @@ function toast() {
 
 	// Load one resource
 	loadResource = function(resource) {
-		// Extract resource name
-		var name = /(^.+\.\w+)(\?.*)?$/.exec(resource)[1],
-			node;
-		// Verify if the resource is not already handled
-		if(name in handled_resources) {
+		// Extract resource type
+		var implicit_type = /\.(\w+)$/.exec(resource),
+			explicit_type = /^\[(\w+)\](.+)/.exec(resource),
+			type, node;
+		if(explicit_type !== null) {
+			type = explicit_type[1];
+			resource = explicit_type[2];
+		}
+		else if(implicit_type !== null) {
+			type = implicit_type[1];
+		}
+		else {
 			return;
 		}
-		// Add resource to loading stack
-		handled_resources[name] = false;
-		// JS
-		if(/\.js$/.test(name)) {
-			// Create SCRIPT element
-			node = document.createElement('script');
-			node.src = resource;
-			node.type = 'text/javascript';
-			head.appendChild(node);
-			// Watch loading state
-			var version = navigator.appVersion.match(/MSIE (\d)/);
-			if(version !== null && parseInt(version[1], 10) < 9) {
-				// IE
-				node.onreadystatechange = function() {
-					if(/ded|co/.test(this.readyState)) {
-						handled_resources[name] = true;
-					}
-				};
-			}
-			else {
-				// Other browsers
-				node.onload = function() {
-					handled_resources[name] = true;
-				};
-			}
+		// Verify if the resource is not already handled
+		if(resource in handled_resources) {
+			return;
 		}
-		// CSS
-		else if(/\.css$/.test(name)) {
-			// Create LINK element
-			node = document.createElement('link');
-			node.rel = 'styleSheet';
-			node.href = resource;
-			head.appendChild(node);
-			// Watch loading state
-			watchStylesheet(node, name);
+		// Mark the resource as handled (but not loaded yet)
+		handled_resources[resource] = false;
+		// Load resource
+		switch(type) {
+			case 'js':
+				// Create SCRIPT element
+				node = document.createElement('script');
+				node.src = resource;
+				node.type = 'text/javascript';
+				head.appendChild(node);
+				// Watch loading state
+				var version = navigator.appVersion.match(/MSIE (\d)/);
+				if(version !== null && parseInt(version[1], 10) < 9) {
+					// IE<9
+					node.onreadystatechange = function() {
+						if(/ded|co/.test(this.readyState)) {
+							handled_resources[resource] = true;
+						}
+					};
+				}
+				else {
+					// Other browsers
+					node.onload = function() {
+						handled_resources[resource] = true;
+					};
+				}
+				break;
+			case 'css':
+				// Create LINK element
+				node = document.createElement('link');
+				node.rel = 'styleSheet';
+				node.href = resource;
+				head.appendChild(node);
+				// Watch loading state
+				watchStylesheet(node, resource);
+				break;
+			default:
+				delete handled_resources[resource];
+				return;
 		}
 	},
 
 	// Watch if all resources have been loaded
 	watchResources = function(callback, resourcesToLoad) {
-		for(var name in handled_resources) {
-			if(!handled_resources[name]) {
+		for(var resource in handled_resources) {
+			if(!handled_resources[resource]) {
 				setTimeout(function() {
 					watchResources(callback, resourcesToLoad);
 				}, 50);
@@ -106,13 +121,13 @@ function toast() {
 	},
 
 	// Watch if a CSS resource has been loaded
-	watchStylesheet = function(node, name) {
+	watchStylesheet = function(node, resource) {
 		if(node.sheet || node.styleSheet) {
-			handled_resources[name] = true;
+			handled_resources[resource] = true;
 		}
 		else {
 			setTimeout(function() {
-				watchStylesheet(node, name);
+				watchStylesheet(node, resource);
 			}, 50);
 		}
 	};

diff --git a/toast.min.js b/toast.min.js