svelteesp32 1.6.1 → 1.7.1

package/README.md

@@ -12,6 +12,8 @@ In order to be able to easily update OTA, it is important - from the users' poin
 
 This npm package provides a solution for **inserting any JS client application into the ESP web server** (PsychicHttp and also ESPAsyncWebServer available, PsychicHttp is the default). For this, JS, html, css, font, assets, etc. files must be converted to binary byte array. Npm mode is easy to use and easy to **integrate into your CI/CD pipeline**.
 
+> Starting with version v1.7.0, with the cachetime command line option, you can set whether the browser can cache pages
+
 > Starting with version v1.6.0, mime npm package is used instead of mime-types (application/javascript -> text/javascript)
 
 > Starting with version v1.5.0, PsychicHttp v2 is also supported.
@@ -176,6 +178,12 @@ The use of ETag is **not enabled by default**, this can be achieved with the `--
 
 > This setting has three states: yes, no, and compiler mode is available. In compiler mode, you can disable/enable ETag by setting the `SVELTEESP32_ENABLE_ETAG` c++ compiler directive. For example, if using platformio, just type `-D SVELTEESP32_ENABLE_ETAG`.
 
+### Cache-control
+
+By default (when using the ETag), we send no-cache in the cache-control header of the HTTP response. Pages, subpages and other elements are downloaded every time. This is perfectly acceptable when serving small pages with ESP.
+
+At the same time, it can be an advantage that the content is cached by the browser and not even the ETag check is performed. For this, you can specify how many seconds the max-age value sent instead of no-cache should be. In the case of `--cachetime=86400` (max-age=86400), the page (and other elements) will not be downloaded by the browser **for one day**.
+
 ### Main entry point - index.html
 
 Typically, the entry point for web applications is the **index.htm or index.html** file. This does not need to be listed in the browser's address bar because web servers know that this file should be served by default. Svelteesp32 also does this: if there is an index.htm or index.html file, it sets it as the main file to be served. So using `http://esp_xxx.local` or just entering the `http://x.y.w.z/` IP address will serve this main file.
@@ -230,6 +238,7 @@ You can use the following c++ directives at the project level if you want to con
 | `-e`          | The engine for which the include file is created (psychic/psychic2/async) | psychic                 |
 | `-o`          | Generated output file with path                                           | `svelteesp32.h`         |
 | `--etag`      | Use ETag header for cache (true/false/compiler)                           | false                   |
+| `--cachetime` | Override no-cache response with a max-age=<cachetime> response            | 0                       |
 | `--gzip`      | Compress content with gzip (true/false/compiler)                          | true                    |
 | `--created`   | Include creation time                                                     | false                   |
 | `--version`   | Include a version string, `--version=v$npm_package_version`               | ''                      |

package/dist/commandLine.d.ts

