@webmate-studio/builder 0.2.20 → 0.2.22

package/build-service.js

@@ -62,13 +62,72 @@ async function installDependencies(componentDir, packageJson) {
 	}
 }
 
+/**
+ * Auto-inject <svelte:options> for Web Component registration
+ * Converts filename to kebab-case tag name (e.g., SwiperTest.svelte → swiper-test)
+ * Generates props definition from component.json metadata
+ */
+function injectSvelteOptions(filename, content, componentMetadata) {
+	// Convert filename to kebab-case tag name
+	// SwiperTest.svelte → swiper-test
+	// MyAwesomeComponent.svelte → my-awesome-component
+	const componentName = filename.replace('.svelte', '');
+	const tagName = componentName
+		.replace(/([A-Z])/g, '-$1')  // Insert hyphen before capital letters
+		.toLowerCase()
+		.replace(/^-/, '');  // Remove leading hyphen
+
+	// Generate props definition from component.json
+	const props = {};
+	if (componentMetadata.props) {
+		// Props can be either an object or an array
+		const propsData = Array.isArray(componentMetadata.props)
+			? componentMetadata.props
+			: Object.entries(componentMetadata.props).map(([name, config]) => ({ name, ...config }));
+
+		for (const prop of propsData) {
+			// Map prop types to Svelte types
+			const typeMap = {
+				'text': 'String',
+				'string': 'String',
+				'number': 'Number',
+				'boolean': 'Boolean',
+				'array': 'Array',
+				'object': 'Object'
+			};
+			const svelteType = typeMap[prop.type?.toLowerCase()] || 'String';
+			props[prop.name] = { type: svelteType };
+		}
+	}
+
+	// Generate <svelte:options> block
+	const propsJson = JSON.stringify(props, null, 3).replace(/^/gm, '\t\t\t'); // Indent props
+	const svelteOptions = `<svelte:options
+	customElement={{
+		tag: "${tagName}",
+		shadow: "none",
+		props: ${propsJson}
+	}}
+/>\n\n`;
+
+	// Check if <svelte:options> already exists
+	if (content.includes('<svelte:options')) {
+		console.log(`[Build Service] ℹ️  ${filename} already has <svelte:options>, skipping auto-inject`);
+		return content;
+	}
+
+	// Inject at the top of the file (before <script> or template)
+	console.log(`[Build Service] ✓ Auto-injected <svelte:options> for ${tagName}`);
+	return svelteOptions + content;
+}
+
 /**
  * Build a component (islands + CSS)
  * @param {Object} payload - Build request payload
  * @returns {Object} Build result
  */
 async function buildComponent(payload) {
-	const { packageJson, islands, html, componentName = 'component' } = payload;
+	const { packageJson, islands, html, assets, componentMetadata, componentName = 'component' } = payload;
 
 	// Create temporary directory
 	const tmpDir = await mkdtemp(join(tmpdir(), 'wm-build-'));
@@ -81,6 +140,28 @@ async function buildComponent(payload) {
 			await installDependencies(tmpDir, packageJson);
 		}
 
+		// Write assets to disk BEFORE building islands (islands may reference them)
+		if (assets && assets.length > 0) {
+			const assetsDir = join(tmpDir, 'assets');
+			await mkdir(assetsDir, { recursive: true });
+
+			for (const asset of assets) {
+				const assetPath = join(assetsDir, asset.file);
+
+				// Convert base64 back to Buffer for binary files
+				// Text files can be written directly as UTF-8
+				let content;
+				if (asset.encoding === 'base64') {
+					content = Buffer.from(asset.content, 'base64');
+				} else {
+					content = asset.content; // UTF-8 string
+				}
+
+				await writeFile(assetPath, content);
+			}
+			console.log(`[Build Service] Wrote ${assets.length} asset(s)`);
+		}
+
 		// Build islands
 		const bundledIslands = [];
 		if (islands && islands.length > 0) {
@@ -91,8 +172,14 @@ async function buildComponent(payload) {
 				const inputPath = join(islandsDir, island.file);
 				const outputPath = join(islandsDir, island.file.replace(/\.(jsx?|tsx?|svelte|vue)$/, '.js'));
 
+				// Auto-inject <svelte:options> for Svelte islands
+				let content = island.content;
+				if (island.file.endsWith('.svelte') && componentMetadata && componentMetadata.props) {
+					content = injectSvelteOptions(island.file, content, componentMetadata);
+				}
+
 				// Write source file
-				await writeFile(inputPath, island.content);
+				await writeFile(inputPath, content);
 
 				console.log(`[Build Service] Bundling ${island.file}...`);
 

package/package.json

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

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}>`;
 	});
 }