@leadertechie/md2html 0.1.0-alpha.0 → 0.1.0-alpha.3

package/__tests__/index.test.js

@@ -1,130 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { MarkdownParser } from '../src/parser';
-import { HTMLRenderer } from '../src/renderer';
-import { MarkdownPipeline } from '../src/pipeline';
-describe('MarkdownParser', () => {
-    let parser;
-    beforeEach(() => {
-        parser = new MarkdownParser();
-    });
-    describe('parse', () => {
-        it('should parse heading', () => {
-            const result = parser.parse('# Hello World');
-            expect(result.content).toHaveLength(1);
-            expect(result.content[0].type).toBe('heading');
-            expect(result.content[0].content).toBe('Hello World');
-        });
-        it('should parse multiple headings', () => {
-            const result = parser.parse('# Heading 1\n## Heading 2\n### Heading 3');
-            expect(result.content).toHaveLength(3);
-            expect(result.content[0].type).toBe('heading');
-        });
-        it('should parse paragraph', () => {
-            const result = parser.parse('This is a paragraph');
-            expect(result.content).toHaveLength(1);
-            expect(result.content[0].type).toBe('paragraph');
-        });
-        it('should parse list items', () => {
-            const result = parser.parse('- Item 1\n- Item 2\n- Item 3');
-            expect(result.content).toHaveLength(1);
-            expect(result.content[0].type).toBe('list');
-            expect(result.content[0].children).toHaveLength(3);
-        });
-        it('should parse image in paragraph', () => {
-            const result = parser.parse('![Alt text](image.jpg)');
-            expect(result.content).toHaveLength(1);
-            expect(result.content[0].type).toBe('paragraph');
-            expect(result.content[0].children?.[0].type).toBe('image');
-        });
-        it('should parse code block', () => {
-            const result = parser.parse('```javascript\nconst x = 1;\n```');
-            expect(result.content).toHaveLength(1);
-            expect(result.content[0].type).toBe('code');
-        });
-        it('should handle image path prefix', () => {
-            const parserWithPrefix = new MarkdownParser({ imagePathPrefix: 'images/' });
-            const result = parserWithPrefix.parse('![Alt](photo.jpg)');
-            expect(result.content[0].children?.[0].src).toBe('images/photo.jpg');
-        });
-        it('should handle imageBaseUrl', () => {
-            const parserWithBaseUrl = new MarkdownParser({ imageBaseUrl: 'https://cdn.example.com/' });
-            const result = parserWithBaseUrl.parse('![Alt](photo.jpg)');
-            expect(result.content[0].children?.[0].src).toBe('https://cdn.example.com/photo.jpg');
-        });
-    });
-});
-describe('HTMLRenderer', () => {
-    let renderer;
-    beforeEach(() => {
-        renderer = new HTMLRenderer();
-    });
-    describe('renderNode', () => {
-        it('should render heading', () => {
-            const node = { type: 'heading', content: 'Hello', attributes: { level: '1' } };
-            const html = renderer.renderNode(node);
-            expect(html).toBe('<h1>Hello</h1>');
-        });
-        it('should render paragraph', () => {
-            const node = { type: 'paragraph', content: 'Hello world' };
-            const html = renderer.renderNode(node);
-            expect(html).toBe('<p>Hello world</p>');
-        });
-        it('should render image', () => {
-            const node = { type: 'image', src: 'image.jpg', alt: 'Alt text' };
-            const html = renderer.renderNode(node);
-            expect(html).toBe('<img src="image.jpg" alt="Alt text" class="">');
-        });
-    });
-    describe('renderNodes', () => {
-        it('should render multiple nodes', () => {
-            const nodes = [
-                { type: 'heading', content: 'Title', attributes: { level: '1' } },
-                { type: 'paragraph', content: 'Content' }
-            ];
-            const html = renderer.renderNodes(nodes);
-            expect(html).toContain('<h1>Title</h1>');
-            expect(html).toContain('<p>Content</p>');
-        });
-        it('should handle empty array', () => {
-            const html = renderer.renderNodes([]);
-            expect(html).toBe('');
-        });
-    });
-});
-describe('MarkdownPipeline', () => {
-    let pipeline;
-    beforeEach(() => {
-        pipeline = new MarkdownPipeline();
-    });
-    describe('parse', () => {
-        it('should parse markdown to nodes', () => {
-            const nodes = pipeline.parse('# Hello');
-            expect(nodes).toHaveLength(1);
-            expect(nodes[0].type).toBe('heading');
-        });
-    });
-    describe('renderMarkdown', () => {
-        it('should parse and render in one call', () => {
-            const html = pipeline.renderMarkdown('# Hello World\n\nThis is a paragraph.');
-            expect(html).toContain('<h1>Hello World</h1>');
-            expect(html).toContain('<p>This is a paragraph.</p>');
-        });
-    });
-    describe('renderPage', () => {
-        it('should render full HTML page', () => {
-            const nodes = [
-                { type: 'heading', content: 'Title', attributes: { level: '1' } }
-            ];
-            const page = pipeline.renderPage('My Page', nodes);
-            expect(page).toContain('<!DOCTYPE html>');
-            expect(page).toContain('<title>My Page</title>');
-        });
-    });
-    describe('configuration', () => {
-        it('should use imagePathPrefix config', () => {
-            const pipelineWithConfig = new MarkdownPipeline({ imagePathPrefix: 'images/' });
-            const nodes = pipelineWithConfig.parse('![img](test.jpg)');
-            expect(nodes[0].children?.[0].src).toBe('images/test.jpg');
-        });
-    });
-});

