property-information

Info for properties and attributes on the web-platform (HTML, SVG, ARIA, XML, XMLNS, XLink).

This package follows a sensible naming scheme as defined by hast.

Install

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

npm:

npm install property-information

Contents

• Use
• API
  • find(schema, name)
  • normalize(name)
  • html
  • svg
  • hastToReact
• Support
• Related
• License

Use

import {html, svg, find, normalize} from 'property-information'

console.log(find(html, 'className'))
// Or: find(html, 'class')
console.log(find(svg, 'horiz-adv-x'))
// Or: find(svg, 'horizAdvX')
console.log(find(svg, 'xlink:arcrole'))
// Or: find(svg, 'xLinkArcRole')
console.log(find(html, 'xmlLang'))
// Or: find(html, 'xml:lang')
console.log(find(html, 'ariaValueNow'))
// Or: find(html, 'aria-valuenow')

Yields:

{ space: 'html',
  attribute: 'class',
  property: 'className',
  spaceSeparated: true }
{ space: 'svg',
  attribute: 'horiz-adv-x',
  property: 'horizAdvX',
  number: true }
{ space: 'xlink', attribute: 'xlink:arcrole', property: 'xLinkArcrole' }
{ space: 'xml', attribute: 'xml:lang', property: 'xmlLang' }
{ attribute: 'aria-valuenow', property: 'ariaValueNow', number: true }

API

This package exports the following identifiers: html, svg, find, normalize, hastToReact. There is no default export.

find(schema, name)

Look up info on a property.

In most cases, the given schema contains info on the property. All standard, most legacy, and some non-standard properties are supported. For these cases, the returned Info has hints about the value of the property.

name can also be a valid data attribute or property, in which case an Info object with the correctly cased attribute and property is returned.

name can be an unknown attribute, in which case an Info object with attribute and property set to the given name is returned. It is not recommended to provide unsupported legacy or recently specced properties.

Parameters

• schema (Schema) — Either html or svg
• name (string) — An attribute-like or property-like name that is passed through normalize to find the correct info

Returns

Info.

Example

Aside from the aforementioned example, which shows known HTML, SVG, XML, XLink, and ARIA support, data properties, and attributes are also supported:

console.log(find(html, 'data-date-of-birth'))
// Or: find(html, 'dataDateOfBirth')

Yields:

{ attribute: 'data-date-of-birth', property: 'dataDateOfBirth' }

Unknown values are passed through untouched:

console.log(find(html, 'un-Known'))

Yields:

{ attribute: 'un-Known', property: 'un-Known' }

normalize(name)

Get the cleaned case-insensitive form of an attribute or a property.

Parameters

• name (string) — An attribute-like or property-like name

Returns

string that can be used to look up the properly cased property in a Schema.

Example

html.normal[normalize('for')] // => 'htmlFor'
svg.normal[normalize('VIEWBOX')] // => 'viewBox'
html.normal[normalize('unknown')] // => undefined
html.normal[normalize('accept-charset')] // => 'acceptCharset'

html

svg

Schema for either HTML or SVG, containing info on properties from the primary space (HTML or SVG) and related embedded spaces (ARIA, XML, XMLNS, XLink).

Example

console.log(html.property.htmlFor)
console.log(svg.property.viewBox)
console.log(html.property.unknown)

Yields:

{ space: 'html',
  attribute: 'for',
  property: 'htmlFor',
  spaceSeparated: true }
{ space: 'svg', attribute: 'viewBox', property: 'viewBox' }
undefined

Schema

A schema for a primary space.

• space ('html' or 'svg') — Primary space of the schema
• normal (Object.<string>) — Object mapping normalized attributes and properties to properly cased properties
• property (Object.<Info>) — Object mapping properties to info

Info

Info on a property.

• space ('html', 'svg', 'xml', 'xlink', 'xmlns', optional) — Space of the property
• attribute (string) — Attribute name for the property that could be used in markup (for example: 'aria-describedby', 'allowfullscreen', 'xml:lang', 'for', or 'charoff')
• property (string) — JavaScript-style camel-cased name, based on the DOM, but sometimes different (for example: 'ariaDescribedBy', 'allowFullScreen', 'xmlLang', 'htmlFor', 'charOff')
• boolean (boolean) — The property is boolean. The default value of this property is false, so it can be omitted
• booleanish (boolean) — The property is a boolean. The default value of this property is something other than false, so false must persist. The value can hold a string (as is the case with ariaChecked and its 'mixed' value)
• overloadedBoolean (boolean) — The property is boolean. The default value of this property is false, so it can be omitted. The value can hold a string (as is the case with download as its value reflects the name to use for the downloaded file)
• number (boolean) — The property is number. These values can sometimes hold a string
• spaceSeparated (boolean) — The property is a list separated by spaces (for example, className)
• commaSeparated (boolean) — The property is a list separated by commas (for example, srcSet)
• commaOrSpaceSeparated (boolean) — The property is a list separated by commas or spaces (for example, strokeDashArray)
• mustUseProperty (boolean) — If a DOM is used, setting the property should be used for the change to take effect (this is true only for 'checked', 'multiple', 'muted', and 'selected')
• defined (boolean) — The property is defined by a space. This is true for values in HTML (including data and ARIA), SVG, XML, XMLNS, and XLink. These values can only be accessed through find.

hastToReact

hast is close to React, but differs in a couple of cases. To get a React property from a hast property, check if it is in hastToReact (Object.<string>), if it is, then use the corresponding value, otherwise, use the hast property.

Support

Related

• web-namespaces — List of web namespaces
• space-separated-tokens — Parse/stringify space-separated tokens
• comma-separated-tokens — Parse/stringify comma-separated tokens
• html-tag-names — List of HTML tags
• mathml-tag-names — List of MathML tags
• svg-tag-names — List of SVG tags
• html-void-elements — List of void HTML tag-names
• svg-element-attributes — Map of SVG elements to allowed attributes
• html-element-attributes — Map of HTML elements to allowed attributes
• aria-attributes — List of ARIA attributes

License

MIT © Titus Wormer

Derivative work based on React licensed under BSD-3-Clause-Clear, © 2013-2015, Facebook, Inc.