Features

• Zero Dependencies - Pure vanilla JavaScript
• Self-Contained Components - HTML, CSS, and JS in single files
• ES Module Support - Modern JavaScript with initialization functions
• Style Injection - Automatic CSS extraction and injection
• Simple API - Single load() function

Installation

NPM

npm install fragmnt

CDN

<!-- Using unpkg -->
<script type="module">
  import { load } from 'https://unpkg.com/fragmnt@0.1.0/fragmnt.js'
</script>

<!-- Using esm.sh -->
<script type="module">
  import { load } from 'https://esm.sh/fragmnt@0.1.0'
</script>

Quick Start

NPM Usage

import { load } from 'fragmnt'

// Load a component into a target element
await load('./components/counter.html', document.getElementById('app'))

CDN Usage

import { load } from 'https://unpkg.com/fragmnt@0.1.0/fragmnt.js'

// Load a component into a target element
await load('./components/counter.html', document.getElementById('app'))

Component Structure

Create HTML files with this structure:

<!-- HTML markup -->
<div class="counter">
  <h3>Counter</h3>
  <button id="my-btn">Click me</button>
</div>

<!-- Embedded styles -->
<style>
  .counter {
    padding: 1rem;
    border: 1px solid #ccc;
  }
</style>

<!-- JavaScript (optional) -->
<script type="module">
  export default function init(container) {
    const button = container.querySelector('#my-btn')
    button.addEventListener('click', () => {
      console.log('Button clicked!')
    })
  }
</script>

API

load(path, target)

Loads an HTML fragment component into a target element.

Parameters:

• path (string) - Path to the HTML component file
• target (HTMLElement) - Target element to insert the component

Returns: Promise that resolves when component is loaded

Example:

try {
  await load('./components/my-component.html', document.getElementById('app'))
} catch (error) {
  console.error('Failed to load component:', error)
}

Component Types

Simple Component (No Script)

Basic HTML with embedded styles, no JavaScript.

Regular Script Component

HTML with styles and traditional JavaScript (non-module).

ES Module Component

HTML with styles and ES module script with initialization function.

Interactive Components

Stateful components with event handling and state management.

Browser Support

Requires modern browsers with ES modules support:

• Chrome 61+
• Firefox 60+
• Safari 10.1+
• Edge 16+

License

MIT