package/__tests__/index.test.ts

@@ -1,155 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { MarkdownParser } from '../src/parser';
-import { HTMLRenderer } from '../src/renderer';
-import { LitRenderer } from '../src/lit-renderer';
-import { MarkdownPipeline } from '../src/pipeline';
-import type { ContentNode } from '../src/types';
-
-describe('MarkdownParser', () => {
-  let parser: MarkdownParser;
-
-  beforeEach(() => {
-    parser = new MarkdownParser();
-  });
-
-  describe('parse', () => {
-    it('should parse heading', () => {
-      const result = parser.parse('# Hello World');
-      expect(result.content).toHaveLength(1);
-      expect(result.content[0].type).toBe('heading');
-      expect(result.content[0].content).toBe('Hello World');
-    });
-
-    it('should parse multiple headings', () => {
-      const result = parser.parse('# Heading 1\n## Heading 2\n### Heading 3');
-      expect(result.content).toHaveLength(3);
-      expect(result.content[0].type).toBe('heading');
-    });
-
-    it('should parse paragraph', () => {
-      const result = parser.parse('This is a paragraph');
-      expect(result.content).toHaveLength(1);
-      expect(result.content[0].type).toBe('paragraph');
-    });
-
-    it('should parse list items', () => {
-      const result = parser.parse('- Item 1\n- Item 2\n- Item 3');
-      expect(result.content).toHaveLength(1);
-      expect(result.content[0].type).toBe('list');
-      expect(result.content[0].children).toHaveLength(3);
-    });
-
-    it('should parse image in paragraph', () => {
-      const result = parser.parse('![Alt text](image.jpg)');
-      expect(result.content).toHaveLength(1);
-      expect(result.content[0].type).toBe('paragraph');
-      expect(result.content[0].children?.[0].type).toBe('image');
-    });
-
-    it('should parse code block', () => {
-      const result = parser.parse('```javascript\nconst x = 1;\n```');
-      expect(result.content).toHaveLength(1);
-      expect(result.content[0].type).toBe('code');
-    });
-
-    it('should handle image path prefix', () => {
-      const parserWithPrefix = new MarkdownParser({ imagePathPrefix: 'images/' });
-      const result = parserWithPrefix.parse('![Alt](photo.jpg)');
-      expect(result.content[0].children?.[0].src).toBe('images/photo.jpg');
-    });
-
-    it('should handle imageBaseUrl', () => {
-      const parserWithBaseUrl = new MarkdownParser({ imageBaseUrl: 'https://cdn.example.com/' });
-      const result = parserWithBaseUrl.parse('![Alt](photo.jpg)');
-      expect(result.content[0].children?.[0].src).toBe('https://cdn.example.com/photo.jpg');
-    });
-  });
-});
-
-describe('HTMLRenderer', () => {
-  let renderer: HTMLRenderer;
-
-  beforeEach(() => {
-    renderer = new HTMLRenderer();
-  });
-
-  describe('renderNode', () => {
-    it('should render heading', () => {
-      const node: ContentNode = { type: 'heading', content: 'Hello', attributes: { level: '1' } };
-      const html = renderer.renderNode(node);
-      expect(html).toBe('<h1>Hello</h1>');
-    });
-
-    it('should render paragraph', () => {
-      const node: ContentNode = { type: 'paragraph', content: 'Hello world' };
-      const html = renderer.renderNode(node);
-      expect(html).toBe('<p>Hello world</p>');
-    });
-
-    it('should render image', () => {
-      const node: ContentNode = { type: 'image', src: 'image.jpg', alt: 'Alt text' };
-      const html = renderer.renderNode(node);
-      expect(html).toBe('<img src="image.jpg" alt="Alt text" class="">');
-    });
-  });
-
-  describe('renderNodes', () => {
-    it('should render multiple nodes', () => {
-      const nodes: ContentNode[] = [
-        { type: 'heading', content: 'Title', attributes: { level: '1' } },
-        { type: 'paragraph', content: 'Content' }
-      ];
-      const html = renderer.renderNodes(nodes);
-      expect(html).toContain('<h1>Title</h1>');
-      expect(html).toContain('<p>Content</p>');
-    });
-
-    it('should handle empty array', () => {
-      const html = renderer.renderNodes([]);
-      expect(html).toBe('');
-    });
-  });
-});
-
-describe('MarkdownPipeline', () => {
-  let pipeline: MarkdownPipeline;
-
-  beforeEach(() => {
-    pipeline = new MarkdownPipeline();
-  });
-
-  describe('parse', () => {
-    it('should parse markdown to nodes', () => {
-      const nodes = pipeline.parse('# Hello');
-      expect(nodes).toHaveLength(1);
-      expect(nodes[0].type).toBe('heading');
-    });
-  });
-
-  describe('renderMarkdown', () => {
-    it('should parse and render in one call', () => {
-      const html = pipeline.renderMarkdown('# Hello World\n\nThis is a paragraph.');
-      expect(html).toContain('<h1>Hello World</h1>');
-      expect(html).toContain('<p>This is a paragraph.</p>');
-    });
-  });
-
-  describe('renderPage', () => {
-    it('should render full HTML page', () => {
-      const nodes: ContentNode[] = [
-        { type: 'heading', content: 'Title', attributes: { level: '1' } }
-      ];
-      const page = pipeline.renderPage('My Page', nodes);
-      expect(page).toContain('<!DOCTYPE html>');
-      expect(page).toContain('<title>My Page</title>');
-    });
-  });
-
-  describe('configuration', () => {
-    it('should use imagePathPrefix config', () => {
-      const pipelineWithConfig = new MarkdownPipeline({ imagePathPrefix: 'images/' });
-      const nodes = pipelineWithConfig.parse('![img](test.jpg)');
-      expect(nodes[0].children?.[0].src).toBe('images/test.jpg');
-    });
-  });
-});

