property-information

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

Contents

• What is this?
• When should I use this?
• Install
• Use
• API
  • Info
  • Schema
  • Space
  • find(schema, name)
  • hastToReact
  • html
  • normalize(name)
  • svg
• Compatibility
• Support
• Security
• Related
• Contribute
• License

What is this?

This package contains lots of info on all the properties and attributes found on the web platform. It includes data on HTML, SVG, ARIA, XML, XMLNS, and XLink. The names of the properties follow hast’s sensible naming scheme. It includes info on what data types attributes hold, such as whether they’re booleans or contain lists of space separated numbers.

When should I use this?

You can use this package if you’re working with hast, which is an AST for HTML, or have goals related to ASTs, such as figuring out which properties or attributes are valid, or what data types they hold.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install property-information

In Deno with esm.sh:

import * as propertyInformation from 'https://esm.sh/property-information@7'

In browsers with esm.sh:

<script type="module">
  import * as propertyInformation from 'https://esm.sh/property-information@7?bundle'
</script>

Use

import {find, html, svg} 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:

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

API

This package exports the identifiers find, hastToReact, html, normalize, and svg. There is no default export. It exports the TypeScript types Info, Schema, and Space.

Info

Info on a property (TypeScript type).

Fields

• attribute (string) — attribute name for the property that could be used in markup (such as 'aria-describedby', 'allowfullscreen', 'xml:lang', 'for', or 'charoff')
• booleanish (boolean) — the property is like a boolean (such as draggable); these properties have both an on and off state when defined, and another state when not defined
• boolean (boolean) — the property is a boolean (such as hidden); these properties have an on state when defined and an off state when not defined
• commaOrSpaceSeparated (boolean) — the property is a list separated by spaces or commas (such as strokeDashArray)
• commaSeparated (boolean) — the property is a list separated by commas (such as coords)
• defined (boolean) — the property is defined by a space; this is the case for values in HTML (including data and ARIA), SVG, XML, XMLNS, and XLink; not defined properties can only be found through find
• mustUseProperty (boolean) — when working with the DOM, this property has to be changed as a field on the element, instead of through setAttribute (this is true only for 'checked', 'multiple', 'muted', and 'selected')
• number (boolean) — the property is a number (such as height)
• overloadedBoolean (boolean) — the property is like a boolean (such as download); these properties have an on state and more states when defined and an off state when not defined
• property (string) — JavaScript-style camel-cased name; based on the DOM but sometimes different (such as 'ariaDescribedBy', 'allowFullScreen', 'xmlLang', 'htmlFor', 'charOff')
• spaceSeparated (boolean) — the property is a list separated by spaces (such as className)
• space (Space or undefined) — space of the property

Schema

Schema for a primary space (TypeScript type).

Fields

• normal (Record<string, string>) — object mapping normalized attributes and properties to properly cased properties
• property (Record<string, Info>) — object mapping properties to info
• space ('html' or 'svg') — primary space of the schema

Space

Space of a property (TypeScript type).

Type

type Space = 'html' | 'svg' | 'xlink' | 'xmlns' | 'xml'

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) — schema; either the html or svg export
• name (string) — an attribute-like or property-like name; it will be passed through normalize to hopefully 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')
// => {attribute: 'data-date-of-birth', property: 'dataDateOfBirth'}

Unknown values are passed through untouched:

console.log(find(html, 'un-Known'))
// => {attribute: 'un-Known', property: 'un-Known'}

hastToReact

Special cases for React (Record<string, string>).

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. If it is, use the corresponding value.

html

Schema for HTML, with info on properties from HTML itself and related embedded spaces (ARIA, XML, XMLNS, XLink).

Example

console.log(html.property.htmlFor)
// => {attribute: 'for', property: 'htmlFor', spaceSeparated: true, space: 'html'}
console.log(html.property.unknown)
// => undefined

normalize(name)

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

Parameters

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

Returns

Value (string) that can be used to look up the properly cased property on a Schema.

Example

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

svg

Schema for SVG, with info on properties from SVG itself and related embedded spaces (ARIA, XML, XMLNS, XLink).

Example

console.log(svg.property.viewBox)
// => {attribute: 'viewBox', property: 'viewBox', space: 'svg'}
console.log(svg.property.unknown)
// => undefined

Compatibility

This package is at least compatible with all maintained versions of Node.js. As of now, that is Node.js 16+. It also works in Deno and modern browsers.

Support

Security

This package is safe.

Related

• wooorm/web-namespaces — list of web namespaces
• wooorm/space-separated-tokens — parse/stringify space separated tokens
• wooorm/comma-separated-tokens — parse/stringify comma separated tokens
• wooorm/html-tag-names — list of HTML tag names
• wooorm/mathml-tag-names — list of MathML tag names
• wooorm/svg-tag-names — list of SVG tag names
• wooorm/html-void-elements — list of void HTML tag names
• wooorm/svg-element-attributes — map of SVG elements to allowed attributes
• wooorm/html-element-attributes — map of HTML elements to allowed attributes
• wooorm/aria-attributes — list of ARIA attributes

Contribute

Yes please! See How to Contribute to Open Source.

License

MIT © Titus Wormer

Derivative work based on React licensed under MIT © Facebook, Inc.

Current Tags

• 7.1.0                                ...           latest (a year ago)

32 Versions

• 7.1.0                                ...           a year ago
• 7.0.0                                ...           a year ago
• 6.5.0                                ...           2 years ago
• 6.4.1                                ...           2 years ago
• 6.4.0                                ...           2 years ago
• 6.3.0                                ...           3 years ago
• 6.2.0                                ...           3 years ago
• 6.1.1                                ...           4 years ago
• 6.1.0                                ...           4 years ago
• 6.0.1                                ...           5 years ago
• 6.0.0                                ...           5 years ago
• 5.6.0                                ...           5 years ago
• 5.5.0                                ...           6 years ago
• 5.4.0                                ...           6 years ago
• 5.3.0                                ...           7 years ago
• 5.2.2                                ...           7 years ago
• 5.2.1                                ...           7 years ago
• 5.2.0                                ...           7 years ago
• 5.1.0                                ...           7 years ago
• 5.0.1                                ...           7 years ago
• 5.0.0                                ...           7 years ago
• 4.2.0                                ...           8 years ago
• 4.1.0                                ...           8 years ago
• 4.0.3                                ...           8 years ago
• 4.0.2                                ...           8 years ago
• 4.0.1                                ...           8 years ago
• 4.0.0                                ...           8 years ago
• 3.2.0                                ...           9 years ago
• 3.1.0                                ...           10 years ago
• 3.0.0                                ...           10 years ago
• 2.0.0                                ...           11 years ago
• 1.0.0                                ...           11 years ago