html-component-engine 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-component-engine",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A Vite plugin for HTML component components with a lightweight static site compiler",
   "type": "module",
   "main": "src/index.js",

package/src/engine/compiler.js

@@ -29,8 +29,9 @@ export async function compileHtml(html, root, projectRoot = null) {
  * Also supports legacy: <Component name="...">...children...</Component>
  */
 async function processComponentsWithChildren(html, root, projectRoot) {
-  // Regex to match non-self-closing <Component ...>...</Component>
-  const componentRegex = /<Component\b([^>]*)>([\s\S]*?)<\/Component>/g;
+  // Regex to match ONLY non-self-closing <Component ...>...</Component>
+  // Prevents accidentally matching <Component ... /> as an opening tag.
+  const componentRegex = /<Component\b(?![^>]*\/\s*>)([^>]*)>([\s\S]*?)<\/Component>/g;
 
   let result = html;
   let matches = [...html.matchAll(componentRegex)];
@@ -57,8 +58,15 @@ async function processComponentsWithChildren(html, root, projectRoot) {
       continue;
     }
 
-    // Replace {{ children }} placeholder with actual children content
-    componentContent = componentContent.replace(/\{\{\s*children\s*\}\}/g, children);
+    // Replace children and named slots
+    const { defaultChildren, namedSlots } = extractSlots(children);
+    componentContent = componentContent.replace(/\{\{\s*children\s*\}\}/g, defaultChildren);
+    for (const [slotName, slotContent] of Object.entries(namedSlots)) {
+      componentContent = componentContent.replace(
+        new RegExp(`\\{\\{\\s*slot:${slotName}\\s*\\}\\}`, 'g'),
+        slotContent,
+      );
+    }
 
     // Replace props with {{key}} placeholders
     for (const [key, value] of Object.entries(attrs)) {
@@ -86,9 +94,10 @@ async function processSelfClosingComponents(html, root, projectRoot) {
   for (const match of matches) {
     const tag = match[0];
     const attrs = parseSelfClosingComponentTag(tag);
-    if (!attrs || !attrs.src) continue;
+    if (!attrs) continue;
 
-    const name = attrs.src;
+    const name = attrs.src || attrs.name;
+    if (!name) continue;
     let componentContent = await loadComponent(name, root, projectRoot, attrs);
 
     if (componentContent === null) {
@@ -130,7 +139,7 @@ async function processSelfClosingComponents(html, root, projectRoot) {
  */
 async function loadComponent(name, root, projectRoot, attrs = {}) {
   // Normalize name for path construction (handle both / and \)
-  const normalizedName = name.replace(/\\/g, '/');
+  const normalizedName = name.replace(/\\/g, '/').replace(/\.html$/i, '');
 
   // root = srcRoot (e.g., example/src)
   // projectRoot = project root (e.g., example)
@@ -165,11 +174,62 @@ async function loadComponent(name, root, projectRoot, attrs = {}) {
         continue;
       }
     }
+
+    // Try case-insensitive HTML lookup to support mixed-case component tags
+    try {
+      const caseInsensitivePath = await findCaseInsensitivePath(componentPath);
+      if (caseInsensitivePath) {
+        const content = await fs.readFile(caseInsensitivePath, 'utf8');
+        return content;
+      }
+    } catch {
+      // ignore
+    }
+
+    // Try case-insensitive JS component lookup
+    try {
+      const jsPath = componentPath.replace('.html', '.js');
+      const caseInsensitiveJsPath = await findCaseInsensitivePath(jsPath);
+      if (caseInsensitiveJsPath) {
+        const componentModule = await import(pathToFileURL(caseInsensitiveJsPath));
+        const componentExport = componentModule.default || componentModule;
+
+        if (typeof componentExport === 'function') {
+          const props = { ...attrs };
+          delete props.src;
+          delete props.name;
+          return componentExport(props);
+        } else {
+          return String(componentExport);
+        }
+      }
+    } catch {
+      // ignore
+    }
   }
 
   return null;
 }
 
+/**
+ * Find a file path in a case-insensitive way
+ * @param {string} targetPath
+ * @returns {Promise<string|null>}
+ */
+async function findCaseInsensitivePath(targetPath) {
+  const dir = path.dirname(targetPath);
+  const base = path.basename(targetPath).toLowerCase();
+
+  try {
+    const entries = await fs.readdir(dir);
+    const matched = entries.find((entry) => entry.toLowerCase() === base);
+    if (!matched) return null;
+    return path.join(dir, matched);
+  } catch {
+    return null;
+  }
+}
+
 /**
  * Parse attributes from an attribute string
  * @param {string} attrsStr - Attribute string like ' class="foo" id="bar"'
@@ -177,14 +237,40 @@ async function loadComponent(name, root, projectRoot, attrs = {}) {
  */
 function parseAttributes(attrsStr) {
   const attrs = {};
-  const attrRegex = /([\w-]+)=["']([^"']*)["']/g;
+  const attrRegex = /([\w-]+)(?:=(?:"([^"]*)"|'([^']*)'))?/g;
   let attrMatch;
   while ((attrMatch = attrRegex.exec(attrsStr)) !== null) {
-    attrs[attrMatch[1]] = attrMatch[2];
+    const key = attrMatch[1];
+    const value = attrMatch[2] ?? attrMatch[3] ?? 'true';
+    attrs[key] = value;
   }
   return attrs;
 }
 
+/**
+ * Extract named slots from component children content
+ * Supported syntax:
+ * <template slot="actions">...</template>
+ * {{ slot:actions }}
+ * @param {string} children
+ * @returns {{defaultChildren: string, namedSlots: Record<string, string>}}
+ */
+function extractSlots(children) {
+  const namedSlots = {};
+  const slotRegex = /<template\s+slot=["']([\w-]+)["']\s*>([\s\S]*?)<\/template>/g;
+
+  let defaultChildren = children;
+  defaultChildren = defaultChildren.replace(slotRegex, (_, slotName, slotContent) => {
+    namedSlots[slotName] = slotContent;
+    return '';
+  });
+
+  return {
+    defaultChildren,
+    namedSlots,
+  };
+}
+
 /**
  * Inline CSS from <link> tags into <style> tags
  * @param {string} html - The HTML content

package/src/engine/utils.js

@@ -11,11 +11,13 @@ export function parseSelfClosingComponentTag(tag) {
   if (!match) return null;
 
   const attrs = {};
-  // Support hyphenated attributes like data-test, aria-label
-  const attrRegex = /([\w-]+)="([^"]*)"/g;
+  // Support hyphenated attributes with both quote styles and boolean attributes
+  const attrRegex = /([\w-]+)(?:=(?:"([^"]*)"|'([^']*)'))?/g;
   let attrMatch;
   while ((attrMatch = attrRegex.exec(match[1])) !== null) {
-    attrs[attrMatch[1]] = attrMatch[2];
+    const key = attrMatch[1];
+    const value = attrMatch[2] ?? attrMatch[3] ?? 'true';
+    attrs[key] = value;
   }
   return attrs;
 }