@webmate-studio/builder 0.2.13 → 0.2.15

package/package.json

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

package/src/bundler.js

@@ -43,28 +43,17 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 			outfile: outputPath,
 			platform: 'browser',
 			// Loaders for different file types
-			// NOTE: SVG uses 'base64' loader instead of 'dataurl' because CSS background-image
-			// doesn't accept unescaped XML in data URLs (data:image/svg+xml,<?xml...)
-			// but works with base64 (data:image/svg+xml;base64,PHN2Zy4uLg==)
+			// NOTE: All image formats are handled by custom plugin above (image-base64-dataurl)
+			// to generate proper data:image/...;base64,... URLs for CSS compatibility
 			loader: useJsxLoader ? {
 				'.jsx': 'jsx',
 				'.ts': 'tsx',
-				'.tsx': 'tsx',
-				'.jpg': 'dataurl',
-				'.jpeg': 'dataurl',
-				'.png': 'dataurl',
-				'.gif': 'dataurl',
-				'.svg': 'base64',  // Changed from 'dataurl' to 'base64' for CSS compatibility
-				'.webp': 'dataurl'
+				'.tsx': 'tsx'
+				// All image formats (.svg, .jpg, .png, etc.) handled by custom plugin
 			} : {
 				'.ts': 'tsx',
-				'.tsx': 'tsx',
-				'.jpg': 'dataurl',
-				'.jpeg': 'dataurl',
-				'.png': 'dataurl',
-				'.gif': 'dataurl',
-				'.svg': 'base64',  // Changed from 'dataurl' to 'base64' for CSS compatibility
-				'.webp': 'dataurl'
+				'.tsx': 'tsx'
+				// All image formats (.svg, .jpg, .png, etc.) handled by custom plugin
 			},
 			// Use automatic JSX runtime (React 17+) only for JSX files
 			jsx: useJsxLoader ? 'automatic' : undefined,
@@ -81,6 +70,38 @@ 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
+				{
+					name: 'image-base64-dataurl',
+					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'
+							};
+
+							const content = await fs.readFile(args.path);
+							const base64 = content.toString('base64');
+							const mimeType = mimeTypes[ext] || 'application/octet-stream';
+							const dataUrl = `data:${mimeType};base64,${base64}`;
+
+							return {
+								contents: `export default ${JSON.stringify(dataUrl)}`,
+								loader: 'js'
+							};
+						});
+					}
+				},
 				// CSS imports from node_modules (e.g., import "swiper/swiper-bundle.css")
 				// Convert to inline text that can be injected as <style> tag
 				{