@webmate-studio/builder 0.2.19 → 0.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "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
@@ -71,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'
 							};
 						});

package/src/html-cleaner.js

@@ -32,8 +32,11 @@ export function cleanComponentHTML(html, islands = []) {
 }
 
 /**
- * Transform PascalCase island elements to data-island attributes
- * Example: <SwiperTest title={title} /> → <div data-island="swipertest" data-island-props='{"title":"{title}"}'></div>
+ * Transform PascalCase island elements to Custom Elements (Web Components)
+ * Example: <SwiperTest title={title} /> → <swiper-test title="{title}"></swiper-test>
+ *
+ * Islands with <svelte:options customElement> self-register as Custom Elements,
+ * so we convert to kebab-case tags with inline props.
  *
  * @param {string} html - Original HTML
  * @param {Array<string>} availableIslands - List of available island names
@@ -48,8 +51,16 @@ function transformIslandsToDataAttributes(html, availableIslands = []) {
 			return match; // Not an island, keep as-is
 		}
 
-		// Parse attributes to JSON props
-		const props = {};
+		// Convert island name to kebab-case for Custom Element tag
+		// SwiperTest → swiper-test
+		// MyAwesomeComponent → my-awesome-component
+		const kebabTag = tagName
+			.replace(/([A-Z])/g, '-$1')
+			.toLowerCase()
+			.replace(/^-/, '');
+
+		// Parse attributes and convert to HTML attributes
+		const attrs = [];
 
 		// Match prop={value} or prop="value" patterns
 		const attrPattern = /([a-z][a-zA-Z0-9]*)\s*=\s*(?:\{([^}]+)\}|"([^"]*)"|'([^']*)')/g;
@@ -62,17 +73,15 @@ function transformIslandsToDataAttributes(html, availableIslands = []) {
 
 			// If it was in curly braces, keep the braces for runtime evaluation
 			// Otherwise it's a literal string
-			props[propName] = attrMatch[2] ? `{${propValue}}` : propValue;
-		}
+			const value = attrMatch[2] ? `{${propValue}}` : propValue;
 
-		// Convert island name to lowercase for data-island attribute
-		const islandName = tagName.toLowerCase();
-
-		// Serialize props to JSON (escape quotes)
-		const propsJson = JSON.stringify(props).replace(/"/g, '&quot;');
+			// Add as HTML attribute
+			attrs.push(`${propName}="${value}"`);
+		}
 
-		// Generate data-island div
-		return `<div data-island="${islandName}" data-island-props="${propsJson}"></div>`;
+		// Generate Custom Element tag
+		const attrsString = attrs.length > 0 ? ' ' + attrs.join(' ') : '';
+		return `<${kebabTag}${attrsString}></${kebabTag}>`;
 	});
 }