@webmate-studio/builder 0.2.18 → 0.2.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [

package/src/bundler.js

@@ -3,6 +3,17 @@ import esbuildSvelte from 'esbuild-svelte';
 import fs from 'fs/promises';
 import path from 'path';
 import pc from 'picocolors';
+import crypto from 'crypto';
+
+/**
+ * Generate content hash for asset file
+ * @param {Buffer} content - File content as buffer
+ * @param {number} length - Hash length (default: 8)
+ * @returns {string} - Content hash (hex)
+ */
+function generateAssetHash(content, length = 8) {
+	return crypto.createHash('sha256').update(content).digest('hex').substring(0, length);
+}
 
 /**
  * Bundle island JavaScript files with esbuild
@@ -42,6 +53,7 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 			target,
 			outfile: outputPath,
 			platform: 'browser',
+			charset: 'utf8', // Force UTF-8 output to prevent base64 corruption (esbuild bug #1501)
 			// Loaders for different file types
 			// NOTE: All image formats are handled by custom plugin above (image-base64-dataurl)
 			// to generate proper data:image/...;base64,... URLs for CSS compatibility
@@ -70,39 +82,48 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 				'__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': 'false'
 			},
 			plugins: [
-				// Image to base64 data URL loader
-				// esbuild's 'dataurl' loader fails for:
-				// - SVG: generates invalid data:image/svg+xml,<?xml... (unescaped XML)
-				// - JPG/PNG/etc: generates invalid data:image/jpeg,���� (raw binary instead of base64)
-				// Solution: Custom loader that properly base64 encodes ALL image formats
+				// Asset URL resolver with content hashing
+				// Instead of base64 encoding (bad for large images, no caching, huge bundles),
+				// we use asset markers with content hashes that get resolved at runtime:
+				// - wm dev: /assets/{componentName}/{filename} (no hash in dev)
+				// - CMS: /api/components/proxy/organization-components/{uuid}/assets/{filename}.{hash}.{ext}
 				{
-					name: 'image-base64-dataurl',
+					name: 'asset-url-resolver',
 					setup(build) {
 						// Handle all image formats
 						build.onLoad({ filter: /\.(svg|jpg|jpeg|png|gif|webp)$/i }, async (args) => {
-							const ext = args.path.split('.').pop().toLowerCase();
-							const mimeTypes = {
-								svg: 'image/svg+xml',
-								jpg: 'image/jpeg',
-								jpeg: 'image/jpeg',
-								png: 'image/png',
-								gif: 'image/gif',
-								webp: 'image/webp'
-							};
-
-							// Read file as binary buffer
+							// Read file to generate content hash
 							const buffer = await fs.readFile(args.path);
-							// Convert to base64 string (pure ASCII, safe for JavaScript)
-							const base64 = buffer.toString('base64');
-							const mimeType = mimeTypes[ext] || 'application/octet-stream';
+							const hash = generateAssetHash(buffer);
+
+							// Get relative path from component directory
+							// Example: /full/path/components/Hero/assets/logo.svg
+							// → Find "assets/" segment and extract path from there
+							const assetPath = args.path;
+							const assetsIndex = assetPath.lastIndexOf('/assets/');
+
+							if (assetsIndex === -1) {
+								throw new Error(`Asset must be in "assets/" directory: ${assetPath}`);
+							}
+
+							// Extract relative path from assets/ onwards
+							// Example: assets/logo.svg
+							const relativePath = assetPath.substring(assetsIndex + 1); // +1 to keep "assets/"
+
+							// Parse filename and extension
+							const filename = path.basename(relativePath);
+							const ext = path.extname(filename);
+							const nameWithoutExt = path.basename(filename, ext);
+							const dir = path.dirname(relativePath);
 
-							// Build the complete data URL
-							const dataUrl = `data:${mimeType};base64,${base64}`;
+							// Build hashed filename: logo.abc123.svg
+							const hashedFilename = `${nameWithoutExt}.${hash}${ext}`;
+							const hashedPath = path.join(dir, hashedFilename);
 
-							// Return as a raw JavaScript module with template literal to preserve exact bytes
-							// Using template literal ensures no escaping or encoding happens
+							// Return as asset marker (will be resolved at runtime)
+							// Runtime resolver will replace __ASSET__: with correct base path
 							return {
-								contents: `export default \`${dataUrl}\`;`,
+								contents: `export default "__ASSET__:${hashedPath}";`,
 								loader: 'js'
 							};
 						});