import { convertBlocks } from 'wp-block-to-html';

// WordPress Gutenberg block data
const blockData = {
  blocks: [
    {
      blockName: 'core/paragraph',
      attrs: { align: 'center' },
      innerContent: ['<p>Hello WordPress!</p>']
    },
    // More blocks...
  ]
};

// Convert to HTML
const html = convertBlocks(blockData);
console.log(html); // <p class="wp-block-paragraph has-text-align-center">Hello WordPress!</p>

// With Tailwind CSS
const tailwindHtml = convertBlocks(blockData, { cssFramework: 'tailwind' });
console.log(tailwindHtml); // <p class="text-center">Hello WordPress!</p>

import { HydrationManager } from 'wp-block-to-html/hydration';

// Initialize hydration with viewport strategy
const hydrationManager = new HydrationManager({
  strategy: 'viewport',
  concurrencyLimit: 3,
  performanceMonitoring: true
});

// Hydrate components progressively
await hydrationManager.hydrateComponent('my-component', {
  strategy: 'viewport',
  priority: 'high',
  threshold: 0.1  // Trigger when 10% visible
});

// Monitor hydration performance
const stats = hydrationManager.getStatistics();
console.log(`Hydrated ${stats.totalHydrated} components in ${stats.averageTime}ms`);

import { convertBlocks } from 'wp-block-to-html';

// Fetching a post from WordPress API
async function fetchWordPressPost() {
  const response = await fetch('https://example.com/wp-json/wp/v2/posts/1?_fields=id,title,content,blocks');
  const post = await response.json();
  
  let htmlContent;
  
  // Check if blocks data is available
  if (post.blocks) {
    // Use raw block data with your preferred content handling mode
    htmlContent = convertBlocks(post.blocks, {
      cssFramework: 'tailwind',
      contentHandling: 'raw'
    });
  } 
  // Fall back to rendered content if no blocks are available
  else if (post.content && post.content.rendered) {
    htmlContent = post.content.rendered;
  }
  
  document.getElementById('content').innerHTML = htmlContent;
}

import { processBlocksForSSR } from 'wp-block-to-html';

// WordPress block data
const blockData = {
  blocks: [/* blocks */]
};

// Basic usage with default optimizations
const optimizedHtml = processBlocksForSSR(blockData, {
  ssrOptions: {
    enabled: true,
    // Uses 'balanced' optimization level by default
  }
});

// Advanced usage with maximum optimizations
const fullyOptimizedHtml = processBlocksForSSR(blockData, {
  cssFramework: 'tailwind',
  ssrOptions: {
    enabled: true,
    level: 'maximum',
    optimizeImages: true,
    stripClientScripts: true,
    inlineCriticalCSS: true
  }
});

// Real-world example with a full blog post
const blogPost = processBlocksForSSR(wordpressPost, {
  ssrOptions: {
    enabled: true,
    level: 'balanced',
    // Default settings work well for most cases
  }
});

const optimizedHtml = processBlocksForSSR(blockData, {
  ssrOptions: {
    enabled: true,
    preProcessHTML: (html, options) => {
      // Custom processing before standard optimizations
      return html.replace(/specific-pattern/g, 'replacement');
    },
    postProcessHTML: (html, options) => {
      // Custom processing after standard optimizations
      return html + '<!-- Server rendered at ' + new Date().toISOString() + ' -->';
    }
  }
});

// pages/[slug].js
export async function getServerSideProps({ params }) {
  const post = await fetchPostBySlug(params.slug);
  
  const optimizedHtml = processBlocksForSSR(post.blocks, {
    cssFramework: 'tailwind', // If using Tailwind in your Next.js project
    ssrOptions: {
      enabled: true,
      level: 'balanced'
    }
  });
  
  return {
    props: {
      postData: post,
      optimizedContent: optimizedHtml
    }
  };
}

// Full configuration
const options = {
  // Output format (default: 'html')
  outputFormat: 'html', // 'html' | 'react' | 'vue' | 'angular' | 'svelte'
  
  // CSS framework (default: 'none')
  cssFramework: 'tailwind', // 'none' | 'tailwind' | 'bootstrap' | 'custom'
  
  // Content handling (default: 'raw')
  contentHandling: 'raw', // 'raw' | 'rendered' | 'hybrid'
  
  // Custom class mapping
  customClassMap: {
    'core/paragraph': {
      block: 'my-custom-paragraph',
      align: {
        center: 'my-centered-text',
        left: 'my-left-text',
        right: 'my-right-text'
      }
    }
  },
  
  // Custom block transformers
  blockTransformers: {
    'my-custom-block/special': {
      transform(blockData, options) {
        // Custom transformation logic
        return `<div class="special-block">${blockData.innerContent.join('')}</div>`;
      }
    }
  }
}

const result = convertBlocks(blockData, options);

