svelteesp32 1.8.0 → 1.9.0

package/README.md

@@ -10,7 +10,9 @@ I often make small to medium-sized microcontroller solutions that run on ESP32 o
 
 In order to be able to easily update OTA, it is important - from the users' point of view - that the update file **consists of one file**. I can't use the SPIFFS/LittleFS solution for this. It is necessary that the WebUI files are included inline in the Arduino or PlatformIO c++ code.
 
-This npm package provides a solution for **inserting any JS client application into the ESP web server** (PsychicHttp and also ESPAsyncWebServer (https://github.com/ESP32Async/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**.
+This npm package provides a solution for **inserting any JS client application into the ESP web server** (PsychicHttp and also ESPAsyncWebServer (https://github.com/ESP32Async/ESPAsyncWebServer) and ESP-IDF 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.9.0, code generator for esp-idf is available
 
 > Starting with version v1.8.0, use the new and maintained ESPAsyncWebserver available at https://github.com/ESP32Async/ESPAsyncWebServer
 
@@ -47,6 +49,9 @@ npx svelteesp32 -e psychic2 -s ../svelteapp/dist -o ../esp32project/svelteesp32.
 
 // for ESPAsyncWebServer
 npx svelteesp32 -e async -s ../svelteapp/dist -o ../esp32project/svelteesp32.h --etag=true
+
+// for native esp-idf
+npx svelteesp32 -e espidf -s ../svelteapp/dist -o ../esp32project/svelteesp32.h --etag=true
 ```
 
 During the **translation process**, the processed file details are visible, and at the end, the result shows the ESP's memory allocation (gzip size)

package/dist/commandLine.d.ts

@@ -1,5 +1,5 @@
 interface ICopyFilesArguments {
-    engine: 'psychic' | 'psychic2' | 'async';
+    engine: 'psychic' | 'psychic2' | 'async' | 'espidf';
     sourcepath: string;
     outputfile: string;
     espmethod: string;

package/dist/commandLine.js

@@ -12,6 +12,8 @@ exports.cmdLine = (0, ts_command_line_args_1.parse)({
                 return 'psychic2';
             if (value === 'async')
                 return 'async';
+            if (value === 'espidf')
+                return 'espidf';
             throw new Error(`Invalid engine: ${value}`);
         },
         alias: 'e',

package/dist/cppCode.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCppCode = void 0;
 const handlebars_1 = require("handlebars");
 const commandLine_1 = require("./commandLine");
+const cppCodeEspIdf_1 = require("./cppCodeEspIdf");
 const psychicTemplate = `
 //engine:   PsychicHttpServer
 //cmdline:  {{{commandLine}}}
@@ -152,20 +153,20 @@ void {{methodName}}(PsychicHttpServer * server) {
 {{#switch ../etag}}
 {{#case "true"}}
 {{#../cacheTime}}
-    response.addHeader("cache-control", "max-age={{value}}");
+    response.addHeader("Cache-Control", "max-age={{value}}");
 {{/../cacheTime}}
 {{^../cacheTime}}
-    response.addHeader("cache-control", "no-cache");
+    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}}");
+    response.addHeader("Cache-Control", "max-age={{value}}");
 {{/../cacheTime}}
 {{^../cacheTime}}
-    response.addHeader("cache-control", "no-cache");
+    response.addHeader("Cache-Control", "no-cache");
 {{/../cacheTime}}
     response.addHeader("ETag", etag_{{this.dataname}});
   #endif 
@@ -338,20 +339,20 @@ void {{methodName}}(PsychicHttpServer * server) {
 {{#switch ../etag}}
 {{#case "true"}}
 {{#../cacheTime}}
-    response->addHeader("cache-control", "max-age={{value}}");
+    response->addHeader("Cache-Control", "max-age={{value}}");
 {{/../cacheTime}}
 {{^../cacheTime}}
-    response->addHeader("cache-control", "no-cache");
+    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}}");
+    response->addHeader("Cache-Control", "max-age={{value}}");
 {{/../cacheTime}}
 {{^../cacheTime}}
-    response->addHeader("cache-control", "no-cache");
+    response->addHeader("Cache-Control", "no-cache");
 {{/../cacheTime}}
     response->addHeader("ETag", etag_{{this.dataname}});
   #endif 
@@ -528,20 +529,20 @@ void {{methodName}}(AsyncWebServer * server) {
 {{#switch ../etag}}
 {{#case "true"}}
 {{#../cacheTime}}
-    response->addHeader("cache-control", "max-age={{value}}");
+    response->addHeader("Cache-Control", "max-age={{value}}");
 {{/../cacheTime}}
 {{^../cacheTime}}
-    response->addHeader("cache-control", "no-cache");
+    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}}");
+    response->addHeader("Cache-Control", "max-age={{value}}");
 {{/../cacheTime}}
 {{^../cacheTime}}
-    response->addHeader("cache-control", "no-cache");
+    response->addHeader("Cache-Control", "no-cache");
 {{/../cacheTime}}
     response->addHeader("ETag", etag_{{this.dataname}});
   #endif 
@@ -557,8 +558,20 @@ void {{methodName}}(AsyncWebServer * server) {
 
 {{/each}}
 }`;
+const getTemplate = (engine) => {
+    switch (engine) {
+        case 'psychic':
+            return psychicTemplate;
+        case 'psychic2':
+            return psychic2Template;
+        case 'espidf':
+            return cppCodeEspIdf_1.espidfTemplate;
+        default:
+            return asyncTemplate;
+    }
+};
 let switchValue;
-const getCppCode = (sources, filesByExtension) => (0, handlebars_1.compile)(commandLine_1.cmdLine.engine === 'psychic' ? psychicTemplate : commandLine_1.cmdLine.engine === 'psychic2' ? psychic2Template : asyncTemplate)({
+const getCppCode = (sources, filesByExtension) => (0, handlebars_1.compile)(getTemplate(commandLine_1.cmdLine.engine))({
     commandLine: process.argv.slice(2).join(' '),
     now: `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`,
     fileCount: sources.length.toString(),

package/dist/cppCodeEspIdf.d.ts

@@ -0,0 +1 @@
+export declare const espidfTemplate = "\n//engine:   espidf\n//cmdline:  {{{commandLine}}}\n{{#if created }}\n//created:  {{now}}\n{{/if}}\n//\n\n{{#switch etag}}\n{{#case \"true\"}}\n#ifdef {{definePrefix}}_ENABLE_ETAG\n#warning {{definePrefix}}_ENABLE_ETAG has no effect because it is permanently switched ON\n#endif\n{{/case}}\n{{#case \"false\"}}\n#ifdef {{definePrefix}}_ENABLE_ETAG\n#warning {{definePrefix}}_ENABLE_ETAG has no effect because it is permanently switched OFF\n#endif\n{{/case}}\n{{/switch}}\n\n{{#switch gzip}}\n{{#case \"true\"}}\n#ifdef {{definePrefix}}_ENABLE_GZIP\n#warning {{definePrefix}}_ENABLE_GZIP has no effect because it is permanently switched ON\n#endif\n{{/case}}\n{{#case \"false\"}}\n#ifdef {{definePrefix}}_ENABLE_GZIP\n#warning {{definePrefix}}_ENABLE_GZIP has no effect because it is permanently switched OFF\n#endif\n{{/case}}\n{{/switch}}\n\n//\n{{#if version }}\n#define {{definePrefix}}_VERSION \"{{version}}\"\n{{/if}}\n#define {{definePrefix}}_COUNT {{fileCount}}\n#define {{definePrefix}}_SIZE {{fileSize}}\n#define {{definePrefix}}_SIZE_GZIP {{fileGzipSize}}\n\n//\n{{#each sources}}\n#define {{../definePrefix}}_FILE_{{this.datanameUpperCase}}\n{{/each}}\n\n//\n{{#each filesByExtension}}\n#define {{../definePrefix}}_{{this.extension}}_FILES {{this.count}}\n{{/each}}\n\n#include <stdint.h>\n#include <esp_err.h>\n#include <esp_http_server.h>\n\n//\n{{#switch gzip}}\n{{#case \"true\"}}\n  {{#each sources}}\nconst char datagzip_{{this.dataname}}[{{this.lengthGzip}}] = { {{this.bytesGzip}} };\n  {{/each}}\n{{/case}}\n{{#case \"false\"}}\n  {{#each sources}}\nconst char data_{{this.dataname}}[{{this.length}}] = { {{this.bytes}} };\n  {{/each}}\n{{/case}}\n{{#case \"compiler\"}}\n#ifdef {{definePrefix}}_ENABLE_GZIP\n  {{#each sources}}\nconst char datagzip_{{this.dataname}}[{{this.lengthGzip}}] = { {{this.bytesGzip}} };\n  {{/each}}\n#else\n  {{#each sources}}\nconst char data_{{this.dataname}}[{{this.length}}] = { {{this.bytes}} };\n  {{/each}}\n#endif \n{{/case}}\n{{/switch}}\n\n//\n{{#switch etag}}\n{{#case \"true\"}}\n  {{#each sources}}\nconst char * etag_{{this.dataname}} = \"{{this.md5}}\";\n  {{/each}}\n{{/case}}\n{{#case \"false\"}}\n{{/case}}\n{{#case \"compiler\"}}\n#ifdef {{definePrefix}}_ENABLE_ETAG\n  {{#each sources}}\nconst char * etag_{{this.dataname}} = \"{{this.md5}}\";\n  {{/each}}\n#endif \n{{/case}}\n{{/switch}}\n\n{{#each sources}}\n\nstatic esp_err_t file_handler_{{this.datanameUpperCase}} (httpd_req_t *req)\n{\n    httpd_resp_set_type(req, \"{{this.mime}}\");\n{{#switch ../gzip}}\n{{#case \"true\"}}\n{{#if this.isGzip}}\n    httpd_resp_set_hdr(req, \"Content-Encoding\", \"gzip\");\n{{/if}}\n{{/case}}\n{{#case \"compiler\"}}\n  {{#if this.isGzip}}\n  #ifdef {{../definePrefix}}_ENABLE_GZIP\n    httpd_resp_set_hdr(req, \"Content-Encoding\", \"gzip\");\n  #endif \n  {{/if}}\n{{/case}}\n{{/switch}}\n\n{{#switch ../etag}}\n{{#case \"true\"}}\n{{#../cacheTime}}\n    httpd_resp_set_hdr(req, \"Cache-Control\", \"max-age={{value}}\");\n{{/../cacheTime}}\n{{^../cacheTime}}\n    httpd_resp_set_hdr(req, \"Cache-Control\", \"no-cache\");\n{{/../cacheTime}}\n    httpd_resp_set_hdr(req, \"ETag\", etag_{{this.dataname}});\n{{/case}}\n{{#case \"compiler\"}}\n  #ifdef {{../definePrefix}}_ENABLE_ETAG\n{{#../cacheTime}}\n    httpd_resp_set_hdr(req, \"Cache-Control\", \"max-age={{value}}\");\n{{/../cacheTime}}\n{{^../cacheTime}}\n    httpd_resp_set_hdr(req, \"Cache-Control\", \"no-cache\");\n{{/../cacheTime}}\n    httpd_resp_set_hdr(req, \"ETag\", etag_{{this.dataname}});\n  #endif \n{{/case}}\n{{/switch}}\n\n{{#switch ../gzip}}\n{{#case \"true\"}}\n    httpd_resp_send(req, datagzip_{{this.dataname}}, {{this.lengthGzip}});\n{{/case}}\n{{#case \"false\"}}\n    httpd_resp_send(req, data_{{this.dataname}}, {{this.length}});\n{{/case}}\n{{#case \"compiler\"}}\n  #ifdef {{../definePrefix}}_ENABLE_GZIP\n    httpd_resp_send(req, datagzip_{{this.dataname}}, {{this.lengthGzip}});\n  #else\n    httpd_resp_send(req, data_{{this.dataname}}, {{this.length}});\n  #endif \n{{/case}}\n{{/switch}}\n    return ESP_OK;\n}\n\n{{#if this.isDefault}}\nstatic const httpd_uri_t route_def_{{this.datanameUpperCase}} = {\n    .uri = \"/\",\n    .method = HTTP_GET,\n    .handler = file_handler_{{this.datanameUpperCase}},\n};\n{{/if}}\n\nstatic const httpd_uri_t route_{{this.datanameUpperCase}} = {\n    .uri = \"/{{this.filename}}\",\n    .method = HTTP_GET,\n    .handler = file_handler_{{this.datanameUpperCase}},\n};\n\n{{/each}}\n\n\n\nstatic inline void {{methodName}}(httpd_handle_t server) {\n{{#each sources}}\n{{#if this.isDefault}}\n    httpd_register_uri_handler(server, &route_def_{{this.datanameUpperCase}});\n{{/if}}\n    httpd_register_uri_handler(server, &route_{{this.datanameUpperCase}});\n{{/each}}\n\n}";

package/dist/cppCodeEspIdf.js

@@ -0,0 +1,190 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.espidfTemplate = void 0;
+exports.espidfTemplate = `
+//engine:   espidf
+//cmdline:  {{{commandLine}}}
+{{#if created }}
+//created:  {{now}}
+{{/if}}
+//
+
+{{#switch etag}}
+{{#case "true"}}
+#ifdef {{definePrefix}}_ENABLE_ETAG
+#warning {{definePrefix}}_ENABLE_ETAG has no effect because it is permanently switched ON
+#endif
+{{/case}}
+{{#case "false"}}
+#ifdef {{definePrefix}}_ENABLE_ETAG
+#warning {{definePrefix}}_ENABLE_ETAG has no effect because it is permanently switched OFF
+#endif
+{{/case}}
+{{/switch}}
+
+{{#switch gzip}}
+{{#case "true"}}
+#ifdef {{definePrefix}}_ENABLE_GZIP
+#warning {{definePrefix}}_ENABLE_GZIP has no effect because it is permanently switched ON
+#endif
+{{/case}}
+{{#case "false"}}
+#ifdef {{definePrefix}}_ENABLE_GZIP
+#warning {{definePrefix}}_ENABLE_GZIP has no effect because it is permanently switched OFF
+#endif
+{{/case}}
+{{/switch}}
+
+//
+{{#if version }}
+#define {{definePrefix}}_VERSION "{{version}}"
+{{/if}}
+#define {{definePrefix}}_COUNT {{fileCount}}
+#define {{definePrefix}}_SIZE {{fileSize}}
+#define {{definePrefix}}_SIZE_GZIP {{fileGzipSize}}
+
+//
+{{#each sources}}
+#define {{../definePrefix}}_FILE_{{this.datanameUpperCase}}
+{{/each}}
+
+//
+{{#each filesByExtension}}
+#define {{../definePrefix}}_{{this.extension}}_FILES {{this.count}}
+{{/each}}
+
+#include <stdint.h>
+#include <esp_err.h>
+#include <esp_http_server.h>
+
+//
+{{#switch gzip}}
+{{#case "true"}}
+  {{#each sources}}
+const char datagzip_{{this.dataname}}[{{this.lengthGzip}}] = { {{this.bytesGzip}} };
+  {{/each}}
+{{/case}}
+{{#case "false"}}
+  {{#each sources}}
+const char data_{{this.dataname}}[{{this.length}}] = { {{this.bytes}} };
+  {{/each}}
+{{/case}}
+{{#case "compiler"}}
+#ifdef {{definePrefix}}_ENABLE_GZIP
+  {{#each sources}}
+const char datagzip_{{this.dataname}}[{{this.lengthGzip}}] = { {{this.bytesGzip}} };
+  {{/each}}
+#else
+  {{#each sources}}
+const char data_{{this.dataname}}[{{this.length}}] = { {{this.bytes}} };
+  {{/each}}
+#endif 
+{{/case}}
+{{/switch}}
+
+//
+{{#switch etag}}
+{{#case "true"}}
+  {{#each sources}}
+const char * etag_{{this.dataname}} = "{{this.md5}}";
+  {{/each}}
+{{/case}}
+{{#case "false"}}
+{{/case}}
+{{#case "compiler"}}
+#ifdef {{definePrefix}}_ENABLE_ETAG
+  {{#each sources}}
+const char * etag_{{this.dataname}} = "{{this.md5}}";
+  {{/each}}
+#endif 
+{{/case}}
+{{/switch}}
+
+{{#each sources}}
+
+static esp_err_t file_handler_{{this.datanameUpperCase}} (httpd_req_t *req)
+{
+    httpd_resp_set_type(req, "{{this.mime}}");
+{{#switch ../gzip}}
+{{#case "true"}}
+{{#if this.isGzip}}
+    httpd_resp_set_hdr(req, "Content-Encoding", "gzip");
+{{/if}}
+{{/case}}
+{{#case "compiler"}}
+  {{#if this.isGzip}}
+  #ifdef {{../definePrefix}}_ENABLE_GZIP
+    httpd_resp_set_hdr(req, "Content-Encoding", "gzip");
+  #endif 
+  {{/if}}
+{{/case}}
+{{/switch}}
+
+{{#switch ../etag}}
+{{#case "true"}}
+{{#../cacheTime}}
+    httpd_resp_set_hdr(req, "Cache-Control", "max-age={{value}}");
+{{/../cacheTime}}
+{{^../cacheTime}}
+    httpd_resp_set_hdr(req, "Cache-Control", "no-cache");
+{{/../cacheTime}}
+    httpd_resp_set_hdr(req, "ETag", etag_{{this.dataname}});
+{{/case}}
+{{#case "compiler"}}
+  #ifdef {{../definePrefix}}_ENABLE_ETAG
+{{#../cacheTime}}
+    httpd_resp_set_hdr(req, "Cache-Control", "max-age={{value}}");
+{{/../cacheTime}}
+{{^../cacheTime}}
+    httpd_resp_set_hdr(req, "Cache-Control", "no-cache");
+{{/../cacheTime}}
+    httpd_resp_set_hdr(req, "ETag", etag_{{this.dataname}});
+  #endif 
+{{/case}}
+{{/switch}}
+
+{{#switch ../gzip}}
+{{#case "true"}}
+    httpd_resp_send(req, datagzip_{{this.dataname}}, {{this.lengthGzip}});
+{{/case}}
+{{#case "false"}}
+    httpd_resp_send(req, data_{{this.dataname}}, {{this.length}});
+{{/case}}
+{{#case "compiler"}}
+  #ifdef {{../definePrefix}}_ENABLE_GZIP
+    httpd_resp_send(req, datagzip_{{this.dataname}}, {{this.lengthGzip}});
+  #else
+    httpd_resp_send(req, data_{{this.dataname}}, {{this.length}});
+  #endif 
+{{/case}}
+{{/switch}}
+    return ESP_OK;
+}
+
+{{#if this.isDefault}}
+static const httpd_uri_t route_def_{{this.datanameUpperCase}} = {
+    .uri = "/",
+    .method = HTTP_GET,
+    .handler = file_handler_{{this.datanameUpperCase}},
+};
+{{/if}}
+
+static const httpd_uri_t route_{{this.datanameUpperCase}} = {
+    .uri = "/{{this.filename}}",
+    .method = HTTP_GET,
+    .handler = file_handler_{{this.datanameUpperCase}},
+};
+
+{{/each}}
+
+
+
+static inline void {{methodName}}(httpd_handle_t server) {
+{{#each sources}}
+{{#if this.isDefault}}
+    httpd_register_uri_handler(server, &route_def_{{this.datanameUpperCase}});
+{{/if}}
+    httpd_register_uri_handler(server, &route_{{this.datanameUpperCase}});
+{{/each}}
+
+}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelteesp32",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Convert Svelte (or any frontend) JS application to serve it from ESP32 webserver (PsychicHttp)",
   "author": "BCsabaEngine",
   "license": "ISC",
@@ -31,7 +31,7 @@
     "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",
+    "test:all": "./package.script && ~/.platformio/penv/bin/pio run -d ./demo/esp32 && ~/.platformio/penv/bin/pio run -d ./demo/esp32idf",
     "clean": "tsc --build --clean",
     "build": "tsc --build --clean && tsc --build --force",
     "format:check": "prettier --check .",
@@ -55,23 +55,23 @@
   ],
   "devDependencies": {
     "@types/mime-types": "^2.1.4",
-    "@types/node": "^22.13.4",
-    "@typescript-eslint/eslint-plugin": "^8.24.1",
-    "@typescript-eslint/parser": "^8.24.1",
-    "eslint": "^9.20.1",
-    "eslint-config-prettier": "^10.0.1",
+    "@types/node": "^22.13.14",
+    "@typescript-eslint/eslint-plugin": "^8.29.0",
+    "@typescript-eslint/parser": "^8.29.0",
+    "eslint": "^9.23.0",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-unicorn": "^57.0.0",
+    "eslint-plugin-unicorn": "^58.0.0",
     "nodemon": "^3.1.9",
-    "prettier": "^3.5.1",
+    "prettier": "^3.5.3",
     "ts-node": "^10.9.2",
     "tsx": "^4.19.3",
-    "typescript": "^5.7.3"
+    "typescript": "^5.8.2"
   },
   "dependencies": {
     "glob": "^11.0.1",
     "handlebars": "^4.7.8",
-    "mime-types": "^2.1.35",
+    "mime-types": "^3.0.1",
     "ts-command-line-args": "^2.5.1"
   }
 }