attr-types

Attr Types

Convert simple types to and from HTML node attributes. This is useful when building WebComponents.

Note that this only allows simple types (as opposed to complex types), which are typically used in HTML attributes. See this on how to pass complex data to WebComponents.

Parsing

import AttrTypes from 'attr-types';

AttrTypes.string('asdf')   // => 'asdf'
AttrTypes.number('3')      // => 3
AttrTypes.array('w,a,s,d') // => ['w', 'a', 's', 'd']
AttrTypes.bool('')         // => true
AttrTypes.bool(null)       // => false

const aOfN = AttrTypes.arrayOf(number);
aOfN('1,2,3') // => [1, 2, 3]
aOfN('1,2,c') // => null

const lOrR = AttrTypes.oneOf(['left', 'right']);
AttrTypes.lOrR('left') // => 'left'
AttrTypes.lOrR('down') // => null

Stringifying

import AttrTypes from 'attr-types';

AttrTypes.number.stringify(3) // => '3'
AttrTypes.array.stringify(['w', 'a', 's', 'd']) // => 'w,a,s,d'
AttrTypes.bool.stringify(true) // => ''
AttrTypes.bool.stringify(false) // => null

const aOfN = AttrTypes.arrayOf(number);
aOfN.stringify([1, 2, 3]) // => '1,2,3'

const lOrR = AttrTypes.oneOf(['left', 'right']);
lOrR.stringify('left') // => 'left'
lOrR.stringify('down') // => null

DOM Interaction

To get the value of an attribute (e.g. inside attributeChangedCallback):

// You need to remember the type
const attrType = getTypeFor(attrName);
const value = attrType(el.getAttribute(attrName));

To reflect a changed property in the node attributes, use:

// You need to remember the type
const attrType = getTypeFor(attrName);

const attr = attrType.stringify(value);

if (attr == null) {
  el.removeAttribute(attrName);
} else {
  el.setAttribute(attrName, attr);
}

AttrTypes is used in the wild by hy-drawer and hy-push-state.