[!CAUTION] 🚧 WIP 🚧 This project is currently in active development API may change

Quick Example

<!-- button.html -->
<button id="my-btn" class="cool-btn">Click me!</button>

<style>
  .cool-btn {
    background: indigo;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
  }
</style>

<script>
  const button = document.querySelector('#my-btn')
  let clicks = 0
  
  button.addEventListener('click', () => {
    clicks++
    button.textContent = `Clicked ${clicks} times!`
  })
</script>

and in your main app

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

load('./button.html', '#app')

Features

• Zero Dependencies - Pure vanilla JavaScript
• Self-Contained Components - HTML, CSS, and JS in single files
• Multiple Script Types - Regular scripts, ES modules, or no scripts
• 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/[email protected]/fragmnt.js'
</script>

<!-- Using esm.sh -->
<script type="module">
  import { load } from 'https://esm.sh/[email protected]'
</script>

Quick Start

NPM Usage

import { load } from 'fragmnt'

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

CDN Usage

import { load } from 'https://unpkg.com/[email protected]/fragmnt.js'

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

Component Structure

Create HTML files with this structure:

<!-- HTML markup -->
<div class="my-component">
  <h3>My Component</h3>
  <button id="my-btn">Click me</button>
</div>

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

<!-- JavaScript (optional) -->
<script>
  // Your JavaScript code here
</script>

Script Types

fragmnt supports three different script patterns:

1. No Script (Static Components)

Just HTML and CSS - no JavaScript needed.

<div class="static-card">
  <h3>Static Content</h3>
  <p>No JavaScript required!</p>
</div>

<style>
  .static-card {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
  }
</style>

2. Regular Script (Non-Module)

Traditional JavaScript that runs immediately.

<div class="widget">
  <button id="btn">Click me</button>
  <div id="output"></div>
</div>

<style>
  .widget { padding: 1rem; }
</style>

<script>
  const button = document.querySelector('#btn')
  const output = document.querySelector('#output')
  let clicks = 0
  
  button.addEventListener('click', () => {
    clicks++
    output.textContent = `Clicked ${clicks} times!`
  })
</script>

3. ES Module Script

Modern JavaScript with initialization function.

<div class="module-widget">
  <button id="module-btn">Click me</button>
  <div id="module-output"></div>
</div>

<style>
  .module-widget { padding: 1rem; }
</style>

<script type="module">
  export default function init(container) {
    const button = container.querySelector('#module-btn')
    const output = container.querySelector('#module-output')
    let clicks = 0
    
    button.addEventListener('click', () => {
      clicks++
      output.textContent = `Clicked ${clicks} times!`
    })
  }
</script>

Key Differences:

• Regular Script: Runs immediately, uses document.querySelector() to find elements
• ES Module: Runs after component is inserted, receives container parameter with the component's DOM
• No Script: Just static HTML/CSS

API

load(path, target)

Loads an HTML fragment component into a target element.

Parameters:

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

Returns: Promise that resolves when component is loaded

Example:

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

Browser Support

Requires modern browsers with ES modules support:

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

License

MIT