Module actribute

This module exports the Actribute class which provides a structured way to attach behavior to HTML elements. The library enables us to attach meaning to attributes in markup. The main motivation for its original development was adding behavior to built-in elements without creating complexity and accessibility issues. However it can
be used more generally to implement a component and/or reactive system based on attributes. This has more flexibility and composability than using tag names for components. It can also save a lot of typing when we use recursive components. Bear in mind this can lead to messy code if too much complex behavior is embedded in markup. Use with discretion.

The attributes here name the components and are passed to them along with the element. Components can use the element, attribute and context they receive in any way appropriate for their functions. Simple components may use the attribute values literally or call () with them to extract properties from objects (often context objects) which they then use for their operation. More complex components could even interprete the values as code (but this is not recommended).

Example

import { Actribute, props } from 'deleight/actribute';

// initialize actribute:
const act = new Actribute();

// register components:
act.register({
 comp1: (element, attr, singleContext) => element.textContent = attr.value,
 comp2: (element, attr, singleContext) => element.style.left = props(attr.value, [singleContext])
});


// process an element:
document.body.innerHTML = `
    <header></header>
     <article c-comp1='I replace all the children here anyway' >  <!-- using a raw value -->
         <p>[comp1] is not applied to me</p>
         <p>[comp1] is not applied to me</p>
    </article>
    <article r-comp2='a'>   <!-- using a prop -->
         <p>[comp2] is applied to me!</p>
         <p>[comp2] is applied to me!/p>
         <p>[comp2] is not applied to me!</p>
    </article>
`;
const data = { a: '100px', b: 2, c: 3 };
act.process([{el: document.body, ctx: data}]);

// unregister a component:
delete act.registry.comp2;
Copy