Any number of arguments can be given. How they're interpreted depends on their types:
string: Strings can be used to create and insert new elements, set classnames for the current element, and add text to the current element.
The format of a string is: tag? (. class)* (':' text)?
meaning it consists of...
h1. If present, a DOM element of that tag is created, and that element will be the current element for the rest of this $ function execution.. characters. These classes will be added to the current element.: character, ranging til the end of the string. This will be added as a TextNode to the current element.function: When a function (without argument nor a return value) is passed in, it will be reactively executed in its own observe scope, preserving the current element. So any $() invocations within this function will create DOM elements with our current element as parent. If the function reads observable data, and that data is changed later on, the function we re-execute (after side effects, such as DOM modifications through $, have been cleaned - see also clean).object: When an object is passed in, its key-value pairs are used to modify the current element in the following ways...
{<attrName>: any}: The common case is setting the value as an HTML attribute named key. So {placeholder: "Your name"} would add placeholder="Your name" to the current HTML element.{<propName>: boolean} or {value: any} or {selectedIndex: number}: If the value is a boolean, or if the key is value or selectedIndex, it is set on the current element as a DOM property instead of an HTML attribute. For example {checked: true} would do el.checked = true for the current element.{".class": boolean}: If the key starts with a . character, its either added to or removed from the current element as a CSS class, based on the truthiness of the value. So {".hidden": hide} would toggle the hidden CSS class.{<eventName>: function}: If the value is a function it is set as an event listener for the event with the name given by the key. For example: {click: myClickHandler}.{$<styleProp>: value}: If the key starts with a $ character, set a CSS style property with the name of the rest of the key to the given value. Example: {$backgroundColor: 'red'}.{create: string}: Add the value string as a CSS class to the current element, after the browser has finished doing a layout pass. This behavior only triggers when the scope setting the create is the top-level scope being (re-)run. This allows for creation transitions, without triggering the transitions for deeply nested elements being drawn as part of a larger component. The string may also contain multiple dot-separated CSS classes, such as .fade.grow.{destroy: string}: When the current element is a top-level element to be removed (due to reactivity cleanup), actual removal from the DOM is delayed by 2 seconds, and in the mean time the value string is added as a CSS class to the element, allowing for a deletion transition. The string may also contain multiple dot-separated CSS classes, such as .fade.shrink.{create: function} and {destroy: function}: The function is invoked when the current element is the top-level element being created/destroyed. It can be used for more involved creation/deletion animations. In case of destroy, the function is responsible for actually removing the element from the DOM (eventually). See transitions.ts in the Aberdeen source code for some examples.{bind: <obsValue>}: Create a two-way binding element between the value property of the given observable (proxy) variable, and the current input element (<input>, <select> or <textarea>). This is often used together with ref, in order to use properties other than .value.{<any>: <obsvalue>}: Create a new observe scope and read the value property of the given observable (proxy) variable from within it, and apply the contained value using any of the other rules in this list. Example:const myColor = proxy('red');
$('p:Test', {$color: myColor, click: () => myColor.value = 'yellow'})
// Clicking the text will cause it to change color without recreating the <p> itself
.value.{text: string|number}: Add the value as a TextNode to the current element.{html: string}: Add the value as HTML to the current element. This should only be used in exceptional situations. And of course, beware of XSS.{element: Node}: Add a pre-existing HTML Node to the current element.The most inner DOM element that was created (not counting text nodes nor elements created by content functions), or undefined if no elements were created.
$('button.secondary.outline:Submit', {
disabled: false,
click: () => console.log('Clicked!'),
$color: 'red'
});
let inputElement: Element = $('label:Click me', 'input', {type: 'checkbox'});
// You should usually not touch raw DOM elements, unless when integrating
// with non-Aberdeen code.
console.log('DOM element:', inputElement);
const state = proxy({ count: 0 });
$('div', () => { // Outer element
// This scope re-renders when state.count changes
$(`p:Count is ${state.count}`);
$('button:Increment', { click: () => state.count++ });
});
The core function for building reactive user interfaces in Aberdeen. It creates and inserts new DOM elements and sets attributes/properties/event listeners on DOM elements. It does so in a reactive way, meaning that changes will be (mostly) undone when the current scope is destroyed or will be re-execute.