svelteesp32 1.0.4 → 1.2.0

package/README.md

@@ -1,14 +1,18 @@
 # `svelteesp32` ![image](https://badges.github.io/stability-badges/dist/stable.svg)
 
-# Convert Svelte (or React/Angular/Vue) JS application to serve it from ESP32 webserver
+# Convert Svelte (or React/Angular/Vue) JS application to serve it from ESP32/ESP8266 webserver
 
 ### Forget SPIFFS and LittleFS now
 
-I often make small to medium-sized microcontroller solutions that run on ESP32. If a web interface is needed, I create a Svelte application. The Svelte application is practically served by the ESP32.
+I often make small to medium-sized microcontroller solutions that run on ESP32 or ESP8266. If a web interface is needed, I create a Svelte application. The Svelte application is practically served by the ESP32/ESP8266.
 
 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 ESP32 web server** (PsychicHttp is my favorite, faster than ESPAsyncWebServer). 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 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.1.0, the ETag header is also supported.
+
+> Starting with version v1.3.0, ESP8266/ESP8285 is also supported.
 
 ### Usage
 
@@ -21,10 +25,14 @@ npm install -D svelteesp32
 After a successful Svelte build (rollup/webpack/vite) **create an includeable c++ header** file
 
 ```bash
-npx svelteesp32 -s ../svelteapp/dist -o ../esp32project/svelteesp32.h
+// for PsychicHttpServer
+npx svelteesp32 -e psychic -s ../svelteapp/dist -o ../esp32project/svelteesp32.h --etag
+
+// for ESPAsyncWebServer
+npx svelteesp32 -e async -s ../svelteapp/dist -o ../esp32project/svelteesp32.h --etag
 ```
 
-During the **translation process**, the processed file details are visible, and at the end, the result shows the ESP32's memory allocation (gzip size)
+During the **translation process**, the processed file details are visible, and at the end, the result shows the ESP's memory allocation (gzip size)
 
 ```
 [assets/index-KwubEIf-.js]
@@ -68,15 +76,44 @@ void setup()
 }
 ```
 
+or
+
+```c
+...
+
+#include <ESPAsyncWebServer.h>
+#include "svelteesp32.h"
+
+AsyncWebServer server(80);
+
+...
+
+void setup()
+{
+    ...
+
+    initSvelteStaticFiles(&server);
+
+    server.begin();
+}
+```
+
 The content of **generated file** (do not edit, just use)
 
 ```c
 const uint8_t data0[12547] = {0x1f, 0x8b, 0x8, 0x0, ...
 const uint8_t data1[5368] = {0x1f, 0x8b, 0x8, 0x0, 0x0, ...
+const char * etag0 = "387b88e345cc56ef9091...";
 
 void initSvelteStaticFiles(PsychicHttpServer * server) {
   server->on("/assets/index-KwubEIf-.js", HTTP_GET, [](PsychicRequest * request)
   {
+    if (request->hasHeader("If-None-Match") && ...) {
+      PsychicResponse response304(request);
+      response304.setCode(304);
+      return response304.send();
+    }
+
     PsychicResponse response(request);
     response.setContentType("application/javascript");
     response.addHeader("Content-Encoding", "gzip");
@@ -86,6 +123,10 @@ void initSvelteStaticFiles(PsychicHttpServer * server) {
 
   server->on("/assets/index-Soe6cpLA.css", HTTP_GET, [](PsychicRequest * request)
   {
+    if (request->hasHeader("If-None-Match") && ...) {
+      ...
+    }
+
     PsychicResponse response(request);
     response.setContentType("text/css");
     response.addHeader("Content-Encoding", "gzip");
@@ -97,35 +138,51 @@ void initSvelteStaticFiles(PsychicHttpServer * server) {
 }
 ```
 
+### Engines and ESP variants
+
+ESPAsyncWebServer is a popular web server that can be used on **both ESP32 and ESP8266 microcontrollers**. When you want to generate a file for this, use the `-e async` switch.
+
+If you **only work on ESP32**, I recommend using PsychicHttpServer, which uses the native mode ESP-IDF web server inside. This way, its operation is significantly faster and more continuous. You can access this mode with the `-e psychic` switch.
+
 ### Gzip
 
