chispa 0.1.0

package/dist/html-compiler/vite-plugin.js

@@ -0,0 +1,335 @@
+// 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
+import * as fs from "fs";
+import * as path from "path";
+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/vite-plugin.ts
+import * as fs2 from "fs";
+function chispaHtmlPlugin() {
+  let rootDir = process.cwd();
+  return {
+    name: "chispa-html",
+    enforce: "pre",
+    configResolved(config) {
+      rootDir = config.root;
+    },
+    buildStart() {
+      findAndCompileHtmlFiles(rootDir, rootDir);
+    },
+    handleHotUpdate(ctx) {
+      if (ctx.file.endsWith(".html")) {
+        Promise.resolve(ctx.read()).then((content) => generateTypes(ctx.file, content, rootDir));
+      }
+    },
+    async resolveId(source, importer, options) {
+      if (source.endsWith(".html") && importer) {
+        const resolution = await this.resolve(source, importer, { skipSelf: true, ...options });
+        if (resolution && !resolution.external) {
+          return resolution.id + ".chispa.ts";
+        }
+      }
+      return null;
+    },
+    load(id) {
+      if (id.endsWith(".html.chispa.ts")) {
+        const realId = id.replace(".chispa.ts", "");
+        try {
+          const content = fs2.readFileSync(realId, "utf-8");
+          if (content.includes("<!DOCTYPE html>") || content.includes("<html")) {
+            return null;
+          }
+          const compiler = new HtmlCompiler(content);
+          const { js } = compiler.compile();
+          generateTypes(realId, content, rootDir);
+          return js;
+        } catch (e) {
+          return null;
+        }
+      }
+    }
+  };
+}
+export {
+  chispaHtmlPlugin
+};
+//# sourceMappingURL=vite-plugin.js.map

