@protomarkdown/parser 1.0.1 → 1.0.3

package/README.md

@@ -174,6 +174,15 @@ const code = generator.generate(nodes: MarkdownNode[]);
 
 **Returns:** Complete React component code as a string with necessary Shadcn UI imports
 
+### HtmlGenerator
+
+```ts
+const generator = new HtmlGenerator();
+const html = generator.generate(nodes: MarkdownNode[]);
+```
+
+**Returns:** HTML string for VS Code extension preview rendering
+
 ## Examples
 
 ### Login Form

package/dist/HtmlGenerator.d.ts

@@ -0,0 +1,35 @@
+import { MarkdownNode } from "./parser/types";
+/**
+ * Generates HTML from a Proto Markdown AST
+ * Used for VS Code extension preview rendering
+ */
+export declare class HtmlGenerator {
+    /**
+     * Generate HTML from markdown AST
+     */
+    generate(nodes: MarkdownNode[]): string;
+    private renderNode;
+    private renderHeader;
+    private renderText;
+    private renderBold;
+    private renderItalic;
+    private renderInlineNodes;
+    private renderInlineNode;
+    private renderInput;
+    private renderTextarea;
+    private renderCheckbox;
+    private renderRadioGroup;
+    private renderDropdown;
+    private renderButton;
+    private renderCard;
+    private renderContainer;
+    private renderGrid;
+    private renderDiv;
+    private renderTable;
+    private renderImage;
+    private renderWorkflow;
+    private renderScreen;
+    private parseGridConfig;
+    private escapeHtml;
+}
+//# sourceMappingURL=HtmlGenerator.d.ts.map

package/dist/HtmlGenerator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlGenerator.d.ts","sourceRoot":"","sources":["../src/HtmlGenerator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C;;;GAGG;AACH,qBAAa,aAAa;IACxB;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,MAAM;IAIvC,OAAO,CAAC,UAAU;IA2ClB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,gBAAgB;IAsBxB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,gBAAgB;IAoBxB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,WAAW;IAwBnB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,cAAc;IA+BtB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,UAAU;CAQnB"}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { MarkdownParser } from "./parser";
 export type { MarkdownNode } from "./parser/types";
 export { ShadcnCodeGenerator } from "./ShadcnCodeGenerator";
+export { HtmlGenerator } from "./HtmlGenerator";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.esm.js

@@ -151,6 +151,13 @@ class MarkdownParser {
                     break;
                 }
             }
