API REFERENCE

VOX

‎

vox()

^TYPE
Function

^PARAMETERS
{ el: string | Element } ?

^RETURNS
{ init: Function, exit: Function }

^DESCRIPTION
Creates two functions to initialize/uninitialize elements.

controls all [vox] elements and their descendants:

const { init, exit } = vox();

controls the #app element and its descendants:

const { init, exit } = vox({ el: '#app' });

‎

vox.api

^TYPE
Object

^DESCRIPTION
An object of named components available inside vox directives.

vox.api.counter = () => ({
  count: 0,
  decrement() {
    count--;
  },
  increment() {
    count++;
  }
});

‎

vox.api.app

^TYPE
Object

^DESCRIPTION
An extendable component for the global app context.

vox.api.app.log = (x) => {
  console.log({ [x]: x });
};

‎

vox.config

^TYPE
Object

^DESCRIPTION
vox configuration (currently empty).

‎

vox.version

^TYPE
string

^DESCRIPTION
vox version in use.

if (parseInt(vox.version) > 0) {
  // ...
} else {
  // ...
}

‎

DIRECTIVES

‎

vox

^SYNTAX
vox="{ ... }"

^DESCRIPTION
Creates a new component.

<div vox="{ cupcake: '🧁' }">
  ...
</div>

‎

vox:for

^SYNTAX
vox:for="(item in items)"
vox:for="(item of items)"
vox:for="(item, index) in items"
vox:for="(item, key, index) in items"
_{Parentheses are optional.}

^DESCRIPTION
Renders an element any number of times.
Supports arrays, objects, strings and integers >= 0.

<ol vox="{ items: [ '🌮', '🍩', '☕️' ] }">
  <li vox:for="(item, i) in items">
    ...
  </li>
</ol>

<div vox:for="(number in 10)">
  ...
</div>

‎

vox:if

^SYNTAX
vox:if="(condition)"
_{Parentheses around condition are optional.}

^DESCRIPTION
Conditionally renders an element.

<div vox="{ x: 10 }">
  <div vox:if="(x > 0)">
    ...
  </div>
</div>

‎

vox:is

^SYNTAX
vox:is="(name)"
_{Parentheses around name are optional.}

^DESCRIPTION
Registers a reference to an element on the global els object.

<input vox:is="('foo')"/>
<input vox:is="('bar')"/>

<div vox:init="{
  console.log(els.foo);
  console.log(els.bar);
}">
  ...
</div>

‎

vox:init

^SYNTAX
vox:init="{ ... }"
_{Braces around code block are optional.}

^DESCRIPTION
Executes a piece of code when an element is initialized (mounted).

<div vox:init="console.log('🎉')">
  ...
</div>

‎

vox:«name»

^SYNTAX
vox:name="(expression)"
_{Parentheses around expression are optional.}

^DESCRIPTION
Binds a JavaScript property to an expression.
Supports all lowercase properties and some extras as well.

<div vox="{ open: false }">
  <button vox:disabled="(open)">
    click
  </button>
  <div vox:hidden="(!open)">
    ...
  </div>
</div>

‎

vox:aria

^SYNTAX
vox:aria="{ ... }"
vox:aria:name="(expression)"
_{Parentheses around expression are optional.}

^DESCRIPTION
Binds an aria attribute to an expression.

<div vox="{ disabled: true, expanded: false }">
  <button vox:aria="{ disabled, expanded }">
    click
  </button>
</div>

<div vox="{ active: false }">
  <button vox:aria:pressed="(active)">
    click
  </button>
</div>

‎

vox:attr

^SYNTAX
vox:attr="{ ... }"
vox:attr:name="(expression)"
_{Parentheses around expression are optional.}

.camel converts the kebab-case attribute name into camelCase.

^DESCRIPTION
Binds an attribute to an expression.

<div vox="{ auto: 'off' }">
  <input vox:attr="{
    autocapitalize: auto,
    autocomplete: auto
  }"/>
</div>

<svg vox:attr:view-box.camel="(`0 0 ${x} ${y}`)">
  ...
</svg>

‎

vox:class

^SYNTAX
vox:class="(expression)"
vox:class:name="(expression)"
_{Parentheses around expression are optional.}

.camel converts the kebab-case class name into camelCase.

