lazy load compiler scripts.

src/index.html

@@ -506,6 +506,7 @@
 		<script src="lib/codemirror/addon/edit/matchbrackets.js"></script>
 		<script src="lib/codemirror/addon/edit/closebrackets.js"></script>
 		<script src="lib/codemirror/addon/edit/closetag.js"></script>
+		<script src="lib/codemirror/addon/comment/comment.js"></script>
 		<script src="lib/codemirror/addon/mode/loadmode.js"></script>
 
 		<script src="lib/codemirror/mode/xml/xml.js"></script>
@@ -515,14 +516,10 @@
 		<script src="lib/codemirror/keymap/sublime.js"></script>
 		<script src="lib/emmet.js"></script>
 
-
-		<script src="lib/sass.js"></script>
-		<script src="lib/less.min.js"></script>
-		<script src="lib/babel.min.js"></script>
-		<script src="lib/coffee-script.js"></script>
 		<script src="lib/split.js"></script>
 
 		<script src="deferred.js"></script>
+		<script src="loader.js"></script>
 		<script src="script.js"></script>
 		<script src="dropdown.js"></script>
 

src/loader.js

@@ -1,81 +1,85 @@
-// https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js
+(function(w) {
-var loadCSS = function( href, before, media ){
-	// Arguments explained:
-	// `href` [REQUIRED] is the URL for your CSS file.
-	// `before` [OPTIONAL] is the element the script should use as a reference for injecting our stylesheet <link> before
-		// By default, loadCSS attempts to inject the link after the last stylesheet or script in the DOM. However, you might desire a more specific location in your document.
-	// `media` [OPTIONAL] is the media type or query of the stylesheet. By default it will be 'all'
-	var doc = w.document;
-	var ss = doc.createElement( "link" );
-	var ref;
-	if( before ){
-		ref = before;
-	}
-	else {
-		var refs = ( doc.body || doc.getElementsByTagName( "head" )[ 0 ] ).childNodes;
-		ref = refs[ refs.length - 1];
-	}
 
-	var sheets = doc.styleSheets;
+	// https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js
-	ss.rel = "stylesheet";
+	window.loadCSS = function( href, before, media ){
-	ss.href = href;
+		// Arguments explained:
-	// temporarily set media to something inapplicable to ensure it'll fetch without blocking render
+		// `href` [REQUIRED] is the URL for your CSS file.
-	ss.media = "only x";
+		// `before` [OPTIONAL] is the element the script should use as a reference for injecting our stylesheet <link> before
-
+			// By default, loadCSS attempts to inject the link after the last stylesheet or script in the DOM. However, you might desire a more specific location in your document.
-	// wait until body is defined before injecting link. This ensures a non-blocking load in IE11.
+		// `media` [OPTIONAL] is the media type or query of the stylesheet. By default it will be 'all'
-	function ready( cb ){
+		var doc = w.document;
-		if( doc.body ){
+		var ss = doc.createElement( "link" );
-			return cb();
+		var ref;
+		if( before ){
+			ref = before;
 		}
-		setTimeout(function(){
+		else {
-			ready( cb );
+			var refs = ( doc.body || doc.getElementsByTagName( "head" )[ 0 ] ).childNodes;
-		});
+			ref = refs[ refs.length - 1];
-	}
+		}
-	// Inject link
+
-		// Note: the ternary preserves the existing behavior of "before" argument, but we could choose to change the argument to "after" in a later release and standardize on ref.nextSibling for all refs
+		var sheets = doc.styleSheets;
-		// Note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
+		ss.rel = "stylesheet";
-	ready( function(){
+		ss.href = href;
-		ref.parentNode.insertBefore( ss, ( before ? ref : ref.nextSibling ) );
+		// temporarily set media to something inapplicable to ensure it'll fetch without blocking render
-	});
+		ss.media = "only x";
-	// A method (exposed on return object for external use) that mimics onload by polling document.styleSheets until it includes the new sheet.
+
-	var onloadcssdefined = function( cb ){
+		// wait until body is defined before injecting link. This ensures a non-blocking load in IE11.
-		var resolvedHref = ss.href;
+		function ready( cb ){
-		var i = sheets.length;
+			if( doc.body ){
-		while( i-- ){
-			if( sheets[ i ].href === resolvedHref ){
 				return cb();
 			}
+			setTimeout(function(){
+				ready( cb );
+			});
 		}
-		setTimeout(function() {
+		// Inject link
-			onloadcssdefined( cb );
+			// Note: the ternary preserves the existing behavior of "before" argument, but we could choose to change the argument to "after" in a later release and standardize on ref.nextSibling for all refs
+			// Note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
+		ready( function(){
+			ref.parentNode.insertBefore( ss, ( before ? ref : ref.nextSibling ) );
 		});
-	};
+		// A method (exposed on return object for external use) that mimics onload by polling document.styleSheets until it includes the new sheet.
+		var onloadcssdefined = function( cb ){
+			var resolvedHref = ss.href;
+			var i = sheets.length;
+			while( i-- ){
+				if( sheets[ i ].href === resolvedHref ){
+					return cb();
+				}
+			}
+			setTimeout(function() {
+				onloadcssdefined( cb );
+			});
+		};
 
-	function loadCB(){
+		function loadCB(){
-		if( ss.addEventListener ){
+			if( ss.addEventListener ){
-			ss.removeEventListener( "load", loadCB );
+				ss.removeEventListener( "load", loadCB );
+			}
+			ss.media = media || "all";
 		}
-		ss.media = media || "all";
-	}
 
-	// once loaded, set link's media back to `all` so that the stylesheet applies once it loads
+		// once loaded, set link's media back to `all` so that the stylesheet applies once it loads
-	if( ss.addEventListener ){
+		if( ss.addEventListener ){
-		ss.addEventListener( "load", loadCB);
+			ss.addEventListener( "load", loadCB);
-	}
+		}
-	ss.onloadcssdefined = onloadcssdefined;
+		ss.onloadcssdefined = onloadcssdefined;
-	onloadcssdefined( loadCB );
+		onloadcssdefined( loadCB );
-	return true;
+		return true;
-};
-
-var loadJS = function( src, cb ) {
-	var d = deferred();
-	var ref = w.document.getElementsByTagName( "script" )[ 0 ];
-	var script = w.document.createElement( "script" );
-	script.src = src;
-	script.async = true;
-	ref.parentNode.insertBefore( script, ref );
-	script.onload = function () {
-		d.resolve();
 	};
-	return d.promise;
+
-};
+	window.loadJS = function( src, cb ) {
+		var d = deferred();
+		var ref = w.document.getElementsByTagName( "script" )[ 0 ];
+		var script = w.document.createElement( "script" );
+		script.src = src;
+		script.async = true;
+		ref.parentNode.insertBefore( script, ref );
+		script.onload = function () {
+			d.resolve();
+		};
+		return d.promise;
+	};
+
+})(window);

src/script.js

@@ -14,7 +14,7 @@
 		COFFEESCRIPT: 'coffee'
 	};
 	var CssModes = {
-		CSS: 'js',
+		CSS: 'css',
 		SCSS: 'scss',
 		LESS: 'less'
 	};
@@ -122,9 +122,35 @@
 		saveSetting('code', code);
 	}
 
+	/**
+	 * Loaded the code comiler based on the mode selected
+	 */
+	function handleModeRequirements(mode) {
+		// Exit if already loaded
+		if (modes[mode].hasLoaded) { return; }
+
+		function setLoadedFlag() {
+			modes[mode].hasLoaded = true;
+		}
+
+		if (mode === CssModes.LESS) {
+			loadJS('lib/less.min.js').then(setLoadedFlag);
+		} else if (mode === CssModes.SCSS) {
+			loadJS('lib/sass.js').then(function () {
+				window.sass = new Sass('lib/sass.worker.js');
+				setLoadedFlag();
+			});
+		} else if (mode === JsModes.COFFEESCRIPT) {
+			loadJS('lib/coffee-script.js').then(setLoadedFlag);
+		} else if (mode === JsModes.ES6) {
+			loadJS('lib/babel.min.js').then(setLoadedFlag);
+		}
+	}
+
 	function updateCssMode(value) {
 		cssMode = value;
 		cssModelLabel.textContent = modes[value].label;
+		handleModeRequirements(value);
 		CodeMirror.autoLoadMode(editur.cm.css, modes[value].cmMode);
 		chrome.storage.sync.set({
 			cssMode: value
@@ -133,11 +159,15 @@
 	function updateJsMode(value) {
 		jsMode = value;
 		jsModelLabel.textContent = modes[value].label;
+		handleModeRequirements(value);
 		CodeMirror.autoLoadMode(editur.cm.js, modes[value].cmMode);
 		chrome.storage.sync.set({
 			jsMode: value
 		}, function () {});
 	}
+
+	// computeHtml, computeCss & computeJs evaluate the final code according
+	// to whatever mode is selected and resolve the returned promise with the code.
 	function computeHtml() {
 		return editur.cm.html.getValue();
 	}
@@ -276,7 +306,6 @@
 		var lastCode;
 
 		CodeMirror.modeURL = "lib/codemirror/mode/%N/%N.js";
-		window.sass = new Sass('lib/sass.worker.js');
 
 		layoutBtn1.addEventListener('click', function () { saveSetting('layoutMode', 1); toggleLayout(1); return false; });
 		layoutBtn2.addEventListener('click', function () { saveSetting('layoutMode', 2); toggleLayout(2); return false; });