Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

property-information

Package Overview
Dependencies
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

property-information - npm Package Compare versions

Comparing version 6.0.1 to 6.1.0

4

index.d.ts
export {find} from './lib/find.js'
export {hastToReact} from './lib/hast-to-react.js'
export {normalize} from './lib/normalize.js'
export var html: import('./lib/util/schema.js').Schema
export var svg: import('./lib/util/schema.js').Schema
export const html: import('./lib/util/schema.js').Schema
export const svg: import('./lib/util/schema.js').Schema
export type Info = import('./lib/util/info.js').Info
export type Schema = import('./lib/util/schema.js').Schema

@@ -17,3 +17,3 @@ /**

export {normalize} from './lib/normalize.js'
export var html = merge([xml, xlink, xmlns, aria, htmlBase], 'html')
export var svg = merge([xml, xlink, xmlns, aria, svgBase], 'svg')
export const html = merge([xml, xlink, xmlns, aria, htmlBase], 'html')
export const svg = merge([xml, xlink, xmlns, aria, svgBase], 'svg')

@@ -1,1 +0,1 @@

export var aria: import('./util/schema.js').Schema
export const aria: import('./util/schema.js').Schema
import {booleanish, number, spaceSeparated} from './util/types.js'
import {create} from './util/create.js'
export var aria = create({
transform: ariaTransform,
export const aria = create({
transform(_, prop) {
return prop === 'role' ? prop : 'aria-' + prop.slice(4).toLowerCase()
},
properties: {

@@ -58,10 +60,1 @@ ariaActiveDescendant: null,

})
/**
* @param {unknown} _
* @param {string} prop
* @returns {string}
*/
function ariaTransform(_, prop) {
return prop === 'role' ? prop : 'aria-' + prop.slice(4).toLowerCase()
}
/**
* @param {import('./util/schema.js').Schema} schema
* @param {Schema} schema
* @param {string} value
* @returns {import('./util/info.js').Info}
* @returns {Info}
*/
export function find(
schema: import('./util/schema.js').Schema,
value: string
): import('./util/info.js').Info
export function find(schema: Schema, value: string): Info
export type Schema = import('./util/schema.js').Schema
import {Info} from './util/info.js'

@@ -0,1 +1,5 @@

/**
* @typedef {import('./util/schema.js').Schema} Schema
*/
import {normalize} from './normalize.js'

@@ -5,15 +9,15 @@ import {DefinedInfo} from './util/defined-info.js'

