mvdom-xp

Experimental / Exploration APIs on top of mvdom core.

• Those APIs might change a lot, and for external teams, it is recommended to copy/paste (i.e. Cherrypick) what is needed.
• We will try to keep the semver rules when breaking APIs, but no garantee.
• At this point, minimum documentation and unit testing at this point (beside the private applications we are building wit it)
• Mostly made to be used with TypeScript, but should work with pure JavaScript.

Note: Some of those APIs might move to mvdom core at some point, and will be deprecated/removed for this module.

Doc

style

Convenient method for applying styling one or more html elements with a set of css properties. Uses

import {style} from 'mvdom-xp';
 
const el: HTMLElement = ...;
style(el, {
  color: 'red',
  width: '100%'
});
 
style(els,  {
  color: 'red',
  width: '100%'
}); // works with array

attr

Extract attribute values:

// extract single value
const val: string | null = attr(el, 'name');
// extract array of value for a single el
const [name, label] = attr(el, ['name', 'label']);
// extract single attribute from multiple els
const names: (string | null)[] = attr(els,'name');
// extract and array of (values) for the array of els
const names: [string | null][][] = attr(els, ['name', 'label']);

Set attribute values:

// set singloe value
attr(el, 'name', 'username'); // can use el.setAttribute('name','username') as well
attr(el, {name: 'username', placeholder: 'Enter username'});
// set the same attribute to all of the element
attr(els, {checked: true, readonly: ''}); // true will set empty attribute (i.e. same as '' as value)

css

Set one or more css value based on the key property.

// value == null or === false, the class name key is removed, otherwise it is added. 
css(el, {prime: true, sel: '', 'dark-mode': false, 'mobile-mode': null } );
// <.. class="prime sel" 

dnd (Drag And Drop core API)

Enable a one or more HTMLElements (via on-demand CSS selector bindings) drag and drop logic.

Note: Compared to most if not all Drag and Drop JS Libraries, the css selector is on demand, meaning it is one binding on the container, and it is only when the drag trigger events get initiated that the selector is ran. This gives great flexibility and performance benefits (.e.g, O(1) binding vs O(n))

const containerEl: HTMLElement = ...;
 
draggable(containerEl, '.item', { // DragController
  onStart: (evt: { source: HTMLElement, handle: HTMLElement }) => void {
    // ...
  },
 
    onDrag: (evt: DragEventDetail) => void {
    // ...
  }, 
 
    /** Called when the drag event end (e.g., mouseup), return true to remove the handle and false for custom handle management. */
    onEnd: (evt: DragEventDetail) => boolean | Promise<boolean> {
    // ...
  }
});