auwla-markdown 0.0.1

package/tests/engine.test.ts

@@ -0,0 +1,173 @@
+import { expect, test, describe } from "bun:test";
+import { createMDConfig } from "../src/index";
+
+describe("Markdown Engine - Component Tags", () => {
+  test("parses markdown to HTML", async () => {
+    const engine = createMDConfig();
+    const result = await engine.parse("=<h1>Hello=</h1>\n\nWorld");
+    expect(result.html.trim()).toBe('<h1 id="hello">Hello</h1><p>World</p>');
+  });
+
+  test("extracts `=<Header>` metadata block and strips it from body HTML", async () => {
+    const engine = createMDConfig();
+    const md = `=<Header>
+title: My Title
+featured: true
+score: 9.8
+=</Header>
+=<h1>Content=</h1>`;
+    const result = await engine.parse(md);
+    expect(result.meta).toEqual({
+      title: "My Title",
+      featured: true,
+      score: 9.8,
+    });
+    expect(result.html.trim()).toBe('<h1 id="content">Content</h1>');
+  });
+
+  test("extracts custom heading tags for table of contents", async () => {
+    const engine = createMDConfig();
+    const md = `=<h1>Title=</h1>\n\nSome text\n\n=<h2>Subtitle=</h2>\n\n=<h3>Detailed Subtitle=</h3>`;
+    const result = await engine.parse(md);
+    expect(result.headings).toEqual([
+      { level: 1, text: "Title", id: "title" },
+      { level: 2, text: "Subtitle", id: "subtitle" },
+      { level: 3, text: "Detailed Subtitle", id: "detailed-subtitle" },
+    ]);
+  });
+
+  test("injects copy code button", async () => {
+    const engine = createMDConfig({
+      features: {
+        copyCodeButton: true,
+      },
+    });
+    const result = await engine.parse("```ts\nconst a = 1;\n```");
+    expect(result.html).toContain('class="copy-code-btn"');
+    expect(result.html).toContain('navigator.clipboard.writeText');
+  });
+
+  test("renders default Callout component tag", async () => {
+    const engine = createMDConfig();
+    const result = await engine.parse("=<Callout type=\"tip\" title=\"Pro Tip\">\nHello Component\n=</Callout>");
+    expect(result.html.trim()).toContain('<div class="callout callout-tip">');
+    expect(result.html.trim()).toContain('<div class="callout-title">Pro Tip</div>');
+    expect(result.html.trim()).toContain('<p>Hello Component</p>');
+  });
+
+  test("renders default collapsible Callout component tag using details/summary", async () => {
+    const engine = createMDConfig();
+    const result = await engine.parse("=<Callout type=\"warning\" title=\"Collapse Me\" collapsible=\"true\">\nCollapsible content\n=</Callout>");
+    expect(result.html.trim()).toContain('<details class="callout callout-warning" open>');
+    expect(result.html.trim()).toContain('<summary class="callout-title">Collapse Me</summary>');
+    expect(result.html.trim()).toContain('<p>Collapsible content</p>');
+  });
+
+  test("allows custom components to override default Callout component tag", async () => {
+    const engine = createMDConfig({
+      components: {
+        Callout: (props, rawContent, parse) => {
+          return `<section class="custom-user-callout"><h4>${props.title}</h4></section>`;
+        }
+      }
+    });
+    const result = await engine.parse("=<Callout title=\"Custom Overridden Callout\">\nContent\n=</Callout>");
+    expect(result.html.trim()).toBe('<section class="custom-user-callout"><h4>Custom Overridden Callout</h4></section>');
+  });
+
+  test("merges custom class names onto Callout and Tabs components", async () => {
+    const engine = createMDConfig();
+    const md = `=<Callout type="note" class="my-custom-callout-class">
+Hello
+=</Callout>
+=<Tabs class="my-custom-tabs-class">
+  =<Tab title="Tab 1" class="my-custom-tab-panel-class">
+    Tab Content
+  =</Tab>
+=</Tabs>`;
+    const result = await engine.parse(md);
+    expect(result.html.trim()).toContain('class="callout callout-note my-custom-callout-class"');
+    expect(result.html.trim()).toContain('class="tabs-container my-custom-tabs-class"');
+    expect(result.html.trim()).toContain('class="tab-panel my-custom-tab-panel-class active"');
+  });
+
+  test("forwards custom HTML attributes style and colspan on Table tags", async () => {
+    const engine = createMDConfig();
+    const md = `=<Table style="color: red;">
+  =<Row class="my-row-class">
+    =<Column colspan="2">Double Header=</Column>
+  =</Row>
+=</Table>`;
+    const result = await engine.parse(md);
+    expect(result.html.trim()).toContain('<table class="auwla-table" style="color: red;">');
+    expect(result.html.trim()).toContain('<tr class="my-row-class">');
+    expect(result.html.trim()).toContain('<th colspan="2">Double Header</th>');
+  });
+
+  test("injects header anchors to custom heading tags", async () => {
+    const engine = createMDConfig({
+      features: {
+        headerAnchors: true,
+      },
+    });
+    const result = await engine.parse("=<h1>Getting Started=</h1>");
+    expect(result.html.trim()).toBe('<h1 id="getting-started"><a href="#getting-started" class="header-anchor" aria-hidden="true">#</a>Getting Started</h1>');
+  });
+
+  test("renders default Tabs & Tab component tags", async () => {
+    const engine = createMDConfig();
+    const md = `=<Tabs>
+  =<Tab title=\"Panel 1\">
+    Content 1
+  =</Tab>
+  =<Tab title=\"Panel 2\">
+    Content 2
+  =</Tab>
+=</Tabs>`;
+
+    const result = await engine.parse(md);
+    expect(result.html.trim()).toContain('<div class="tabs-container">');
+    expect(result.html.trim()).toContain('Panel 1');
+    expect(result.html.trim()).toContain('Panel 2');
+    expect(result.html.trim()).toContain('Content 1');
+    expect(result.html.trim()).toContain('Content 2');
+  });
+
+  test("renders custom registered component tags", async () => {
+    const engine = createMDConfig({
+      components: {
+        MyCard: (props, rawContent, parse) => {
+          return `<div class="card ${props.theme || 'light'}"><h3>${props.title}</h3><div class="body">${rawContent.trim()}</div></div>`;
+        }
+      }
+    });
+
+    const result = await engine.parse("=<MyCard title=\"Super Card\" theme=\"dark\">\nThis is raw content\n=</MyCard>");
+    expect(result.html.trim()).toBe('<div class="card dark"><h3>Super Card</h3><div class="body">This is raw content</div></div>');
+  });
+
+  test("fallback parsing for unregistered standard HTML tags", async () => {
+    const engine = createMDConfig();
+    const result = await engine.parse("=<h1 class=\"main-title\">\nHello *World*\n=</h1>");
+    // Standard h1 tag will get parsed children inline, avoiding double h1/p nesting
+    expect(result.html.trim()).toBe('<h1 id="hello-world" class="main-title">Hello <em>World</em></h1>');
+  });
+
+  test("renders built-in Table components", async () => {
+    const engine = createMDConfig();
+    const md = `=<Table>
+  =<Row>
+    =<Column>Name=</Column>
+    =<Column>Role=</Column>
+  =</Row>
+  =<Row>
+    =<Cell>Alice=</Cell>
+    =<Cell>Admin=</Cell>
+  =</Row>
+=</Table>`;
+    const result = await engine.parse(md);
+    expect(result.html.trim()).toContain('<table class="auwla-table">');
+    expect(result.html.trim()).toContain('<tr><th>Name</th>\n<th>Role</th></tr>');
+    expect(result.html.trim()).toContain('<tr><td>Alice</td>\n<td>Admin</td></tr>');
+  });
+});

