chispa 0.1.0

package/README.md

@@ -0,0 +1,108 @@
+# chispa
+
+**Chispa** es un framework de interfaz de usuario (UI) totalmente declarativo y reactivo para construir aplicaciones web modernas. Se centra en la simplicidad, el rendimiento y una gestión del estado intuitiva mediante señales (signals).
+
+## Características
+
+-   ⚡ **Reactividad Fina**: Basado en Signals para actualizaciones precisas y eficientes del DOM.
+-   🧩 **Componentes Funcionales**: Crea componentes reutilizables con funciones simples.
+-   📄 **Plantillas HTML**: Separa la lógica de la vista importando archivos HTML directamente.
+-   🛠️ **Integración con Vite**: Incluye un plugin de Vite para una experiencia de desarrollo fluida.
+-   📦 **Ligero**: Sin dependencias pesadas en tiempo de ejecución.
+
+## Instalación
+
+Instala `chispa` en tu proyecto:
+
+```bash
+npm install chispa
+```
+
+## Configuración (Vite)
+
+Para usar las plantillas HTML, necesitas configurar el plugin de Chispa en tu `vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite';
+import { chispaHtmlPlugin } from 'chispa';
+
+export default defineConfig({
+	plugins: [chispaHtmlPlugin()],
+});
+```
+
+## Uso Básico
+
+### 1. Crear un Componente
+
+Chispa permite definir la estructura de tu componente en un archivo HTML y la lógica en TypeScript.
+
+**my-component.html**
+Usa el atributo `data-cb` para marcar elementos que serán controlados por tu código.
+
+```html
+<div class="my-app">
+	<h1>Contador: <span data-cb="countDisplay">0</span></h1>
+	<button data-cb="incrementBtn">Incrementar</button>
+</div>
+```
+
+**my-component.ts**
+
+```typescript
+import { component, signal } from 'chispa';
+import tpl from './my-component.html'; // Importa el HTML procesado
+
+export const MyComponent = component(() => {
+	// Estado reactivo
+	const count = signal(0);
+
+	// Retorna el fragmento enlazando los elementos del HTML
+	return tpl.fragment({
+		// Enlaza el contenido del span con la señal
+		countDisplay: { inner: count },
+
+		// Enlaza el evento click del botón
+		incrementBtn: {
+			onclick: () => count.update((v) => v + 1),
+		},
+	});
+});
+```
+
+### 2. Montar la Aplicación
+
+**main.ts**
+
+```typescript
+import { appendChild } from 'chispa';
+import { MyComponent } from './my-component';
+
+appendChild(document.body, MyComponent());
+```
+
+## API Principal
+
+### Reactividad
+
+-   **`signal(initialValue)`**: Crea una señal reactiva.
+
+    ```typescript
+    const count = signal(0);
+    console.log(count.get()); // Leer valor
+    count.set(5); // Establecer valor
+    ```
+
+-   **`computed(() => ...)`**: Crea una señal derivada que se actualiza automáticamente cuando sus dependencias cambian.
+    ```typescript
+    const double = computed(() => count.get() * 2);
+    ```
+
+### Componentes
+
+-   **`component<Props>((props) => ...)`**: Define un nuevo componente.
+-   **`appendChild(parent, child)`**: Función auxiliar para montar componentes en el DOM.
+
+## Licencia
+
+MIT

package/dist/html-compiler/cli.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/html-compiler/cli.js

