Const const { div, p, abbr, img, style, ... } = allTags;
Optional a: any[]Optional b: any[]Attach the given tag. This means that when other tags are created marked as attachable (using <tag_name>.attach(), tag('<tag_name>', [], true)),
they will be added as children of this tag.
You can call attach multiple times, and the last attach tag will be used.
Then when you've finished, you can call detach to go back to the previously attached tag if there is one, or clear the attached tag.
attach(div());
div.attach(); // added as child of div
p.attach(); // added as child of div
attach(div()); // New div
div.attach(); // added as child of new div
p.attach(); // added as child of new div
detach(); // Back to previous div
detach(); // No attached tag
Create a new Consumable
Optional destroyer: (() => void)Detach the currently attached tag (attach). If there was another attached tag before it will become the currently attached tag. If there are no previous attached tags, it will clear the attached tag.
Detaches all attached tags. There will be no attached tag after calling this function.
intersect a consumable and return a new Consumable indicating if the value is equal to val
intersect a consumable and return a new Consumable that is equal to some property of the original Consumable
Optional defaultVal: T[K]intersect a consumable and return a new Consumable indicating if the value is greater than val
intersect a consumable and return a new Consumable indicating if the value is greater than or equal val
Creates a new Consumable that intersects another Consumable. The new Consumable updates and dispatches whenever the other Consumable changes.
const value = createConsumable(2);
const isGreater = intersect(cons, (value) => value > 5);
// > isGreater == false;
value.dispatch(6);
// > isGreater == true;
Rest ...v: [...ExtractValue<T>[]]Check if a given object obj is a Consumable
intersect a consumable and return a new Consumable indicating if the value is NOT empty
intersect a consumable and return a new Consumable indicating if the value is less than val
intersect a consumable and return a new Consumable indicating if the value is less than or equal val
listState creates a reactive list of values that can be used with tags to manage dynamic and reactive apps.
It wraps each item with an IConsumable
https://github.com/nombrekeff/cardboard-js/wiki/ListState
const myList = listState([1, 2, 3]);
myList.add(4);
myList.addAt(0, 0);
myList.remove(2);
myList.removeWhere(item => item === 3);
const listValues = myList.listValue;
const listLength = myList.length;
// Listen to changes in the list
myList.list.changed(() => {
// List has changed
});
intersect a consumable and return a new Consumable indicating if the value is NOT empty
intersect a consumable and return a new Consumable indicating if the value is NOT equal to val
Removes an item from an array if it exists. It returns whether it was removed or not
Optional list: T[]state creates a reactive value that can the be used with tags to create dinamic and reactive apps.
https://github.com/nombrekeff/cardboard-js/wiki/State
const count = state(0);
count.changed(() => { ... });
count.dispatch(2);
count.value++;
div().hideIf(count);
div().disableIf(count);
div(template('Count is: $count', { count: count }));
This function can do the following based on the first argument:
div, abbr, custom-tag, ...),'(body)', '(#id)', '(.class)'), any selector is allowed.Then it can receive a list of children to be added. And receives a third argument for attaching this tag to the currently attach tag (attach)
tag('div');
tag('(body)');
tag('(.someclass)');
tag(document.querySelector('#something'));
Create a TextNode from text, and optionally reacts to a IConsumable, interpolating the defined variables in the text each time the state changes.
If you provide a IConsumable as the second argument, the text will act as a template
and can reference properties in the state: $count, $someValue.
When the state properties changes, the text node will be automatically updated with the new text. Only the properties that are referenced in the template will be listened to.
NOTE If you're not interpolating, and dont need to change the text, you can directly pass in a string ('string') instead of (text('string')).
Optional obj: K | IConsumable<T>https://github.com/nombrekeff/cardboard-js/wiki/Managing-Text
const st = state({ count: 0 });
p(text('Raw text!'));
p(text(`Count: $count`, st));
Rest ...args: any[]Will call {handler.onStart} when the element is added to the DOM. And will call {handler.onRemove} when the element is removed from the DOM.
Optional beforeOptional removed?: ((tag) => void)Optional start?: ((tag) => boolean | Promise<boolean>)Will call {onStart} when the element is added to the DOM. And will call {onRemove} when the element is removed from the DOM.
Optional onStart: ((tag) => boolean | Promise<boolean>)Optional onRemove: ((tag) => void)Optional beforeRemove: ((tag) => boolean | Promise<boolean>)Generated using TypeDoc
List of all HTML tag functions. From
divtoabbr:) If you want to create any other tag, use the tag function.