package/dist/html-compiler/vite-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/html-compiler/html-compiler.ts","../../src/html-compiler/generator.ts","../../src/html-compiler/vite-plugin.ts"],"sourcesContent":["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","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 { HtmlCompiler } from './html-compiler';\nimport { generateTypes, findAndCompileHtmlFiles } from './generator';\nimport * as fs from 'fs';\n\nexport function chispaHtmlPlugin() {\n\tlet rootDir = process.cwd();\n\n\treturn {\n\t\tname: 'chispa-html',\n\t\tenforce: 'pre' as 'pre',\n\t\tconfigResolved(config: any) {\n\t\t\trootDir = config.root;\n\t\t},\n\t\tbuildStart() {\n\t\t\tfindAndCompileHtmlFiles(rootDir, rootDir);\n\t\t},\n\t\thandleHotUpdate(ctx: { file: string; read: () => string | Promise<string> }) {\n\t\t\tif (ctx.file.endsWith('.html')) {\n\t\t\t\tPromise.resolve(ctx.read()).then((content) => generateTypes(ctx.file, content, rootDir));\n\t\t\t}\n\t\t},\n\t\tasync resolveId(source: string, importer: string, options: any) {\n\t\t\tif (source.endsWith('.html') && importer) {\n\t\t\t\tconst resolution = await this.resolve(source, importer, { skipSelf: true, ...options });\n\t\t\t\tif (resolution && !resolution.external) {\n\t\t\t\t\treturn resolution.id + '.chispa.ts';\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null;\n\t\t},\n\t\tload(id: string) {\n\t\t\tif (id.endsWith('.html.chispa.ts')) {\n\t\t\t\tconst realId = id.replace('.chispa.ts', '');\n\t\t\t\ttry {\n\t\t\t\t\tconst content = fs.readFileSync(realId, 'utf-8');\n\t\t\t\t\tif (content.includes('<!DOCTYPE html>') || content.includes('<html')) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst compiler = new HtmlCompiler(content);\n\t\t\t\t\tconst { js } = compiler.compile();\n\t\t\t\t\tgenerateTypes(realId, content, rootDir);\n\t\t\t\t\treturn js;\n\t\t\t\t} catch (e) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t};\n}\n"],"mappings":"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","names":["fs"]}

package/dist/index.d.ts

@@ -0,0 +1,150 @@
+type TExecutionProcess = 'createComponent' | 'computed' | 'addReactivity';
+interface IDisposable {
+    dispose: () => void;
+}
+declare class AppContext {
+    private reactivityContextStack;
+    private refreshTimeout;
+    private dirtyReactivities;
+    private executionStack;
+    private componentStack;
+    pushComponentStack(cmp: Component | ComponentList): void;
+    popComponentStack(): void;
+    getCurrentComponent(): Component<any> | ComponentList<any>;
+    setCurrentReactivityContext(context: Reactivity): void;
+    restorePreviousReactivityContext(): void;
+    getCurrentRenderContext(): Reactivity;
+    scheduleRefresh(): void;
+    addReactivity(executor: () => void): Reactivity;
+    createRoot(component: () => Component, mountPoint: HTMLElement): void;
+    canReadSignal(): boolean;
+    pushExecutionStack(type: TExecutionProcess): void;
+    popExecutionStack(): void;
+    addDirtyContext(ctx: Reactivity): void;
+    removeDirtyContext(ctx: Reactivity): void;
+}
+declare class Reactivity implements IDisposable {
+    private readonly action;
+    private dirty;
+    private signals;
+    constructor(action: () => void);
+    markDirty(): void;
+    addSignal(signal: Signal<any>): void;
+    removeSignal(signal: Signal<any>): void;
+    process(): void;
+    exec(): void;
+    dispose(): void;
+}
+declare const globalContext: AppContext;
+
+type TProps = Record<string, Signal<any>>;
+type TDict = Record<string, any>;
+type WithSignals<T> = {
+    [K in keyof T]: Signal<T[K]>;
+};
+type TComponentFactory<T extends TDict> = ((props: WithSignals<T>) => Node) | (() => Node);
+declare class Component<T = any> {
+    private readonly factoryFn;
+    readonly key: any;
+    readonly props: WithSignals<T>;
+    onUnmount: (() => void) | null;
+    nodes: Node[] | null;
+    private container;
+    private anchor;
+    disposables: IDisposable[];
+    silent: boolean;
+    constructor(factoryFn: TComponentFactory<T>, key?: any, props?: WithSignals<T>);
+    mount(container: Node, anchor: Node): void;
+    reanchor(anchor: Node | null): void;
+    private insertNodes;
+    unmount(): void;
+}
+declare function component<T extends Record<string, any>>(factory: TComponentFactory<T>): (props?: WithSignals<T>) => Component<T>;
+type ItemFactoryFn<T> = (item: Signal<T>, index: Signal<number>, list: WritableSignal<T[]>) => Node;
+type KeyFn<T> = (item: T, index: number) => any;
+declare class ComponentList<T = any> {
+    private readonly itemFactoryFn;
+    private readonly keyFn;
+    private readonly itemsSignal;
+    private readonly components;
+    private container;
+    private anchor;
+    private currentKeys;
+    disposables: any[];
+    constructor(itemFactoryFn: ItemFactoryFn<T>, keyFn: KeyFn<T>, itemsSignal: WritableSignal<T[]>);
+    /**
+     * Obtiene todos los componentes
+     */
+    private getAllComponents;
+    /**
+     * Limpia todos los componentes
+     */
+    private clear;
+    /**
+     * Elimina un componente completo
+     */
+    private removeComponent;
+    /**
+     * Crea un nuevo componente
+     */
+    private createNewComponent;
+    private getTargetAnchor;
+    /**
+     * Función principal que sincroniza los componentes DOM con un array de keys
+     */
+    private synchronizeComponents;
+    mount(container: Node, anchor: Node): void;
+    unmount(): void;
+}
+declare function componentList<T>(itemFactoryFn: ItemFactoryFn<T>, keyFn: KeyFn<T>): (listSignal: WritableSignal<T[]>) => ComponentList<T>;
+
+declare abstract class Signal<T> {
+    protected abstract value: T;
+    protected contexts: Set<Reactivity>;
+    constructor();
+    get(): T;
+    readonly computed: WithSignals<T>;
+    removeContext(ctx: Reactivity): void;
+    dispose(): void;
+}
+declare class WritableSignal<T> extends Signal<T> {
+    protected value: T;
+    readonly initialValue: T;
+    constructor(initialValue: T);
+    set(newValue: T): void;
+    update(updater: (value: T) => T): void;
+}
+declare function isSignal(value: any): value is Signal<any>;
+declare function signal<T>(initialValue: T): WritableSignal<T>;
+declare function computed<T>(fn: () => T): Signal<T>;
+
+type TClasses = Record<string, boolean>;
+type TNode = string | number | Node | null;
+type TContent = TNode | TNode[] | Component | ComponentList | Signal<TNode | TNode[] | Component | ComponentList>;
+type TCSSPropertiesStrings = {
+    [K in keyof CSSStyleDeclaration]?: string | Signal<string>;
+};
+type AllowSignals<T> = {
+    [K in keyof T]: T[K] | Signal<T[K]>;
+};
+type TItemBuilderBaseProps<T> = AllowSignals<Omit<Partial<T>, 'style' | 'dataset'>>;
+interface IItemBuilderAdditionalProps<T, TItems> {
+    addClass?: string;
+    classes?: TClasses;
+    items?: TItems;
+    inner?: TContent;
+    style?: TCSSPropertiesStrings;
+    dataset?: Record<string, string>;
+    _ref?: (node: T) => void | {
+        current: T | null;
+    };
+}
+type TItemBuilderProps<T, TItems> = TItemBuilderBaseProps<T> & IItemBuilderAdditionalProps<T, TItems>;
+declare function buildClass(literalValue: string, additionalValue?: string, classes?: TClasses): string;
+declare function getValidProps(props: any): any;
+declare function getItem<T>(Components: T, items: any, itemName: keyof T): any;
+declare function setAttributes(node: Element, attributes: Record<string, string>): void;
+declare function setProps<T extends Element>(node: T, props: any): void;
+declare function appendChild(node: Element | DocumentFragment, child: TContent): void;
+
+export { Signal, type TContent, type TItemBuilderProps, type TProps, appendChild, buildClass, component, componentList, computed, getItem, getValidProps, globalContext, isSignal, setAttributes, setProps, signal };