454 lines
16 KiB
TypeScript
454 lines
16 KiB
TypeScript
import type { Plugin } from 'vite';
|
||
import { resolve, dirname } from 'path';
|
||
import { promisify } from 'util';
|
||
import fs from 'fs/promises';
|
||
import { pascalCase } from 'change-case';
|
||
import mime from 'mime';
|
||
import type { OutputBundle } from 'rollup';
|
||
import { gzip } from '@gfx/zopfli';
|
||
import chalk from 'chalk';
|
||
|
||
const zopfliCompress = promisify(gzip);
|
||
|
||
interface CompressedOutput {
|
||
name: string;
|
||
length: number;
|
||
array: string;
|
||
contentType: string;
|
||
useCompression: boolean;
|
||
}
|
||
|
||
interface Asset {
|
||
path: string;
|
||
name: string;
|
||
content: string | Buffer | Uint8Array;
|
||
contentType: string;
|
||
type: string;
|
||
isServer: boolean;
|
||
}
|
||
|
||
interface CompressStats {
|
||
fileName: string;
|
||
inputSize: number;
|
||
compressedSize: number;
|
||
groupName: string;
|
||
useCompression: boolean;
|
||
}
|
||
|
||
interface CppPluginOptions {
|
||
outPrefix?: string; // Prefix for output files
|
||
basePath?: string; // Base URL path (e.g., '/ui', '/app', etc.)
|
||
staticDir?: string; // Directory for static assets
|
||
outputDir?: string; // Directory for C++ headers
|
||
clientDir?: string; // Directory for client assets (default: '../.svelte-kit/output/client')
|
||
immutableDir?: string; // Relative path to immutable assets inside the clientDir (default: 'app/immutable')
|
||
}
|
||
|
||
function formatSize(bytes: number): string {
|
||
if (bytes < 1024) return `${bytes} B`;
|
||
const kb = bytes / 1024;
|
||
return `${kb.toFixed(2)} kB`;
|
||
}
|
||
|
||
function padEnd(str: string, len: number): string {
|
||
return str.padEnd(len, ' ');
|
||
}
|
||
|
||
function hexdump(buffer: Uint8Array): string {
|
||
const lines: string[] = [];
|
||
for (let i = 0; i < buffer.length; i += 16) {
|
||
const block = buffer.slice(i, i + 16);
|
||
const hexArray = Array.from(block).map(value =>
|
||
"0x" + value.toString(16).padStart(2, "0")
|
||
);
|
||
lines.push(` ${hexArray.join(", ")}`);
|
||
}
|
||
return lines.join(",\n");
|
||
}
|
||
|
||
async function compressAsset(
|
||
input: string | Buffer | Uint8Array,
|
||
fileName: string,
|
||
contentType?: string
|
||
): Promise<CompressedOutput> {
|
||
const options = {
|
||
blocksplitting: true,
|
||
blocksplittinglast: false,
|
||
blocksplittingmax: 15,
|
||
verbose: false
|
||
};
|
||
|
||
const inputBuffer = Buffer.from(input);
|
||
const compressed = await zopfliCompress(inputBuffer, options);
|
||
const useCompression = compressed.length < inputBuffer.length;
|
||
const finalBuffer = useCompression ? compressed : inputBuffer;
|
||
|
||
return {
|
||
name: fileName.replace(/[.-]/g, "_").toUpperCase(),
|
||
length: finalBuffer.length,
|
||
array: hexdump(finalBuffer),
|
||
contentType: contentType || mime.getType(fileName) || 'application/octet-stream',
|
||
useCompression
|
||
};
|
||
}
|
||
|
||
/**
|
||
* Generates a group name based on the asset’s path and file type.
|
||
*/
|
||
function getGroupName(assetPath: string, type: string, outPrefix: string): string {
|
||
const dir = dirname(assetPath);
|
||
if (dir === '.') return `${outPrefix}${type}`;
|
||
return outPrefix + dir.replace(/\//g, '_') + '_' + type;
|
||
}
|
||
|
||
/**
|
||
* Cleans up the asset path to preserve immutable assets’ directory structure.
|
||
*/
|
||
function normalizeAssetPath(asset: Asset): string {
|
||
if (asset.path.includes('_app/immutable')) {
|
||
// Remove any client build prefix if present.
|
||
return asset.path.replace('.svelte-kit/output/client/', '');
|
||
}
|
||
return asset.path;
|
||
}
|
||
|
||
/**
|
||
* Given an asset, returns one or more route strings.
|
||
*/
|
||
function generateRoutesForAsset(
|
||
asset: Asset,
|
||
basePath: string
|
||
): { routes: string[]; htmlRoutes: string[] } {
|
||
const routes: string[] = [];
|
||
const htmlRoutes: string[] = [];
|
||
const assetName = pascalCase(asset.name);
|
||
if (asset.type === 'html') {
|
||
// For HTML, serve at both the base route and the file route (except for index.html).
|
||
const routePath =
|
||
asset.path === 'index.html'
|
||
? basePath + '/'
|
||
: basePath + '/' + asset.path.slice(0, -5); // remove ".html"
|
||
htmlRoutes.push(` server->on("${routePath}", HTTP_GET, serve${assetName});`);
|
||
if (routePath !== basePath + '/') {
|
||
htmlRoutes.push(` server->on("${routePath}.html", HTTP_GET, serve${assetName});`);
|
||
}
|
||
} else if (asset.path.includes('_app/immutable')) {
|
||
// For immutable assets, use the exact route.
|
||
const immutablePart = asset.path.split('_app/immutable/')[1];
|
||
const routePath = `${basePath}/_app/immutable/${immutablePart}`;
|
||
routes.push(` server->on("${routePath}", HTTP_GET, serve${assetName});`);
|
||
// If JS asset, add an alternative non-hashed route.
|
||
if (asset.type === 'js') {
|
||
const baseRoute = routePath.replace(/\.[A-Za-z0-9]+\.js$/, '.js');
|
||
if (baseRoute !== routePath) {
|
||
routes.push(` server->on("${baseRoute}", HTTP_GET, serve${assetName});`);
|
||
}
|
||
}
|
||
} else {
|
||
// Default case for all other assets.
|
||
routes.push(` server->on("${basePath}/${asset.path}", HTTP_GET, serve${assetName});`);
|
||
}
|
||
return { routes, htmlRoutes };
|
||
}
|
||
|
||
export function cppPlugin(options: CppPluginOptions = {}): Plugin {
|
||
// Maps to store assets from various sources.
|
||
const staticAssets = new Map<string, Asset>();
|
||
const bundleAssets = new Map<string, Asset>();
|
||
const compressStats: CompressStats[] = [];
|
||
|
||
const basePath = options.basePath || '';
|
||
const staticDir = resolve(__dirname, options.staticDir || '../static');
|
||
const outputDir = resolve(__dirname, options.outputDir || '../../src');
|
||
const outPrefix = options.outPrefix || 'web_';
|
||
|
||
// Resolve client and immutable directories from options.
|
||
const clientDir = resolve(__dirname, options.clientDir || '../.svelte-kit/output/client');
|
||
const immutableDir = resolve(clientDir, options.immutableDir || 'app/immutable');
|
||
|
||
return {
|
||
name: 'cpp',
|
||
enforce: 'post',
|
||
apply: 'build',
|
||
|
||
async buildStart() {
|
||
// Clear any previous asset maps.
|
||
staticAssets.clear();
|
||
bundleAssets.clear();
|
||
|
||
// Read and cache static assets from the provided static directory.
|
||
try {
|
||
const files = await fs.readdir(staticDir);
|
||
for (const file of files) {
|
||
if (file.startsWith('.')) continue;
|
||
const filePath = resolve(staticDir, file);
|
||
const stats = await fs.stat(filePath);
|
||
if (!stats.isFile()) continue;
|
||
const content = await fs.readFile(filePath);
|
||
const ext = file.split('.').pop()?.toLowerCase() || '';
|
||
staticAssets.set(file, {
|
||
path: file,
|
||
name: file.replace(/[.-]/g, '_'),
|
||
content,
|
||
contentType: mime.getType(file) || 'application/octet-stream',
|
||
type: ext,
|
||
isServer: false
|
||
});
|
||
}
|
||
if (staticAssets.size > 0) {
|
||
console.log(`Captured ${staticAssets.size} static assets from ${staticDir}`);
|
||
}
|
||
} catch (error: any) {
|
||
if (error?.code !== 'ENOENT') {
|
||
console.error(`Error reading static directory ${staticDir}:`, error);
|
||
}
|
||
}
|
||
},
|
||
|
||
transformIndexHtml: {
|
||
order: 'post',
|
||
handler(html: string, { filename }) {
|
||
// Skip SSR builds.
|
||
if (filename.includes('.svelte-kit/output/server')) return html;
|
||
const basename = filename.split('/').pop() || filename;
|
||
bundleAssets.set(basename, {
|
||
path: basename,
|
||
name: basename.replace('.html', '_html').replace(/[.-]/g, '_'),
|
||
content: html,
|
||
contentType: 'text/html',
|
||
type: 'html',
|
||
isServer: false
|
||
});
|
||
return html;
|
||
}
|
||
},
|
||
|
||
async generateBundle(_, bundle: OutputBundle) {
|
||
// Add non-HTML bundle assets.
|
||
for (const [fileName, file] of Object.entries(bundle)) {
|
||
if (fileName.split('/')[0].startsWith('.')) continue;
|
||
if (fileName.endsWith('.json')) continue;
|
||
if (fileName.endsWith('.html')) continue; // Already handled by transformIndexHtml
|
||
|
||
const content = file.type === 'chunk' ? file.code : file.source;
|
||
const ext = fileName.split('.').pop()?.toLowerCase() || '';
|
||
const isServer = fileName.startsWith('.svelte-kit/output/server/') ||
|
||
fileName.includes('/server/') ||
|
||
fileName.includes('entries/');
|
||
bundleAssets.set(fileName, {
|
||
path: fileName,
|
||
name: fileName.replace(/[\/\\]/g, '_').replace(/[.-]/g, '_'),
|
||
content,
|
||
contentType: file.type === 'chunk'
|
||
? 'application/javascript'
|
||
: mime.getType(fileName) || 'application/octet-stream',
|
||
type: ext,
|
||
isServer
|
||
});
|
||
}
|
||
},
|
||
|
||
async closeBundle() {
|
||
// Allow time for any external asset generation (such as adapter-static).
|
||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||
|
||
// Attempt to collect additional HTML assets from the build directory.
|
||
const buildDir = resolve(__dirname, '../build');
|
||
try {
|
||
const entries = await fs.readdir(buildDir);
|
||
for (const entry of entries) {
|
||
if (!entry.endsWith('.html')) continue;
|
||
const fullPath = resolve(buildDir, entry);
|
||
const content = await fs.readFile(fullPath, 'utf-8');
|
||
bundleAssets.set(entry, {
|
||
path: entry,
|
||
name: entry.replace(/[.-]/g, '_'),
|
||
content,
|
||
contentType: 'text/html',
|
||
type: 'html',
|
||
isServer: false
|
||
});
|
||
}
|
||
} catch (error: any) {
|
||
if (error?.code !== 'ENOENT') {
|
||
console.error('Error processing HTML files:', error);
|
||
}
|
||
}
|
||
|
||
// Process immutable assets from the client directory.
|
||
async function processImmutableDirectory(dir: string, base: string = ''): Promise<void> {
|
||
const entries = await fs.readdir(dir, { withFileTypes: true });
|
||
for (const entry of entries) {
|
||
const fullPath = resolve(dir, entry.name);
|
||
const relativePath = base ? `${base}/${entry.name}` : entry.name;
|
||
if (entry.isDirectory()) {
|
||
await processImmutableDirectory(fullPath, relativePath);
|
||
} else {
|
||
const content = await fs.readFile(fullPath);
|
||
const ext = entry.name.split('.').pop()?.toLowerCase() || '';
|
||
// Prepend the folder structure for immutable assets.
|
||
const assetPath = `${options.immutableDir || 'app/immutable'}/${relativePath}`;
|
||
bundleAssets.set(assetPath, {
|
||
path: assetPath,
|
||
name: assetPath.replace(/[\/\\]/g, '_').replace(/[.-]/g, '_'),
|
||
content,
|
||
contentType: ext === 'js'
|
||
? 'application/javascript'
|
||
: mime.getType(entry.name) || 'application/octet-stream',
|
||
type: ext,
|
||
isServer: false
|
||
});
|
||
}
|
||
}
|
||
}
|
||
try {
|
||
await processImmutableDirectory(immutableDir);
|
||
} catch (error: any) {
|
||
if (error?.code !== 'ENOENT') {
|
||
console.error('Error processing immutable files:', error);
|
||
}
|
||
}
|
||
|
||
// Merge assets from bundle and static sources into groups.
|
||
const groupedAssets = new Map<string, Asset[]>();
|
||
|
||
// Process bundle assets (skip server-only assets).
|
||
for (const asset of bundleAssets.values()) {
|
||
if (asset.path.startsWith('.svelte-kit/output/server/')) continue;
|
||
// Only include HTML files, immutable assets, or assets that also exist in staticAssets.
|
||
if (asset.type !== 'html' && !asset.path.includes(options.immutableDir || 'app/immutable') && !staticAssets.has(asset.path)) continue;
|
||
asset.path = normalizeAssetPath(asset);
|
||
const groupName = getGroupName(asset.path, asset.type, outPrefix);
|
||
const group = groupedAssets.get(groupName) || [];
|
||
group.push(asset);
|
||
groupedAssets.set(groupName, group);
|
||
}
|
||
// Add static assets.
|
||
for (const asset of staticAssets.values()) {
|
||
const groupName = getGroupName(asset.path, asset.type, outPrefix);
|
||
const group = groupedAssets.get(groupName) || [];
|
||
group.push(asset);
|
||
groupedAssets.set(groupName, group);
|
||
}
|
||
|
||
// Prepare to generate headers.
|
||
try {
|
||
await fs.mkdir(outputDir, { recursive: true });
|
||
const routes: string[] = [];
|
||
const htmlRoutes: string[] = [];
|
||
let totalInputSize = 0;
|
||
let totalCompressedSize = 0;
|
||
|
||
// Generate header files for each asset group.
|
||
for (const [groupName, assets] of groupedAssets.entries()) {
|
||
let header = `/*
|
||
* Binary arrays for the Web UI ${groupName} files.
|
||
*/
|
||
|
||
#pragma once
|
||
#include <ESPAsyncWebServer.h>
|
||
#include <Arduino.h>
|
||
|
||
`;
|
||
|
||
// Process each asset in the group.
|
||
for (const asset of assets) {
|
||
const inputSize = Buffer.from(asset.content).length;
|
||
const compressed = await compressAsset(asset.content, asset.name, asset.contentType);
|
||
compressStats.push({
|
||
fileName: asset.path,
|
||
inputSize,
|
||
compressedSize: compressed.length,
|
||
groupName,
|
||
useCompression: compressed.useCompression
|
||
});
|
||
totalInputSize += inputSize;
|
||
totalCompressedSize += compressed.length;
|
||
|
||
header += `// ${asset.path}\n`;
|
||
header += `const uint16_t ${compressed.name}_L = ${compressed.length};\n`;
|
||
header += `const uint8_t ${compressed.name}[] PROGMEM = {\n${compressed.array}\n};\n\n`;
|
||
header += `inline void serve${pascalCase(asset.name)}(AsyncWebServerRequest* request) {\n`;
|
||
header += ` AsyncWebServerResponse *response = request->beginResponse_P(200, "${asset.contentType}", ${compressed.name}, ${compressed.name}_L);\n`;
|
||
if (compressed.useCompression) {
|
||
header += ` response->addHeader(F("Content-Encoding"), "gzip");\n`;
|
||
}
|
||
header += ` request->send(response);\n`;
|
||
header += `}\n\n`;
|
||
|
||
// Generate routes for this asset.
|
||
const { routes: assetRoutes, htmlRoutes: assetHtmlRoutes } = generateRoutesForAsset(asset, basePath);
|
||
routes.push(...assetRoutes);
|
||
htmlRoutes.push(...assetHtmlRoutes);
|
||
}
|
||
|
||
// Write the group header.
|
||
await fs.writeFile(resolve(outputDir, `${groupName}.h`), header);
|
||
}
|
||
|
||
// Output compression stats.
|
||
console.log(chalk.cyan('\nGenerating C++ headers for web UI assets:'));
|
||
console.log(chalk.dim('─'.repeat(100)));
|
||
compressStats.sort((a, b) => {
|
||
if (a.groupName === b.groupName) {
|
||
return b.compressedSize - a.compressedSize;
|
||
}
|
||
return a.groupName.localeCompare(b.groupName);
|
||
});
|
||
let currentGroup = '';
|
||
for (const stat of compressStats) {
|
||
if (stat.groupName !== currentGroup) {
|
||
if (currentGroup !== '') console.log('');
|
||
currentGroup = stat.groupName;
|
||
}
|
||
const ratio = stat.compressedSize / stat.inputSize;
|
||
const compressionResult = stat.useCompression ? chalk.dim('gzip') : chalk.yellow('uncompressed');
|
||
console.log(
|
||
chalk.dim(padEnd(stat.fileName, 70)) +
|
||
chalk.blue(padEnd(formatSize(stat.inputSize), 10)) +
|
||
compressionResult + ': ' +
|
||
chalk.green(formatSize(stat.compressedSize)) +
|
||
chalk.dim(` (${(ratio * 100).toFixed(1)}%)`)
|
||
);
|
||
}
|
||
console.log(chalk.dim('\n' + '─'.repeat(100)));
|
||
console.log(
|
||
chalk.cyan('Total compressed size: ') +
|
||
chalk.green(formatSize(totalCompressedSize)) +
|
||
chalk.dim(` (${((totalCompressedSize / totalInputSize) * 100).toFixed(1)}% of ${formatSize(totalInputSize)})`)
|
||
);
|
||
console.log(chalk.green(`Generated C++ headers in ${outputDir}\n`));
|
||
|
||
// Generate the routes header.
|
||
const groupSizeComments = Array.from(groupedAssets.entries()).map(([groupName, assets]) => {
|
||
const groupStats = compressStats.filter(stat => stat.groupName === groupName);
|
||
const totalGroupBytes = groupStats.reduce((sum, stat) => sum + stat.compressedSize, 0);
|
||
return ` * ${groupName}: ${totalGroupBytes.toLocaleString()} bytes`;
|
||
});
|
||
const routesHeader = `/*
|
||
* Web UI Routes
|
||
*
|
||
* Compressed Size Summary:
|
||
${groupSizeComments.join('\n')}
|
||
* Total: ${totalCompressedSize.toLocaleString()} bytes
|
||
*/
|
||
|
||
#pragma once
|
||
|
||
#include <ESPAsyncWebServer.h>
|
||
${Array.from(groupedAssets.keys()).map(group => `#include "${group}.h"`).join('\n')}
|
||
|
||
inline void setupRoutes(AsyncWebServer* server) {
|
||
${routes.join('\n')}
|
||
// HTML routes
|
||
${htmlRoutes.join('\n')}
|
||
}
|
||
`;
|
||
await fs.writeFile(resolve(outputDir, `${outPrefix}routes.h`), routesHeader);
|
||
} catch (error) {
|
||
console.error(chalk.red(`Error writing output files to ${outputDir}:`), error);
|
||
}
|
||
}
|
||
};
|
||
}
|