js-component-framework

import { componentProvider } from 'js-component-framework'; // 1. Define your HTML component structure with a data-component attribute // <div data-component="my-greeting-component"> // <h2 class="greeting-title"></h2> // <button data-action="say-hello">Say Hello</button> // </div> // 2. Create your ES6 class or function component class MyGreetingComponent { constructor({ element, children, options }) { this.element = element; // The root DOM element (e.g., <div data-component="my-greeting-component">) this.title = children.title; // Child element mapped by querySelector this.sayHelloButton = children.sayHelloButton; // Child element mapped by querySelectorAll (or querySelector if unique) this.message = options.message; // Arbitrary options passed in config if (this.title) { this.title.textContent = this.message || 'Hello from Component!'; } if (this.sayHelloButton) { this.sayHelloButton.addEventListener('click', this.handleSayHello.bind(this)); } } handleSayHello() { alert(`Component says: ${this.message || 'Hello world!'}`); } } // 3. Define the component configuration const myGreetingConfig = { name: 'my-greeting-component', component: MyGreetingComponent, querySelector: { title: '.greeting-title' }, querySelectorAll: { sayHelloButton: '[data-action="say-hello"]' }, options: { message: 'Welcome to the JS Component Framework!' }, load: true // Automatically initialize on DOMContentLoaded }; // 4. Initialize the component using componentProvider componentProvider(myGreetingConfig); // Example of deferred loading (if config.load was false) /* const myDeferredComponentProvider = componentProvider({ ...myGreetingConfig, name: 'my-other-component', load: false }); window.addEventListener('load', () => { myDeferredComponentProvider(); // Manually initialize the component }); */