package/tests/fixtures/sample.md

@@ -0,0 +1,159 @@
+=<Header>
+title: Premium Documentation Guide
+author: Amihere Theophilus Junior
+version: 1.0.0
+draft: false
+=</Header>
+
+=<h1 class="main-doc-title">Getting Started with Auwla Markdown=</h1>
+
+Welcome to the premium documentation page compiled dynamically at build time!
+
+Here is a list of features supported by the `@auwla/markdown` engine.
+
+=<h2>Built-in UI Elements=</h2>
+
+=<h3>1. Interactive Callout Panels=</h3>
+We support visual callout cards for highlight categories:
+
+=<Callout type="note">
+This is a standard informational note block. It is rendered using standard paragraphs and can contain **bold** or *italic* markdown tags.
+=</Callout>
+
+=<Callout type="tip" title="Compiler-First Tip" collapsible>
+Here is a compiler-first tip! Always remember that wrapping your pages in a single root tag yields highly optimized DOM updates.
+=</Callout>
+
+=<Callout type="warning" title="Danger Zone">
+Warning! Do not edit compiled output assets directly inside the `dist/` directory, as they are overwritten on each build.
+=</Callout>
+
+=<h3>2. Tab Selection Panels=</h3>
+Tab sections can toggle between multiple content blocks (e.g. installation options or code syntaxes) using native, zero-dependency client togglers:
+
+=<Tabs>
+  =<Tab title="TSX Component">
+```tsx [Counter.tsx] {7-9}
+import { reactive } from 'auwla';
+
+export default function Counter() {
+  const count = reactive(0);
+  
+  return () => (
+    <button onClick={() => count.set(c => c + 1)}>
+      Count is: {count.get()}
+    </button>
+  );
+}
+```
+  =</Tab>
+
+  =<Tab title="TypeScript">
+```ts [auth.ts] {2,7}
+interface User {
+  id: string;
+  role: 'admin' | 'user';
+}
+
+export function isAdmin(user: User): boolean {
+  return user.role === 'admin';
+}
+```
+  =</Tab>
+
+  =<Tab title="Bash CLI">
+```bash
+bun install @auwla/markdown
+```
+  =</Tab>
+=</Tabs>
+
+=<h2>Component Tables=</h2>
+
+Below is a component-driven Table rendered using `=<Table>` and `=<Row>` tags:
+
+=<Table border="1">
+  =<Row>
+    =<Column>Framework=</Column>
+    =<Column>Size=</Column>
+  =</Row>
+  =<Row>
+    =<Cell>**Auwla**=</Cell>
+    =<Cell>~7 kB=</Cell>
+  =</Row>
+  =<Row>
+    =<Cell>**Next.js**=</Cell>
+    =<Cell>~100 kB=</Cell>
+  =</Row>
+=</Table>
+
+=<h2>Stress-Test Scenarios=</h2>
+
+Below we test edge cases, deep nesting, and complex attribute combinations.
+
+=<h3>A. Deeply Nested Component Architecture=</h3>
+
+Here is a collapsible Callout containing a Tab layout, which inside one of its tab panels contains another nested collapsible Callout and a custom Table:
+
+=<Callout type="note" title="Outer Container Callout" collapsible class="outer-class" style="border: 2px dashed #3b82f6; padding: 1.5rem;">
+This is the outer callout card. Below is the nested tabs layout:
+
+=<Tabs class="nested-tabs">
+  =<Tab title="Overview Panel" class="overview-tab">
+#### Overview of Nested Elements
+
+Here is an inner Callout nested inside the tab panel:
+
+=<Callout type="tip" title="Inner Nested Callout" collapsible collapsed="true" class="inner-tip-class" style="background-color: #1e293b; border: 1px solid #10b981;">
+This callout is inside a tab panel, which is inside an outer callout.
+
+* Nested list item 1
+* Nested list item 2
+=</Callout>
+  =</Tab>
+
+  =<Tab title="Advanced Table Panel">
+Here is a Table nested inside the second tab panel, with custom cell properties:
+
+=<Table class="nested-table" style="color: #cbd5e1; border-color: #475569;">
+  =<Row class="header-row">
+    =<Column colspan="2" style="background-color: #0f172a;">Nested Table Header (Span 2 Columns)=</Column>
+  =</Row>
+  =<Row>
+    =<Cell class="feature-cell">Feature Name=</Cell>
+    =<Cell class="value-cell">**SSG Compilation**=</Cell>
+  =</Row>
+  =<Row>
+    =<Cell>Performance=</Cell>
+    =<Cell>`100/100` Lighthouse score=</Cell>
+  =</Row>
+=</Table>
+  =</Tab>
+=</Tabs>
+=</Callout>
+
+=<h3>B. Self-Closing Tags & Spaces Tolerance=</h3>
+
+We test empty, self-closing, and single-line elements:
+
+=<Callout type="caution" title="Empty Self-Closing Callout" />
+
+=<Table border="1" class="empty-table-test">
+  =<Row>
+    =<Column>Col 1=</Column>
+    =<Column>Col 2=</Column>
+  =</Row>
+  =<Row>
+    =<Cell>=</Cell>
+    =<Cell>=</Cell>
+  =</Row>
+=</Table>
+
+Testing space tolerance and quotes combinations in tag attributes:
+
+=<Callout type = "tip" title = 'Space Tolerant Attribute Matching' collapsible >
+This callout tests spaces around equals and quotes.
+=</Callout>
+
+---
+Enjoy building documentation with Auwla!