-All modern browsers have been able to handle gzip-compressed content for years. For this reason, there is no question that the easily compressed JS and CSS files are stored compressed in the ESP32 and sent to the browser.
+All modern browsers have been able to handle gzip-compressed content for years. For this reason, there is no question that the easily compressed JS and CSS files are stored compressed in the ESP32/ESP8266 and sent to the browser.
 
-During the translation process, data in gzip format is generated and will be used if the size is greater than 100 bytes and we experience a reduction of at least 15%. In such a case, the compressed data is unconditionally sent to the browser with the appropriate header information.
+During the translation process, data in gzip format is generated and will be used if the **size is greater than 100 bytes** and we experience a **reduction of at least 15%**. In such a case, the compressed data is unconditionally sent to the browser with the appropriate **Content-Encoding** header information.
 
 Automatic compression can be turned off with the `--no-gzip` option.
 
+### ETag
+
+The ETag HTTP header can be used to significantly reduce network traffic. If the server sends ETag information, the client can check the integrity of the file by sending back this ETag (in `If-None-Match` header) without sending the data back again. All browsers use this function, the 304 HTTP response code is clearly visible in the network traffic.
+
+Since microcontroller data traffic is moderately expensive, it is an individual decision whether to use the ETag or not. We **recommend using ETag**, which adds a bit more code (about 1-3%) but results in a much cleaner operation.
+
+The use of ETag is **not enabled by default**, this can be achieved with the `--etag` switch.
+
 ### 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://esp32_xxx.local` or just entering the `http://x.y.w.z/` IP address will serve this main file.
+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.
 
 ### Command line options
 
-| Option        | Mandatory | Description                                    | default                 |
-| ------------- | :-------: | ---------------------------------------------- | ----------------------- |
-| `-s`          |     x     | Source dist folder contains compiled web files |                         |
-| `-o`          |     x     | Generated output file with path                | `svelteesp32.h`         |
-| `--no-gzip`   |           | Do not compress content with gzip              |                         |
-| `--espmethod` |     x     | Name of generated method                       | `initSvelteStaticFiles` |
-| `-h`          |           | Show help                                      |                         |
+| Option        | Required | Description                                                      | default                 |
+| ------------- | :------: | ---------------------------------------------------------------- | ----------------------- |
+| `-e`          |    x     | The engine for which the include file is created (psychic/async) | psychic                 |
+| `-s`          |    x     | Source dist folder contains compiled web files                   |                         |
+| `-o`          |    x     | Generated output file with path                                  | `svelteesp32.h`         |
+| `--etag`      |          | Use ETag header for cache                                        | false                   |
+| `--no-gzip`   |          | Do not compress content with gzip                                | false -> gzip used      |
+| `--espmethod` |    x     | Name of generated method                                         | `initSvelteStaticFiles` |
+| `-h`          |          | Show help                                                        |                         |
 
 ### Q&A
 
 - **How big a frontend application can be placed?** If you compress the content with gzip, even a 3-4Mb assets directory can be placed. This is a serious enough amount to serve a complete application.
 
-- **How fast is cpp file compilation?** The cpp file can be large, but it can be compiled in a few seconds on any machine. If you don't modify your svelte/react app, it will use the already compiled cpp file (not recompile). This does not increase the speed of ESP32 development.
+- **How fast is cpp file compilation?** The cpp file can be large, but it can be compiled in a few seconds on any machine. If you don't modify your svelte/react app, it will use the already compiled cpp file (not recompile). This does not increase the speed of ESP32/ESP8266 development.
 
