property-information
Advanced tools
Comparing version 6.0.1 to 6.1.0
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 | ||
} | ||
} |
270
readme.md
@@ -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 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
103231
981
1399