^DESCRIPTION
Binds a class name to an expression.
Supports strings, objects and mixed arrays.

<div vox="{ a: 1, b: false }">
  <div vox:class="[ { alpha: a, bravo: b }, 'charlie' ]">
    ...
  </div>
</div>

<div vox="{ active: false }">
  <div vox:class:active="(active)">
    ...
  </div>
</div>

‎

vox:event

^SYNTAX
vox:event="{ ... }"
vox:event:name="{ ... }"
vox:onevent="{ ... }"
_{Braces around code block are optional.}

.camel converts the kebab-case event name into camelCase;
.window .win attaches the event handler to the window object;
.document .doc attaches the event handler to the document object;
.prevent calls event.preventDefault();
.stop calls event.stopPropagation();
.outside .out listens for the event outside the element;
.self only continues code execution if event.target is the element itself;
.«button» only continues code execution if a certain mouse button is pressed *;
.«key» only continues code execution if a certain key is pressed **;
.«modifier» only continues code execution if a certain modifier key is pressed ***;
.repeat only continues code execution if a certain key is being held down;
.capture sets the event listener's capture option to true;
.once sets the event listener's once option to true;
.passive sets the event listener's passive option to true.

* .back .forward .left .middle .mid .right
** .delete .del .down .enter .escape .esc .left .right .space .tab .up
*** .alt .ctrl .meta .shift

^DESCRIPTION
Attaches an event handler to an element.

<button vox:event="{
  mouseover: (event) => {
    console.log('wait for it...');
  },
  click: (event) => {
    console.log('click! 💥');
  }
}">
  click
</button>

<div vox:event:my-event.win="{
  console.log(el);
  console.log(event.currentTarget);
  console.log(event.detail);
}">
  ...
</div>

<img src="https://picsum.photos/100" vox:onload="console.log('🎆')"/>

‎

vox:focus

^SYNTAX
vox:focus="(condition)"
_{Parentheses around condition are optional.}

^DESCRIPTION
Conditionally focuses an element.

<div vox="{ active: false }">
  <textarea vox:focus="(active)">
    ...
  </textarea>
</div>

‎

vox:html

^SYNTAX
vox:html="(expression)"
_{Parentheses around expression are optional.}

^DESCRIPTION
Binds an element's innerHTML to an expression.

<div vox="{ x: 3 }">
  <span vox:html="(`<var>${x}</var>`)"></span>
</div>

‎

vox:run

^SYNTAX
vox:run="{ ... }"
_{Braces around code block are optional.}

^DESCRIPTION
Executes a piece of code immediately and every time its data changes.

<div vox="{ x: 0 }" vox:run="console.log(x)">
  <button vox:onclick="(x++)">
    click
  </button>
</div>

‎

vox:style

^SYNTAX
vox:style="(expression)"
vox:style:name="(expression)"
_{Parentheses around expression are optional.}

^DESCRIPTION
Binds an inline style to an expression.
Supports strings, objects and mixed arrays.

<div vox:style="(`color: ${accent};`)">
  ...
</div>

<div vox="{ color: 'pink', background: 'black' }">
  <div vox:style="{ color, background }">
    ...
  </div>
</div>

<div vox:style:font-size="(1.25 + 'em')">
  ...
</div>

‎

vox:text

^SYNTAX
vox:text="(expression)"
_{Parentheses around expression are optional.}

^DESCRIPTION
Binds an element's textContent to an expression.

<div vox="{ x: 3 }">
  <span vox:text="(x)"></span>
</div>

‎

vox:exit

^SYNTAX
vox:exit="{ ... }"
_{Braces around code block are optional.}

^DESCRIPTION
Executes a piece of code when an element is uninitialized (unmounted).

<div vox:exit="console.log('💩')">
  ...
</div>

‎

vox:skip

^SYNTAX
vox:skip
vox:skip="(condition)"
_{Parentheses around condition are optional.}

^DESCRIPTION
Skips an element and its descendants from initialization.
Optionally, evaluates an expression before an element is initialized and conditionally skips it and its descendants.

<div vox:skip>skip!</div>
<div vox:skip="(0)">don't skip!</div>
<div vox:skip="(1)">skip!</div>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

API REFERENCE

VOX

DIRECTIVES

Clone this wiki locally