-- **Does the solution use PROGMEM?** No and yes. ESP32 no longer has PROGMEM. (Exists, but does not affect the translation). Instead, if we use a const array in the global namespace, its content will be placed in the code area, i.e. it will not be used from the heap or the stack, so the content of the files to be served will be placed next to the code.
+- **Does the solution use PROGMEM?** No and yes. ESP32 no longer has PROGMEM. (Exists, but does not affect the translation). Instead, if we use a const array in the global namespace, its content will be placed in the code area, i.e. it will not be used from the heap or the stack, so the content of the files to be served will be placed next to the code. When working on ESP8266, PROGMEM will actually be used.
 
 - **Is this safe to use in production?** I suggest you give it a try! If you find it useful and safe in several different situations, feel free to use it, just like any other free library.
 

package/dist/commandLine.d.ts

@@ -1,8 +1,10 @@
 interface ICopyFilesArguments {
+    engine: 'psychic' | 'async';
     sourcepath: string;
     outputfile: string;
     espmethod: string;
     'no-gzip': boolean;
+    etag: boolean;
     help?: boolean;
 }
 export declare const cmdLine: ICopyFilesArguments;

package/dist/commandLine.js

@@ -4,6 +4,18 @@ exports.cmdLine = void 0;
 const node_fs_1 = require("node:fs");
 const ts_command_line_args_1 = require("ts-command-line-args");
 exports.cmdLine = (0, ts_command_line_args_1.parse)({
+    engine: {
+        type: (value) => {
+            if (value === 'psychic')
+                return 'psychic';
+            if (value === 'async')
+                return 'async';
+            throw new Error(`Invalid engine: ${value}`);
+        },
+        alias: 'e',
+        description: 'The engine for which the include file is created',
+        defaultValue: 'psychic'
+    },
     sourcepath: {
         type: String,
         alias: 's',
@@ -20,6 +32,11 @@ exports.cmdLine = (0, ts_command_line_args_1.parse)({
         description: 'Do not compress content with gzip',
         defaultValue: false
     },
+    etag: {
+        type: Boolean,
+        description: 'Use ETAG header for cache',
+        defaultValue: false
+    },
     espmethod: {
         type: String,
         description: 'Name of generated method',
@@ -34,3 +51,4 @@ if (!(0, node_fs_1.existsSync)(exports.cmdLine.sourcepath) || !(0, node_fs_1.sta
     console.error(`Directory ${exports.cmdLine.sourcepath} not exists or not a directory`);
     process.exit(1);
 }
+console.log(`[SvelteESP32] Generate code for ${exports.cmdLine.engine} engine`);

package/dist/cppCode.d.ts

@@ -5,5 +5,6 @@ export type cppCodeSource = {
     mime: string;
     content: Buffer;
     isGzip: boolean;
+    md5: string;
 };
 export declare const getCppCode: (sources: cppCodeSource[]) => string;

package/dist/cppCode.js

@@ -1,50 +1,99 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCppCode = void 0;
+const handlebars_1 = require("handlebars");
 const commandLine_1 = require("./commandLine");
-const replaceAll = (s, from, to) => {
-    while (s.includes(from))
-        s = s.replace(from, to);
-    return s;
-};
-const blockTemplate = `
-  $default$server->on("/$filename$", HTTP_GET, [](PsychicRequest * request)
+const psychicTemplate = `
+//engine:   PsychicHttpServer
+//cmdline:  {{commandLine}}
+//created:  {{now}}
+//files:    {{fileCount}}
+//memory:   {{fileSize}}
+
+{{#each sources}}
+const uint8_t data{{this.index}}[{{this.length}}] = { {{this.bytes}} };
+{{#if ../isEtag}}
+const char * etag{{this.index}} = "{{this.md5}}";
+{{/if}}
+{{/each}}
+
+void {{methodName}}(PsychicHttpServer * server) {
+{{#each sources}}
+
+  {{#if this.isDefault}}server->defaultEndpoint = {{/if}}server->on("/{{this.filename}}", HTTP_GET, [](PsychicRequest * request)
   {
+  {{#if ../isEtag}}
+    if (request->hasHeader("If-None-Match") && request->header("If-None-Match") == String(etag{{this.index}})) {
+      PsychicResponse response304(request);
+      response304.setCode(304);
+      return response304.send();
+    }
+  {{/if}}
     PsychicResponse response(request);
-    response.setContentType("$mime$");
-    response.addHeader("Content-Encoding", "$encoding$");
-    response.setContent(data$index$, sizeof(data$index$));
+    response.setContentType("{{this.mime}}");
+  {{#if this.isGzip}}
+    response.addHeader("Content-Encoding", "gzip");
+  {{/if}}
+    {{#if ../isEtag}}
+    response.addHeader("ETag", etag{{this.index}});
+  {{/if}}
+    response.setContent(data{{this.index}}, sizeof(data{{this.index}}));
     return response.send();
   });
-`;
-const getCppBlock = (source) => {
-    let result = blockTemplate;
-    result = replaceAll(result, '$default$', source.filename.startsWith('index.htm') ? 'server->defaultEndpoint = ' : '');
-    result = replaceAll(result, '$index$', source.index.toString());
-    result = replaceAll(result, '$filename$', source.filename);
-    result = replaceAll(result, '$size$', source.content.length.toString());
-    result = replaceAll(result, '$mime$', source.mime);
-    result = replaceAll(result, '$encoding$', source.isGzip ? 'gzip' : 'identity');
-    return result;
-};
-const fileTemplate = `
-$arrays$
-
-void $method$(PsychicHttpServer * server) {
-$code$
+{{/each}}
 }`;
-const getCppCode = (sources) => {
-    const arrays = [];
-    const blocks = [];
-    for (const source of sources) {
-        const bytesString = [...source.content].map((v) => `0x${v.toString(16)}`).join(', ');
-        arrays.push(`const uint8_t data${source.index}[${source.content.length}] = {${bytesString}};`);
-        blocks.push(getCppBlock(source));
+const asyncTemplate = `
+//engine:   ESPAsyncWebServer
+//cmdline:  {{commandLine}}
+//created:  {{now}}
+//files:    {{fileCount}}
+//memory:   {{fileSize}}
+
+{{#each sources}}
+const uint8_t data{{this.index}}[{{this.length}}] PROGMEM = { {{this.bytes}} };
+{{#if ../isEtag}}
+const char * etag{{this.index}} = "{{this.md5}}";
+{{/if}}
+{{/each}}
+
+void {{methodName}}(AsyncWebServer * server) {
+{{#each sources}}
+
+  ArRequestHandlerFunction func{{this.index}} = [](AsyncWebServerRequest * request)
+  {
+  {{#if ../isEtag}}
+    if (request->hasHeader("If-None-Match") && request->getHeader("If-None-Match")->value() == String(etag{{this.index}})) {
+      request->send(304);
+      return;
     }
-    let result = fileTemplate;
-    result = replaceAll(result, '$arrays$', arrays.join('\n'));
-    result = replaceAll(result, '$method$', commandLine_1.cmdLine.espmethod);
-    result = replaceAll(result, '$code$', blocks.join(''));
-    return result;
-};
+  {{/if}}
+    AsyncWebServerResponse *response = request->beginResponse_P(200, "{{this.mime}}", data{{this.index}}, {{this.length}});
+  {{#if this.isGzip}}
+    response->addHeader("Content-Encoding", "gzip");
+  {{/if}}
+  {{#if ../isEtag}}
+    response->addHeader("ETag", etag{{this.index}});
+  {{/if}}
+    request->send(response);
+  };
+  server->on("/{{this.filename}}", HTTP_GET, func{{this.index}});
+{{#if this.isDefault}}
+  server->on("/", HTTP_GET, func{{this.index}});
+{{/if}}
+{{/each}}
+}`;
+const getCppCode = (sources) => (0, handlebars_1.compile)(commandLine_1.cmdLine.engine === 'psychic' ? psychicTemplate : asyncTemplate)({
+    commandLine: process.argv.slice(2).join(' '),
+    now: `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`,
+    fileCount: sources.length.toString(),
+    fileSize: sources.reduce((previous, current) => previous + current.content.length, 0).toString(),
+    sources: sources.map((s) => ({
+        ...s,
+        length: s.content.length,
+        bytes: [...s.content].map((v) => `0x${v.toString(16)}`).join(', '),
+        isDefault: s.filename.startsWith('index.htm')
+    })),
+    isEtag: commandLine_1.cmdLine.etag,
+    methodName: commandLine_1.cmdLine.espmethod
+}).trim();
 exports.getCppCode = getCppCode;

package/dist/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const node_crypto_1 = require("node:crypto");
 const node_fs_1 = require("node:fs");
 const node_path_1 = require("node:path");
 const node_zlib_1 = require("node:zlib");
@@ -19,6 +20,7 @@ for (const file of (0, file_1.getFiles)()) {
     summary.filecount++;
     console.log(`[${file}]`);
     const rawContent = (0, node_fs_1.readFileSync)((0, node_path_1.join)(commandLine_1.cmdLine.sourcepath, file), { flag: 'r' });
+    const md5 = (0, node_crypto_1.createHash)('md5').update(rawContent).digest('hex');
     summary.size += rawContent.length;
     if (commandLine_1.cmdLine['no-gzip']) {
         sources.push({
@@ -26,7 +28,8 @@ for (const file of (0, file_1.getFiles)()) {
             filename: file,
             content: rawContent,
             isGzip: false,
-            mime
+            mime,
+            md5
         });
         console.log(`- gzip skipped (${rawContent.length})`);
     }
@@ -39,7 +42,8 @@ for (const file of (0, file_1.getFiles)()) {
                 filename: file,
                 content: zipContent,
                 isGzip: true,
-                mime
+                mime,
+                md5
             });
             console.log(`✓ gzip used (${rawContent.length} -> ${zipContent.length})`);
         }
@@ -49,7 +53,8 @@ for (const file of (0, file_1.getFiles)()) {
                 filename: file,
                 content: rawContent,
                 isGzip: false,
-                mime
+                mime,
+                md5
             });
             console.log(`x gzip unused (${rawContent.length} -> ${zipContent.length})`);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelteesp32",
-  "version": "1.0.4",
+  "version": "1.2.0",
   "description": "Convert Svelte (or any frontend) JS application to serve it from ESP32 webserver (PsychicHttp)",
   "author": "BCsabaEngine",
   "license": "ISC",
@@ -28,7 +28,10 @@
   },
   "homepage": "https://github.com/BCsabaEngine/svelteesp32",
   "scripts": {
-    "dev": "nodemon src/index.ts -- -s ./svelte/dist -o ../../../Arduino/EspSvelte/svelteesp32.h",
+    "dev:psychic": "nodemon src/index.ts -- -e psychic -s ./svelte/dist -o ../../../Arduino/SvelteEsp32/svelteesp32.h --etag",
+    "dev:psychic:local": "nodemon src/index.ts -- -e psychic -s ./svelte/dist -o ./svelteesp32.h --etag",
+    "dev:async": "nodemon src/index.ts -- -e async -s ./svelte/dist -o ../../../Arduino/SvelteEsp8266/svelteesp32.h --etag",
+    "dev:async:local": "nodemon src/index.ts -- -e async -s ./svelte/dist -o ./svelteesp32.h --etag",
     "clean": "tsc --build --clean",
     "build": "tsc --build --clean && tsc --build --force",
     "format:check": "prettier --check .",
@@ -40,16 +43,21 @@
     "npm-publish-minor": "npm run build && npm version minor && npm publish && npm run clean && git push"
   },
   "keywords": [
-    "Svelte",
+    "svelte",
+    "angular",
+    "react",
+    "vue",
     "eps32",
+    "esp8266",
     "webserver",
-    "PsychicHttp"
+    "psychichttpserver",
+    "espasyncwebserver"
   ],
   "devDependencies": {
     "@types/mime-types": "^2.1.4",
-    "@types/node": "^20.11.17",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@types/node": "^20.11.19",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-simple-import-sort": "^12.0.0",
@@ -62,6 +70,7 @@
   },
   "dependencies": {
     "glob": "^10.3.10",
+    "handlebars": "^4.7.8",
     "mime-types": "^2.1.35",
     "ts-command-line-args": "^2.5.1"
   }