Construct a new Actribute instance.
A component specifier is of the form [attrPrefix][componentName]="..."
When a component specifier is encountered, the component's function will be invoked with the element and the matching attribute as arguments.
The attribute can be string (where at least 1 property name is specified), or boolean (where no property is specified).
An 'open' element means its children are processed after it and a closed
element means they are not. Elements are 'open' by default when there are no
matching components on them and 'closed' otherwise. The optional init object
can be used to set the attribute names that are used to override this behavior.
The default open attribute is o-pen and the one for closed is c-losed.
Optional init: IActributeInitThe value to assign to attrPrefix. Defaults to 'c-'
import { Actribute } from 'deleight/actribute';
const init = {open: 'o-pen', closed: 'c-losed'};
const act = new Actribute(init);
document.body.innerHTML = `
<header></header>
<article >
<p>I am processed</p>
<p>I am processed</p>
</article>
<article c-losed>
<p>I am not processed</p>
<p>I am not processed</p>
<p>I am not processed</p>
</article>
`;
act.process(document.body)
The attribute used to specify that the tree of an element with components is not open to nested processing.
The attribute used to specify that the tree of an element with components is open to nested processing.
The object that holds all registered components. The keys are the component names and the values are the component functions.
Recursively processes options.el (or document.body by default) to
identify and apply components. Attributes with names starting with
options.attr (or c- by default) or options.rattr (or r- by default)
are treated as component specifiers.
At elements where any components are encountered, the components
are called with the element, the attribute and any specified
context objects (...(options.context || [])).
Where a component is encountered, decendants are not processed unless this.open
attribute is present on the element. At elements without a component, the descendants
are processed recursively, except this.closed boolean attribute is
specified. These are supposed to echo the semantics of the Shadow DOM API.
If a component is not found and a wild-card component is registered (with '*'), the widcard component is called instead.
options.attr prefixes a component that is applied once while options.rattr
prefixes one that is applied recursively on all descendant elements which are not
within closed elements. Recursive attributes can save a lot of typing.
Returns the same actribute to support call chaining.
Optional options: IProcessOptionsOptional recursiveComps: Map<IComponent, Attr>import { Actribute, props } from 'deleight/actribute';
const act = new Actribute();
act.register({
comp1: (element, attr, singleContext) => element.textContent = attr.value,
comp2: (element, attr, singleContext) => element.style.left = props(attr.value, [singleContext][0])
});
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}]);
Registers multiple components at once using an object that maps component names to component functions.
import { Actribute } from 'deleight/actribute';
const act = new Actribute();
act.register({
comp1: (element, attr, singleContext) => element.textContent = attr.value,
comp2: (element, attr, singleContext) => element.style.left = props(attr.value, [singleContext])
});
An Actribute class. Instances can be used to register components and process elements. This is almost like a custom elements registry.
Example