// WordPress block with rendered HTML in innerContent
const blockWithRenderedHTML = {
  blockName: "core/paragraph",
  attrs: { align: "center" },
  innerContent: ['<p class="has-text-align-center">Pre-rendered paragraph</p>']
};

// 1. Raw mode - Process raw block data for full control
const htmlRaw = convertBlocks(blockWithRenderedHTML, { 
  contentHandling: 'raw'
});
// Output: <p class="text-center">Pre-rendered paragraph</p> (with Tailwind)

// 2. Rendered mode - use the rendered HTML as-is
const htmlRendered = convertBlocks(blockWithRenderedHTML, { 
  contentHandling: 'rendered'
});
// Output: <p class="has-text-align-center">Pre-rendered paragraph</p>

// 3. Hybrid mode - keep rendered HTML but add framework classes
const htmlHybrid = convertBlocks(blockWithRenderedHTML, { 
  cssFramework: 'tailwind',
  contentHandling: 'hybrid'
});
// Output: <p class="has-text-align-center text-center">Pre-rendered paragraph</p>

async function fetchPost() {
  const response = await fetch('https://your-wp-site.com/wp-json/wp/v2/posts/1');
  const post = await response.json();
  
  // Use rendered content directly
  const html = post.content.rendered;
  document.getElementById('content').innerHTML = html;
}

import { convertBlocks } from 'wp-block-to-html/core';

// Option 1: Pass the content object directly
const html = convertBlocks(post.content, {
  contentHandling: 'rendered',
  cssFramework: 'tailwind'
});

// Option 2: Create an object with rendered property
const html = convertBlocks({
  rendered: post.content.rendered
}, {
  contentHandling: 'rendered',
  cssFramework: 'tailwind'
});

// ❌ Incorrect - Don't pass rendered string directly
const html = convertBlocks(post.content.rendered, {
  contentHandling: 'rendered',
  cssFramework: 'tailwind'
}); // This will throw an error

function renderWordPressContent(post) {
  try {
    // Check if blocks data is available
    if (post.blocks) {
      console.log('Using raw block data for conversion');
      return convertBlocks(post.blocks, {
        cssFramework: 'bootstrap',
        contentHandling: 'raw'
      });
    } 
    // If no blocks but we have rendered content
    else if (post.content && post.content.rendered) {
      console.log('No blocks found, using rendered content');
      return post.content.rendered;
    } 
    // Neither blocks nor rendered content
    else {
      console.error('No content found for this post');
      return '<div class="error">No content found</div>';
    }
  } catch (error) {
    console.error('Error converting content:', error);
    return `<div class="error">Error converting content: ${error.message}</div>`;
  }
}

import { convertBlocks } from 'wp-block-to-html';

