@webmate-studio/builder 0.2.29 → 0.2.31

package/build-service.js

@@ -73,11 +73,17 @@ function injectSvelteOptions(filename, content, componentMetadata) {
 	// SwiperTest.svelte → swiper-test
 	// MyAwesomeComponent.svelte → my-awesome-component
 	const componentName = filename.replace('.svelte', '');
-	const tagName = componentName
+	let tagName = componentName
 		.replace(/([A-Z])/g, '-$1')  // Insert hyphen before capital letters
 		.toLowerCase()
 		.replace(/^-/, '');  // Remove leading hyphen
 
+	// Svelte requires custom element names to be hyphenated
+	// If there's no hyphen, add a prefix to make it valid
+	if (!tagName.includes('-')) {
+		tagName = 'wm-' + tagName;  // e.g., "button" → "wm-button"
+	}
+
 	// Generate props definition from component.json
 	const props = {};
 	if (componentMetadata.props) {

package/package.json

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

package/src/build.js

@@ -81,24 +81,26 @@ async function installComponentDependencies(componentDir, componentName) {
  * @returns {string} HTML with scoping attribute
  */
 function addScopingAttribute(html, componentName) {
-	const dom = parseDocument(html);
 	const scopeId = `wm-${componentName.toLowerCase().replace(/[^a-z0-9]/g, '-')}`;
 
-	// Find first element (skip text nodes and comments)
-	const rootElement = DomUtils.findOne((elem) => elem.type === 'tag', dom.children, true);
-
-	if (rootElement) {
-		// Add data-wm-component attribute
-		if (!rootElement.attribs) {
-			rootElement.attribs = {};
-		}
-		rootElement.attribs['data-wm-component'] = scopeId;
+	// Use regex to add attribute to first HTML element
+	// This preserves the original HTML syntax (including unquoted class: directives)
+	// Pattern: Match first opening tag, capture tag name and attributes, insert our attribute
+	const match = html.match(/^(\s*)(<([a-zA-Z][a-zA-Z0-9-]*)(\s+[^>]*)?(\/?)>)/);
+
+	if (match) {
+		const whitespace = match[1];
+		const fullTag = match[2];
+		const tagName = match[3];
+		const existingAttrs = match[4] || '';
+		const selfClosing = match[5] || '';
+
+		// Insert data-wm-component attribute
+		const newTag = `<${tagName} data-wm-component="${scopeId}"${existingAttrs}${selfClosing}>`;
+		return whitespace + newTag + html.substring(match[0].length);
 	}
 
-	return render(dom, {
-		encodeEntities: false,
-		selfClosingTags: true
-	});
+	return html;
 }
 
 /**

package/src/bundler.js

@@ -202,9 +202,16 @@ export async function bundleComponentIslands(componentDir, outputDir) {
 		return { islands: [], success: true };
 	}
 
-	// Find all .js files in islands directory
+	// Find all island files (JS, JSX, Svelte, Vue, etc.)
 	const files = await fs.readdir(islandsDir);
-	const islandFiles = files.filter((f) => f.endsWith('.js'));
+	const islandFiles = files.filter((f) =>
+		f.endsWith('.js') ||
+		f.endsWith('.jsx') ||
+		f.endsWith('.svelte') ||
+		f.endsWith('.vue') ||
+		f.endsWith('.ts') ||
+		f.endsWith('.tsx')
+	);
 
 	if (islandFiles.length === 0) {
 		return { islands: [], success: true };
@@ -217,7 +224,9 @@ export async function bundleComponentIslands(componentDir, outputDir) {
 
 	for (const islandFile of islandFiles) {
 		const inputPath = path.join(islandsDir, islandFile);
-		const outputPath = path.join(outputDir, islandFile);
+		// Output file is always .js regardless of input extension (.svelte, .jsx, etc.)
+		const outputFile = islandFile.replace(/\.(svelte|jsx|vue|tsx?)$/, '.js');
+		const outputPath = path.join(outputDir, outputFile);
 
 		console.log(pc.dim(`  Bundling ${islandFile}...`));
 
@@ -233,7 +242,7 @@ export async function bundleComponentIslands(componentDir, outputDir) {
 		}
 
 		results.push({
-			file: islandFile,
+			file: outputFile, // Use output filename (.js) instead of input filename
 			...result
 		});
 	}

package/src/html-cleaner.js

@@ -11,24 +11,28 @@ import render from 'dom-serializer';
  * @returns {string} Cleaned HTML without wm: attributes
  */
 export function cleanComponentHTML(html, islands = []) {
-	// Transform PascalCase island elements to data-island FIRST (before parsing)
+	// Transform PascalCase island elements to data-island FIRST
 	if (islands && islands.length > 0) {
 		html = transformIslandsToDataAttributes(html, islands);
 	}
 
-	const dom = parseDocument(html);
+	// Remove wm: attributes using regex (avoids htmlparser2 breaking class: directives)
+	// Remove metadata attributes: wm:component, wm:prop, wm:props, wm:schema, wm:description
+	html = html.replace(/\s+wm:(component|prop|props|schema|description)="[^"]*"/g, '');
+	html = html.replace(/\s+wm:(component|prop|props|schema|description)='[^']*'/g, '');
+	html = html.replace(/\s+wm:(component|prop|props|schema|description)=\{[^}]*\}/g, '');
+	html = html.replace(/\s+wm:(component|prop|props|schema|description)/g, '');
 
-	// Remove all wm: attributes from all elements
-	removeWmAttributes(dom);
+	// Remove standalone 'wm' attribute
+	html = html.replace(/\s+wm="[^"]*"/g, '');
+	html = html.replace(/\s+wm='[^']*'/g, '');
+	html = html.replace(/\s+wm(?=\s|>|\/)/g, '');
 
-	// Remove <script wm:schema> tags
-	removeSchemaScripts(dom);
+	// Remove <script wm:schema>, <script wm:description>, <script wm:props>, <script wm="">
+	html = html.replace(/<script[^>]*\s+wm:(schema|description|props)[^>]*>[\s\S]*?<\/script>/gi, '');
+	html = html.replace(/<script[^>]*\s+wm=""[^>]*>[\s\S]*?<\/script>/gi, '');
 
-	// Serialize back to HTML
-	return render(dom, {
-		encodeEntities: false,
-		selfClosingTags: true
-	});
+	return html;
 }
 
 /**
@@ -167,28 +171,23 @@ function removeSchemaScripts(dom) {
  * @returns {Object} { html: string, css: string }
  */
 export function extractStyles(html) {
-	const dom = parseDocument(html);
 	let css = '';
 
-	// Find all <style> tags
-	const styleTags = DomUtils.findAll(
-		(elem) => elem.name === 'style',
-		dom.children
-	);
-
-	for (const styleTag of styleTags) {
-		const styleContent = DomUtils.textContent(styleTag);
-		css += styleContent + '\n';
+	// Extract all <style> tags using regex (avoids htmlparser2 breaking class: directives)
+	const styleTagPattern = /<style(\s[^>]*)?>(.*)(?:<\/style>)/gis;
+	let match;
+	const stylesToRemove = [];
 
-		// Remove style tag from DOM
-		DomUtils.removeElement(styleTag);
+	while ((match = styleTagPattern.exec(html)) !== null) {
+		css += match[2] + '\n';
+		stylesToRemove.push(match[0]);
 	}
 
-	// Serialize remaining HTML
-	const cleanHtml = render(dom, {
-		encodeEntities: false,
-		selfClosingTags: true
-	});
+	// Remove all <style> tags from HTML
+	let cleanHtml = html;
+	for (const styleTag of stylesToRemove) {
+		cleanHtml = cleanHtml.replace(styleTag, '');
+	}
 
 	return {
 		html: cleanHtml.trim(),