svelteesp32 1.3.0 → 1.4.0

package/README.md

@@ -1,5 +1,7 @@
 # `svelteesp32` ![image](https://badges.github.io/stability-badges/dist/stable.svg)
 
+[Changelog](CHANGELOG.md)
+
 # Convert Svelte (or React/Angular/Vue) JS application to serve it from ESP32/ESP8266 webserver
 
 ### Forget SPIFFS and LittleFS now
@@ -10,11 +12,13 @@ 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.1.0, the ETag header is also supported.
+> Version v1.4.0 has a breaking change! --no-gzip changed to --gzip. Starting with this version c++ compiler directives are available to setup operation in project level.
+
+> Starting with version v1.3.0, c++ defines can be used.
 
 > Starting with version v1.2.0, ESP8266/ESP8285 is also supported.
 
-> Starting with version v1.3.0, c++ defines can be used.
+> Starting with version v1.1.0, the ETag header is also supported.
 
 ### Usage
 
@@ -28,29 +32,20 @@ After a successful Svelte build (rollup/webpack/vite) **create an includeable c+
 
 ```bash
 // for PsychicHttpServer
-npx svelteesp32 -e psychic -s ../svelteapp/dist -o ../esp32project/svelteesp32.h --etag
+npx svelteesp32 -e psychic -s ../svelteapp/dist -o ../esp32project/svelteesp32.h --etag=true
 
 // for ESPAsyncWebServer
-npx svelteesp32 -e async -s ../svelteapp/dist -o ../esp32project/svelteesp32.h --etag
+npx svelteesp32 -e async -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)
 
 ```
-[assets/index-KwubEIf-.js]
-✓ gzip used (38850 -> 12547)
-
-[assets/index-Soe6cpLA.css]
-✓ gzip used (32494 -> 5368)
-
-[favicon.png]
-x gzip unused (33249 -> 33282)
-
-[index.html]
-✓ gzip used (472 -> 308)
-
-[roboto_regular.json]
-✓ gzip used (363757 -> 93567)
+[assets/index-KwubEIf-.js]  ✓ gzip used (38850 -> 12547)
+[assets/index-Soe6cpLA.css] ✓ gzip used (32494 -> 5368)
+[favicon.png]               x gzip unused (33249 -> 33282)
+[index.html]                x gzip unused (too small) (472 -> 308)
+[roboto_regular.json]       ✓ gzip used (363757 -> 93567)
 
 5 files, 458kB original size, 142kB gzip size
 ../../../Arduino/EspSvelte/svelteesp32.h 842kB size
@@ -107,7 +102,8 @@ The content of **generated file** (do not edit, just use)
 ```c
 #define SVELTEESP32_COUNT 5
 #define SVELTEESP32_SIZE 145633
-#define SVELTEESP32_FILE_index_html
+#define SVELTEESP32_FILE_INDEX_HTML
+#define SVELTEESP32_HTML_FILES 1
 ...
 
 const uint8_t data0[12547] = {0x1f, 0x8b, 0x8, 0x0, ...
@@ -157,9 +153,11 @@ If you **only work on ESP32**, I recommend using PsychicHttpServer, which uses t
 
 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 **Content-Encoding** header information.
+During the translation process, data in gzip format is generated and will be used if the **size is greater than 1024 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.
+Automatic compression can be turned off with the `--gzip=false` option.
+
+> This setting has three states: yes, no, and compiler mode is available. In compiler mode, you can disable/enable Gzip by setting the `SVELTEESP32_ENABLE_GZIP` c++ compiler directive. For example, if using platformio, just write `-D SVELTEESP32_ENABLE_GZIP`.
 
 ### ETag
 
@@ -167,7 +165,9 @@ The ETag HTTP header can be used to significantly reduce network traffic. If the
 
 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.
+The use of ETag is **not enabled by default**, this can be achieved with the `--etag=true` switch.
+
+> 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`.
 
 ### Main entry point - index.html
 
