async-components-loader

async-components-loader

📦 Dynamically load JavaScript modules based on data-component attributes in the DOM. Each module must export a run() function that will be executed automatically.

🚀 Installation

npm install async-components-loader

📖 Usage

1. Define your components in the DOM

<div data-component="Hello"></div>
<div data-component="World"></div>

2. Create your dynamic modules

Each component should export a run function:

// /components/Hello/index.ts
export function run() {
  console.log("Hello component loaded!");
}

// /components/World/index.ts
export function run() {
  console.log("World component loaded!");
}

3. Initialize the loader in your project

import { init } from "async-components-loader";

init();
// 🔥 This will scan all elements with [data-component],
// dynamically import their modules and execute `run()`.

⚙️ Options

You can specify the base path where your components are located:

init("../custom-path/components");

By default, it looks for modules in ../components.

✅ Full Example

import { init } from "async-components-loader";

// Run all components declared in the DOM
document.addEventListener("DOMContentLoaded", () => {
  init();
});

🛠️ Local Development

Clone the repo and build:

git clone https://github.com/Lauc1an/async-components-loader.git
cd async-components-loader
npm install
npm run build

📜 License

MIT License

Copyright © 2025 Alexander Pomareda