Embed 2.0
Visibility
Elements are now removed from the DOM when set to be hidden. This means that:
- Apps are kept performant by minimizing the amount of present DOM elements at a time.
- CSS selectors like nth:child() work as expected.
Lists
- Template elements are removed from the DOM and just kept in memory for reference.
- Each new clone has independent fine grained reactivity, making updates way more performant. Updates are applied per item instead of the whole list.
- Clones that must be hidden are removed from the DOM, improving performance and making CSS selectors like nth:child() work as expected.
- When re-rendering the list, existing clones are reused instead of destroying the entire list and re-rendering it again.
Nested Lists
Nested lists are managed independently. When applying an update to one nested item, it only affects that nested item.
Title
Description
Forms
Embed 2.0 empowers creators to build accessible apps through forms.
Computed variables
Embed 2.0 adds even more reactive capabilities with computed variables.
Computed variables are automatically recomputed whenever one of their dependencies changes its value.
For example, v.light3 will automatically be recalculated whenever v.light1 or v.light2 change.
Two-way binding
The data store has now two way binding for:
Input elements: try typing
window.Wized.data.i.reactive_input.value = "This is a new value!"
and you will see how the input is updated automatically.
URL parameters: try typing
window.Wized.data.n.parameter.foo.value = "This is a new param value!"
and you will see how the parameter in the URL is updated automatically.
Cookies: try typing
window.Wized.data.c.foo.value = "This is a new cookie value!"
and you will see how the cookie is updated automatically.
New events system in the JavaScript API
Wized general API
Wized.on('request', (event) => void)
This event is emitted whenever a request is fulfilled. Contains:
- event.id: The request ID.
- event.name: The request name.
- event.number: The request number.
- event.data: The response data.
- event.status: The response status.
- event.statusText: The response status text.
- event.after: A Promise that resolves when all the After Request actions are finished.
Blocks API
Blocks can be accessed via window.Wized.blocks.
Block.on('attribute', (event) => void))
Fires when an attribute action updates an HTML attribute of the block. Contains:
- event.key: The HTML Attribute key.
- event.value: The new value.
Block.on('class', (event) => void))
Fires when a class action updates a CSS class of the block. Contains:
- event.className: The CSS class name.
- event.valid: Defines if the class was added or removed.
Block.on('list', (event) => void))
Fires when a list action renders or updates clones of the template block. Contains:
- event.addedClones: The added block clones.
- event.updatedClones: The clones that were kept in the DOM.
- event.removedClones: The clones that were destroyed.
Block.on('parameter', (event) => void))
Fires when a parameter action updates a URL parameter of the block. Contains:
- event.name: The URL parameter name.
- event.value: The new value.
Block.on('style', (event) => void))
Fires when a style action updates an inline style of the block. Contains:
- event.style: The style name.
- event.value: The new value.
Block.on('text', (event) => void))
Fires when a text action updates the block's text. Contains:
- event.type: The type of update that was made (text, html or markdown).
- event.value: The new value.
Block.on('value', (event) => void))
Fires when a value action updates the block input value. Contains:
- event.value: The new value.
Block.on('visibility', (event) => void))
Fires when a visibility action updates the block's render state. Contains:
- event.displayed: Defines if the block was added or removed from the DOM.