vanilla-jet 1.3.1 → 1.4.0

package/docs/deployment/docker-compose.nginx-node.example.yml

@@ -0,0 +1,23 @@
+version: "3.9"
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: docs/deployment/Dockerfile.app.example
+    container_name: vanillajet-app
+    environment:
+      - PORT=8080
+    expose:
+      - "8080"
+
+  nginx:
+    image: nginx:1.27-alpine
+    container_name: vanillajet-nginx
+    depends_on:
+      - app
+    ports:
+      - "80:80"
+    volumes:
+      - ./public:/app/public:ro
+      - ./docs/deployment/nginx.default.conf.example:/etc/nginx/conf.d/default.conf:ro

package/docs/deployment/nginx.default.conf.example

@@ -0,0 +1,36 @@
+server {
+    listen 80;
+    server_name _;
+
+    # Build output served directly by nginx
+    root /app/public;
+    index pages/home.html;
+
+    # API and dynamic routes handled by VanillaJet backend
+    location /api/ {
+        proxy_pass http://app:8080;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # Static assets with long cache
+    location ~* \.(?:css|js|png|jpg|jpeg|gif|svg|webp|ico|ttf|otf|woff|woff2)$ {
+        try_files $uri =404;
+        expires 30d;
+        add_header Cache-Control "public, max-age=2592000, immutable";
+    }
+
+    # HTML should revalidate frequently
+    location ~* \.html$ {
+        try_files $uri =404;
+        add_header Cache-Control "no-cache, must-revalidate";
+    }
+
+    # SPA fallback to main page
+    location / {
+        try_files $uri $uri/ /pages/home.html;
+    }
+}

package/framework/dipper.js

@@ -214,8 +214,8 @@ Dipper.prototype.dequeueStyle = function(name, dependencies) {
 	if (obj.styles[name] != undefined) {
 		if (obj.enqueued_styles[name] != undefined) {
 			var item = obj.styles[name];
-			if (dependencies != undefined) {
-				_.each(item.require, function(dep) {
+			if (dependencies === true && Array.isArray(item.requires)) {
+				_.each(item.requires, function(dep) {
 					obj.dequeueStyle(dep);
 				});
 			}
@@ -233,8 +233,8 @@ Dipper.prototype.dequeueScript = function(name, dependencies) {
 	if (obj.scripts[name] != undefined) {
 		if (obj.enqueued_scripts[name] != undefined) {
 			var item = obj.scripts[name];
-			if (dependencies != undefined) {
-				_.each(item.require, function(dep) {
+			if (dependencies === true && Array.isArray(item.requires)) {
+				_.each(item.requires, function(dep) {
 					obj.dequeueScript(dep);
 				});
 			}
@@ -341,7 +341,7 @@ Dipper.prototype.includeAnimations = function() {
 		keys = Object.keys(obj.anims);
 
 	_.each(keys, function(anim) {
-		animsString += obj.includeAnim(anim);
+		animsString += obj.includeAnimation(anim);
 	});
 	let baseAnimsString = `<script>'${animsString}'</script>`;
 	return baseAnimsString;

package/framework/response.js

@@ -3,18 +3,22 @@ let _ = require('underscore');
 
 class Response {
 
-	constructor(res) {
+	constructor(res, options) {
 
 		this.res = null;
 		this.body = '';
 		this.status = 200;
 		this.headers = [];
 		this.autoRespond = true;
-		this.init(res);
+    this.options = {};
+		this.init(res, options);
 	}
 
-	init(res) {
+	init(res, options) {
 		this.res = res;
+    this.options = Object.assign({
+      enable_precompressed_negotiation: false
+    }, options || {});
 	}
 
 	setBody(body) {
@@ -75,20 +79,93 @@ class Response {
 		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');
+    let templatePath = 'pages/' + template;
+    let acceptEncoding = request.acceptEncoding || [];
+    let allowBrotli = Boolean(obj.options.enable_precompressed_negotiation);
+    let baseFilename = path.join(process.cwd(), 'public', templatePath);
+    let candidates = [];
+
+    if (allowBrotli && obj.supportsEncoding(acceptEncoding, 'br')) {
+      candidates.push({ filename: baseFilename + '.br', encoding: 'br' });
     }
-
-		const filename = path.join(process.cwd(), 'public/' + template);
-		const fileStream = fs.createReadStream(filename);
-		fileStream.pipe(obj.res);
+    if (obj.supportsEncoding(acceptEncoding, 'gzip')) {
+      candidates.push({ filename: baseFilename + '.gz', encoding: 'gzip' });
+    }
+    candidates.push({ filename: baseFilename, encoding: '' });
+
+    let hasNegotiation = candidates.some((candidate) => candidate.encoding !== '');
+    obj.resolveFirstAvailableFile(candidates, (err, selectedFile) => {
+      if (err || !selectedFile) {
+        return obj.error404();
+      }
+
+      obj.res.setHeader('Content-Type', 'text/html; charset=utf-8');
+      if (hasNegotiation) {
+        obj.res.setHeader('Vary', 'Accept-Encoding');
+      }
+      if (selectedFile.encoding) {
+        obj.res.setHeader('Content-Encoding', selectedFile.encoding);
+      }
+
+      let fileStream = fs.createReadStream(selectedFile.filename);
+      fileStream.on('error', () => {
+        obj.error404();
+      });
+      fileStream.pipe(obj.res);
+    });
 	}
+
+  resolveFirstAvailableFile(candidates, callback) {
+    let fs = require("fs");
+    let index = 0;
+    function resolveCandidate() {
+      let currentCandidate = candidates[index];
+      if (!currentCandidate) {
+        return callback(new Error('File not found'));
+      }
+
+      fs.stat(currentCandidate.filename, (err, stats) => {
+        if (!err && stats && stats.isFile()) {
+          return callback(null, currentCandidate);
+        }
+        index = index + 1;
+        resolveCandidate();
+      });
+    }
+
+    resolveCandidate();
+  }
+
+  supportsEncoding(acceptEncoding, encoding) {
+    if (!Array.isArray(acceptEncoding)) {
+      return false;
+    }
+
+    let normalizedEncoding = String(encoding).toLowerCase();
+    return acceptEncoding.some((entry) => {
+      if (entry == null) {
+        return false;
+      }
+      let token = String(entry).toLowerCase();
+      let parts = token.split(';');
+      if (parts[0] !== normalizedEncoding) {
+        return false;
+      }
+
+      let qValue = 1;
+      for (let idx = 1; idx < parts.length; idx = idx + 1) {
+        let part = parts[idx];
+        if (part.startsWith('q=')) {
+          let parsedQValue = parseFloat(part.slice(2));
+          if (!Number.isNaN(parsedQValue)) {
+            qValue = parsedQValue;
+          }
+        }
+      }
+
+      return qValue > 0;
+    });
+  }
 }
 
 module.exports = Response;

package/framework/router.js

@@ -16,6 +16,8 @@ class Router {
 		this.defaultRoute = '';
 		this.server = server;
 		this.cwd = process.cwd();
+    this.staticMetadataCache = new Map();
+    this.staticFileWatchers = new Map();
     this.mimes = {
       'png': 'image/png',
       'webp': 'image/webp',
@@ -32,6 +34,7 @@ class Router {
     };
     this.compressionMimes = [ 'css', 'js' ];
     this.compressionFiles = [ 'vanilla.min.js', 'app.min.css' ];
+    this.enablePrecompressedNegotiation = Boolean(server?.options?.enable_precompressed_negotiation);
 	}
 
 	routeToRegExp(route) {
@@ -71,7 +74,7 @@ class Router {
 
 		let obj = this;
 		let isMatch = false;
-		let response = new Response(res);
+		let response = new Response(res, obj.server.options);
 		let request = new Request(req, {
 			onDataReceived: function () {
 				if (request.path == '') { request.path = obj.defaultRoute; }
@@ -93,7 +96,7 @@ class Router {
 				// -- Check static files
 				if (!handled && !isMatch) {
 
-					let ext = path.extname(req.url).replace('.', ''), 
+					let ext = path.extname(request.path).replace('.', ''), 
             extHandled = false, 
             extHeader = {};
 					
@@ -109,29 +112,47 @@ 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';
+            if (filePrivate) {
+              return obj.onNotFound(response);
             }
 
-            fs.stat(filename, (err, stats) => {
-
-              if (err || !stats.isFile() || filePrivate) {
+            let staticCandidates = obj.getStaticCandidates(request, ext, filename);
+            let hasConditionalHeaders = Boolean(req.headers['if-none-match'] || req.headers['if-modified-since']);
+            obj.resolveFirstAvailableStaticFile(staticCandidates, hasConditionalHeaders, (err, staticFile) => {
+              if (err || !staticFile) {
                 return obj.onNotFound(response);
               }
-              const fileStream = fs.createReadStream(filename);
+
+              let staticHeaders = Object.assign({}, extHeader);
+              if (staticFile.contentEncoding) {
+                staticHeaders['Content-Encoding'] = staticFile.contentEncoding;
+              }
+              if (staticCandidates.some((candidate) => candidate.contentEncoding)) {
+                staticHeaders['Vary'] = 'Accept-Encoding';
+              }
+
+              let metadata = staticFile.metadata;
+              staticHeaders['Content-Length'] = metadata.size;
+              staticHeaders['ETag'] = metadata.etag;
+              staticHeaders['Last-Modified'] = metadata.lastModified;
+              // Force revalidation to keep clients fresh without hard reload.
+              staticHeaders['Cache-Control'] = 'no-cache, must-revalidate';
+
+              if (obj.isNotModified(req, metadata)) {
+                let notModifiedHeaders = Object.assign({}, staticHeaders);
+                delete notModifiedHeaders['Content-Length'];
+                res.writeHead(304, notModifiedHeaders);
+                return res.end();
+              }
+
+              const fileStream = fs.createReadStream(staticFile.filename);
               fileStream.on('error', (streamErr) => {
                 console.error("Error reading file:", streamErr);
                 res.writeHead(500);
                 res.end('Server Error');
               });
 
-              extHeader['Content-Length'] = stats.size;
-              res.writeHead(200, extHeader);
+              res.writeHead(200, staticHeaders);
               fileStream.pipe(res);
               res.on('close', () => {});
             });
@@ -142,8 +163,169 @@ class Router {
 		isMatch = false;
 	}
 
+  getStaticFileMetadata(filename, forceRefresh, callback) {
+    let obj = this;
+    forceRefresh = forceRefresh || false;
+    let cachedMetadata = obj.staticMetadataCache.get(filename);
+    if (cachedMetadata && !forceRefresh) {
+      return callback(null, cachedMetadata);
+    }
+
+    fs.stat(filename, (err, stats) => {
+      if (err || !stats.isFile()) {
+        return callback(err || new Error('File not found'));
+      }
+
+      let metadata = {
+        size: stats.size,
+        lastModified: stats.mtime.toUTCString(),
+        etag: `W/"${stats.size}-${Math.floor(stats.mtimeMs)}"`
+      };
+
+      obj.staticMetadataCache.set(filename, metadata);
+      obj.watchStaticFile(filename);
+      callback(null, metadata);
+    });
+  }
+
+  getStaticCandidates(request, ext, filename) {
+    let obj = this;
+    let candidates = [{ filename: filename, contentEncoding: '' }];
+    let isCompressible = obj.compressionMimes.includes(ext) && obj.compressionFiles.includes(path.basename(filename));
+    if (!isCompressible) {
+      return candidates;
+    }
+
+    let compressedCandidates = [];
+    if (obj.enablePrecompressedNegotiation && obj.supportsEncoding(request.acceptEncoding, 'br')) {
+      compressedCandidates.push({
+        filename: filename + '.br',
+        contentEncoding: 'br'
+      });
+    }
+
+    if (obj.supportsEncoding(request.acceptEncoding, 'gzip')) {
+      compressedCandidates.push({
+        filename: filename + '.gz',
+        contentEncoding: 'gzip'
+      });
+    }
+
+    return compressedCandidates.concat(candidates);
+  }
+
+  resolveFirstAvailableStaticFile(candidates, forceRefresh, callback) {
+    let obj = this;
+    let index = 0;
+    function resolveCandidate() {
+      let currentCandidate = candidates[index];
+      if (!currentCandidate) {
+        return callback(new Error('No static file found'));
+      }
+
+      obj.getStaticFileMetadata(currentCandidate.filename, forceRefresh, (err, metadata) => {
+        if (!err && metadata) {
+          return callback(null, {
+            filename: currentCandidate.filename,
+            contentEncoding: currentCandidate.contentEncoding,
+            metadata: metadata
+          });
+        }
+        index = index + 1;
+        resolveCandidate();
+      });
+    }
+
+    resolveCandidate();
+  }
+
+  supportsEncoding(acceptEncoding, encoding) {
+    if (!Array.isArray(acceptEncoding)) {
+      return false;
+    }
+
+    let normalizedEncoding = String(encoding).toLowerCase();
+    return acceptEncoding.some((entry) => {
+      if (entry == null) {
+        return false;
+      }
+      let token = String(entry).toLowerCase();
+      let parts = token.split(';');
+      if (parts[0] !== normalizedEncoding) {
+        return false;
+      }
+
+      let qValue = 1;
+      for (let idx = 1; idx < parts.length; idx = idx + 1) {
+        let part = parts[idx];
+        if (part.startsWith('q=')) {
+          let parsedQValue = parseFloat(part.slice(2));
+          if (!Number.isNaN(parsedQValue)) {
+            qValue = parsedQValue;
+          }
+        }
+      }
+
+      return qValue > 0;
+    });
+  }
+
+  watchStaticFile(filename) {
+    let obj = this;
+    if (obj.staticFileWatchers.has(filename)) {
+      return;
+    }
+
+    try {
+      let watcher = fs.watch(filename, (eventType) => {
+        obj.staticMetadataCache.delete(filename);
+        if (eventType === 'rename') {
+          let renamedWatcher = obj.staticFileWatchers.get(filename);
+          if (renamedWatcher) {
+            renamedWatcher.close();
+          }
+          obj.staticFileWatchers.delete(filename);
+        }
+      });
+
+      watcher.on('error', () => {
+        obj.staticMetadataCache.delete(filename);
+        let activeWatcher = obj.staticFileWatchers.get(filename);
+        if (activeWatcher) {
+          activeWatcher.close();
+        }
+        obj.staticFileWatchers.delete(filename);
+      });
+
+      obj.staticFileWatchers.set(filename, watcher);
+    } catch (err) {
+      // If watch cannot be created, keep runtime behavior and continue.
+    }
+  }
+
+  isNotModified(req, metadata) {
+    let ifNoneMatch = req.headers['if-none-match'];
+    if (ifNoneMatch) {
+      let etags = ifNoneMatch.split(',').map((etag) => etag.trim());
+      if (etags.includes(metadata.etag)) {
+        return true;
+      }
+    }
+
+    let ifModifiedSince = req.headers['if-modified-since'];
+    if (ifModifiedSince) {
+      let requestModifiedSince = new Date(ifModifiedSince).getTime();
+      let fileModifiedAt = new Date(metadata.lastModified).getTime();
+      if (!Number.isNaN(requestModifiedSince) && requestModifiedSince >= fileModifiedAt) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
 	isProtectedFile(route) {
-		let protectedDirs = ['framework', 'external', 'node_mudules'];
+		let protectedDirs = ['framework', 'external', 'node_modules'];
 		let routeParts = route.split('/');
 		if (routeParts[1] != undefined && routeParts.length > 2) {
 			return protectedDirs.includes(routeParts[1]);

package/framework/server.js

@@ -25,13 +25,14 @@ class Server {
 
 		let obj = this, 
 			settings = options.settings, 
-			opts = settings[options.profile] || {}, 
+			opts = settings['profile'] || {}, 
 			shared = settings['shared'] || {}, 
 			security = settings['security'] || {};
 
 		_.defaults(opts, {
 			https_server: false,
-			wsServer: false
+			wsServer: false,
+      enable_precompressed_negotiation: false
 		});
 		obj.options = opts;
 

package/gulpfile.js

@@ -13,13 +13,6 @@ const del = require('del');
 const gulpif = require('gulp-if');
 const minimist = require('minimist');
 
-// Parse command line arguments
-const knownOptions = {
-  string: 'env',
-  default: { env: process.env.NODE_ENV || 'development' }
-};
-const options = minimist(process.argv.slice(2), knownOptions);
-
 // Helper functions
 function getCwd() {
   return process.cwd()
@@ -120,7 +113,7 @@ function compressCss() {
 // Template compilation
 function compileTemplates() {
   return gulp.src('.')
-    .pipe(shell([`node .grunt/compile_html.js ${options.env}`]));
+    .pipe(shell([`node .grunt/compile_html.js`]));
 }
 
 // Watch task

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jet",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "VannilaJet framework",
   "main": "index.js",
   "bin": {
@@ -9,10 +9,12 @@
   "scripts": {
     "setup": "node ./.scripts/generate_packages_json.js",
     "dev": "gulp dev --env development",
+    "dev:vite": "node ./.scripts/run_vite.js dev",
+    "build:vite": "node ./.scripts/run_vite.js build",
     "build:qa": "gulp build --env qa",
     "build:staging": "gulp build --env staging",
     "build:prod": "gulp build --env production",
-    "test": "npm run test"
+    "test": "node -e \"console.log('No automated tests configured yet')\""
   },
   "repository": {
     "type": "git",
@@ -31,15 +33,6 @@
   "dependencies": {
     "blueimp-md5": "2.19.0",
     "chalk": "4.1.2",
-    "html-minifier-terser": "7.2.0",
-    "js-beautify": "1.15.4",
-    "jsrsasign": "11.1.0",
-    "jwt-simple": "0.5.6",
-    "minimist": "1.2.8",
-    "nodemon": "3.1.10",
-    "nunjucks": "3.2.4",
-    "underscore": ">= 1.12.x",
-    "zlib": "1.0.5",
     "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
@@ -52,6 +45,16 @@
     "gulp-rename": "^2.0.0",
     "gulp-shell": "^0.8.0",
     "gulp-uglify": "^3.0.2",
-    "gulp-watch": "^5.0.1"
+    "gulp-watch": "^5.0.1",
+    "html-minifier-terser": "7.2.0",
+    "js-beautify": "1.15.4",
+    "jsrsasign": "11.1.0",
+    "jwt-simple": "0.5.6",
+    "minimist": "1.2.8",
+    "nodemon": "3.1.10",
+    "nunjucks": "3.2.4",
+    "underscore": ">= 1.12.x",
+    "vite": "^7.3.1",
+    "zlib": "1.0.5"
   }
 }