svelteesp32 1.2.7 → 1.3.1

package/README.md

@@ -14,6 +14,8 @@ This npm package provides a solution for **inserting any JS client application i
 
 > Starting with version v1.2.0, ESP8266/ESP8285 is also supported.
 
+> Starting with version v1.3.0, c++ defines can be used.
+
 ### Usage
 
 **Install package** as devDependency (it is practical if the package is part of the project so that you always receive updates)
@@ -98,9 +100,17 @@ void setup()
 }
 ```
 
+You can find a minimal buildable example platformio project in [demo/esp32](demo/esp32) folder.
+
 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_HTML_FILES 1
+...
+
 const uint8_t data0[12547] = {0x1f, 0x8b, 0x8, 0x0, ...
 const uint8_t data1[5368] = {0x1f, 0x8b, 0x8, 0x0, 0x0, ...
 const char * etag0 = "387b88e345cc56ef9091...";
@@ -164,17 +174,58 @@ The use of ETag is **not enabled by default**, this can be achieved with the `--
 
 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.
 
+### C++ defines
+
+To make it easy to integrate into a larger c++ project, we have made a couple of variables available as c++ defines.
+
+You can use the COUNT and SIZE constants:
+
+```c
+...
+#include "svelteesp32.h"
+
+#if SVELTEESP32_COUNT != 5
+  #error Invalid file count
+#endif
+...
+```
+
+You can include a blocker error if a named file accidentally missing from the build:
+
+```c
+...
+#include "svelteesp32.h"
+
+#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
+...
+```
+
 ### 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` |
-| `-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                                 | false                   |
+| `--no-gzip`   | Do not compress content with gzip                         | false -> gzip used      |
+| `--espmethod` | Name of generated method                                  | `initSvelteStaticFiles` |
+| `--define`    | Prefix of c++ defines                                     | `SVELTEESP32`           |
+| `-h`          | Show help                                                 |                         |
 
 ### Q&A
 

package/dist/commandLine.d.ts

@@ -3,6 +3,7 @@ interface ICopyFilesArguments {
     sourcepath: string;
     outputfile: string;
     espmethod: string;
+    define: string;
     'no-gzip': boolean;
     etag: boolean;
     help?: boolean;

package/dist/commandLine.js

@@ -42,6 +42,11 @@ exports.cmdLine = (0, ts_command_line_args_1.parse)({
         description: 'Name of generated method',
         defaultValue: 'initSvelteStaticFiles'
     },
+    define: {
+        type: String,
+        description: 'Prefix of c++ defines',
+        defaultValue: 'SVELTEESP32'
+    },
     help: { type: Boolean, optional: true, alias: 'h', description: 'Shows this help' }
 }, {
     helpArg: 'help',

package/dist/cppCode.d.ts

@@ -1,9 +1,16 @@
-export type cppCodeSource = {
-    index: number;
+export type CppCodeSource = {
     filename: string;
+    dataname: string;
+    datanameUpperCase: string;
     mime: string;
     content: 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

@@ -14,17 +14,21 @@ const psychicTemplate = `
 #include <PsychicHttp.h>
 #include <PsychicHttpsServer.h>
 