package/tests/live-test.ts

@@ -0,0 +1,239 @@
+import { createMDConfig, shikiHighlighter } from '../src/index';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+async function runLiveTest() {
+  const currentDir = import.meta.dir;
+  const fixturePath = path.resolve(currentDir, 'fixtures', 'sample.md');
+  const outputDir = path.resolve(currentDir, 'output');
+
+  console.log(`[live-test] Loading test fixture from: ${fixturePath}`);
+
+  if (!fs.existsSync(fixturePath)) {
+    console.error(`[live-test] Error: Fixture sample.md not found!`);
+    process.exit(1);
+  }
+
+  const rawMarkdown = fs.readFileSync(fixturePath, 'utf-8');
+
+  // Create the engine with all features enabled
+  const engine = createMDConfig({
+    highlighter: shikiHighlighter({
+      theme: 'github-dark',
+      langs: ['typescript', 'tsx', 'javascript', 'jsx', 'bash', 'html', 'css', 'rust']
+    }),
+    features: {
+      copyCodeButton: true,
+      headerAnchors: true
+    }
+  });
+
+  console.log('[live-test] Compiling markdown document...');
+  const result = await engine.parse(rawMarkdown);
+
+  // Ensure output directory exists
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  const htmlOutputPath = path.resolve(outputDir, 'sample.html');
+  const jsonOutputPath = path.resolve(outputDir, 'sample.json');
+
+  // Inject a stylesheet and structural layout in the output HTML so it's readable
+  const completeHtml = `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Auwla Markdown Live Output</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.6;
+      color: #e2e8f0;
+      background-color: #0f172a;
+      max-width: 800px;
+      margin: 2rem auto;
+      padding: 0 1rem;
+    }
+    h1, h2, h3 {
+      color: #f1f5f9;
+      border-bottom: 1px solid #334155;
+      padding-bottom: 0.3rem;
+    }
+    .header-anchor {
+      color: #64748b;
+      text-decoration: none;
+      margin-right: 0.5rem;
+      opacity: 0.5;
+    }
+    .header-anchor:hover {
+      opacity: 1;
+    }
+    .callout {
+      margin: 1.5rem 0;
+      padding: 1rem;
+      border-left: 4px solid;
+      border-radius: 0.25rem;
+      background-color: #1e293b;
+    }
+    .callout-note { border-left-color: #3b82f6; }
+    .callout-tip { border-left-color: #10b981; }
+    .callout-warning { border-left-color: #f59e0b; }
+    .callout-title, details.callout summary {
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+      font-size: 0.875rem;
+      letter-spacing: 0.05em;
+      cursor: pointer;
+      outline: none;
+      user-select: none;
+    }
+    details.callout summary:hover {
+      color: #3b82f6;
+    }
+    .tabs-container {
+      margin: 1.5rem 0;
+      border: 1px solid #334155;
+      border-radius: 0.5rem;
+      background-color: #24292e;
+      overflow: hidden;
+    }
+    .tabs-header {
+      display: flex;
+      background-color: #1b1f23;
+      border-bottom: 1px solid #334155;
+    }
+    .tab-btn {
+      padding: 0.75rem 1.25rem;
+      border: none;
+      background: none;
+      color: #94a3b8;
+      font-weight: 500;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: all 0.2s;
+    }
+    .tab-btn:hover {
+      color: #f1f5f9;
+      background-color: #24292e;
+    }
+    .tab-btn.active {
+      color: #3b82f6;
+      border-bottom-color: #3b82f6;
+      background-color: #24292e;
+    }
+    .tab-panel {
+      padding: 0;
+    }
+    .tab-panel .code-block-wrapper pre {
+      margin: 0;
+      border: none;
+      border-radius: 0;
+    }
+    .code-block-filename {
+      background-color: #1b1f23;
+      color: #94a3b8;
+      padding: 0.5rem 1rem;
+      font-size: 0.8rem;
+      font-weight: 500;
+      border-bottom: 1px solid #334155;
+      font-family: Consolas, Monaco, monospace;
+    }
+    .highlighted-line {
+      background-color: #2e3b4e;
+      display: block;
+      margin-left: -1rem;
+      margin-right: -1rem;
+      padding-left: 0.8rem;
+      padding-right: 1rem;
+      border-left: 4px solid #3b82f6;
+    }
+    pre {
+      background-color: #0f172a;
+      padding: 1rem;
+      border-radius: 0.375rem;
+      overflow-x: auto;
+      border: 1px solid #334155;
+    }
+    code {
+      font-family: Consolas, Monaco, "Andale Mono", monospace;
+      color: #e2e8f0;
+    }
+    .copy-code-btn {
+      background-color: #334155;
+      color: #f1f5f9;
+      border: none;
+      padding: 0.25rem 0.5rem;
+      font-size: 0.75rem;
+      border-radius: 0.25rem;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
+    .copy-code-btn:hover {
+      background-color: #475569;
+    }
+    .auwla-header {
+      background-color: #1e293b;
+      border: 1px solid #334155;
+      padding: 1rem 1.5rem;
+      margin-bottom: 2rem;
+      border-radius: 0.5rem;
+      display: flex;
+      align-items: center;
+    }
+    .auwla-header span {
+      font-size: 1.25rem;
+      font-weight: 700;
+      color: #f8fafc;
+    }
+    .auwla-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 1.5rem 0;
+      border: 1px solid #334155;
+      border-radius: 0.5rem;
+      overflow: hidden;
+    }
+    .auwla-table th {
+      background-color: #1b1f23;
+      color: #f1f5f9;
+      padding: 0.75rem 1rem;
+      font-weight: 600;
+      border-bottom: 1px solid #334155;
+    }
+    .auwla-table td {
+      padding: 0.75rem 1rem;
+      color: #cbd5e1;
+      border-bottom: 1px solid #334155;
+    }
+    .auwla-table tr:last-child td {
+      border-bottom: none;
+    }
+  </style>
+</head>
+<body>
+  <div style="margin-bottom: 2rem;">
+    <a href="./sample.json" target="_blank" style="color: #3b82f6; text-decoration: none;">View Parsed JSON Metadata (TOC & Frontmatter)</a>
+  </div>
+  
+  <!-- Compiled Output -->
+  ${result.html}
+</body>
+</html>
+`;
+
+  fs.writeFileSync(htmlOutputPath, completeHtml, 'utf-8');
+
+  const metaOutput = {
+    meta: result.meta,
+    headings: result.headings
+  };
+  fs.writeFileSync(jsonOutputPath, JSON.stringify(metaOutput, null, 2), 'utf-8');
+
+  console.log(`[live-test] Success! Compiled files generated successfully:`);
+  console.log(`  - HTML output: ${htmlOutputPath}`);
+  console.log(`  - JSON metadata: ${jsonOutputPath}`);
+}
+
+runLiveTest().catch(console.error);