CSS Assets path fix

ericabouaf · Jan 18, 2012 · 8d97f12 · 8d97f12
1 parent 21f56d5
commit 8d97f12
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -1,23 +1,21 @@
 # Express.js YUI Combo Loader
 
-Only works with YUI 3.5+ ? (loader asking for all dependencies)
+Very early version
 
-Very early
+Only works with YUI 3.4+ ? (yui-loader asking for all dependencies, no implicit)
 
 ## TODO :
 
-
-* TODO: correct assets path /url\([\"\']?(.*)[\"\']?\)/
-* TODO: cache generated files
+ * disk cache
 
 ## Install
 
    npm install express-yuicombo
 
-## Usage
+## Server-Side Use
 
     var express = require('express'), 
-        YuiComboLoader = require('../lib/yuicombo').YuiComboLoader;
+        YuiComboHandler = require('../lib/express-yuicombo').YuiComboHandler;
 
     var app = express.createServer();
 
@@ -27,7 +25,8 @@ Very early
         res.redirect('/demo.html');
     });
 
-    app.get('/yui-combo', YuiComboLoader('./public/') );
+    // Install the combo route and sets the root folder for files
+    app.get('/yui-combo', YuiComboHandler('./public/') );
 
     app.listen(3000);
 
@@ -36,6 +35,7 @@ Very early
 
 ## Author
 
-Eric Abouaf 
+Eric Abouaf
+
 http://github.com/neyric
 
diff --git a/example/public/demo.html b/example/public/demo.html
@@ -1,37 +1,35 @@
 <html>
 <head>
 <title>Express-YUI-combo demo</title>
-
 <script src="/3.5.0pr1/build/yui/yui.js"></script>
-
 </head>
 <body class="yui3-skin-sam">
 
+<p style="font-weight: bold;">Important : You must install a YUI download of 3.5.0pr1 in the public/ folder</p>
+
 <p>Check the network tab of you favorite debugging tool to see the YUI combo request...</p>
 
 <script>
 YUI({
+	// set 'combine' to false during client-side development
 	combine: true,
+
+	// set the same URL on which you installed express-yuicombo in your routes
 	comboBase: '/yui-combo?',
 
 	groups : {
-    myDemoModules : {
-      combine : true,
-      root : "mydemomodules/",
-      filter: 'raw',
-      modules : {
-        'my-yui-module' : {
-          requires : ['widget', 'widget-stdmod']
-        }
-      }
-    }
-  }
-}).use( 'my-yui-module', function(Y) {
-
-	// code something here !
-
-});
-
+		myDemoModules : {
+			base: "mydemomodules/",
+			root : "mydemomodules/",
+			filter: 'raw',
+			modules : {
+				'my-yui-module' : {
+					requires : ['widget', 'widget-stdmod']
+				}
+			}
+		}
+	}
+}).use('my-yui-module'/*, function(Y) {}*/);
 
 </script>
 </body>

diff --git a/example/public/mydemomodules/my-yui-module/my-yui-module.js b/example/public/mydemomodules/my-yui-module/my-yui-module.js
@@ -1,6 +1,6 @@
 YUI.add('my-yui-module', function (Y) {
 
    // It's not a YUI tutorial :)
-   Y.Node.create('<p>Successfully loaded module "my-yui-module"</p>').appendTo(document.body);
+   Y.Node.create('<p style="background-color: lightgreen;">Successfully loaded module "my-yui-module"</p>').appendTo(document.body);
 
 }, '1.0', {requires: ['widget', 'widget-stdmod']});
diff --git a/example/server.js b/example/server.js
@@ -1,5 +1,5 @@
 var express = require('express'), 
-    YuiComboLoader = require('../lib/yuicombo').YuiComboLoader;
+    YuiComboHandler = require('../lib/express-yuicombo').YuiComboHandler;
 
 var app = express.createServer();
 
@@ -9,7 +9,8 @@ app.get('/', function(req, res){
 	res.redirect('/demo.html');
 });
 
-app.get('/yui-combo', YuiComboLoader('./public/') );
+// Install the combo route and sets the root folder for files
+app.get('/yui-combo', YuiComboHandler('./public/') );
 
 app.listen(3000);
 

diff --git a/lib/express-yuicombo.js b/lib/express-yuicombo.js
@@ -0,0 +1,55 @@
+var fs = require('fs');
+
+exports.YuiComboHandler = function(path_prefix) {
+	return function(req, res){
+		var querystring = req.url.split('?')[1],
+			 modules = querystring.split('&');
+
+		var MODE = "JS";
+		if(modules[0].indexOf(".css") != -1) {
+			MODE = "CSS";
+		}
+
+		var ret = "", fileCount = 0;
+		modules.forEach(function(f) {
+			fs.readFile(path_prefix+f, encoding="utf8", function(err, data) {
+				fileCount++;
+
+				// Fix CSS assets path
+				if(MODE == "CSS") {
+					var l = f.split('/'), fp = l.slice(0,l.length-1);
+					data = data.replace(/url\(\s*["']?([^"'\)]+)["']?\s*\)/g,"url("+fp.join('/')+"/$1)");
+				}
+
+				ret += data;
+
+				if(err) {
+					console.log("YuiComboLoader error : ");
+					console.log(err);
+					res.send(err);
+				}
+				else if(fileCount == modules.length) {
+
+					// CSS Handling
+					if(MODE == "CSS") {
+						res.header("Content-Type", "text/css");
+					}
+					// JS Handling
+					else {
+						res.header("Content-Type", "application/javascript");
+					}
+
+					// Cache-Control
+					// TODO: make configurable
+					res.header('Expires', new Date((new Date()).getTime() + (60 * 60 * 1000 * 24 * 365 * 10)) );
+					res.header('Age', '300');
+					res.header('Cache-Control', 'max-age=315360000');
+
+
+					res.header('Date', new Date() );
+					res.send(ret);
+				}
+			});
+		});
+	};
+};
diff --git a/lib/yuicombo.js b/lib/yuicombo.js