function WordPressContent({ post }) {
  // Handle both block data and rendered content
  let html = '';
  
  if (post.blocks) {
    html = convertBlocks(post.blocks, { 
      outputFormat: 'html', 
      cssFramework: 'tailwind',
      contentHandling: 'raw'
    });
  } else if (post.content && post.content.rendered) {
    html = post.content.rendered;
  }
  
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

// Or use the React component output
import { convertBlocksToReact } from 'wp-block-to-html/react';

function WordPressContent({ post }) {
  if (!post.blocks) {
    return <div dangerouslySetInnerHTML={{ __html: post.content?.rendered || '' }} />;
  }
  
  const components = convertBlocksToReact(post.blocks, { 
    cssFramework: 'tailwind',
    contentHandling: 'raw'
  });
  
  return <div>{components}</div>;
}

import { registerBlockHandler } from 'wp-block-to-html';

// Register a custom block handler
registerBlockHandler('my-plugin/custom-block', {
  transform(block, options) {
    const { attrs, innerContent } = block;
    // Custom transformation logic
    return `<div class="my-custom-block">${innerContent.join('')}</div>`;
  },
  
  // CSS framework mappings
  cssMapping: {
    tailwind: {
      block: 'bg-gray-100 p-4 rounded',
      // Other attribute mappings
    },
    bootstrap: {
      block: 'card p-3',
      // Other attribute mappings
    }
  }
});

// Import only core functionality without block handlers
import { convertBlocks, registerBlockHandler } from 'wp-block-to-html/core';

// Register only the block handlers you need
import { paragraphBlockHandler, headingBlockHandler } from 'wp-block-to-html/blocks/text';

// Register custom block handlers
registerBlockHandler('core/paragraph', paragraphBlockHandler);
registerBlockHandler('core/heading', headingBlockHandler);

// Import only Tailwind CSS support
import { tailwindMapping } from 'wp-block-to-html/frameworks/tailwind';

// Import only Bootstrap support
import { bootstrapMapping } from 'wp-block-to-html/frameworks/bootstrap';

// Import only text block handlers and a registration function
import { registerTextBlockHandlers } from 'wp-block-to-html/blocks/text';
registerTextBlockHandlers(); // Registers all text block handlers

// Or import only media block handlers
import { registerMediaBlockHandlers } from 'wp-block-to-html/blocks/media';
registerMediaBlockHandlers(); // Registers all media block handlers

// Available categories:
// - wp-block-to-html/blocks/text
// - wp-block-to-html/blocks/media
// - wp-block-to-html/blocks/layout
// - wp-block-to-html/blocks/widget
// - wp-block-to-html/blocks/dynamic

// React-specific imports
import { convertBlocksToReact, createReactComponent } from 'wp-block-to-html/react';

// Vue-specific imports
import { convertBlocksToVue, createVueComponentOptions } from 'wp-block-to-html/vue';

// Import only core convertBlocks (2KB)
import { convertBlocks } from 'wp-block-to-html/core';
// Import only tailwind mapping (1.8KB)
import { tailwindMapping } from 'wp-block-to-html/frameworks/tailwind';

// Process pre-rendered HTML content with Tailwind classes
const html = convertBlocks(wordpressContent, { 
  cssFramework: 'tailwind',
  contentHandling: 'hybrid',
  customClassMap: { tailwind: tailwindMapping }
});

import { convertBlocks } from 'wp-block-to-html';

const customClasses = {
  'core/paragraph': {
    block: 'my-custom-paragraph-class',
    align: {
      center: 'my-custom-center-class',
      left: 'my-custom-left-class',
      right: 'my-custom-right-class'
    },
    dropCap: 'my-custom-dropcap-class'
  },
  'core/heading': {
    block: 'my-custom-heading-class',
    level: {
      '1': 'my-h1-class',
      '2': 'my-h2-class',
      // ... other levels
    }
  }
  // ... other block types
};

const html = convertBlocks(blocks, {
  cssFramework: 'custom',
  customClassMap: { custom: customClasses }
});

import { convertBlocks } from 'wp-block-to-html';
import { tailwindMapping } from 'wp-block-to-html/frameworks/tailwind';

// Create a deep copy of the Tailwind mapping
const extendedTailwind = JSON.parse(JSON.stringify(tailwindMapping));

// Add or modify mappings
extendedTailwind['core/paragraph'].block = 'my-4 px-4 custom-para'; // Add to existing
extendedTailwind['core/image'].customAttribute = 'my-custom-image-class'; // Add new attribute

// Use the extended mapping
const html = convertBlocks(blocks, {
  cssFramework: 'tailwind',
  customClassMap: { tailwind: extendedTailwind }
});

import { registerBlockHandler } from 'wp-block-to-html/core';
import { getBlockClasses } from 'wp-block-to-html/core';

// Custom block handler for paragraphs
registerBlockHandler('core/paragraph', {
  transform(block, options) {
    const { attrs, innerContent } = block;
    const content = innerContent.join('');
    
    // Get classes using the built-in mechanism
    const classes = getBlockClasses(block, 'core/paragraph', options);
    
    // Add additional custom classes
    let customClasses = classes;
    if (attrs.customAttribute === 'special') {
      customClasses += ' my-special-class';
    }
    
    // Return the transformed HTML
    return `<p class="${customClasses}">${content}</p>`;
  },
  
  // Define CSS framework mappings for this block
  cssMapping: {
    tailwind: {
      block: 'text-base my-4',
      align: {
        center: 'text-center',
        left: 'text-left',
        right: 'text-right'
      },
      // Custom attribute mappings
      customSize: {
        small: 'text-sm',
        large: 'text-lg'
      }
    },
    bootstrap: {
      // Bootstrap specific mappings
    }
  }
});

import { enhanceRenderedHTML } from 'wp-block-to-html/core';
import { tailwindMapping } from 'wp-block-to-html/frameworks/tailwind';

// WordPress rendered HTML
const renderedHTML = '<p class="has-text-align-center">Hello WordPress!</p>';

// Enhance with Tailwind classes
const enhancedHTML = enhanceRenderedHTML(renderedHTML, {
  cssFramework: 'tailwind',
  customClassMap: { tailwind: tailwindMapping }
});

console.log(enhancedHTML); // <p class="has-text-align-center text-center">Hello WordPress!</p>

import { extractMetadata, generateSEOHead } from 'wp-block-to-html/seo';

// Fetch blocks from WordPress API
const response = await fetch('https://example.com/wp-json/wp/v2/posts/1?_fields=id,title,content,blocks');
const post = await response.json();

// Extract SEO metadata from blocks
const metadata = extractMetadata(post.blocks);

// Generate HTML head content
const headContent = generateSEOHead(metadata, {
  baseUrl: 'https://example.com',
  siteName: 'My WordPress Site',
  twitter: {
    handle: '@mytwitter',
    cardType: 'summary_large_image'
  },
  facebook: {
    appId: '123456789'
  }
});

// Insert into document head
document.head.insertAdjacentHTML('beforeend', headContent);

const fs = require('fs');
const { createBlockStream } = require('wp-block-to-html/streaming');

// Create a readable stream of WordPress blocks from a file or API
const blockDataStream = fs.createReadStream('large-block-data.json');

// Create an output file stream
const outputStream = fs.createWriteStream('output.html');

// Create a block transformer stream with Bootstrap styling
const blockStream = createBlockStream({
  cssFramework: 'bootstrap',
  streamingOptions: {
    chunkSize: 50, // Process 50 blocks at a time
    highWaterMark: 16 // Keep 16 objects in the buffer
  }
});

// Pipe everything together
blockDataStream
  .pipe(JSON.parse()) // You'll need to implement a JSON parser stream
  .pipe(blockStream)
  .pipe(outputStream);

const { Readable } = require('stream');
const fs = require('fs');
const { createBlockStream } = require('wp-block-to-html/streaming');

// Custom readable stream that fetches blocks in chunks from WordPress API
class WordPressAPIStream extends Readable {
  constructor(options) {
    super({ objectMode: true });
    this.baseUrl = options.baseUrl;
    this.perPage = options.perPage || 10;
    this.page = 1;
    this.hasMore = true;
  }

  async _read() {
    if (!this.hasMore) {
      this.push(null); // End of stream
      return;
    }

    try {
      const response = await fetch(
        `${this.baseUrl}/wp-json/wp/v2/posts?page=${this.page}&per_page=${this.perPage}&_fields=id,title,content,blocks`
      );
      
      const posts = await response.json();
      
      if (posts.length === 0) {
        this.hasMore = false;
        this.push(null);
        return;
      }

      // Push each post's blocks to the stream
      posts.forEach(post => {
        if (post.blocks) {
          this.push(post.blocks);
        }
      });

      this.page++;
    } catch (error) {
      console.error('Error fetching posts:', error);
      this.hasMore = false;
      this.push(null);
    }
  }
}

// Create streams
const apiStream = new WordPressAPIStream({
  baseUrl: 'https://example.com',
  perPage: 5
});

const blockStream = createBlockStream({
  cssFramework: 'tailwind',
  streamingOptions: { chunkSize: 20 }
});

const outputStream = fs.createWriteStream('wp-content.html');

// Add stream monitoring
blockStream.on('data', chunk => {
  console.log(`Processed chunk, size: ${chunk.length} bytes`);
});

blockStream.on('end', () => {
  console.log('All content processed');
});

// Pipe everything together
apiStream
  .pipe(blockStream)
  .pipe(outputStream);

const options = {
  // Standard options
  cssFramework: 'bootstrap',
  contentHandling: 'raw',
  
  // Streaming-specific options
  streamingOptions: {
    // Number of blocks to process in a single chunk
    chunkSize: 50,
    
    // Stream buffer high water mark
    highWaterMark: 16,
    
    // Whether to handle backpressure automatically
    handleBackpressure: true
  }
};

const blockStream = createBlockStream(options);

import { convertBlocks } from 'wp-block-to-html';

// Get blocks from WordPress API
const response = await fetch('https://example.com/wp-json/wp/v2/posts/1?_fields=blocks');
const post = await response.json();

// Convert with incremental rendering enabled
const html = convertBlocks(post.blocks, {
  cssFramework: 'bootstrap',
  incrementalOptions: {
    enabled: true,
    initialRenderCount: 10,  // Render first 10 blocks immediately
    batchSize: 5,            // Process remaining blocks in batches of 5
    batchDelay: 50           // Wait 50ms between batches
  }
});

// Inject the HTML into the page
document.getElementById('content').innerHTML = html;

// The content will render progressively:
// 1. Initial blocks appear immediately
// 2. Remaining blocks render in batches with minimal UI blocking
// 3. Special markers in the HTML handle the incremental loading

const options = {
  // Standard options
  cssFramework: 'bootstrap',
  
  // Incremental rendering options
  incrementalOptions: {
    // Enable incremental rendering (default: false)
    enabled: true,
    
    // Number of blocks to render in the initial pass (default: 10)
    initialRenderCount: 10,
    
    // Number of blocks to render in each subsequent batch (default: 5)
    batchSize: 5,
    
    // Delay in milliseconds between batch rendering (default: 50)
    batchDelay: 50,
    
    // Use IntersectionObserver for lazy loading blocks when they come into view
    useIntersectionObserver: true,
    
    // DOM element selector where content should be rendered incrementally
    containerSelector: '#content',
    
    // Custom callback for rendering incremental content
    renderCallback: (content, options) => {
      // Custom rendering logic
    }
  }
};