@@ -6,6 +6,7 @@ interface ICopyFilesArguments {
     define: string;
     gzip: 'true' | 'false' | 'compiler';
     etag: 'true' | 'false' | 'compiler';
+    cachetime: number;
     created: boolean;
     version: string;
     help?: boolean;

package/dist/commandLine.js

@@ -75,6 +75,11 @@ exports.cmdLine = (0, ts_command_line_args_1.parse)({
         description: 'Prefix of c++ defines',
         defaultValue: 'SVELTEESP32'
     },
+    cachetime: {
+        type: Number,
+        description: 'max-age cache time in seconds',
+        defaultValue: 0
+    },
     help: { type: Boolean, optional: true, alias: 'h', description: 'Shows this help' }
 }, {
     helpArg: 'help',

package/dist/cppCode.js

@@ -151,12 +151,22 @@ void {{methodName}}(PsychicHttpServer * server) {
 
 {{#switch ../etag}}
 {{#case "true"}}
+{{#../cacheTime}}
+    response.addHeader("cache-control", "max-age={{value}}");
+{{/../cacheTime}}
+{{^../cacheTime}}
     response.addHeader("cache-control", "no-cache");
+{{/../cacheTime}}
     response.addHeader("ETag", etag_{{this.dataname}});
 {{/case}}
 {{#case "compiler"}}
   #ifdef {{../definePrefix}}_ENABLE_ETAG
+{{#../cacheTime}}
+    response.addHeader("cache-control", "max-age={{value}}");
+{{/../cacheTime}}
+{{^../cacheTime}}
     response.addHeader("cache-control", "no-cache");
+{{/../cacheTime}}
     response.addHeader("ETag", etag_{{this.dataname}});
   #endif 
 {{/case}}
@@ -327,12 +337,22 @@ void {{methodName}}(PsychicHttpServer * server) {
 
 {{#switch ../etag}}
 {{#case "true"}}
+{{#../cacheTime}}
+    response->addHeader("cache-control", "max-age={{value}}");
+{{/../cacheTime}}
+{{^../cacheTime}}
     response->addHeader("cache-control", "no-cache");
+{{/../cacheTime}}
     response->addHeader("ETag", etag_{{this.dataname}});
 {{/case}}
 {{#case "compiler"}}
   #ifdef {{../definePrefix}}_ENABLE_ETAG
+{{#../cacheTime}}
+    response->addHeader("cache-control", "max-age={{value}}");
+{{/../cacheTime}}
+{{^../cacheTime}}
     response->addHeader("cache-control", "no-cache");
+{{/../cacheTime}}
     response->addHeader("ETag", etag_{{this.dataname}});
   #endif 
 {{/case}}
@@ -507,12 +527,22 @@ void {{methodName}}(AsyncWebServer * server) {
 
 {{#switch ../etag}}
 {{#case "true"}}
+{{#../cacheTime}}
+    response->addHeader("cache-control", "max-age={{value}}");
+{{/../cacheTime}}
+{{^../cacheTime}}
     response->addHeader("cache-control", "no-cache");
+{{/../cacheTime}}
     response->addHeader("ETag", etag_{{this.dataname}});
 {{/case}}
 {{#case "compiler"}}
   #ifdef {{../definePrefix}}_ENABLE_ETAG
+{{#../cacheTime}}
+    response->addHeader("cache-control", "max-age={{value}}");
+{{/../cacheTime}}
+{{^../cacheTime}}
     response->addHeader("cache-control", "no-cache");
+{{/../cacheTime}}
     response->addHeader("ETag", etag_{{this.dataname}});
   #endif 
 {{/case}}
@@ -548,6 +578,7 @@ const getCppCode = (sources, filesByExtension) => (0, handlebars_1.compile)(comm
     created: commandLine_1.cmdLine.created,
     version: commandLine_1.cmdLine.version,
     methodName: commandLine_1.cmdLine.espmethod,
+    cacheTime: commandLine_1.cmdLine.cachetime ? { value: commandLine_1.cmdLine.cachetime } : undefined,
     definePrefix: commandLine_1.cmdLine.define
 }, {
     helpers: {

package/dist/index.js

@@ -7,7 +7,7 @@ const node_crypto_1 = require("node:crypto");
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const node_zlib_1 = require("node:zlib");
-const mime_1 = __importDefault(require("mime"));
+const mime_types_1 = require("mime-types");
 const commandLine_1 = require("./commandLine");
 const consoleColor_1 = require("./consoleColor");
 const cppCode_1 = require("./cppCode");
@@ -29,7 +29,7 @@ console.log();
 console.log('Translation to header file');
 const longestFilename = [...files.keys()].reduce((p, c) => Math.max(c.length, p), 0);
 for (const [originalFilename, content] of files) {
-    const mimeType = mime_1.default.getType(originalFilename) || 'text/plain';
+    const mimeType = (0, mime_types_1.lookup)(originalFilename) || 'text/plain';
     summary.filecount++;
     const filename = originalFilename.replace(/\\/g, '/');
     const dataname = filename.replace(/[!&()+./@{}~-]/g, '_');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelteesp32",
-  "version": "1.6.1",
+  "version": "1.7.1",
   "description": "Convert Svelte (or any frontend) JS application to serve it from ESP32 webserver (PsychicHttp)",
   "author": "BCsabaEngine",
   "license": "ISC",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/BCsabaEngine/svelteesp32",
   "scripts": {
-    "dev:async": "nodemon src/index.ts -- -e async -s ./demo/svelte/dist -o ./demo/esp32/include/svelteesp32.h --etag=true --gzip=true --version=v$npm_package_version",
+    "dev:async": "nodemon src/index.ts -- -e async -s ./demo/svelte/dist -o ./demo/esp32/include/svelteesp32.h --etag=true --gzip=true --cachetime=86400 --version=v$npm_package_version",
     "dev:psychic": "nodemon src/index.ts -- -e psychic -s ./demo/svelte/dist -o ./demo/esp32/include/svelteesp32.h --etag=false --gzip=false --version=v$npm_package_version",
     "dev:psychic2": "nodemon src/index.ts -- -e psychic2 -s ./demo/svelte/dist -o ./demo/esp32/include/svelteesp32.h --etag=false --gzip=false --version=v$npm_package_version",
     "test:all": "./package.script && ~/.platformio/penv/bin/pio run -d ./demo/esp32",
@@ -54,23 +54,24 @@
     "espasyncwebserver"
   ],
   "devDependencies": {
-    "@types/node": "^22.10.1",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
-    "eslint": "^9.16.0",
-    "eslint-config-prettier": "^9.1.0",
+    "@types/mime-types": "^2.1.4",
+    "@types/node": "^22.10.10",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "^8.21.0",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unicorn": "^56.0.1",
-    "nodemon": "^3.1.7",
+    "nodemon": "^3.1.9",
     "prettier": "^3.4.2",
     "ts-node": "^10.9.2",
     "tsx": "^4.19.2",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.3"
   },
   "dependencies": {
-    "glob": "^11.0.0",
+    "glob": "^11.0.1",
     "handlebars": "^4.7.8",
-    "mime": "^4.0.4",
+    "mime-types": "^2.1.35",
     "ts-command-line-args": "^2.5.1"
   }
 }