@@ -0,0 +1,300 @@
+#!/usr/bin/env node
+
+// src/html-compiler/generator.ts
+import * as fs from "fs";
+import * as path from "path";
+
+// src/html-compiler/html-compiler.ts
+import { JSDOM } from "jsdom";
+var VOID_ELEMENTS = ["area", "base", "br", "hr", "img", "input", "link", "meta", "param", "keygen", "source"];
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+var HtmlCompiler = class _HtmlCompiler {
+  constructor(htmlContent) {
+    this.components = {};
+    this.stack = ["fragment"];
+    this.componentsItems = {};
+    this.componentsTags = {};
+    this.isSvg = {};
+    this.inSvgContext = 0;
+    const dom = new JSDOM(htmlContent);
+    this.htmlDocument = dom.window.document;
+  }
+  static camelize(str) {
+    if (str.startsWith("--")) {
+      return str;
+    }
+    const arr = str.split("-");
+    let camelized = "";
+    arr.forEach((v, i) => {
+      camelized += i === 0 ? v : v.charAt(0).toUpperCase() + v.slice(1);
+    });
+    return camelized;
+  }
+  static parseStyle(cssCode) {
+    let out = "{";
+    const styles = cssCode.split(";");
+    styles.forEach((line) => {
+      const parts = line.split(":");
+      if (parts.length !== 2) return;
+      const prop = _HtmlCompiler.camelize(parts[0].trim());
+      out += ` ${prop}: '${parts[1].trim()}',`;
+    });
+    out += "}";
+    return out;
+  }
+  makeClassAttr(classAttr, isComponent) {
+    const tplClasses = (classAttr || "").split(" ");
+    let finalClass = "";
+    tplClasses.forEach((tplClass) => {
+      if (!tplClass.startsWith("-tpl--")) {
+        finalClass += tplClass + " ";
+      }
+    });
+    finalClass = finalClass.trim();
+    if (isComponent) {
+      finalClass = `buildClass('${finalClass}', props.addClass, props.classes)`;
+      return ` 'class': ${finalClass}, `;
+    } else {
+      return ` 'class': "${finalClass}", `;
+    }
+  }
+  getHtmlNodeAttrs(domNode, isComponent) {
+    let attrsHtml = "{";
+    attrsHtml += this.makeClassAttr(domNode.getAttribute("class"), isComponent);
+    Array.from(domNode.attributes).forEach((attr) => {
+      const attrName = attr.name;
+      let attrValue = attr.value;
+      if (attrName === "data-cb") return;
+      if (attrName === "class") return;
+      attrValue = attrValue.replace(/\n/g, " ").replace(/"/g, '\\"');
+      if (attrName === "style") {
+        attrsHtml += ` '${attrName}': "${attrValue}", `;
+      } else {
+        attrsHtml += ` '${attrName}': "${attrValue}", `;
+      }
+    });
+    attrsHtml += "}";
+    return attrsHtml;
+  }
+  buildTsForNode(domNode, isComponent = false) {
+    let htmlNodeCode = "";
+    if (domNode.nodeType === 1) {
+      const element = domNode;
+      let tagName = element.tagName;
+      if (tagName === "svg") {
+        this.inSvgContext++;
+      }
+      let cbid = element.getAttribute("data-cb");
+      if (cbid) {
+        const currComp = this.stack[0];
+        element.removeAttribute("data-cb");
+        cbid = _HtmlCompiler.camelize(cbid);
+        if (!this.componentsItems[currComp]) {
+          this.componentsItems[currComp] = [];
+        }
+        this.componentsItems[currComp].push(cbid);
+        this.stack.unshift(cbid);
+        this.components[cbid] = this.buildTsForNode(element, true);
+        this.componentsTags[cbid] = element.tagName;
+        this.isSvg[cbid] = this.inSvgContext > 0;
+        this.stack.shift();
+        if (currComp === "fragment") {
+          htmlNodeCode += `getItem(Components, props, '${cbid}')`;
+        } else {
+          htmlNodeCode += `getItem(Components, props.items, '${cbid}')`;
+        }
+      } else {
+        const attrs = this.getHtmlNodeAttrs(element, isComponent);
+        if (!this.inSvgContext) {
+          tagName = tagName.toLowerCase();
+          htmlNodeCode += `(() => { const node = document.createElement('${tagName}');
+`;
+        } else {
+          htmlNodeCode += `(() => { const node = document.createElementNS('${SVG_NAMESPACE}', '${tagName}');
+`;
+        }
+        htmlNodeCode += `setAttributes(node, ${attrs});
+`;
+        if (isComponent) {
+          htmlNodeCode += `setProps(node, getValidProps(props));
+`;
+        }
+        let subTs = "";
+        element.childNodes.forEach((child) => {
+          const chCode = this.buildTsForNode(child);
+          if (chCode) {
+            subTs += `appendChild(node, ${chCode});
+`;
+          }
+        });
+        if (!VOID_ELEMENTS.includes(tagName.toLowerCase())) {
+          if (isComponent) {
+            htmlNodeCode += `
+                        if (props.inner === null) {
+                            node.innerHTML = '';
+                        } else if (props.inner !== undefined) {
+                            node.innerHTML = '';
+                            appendChild(node, props.inner);
+                        } else {
+                            ${subTs}
+                        }
+                        `;
+          } else {
+            htmlNodeCode += subTs;
+          }
+        }
+        if (isComponent) {
+          htmlNodeCode += `if (typeof props._ref === 'function') props._ref(node);
+`;
+        }
+        htmlNodeCode += `return node;})()`;
+        if (tagName === "svg") {
+          this.inSvgContext--;
+        }
+      }
+    } else if (domNode.nodeType === 3) {
+      const textNode = domNode;
+      const parent = textNode.parentNode;
+      const parentTag = parent ? parent.tagName.toLowerCase() : "";
+      const mustOmit = ["table", "thead", "tbody", "tfoot", "tr"].includes(parentTag);
+      if (!mustOmit && textNode.textContent) {
+        if (textNode.textContent.trim() === "") {
+          if (textNode.textContent.length > 0) {
+            htmlNodeCode += `document.createTextNode(' ')`;
+          }
+        } else {
+          htmlNodeCode = `document.createTextNode(${JSON.stringify(textNode.textContent)})`;
+        }
+      }
+    }
+    return htmlNodeCode.trim();
+  }
+  static getPropsTypename(cbid) {
+    return "T" + cbid.charAt(0).toUpperCase() + cbid.slice(1) + "Props";
+  }
+  wrapFnComponent(cbid, jsx) {
+    const typename = _HtmlCompiler.getPropsTypename(cbid);
+    return `(props: ${typename}) => { 
+ return(${jsx}); 
+ }`;
+  }
+  createAllComponents() {
+    const body = this.htmlDocument.querySelector("body");
+    if (!body) throw new Error("Not valid HTML");
+    let rendererJsx = "(() => { const fragment = document.createDocumentFragment();\n";
+    body.childNodes.forEach((child) => {
+      const chCode = this.buildTsForNode(child);
+      if (chCode) {
+        rendererJsx += `appendChild(fragment, ${chCode});
+`;
+      }
+    });
+    rendererJsx += "return fragment;\n";
+    rendererJsx += "})()";
+    this.components["fragment"] = rendererJsx;
+  }
+  getTypedef(cbid) {
+    const items = this.componentsItems[cbid] || [];
+    let itemsType = "{\n";
+    items.forEach((itemCbid) => {
+      const itemTypename = _HtmlCompiler.getPropsTypename(itemCbid);
+      itemsType += `${itemCbid}?: ${itemTypename} | TContent;
+`;
+    });
+    itemsType += "}\n";
+    const typename = _HtmlCompiler.getPropsTypename(cbid);
+    if (cbid === "fragment") {
+      return `interface ${typename} ${itemsType}`;
+    } else {
+      const tagname = this.componentsTags[cbid];
+      if (this.isSvg[cbid]) {
+        return `type ${typename} = TItemBuilderProps<SVGElementTagNameMap['${tagname}'], ${itemsType}>;`;
+      } else {
+        return `type ${typename} = TItemBuilderProps<HTMLElementTagNameMap['${tagname.toLowerCase()}'], ${itemsType}>;`;
+      }
+    }
+  }
+  compile() {
+    this.createAllComponents();
+    let componentsClasses = "";
+    let typedefs = "";
+    for (const [cbid, compJsx] of Object.entries(this.components)) {
+      typedefs += this.getTypedef(cbid) + "\n";
+      componentsClasses += `${cbid}: ${this.wrapFnComponent(cbid, compJsx)},
+`;
+    }
+    const jsOutput = `
+            import { appendChild, getItem, getValidProps, buildClass, setAttributes, setProps, TContent, TItemBuilderProps } from 'chispa';
+
+            const SVG_NS = 'http://www.w3.org/2000/svg';
+            
+            const Components = {
+                ${componentsClasses}
+            };
+            
+            export default Components;
+        `;
+    const dtsOutput = `
+            import { TContent, TItemBuilderProps } from 'chispa';
+            
+            ${typedefs}
+            
+            declare const Components: {
+                ${Object.keys(this.components).map((cbid) => {
+      const typename = _HtmlCompiler.getPropsTypename(cbid);
+      return `${cbid}: (props: ${typename}) => Node | DocumentFragment;`;
+    }).join("\n")}
+            };
+            
+            export default Components;
+        `;
+    return { js: jsOutput, dts: dtsOutput };
+  }
+};
+
+// src/html-compiler/generator.ts
+function generateTypes(filePath, content, rootDir) {
+  try {
+    const compiler = new HtmlCompiler(content);
+    const { dts } = compiler.compile();
+    const outDir = path.join(rootDir, ".chispa/types");
+    const relativePath = path.relative(rootDir, filePath);
+    const targetPath = path.join(outDir, relativePath + ".d.ts");
+    const targetDir = path.dirname(targetPath);
+    if (!fs.existsSync(targetDir)) {
+      fs.mkdirSync(targetDir, { recursive: true });
+    }
+    fs.writeFileSync(targetPath, dts);
+  } catch (e) {
+    console.error(`[chispa] Error generating types for ${filePath}`, e);
+  }
+}
+function findAndCompileHtmlFiles(dir, rootDir) {
+  if (!fs.existsSync(dir)) return;
+  const files = fs.readdirSync(dir);
+  files.forEach((file) => {
+    const fullPath = path.join(dir, file);
+    if (fullPath === path.join(rootDir, "index.html")) return;
+    if (fs.statSync(fullPath).isDirectory()) {
+      if (file !== "node_modules" && file !== ".git" && file !== "dist" && file !== ".chispa") {
+        findAndCompileHtmlFiles(fullPath, rootDir);
+      }
+    } else if (file.endsWith(".html")) {
+      console.log("Generating types for", fullPath);
+      const content = fs.readFileSync(fullPath, "utf-8");
+      generateTypes(fullPath, content, rootDir);
+    }
+  });
+}
+
+// src/html-compiler/cli.ts
+var args = process.argv.slice(2);
+if (args.includes("--compile-html")) {
+  const rootDir = process.cwd();
+  console.log("Scanning for HTML files...");
+  findAndCompileHtmlFiles(rootDir, rootDir);
+  console.log("HTML compilation completed.");
+} else {
+  console.log("Usage: chispa-cli --compile-html");
+}
+//# sourceMappingURL=cli.js.map

package/dist/html-compiler/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/html-compiler/generator.ts","../../src/html-compiler/html-compiler.ts","../../src/html-compiler/cli.ts"],"sourcesContent":["import * as fs from 'fs';\nimport * as path from 'path';\nimport { HtmlCompiler } from './html-compiler';\n\nexport function generateTypes(filePath: string, content: string, rootDir: string) {\n\ttry {\n\t\tconst compiler = new HtmlCompiler(content);\n\t\tconst { dts } = compiler.compile();\n\n\t\tconst outDir = path.join(rootDir, '.chispa/types');\n\t\tconst relativePath = path.relative(rootDir, filePath);\n\t\tconst targetPath = path.join(outDir, relativePath + '.d.ts');\n\t\tconst targetDir = path.dirname(targetPath);\n\n\t\tif (!fs.existsSync(targetDir)) {\n\t\t\tfs.mkdirSync(targetDir, { recursive: true });\n\t\t}\n\t\tfs.writeFileSync(targetPath, dts);\n\t} catch (e) {\n\t\tconsole.error(`[chispa] Error generating types for ${filePath}`, e);\n\t}\n}\n\nexport function findAndCompileHtmlFiles(dir: string, rootDir: string) {\n\tif (!fs.existsSync(dir)) return;\n\tconst files = fs.readdirSync(dir);\n\tfiles.forEach((file) => {\n\t\tconst fullPath = path.join(dir, file);\n\t\tif (fullPath === path.join(rootDir, 'index.html')) return;\n\t\tif (fs.statSync(fullPath).isDirectory()) {\n\t\t\tif (file !== 'node_modules' && file !== '.git' && file !== 'dist' && file !== '.chispa') {\n\t\t\t\tfindAndCompileHtmlFiles(fullPath, rootDir);\n\t\t\t}\n\t\t} else if (file.endsWith('.html')) {\n\t\t\tconsole.log('Generating types for', fullPath);\n\t\t\tconst content = fs.readFileSync(fullPath, 'utf-8');\n\t\t\tgenerateTypes(fullPath, content, rootDir);\n\t\t}\n\t});\n}\n","import { JSDOM } from 'jsdom';\n\nconst VOID_ELEMENTS = ['area', 'base', 'br', 'hr', 'img', 'input', 'link', 'meta', 'param', 'keygen', 'source'];\n\nconst SVG_NAMESPACE = 'http://www.w3.org/2000/svg';\n\nexport class HtmlCompiler {\n\tprivate components: Record<string, string> = {};\n\tprivate stack: string[] = ['fragment'];\n\tprivate componentsItems: Record<string, string[]> = {};\n\tprivate componentsTags: Record<string, string> = {};\n\tprivate isSvg: Record<string, boolean> = {};\n\tprivate inSvgContext = 0;\n\tprivate htmlDocument: Document;\n\n\tconstructor(htmlContent: string) {\n\t\tconst dom = new JSDOM(htmlContent);\n\t\tthis.htmlDocument = dom.window.document;\n\t}\n\n\tprivate static camelize(str: string): string {\n\t\tif (str.startsWith('--')) {\n\t\t\treturn str;\n\t\t}\n\t\tconst arr = str.split('-');\n\t\tlet camelized = '';\n\t\tarr.forEach((v, i) => {\n\t\t\tcamelized += i === 0 ? v : v.charAt(0).toUpperCase() + v.slice(1);\n\t\t});\n\t\treturn camelized;\n\t}\n\n\tprivate static parseStyle(cssCode: string): string {\n\t\tlet out = '{';\n\t\tconst styles = cssCode.split(';');\n\t\tstyles.forEach((line) => {\n\t\t\tconst parts = line.split(':');\n\t\t\tif (parts.length !== 2) return;\n\t\t\tconst prop = HtmlCompiler.camelize(parts[0].trim());\n\t\t\tout += ` ${prop}: '${parts[1].trim()}',`;\n\t\t});\n\t\tout += '}';\n\t\treturn out;\n\t}\n\n\tprivate makeClassAttr(classAttr: string | null, isComponent: boolean): string {\n\t\tconst tplClasses = (classAttr || '').split(' ');\n\t\tlet finalClass = '';\n\n\t\ttplClasses.forEach((tplClass) => {\n\t\t\tif (!tplClass.startsWith('-tpl--')) {\n\t\t\t\tfinalClass += tplClass + ' ';\n\t\t\t}\n\t\t});\n\n\t\tfinalClass = finalClass.trim();\n\n\t\tif (isComponent) {\n\t\t\tfinalClass = `buildClass('${finalClass}', props.addClass, props.classes)`;\n\t\t\treturn ` 'class': ${finalClass}, `;\n\t\t} else {\n\t\t\treturn ` 'class': \"${finalClass}\", `;\n\t\t}\n\t}\n\n\tprivate getHtmlNodeAttrs(domNode: Element, isComponent: boolean): string {\n\t\tlet attrsHtml = '{';\n\t\tattrsHtml += this.makeClassAttr(domNode.getAttribute('class'), isComponent);\n\n\t\tArray.from(domNode.attributes).forEach((attr) => {\n\t\t\tconst attrName = attr.name;\n\t\t\tlet attrValue = attr.value;\n\n\t\t\tif (attrName === 'data-cb') return;\n\t\t\tif (attrName === 'class') return;\n\n\t\t\tattrValue = attrValue.replace(/\\n/g, ' ').replace(/\"/g, '\\\\\"');\n\n\t\t\t// Simplified logic compared to PHP which had cbt.prefixize... calls\n\t\t\t// Assuming we just output the value for now as I don't see cbt implementation here\n\t\t\t// The PHP code imported CoreBuilderTools but here we might not have it.\n\t\t\t// The user's example output imports from 'chispa'.\n\t\t\t// I will stick to simple string values for now unless I see cbt in chispa.\n\n\t\t\tif (attrName === 'style') {\n\t\t\t\t// PHP called cbt.prefixizeStyle, but also had parse_style static method.\n\t\t\t\t// Wait, the PHP code used cbt.prefixizeStyle inside get_html_node_attrs.\n\t\t\t\t// But parse_style was defined but not used in the snippet I read?\n\t\t\t\t// Ah, I should check if I should use parseStyle or just output string.\n\t\t\t\t// The PHP code: $attrs_html .= \" '$attr_name': cbt.prefixizeStyle('$attr_value'), \";\n\t\t\t\t// If cbt is a runtime helper, I should output the call.\n\t\t\t\t// But wait, the generated code imports CoreBuilderTools.\n\t\t\t\t// Does 'chispa' export CoreBuilderTools?\n\t\t\t\t// src/index.ts does NOT export CoreBuilderTools.\n\t\t\t\t// It exports appendChild, getItem, etc.\n\t\t\t\t// Maybe I should just output the string for now.\n\t\t\t\tattrsHtml += ` '${attrName}': \"${attrValue}\", `;\n\t\t\t} else {\n\t\t\t\tattrsHtml += ` '${attrName}': \"${attrValue}\", `;\n\t\t\t}\n\t\t});\n\n\t\tattrsHtml += '}';\n\t\treturn attrsHtml;\n\t}\n\n\tprivate buildTsForNode(domNode: Node, isComponent = false): string {\n\t\tlet htmlNodeCode = '';\n\n\t\tif (domNode.nodeType === 1) {\n\t\t\t// Element\n\t\t\tconst element = domNode as Element;\n\t\t\tlet tagName = element.tagName;\n\n\t\t\tif (tagName === 'svg') {\n\t\t\t\tthis.inSvgContext++;\n\t\t\t}\n\n\t\t\tlet cbid = element.getAttribute('data-cb');\n\n\t\t\tif (cbid) {\n\t\t\t\tconst currComp = this.stack[0];\n\t\t\t\telement.removeAttribute('data-cb');\n\t\t\t\tcbid = HtmlCompiler.camelize(cbid);\n\n\t\t\t\tif (!this.componentsItems[currComp]) {\n\t\t\t\t\tthis.componentsItems[currComp] = [];\n\t\t\t\t}\n\n\t\t\t\tthis.componentsItems[currComp].push(cbid);\n\t\t\t\tthis.stack.unshift(cbid);\n\t\t\t\tthis.components[cbid] = this.buildTsForNode(element, true);\n\t\t\t\tthis.componentsTags[cbid] = element.tagName;\n\t\t\t\tthis.isSvg[cbid] = this.inSvgContext > 0;\n\t\t\t\tthis.stack.shift();\n\n\t\t\t\tif (currComp === 'fragment') {\n\t\t\t\t\thtmlNodeCode += `getItem(Components, props, '${cbid}')`;\n\t\t\t\t} else {\n\t\t\t\t\thtmlNodeCode += `getItem(Components, props.items, '${cbid}')`;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tconst attrs = this.getHtmlNodeAttrs(element, isComponent);\n\n\t\t\t\tif (!this.inSvgContext) {\n\t\t\t\t\ttagName = tagName.toLowerCase();\n\t\t\t\t\thtmlNodeCode += `(() => { const node = document.createElement('${tagName}');\\n`;\n\t\t\t\t} else {\n\t\t\t\t\thtmlNodeCode += `(() => { const node = document.createElementNS('${SVG_NAMESPACE}', '${tagName}');\\n`;\n\t\t\t\t}\n\n\t\t\t\thtmlNodeCode += `setAttributes(node, ${attrs});\\n`;\n\t\t\t\tif (isComponent) {\n\t\t\t\t\thtmlNodeCode += `setProps(node, getValidProps(props));\\n`;\n\t\t\t\t}\n\n\t\t\t\tlet subTs = '';\n\t\t\t\telement.childNodes.forEach((child) => {\n\t\t\t\t\tconst chCode = this.buildTsForNode(child);\n\t\t\t\t\tif (chCode) {\n\t\t\t\t\t\tsubTs += `appendChild(node, ${chCode});\\n`;\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tif (!VOID_ELEMENTS.includes(tagName.toLowerCase())) {\n\t\t\t\t\tif (isComponent) {\n\t\t\t\t\t\thtmlNodeCode += `\n                        if (props.inner === null) {\n                            node.innerHTML = '';\n                        } else if (props.inner !== undefined) {\n                            node.innerHTML = '';\n                            appendChild(node, props.inner);\n                        } else {\n                            ${subTs}\n                        }\n                        `;\n\t\t\t\t\t} else {\n\t\t\t\t\t\thtmlNodeCode += subTs;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (isComponent) {\n\t\t\t\t\thtmlNodeCode += `if (typeof props._ref === 'function') props._ref(node);\\n`;\n\t\t\t\t}\n\n\t\t\t\thtmlNodeCode += `return node;})()`;\n\n\t\t\t\tif (tagName === 'svg') {\n\t\t\t\t\tthis.inSvgContext--;\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (domNode.nodeType === 3) {\n\t\t\t// Text\n\t\t\tconst textNode = domNode as Text;\n\t\t\tconst parent = textNode.parentNode as Element;\n\t\t\tconst parentTag = parent ? parent.tagName.toLowerCase() : '';\n\n\t\t\tconst mustOmit = ['table', 'thead', 'tbody', 'tfoot', 'tr'].includes(parentTag);\n\n\t\t\tif (!mustOmit && textNode.textContent) {\n\t\t\t\tif (textNode.textContent.trim() === '') {\n\t\t\t\t\tif (textNode.textContent.length > 0) {\n\t\t\t\t\t\thtmlNodeCode += `document.createTextNode(' ')`;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\thtmlNodeCode = `document.createTextNode(${JSON.stringify(textNode.textContent)})`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn htmlNodeCode.trim();\n\t}\n\n\tprivate static getPropsTypename(cbid: string): string {\n\t\treturn 'T' + cbid.charAt(0).toUpperCase() + cbid.slice(1) + 'Props';\n\t}\n\n\tprivate wrapFnComponent(cbid: string, jsx: string): string {\n\t\tconst typename = HtmlCompiler.getPropsTypename(cbid);\n\t\treturn `(props: ${typename}) => { \\n return(${jsx}); \\n }`;\n\t}\n\n\tprivate createAllComponents() {\n\t\tconst body = this.htmlDocument.querySelector('body');\n\t\tif (!body) throw new Error('Not valid HTML');\n\n\t\tlet rendererJsx = '(() => { const fragment = document.createDocumentFragment();\\n';\n\n\t\tbody.childNodes.forEach((child) => {\n\t\t\tconst chCode = this.buildTsForNode(child);\n\t\t\tif (chCode) {\n\t\t\t\trendererJsx += `appendChild(fragment, ${chCode});\\n`;\n\t\t\t}\n\t\t});\n\n\t\trendererJsx += 'return fragment;\\n';\n\t\trendererJsx += '})()';\n\n\t\tthis.components['fragment'] = rendererJsx;\n\t}\n\n\tprivate getTypedef(cbid: string): string {\n\t\tconst items = this.componentsItems[cbid] || [];\n\t\tlet itemsType = '{\\n';\n\t\titems.forEach((itemCbid) => {\n\t\t\tconst itemTypename = HtmlCompiler.getPropsTypename(itemCbid);\n\t\t\titemsType += `${itemCbid}?: ${itemTypename} | TContent;\\n`;\n\t\t});\n\t\titemsType += '}\\n';\n\n\t\tconst typename = HtmlCompiler.getPropsTypename(cbid);\n\n\t\tif (cbid === 'fragment') {\n\t\t\treturn `interface ${typename} ${itemsType}`;\n\t\t} else {\n\t\t\tconst tagname = this.componentsTags[cbid];\n\t\t\tif (this.isSvg[cbid]) {\n\t\t\t\treturn `type ${typename} = TItemBuilderProps<SVGElementTagNameMap['${tagname}'], ${itemsType}>;`;\n\t\t\t} else {\n\t\t\t\treturn `type ${typename} = TItemBuilderProps<HTMLElementTagNameMap['${tagname.toLowerCase()}'], ${itemsType}>;`;\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic compile(): { js: string; dts: string } {\n\t\tthis.createAllComponents();\n\n\t\tlet componentsClasses = '';\n\t\tlet typedefs = '';\n\n\t\tfor (const [cbid, compJsx] of Object.entries(this.components)) {\n\t\t\ttypedefs += this.getTypedef(cbid) + '\\n';\n\t\t\tcomponentsClasses += `${cbid}: ${this.wrapFnComponent(cbid, compJsx)},\\n`;\n\t\t}\n\n\t\tconst jsOutput = `\n            import { appendChild, getItem, getValidProps, buildClass, setAttributes, setProps, TContent, TItemBuilderProps } from 'chispa';\n\n            const SVG_NS = 'http://www.w3.org/2000/svg';\n            \n            const Components = {\n                ${componentsClasses}\n            };\n            \n            export default Components;\n        `;\n\n\t\tconst dtsOutput = `\n            import { TContent, TItemBuilderProps } from 'chispa';\n            \n            ${typedefs}\n            \n            declare const Components: {\n                ${Object.keys(this.components)\n\t\t\t\t\t.map((cbid) => {\n\t\t\t\t\t\tconst typename = HtmlCompiler.getPropsTypename(cbid);\n\t\t\t\t\t\treturn `${cbid}: (props: ${typename}) => Node | DocumentFragment;`;\n\t\t\t\t\t})\n\t\t\t\t\t.join('\\n')}\n            };\n            \n            export default Components;\n        `;\n\n\t\treturn { js: jsOutput, dts: dtsOutput };\n\t}\n}\n","#!/usr/bin/env node\nimport { findAndCompileHtmlFiles } from './generator';\n\nconst args = process.argv.slice(2);\n\nif (args.includes('--compile-html')) {\n\tconst rootDir = process.cwd();\n\tconsole.log('Scanning for HTML files...');\n\tfindAndCompileHtmlFiles(rootDir, rootDir);\n\tconsole.log('HTML compilation completed.');\n} else {\n\tconsole.log('Usage: chispa-cli --compile-html');\n}\n"],"mappings":";;;AAAA,YAAY,QAAQ;AACpB,YAAY,UAAU;;;ACDtB,SAAS,aAAa;AAEtB,IAAM,gBAAgB,CAAC,QAAQ,QAAQ,MAAM,MAAM,OAAO,SAAS,QAAQ,QAAQ,SAAS,UAAU,QAAQ;AAE9G,IAAM,gBAAgB;AAEf,IAAM,eAAN,MAAM,cAAa;AAAA,EASzB,YAAY,aAAqB;AARjC,SAAQ,aAAqC,CAAC;AAC9C,SAAQ,QAAkB,CAAC,UAAU;AACrC,SAAQ,kBAA4C,CAAC;AACrD,SAAQ,iBAAyC,CAAC;AAClD,SAAQ,QAAiC,CAAC;AAC1C,SAAQ,eAAe;AAItB,UAAM,MAAM,IAAI,MAAM,WAAW;AACjC,SAAK,eAAe,IAAI,OAAO;AAAA,EAChC;AAAA,EAEA,OAAe,SAAS,KAAqB;AAC5C,QAAI,IAAI,WAAW,IAAI,GAAG;AACzB,aAAO;AAAA,IACR;AACA,UAAM,MAAM,IAAI,MAAM,GAAG;AACzB,QAAI,YAAY;AAChB,QAAI,QAAQ,CAAC,GAAG,MAAM;AACrB,mBAAa,MAAM,IAAI,IAAI,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC;AAAA,IACjE,CAAC;AACD,WAAO;AAAA,EACR;AAAA,EAEA,OAAe,WAAW,SAAyB;AAClD,QAAI,MAAM;AACV,UAAM,SAAS,QAAQ,MAAM,GAAG;AAChC,WAAO,QAAQ,CAAC,SAAS;AACxB,YAAM,QAAQ,KAAK,MAAM,GAAG;AAC5B,UAAI,MAAM,WAAW,EAAG;AACxB,YAAM,OAAO,cAAa,SAAS,MAAM,CAAC,EAAE,KAAK,CAAC;AAClD,aAAO,IAAI,IAAI,MAAM,MAAM,CAAC,EAAE,KAAK,CAAC;AAAA,IACrC,CAAC;AACD,WAAO;AACP,WAAO;AAAA,EACR;AAAA,EAEQ,cAAc,WAA0B,aAA8B;AAC7E,UAAM,cAAc,aAAa,IAAI,MAAM,GAAG;AAC9C,QAAI,aAAa;AAEjB,eAAW,QAAQ,CAAC,aAAa;AAChC,UAAI,CAAC,SAAS,WAAW,QAAQ,GAAG;AACnC,sBAAc,WAAW;AAAA,MAC1B;AAAA,IACD,CAAC;AAED,iBAAa,WAAW,KAAK;AAE7B,QAAI,aAAa;AAChB,mBAAa,eAAe,UAAU;AACtC,aAAO,aAAa,UAAU;AAAA,IAC/B,OAAO;AACN,aAAO,cAAc,UAAU;AAAA,IAChC;AAAA,EACD;AAAA,EAEQ,iBAAiB,SAAkB,aAA8B;AACxE,QAAI,YAAY;AAChB,iBAAa,KAAK,cAAc,QAAQ,aAAa,OAAO,GAAG,WAAW;AAE1E,UAAM,KAAK,QAAQ,UAAU,EAAE,QAAQ,CAAC,SAAS;AAChD,YAAM,WAAW,KAAK;AACtB,UAAI,YAAY,KAAK;AAErB,UAAI,aAAa,UAAW;AAC5B,UAAI,aAAa,QAAS;AAE1B,kBAAY,UAAU,QAAQ,OAAO,GAAG,EAAE,QAAQ,MAAM,KAAK;AAQ7D,UAAI,aAAa,SAAS;AAYzB,qBAAa,KAAK,QAAQ,OAAO,SAAS;AAAA,MAC3C,OAAO;AACN,qBAAa,KAAK,QAAQ,OAAO,SAAS;AAAA,MAC3C;AAAA,IACD,CAAC;AAED,iBAAa;AACb,WAAO;AAAA,EACR;AAAA,EAEQ,eAAe,SAAe,cAAc,OAAe;AAClE,QAAI,eAAe;AAEnB,QAAI,QAAQ,aAAa,GAAG;AAE3B,YAAM,UAAU;AAChB,UAAI,UAAU,QAAQ;AAEtB,UAAI,YAAY,OAAO;AACtB,aAAK;AAAA,MACN;AAEA,UAAI,OAAO,QAAQ,aAAa,SAAS;AAEzC,UAAI,MAAM;AACT,cAAM,WAAW,KAAK,MAAM,CAAC;AAC7B,gBAAQ,gBAAgB,SAAS;AACjC,eAAO,cAAa,SAAS,IAAI;AAEjC,YAAI,CAAC,KAAK,gBAAgB,QAAQ,GAAG;AACpC,eAAK,gBAAgB,QAAQ,IAAI,CAAC;AAAA,QACnC;AAEA,aAAK,gBAAgB,QAAQ,EAAE,KAAK,IAAI;AACxC,aAAK,MAAM,QAAQ,IAAI;AACvB,aAAK,WAAW,IAAI,IAAI,KAAK,eAAe,SAAS,IAAI;AACzD,aAAK,eAAe,IAAI,IAAI,QAAQ;AACpC,aAAK,MAAM,IAAI,IAAI,KAAK,eAAe;AACvC,aAAK,MAAM,MAAM;AAEjB,YAAI,aAAa,YAAY;AAC5B,0BAAgB,+BAA+B,IAAI;AAAA,QACpD,OAAO;AACN,0BAAgB,qCAAqC,IAAI;AAAA,QAC1D;AAAA,MACD,OAAO;AACN,cAAM,QAAQ,KAAK,iBAAiB,SAAS,WAAW;AAExD,YAAI,CAAC,KAAK,cAAc;AACvB,oBAAU,QAAQ,YAAY;AAC9B,0BAAgB,iDAAiD,OAAO;AAAA;AAAA,QACzE,OAAO;AACN,0BAAgB,mDAAmD,aAAa,OAAO,OAAO;AAAA;AAAA,QAC/F;AAEA,wBAAgB,uBAAuB,KAAK;AAAA;AAC5C,YAAI,aAAa;AAChB,0BAAgB;AAAA;AAAA,QACjB;AAEA,YAAI,QAAQ;AACZ,gBAAQ,WAAW,QAAQ,CAAC,UAAU;AACrC,gBAAM,SAAS,KAAK,eAAe,KAAK;AACxC,cAAI,QAAQ;AACX,qBAAS,qBAAqB,MAAM;AAAA;AAAA,UACrC;AAAA,QACD,CAAC;AAED,YAAI,CAAC,cAAc,SAAS,QAAQ,YAAY,CAAC,GAAG;AACnD,cAAI,aAAa;AAChB,4BAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOQ,KAAK;AAAA;AAAA;AAAA,UAG9B,OAAO;AACN,4BAAgB;AAAA,UACjB;AAAA,QACD;AAEA,YAAI,aAAa;AAChB,0BAAgB;AAAA;AAAA,QACjB;AAEA,wBAAgB;AAEhB,YAAI,YAAY,OAAO;AACtB,eAAK;AAAA,QACN;AAAA,MACD;AAAA,IACD,WAAW,QAAQ,aAAa,GAAG;AAElC,YAAM,WAAW;AACjB,YAAM,SAAS,SAAS;AACxB,YAAM,YAAY,SAAS,OAAO,QAAQ,YAAY,IAAI;AAE1D,YAAM,WAAW,CAAC,SAAS,SAAS,SAAS,SAAS,IAAI,EAAE,SAAS,SAAS;AAE9E,UAAI,CAAC,YAAY,SAAS,aAAa;AACtC,YAAI,SAAS,YAAY,KAAK,MAAM,IAAI;AACvC,cAAI,SAAS,YAAY,SAAS,GAAG;AACpC,4BAAgB;AAAA,UACjB;AAAA,QACD,OAAO;AACN,yBAAe,2BAA2B,KAAK,UAAU,SAAS,WAAW,CAAC;AAAA,QAC/E;AAAA,MACD;AAAA,IACD;AAEA,WAAO,aAAa,KAAK;AAAA,EAC1B;AAAA,EAEA,OAAe,iBAAiB,MAAsB;AACrD,WAAO,MAAM,KAAK,OAAO,CAAC,EAAE,YAAY,IAAI,KAAK,MAAM,CAAC,IAAI;AAAA,EAC7D;AAAA,EAEQ,gBAAgB,MAAc,KAAqB;AAC1D,UAAM,WAAW,cAAa,iBAAiB,IAAI;AACnD,WAAO,WAAW,QAAQ;AAAA,UAAoB,GAAG;AAAA;AAAA,EAClD;AAAA,EAEQ,sBAAsB;AAC7B,UAAM,OAAO,KAAK,aAAa,cAAc,MAAM;AACnD,QAAI,CAAC,KAAM,OAAM,IAAI,MAAM,gBAAgB;AAE3C,QAAI,cAAc;AAElB,SAAK,WAAW,QAAQ,CAAC,UAAU;AAClC,YAAM,SAAS,KAAK,eAAe,KAAK;AACxC,UAAI,QAAQ;AACX,uBAAe,yBAAyB,MAAM;AAAA;AAAA,MAC/C;AAAA,IACD,CAAC;AAED,mBAAe;AACf,mBAAe;AAEf,SAAK,WAAW,UAAU,IAAI;AAAA,EAC/B;AAAA,EAEQ,WAAW,MAAsB;AACxC,UAAM,QAAQ,KAAK,gBAAgB,IAAI,KAAK,CAAC;AAC7C,QAAI,YAAY;AAChB,UAAM,QAAQ,CAAC,aAAa;AAC3B,YAAM,eAAe,cAAa,iBAAiB,QAAQ;AAC3D,mBAAa,GAAG,QAAQ,MAAM,YAAY;AAAA;AAAA,IAC3C,CAAC;AACD,iBAAa;AAEb,UAAM,WAAW,cAAa,iBAAiB,IAAI;AAEnD,QAAI,SAAS,YAAY;AACxB,aAAO,aAAa,QAAQ,IAAI,SAAS;AAAA,IAC1C,OAAO;AACN,YAAM,UAAU,KAAK,eAAe,IAAI;AACxC,UAAI,KAAK,MAAM,IAAI,GAAG;AACrB,eAAO,QAAQ,QAAQ,8CAA8C,OAAO,OAAO,SAAS;AAAA,MAC7F,OAAO;AACN,eAAO,QAAQ,QAAQ,+CAA+C,QAAQ,YAAY,CAAC,OAAO,SAAS;AAAA,MAC5G;AAAA,IACD;AAAA,EACD;AAAA,EAEO,UAAuC;AAC7C,SAAK,oBAAoB;AAEzB,QAAI,oBAAoB;AACxB,QAAI,WAAW;AAEf,eAAW,CAAC,MAAM,OAAO,KAAK,OAAO,QAAQ,KAAK,UAAU,GAAG;AAC9D,kBAAY,KAAK,WAAW,IAAI,IAAI;AACpC,2BAAqB,GAAG,IAAI,KAAK,KAAK,gBAAgB,MAAM,OAAO,CAAC;AAAA;AAAA,IACrE;AAEA,UAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMD,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAMjC,UAAM,YAAY;AAAA;AAAA;AAAA,cAGN,QAAQ;AAAA;AAAA;AAAA,kBAGJ,OAAO,KAAK,KAAK,UAAU,EACvC,IAAI,CAAC,SAAS;AACd,YAAM,WAAW,cAAa,iBAAiB,IAAI;AACnD,aAAO,GAAG,IAAI,aAAa,QAAQ;AAAA,IACpC,CAAC,EACA,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAMd,WAAO,EAAE,IAAI,UAAU,KAAK,UAAU;AAAA,EACvC;AACD;;;AD9SO,SAAS,cAAc,UAAkB,SAAiB,SAAiB;AACjF,MAAI;AACH,UAAM,WAAW,IAAI,aAAa,OAAO;AACzC,UAAM,EAAE,IAAI,IAAI,SAAS,QAAQ;AAEjC,UAAM,SAAc,UAAK,SAAS,eAAe;AACjD,UAAM,eAAoB,cAAS,SAAS,QAAQ;AACpD,UAAM,aAAkB,UAAK,QAAQ,eAAe,OAAO;AAC3D,UAAM,YAAiB,aAAQ,UAAU;AAEzC,QAAI,CAAI,cAAW,SAAS,GAAG;AAC9B,MAAG,aAAU,WAAW,EAAE,WAAW,KAAK,CAAC;AAAA,IAC5C;AACA,IAAG,iBAAc,YAAY,GAAG;AAAA,EACjC,SAAS,GAAG;AACX,YAAQ,MAAM,uCAAuC,QAAQ,IAAI,CAAC;AAAA,EACnE;AACD;AAEO,SAAS,wBAAwB,KAAa,SAAiB;AACrE,MAAI,CAAI,cAAW,GAAG,EAAG;AACzB,QAAM,QAAW,eAAY,GAAG;AAChC,QAAM,QAAQ,CAAC,SAAS;AACvB,UAAM,WAAgB,UAAK,KAAK,IAAI;AACpC,QAAI,aAAkB,UAAK,SAAS,YAAY,EAAG;AACnD,QAAO,YAAS,QAAQ,EAAE,YAAY,GAAG;AACxC,UAAI,SAAS,kBAAkB,SAAS,UAAU,SAAS,UAAU,SAAS,WAAW;AACxF,gCAAwB,UAAU,OAAO;AAAA,MAC1C;AAAA,IACD,WAAW,KAAK,SAAS,OAAO,GAAG;AAClC,cAAQ,IAAI,wBAAwB,QAAQ;AAC5C,YAAM,UAAa,gBAAa,UAAU,OAAO;AACjD,oBAAc,UAAU,SAAS,OAAO;AAAA,IACzC;AAAA,EACD,CAAC;AACF;;;AEpCA,IAAM,OAAO,QAAQ,KAAK,MAAM,CAAC;AAEjC,IAAI,KAAK,SAAS,gBAAgB,GAAG;AACpC,QAAM,UAAU,QAAQ,IAAI;AAC5B,UAAQ,IAAI,4BAA4B;AACxC,0BAAwB,SAAS,OAAO;AACxC,UAAQ,IAAI,6BAA6B;AAC1C,OAAO;AACN,UAAQ,IAAI,kCAAkC;AAC/C;","names":[]}

package/dist/html-compiler/vite-plugin.d.ts

@@ -0,0 +1,14 @@
+declare function chispaHtmlPlugin(): {
+    name: string;
+    enforce: "pre";
+    configResolved(config: any): void;
+    buildStart(): void;
+    handleHotUpdate(ctx: {
+        file: string;
+        read: () => string | Promise<string>;
+    }): void;
+    resolveId(source: string, importer: string, options: any): Promise<string>;
+    load(id: string): string;
+};
+
+export { chispaHtmlPlugin };