@@ -189,39 +189,59 @@ You can use the COUNT and SIZE constants:
 ...
 ```
 
-You can include a warning if a named file accidentally missing from the build:
+You can include a blocker error if a named file accidentally missing from the build:
 
 ```c
 ...
 #include "svelteesp32.h"
 
-#ifndef SVELTEESP32_FILE_index_html
+#ifndef SVELTEESP32_FILE_INDEX_HTML
   #error Missing index file
 #endif
 ...
 ```
 
+...or if there are too many of a file type:
+
+```c
+...
+#include "svelteesp32.h"
+
+#if SVELTEESP32_CSS_FILES > 1
+  #error Too many CSS files
+#endif
+...
+```
+
+You can use the following c++ directives at the project level if you want to configure the usage there: `SVELTEESP32_ENABLE_ETAG` and `SVELTEESP32_ENABLE_GZIP`. (Do not forget `--etag=compiler` or `--gzip=compiler` command line arg!)
+
 ### Command line options
 
-| 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` |
-| `--define`    |    x     | Prefix of c++ defines                                            | `SVELTEESP32`           |
-| `-h`          |          | Show help                                                        |                         |
+| Option        | Description                                                      | default                 |
+| ------------- | ---------------------------------------------------------------- | ----------------------- |
+| `-s`          | **Source dist folder contains compiled web files**               |                         |
+| `-e`          | The engine for which the include file is created (psychic/async) | psychic                 |
+| `-o`          | Generated output file with path                                  | `svelteesp32.h`         |
+| `--etag`      | Use ETag header for cache (true/false/compiler)                  | false                   |
+| `--gzip`      | Compress content with gzip (true/false/compiler)                 | true                    |
+| `--created`   | Include creation time                                            | false                   |
+| `--version`   | Include a version string, `--version=v$npm_package_version`      | ''                      |
+| `--espmethod` | Name of generated method                                         | `initSvelteStaticFiles` |
+| `--define`    | Prefix of c++ defines                                            | `SVELTEESP32`           |
+| `-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/ESP8266 development.
+- **How fast is cpp file compilation?** The cpp (.h) 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. 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.
+- **Why is the .h file so big?** The source files are always larger than the binary compiled from them. Does the size information in the header (SVELTEESP32_SIZE, SVELTEESP32_SIZE_GZIP) show the actual memory allocation.
+
+- **Is collaboration between groups supported?** Yes, the Frontend team produces the application, the use of svelteesp32 is part of the build process. Then, provided with a version number, the .h file is placed in git, which the ESP team translates into the platformio application.
 
 - **Will you develop it further?** Since I use it myself, I will do my best to make the solution better and better.
+
+- **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

@@ -4,8 +4,10 @@ interface ICopyFilesArguments {
     outputfile: string;
     espmethod: string;
     define: string;
-    'no-gzip': boolean;
-    etag: boolean;
+    gzip: 'true' | 'false' | 'compiler';
+    etag: 'true' | 'false' | 'compiler';
+    created: boolean;
+    version: string;
     help?: boolean;
 }
 export declare const cmdLine: ICopyFilesArguments;

package/dist/commandLine.js

@@ -13,7 +13,7 @@ exports.cmdLine = (0, ts_command_line_args_1.parse)({
             throw new Error(`Invalid engine: ${value}`);
         },
         alias: 'e',
-        description: 'The engine for which the include file is created',
+        description: 'The engine for which the include file is created (psychic|async)',
         defaultValue: 'psychic'
     },
     sourcepath: {
@@ -27,16 +27,42 @@ exports.cmdLine = (0, ts_command_line_args_1.parse)({
         description: 'Generated output file with path',
         defaultValue: 'svelteesp32.h'
     },
-    'no-gzip': {
-        type: Boolean,
-        description: 'Do not compress content with gzip',
-        defaultValue: false
-    },
     etag: {
-        type: Boolean,
+        type: (value) => {
+            if (value === 'true')
+                return 'true';
+            if (value === 'false')
+                return 'false';
+            if (value === 'compiler')
+                return 'compiler';
+            throw new Error(`Invalid etag: ${value}`);
+        },
         description: 'Use ETAG header for cache',
+        defaultValue: 'false'
+    },
+    gzip: {
+        type: (value) => {
+            if (value === 'true')
+                return 'true';
+            if (value === 'false')
+                return 'false';
+            if (value === 'compiler')
+                return 'compiler';
+            throw new Error(`Invalid etag: ${value}`);
+        },
+        description: 'Compress content with gzip',
+        defaultValue: 'true'
+    },
+    created: {
+        type: Boolean,
+        description: 'Include creation time in the output file',
         defaultValue: false
     },
+    version: {
+        type: String,
+        description: 'Include version info in the output file',
+        defaultValue: ''
+    },
     espmethod: {
         type: String,
         description: 'Name of generated method',

package/dist/consoleColor.d.ts

@@ -0,0 +1,3 @@
+export declare const greenLog: (s: string) => string;
+export declare const yellowLog: (s: string) => string;
+export declare const redLog: (s: string) => string;

package/dist/consoleColor.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.redLog = exports.yellowLog = exports.greenLog = void 0;
+const greenLog = (s) => `\u001B[32m ${s} \u001B[0m`;
+exports.greenLog = greenLog;
+const yellowLog = (s) => `\u001B[33m ${s} \u001B[0m`;
+exports.yellowLog = yellowLog;
+const redLog = (s) => `\u001B[31m ${s} \u001B[0m`;
+exports.redLog = redLog;

package/dist/cppCode.d.ts

@@ -1,9 +1,17 @@
-export type cppCodeSource = {
+export type CppCodeSource = {
     filename: string;
     dataname: string;
+    datanameUpperCase: string;
     mime: string;
     content: Buffer;
+    contentGzip: Buffer;
     isGzip: boolean;
     md5: string;
 };
-export declare const getCppCode: (sources: cppCodeSource[]) => string;
+export type CppCodeSources = CppCodeSource[];
+export type ExtensionGroup = {
+    extension: string;
+    count: number;
+};
+export type ExtensionGroups = ExtensionGroup[];
+export declare const getCppCode: (sources: CppCodeSources, filesByExtension: ExtensionGroups) => string;

package/dist/cppCode.js

@@ -5,47 +5,176 @@ const handlebars_1 = require("handlebars");
 const commandLine_1 = require("./commandLine");
 const psychicTemplate = `
 //engine:   PsychicHttpServer
-//cmdline:  {{commandLine}}
+//cmdline:  {{{commandLine}}}
+{{#if created }}
 //created:  {{now}}
-//files:    {{fileCount}}
-//memory:   {{fileSize}}
+{{/if}}
+//
 
-#include <Arduino.h>
-#include <PsychicHttp.h>
-#include <PsychicHttpsServer.h>
+{{#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.dataname}}
+#define {{../definePrefix}}_FILE_{{this.datanameUpperCase}}
 {{/each}}
 
-{{#each sources}}
+//
+{{#each filesByExtension}}
+#define {{../definePrefix}}_{{this.extension}}_FILES {{this.count}}
+{{/each}}
+
+//
+#include <Arduino.h>
+#include <PsychicHttp.h>
+#include <PsychicHttpsServer.h>
+
+//
+{{#switch gzip}}
+{{#case "true"}}
+  {{#each sources}}
+const uint8_t datagzip_{{this.dataname}}[{{this.lengthGzip}}] = { {{this.bytesGzip}} };
+  {{/each}}
+{{/case}}
+{{#case "false"}}
+  {{#each sources}}
 const uint8_t data_{{this.dataname}}[{{this.length}}] = { {{this.bytes}} };
-{{#if ../isEtag}}
+  {{/each}}
+{{/case}}
+{{#case "compiler"}}
+#ifdef {{definePrefix}}_ENABLE_GZIP
+  {{#each sources}}
+const uint8_t datagzip_{{this.dataname}}[{{this.lengthGzip}}] = { {{this.bytesGzip}} };
+  {{/each}}
+#else
+  {{#each sources}}
+const uint8_t data_{{this.dataname}}[{{this.length}}] = { {{this.bytes}} };
+  {{/each}}
+#endif 
+{{/case}}
+{{/switch}}
+
+//
+{{#switch etag}}
+{{#case "true"}}
+  {{#each sources}}
 const char * etag_{{this.dataname}} = "{{this.md5}}";
-{{/if}}
-{{/each}}
+  {{/each}}
+{{/case}}
+{{#case "false"}}
+{{/case}}
+{{#case "compiler"}}
+#ifdef {{definePrefix}}_ENABLE_ETAG
+  {{#each sources}}
+const char * etag_{{this.dataname}} = "{{this.md5}}";
+  {{/each}}
+#endif 
+{{/case}}
+{{/switch}}
 
+//
+// Http Handlers
 void {{methodName}}(PsychicHttpServer * server) {
 {{#each sources}}
+//
+// {{this.filename}}
   {{#if this.isDefault}}server->defaultEndpoint = {{/if}}server->on("/{{this.filename}}", HTTP_GET, [](PsychicRequest * request) {
-    {{#if ../isEtag}}
+
+{{#switch ../etag}}
+{{#case "true"}}
     if (request->hasHeader("If-None-Match") && request->header("If-None-Match") == String(etag_{{this.dataname}})) {
       PsychicResponse response304(request);
       response304.setCode(304);
       return response304.send();
     }
-    {{/if}}
+{{/case}}
+{{#case "compiler"}}
+  #ifdef {{../definePrefix}}_ENABLE_ETAG
+    if (request->hasHeader("If-None-Match") && request->header("If-None-Match") == String(etag_{{this.dataname}})) {
+      PsychicResponse response304(request);
+      response304.setCode(304);
+      return response304.send();
+    }
+  #endif 
+{{/case}}
+{{/switch}}
+
     PsychicResponse response(request);
     response.setContentType("{{this.mime}}");
-    {{#if this.isGzip}}
+
+{{#switch ../gzip}}
+{{#case "true"}}
+{{#if this.isGzip}}
     response.addHeader("Content-Encoding", "gzip");
-    {{/if}}
-    {{#if ../isEtag}}
+{{/if}}
+{{/case}}
+{{#case "compiler"}}
+  {{#if this.isGzip}}
+  #ifdef {{../definePrefix}}_ENABLE_GZIP
+    response.addHeader("Content-Encoding", "gzip");
+  #endif 
+  {{/if}}
+{{/case}}
+{{/switch}}
+
+{{#switch ../etag}}
+{{#case "true"}}
     response.addHeader("ETag", etag_{{this.dataname}});
-    {{/if}}
-    response.setContent(data_{{this.dataname}}, sizeof(data_{{this.dataname}}));
+{{/case}}
+{{#case "compiler"}}
+  #ifdef {{../definePrefix}}_ENABLE_ETAG
+    response.addHeader("ETag", etag_{{this.dataname}});
+  #endif 
+{{/case}}
+{{/switch}}
+
+{{#switch ../gzip}}
+{{#case "true"}}
+    response.setContent(datagzip_{{this.dataname}}, {{this.lengthGzip}});
+{{/case}}
+{{#case "false"}}
+    response.setContent(data_{{this.dataname}}, {{this.length}});
+{{/case}}
+{{#case "compiler"}}
+  #ifdef {{../definePrefix}}_ENABLE_GZIP
+    response.setContent(datagzip_{{this.dataname}}, {{this.lengthGzip}});
+  #else
+    response.setContent(data_{{this.dataname}}, {{this.length}});
+  #endif 
+{{/case}}
+{{/switch}}
+
     return response.send();
   });
 
@@ -53,43 +182,161 @@ void {{methodName}}(PsychicHttpServer * server) {
 }`;
 const asyncTemplate = `
 //engine:   ESPAsyncWebServer
-//cmdline:  {{commandLine}}
+//cmdline:  {{{commandLine}}}
+{{#if created }}
 //created:  {{now}}
-//files:    {{fileCount}}
-//memory:   {{fileSize}}
+{{/if}}
+//
 
-#include <Arduino.h>
-#include <ESPAsyncWebServer.h>
+{{#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.dataname}}
+#define {{../definePrefix}}_FILE_{{this.datanameUpperCase}}
 {{/each}}
 
-{{#each sources}}
+//
+{{#each filesByExtension}}
+#define {{../definePrefix}}_{{this.extension}}_FILES {{this.count}}
+{{/each}}
+
+//
+#include <Arduino.h>
+#include <ESPAsyncWebServer.h>
+
+//
+{{#switch gzip}}
+{{#case "true"}}
+  {{#each sources}}
+const uint8_t datagzip_{{this.dataname}}[{{this.lengthGzip}}] PROGMEM = { {{this.bytesGzip}} };
+  {{/each}}
+{{/case}}
+{{#case "false"}}
+  {{#each sources}}
 const uint8_t data_{{this.dataname}}[{{this.length}}] PROGMEM = { {{this.bytes}} };
-{{#if ../isEtag}}
+  {{/each}}
+{{/case}}
+{{#case "compiler"}}
+#ifdef {{definePrefix}}_ENABLE_GZIP
+  {{#each sources}}
+const uint8_t datagzip_{{this.dataname}}[{{this.lengthGzip}}] PROGMEM = { {{this.bytesGzip}} };
+  {{/each}}
+#else
+  {{#each sources}}
+const uint8_t data_{{this.dataname}}[{{this.length}}] PROGMEM = { {{this.bytes}} };
+  {{/each}}
+#endif 
+{{/case}}
+{{/switch}}
+
+//
+{{#switch etag}}
+{{#case "true"}}
+  {{#each sources}}
 const char * etag_{{this.dataname}} = "{{this.md5}}";
-{{/if}}
-{{/each}}
+  {{/each}}
+{{/case}}
+{{#case "false"}}
+{{/case}}
+{{#case "compiler"}}
+#ifdef {{definePrefix}}_ENABLE_ETAG
+  {{#each sources}}
+const char * etag_{{this.dataname}} = "{{this.md5}}";
+  {{/each}}
+#endif 
+{{/case}}
+{{/switch}}
 
+//
+// Http Handlers
 void {{methodName}}(AsyncWebServer * server) {
 {{#each sources}}
+//
+// {{this.filename}}
   ArRequestHandlerFunction func_{{this.dataname}} = [](AsyncWebServerRequest * request) {
-    {{#if ../isEtag}}
+
+{{#switch ../etag}}
+{{#case "true"}}
     if (request->hasHeader("If-None-Match") && request->getHeader("If-None-Match")->value() == String(etag_{{this.dataname}})) {
       request->send(304);
       return;
     }
+{{/case}}
+{{#case "compiler"}}
+  #ifdef {{../definePrefix}}_ENABLE_ETAG
+    if (request->hasHeader("If-None-Match") && request->getHeader("If-None-Match")->value() == String(etag_{{this.dataname}})) {
+      request->send(304);
+      return;
+    }
+  #endif 
+{{/case}}
+{{/switch}}
+
+{{#switch ../gzip}}
+{{#case "true"}}
+    AsyncWebServerResponse *response = request->beginResponse_P(200, "{{this.mime}}", datagzip_{{this.dataname}}, {{this.lengthGzip}});
+    {{#if this.isGzip}}
+    response->addHeader("Content-Encoding", "gzip");
     {{/if}}
+{{/case}}
+{{#case "false"}}
     AsyncWebServerResponse *response = request->beginResponse_P(200, "{{this.mime}}", data_{{this.dataname}}, {{this.length}});
+{{/case}}
+{{#case "compiler"}}
+  #ifdef {{../definePrefix}}_ENABLE_GZIP
+    AsyncWebServerResponse *response = request->beginResponse_P(200, "{{this.mime}}", datagzip_{{this.dataname}}, {{this.lengthGzip}});
     {{#if this.isGzip}}
     response->addHeader("Content-Encoding", "gzip");
     {{/if}}
-    {{#if ../isEtag}}
+  #else
+    AsyncWebServerResponse *response = request->beginResponse_P(200, "{{this.mime}}", data_{{this.dataname}}, {{this.length}});
+  #endif 
+{{/case}}
+{{/switch}}
+
+{{#switch ../etag}}
+{{#case "true"}}
     response->addHeader("ETag", etag_{{this.dataname}});
-    {{/if}}
+{{/case}}
+{{#case "compiler"}}
+  #ifdef {{../definePrefix}}_ENABLE_ETAG
+    response->addHeader("ETag", etag_{{this.dataname}});
+  #endif 
+{{/case}}
+{{/switch}}
+
     request->send(response);
   };
   server->on("/{{this.filename}}", HTTP_GET, func_{{this.dataname}});
@@ -99,19 +346,50 @@ void {{methodName}}(AsyncWebServer * server) {
 
 {{/each}}
 }`;
-const getCppCode = (sources) => (0, handlebars_1.compile)(commandLine_1.cmdLine.engine === 'psychic' ? psychicTemplate : asyncTemplate)({
+let switchValue;
+const getCppCode = (sources, filesByExtension) => (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(),
+    fileGzipSize: sources.reduce((previous, current) => previous + current.contentGzip.length, 0).toString(),
     sources: sources.map((s) => ({
         ...s,
         length: s.content.length,
-        bytes: [...s.content].map((v) => `0x${v.toString(16)}`).join(', '),
+        bytes: [...s.content].map((v) => `${v.toString(10)}`).join(','),
+        lengthGzip: s.contentGzip.length,
+        bytesGzip: [...s.contentGzip].map((v) => `${v.toString(10)}`).join(','),
         isDefault: s.filename.startsWith('index.htm')
     })),
-    isEtag: commandLine_1.cmdLine.etag,
+    filesByExtension,
+    etag: commandLine_1.cmdLine.etag,
+    gzip: commandLine_1.cmdLine.gzip,
+    created: commandLine_1.cmdLine.created,
+    version: commandLine_1.cmdLine.version,
     methodName: commandLine_1.cmdLine.espmethod,
     definePrefix: commandLine_1.cmdLine.define
-}).trim();
+}, {
+    helpers: {
+        ifeq: function (a, b, options) {
+            if (a == b)
+                return options.fn(this);
+            return options.inverse(this);
+        },
+        switch: function (value, options) {
+            switchValue = value;
+            return options.fn(this);
+        },
+        case: function (value, options) {
+            if (value == switchValue)
+                return options.fn(this);
+            return options.inverse(this);
+        }
+    }
+})
+    .split('\n')
+    .map((line) => line.trimEnd())
+    .filter(Boolean)
+    .map((line) => (line == '//' ? '' : line))
+    .join('\n')
+    .replace(/\\n{2}/, '\n');
 exports.getCppCode = getCppCode;

package/dist/file.js

@@ -7,7 +7,20 @@ exports.getFiles = void 0;
 const node_path_1 = __importDefault(require("node:path"));
 const glob_1 = require("glob");
 const commandLine_1 = require("./commandLine");
-const getFiles = () => (0, glob_1.globSync)('**/*', { cwd: commandLine_1.cmdLine.sourcepath, nodir: true })
-    .filter((filename) => !['.gz', '.brottli'].includes(node_path_1.default.extname(filename)))
-    .sort();
+const consoleColor_1 = require("./consoleColor");
+const getFiles = () => {
+    let files = (0, glob_1.globSync)('**/*', { cwd: commandLine_1.cmdLine.sourcepath, nodir: true });
+    files = files.filter((filename) => {
+        const extension = node_path_1.default.extname(filename);
+        if (['.gz', '.brottli', '.br'].includes(extension)) {
+            const original = filename.slice(0, -1 * extension.length);
+            if (files.includes(original)) {
+                console.log((0, consoleColor_1.redLog)(`${filename} skipped because is perhaps a compressed version of ${original}`));
+                return false;
+            }
+        }
+        return true;
+    });
+    return files.sort();
+};
 exports.getFiles = getFiles;

package/dist/index.js

@@ -9,6 +9,7 @@ const node_path_1 = __importDefault(require("node:path"));
 const node_zlib_1 = require("node:zlib");
 const mime_types_1 = require("mime-types");
 const commandLine_1 = require("./commandLine");
+const consoleColor_1 = require("./consoleColor");
 const cppCode_1 = require("./cppCode");
 const file_1 = require("./file");
 const summary = {
@@ -17,65 +18,63 @@ const summary = {
     gzipsize: 0
 };
 const sources = [];
+const filesByExtension = [];
 const files = (0, file_1.getFiles)();
 if (files.length === 0) {
     console.error(`Directory ${commandLine_1.cmdLine.sourcepath} is empty`);
     process.exit(1);
 }
+const rightPad = files.reduce((p, c) => (c.length > p ? c.length : p), 0);
 for (const file of files) {
     const mime = (0, mime_types_1.lookup)(file) || 'text/plain';
     summary.filecount++;
-    console.log(`[${file}]`);
     const filename = file.replace(/\\/g, '/');
     const dataname = filename.replace(/[./-]/g, '_');
-    const rawContent = (0, node_fs_1.readFileSync)(node_path_1.default.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']) {
+    let extension = node_path_1.default.extname(filename).toUpperCase();
+    if (extension.startsWith('.'))
+        extension = extension.slice(1);
+    const group = filesByExtension.find((fe) => fe.extension === extension);
+    if (group)
+        group.count += 1;
+    else
+        filesByExtension.push({ extension, count: 1 });
+    const content = (0, node_fs_1.readFileSync)(node_path_1.default.join(commandLine_1.cmdLine.sourcepath, file), { flag: 'r' });
+    const md5 = (0, node_crypto_1.createHash)('md5').update(content).digest('hex');
+    summary.size += content.length;
+    const zipContent = (0, node_zlib_1.gzipSync)(content, { level: 9 });
+    summary.gzipsize += zipContent.length;
+    const zipRatio = Math.round((zipContent.length / content.length) * 100);
+    if (content.length > 1024 && zipContent.length < content.length * 0.85) {
         sources.push({
-            filename: filename,
+            filename,
             dataname,
-            content: rawContent,
-            isGzip: false,
+            datanameUpperCase: dataname.toUpperCase(),
+            content,
+            contentGzip: zipContent,
+            isGzip: true,
             mime,
             md5
         });
-        console.log(`- gzip skipped (${rawContent.length})`);
+        console.log((0, consoleColor_1.greenLog)(`[${file}] ${' '.repeat(rightPad - file.length)} ✓ gzip used (${content.length} -> ${zipContent.length} = ${zipRatio}%)`));
     }
     else {
-        const zipContent = (0, node_zlib_1.gzipSync)(rawContent, { level: 9 });
-        summary.gzipsize += zipContent.length;
-        if (rawContent.length > 100 && zipContent.length < rawContent.length * 0.85) {
-            sources.push({
-                filename: filename,
-                dataname,
-                content: zipContent,
-                isGzip: true,
-                mime,
-                md5
-            });
-            console.log(`✓ gzip used (${rawContent.length} -> ${zipContent.length})`);
-        }
-        else {
-            sources.push({
-                filename: filename,
-                dataname,
-                content: rawContent,
-                isGzip: false,
-                mime,
-                md5
-            });
-            console.log(`x gzip unused (${rawContent.length} -> ${zipContent.length})`);
-        }
+        sources.push({
+            filename,
+            dataname,
+            datanameUpperCase: dataname.toUpperCase(),
+            content,
+            contentGzip: content,
+            isGzip: false,
+            mime,
+            md5
+        });
+        console.log((0, consoleColor_1.yellowLog)(`[${file}] ${' '.repeat(rightPad - file.length)} x gzip unused ${content.length <= 1024 ? `(too small) ` : ''}(${content.length} -> ${zipContent.length} = ${zipRatio}%)`));
     }
-    console.log('');
-}
-const cppFile = (0, cppCode_1.getCppCode)(sources);
-(0, node_fs_1.writeFileSync)(commandLine_1.cmdLine.outputfile, cppFile);
-if (commandLine_1.cmdLine['no-gzip']) {
-    console.log(`${summary.filecount} files, ${Math.round(summary.size / 1024)}kB original size`);
-}
-else {
-    console.log(`${summary.filecount} files, ${Math.round(summary.size / 1024)}kB original size, ${Math.round(summary.gzipsize / 1024)}kB gzip size`);
 }
+console.log('');
+filesByExtension.sort((left, right) => left.extension.localeCompare(right.extension));
+const cppFile = (0, cppCode_1.getCppCode)(sources, filesByExtension);
+(0, node_fs_1.mkdirSync)(node_path_1.default.normalize(node_path_1.default.dirname(commandLine_1.cmdLine.outputfile)), { recursive: true });
+(0, node_fs_1.writeFileSync)(commandLine_1.cmdLine.outputfile, cppFile, { flush: true, encoding: 'utf8' });
+console.log(`${summary.filecount} files, ${Math.round(summary.size / 1024)}kB original size, ${Math.round(summary.gzipsize / 1024)}kB gzip size`);
 console.log(`${commandLine_1.cmdLine.outputfile} ${Math.round(cppFile.length / 1024)}kB size`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelteesp32",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Convert Svelte (or any frontend) JS application to serve it from ESP32 webserver (PsychicHttp)",
   "author": "BCsabaEngine",
   "license": "ISC",
@@ -28,13 +28,9 @@
   },
   "homepage": "https://github.com/BCsabaEngine/svelteesp32",
   "scripts": {
-    "dev:async": "nodemon src/index.ts -- -e async -s ./demo/svelte/dist -o ./demo/esp32/include/svelteesp32async.h --etag",
-    "dev:psychic": "nodemon src/index.ts -- -e psychic -s ./demo/svelte/dist -o ./demo/esp32/include/svelteesp32psychic.h --etag",
-    "run:async": "tsx src/index.ts -e async -s ./demo/svelte/dist -o ./demo/esp32/include/svelteesp32async.h --etag",
-    "run:psychic": "tsx src/index.ts -e psychic -s ./demo/svelte/dist -o ./demo/esp32/include/svelteesp32psychic.h --etag",
-    "run:both": "npm run run:async && npm run run:psychic",
-    "platformio": "~/.platformio/penv/bin/pio run -d ./demo/esp32",
-    "run:both:build": "npm run run:both && npm run platformio",
+    "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: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",
+    "test:all": "./package.script && ~/.platformio/penv/bin/pio run -d ./demo/esp32",
     "clean": "tsc --build --clean",
     "build": "tsc --build --clean && tsc --build --force",
     "format:check": "prettier --check .",
@@ -56,7 +52,7 @@
   ],
   "devDependencies": {
     "@types/mime-types": "^2.1.4",
-    "@types/node": "^22.2.0",
+    "@types/node": "^22.4.0",
     "@typescript-eslint/eslint-plugin": "^8.1.0",
     "@typescript-eslint/parser": "^8.1.0",
     "eslint": "^9.9.0",