+            // Check for table (line with pipes starting with |)
+            if (screenLine.includes("|") && screenLine.trim().startsWith("|")) {
+                const result = this.parseTable(lines, i, "]");
+                screenChildren.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
             // Check for nested card opening
             if (screenLine.match(/^\[--\s*(.*)$/)) {
                 const nestedTitle = screenLine.match(/^\[--\s*(.*)$/)?.[1] || undefined;
@@ -192,6 +199,48 @@ class MarkdownParser {
             nextIndex: i + 1,
         };
     }
+    parseTable(lines, startIndex, closingDelimiter) {
+        const line = this.options.preserveWhitespace ? lines[startIndex] : lines[startIndex].trim();
+        const headers = line
+            .split("|")
+            .map((h) => h.trim())
+            .filter((h) => h.length > 0);
+        let i = startIndex + 1;
+        // Skip separator line (|---|---|)
+        if (i < lines.length) {
+            const separatorLine = this.options.preserveWhitespace
+                ? lines[i]
+                : lines[i].trim();
+            if (separatorLine.includes("-") && separatorLine.includes("|")) {
+                i++;
+            }
+        }
+        // Parse table rows
+        const rows = [];
+        while (i < lines.length) {
+            const rowLine = this.options.preserveWhitespace
+                ? lines[i]
+                : lines[i].trim();
+            // Stop at closing delimiter or empty line or non-table line
+            if (!rowLine || !rowLine.includes("|") || (closingDelimiter && rowLine === closingDelimiter)) {
+                break;
+            }
+            const cells = rowLine
+                .split("|")
+                .map((c) => c.trim())
+                .filter((c) => c.length > 0);
+            rows.push(cells);
+            i++;
+        }
+        return {
+            node: {
+                type: "table",
+                headers,
+                rows,
+            },
+            nextIndex: i,
+        };
+    }
     parseCard(lines, startIndex, title) {
         const cardChildren = [];
         let i = startIndex + 1;
@@ -206,6 +255,13 @@ class MarkdownParser {
                     break;
                 }
             }
+            // Check for table (line with pipes starting with |)
+            if (cardLine.includes("|") && cardLine.trim().startsWith("|")) {
+                const result = this.parseTable(lines, i, "--]");
+                cardChildren.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
             // Check for nested card opening (must be before div check)
             if (cardLine.match(/^\[--\s*(.*)$/)) {
                 const nestedTitle = cardLine.match(/^\[--\s*(.*)$/)?.[1] || undefined;
@@ -261,6 +317,13 @@ class MarkdownParser {
                     break;
                 }
             }
+            // Check for table (line with pipes starting with |)
+            if (containerLine.includes("|") && containerLine.trim().startsWith("|")) {
+                const result = this.parseTable(lines, i, "]");
+                containerChildren.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
             // Check for nested card opening (must be before div check)
             if (containerLine.match(/^\[--\s*(.*)$/)) {
                 const nestedTitle = containerLine.match(/^\[--\s*(.*)$/)?.[1] || undefined;
@@ -1003,5 +1066,270 @@ ${this.indent()}</div>`;
     }
 }
 
-export { MarkdownParser, ShadcnCodeGenerator };
+/**
+ * Generates HTML from a Proto Markdown AST
+ * Used for VS Code extension preview rendering
+ */
+class HtmlGenerator {
+    /**
+     * Generate HTML from markdown AST
+     */
+    generate(nodes) {
+        return nodes.map((node) => this.renderNode(node)).join("\n");
+    }
+    renderNode(node) {
+        switch (node.type) {
+            case "header":
+                return this.renderHeader(node);
+            case "text":
+                return this.renderText(node);
+            case "bold":
+                return this.renderBold(node);
+            case "italic":
+                return this.renderItalic(node);
+            case "input":
+                return this.renderInput(node);
+            case "textarea":
+                return this.renderTextarea(node);
+            case "checkbox":
+                return this.renderCheckbox(node);
+            case "radiogroup":
+                return this.renderRadioGroup(node);
+            case "dropdown":
+                return this.renderDropdown(node);
+            case "button":
+                return this.renderButton(node);
+            case "card":
+                return this.renderCard(node);
+            case "container":
+                return this.renderContainer(node);
+            case "grid":
+                return this.renderGrid(node);
+            case "div":
+                return this.renderDiv(node);
+            case "table":
+                return this.renderTable(node);
+            case "image":
+                return this.renderImage(node);
+            case "workflow":
+                return this.renderWorkflow(node);
+            case "screen":
+                return this.renderScreen(node);
+            default:
+                return `<div class="proto-unknown">${JSON.stringify(node)}</div>`;
+        }
+    }
+    renderHeader(node) {
+        const level = node.level || 1;
+        let content;
+        if (node.children && node.children.length > 0) {
+            content = this.renderInlineNodes(node.children);
+        }
+        else {
+            content = this.escapeHtml(node.content || "");
+        }
+        return `<h${level} class="proto-header">${content}</h${level}>`;
+    }
+    renderText(node) {
+        if (node.children && node.children.length > 0) {
+            const content = this.renderInlineNodes(node.children);
+            return `<p class="proto-text">${content}</p>`;
+        }
+        return `<p class="proto-text">${this.escapeHtml(node.content || "")}</p>`;
+    }
+    renderBold(node) {
+        if (node.children && node.children.length > 0) {
+            return `<strong>${this.renderInlineNodes(node.children)}</strong>`;
+        }
+        return `<strong>${this.escapeHtml(node.content || "")}</strong>`;
+    }
+    renderItalic(node) {
+        if (node.children && node.children.length > 0) {
+            return `<em>${this.renderInlineNodes(node.children)}</em>`;
+        }
+        return `<em>${this.escapeHtml(node.content || "")}</em>`;
+    }
+    renderInlineNodes(nodes) {
+        return nodes.map((node) => this.renderInlineNode(node)).join("");
+    }
+    renderInlineNode(node) {
+        switch (node.type) {
+            case "bold":
+                if (node.children && node.children.length > 0) {
+                    return `<strong>${this.renderInlineNodes(node.children)}</strong>`;
+                }
+                return `<strong>${this.escapeHtml(node.content || "")}</strong>`;
+            case "italic":
+                if (node.children && node.children.length > 0) {
+                    return `<em>${this.renderInlineNodes(node.children)}</em>`;
+                }
+                return `<em>${this.escapeHtml(node.content || "")}</em>`;
+            case "text":
+                if (node.children && node.children.length > 0) {
+                    return this.renderInlineNodes(node.children);
+                }
+                return this.escapeHtml(node.content || "");
+            default:
+                return this.escapeHtml(node.content || "");
+        }
+    }
+    renderInput(node) {
+        const placeholder = node.inputType === "password" ? "••••••••" : "";
+        return `
+      <div class="proto-field">
+        <label class="proto-label">${this.escapeHtml(node.label || "")}</label>
+        <input type="${node.inputType || "text"}" class="proto-input" placeholder="${placeholder}" disabled />
+      </div>`;
+    }
+    renderTextarea(node) {
+        return `
+      <div class="proto-field">
+        <label class="proto-label">${this.escapeHtml(node.label || "")}</label>
+        <textarea class="proto-textarea" disabled></textarea>
+      </div>`;
+    }
+    renderCheckbox(node) {
+        return `
+      <div class="proto-checkbox">
+        <input type="checkbox" class="proto-checkbox-input" disabled />
+        <label class="proto-checkbox-label">${this.escapeHtml(node.label || "")}</label>
+      </div>`;
+    }
+    renderRadioGroup(node) {
+        const options = (node.options || [])
+            .map((opt) => `
+        <div class="proto-radio-option">
+          <input type="radio" class="proto-radio-input" name="${this.escapeHtml(node.label || "")}" disabled />
+          <label class="proto-radio-label">${this.escapeHtml(opt)}</label>
+        </div>`)
+            .join("");
+        return `
+      <div class="proto-radiogroup">
+        <label class="proto-label">${this.escapeHtml(node.label || "")}</label>
+        <div class="proto-radio-options">${options}</div>
+      </div>`;
+    }
+    renderDropdown(node) {
+        const options = (node.options || ["Select an option"])
+            .map((opt) => `<option>${this.escapeHtml(opt)}</option>`)
+            .join("");
+        return `
+      <div class="proto-field">
+        <label class="proto-label">${this.escapeHtml(node.label || "")}</label>
+        <select class="proto-select" disabled>${options}</select>
+      </div>`;
+    }
+    renderButton(node) {
+        const btnClass = node.variant === "default"
+            ? "proto-button-default"
+            : "proto-button-outline";
+        const navIndicator = node.navigateTo
+            ? ` <span class="proto-nav-indicator">→ ${this.escapeHtml(node.navigateTo)}</span>`
+            : "";
+        return `<button class="proto-button ${btnClass}" disabled>${this.escapeHtml(node.content || "")}${navIndicator}</button>`;
+    }
+    renderCard(node) {
+        let cardTitle = "";
+        if (node.titleChildren && node.titleChildren.length > 0) {
+            cardTitle = `<div class="proto-card-header">${this.renderInlineNodes(node.titleChildren)}</div>`;
+        }
+        else if (node.title) {
+            cardTitle = `<div class="proto-card-header">${this.escapeHtml(node.title)}</div>`;
+        }
+        const cardChildren = node.children ? this.generate(node.children) : "";
+        return `
+      <div class="proto-card">
+        ${cardTitle}
+        <div class="proto-card-content">${cardChildren}</div>
+      </div>`;
+    }
+    renderContainer(node) {
+        const children = node.children ? this.generate(node.children) : "";
+        return `<div class="proto-container">${children}</div>`;
+    }
+    renderGrid(node) {
+        const children = node.children ? this.generate(node.children) : "";
+        const gridConfig = this.parseGridConfig(node.gridConfig || "");
+        return `<div class="proto-grid" style="${gridConfig}">${children}</div>`;
+    }
+    renderDiv(node) {
+        const children = node.children ? this.generate(node.children) : "";
+        return `<div class="proto-div ${this.escapeHtml(node.className || "")}">${children}</div>`;
+    }
+    renderTable(node) {
+        const headerCells = (node.headers || [])
+            .map((h) => `<th class="proto-table-th">${this.escapeHtml(h)}</th>`)
+            .join("");
+        const bodyRows = (node.rows || [])
+            .map((row) => `<tr>${row
+            .map((cell) => `<td class="proto-table-td">${this.escapeHtml(cell)}</td>`)
+            .join("")}</tr>`)
+            .join("");
+        return `
+      <table class="proto-table">
+        <thead><tr>${headerCells}</tr></thead>
+        <tbody>${bodyRows}</tbody>
+      </table>`;
+    }
+    renderImage(node) {
+        return `<img class="proto-image" src="${this.escapeHtml(node.src || "")}" alt="${this.escapeHtml(node.alt || "")}" />`;
+    }
+    renderWorkflow(node) {
+        const screens = (node.children || [])
+            .map((screen, idx) => {
+            const isInitial = screen.id === node.initialScreen || idx === 0;
+            const screenContent = screen.children
+                ? this.generate(screen.children)
+                : "";
+            const screenId = screen.id || "";
+            return `
+          <div class="proto-screen${isInitial ? " proto-screen-active" : ""}" data-screen-id="${this.escapeHtml(screenId)}">
+            <div class="proto-screen-header">
+              <span class="proto-screen-badge">${this.escapeHtml(screenId)}</span>
+              ${isInitial
+                ? '<span class="proto-screen-initial">Initial</span>'
+                : ""}
+            </div>
+            <div class="proto-screen-content">${screenContent}</div>
+          </div>`;
+        })
+            .join("");
+        return `<div class="proto-workflow">${screens}</div>`;
+    }
+    renderScreen(node) {
+        const screenChildren = node.children ? this.generate(node.children) : "";
+        const screenId = node.id || "";
+        return `
+      <div class="proto-screen" data-screen-id="${this.escapeHtml(screenId)}">
+        <div class="proto-screen-header">
+          <span class="proto-screen-badge">${this.escapeHtml(screenId)}</span>
+        </div>
+        <div class="proto-screen-content">${screenChildren}</div>
+      </div>`;
+    }
+    parseGridConfig(config) {
+        const styles = [];
+        // Parse cols-N
+        const colsMatch = config.match(/cols-(\d+)/);
+        if (colsMatch) {
+            styles.push(`grid-template-columns: repeat(${colsMatch[1]}, 1fr)`);
+        }
+        // Parse gap-N
+        const gapMatch = config.match(/gap-(\d+)/);
+        if (gapMatch) {
+            styles.push(`gap: ${parseInt(gapMatch[1]) * 4}px`);
+        }
+        return styles.join("; ");
+    }
+    escapeHtml(text) {
+        return text
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
+}
+
+export { HtmlGenerator, MarkdownParser, ShadcnCodeGenerator };
 //# sourceMappingURL=index.esm.js.map