var valid = /^data[-\w.:]+$/i
var dash = /-[a-z]/g
var cap = /[A-Z]/g
const valid = /^data[-\w.:]+$/i
const dash = /-[a-z]/g
const cap = /[A-Z]/g
/**
* @param {import('./util/schema.js').Schema} schema
* @param {Schema} schema
* @param {string} value
* @returns {import('./util/info.js').Info}
* @returns {Info}
*/
export function find(schema, value) {
var normal = normalize(value)
var prop = value
var Type = Info
const normal = normalize(value)
let prop = value
let Type = Info

@@ -27,5 +31,18 @@ if (normal in schema.normal) {

if (value.charAt(4) === '-') {
prop = datasetToProperty(value)
// Turn it into a property.
const rest = value.slice(5).replace(dash, camelcase)
prop = 'data' + rest.charAt(0).toUpperCase() + rest.slice(1)
} else {
value = datasetToAttribute(value)
// Turn it into an attribute.
const rest = value.slice(4)
if (!dash.test(rest)) {
let dashes = rest.replace(cap, kebab)
if (dashes.charAt(0) !== '-') {
dashes = '-' + dashes
}
value = 'data' + dashes
}
}

@@ -40,31 +57,2 @@

/**
* @param {string} attribute
* @returns {string}
*/
function datasetToProperty(attribute) {
var value = attribute.slice(5).replace(dash, camelcase)
return 'data' + value.charAt(0).toUpperCase() + value.slice(1)
}
/**
* @param {string} property
* @returns {string}
*/
function datasetToAttribute(property) {
var value = property.slice(4)
if (dash.test(value)) {
return property
}
value = value.replace(cap, kebab)
if (value.charAt(0) !== '-') {
value = '-' + value
}
return 'data' + value
}
/**
* @param {string} $0

@@ -71,0 +59,0 @@ * @returns {string}

@@ -1,2 +0,2 @@

export var hastToReact = {
export const hastToReact = {
classId: 'classID',

@@ -3,0 +3,0 @@ dataType: 'datatype',

@@ -1,1 +0,1 @@

export var html: import('./util/schema.js').Schema
export const html: import('./util/schema.js').Schema

@@ -12,3 +12,3 @@ import {

export var html = create({
export const html = create({
space: 'html',

@@ -125,3 +125,5 @@ attributes: {

onClose: null,
onContextLost: null,
onContextMenu: null,
onContextRestored: null,
onCopy: null,

@@ -128,0 +130,0 @@ onCueChange: null,

@@ -1,1 +0,1 @@

export var svg: import('./util/schema.js').Schema
export const svg: import('./util/schema.js').Schema

@@ -11,3 +11,3 @@ import {

export var svg = create({
export const svg = create({
space: 'svg',

@@ -14,0 +14,0 @@ attributes: {

/**
* @param {Object.<string, string>} attributes
* @param {Record<string, string>} attributes
* @param {string} property

@@ -7,6 +7,4 @@ * @returns {string}

export function caseInsensitiveTransform(
attributes: {
[x: string]: string
},
attributes: Record<string, string>,
property: string
): string
import {caseSensitiveTransform} from './case-sensitive-transform.js'
/**
* @param {Object.<string, string>} attributes
* @param {Record<string, string>} attributes
* @param {string} property

@@ -6,0 +6,0 @@ * @returns {string}

/**
* @param {Object.<string, string>} attributes
* @param {Record<string, string>} attributes
* @param {string} attribute

@@ -7,6 +7,4 @@ * @returns {string}

export function caseSensitiveTransform(
attributes: {
[x: string]: string
},
attributes: Record<string, string>,
attribute: string
): string
/**
* @param {Object.<string, string>} attributes
* @param {Record<string, string>} attributes
* @param {string} attribute

@@ -4,0 +4,0 @@ * @returns {string}

/**
* @param {Definition} definition
* @returns {import('./schema.js').Schema}
* @returns {Schema}
*/
export function create(definition: Definition): import('./schema.js').Schema
export function create(definition: Definition): Schema
export type Properties = import('./schema.js').Properties
export type Normal = import('./schema.js').Normal
export type Info = import('./info.js').Info
export type Attributes = {
[x: string]: string
}
export type Attributes = Record<string, string>
export type Definition = {
properties: {
[x: string]: number | null
}
properties: Record<string, number | null>
transform: (attributes: Attributes, property: string) => string
space?: string
attributes?: Attributes
mustUseProperty?: Array<string>
space?: string | undefined
attributes?: Attributes | undefined
mustUseProperty?: string[] | undefined
}
import {Schema} from './schema.js'

@@ -1,44 +0,40 @@

import {normalize} from '../normalize.js'
import {Schema} from './schema.js'
import {DefinedInfo} from './defined-info.js'
/**
* @typedef {import('./schema.js').Properties} Properties
* @typedef {import('./schema.js').Normal} Normal
* @typedef {import('./info.js').Info} Info
*/
/**
* @typedef {Object.<string, string>} Attributes
*
* @typedef {Record<string, string>} Attributes
*
* @typedef {Object} Definition
* @property {Object.<string, number|null>} properties
* @property {Record<string, number|null>} properties
* @property {(attributes: Attributes, property: string) => string} transform
* @property {string} [space]
* @property {Attributes} [attributes]
* @property {Array.<string>} [mustUseProperty]
* @property {Array<string>} [mustUseProperty]
*/
var own = {}.hasOwnProperty
import {normalize} from '../normalize.js'
import {Schema} from './schema.js'
import {DefinedInfo} from './defined-info.js'
const own = {}.hasOwnProperty
/**
* @param {Definition} definition
* @returns {import('./schema.js').Schema}
* @returns {Schema}
*/
export function create(definition) {
/** @type {Properties} */
var property = {}
const property = {}
/** @type {Normal} */
var normal = {}
const normal = {}
/** @type {string} */
var prop
/** @type {Info} */
var info
let prop
for (prop in definition.properties) {
if (own.call(definition.properties, prop)) {
info = new DefinedInfo(
const value = definition.properties[prop]
const info = new DefinedInfo(
prop,
definition.transform(definition.attributes, prop),
definition.properties[prop],
definition.transform(definition.attributes || {}, prop),
value,
definition.space

@@ -45,0 +41,0 @@ )

@@ -6,3 +6,3 @@ export class DefinedInfo extends Info {

* @param {string} attribute
* @param {number} [mask]
* @param {number|null} [mask]
* @param {string} [space]

@@ -13,6 +13,6 @@ */

attribute: string,
mask?: number,
space?: string
mask?: number | null | undefined,
space?: string | undefined
)
}
import {Info} from './info.js'
import {Info} from './info.js'
import * as types from './types.js'
var checks = Object.keys(types)
/** @type {Array<keyof types>} */
// @ts-expect-error: hush.
const checks = Object.keys(types)

@@ -11,7 +13,7 @@ export class DefinedInfo extends Info {

* @param {string} attribute
* @param {number} [mask]
* @param {number|null} [mask]
* @param {string} [space]
*/
constructor(property, attribute, mask, space) {
var index = -1
let index = -1

@@ -22,8 +24,7 @@ super(property, attribute)

while (++index < checks.length) {
mark(
this,
checks[index],
(mask & types[checks[index]]) === types[checks[index]]
)
if (typeof mask === 'number') {
while (++index < checks.length) {
const check = checks[index]
mark(this, checks[index], (mask & types[check]) === types[check])
}
}

@@ -36,3 +37,3 @@ }

/**
* @param {InstanceType<typeof DefinedInfo>} values
* @param {DefinedInfo} values
* @param {string} key

@@ -43,4 +44,5 @@ * @param {unknown} value

if (value) {
// @ts-expect-error: assume `value` matches the expected value of `key`.
values[key] = value
}
}

@@ -8,3 +8,5 @@ export class Info {

constructor(property: string, attribute: string)
/** @type {string} */
property: string
/** @type {string} */
attribute: string

@@ -11,0 +13,0 @@ /** @type {string|null} */

@@ -8,3 +8,5 @@ export class Info {

constructor(property, attribute) {
/** @type {string} */
this.property = property
/** @type {string} */
this.attribute = attribute

@@ -16,4 +18,2 @@ }

Info.prototype.space = null
Info.prototype.attribute = null
Info.prototype.property = null
Info.prototype.boolean = false

@@ -20,0 +20,0 @@ Info.prototype.booleanish = false

/**
* @typedef {import('./schema.js').Properties} Properties
* @typedef {import('./schema.js').Normal} Normal
* @param {Schema[]} definitions
* @param {string} [space]
* @returns {Schema}
*/
/**
* @param {import('./schema.js').Schema[]} definitions
* @param {string} space
* @returns {import('./schema.js').Schema}
*/
export function merge(
definitions: import('./schema.js').Schema[],
space: string
): import('./schema.js').Schema
export function merge(definitions: Schema[], space?: string | undefined): Schema
export type Properties = import('./schema.js').Properties
export type Normal = import('./schema.js').Normal
import {Schema} from './schema.js'

@@ -1,3 +0,1 @@

import {Schema} from './schema.js'
/**

@@ -8,13 +6,15 @@ * @typedef {import('./schema.js').Properties} Properties

import {Schema} from './schema.js'
/**
* @param {import('./schema.js').Schema[]} definitions
* @param {string} space
* @returns {import('./schema.js').Schema}
* @param {Schema[]} definitions
* @param {string} [space]
* @returns {Schema}
*/
export function merge(definitions, space) {
/** @type {Properties} */
var property = {}
const property = {}
/** @type {Normal} */
var normal = {}
var index = -1
const normal = {}
let index = -1

@@ -21,0 +21,0 @@ while (++index < definitions.length) {

/**
* @typedef {import('./info.js').Info} Info
* @typedef {Object.<string, Info>} Properties
* @typedef {Object.<string, string>} Normal
* @typedef {Record<string, Info>} Properties
* @typedef {Record<string, string>} Normal
*/

@@ -13,3 +13,3 @@ export class Schema {

*/
constructor(property: Properties, normal: Normal, space?: string)
constructor(property: Properties, normal: Normal, space?: string | undefined)
property: Properties

@@ -20,7 +20,3 @@ normal: Normal

export type Info = import('./info.js').Info
export type Properties = {
[x: string]: Info
}
export type Normal = {
[x: string]: string
}
export type Properties = Record<string, Info>
export type Normal = Record<string, string>
/**
* @typedef {import('./info.js').Info} Info
* @typedef {Object.<string, Info>} Properties
* @typedef {Object.<string, string>} Normal
* @typedef {Record<string, Info>} Properties
* @typedef {Record<string, string>} Normal
*/

@@ -6,0 +6,0 @@

@@ -1,7 +0,7 @@

export var boolean: number
export var booleanish: number
export var overloadedBoolean: number
export var number: number
export var spaceSeparated: number
export var commaSeparated: number
export var commaOrSpaceSeparated: number
export const boolean: number
export const booleanish: number
export const overloadedBoolean: number
export const number: number
export const spaceSeparated: number
export const commaSeparated: number
export const commaOrSpaceSeparated: number

@@ -1,10 +0,10 @@

var powers = 0
let powers = 0
export var boolean = increment()
export var booleanish = increment()
export var overloadedBoolean = increment()
export var number = increment()
export var spaceSeparated = increment()
export var commaSeparated = increment()
export var commaOrSpaceSeparated = increment()
export const boolean = increment()
export const booleanish = increment()
export const overloadedBoolean = increment()
export const number = increment()
export const spaceSeparated = increment()
export const commaSeparated = increment()
export const commaOrSpaceSeparated = increment()

@@ -11,0 +11,0 @@ function increment() {

@@ -1,1 +0,1 @@

export var xlink: import('./util/schema.js').Schema
export const xlink: import('./util/schema.js').Schema
import {create} from './util/create.js'
export var xlink = create({
export const xlink = create({
space: 'xlink',
transform: xlinkTransform,
transform(_, prop) {
return 'xlink:' + prop.slice(5).toLowerCase()
},
properties: {

@@ -16,10 +18,1 @@ xLinkActuate: null,

})
/**
* @param {unknown} _
* @param {string} prop
* @returns {string}
*/
function xlinkTransform(_, prop) {
return 'xlink:' + prop.slice(5).toLowerCase()
}

@@ -1,1 +0,1 @@

export var xml: import('./util/schema.js').Schema
export const xml: import('./util/schema.js').Schema
import {create} from './util/create.js'
export var xml = create({
export const xml = create({
space: 'xml',
transform: xmlTransform,
transform(_, prop) {
return 'xml:' + prop.slice(3).toLowerCase()
},
properties: {xmlLang: null, xmlBase: null, xmlSpace: null}
})
/**
* @param {unknown} _
* @param {string} prop
* @returns {string}
*/
function xmlTransform(_, prop) {
return 'xml:' + prop.slice(3).toLowerCase()
}

@@ -1,1 +0,1 @@

export var xmlns: import('./util/schema.js').Schema
export const xmlns: import('./util/schema.js').Schema
import {create} from './util/create.js'
import {caseInsensitiveTransform} from './util/case-insensitive-transform.js'
export var xmlns = create({
export const xmlns = create({
space: 'xmlns',

@@ -6,0 +6,0 @@ attributes: {xmlnsxlink: 'xmlns:xlink'},

{
"name": "property-information",
"version": "6.0.1",
"description": "Information for HTML properties",
"version": "6.1.0",
"description": "Info on the properties and attributes of the web platform",
"license": "MIT",
"keywords": [
"html",
"svg",
"aria",
"property",

@@ -37,3 +39,3 @@ "attribute",

"@types/mdast": "^3.0.0",
"@types/node": "^15.0.0",
"@types/node": "^16.0.0",
"@types/tape": "^4.0.0",

@@ -49,4 +51,4 @@ "@types/unist": "^2.0.0",

"prettier": "^2.0.0",
"remark-cli": "^9.0.0",
"remark-preset-wooorm": "^8.0.0",
"remark-cli": "^10.0.0",
"remark-preset-wooorm": "^9.0.0",
"rimraf": "^3.0.0",

@@ -58,12 +60,12 @@ "svg-element-attributes": "^2.0.0",

"typescript": "^4.0.0",
"unist-builder": "^2.0.0",
"xo": "^0.39.0"
"unist-builder": "^3.0.0",
"xo": "^0.46.0"
},
"scripts": {
"prepack": "npm run build && npm run format",
"prepublishOnly": "npm run build && npm run format",
"generate": "node script/generate-react.js && node script/generate-exceptions.js",
"build": "rimraf \"{lib/**/,script/**,}*.d.ts\" && tsc && type-coverage",
"generate": "node script/generate-react && node script/generate-exceptions",
"format": "remark . -qfo && prettier . -w --loglevel warn && xo --fix",
"test-api": "node test.js",
"test-coverage": "c8 --check-coverage --branches 100 --functions 100 --lines 100 --statements 100 --reporter lcov node test.js",
"test-api": "node --conditions development test.js",
"test-coverage": "c8 --check-coverage --branches 100 --functions 100 --lines 100 --statements 100 --reporter lcov npm run test-api",
"test": "npm run generate && npm run build && npm run format && npm run test-coverage"

@@ -81,7 +83,4 @@ },

"prettier": true,
"esnext": false,
"rules": {
"import/no-mutable-exports": "off",
"no-var": "off",
"prefer-arrow-callback": "off"
"no-bitwise": "off"
}

@@ -98,4 +97,5 @@ },

"detail": true,
"strict": true
"strict": true,
"ignoreCatch": true
}
}

@@ -8,20 +8,10 @@ # property-information

Info for properties and attributes on the web-platform (HTML, SVG, ARIA, XML,
Info on the properties and attributes of 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](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):
Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
[npm][]:
```sh
npm install property-information
```
## Contents
* [What is this?](#what-is-this)
* [When should I use this?](#when-should-i-use-this)
* [Install](#install)
* [Use](#use)

@@ -34,6 +24,48 @@ * [API](#api)

* [`hastToReact`](#hasttoreact)
* [Types](#types)
* [Compatibility](#compatibility)
* [Support](#support)
* [Security](#security)
* [Related](#related)
* [Contribute](#contribute)
* [License](#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][esm].
In Node.js (version 12.20+, 14.14+, or 16.0+), install with [npm][]:
```sh
npm install property-information
```
In Deno with [Skypack][]:
```js
import * as propertyInformation from 'https://cdn.skypack.dev/property-information@6?dts'
```
In browsers with [Skypack][]:
```html
<script type="module">
import * as propertyInformation from 'https://cdn.skypack.dev/property-information@6?min'
</script>
```
## Use

@@ -59,13 +91,7 @@

```js
{ 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 }
{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}
```

@@ -100,5 +126,5 @@

* `schema` ([`Schema`][schema])
— Either `html` or `svg`
— either the `html` or `svg` export
* `name` (`string`)
— An attribute-like or property-like name that is passed through
— an attribute-like or property-like name that is passed through
[`normalize`][normalize] to find the correct info

@@ -118,10 +144,5 @@

// Or: find(html, 'dataDateOfBirth')
// => {attribute: 'data-date-of-birth', property: 'dataDateOfBirth'}
```
Yields:
```js
{ attribute: 'data-date-of-birth', property: 'dataDateOfBirth' }
```
Unknown values are passed through untouched:

@@ -131,21 +152,17 @@

console.log(find(html, 'un-Known'))
// => {attribute: 'un-Known', property: 'un-Known'}
```
Yields:
```js
{ attribute: 'un-Known', property: 'un-Known' }
```
### `normalize(name)`
Get the cleaned case-insensitive form of an attribute or a property.
Get the cleaned case insensitive form of an attribute or property.
#### Parameters
* `name` (`string`) — An attribute-like or property-like name
* `name` (`string`)
— an attribute-like or property-like name
#### Returns
`string` that can be used to look up the properly cased property in a
`string` that can be used to look up the properly cased property on a
[`Schema`][schema].

@@ -174,17 +191,9 @@

console.log(html.property.htmlFor)
// => {space: 'html', attribute: 'for', property: 'htmlFor' spaceSeparated: true}
console.log(svg.property.viewBox)
// => {space: 'svg', attribute: 'viewBox', property: 'viewBox'}
console.log(html.property.unknown)
// => undefined
```
Yields:
```js
{ space: 'html',
attribute: 'for',
property: 'htmlFor',
spaceSeparated: true }
{ space: 'svg', attribute: 'viewBox', property: 'viewBox' }
undefined
```
#### `Schema`

@@ -194,6 +203,9 @@

* `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>`][info]) — Object mapping properties to info
* `space` (`'html'` or `'svg'`)
— primary space of the schema
* `normal` (`Record<string, string>`)
— object mapping normalized attributes and properties to properly cased
properties
* `property` ([`Record<string, Info>`][info])
— object mapping properties to info

@@ -205,35 +217,42 @@ #### `Info`

* `space` (`'html'`, `'svg'`, `'xml'`, `'xlink'`, `'xmlns'`, optional)
— [Space][namespace] 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](#support).
— [space][namespace] 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 a `boolean` (for example: `hidden`).
These properties have an on state when defined and an off state when not
defined
* `booleanish` (`boolean`)
— the property is like a `boolean` (for example: `draggable`)
These properties have both an on and off state when defined, and another
state when not defined
* `overloadedBoolean` (`boolean`)
— the property is like a `boolean` (for example: `download`)
These properties have an on state plus more states when defined and an off
state when not defined
* `number` (`boolean`)
— the property is a `number` (for example: `height`)
* `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 spaces or commas (for example:
`strokeDashArray`)
* `mustUseProperty` (`boolean`)
— useful when working with the DOM, in which case this property has to be
changed as a field on the element, rather than through `setAttribute`
(this is true only for `'checked'`, `'multiple'`, `'muted'`, and
`'selected'`)
* `defined` (`boolean`)
— the property is [defined by a space](#support).
This is true for values in HTML (including data and ARIA), SVG, XML,
XMLNS, and XLink.
These values can only be accessed through `find`.
Undefined properties can only be found through `find`

@@ -244,5 +263,17 @@ ### `hastToReact`

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.
(`Record<string, string>`), if it is, then use the corresponding value,
otherwise, use the hast property.
## Types
This package is fully typed with [TypeScript][].
It exports the types `Info` and `Schema`, reflecting the interfaces of those
constructs.
## Compatibility
This package is at least compatible with all maintained versions of Node.js.
As of now, that is Node.js 12.20+, 14.14+, and 16.0+.
It also works in Deno and modern browsers.
## Support

@@ -587,3 +618,5 @@

| `onClose` | `onclose` | `svg`, `html` |
| `onContextLost` | `oncontextlost` | `html` |
| `onContextMenu` | `oncontextmenu` | `html` |
| `onContextRestored` | `oncontextrestored` | `html` |
| `onCopy` | `oncopy` | `svg`, `html` |

@@ -873,25 +906,34 @@ | `onCueChange` | `oncuechange` | `svg`, `html` |

## Security
This package is safe.
## Related
* [`web-namespaces`][namespace]
— List of web namespaces
* [`space-separated-tokens`](https://github.com/wooorm/space-separated-tokens)
— Parse/stringify space-separated tokens
* [`comma-separated-tokens`](https://github.com/wooorm/comma-separated-tokens)
— Parse/stringify comma-separated tokens
* [`html-tag-names`](https://github.com/wooorm/html-tag-names)
— List of HTML tags
* [`mathml-tag-names`](https://github.com/wooorm/mathml-tag-names)
— List of MathML tags
* [`svg-tag-names`](https://github.com/wooorm/svg-tag-names)
— List of SVG tags
* [`html-void-elements`](https://github.com/wooorm/html-void-elements)
— List of void HTML tag-names
* [`svg-element-attributes`](https://github.com/wooorm/svg-element-attributes)
— Map of SVG elements to allowed attributes
* [`html-element-attributes`](https://github.com/wooorm/html-element-attributes)
— Map of HTML elements to allowed attributes
* [`aria-attributes`](https://github.com/wooorm/aria-attributes)
— List of ARIA attributes
* [`wooorm/web-namespaces`][namespace]
— list of web namespaces
* [`wooorm/space-separated-tokens`](https://github.com/wooorm/space-separated-tokens)
— parse/stringify space separated tokens
* [`wooorm/comma-separated-tokens`](https://github.com/wooorm/comma-separated-tokens)
— parse/stringify comma separated tokens
* [`wooorm/html-tag-names`](https://github.com/wooorm/html-tag-names)
— list of HTML tag names
* [`wooorm/mathml-tag-names`](https://github.com/wooorm/mathml-tag-names)
— list of MathML tag names
* [`wooorm/svg-tag-names`](https://github.com/wooorm/svg-tag-names)
— list of SVG tag names
* [`wooorm/html-void-elements`](https://github.com/wooorm/html-void-elements)
— list of void HTML tag names
* [`wooorm/svg-element-attributes`](https://github.com/wooorm/svg-element-attributes)
— map of SVG elements to allowed attributes
* [`wooorm/html-element-attributes`](https://github.com/wooorm/html-element-attributes)
— map of HTML elements to allowed attributes
* [`wooorm/aria-attributes`](https://github.com/wooorm/aria-attributes)
— list of ARIA attributes
## Contribute
Yes please!
See [How to Contribute to Open Source][contribute].
## License

@@ -922,2 +964,4 @@

[skypack]: https://www.skypack.dev
[author]: https://wooorm.com

@@ -927,2 +971,8 @@

[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
[typescript]: https://www.typescriptlang.org
[contribute]: https://opensource.guide/how-to-contribute/
[source]: https://github.com/facebook/react/blob/f445dd9/src/renderers/dom/shared/HTMLDOMPropertyConfig.js

@@ -929,0 +979,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc