frontend-hamroun/dist/renderer.js

A lightweight frontend JavaScript framework with React-like syntax

import { createElement } from './jsx-runtime.js';
import { prepareRender, finishRender, setRenderCallback } from './hooks.js';
// Render function for client-side rendering
export async function render(element, container) {
    try {
        // Set up render callback for state updates
        setRenderCallback(render, element, container);
        // Prepare render context
        const renderId = prepareRender(element);
        // Create DOM nodes from virtual elements
        const domNode = await createElement(element);
        // Clear container and append new content
        // Handle both Element and DocumentFragment cases
        if (container instanceof Element) {
            container.innerHTML = '';
        }
        else {
            // For DocumentFragment, clear all children
            while (container.firstChild) {
                container.removeChild(container.firstChild);
            }
        }
        container.appendChild(domNode);
        // Finish render
        finishRender();
        console.log('Render completed successfully');
    }
    catch (error) {
        console.error('Error during render:', error);
        // Clean up render context on error
        finishRender();
        throw error;
    }
}
// Hydrate function for client-side hydration of SSR content
export async function hydrate(element, container) {
    try {
        console.log('Starting hydration...');
        // For now, hydrate works the same as render
        // In a more advanced implementation, this would preserve existing DOM
        // and only attach event listeners and initialize state
        await render(element, container);
        console.log('Hydration completed successfully');
    }
    catch (error) {
        console.error('Error during hydration:', error);
        throw error;
    }
}