XML Content Loader

A lightweight JavaScript package for loading and displaying content from XML files in web applications.

Features

• 🚀 Simple XML loading and parsing
• 🎯 DOM manipulation utilities
• 🛡️ Error handling with fallback content
• 🌐 Browser-compatible (no Node.js dependencies for client-side)
• 📦 Modular architecture

Installation

File-based Installation

npm install @max-on-27/xml-content-loader

Usage

Browser Usage

Include the browser bundle in your HTML:

<script src="./node_modules/xml-content-loader/browser.js"></script>

This makes three classes globally available:

• XMLLoader - For loading and parsing XML files
• DOMPopulator - For DOM manipulation utilities
• XMLContentUtils - For common XML processing tasks

Basic Example

class MyLoader {
    constructor() {
        this.xmlLoader = new XMLLoader();
    }

    async loadContent() {
        try {
            const xmlDoc = await this.xmlLoader.loadXML('./data/content.xml');
            
            const title = this.xmlLoader.extractText(xmlDoc, 'title');
            const description = this.xmlLoader.extractText(xmlDoc, 'description');
            
            DOMPopulator.populateElement('page-title', title);
            DOMPopulator.populateElement('page-description', description);
            
        } catch (error) {
            XMLContentUtils.handleXMLError('content', {
                'page-title': 'Default Title',
                'page-description': 'Default description'
            });
        }
    }
}

API Reference

XMLLoader

loadXML(xmlPath)

Loads and parses an XML file from the given path.

extractText(xmlDoc, selector)

Extracts text content from an XML element using a CSS selector.

extractMultiple(xmlDoc, selector)

Returns a NodeList of elements matching the selector.

DOMPopulator

populateElement(selector, content)

Sets text content of an element.

populateHTML(selector, htmlContent)

Sets innerHTML of an element.

populateAttribute(selector, attribute, value)

Sets an attribute on an element.

clearContainer(selector)

Clears the innerHTML of a container element.

populateFromXMLNodes(containerSelector, xmlNodes, renderer, className)

Populates a container with elements created from XML nodes using a renderer function.

XMLContentUtils

handleXMLError(section, fallbackContent)

Handles XML loading errors by setting fallback content.

extractHighlights(xmlNode, selector)

Extracts highlight items from an XML node.

extractTags(xmlNode, selector)

Extracts tag items from an XML node.

createHighlightsHTML(highlights)

Creates HTML string from highlights array.

createTagsHTML(tags, className)

Creates HTML string from tags array with CSS class.

Development

The package includes:

• src/XMLLoader.js - Core XML loading functionality
• src/DOMPopulator.js - DOM manipulation utilities
• src/utils.js - Helper functions and utilities
• index.js - Node.js entry point
• browser.js - Browser bundle with all components

License

ISC