package/src/index.ts

@@ -1,7 +0,0 @@
-export * from './types';
-export * from './parser';
-export * from './renderer';
-export * from './lit-renderer';
-export * from './pipeline';
-
-export { LitRenderer as HTMLRenderer } from './lit-renderer';

package/src/lit-renderer.ts

@@ -1,91 +0,0 @@
-import { TemplateResult, html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { ContentNode } from './types';
-
-export class LitRenderer {
-  private renderTextNode(node: ContentNode): TemplateResult {
-    if (node.type === 'image') {
-      return html`<img src="${node.src}" alt="${node.alt || ''}" class="inline-image" style="max-width:100%;height:auto;">`;
-    }
-    return html`${unsafeHTML(node.content || '')}`;
-  }
-
-  renderNode(node: ContentNode): TemplateResult {
-    switch (node.type) {
-      case 'heading': {
-        const level = node.attributes?.level || '2';
-        if (level === '1') return html`<h1>${unsafeHTML(node.content)}</h1>`;
-        if (level === '2') return html`<h2>${unsafeHTML(node.content)}</h2>`;
-        if (level === '3') return html`<h3>${unsafeHTML(node.content)}</h3>`;
-        return html`<h2>${unsafeHTML(node.content)}</h2>`;
-      }
-        
-      case 'paragraph':
-        if (node.children) {
-          return html`<p>${node.children.map(child => this.renderTextNode(child))}</p>`;
-        }
-        return html`<p>${unsafeHTML(node.content)}</p>`;
-        
-      case 'list':
-        return html`<ul>${node.children?.map(child => this.renderNode(child))}</ul>`;
-        
-      case 'list-item':
-        return html`<li>${unsafeHTML(node.content)}</li>`;
-        
-      case 'image':
-        return html`<img src="${node.src || node.attributes?.src}" alt="${node.alt || node.attributes?.alt || ''}" class="${node.className || ''}" style="max-width:100%;height:auto;">`;
-        
-      case 'container':
-        return html`<div class="${node.className || ''}" style="${node.attributes?.style || ''}">
-          ${node.children?.map(child => this.renderNode(child))}
-        </div>`;
-      
-      case 'code':
-        return html`<pre><code class="language-${node.attributes?.lang || ''}">${node.content || ''}</code></pre>`;
-      
-      case 'text':
-        return html`${node.content}`;
-      
-      default:
-        return html``;
-    }
-  }
-
-  renderNodes(nodes: ContentNode[]): TemplateResult {
-    if (!nodes || nodes.length === 0) {
-      return html``;
-    }
-    return html`${nodes.map(node => this.renderNode(node))}`;
-  }
-
-  renderToHTMLString(nodes: ContentNode[]): string {
-    if (!nodes || nodes.length === 0) {
-      return '';
-    }
-    return nodes.map(node => this.nodeToHTMLString(node)).join('\n');
-  }
-
-  private nodeToHTMLString(node: ContentNode): string {
-    switch (node.type) {
-      case 'heading':
-        const level = node.attributes?.level || '2';
-        return `<h${level}>${node.content}</h${level}>`;
-      case 'paragraph':
-        return `<p>${node.content}</p>`;
-      case 'list':
-        const items = node.children?.map(child => this.nodeToHTMLString(child)).join('') || '';
-        return `<ul>${items}</ul>`;
-      case 'list-item':
-        return `<li>${node.content}</li>`;
-      case 'image':
-        return `<img src="${node.attributes?.src}" alt="${node.attributes?.alt}" class="${node.className || ''}">`;
-      case 'container':
-        const childrenHTML = node.children?.map(child => this.nodeToHTMLString(child)).join('') || '';
-        return `<div class="${node.className || ''}">${childrenHTML}</div>`;
-      case 'text':
-        return node.content || '';
-      default:
-        return '';
-    }
-  }
-}

package/src/parser.ts

@@ -1,142 +0,0 @@
-import { marked } from 'marked';
-import { ContentNode, MarkdownContent, ParseOptions } from './types';
-
-export class MarkdownParser {
-  private imagePathPrefix: string;
-  private imageBaseUrl: string;
-
-  constructor(options?: { imagePathPrefix?: string; imageBaseUrl?: string }) {
-    this.imagePathPrefix = options?.imagePathPrefix || '';
-    this.imageBaseUrl = options?.imageBaseUrl || '';
-  }
-
-  private processImagePath(src: string): string {
-    if (src.startsWith('http') || src.startsWith('/')) {
-      return src;
-    }
-    let path = this.imagePathPrefix ? `${this.imagePathPrefix}${src}` : src;
-    if (this.imageBaseUrl && !path.startsWith('http')) {
-      path = `${this.imageBaseUrl}${path}`;
-    }
-    return path;
-  }
-
-  private processInlineFormatting(text: string): string {
-    return text
-      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-      .replace(/\*(.+?)\*/g, '<em>$1</em>');
-  }
-
-  private parseTokens(tokens: unknown[]): ContentNode[] {
-    const nodes: ContentNode[] = [];
-    
-    for (const token of tokens) {
-      const node = this.parseToken(token as Record<string, unknown>);
-      if (node) {
-        nodes.push(node);
-      }
-    }
-    
-    return nodes;
-  }
-
-  private parseToken(token: Record<string, unknown>): ContentNode | null {
-    switch (token.type) {
-      case 'heading':
-        return {
-          type: 'heading',
-          content: token.text as string,
-          attributes: { level: String(token.depth) }
-        };
-        
-      case 'paragraph':
-        const tokens = (token.tokens as Array<Record<string, unknown>>) || [];
-        const hasInlineImage = tokens.some(t => t.type === 'image');
-        
-        if (hasInlineImage) {
-          const children = tokens.map(t => {
-            if (t.type === 'image') {
-              return {
-                type: 'image' as const,
-                src: this.processImagePath(t.href as string),
-                alt: t.text as string || ''
-              };
-            }
-            return {
-              type: 'text' as const,
-              content: this.processInlineFormatting(t.text as string || '')
-            };
-          });
-          return {
-            type: 'paragraph',
-            children
-          };
-        }
-        
-        return {
-          type: 'paragraph',
-          content: this.processInlineFormatting(token.text as string)
-        };
-        
-      case 'list':
-        return {
-          type: 'list',
-          ordered: token.ordered as boolean,
-          children: (token.items as Array<Record<string, unknown>>).map((item) => ({
-            type: 'list-item',
-            content: this.processInlineFormatting(item.text as string)
-          }))
-        };
-        
-      case 'image':
-        return {
-          type: 'image',
-          src: this.processImagePath(token.href as string),
-          alt: token.title as string || ''
-        };
-
-      case 'code':
-        return {
-          type: 'code',
-          content: token.text as string,
-          attributes: { lang: token.lang as string || '' }
-        };
-      
-      case 'hr':
-        return { type: 'container', attributes: { tag: 'hr' } };
-      
-      case 'blockquote':
-        return {
-          type: 'container',
-          attributes: { tag: 'blockquote' },
-          children: this.parseTokens((token as Record<string, unknown>).tokens as unknown[] || [])
-        };
-      
-      case 'html':
-        return { type: 'container', content: token.raw as string };
-        
-      default:
-        return null;
-    }
-  }
-
-  parse(markdown: string, options?: ParseOptions): MarkdownContent {
-    const parseOptions = {
-      gfm: options?.gfm ?? true,
-      breaks: options?.breaks ?? false,
-      pedantic: options?.pedantic ?? false
-    };
-    
-    const tokens = marked.lexer(markdown, parseOptions as Parameters<typeof marked.lexer>[1]);
-    const content = this.parseTokens(tokens);
-    
-    return {
-      title: '',
-      content
-    };
-  }
-
-  parseToNodes(markdown: string, options?: ParseOptions): ContentNode[] {
-    return this.parse(markdown, options).content;
-  }
-}

package/src/pipeline.ts

@@ -1,66 +0,0 @@
-import { MarkdownParser } from './parser';
-import { HTMLRenderer } from './renderer';
-import { ContentNode, MarkdownContent, PipelineConfig } from './types';
-
-export class MarkdownPipeline {
-  private parser: MarkdownParser;
-  private renderer: HTMLRenderer;
-  private config: Required<PipelineConfig>;
-
-  constructor(config: PipelineConfig = {}) {
-    this.config = {
-      imagePathPrefix: config.imagePathPrefix || '',
-      imageBaseUrl: config.imageBaseUrl || '',
-      parseOptions: {
-        gfm: config.parseOptions?.gfm ?? true,
-        breaks: config.parseOptions?.breaks ?? false,
-        pedantic: config.parseOptions?.pedantic ?? false
-      }
-    };
-
-    this.parser = new MarkdownParser({
-      imagePathPrefix: this.config.imagePathPrefix,
-      imageBaseUrl: this.config.imageBaseUrl
-    });
-    this.renderer = new HTMLRenderer();
-  }
-
-  parse(markdown: string): ContentNode[] {
-    return this.parser.parseToNodes(markdown, this.config.parseOptions);
-  }
-
-  parseWithMetadata(markdown: string): MarkdownContent {
-    return this.parser.parse(markdown, this.config.parseOptions);
-  }
-
-  render(nodes: ContentNode[]): string {
-    return this.renderer.renderNodes(nodes);
-  }
-
-  renderMarkdown(markdown: string): string {
-    const nodes = this.parse(markdown);
-    return this.render(nodes);
-  }
-
-  renderPage(title: string, nodes: ContentNode[], options?: {
-    lang?: string;
-    charset?: string;
-  }): string {
-    const html = this.render(nodes);
-    return `<!DOCTYPE html>
-<html lang="${options?.lang || 'en'}">
-<head>
-  <meta charset="${options?.charset || 'UTF-8'}">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${title}</title>
-</head>
-<body>
-  ${html}
-</body>
-</html>`;
-  }
-
-  getConfig(): Readonly<Required<PipelineConfig>> {
-    return { ...this.config };
-  }
-}

package/src/renderer.ts

@@ -1,67 +0,0 @@
-import { ContentNode } from './types';
-
-export class HTMLRenderer {
-  renderNode(node: ContentNode): string {
-    switch (node.type) {
-      case 'heading':
-        const level = node.attributes?.level || '2';
-        return `<h${level}>${node.content || ''}</h${level}>`;
-        
-      case 'paragraph':
-        if (node.children) {
-          return `<p>${node.children.map(child => this.renderNode(child)).join('')}</p>`;
-        }
-        return `<p>${node.content || ''}</p>`;
-        
-      case 'list':
-        const tag = node.ordered ? 'ol' : 'ul';
-        const items = node.children?.map(child => this.renderNode(child)).join('') || '';
-        return `<${tag}>${items}</${tag}>`;
-        
-      case 'list-item':
-        return `<li>${node.content || ''}</li>`;
-        
-      case 'image':
-        const src = node.src || node.attributes?.src || '';
-        const alt = node.alt || node.attributes?.alt || '';
-        return `<img src="${src}" alt="${alt}" class="${node.className || ''}">`;
-        
-      case 'code':
-        return `<pre><code class="language-${node.attributes?.lang || ''}">${node.content || ''}</code></pre>`;
-      
-      case 'container':
-        if (node.attributes?.tag === 'hr') return '<hr>';
-        if (node.attributes?.tag === 'blockquote') {
-          const children = node.children?.map(child => this.renderNode(child)).join('') || '';
-          return `<blockquote>${children}</blockquote>`;
-        }
-        const containerChildren = node.children?.map(child => this.renderNode(child)).join('') || '';
-        return `<div class="${node.className || ''}">${containerChildren}</div>`;
-      
-      case 'strong':
-        return `<strong>${node.content || ''}</strong>`;
-      
-      case 'emphasis':
-        return `<em>${node.content || ''}</em>`;
-      
-      case 'text':
-      default:
-        return node.content || '';
-    }
-  }
-
-  renderNodes(nodes: ContentNode[]): string {
-    if (!nodes || nodes.length === 0) {
-      return '';
-    }
-    return nodes.map(node => this.renderNode(node)).join('\n');
-  }
-
-  renderToHTMLString(nodes: ContentNode[]): string {
-    return this.renderNodes(nodes);
-  }
-
-  render(markdown: string): string {
-    return markdown;
-  }
-}