svelteesp32 1.0.1

package/README.md

@@ -0,0 +1,48 @@
+# [svelteesp32] Convert Svelte (or any frontend) JS application to serve it from ESP32 webserver (PsychicHttp)
+
+### 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 will create a Svelte application. The Svelte application is practically served by the ESP32.
+
+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 Svelte files are included inline in the Arduino/PlatformIO 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, etc. files must be converted to binary. npm is easy to use and easy to **integrate into your CI/CD pipeline**.
+
+### Usage
+
+Install package as devDependency (it is practical if the package is part of the project so that you always receive updates)
+
+```
+npm install -D svelteesp32
+```
+
+After a successful Svelte build create az includeable cpp file
+
+```bash
+npx svelteesp32 -s ../svelteapp/dist -o ../esp32project/svelteesp32.h
+
+// compress files and serve as gzip
+npx svelteesp32 -s ../svelteapp/dist -o ../esp32project/svelteesp32.h -g
+```
+
+Include svelteesp32.h into yout Arduino cpp project (copy it next to the ino file)
+
+```c
+...
+
+#include <PsychicHttp.h>
+#include "svelteesp32.h"
+
+PsychicHttpServer server;
+
+...
+
+void setup()
+{
+    ...
+
+    server.listen(80);
+
+    initSvelteStaticFiles(&server);
+}
+```

package/dist/commandLine.d.ts

@@ -0,0 +1,9 @@
+interface ICopyFilesArguments {
+    sourcePath: string;
+    outputFile: string;
+    espMethodName: string;
+    gzip: boolean;
+    help?: boolean;
+}
+export declare const cmdLine: ICopyFilesArguments;
+export {};

package/dist/commandLine.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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)({
+    sourcePath: {
+        type: String,
+        alias: 's',
+        description: 'Source dist folder contains compiled web files'
+    },
+    outputFile: {
+        type: String,
+        alias: 'o',
+        description: 'Generated output file with path',
+        defaultValue: 'svelteesp32.h'
+    },
+    gzip: {
+        type: Boolean,
+        alias: 'g',
+        description: 'Compress content with gzip',
+        defaultValue: false
+    },
+    espMethodName: {
+        type: String,
+        description: 'Name of generated method',
+        defaultValue: 'initSvelteStaticFiles'
+    },
+    help: { type: Boolean, optional: true, alias: 'h', description: 'Shows this help' }
+}, {
+    helpArg: 'help',
+    headerContentSections: [{ header: 'svelteesp32', content: 'Svelte JS to ESP32 converter' }]
+});
+if (!(0, node_fs_1.existsSync)(exports.cmdLine.sourcePath) || !(0, node_fs_1.statSync)(exports.cmdLine.sourcePath).isDirectory()) {
+    console.error(`Directory ${exports.cmdLine.sourcePath} not exists or not a directory`);
+    process.exit(1);
+}

package/dist/cppCode.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="node" />
+export type cppCodeSource = {
+    filename: string;
+    mime: string;
+    content: Buffer;
+    isGzip: boolean;
+};
+export declare const getCppCode: (source: cppCodeSource) => string;
+export declare const adoptMethodName: (content: string) => string;

package/dist/cppCode.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.adoptMethodName = exports.getCppCode = void 0;
+const commandLine_1 = require("./commandLine");
+const containerTemplate = `
+void $method(PsychicHttpServer * server) {
+$code
+}`;
+const codeTemplate = `
+	server->on("$filename", HTTP_GET, [](PsychicRequest * request)
+	{
+		const uint8_t data[] = {$numbers};
+
+		PsychicStreamResponse response(request, "$mime");
+		$encoding
+		response.beginSend();
+		for (int i = 0; i < sizeof(data); i++) response.write(data[i]);
+		return response.endSend();
+	});
+`;
+const getCppCode = (source) => codeTemplate
+    .replace('$filename', source.filename)
+    .replace('$mime', source.mime)
+    .replace('$encoding', source.isGzip ? 'response.addHeader("Content-Encoding", "gzip");' : '')
+    .replace('$numbers', [...source.content].map((v) => `0x${v.toString(16)}`).join(', '));
+exports.getCppCode = getCppCode;
+const adoptMethodName = (content) => containerTemplate.replace('$method', commandLine_1.cmdLine.espMethodName).replace('$code', content);
+exports.adoptMethodName = adoptMethodName;

package/dist/file.d.ts

@@ -0,0 +1 @@
+export declare const getFiles: () => string[];

