vanilla-jet 1.1.10 → 1.2.0

package/.grunt/build_styles_task.js

@@ -9,7 +9,6 @@ module.exports = function(grunt) {
                 .replace('/vanilla-jet', '')
                 .replace('/.grunt', '');
         }
-        console.log('cwd 1: ', getCleanedCWD());
 
         // -- Content
         let adminContent = grunt.file.read(`${getCleanedCWD()}/assets/styles/less/admin.less`);

package/.grunt/compile_html.js

@@ -3,7 +3,8 @@ const path = require("path"),
 	fs = require("fs"),
 	nunjucks = require('nunjucks'),
   identifier = 'templates',
-  chalk = require('chalk');
+  chalk = require('chalk'),
+  zlib = require('zlib');
 
 let Functions = require('../framework/functions.js');
 let Dipper = require('../framework/dipper.js');
@@ -182,12 +183,7 @@ function replaceInclude(lines, originalLine, templateCompiled) {
 
 // -- Step 4
 async function createHTMLFile(content, filePath) {
-
-  //const { html } = require('js-beautify');
-  ///content = html(content);
-
   const { minify } = require('html-minifier-terser');
-  //console.log(typeof content);
   const minified = await minify(content, {
     collapseWhitespace: true,
     collapseInlineTagWhitespace: true,
@@ -202,8 +198,16 @@ async function createHTMLFile(content, filePath) {
   const publicPath = path.join(processCwd(), '/public/pages');
   fs.mkdirSync(publicPath, { recursive: true });
   const absolutePath = path.join(publicPath, filePath);
+  
+  // Write the minified HTML file
   fs.writeFileSync(absolutePath, minified, 'utf8');
-  //console.log(`Html :) file created at: ${absolutePath}`);
+
+  // Create gzipped version
+  const gzipped = zlib.gzipSync(minified, { level: 9 }); // Maximum compression level
+  fs.writeFileSync(`${absolutePath}.gz`, gzipped);
+  
+  console.log(chalk.green(`Created HTML file at: ${absolutePath}`));
+  console.log(chalk.green(`Created gzipped version at: ${absolutePath}.gz`));
 }
 
 // -- Helpers

package/Gruntfile.js

@@ -26,7 +26,6 @@ module.exports = function(grunt) {
     return newCwd;
   }
   
-
   // -- Vars
   const cssDestination = `${getCwd()}/public/styles/app.min.css`;
   const cssOrigin = `${getCwd()}/assets/styles/less/admin_build.less`;
@@ -153,13 +152,16 @@ module.exports = function(grunt) {
     compress: {
       main: {
         options: {
-          mode: 'gzip'
+          mode: 'gzip',
+          compressionLevel: 9
         },
         files: [{
           expand: true,
-          src: [`${getCwd()}/public/scripts/vanilla.min.js`],
+          src: [`${getCwd()}/public/scripts/vanilla.min.js`, `${getCwd()}/public/styles/app.min.css`],
           dest: '',
-          ext: '.min.js.gz'
+          rename: function(dest, src) {
+            return src + '.gz';
+          }
         }]
       }
     },

package/framework/dipper.js

@@ -69,10 +69,10 @@ Dipper.prototype.getFbAppId = function() {
 
 Dipper.prototype.addMeta = function(name, content, attribute) {
 
-	var obj = this;
+	let obj = this;
 	attribute = attribute || 'name';
 	content = content || '';
-	var meta = [];
+	let meta = [];
 		meta['name'] = name;
 		meta['content'] = content;
 		meta['attribute'] = attribute;
@@ -81,20 +81,20 @@ Dipper.prototype.addMeta = function(name, content, attribute) {
 
 Dipper.prototype.metaTags = function() {
 
-	var obj = this;
-	var _ = require('underscore');
-	var stringMeta = '';
+	let obj = this;
+	let _ = require('underscore');
+	let stringMeta = '';
 
-	var keys = Object.keys(obj.metas);
+	let keys = Object.keys(obj.metas);
 	_.each(keys, function(key) {
 		
-		var name = obj.metas[key]['name'],
+		let name = obj.metas[key]['name'],
 			content = obj.metas[key]['content'],
 			attribute = obj.metas[key]['attribute'];
 
-		stringMeta += obj.metas[key]['content'] != '' ? 
-			'<meta ' + attribute + '=\"' + name + '\" content=\"' + content + '\">\n\t' :
-			'<meta ' + attribute + '=\"' + name + '\">\n\t';
+    stringMeta += obj.metas[key]['content'] != '' ? 
+			`<meta ${attribute}="${name}" content="${content}">\n\t` :
+			`<meta ${name}="${attribute}">\n\t`;
 	});
 	return stringMeta;			
 }
@@ -108,27 +108,13 @@ Dipper.prototype.img = function(filename) {
 }
 
 Dipper.prototype.script = function(filename) {
-
-	var obj = this,
-		dir = this.getDir('scripts', false);
-
-	var filenameParts = filename.split('.'),
-		length = filenameParts.length;
-	if (length > 0) {
-
-		let position = length - 1;
-		filenameParts[position] = 'min.' + filenameParts[position];
-		filename = filenameParts.join('.');
-	}
+	let dir = this.getDir('scripts', false);
 	return this.urlTo(dir + filename);
 }
 
 Dipper.prototype.style = function(filename) {
-
-	var obj = this,
-		dir = this.getDir('styles', false),
-		ret = this.urlTo(dir + filename);
-	return ret;
+	let dir = this.getDir('styles', false);
+	return this.urlTo(dir + filename);;
 }
 
 Dipper.prototype.pdf = function(filename) {
@@ -530,21 +516,20 @@ Dipper.prototype.getSharedVar = function(name) {
 
 Dipper.prototype.get_google_fonts = function(fonts) {
 
-	var obj = this,
-		_ = require('underscore');
+	let _ = require('underscore');
 
 	if (fonts != undefined) {
 
-		var parts = [],
+		let parts = [],
 			keys = Object.keys(fonts);
 		_.each(keys, function(font) {
 
-			var font_name = encodeURI(font),
+			let font_name = encodeURI(font),
 				font_weight = fonts[font].join(',');
 			parts.push(font_name + ':' + font_weight);
 		});
 
-		var params = parts.join('|'),
+		let params = parts.join('|'),
 			ret = '//fonts.googleapis.com/css?family=' + params;
 
 		return ret;

package/framework/functions.js

@@ -76,36 +76,35 @@ class Functions {
     }
     scriptsKeys.push('jquery');
     scriptsKeys.push('underscore');
-    dipper.registerScript('vanillaJet', dipper.script('core/vanillaJet.js'), scriptsKeys);
+    dipper.registerScript('vanillaJet', dipper.script('core/vanillaJet.min.js'), scriptsKeys);
     dipper.enqueueScript('vanillaJet');
 
     // -- Main app
-    dipper.registerScript('vanilla', dipper.script('vanilla.js'));
+    dipper.registerScript('vanilla', dipper.script('vanilla.min.js'));
     dipper.enqueueScript('vanilla');
 
+    // Add basic meta tags
     const basicMeta = [
-      { name: 'charset', content: 'UTF-8' },
-      { name: 'viewport', content: 'width=device-width, minimum-scale=1' },
+      { name: 'charset', attribute: 'UTF-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=5.0' },
       { name: 'theme-color', content: '#ffffff' }
     ];
-
-    const openGraphMeta = {
-      'title': dipper.getPageTitle(),
-      'site_name': dipper.getSiteTitle(),
-      'description': dipper.getDescription(),
-      'image': dipper.img('logo.png'),
-      'type': 'website',
-      'url': dipper.urlTo('')
-    };
-
-    // Add basic meta tags
     basicMeta.forEach(meta => {
       dipper.addMeta(meta.name, meta.content);
     });
 
     // Add Open Graph meta tags
+    const openGraphMeta = {
+      'og:title': dipper.getPageTitle(),
+      'og:site_name': dipper.getSiteTitle(),
+      'og:description': dipper.getDescription(),
+      'og:image': dipper.img('logo.png'),
+      'og:type': 'website',
+      'og:url': dipper.urlTo(''),
+      'og:locale': 'es_MX',
+    };
     Object.entries(openGraphMeta).forEach(([key, value]) => {
-      dipper.addMeta(`og:${key}`, value, 'property');
+      dipper.addMeta(key, value, 'property');
     });
   }
 }

package/framework/request.js

@@ -17,6 +17,11 @@ class Request {
 		this.id = '';
 		this.path = '';
 		this.parts = [];
+
+    let acceptEncoding = req.headers['accept-encoding'] || '';
+    acceptEncoding = acceptEncoding.replace(/\s+/g, '');
+    this.acceptEncoding = acceptEncoding.split(',') || [];
+
 		this.init(req, options);
 	}
 
@@ -90,9 +95,8 @@ class Request {
 	}
 
 	get(name, value) {
-
-		var obj = this, ret = value || '';
-		// Try to retrieve parameter from GET object
+		let obj = this, 
+      ret = value || '';
 		if (typeof obj.params.get[name] !== 'undefined') {
 			ret = obj.params.get[name];
 		}
@@ -100,8 +104,7 @@ class Request {
 	}
 
 	body() {
-
-		var obj = this;
+		let obj = this;
 		return obj.params.body;
 	}
 }

package/framework/response.js

@@ -10,31 +10,23 @@ class Response {
 		this.status = 200;
 		this.headers = [];
 		this.autoRespond = true;
-		// Call initialization callback
 		this.init(res);
 	}
 
 	init(res) {
-
-		var obj = this;
-		obj.res = res;
+		this.res = res;
 	}
 
 	setBody(body) {
-
-		var obj = this;
-		obj.body = body;
+		this.body = body;
 	}
 
 	setStatus(status) {
-
-		var obj = this;
-		obj.status = status;
+		this.status = status;
 	}
 
 	setHeader(name, value) {
-
-		var obj = this;
+		let obj = this;
 		obj.headers.push({
 			name: name,
 			value: value
@@ -42,20 +34,17 @@ class Response {
 	}
 
 	getBody() {
-
-		var obj = this;
-		return obj.body;
+		return this.body;
 	}
 
 	getStatus() {
-
-		var obj = this;
-		return obj.status;
+		return this.status;
 	}
 
 	getHeader(name) {
 
-		var obj = this, ret = null;
+		let obj = this, 
+      ret = null;
 		ret = _.find(obj.headers, function (header) {
 			return header.name == name;
 		});
@@ -64,7 +53,7 @@ class Response {
 
 	respond() {
 
-		var obj = this;
+		let obj = this;
 		this.setHeader('Access-Control-Allow-Origin', '*');
 
 		_.each(obj.headers, function (header) {
@@ -75,23 +64,29 @@ class Response {
 	}
 
 	error404() {
-
 		let obj = this;
 		obj.res.writeHead(404, { "Content-Type": "text/plain" });
 		obj.res.write("404 Not Found\n");
 		obj.res.end();
 	}
 
-	render(template) {
+	render(request, template) {
 
 		let obj = this, 
       path = require("path"), 
       fs = require("fs");
     template = 'pages/' + template;
 
+    const acceptEncoding = request.acceptEncoding || [];
+    if (acceptEncoding.includes('gzip')) {
+      template = template + '.gz';
+      obj.res.setHeader('Content-Encoding', 'gzip');
+    } else {
+      obj.res.setHeader('Content-Type', 'text/html');
+    }
+
 		const filename = path.join(process.cwd(), 'public/' + template);
 		const fileStream = fs.createReadStream(filename);
-		obj.res.writeHead(200, { 'Content-Type': 'text/html' });
 		fileStream.pipe(obj.res);
 	}
 }

package/framework/router.js

@@ -20,21 +20,18 @@ class Router {
       'png': 'image/png',
       'webp': 'image/webp',
       'jpg': 'image/jpg',
-      'css': 'text/css',
+      'css': 'text/css; charset=utf-8',
       'gz': 'application/x-gzip',
       'gif': 'image/gif',
-      'js': 'text/javascript',
+      'js': 'text/javascript; charset=utf-8',
       'svg': 'image/svg+xml',
       'ttf': 'application/x-font-ttf',
       'otf': 'application/x-font-opentype',
       'pdf': 'application/pdf',
       'json': 'application/json'
     };
-    this.compressionMimes = {
-      'css': 'text/css',
-      'js': 'text/javascript',
-      'gz': 'application/x-gzip'
-    };
+    this.compressionMimes = [ 'css', 'js' ];
+    this.compressionFiles = [ 'vanilla.min.js', 'app.min.css' ];
 	}
 
 	routeToRegExp(route) {
@@ -111,13 +108,20 @@ class Router {
 							filename = path.join(rep, route), 
 							filePrivate = obj.isProtectedFile(route);
 
+            // -- Check if the file is a gzip file
+            if (request.acceptEncoding.includes('gzip') && 
+              obj.compressionMimes.includes(ext) &&
+              obj.compressionFiles.includes(filename.split('/').pop())
+            ) {
+              filename = filename + '.gz';
+              extHeader['Content-Encoding'] = 'gzip';
+            }
+
             fs.stat(filename, (err, stats) => {
 
               if (err || !stats.isFile() || filePrivate) {
                 return obj.onNotFound(response);
               }
-
-              // -- const acceptEncoding = req.headers['accept-encoding'] || '';
               const fileStream = fs.createReadStream(filename);
               fileStream.on('error', (streamErr) => {
                 console.error("Error reading file:", streamErr);
@@ -138,7 +142,6 @@ class Router {
 	}
 
 	isProtectedFile(route) {
-
 		let protectedDirs = ['framework', 'external', 'node_mudules'];
 		let routeParts = route.split('/');
 		if (routeParts[1] != undefined && routeParts.length > 2) {
@@ -148,7 +151,6 @@ class Router {
 	}
 
 	validateCallback(clazz, method) {
-
 		let obj = this, 
       endpoints = obj.server.endpoints;
 
@@ -166,9 +168,7 @@ class Router {
 	* @param route: String name for the route
 	**/
 	setDefaultRoute(route) {
-
-		let obj = this;
-		obj.defaultRoute = route;
+		this.defaultRoute = route;
 	}
 
 	getDefaultRoute() {

package/framework/server.js

@@ -114,7 +114,9 @@ class Server {
     }
     
     // -- Certs managed by NGINX, Google Cloud Run, etc.
-    obj.httpx = http2.createServer({ allowHTTP1: true }, (req, res) => {
+    console.log('HTTP server created - Without self managed certs');
+    obj.httpx = http.createServer((req, res) => {
+      console.log('Request received: ', req.url);
       obj.router.onRequest.call(obj.router, req, res);
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jet",
-  "version": "1.1.10",
+  "version": "1.2.0",
   "description": "VannilaJet framework",
   "main": "index.js",
   "bin": {