Const Optional a: any[]Optional b: any[]Creates a new Observable whose value is derived from another Observable. The new Observable automatically updates and notifies listeners whenever the source Observable changes.
const value = createObservable(2);
// Create a derived observable that is true if value > 5
const isGreater = compute(value, (v) => v > 5);
// isGreater.value == false
value.dispatch(6);
// isGreater.value == true
Rest ...v: [...ExtractValue<T>[]]Create a new Observable
Consider using
state(...)instead.
Optional destroyer: (() => void)compute an observable and return a new Observable indicating if the value is equal to val
Returns the current mountPoint CTag. See mountPoint for more information.
compute an observable and return a new Observable that is equal to some property of the original Observable
Optional defaultVal: T[K]compute an observable and return a new Observable indicating if the value is greater than val
compute an observable and return a new Observable indicating if the value is greater than or equal val
It initializes the framework & makes the body tag the mount point (mountPoint). You can pass in a selector for an element you want to be the default tag ("body" by default).
compute an observable and return a new Observable indicating if the value is NOT empty
Check if a given object obj is a Observable
compute an observable and return a new Observable indicating if the value is less than val
compute an observable and return a new Observable 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 a State (aka. IObservable) to allow for individual item reactivity.
The reactive list of items. Each item is wrapped in a State to allow for individual reactivity.
The raw list of items.
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
});
Makes the given tag the mount point. This means that when other tags are created with "mountToParent" or (using <tag_name>.mount(), tag('<tag_name>', [], true)),
they will be added as children of this tag.
You can call mountPoint multiple times, and the last mount point tag will be used.
Then when you've finished, you can call restoreMountPoint to go back to the previously mounted tag if there is one.
You can clear all mount points using clearMountPoints.
mountPoint(div()); // Div 1
div.mount(); // added as child of div
p.mount(); // added as child of div
mountPoint(div()); // Div 2
div.mount(); // added as child of new div
p.mount(); // added as child of new div
restoreMountPoint(); // Back to div 1
clearMountPoints(); // Clears all mount points, no mount point after this call
compute an observable and return a new Observable indicating if the value is NOT empty
compute an observable and return a new Observable 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[]Clears the mount point history and resets the mount point to the first one. This means that the mount point will be the first tag that was mounted, and all other mount points will be cleared.
Restore the currently mounted tag (mountPoint). Goes back in the stack of mount points tags. If there is no previous mount point tag, it will not do anything.
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 }));
stateAdd adds an item to a reactive list.
It creates a new array with the existing items and the new item, then updates the state.
const myList = state([]);
stateAdd(myList, 'new item');
stateAddAt adds an item to a reactive list at a specific index.
It creates a new array with the existing items and the new item at the specified index, then updates the state.
const myList = state([]);
stateAddAt(myList, 'new item', 0);
stateRemove removes a specific item from a reactive list.
It finds the index of the item in the list and calls stateRemoveWhere to remove it.
const myList = state([1, 2, 3, 4]);
stateRemove(myList, 2); // Removes the item with value 2
stateRemoveWhere removes items from a reactive list based on a callback function.
It filters the list and updates the state with the remaining items.
const myList = state([1, 2, 3, 4]);
stateRemoveWhere(myList, (item) => item % 2 === 0); // Removes even numbers
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. Receives a third argument for mounting this tag to the currently mounted tag (context.mountPoint).
tag('div');
tag('(body)');
tag('(.someclass)');
tag(document.querySelector('#something'));
Create a TextNode from text, and optionally reacts to a IObservable, interpolating the defined variables in the text each time the state changes.
If you provide a IObservable 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 | IObservable<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[]withLifecycle is a utility function that adds lifecycle hooks to a Cardboard tag.
Will call handler.mounted when the element is added to the DOM.
Then call handler.beforeUnmount before the element is removed from the DOM.
Finally call handler.unmounted when the element is removed from the DOM.
const myTag = withLifecycle(
div('Hello World'),
{
mounted: (tag) => {
console.log('Mounted:', tag);
return true; // or false to prevent mounting
},
unmounted: (tag) => {
console.log('Unmounted:', tag);
},
beforeUnmount: (tag) => {
console.log('Before Unmount:', tag);
return true; // or false to prevent unmounting
},
}
);
Sets the mount point to the given tag, calls the scoped callback, and then restores the mount point. Useful for creating a temporary mount point for a specific tag, and then restoring the previous mount point.
Generates a unique ID for a Cardboard tag.
If an idNumber is provided, it will return a string in the format c_<idNumber>.
If no idNumber is provided, it will generate a random UUID in the format c_xxxxxxxxxx.
Optional idNumber: numberA unique ID string for a Cardboard tag.
Will call {mounted} when the element is added to the DOM. And will call {beforeUnmounted} before the element is removed from the DOM. Finally will call {onUnmounted} when the element is removed from the DOM.
Optional onMounted: ((tag) => boolean | Promise<boolean>)Optional onUnmounted: ((tag) => void)Optional beforeUnmounted: ((tag) => boolean | Promise<boolean>)Generated using TypeDoc
Restores all mount points. There will be no mount points tag after calling this function.