+#define {{definePrefix}}_COUNT {{fileCount}}
+#define {{definePrefix}}_SIZE {{fileSize}}
+
 {{#each sources}}
-{{#if this.isDefault}}
-const uint8_t dataDefaultDocument[{{this.length}}] = { {{this.bytes}} };
-{{#if ../isEtag}}
-const char * etagDefaultDocument = "{{this.md5}}";
-{{/if}}
-{{else}}
-const uint8_t data{{this.index}}[{{this.length}}] = { {{this.bytes}} };
+#define {{../definePrefix}}_FILE_{{this.datanameUpperCase}}
+{{/each}}
+
+{{#each filesByExtension}}
+#define {{../definePrefix}}_{{this.extension}}_FILES {{this.count}}
+{{/each}}
+
+{{#each sources}}
+const uint8_t data_{{this.dataname}}[{{this.length}}] = { {{this.bytes}} };
 {{#if ../isEtag}}
-const char * etag{{this.index}} = "{{this.md5}}";
-{{/if}}
+const char * etag_{{this.dataname}} = "{{this.md5}}";
 {{/if}}
 {{/each}}
 
@@ -32,7 +36,7 @@ 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({{#if this.isDefault}}etagDefaultDocument{{else}}etag{{this.index}}{{/if}})) {
+    if (request->hasHeader("If-None-Match") && request->header("If-None-Match") == String(etag_{{this.dataname}})) {
       PsychicResponse response304(request);
       response304.setCode(304);
       return response304.send();
@@ -44,9 +48,9 @@ void {{methodName}}(PsychicHttpServer * server) {
     response.addHeader("Content-Encoding", "gzip");
     {{/if}}
     {{#if ../isEtag}}
-    response.addHeader("ETag", {{#if this.isDefault}}etagDefaultDocument{{else}}etag{{this.index}}{{/if}});
+    response.addHeader("ETag", etag_{{this.dataname}});
     {{/if}}
-    response.setContent({{#if this.isDefault}}dataDefaultDocument{{else}}data{{this.index}}{{/if}}, sizeof({{#if this.isDefault}}dataDefaultDocument{{else}}data{{this.index}}{{/if}}));
+    response.setContent(data_{{this.dataname}}, sizeof(data_{{this.dataname}}));
     return response.send();
   });
 
@@ -62,48 +66,50 @@ const asyncTemplate = `
 #include <Arduino.h>
 #include <ESPAsyncWebServer.h>
 
+#define {{definePrefix}}_COUNT {{fileCount}}
+#define {{definePrefix}}_SIZE {{fileSize}}
+
 {{#each sources}}
-{{#if this.isDefault}}
-const uint8_t dataDefaultDocument[{{this.length}}] = { {{this.bytes}} };
-{{#if ../isEtag}}
-const char * etagDefaultDocument = "{{this.md5}}";
-{{/if}}
-{{else}}
-const uint8_t data{{this.index}}[{{this.length}}] PROGMEM = { {{this.bytes}} };
+#define {{../definePrefix}}_FILE_{{this.datanameUpperCase}}
+{{/each}}
+
+{{#each filesByExtension}}
+#define {{../definePrefix}}_{{this.extension}}_FILES {{this.count}}
+{{/each}}
+
+{{#each sources}}
+const uint8_t data_{{this.dataname}}[{{this.length}}] PROGMEM = { {{this.bytes}} };
 {{#if ../isEtag}}
-const char * etag{{this.index}} = "{{this.md5}}";
-{{/if}}
+const char * etag_{{this.dataname}} = "{{this.md5}}";
 {{/if}}
 {{/each}}
 
 void {{methodName}}(AsyncWebServer * server) {
 {{#each sources}}
-  ArRequestHandlerFunction {{#if this.isDefault}}funcDefaultDocument{{else}}func{{this.index}}{{/if}} = [](AsyncWebServerRequest * request) {
+  ArRequestHandlerFunction func_{{this.dataname}} = [](AsyncWebServerRequest * request) {
     {{#if ../isEtag}}
-    if (request->hasHeader("If-None-Match") && request->getHeader("If-None-Match")->value() == String({{#if this.isDefault}}etagDefaultDocument{{else}}etag{{this.index}}{{/if}})) {
+    if (request->hasHeader("If-None-Match") && request->getHeader("If-None-Match")->value() == String(etag_{{this.dataname}})) {
       request->send(304);
       return;
     }
     {{/if}}
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "{{this.mime}}", {{#if this.isDefault}}dataDefaultDocument{{else}}data{{this.index}}{{/if}}, {{this.length}});
+    AsyncWebServerResponse *response = request->beginResponse_P(200, "{{this.mime}}", data_{{this.dataname}}, {{this.length}});
     {{#if this.isGzip}}
     response->addHeader("Content-Encoding", "gzip");
     {{/if}}
     {{#if ../isEtag}}
-    response->addHeader("ETag", {{#if this.isDefault}}etagDefaultDocument{{else}}etag{{this.index}}{{/if}});
+    response->addHeader("ETag", etag_{{this.dataname}});
     {{/if}}
     request->send(response);
   };
+  server->on("/{{this.filename}}", HTTP_GET, func_{{this.dataname}});
   {{#if this.isDefault}}
-  server->on("/{{this.filename}}", HTTP_GET, funcDefaultDocument);
-  server->on("/", HTTP_GET, funcDefaultDocument);
-  {{else}}
-  server->on("/{{this.filename}}", HTTP_GET, func{{this.index}});
+  server->on("/", HTTP_GET, func_{{this.dataname}});
   {{/if}}
 
 {{/each}}
 }`;
-const getCppCode = (sources) => (0, handlebars_1.compile)(commandLine_1.cmdLine.engine === 'psychic' ? psychicTemplate : asyncTemplate)({
+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(),
@@ -114,7 +120,9 @@ const getCppCode = (sources) => (0, handlebars_1.compile)(commandLine_1.cmdLine.
         bytes: [...s.content].map((v) => `0x${v.toString(16)}`).join(', '),
         isDefault: s.filename.startsWith('index.htm')
     })),
+    filesByExtension,
     isEtag: commandLine_1.cmdLine.etag,
-    methodName: commandLine_1.cmdLine.espmethod
+    methodName: commandLine_1.cmdLine.espmethod,
+    definePrefix: commandLine_1.cmdLine.define
 }).trim();
 exports.getCppCode = getCppCode;

package/dist/index.js

@@ -17,7 +17,7 @@ const summary = {
     gzipsize: 0
 };
 const sources = [];
-let sourceIndex = 0;
+const filesByExtension = [];
 const files = (0, file_1.getFiles)();
 if (files.length === 0) {
     console.error(`Directory ${commandLine_1.cmdLine.sourcepath} is empty`);
@@ -27,13 +27,24 @@ 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, '_');
+    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 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']) {
         sources.push({
-            index: sourceIndex++,
-            filename: file.replace(/\\/g, '/'),
+            filename: filename,
+            dataname,
+            datanameUpperCase: dataname.toUpperCase(),
             content: rawContent,
             isGzip: false,
             mime,
@@ -46,8 +57,9 @@ for (const file of files) {
         summary.gzipsize += zipContent.length;
         if (rawContent.length > 100 && zipContent.length < rawContent.length * 0.85) {
             sources.push({
-                index: sourceIndex++,
-                filename: file.replace(/\\/g, '/'),
+                filename: filename,
+                dataname,
+                datanameUpperCase: dataname.toUpperCase(),
                 content: zipContent,
                 isGzip: true,
                 mime,
@@ -57,8 +69,9 @@ for (const file of files) {
         }
         else {
             sources.push({
-                index: sourceIndex++,
-                filename: file.replace(/\\/g, '/'),
+                filename: filename,
+                dataname,
+                datanameUpperCase: dataname.toUpperCase(),
                 content: rawContent,
                 isGzip: false,
                 mime,
@@ -69,7 +82,8 @@ for (const file of files) {
     }
     console.log('');
 }
-const cppFile = (0, cppCode_1.getCppCode)(sources);
+filesByExtension.sort((left, right) => left.extension.localeCompare(right.extension));
+const cppFile = (0, cppCode_1.getCppCode)(sources, filesByExtension);
 (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`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelteesp32",
-  "version": "1.2.7",
+  "version": "1.3.1",
   "description": "Convert Svelte (or any frontend) JS application to serve it from ESP32 webserver (PsychicHttp)",
   "author": "BCsabaEngine",
   "license": "ISC",
@@ -28,10 +28,13 @@
   },
   "homepage": "https://github.com/BCsabaEngine/svelteesp32",
   "scripts": {
-    "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",
+    "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",
     "clean": "tsc --build --clean",
     "build": "tsc --build --clean && tsc --build --force",
     "format:check": "prettier --check .",
@@ -53,16 +56,17 @@
   ],
   "devDependencies": {
     "@types/mime-types": "^2.1.4",
-    "@types/node": "^20.14.12",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
-    "eslint": "^8.57.0",
+    "@types/node": "^22.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.1.0",
+    "@typescript-eslint/parser": "^8.1.0",
+    "eslint": "^9.9.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unicorn": "^55.0.0",
     "nodemon": "^3.1.4",
     "prettier": "^3.3.3",
     "ts-node": "^10.9.2",
+    "tsx": "^4.17.0",
     "typescript": "^5.5.4"
   },
   "dependencies": {