package/dist/file.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFiles = void 0;
+const node_path_1 = require("node:path");
+const glob_1 = require("glob");
+const commandLine_1 = require("./commandLine");
+const getFiles = () => (0, glob_1.globSync)((0, node_path_1.join)('**/*'), { cwd: commandLine_1.cmdLine.sourcePath, nodir: true })
+    .filter((filename) => !['.gz', '.brottli'].includes((0, node_path_1.extname)(filename)))
+    .sort();
+exports.getFiles = getFiles;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
+const node_zlib_1 = require("node:zlib");
+const mime_types_1 = require("mime-types");
+const commandLine_1 = require("./commandLine");
+const cppCode_1 = require("./cppCode");
+const file_1 = require("./file");
+const summary = {
+    filecount: 0,
+    size: 0,
+    gzipsize: 0
+};
+const sources = [];
+for (const file of (0, file_1.getFiles)()) {
+    const mime = (0, mime_types_1.lookup)(file) || 'text/plain';
+    summary.filecount++;
+    console.log(`[${file}]`);
+    const rawContent = (0, node_fs_1.readFileSync)((0, node_path_1.join)(commandLine_1.cmdLine.sourcePath, file), { flag: 'r' });
+    summary.size += rawContent.length;
+    if (commandLine_1.cmdLine.gzip) {
+        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: file, content: zipContent, isGzip: true, mime });
+            console.log(`✓ gzip used (${rawContent.length} -> ${zipContent.length})`);
+        }
+        else {
+            sources.push({ filename: file, content: rawContent, isGzip: false, mime });
+            console.log(`x gzip unused (${rawContent.length} -> ${zipContent.length})`);
+        }
+    }
+    else {
+        sources.push({ filename: file, content: rawContent, isGzip: false, mime });
+        console.log(`- gzip skipped (${rawContent.length})`);
+    }
+    console.log('');
+}
+let cppFile = '';
+for (const source of sources)
+    cppFile += (0, cppCode_1.getCppCode)(source);
+cppFile = (0, cppCode_1.adoptMethodName)(cppFile);
+(0, node_fs_1.writeFileSync)(commandLine_1.cmdLine.outputFile, cppFile);
+if (commandLine_1.cmdLine.gzip)
+    console.log(`${summary.filecount} files, ${Math.round(summary.size / 1024)}kB original size, ${Math.round(summary.gzipsize / 1024)}kB gzip size`);
+else
+    console.log(`${summary.filecount} files, ${Math.round(summary.size / 1024)}kB original size`);
+console.log(`${commandLine_1.cmdLine.outputFile} ${Math.round(cppFile.length / 1024)}kB size`);

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "svelteesp32",
+  "version": "1.0.1",
+  "description": "Convert Svelte (or any frontend) JS application to serve it from ESP32 webserver (PsychicHttp)",
+  "author": "BCsabaEngine",
+  "license": "ISC",
+  "exports": "./dist/index.js",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "engines": {
+    "node": ">=18",
+    "npm": ">=9"
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.d.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BCsabaEngine/svelteesp32.git"
+  },
+  "bugs": {
+    "url": "https://github.com/BCsabaEngine/svelteesp32/issues"
+  },
+  "homepage": "https://github.com/BCsabaEngine/svelteesp32",
+  "scripts": {
+    "dev": "nodemon src/index.ts -- -s ./svelte/dist -o ./esp32.h -g",
+    "clean": "tsc --build --clean",
+    "build": "tsc --build --clean && tsc --build --force",
+    "format:check": "prettier --check .",
+    "format:fix": "prettier --write .",
+    "lint:check": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "fix": "npm run format:fix && npm run lint:fix",
+    "npm-publish-patch": "npm run build && npm version patch && npm publish && npm run clean && git push",
+    "npm-publish-minor": "npm run build && npm version minor && npm publish && npm run clean && git push"
+  },
+  "keywords": [
+    "Svelte",
+    "eps32",
+    "webserver",
+    "PsychicHttp"
+  ],
+  "devDependencies": {
+    "@types/mime-types": "^2.1.4",
+    "@types/node": "^20.11.17",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-sonarjs": "^0.24.0",
+    "eslint-plugin-unicorn": "^51.0.1",
+    "nodemon": "^3.0.3",
+    "prettier": "^3.2.5",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "glob": "^10.3.10",
+    "mime-types": "^2.1.35",
+    "ts-command-line-args": "^2.5.1"
+  }
+}