366 lines
8.8 KiB
JavaScript
Raw Normal View History

/**
* @import {Element, Nodes, RootContent, Root} from 'hast'
* @import {Info, Schema} from 'property-information'
*/
/**
* @typedef {Array<Nodes | PrimitiveChild>} ArrayChildNested
* List of children (deep).
*/
/**
* @typedef {Array<ArrayChildNested | Nodes | PrimitiveChild>} ArrayChild
* List of children.
*/
/**
* @typedef {Array<number | string>} ArrayValue
* List of property values for space- or comma separated values (such as `className`).
*/
/**
* @typedef {ArrayChild | Nodes | PrimitiveChild} Child
* Acceptable child value.
*/
/**
* @typedef {number | string | null | undefined} PrimitiveChild
* Primitive children, either ignored (nullish), or turned into text nodes.
*/
/**
* @typedef {boolean | number | string | null | undefined} PrimitiveValue
* Primitive property value.
*/
/**
* @typedef {Record<string, PropertyValue | Style>} Properties
* Acceptable value for element properties.
*/
/**
* @typedef {ArrayValue | PrimitiveValue} PropertyValue
* Primitive value or list value.
*/
/**
* @typedef {Element | Root} Result
* Result from a `h` (or `s`) call.
*/
/**
* @typedef {number | string} StyleValue
* Value for a CSS style field.
*/
/**
* @typedef {Record<string, StyleValue>} Style
* Supported value of a `style` prop.
*/
import {parse as parseCommas} from 'comma-separated-tokens'
import {parseSelector} from 'hast-util-parse-selector'
import {find, normalize} from 'property-information'
import {parse as parseSpaces} from 'space-separated-tokens'
/**
* @param {Schema} schema
* Schema to use.
* @param {string} defaultTagName
* Default tag name.
* @param {ReadonlyArray<string> | undefined} [caseSensitive]
* Case-sensitive tag names (default: `undefined`).
* @returns
* `h`.
*/
export function createH(schema, defaultTagName, caseSensitive) {
const adjust = caseSensitive ? createAdjustMap(caseSensitive) : undefined
/**
* Hyperscript compatible DSL for creating virtual hast trees.
*
* @overload
* @param {null | undefined} [selector]
* @param {...Child} children
* @returns {Root}
*
* @overload
* @param {string} selector
* @param {Properties} properties
* @param {...Child} children
* @returns {Element}
*
* @overload
* @param {string} selector
* @param {...Child} children
* @returns {Element}
*
* @param {string | null | undefined} [selector]
* Selector.
* @param {Child | Properties | null | undefined} [properties]
* Properties (or first child) (default: `undefined`).
* @param {...Child} children
* Children.
* @returns {Result}
* Result.
*/
function h(selector, properties, ...children) {
/** @type {Result} */
let node
if (selector === null || selector === undefined) {
node = {type: 'root', children: []}
// Properties are not supported for roots.
const child = /** @type {Child} */ (properties)
children.unshift(child)
} else {
node = parseSelector(selector, defaultTagName)
// Normalize the name.
const lower = node.tagName.toLowerCase()
const adjusted = adjust ? adjust.get(lower) : undefined
node.tagName = adjusted || lower
// Handle properties.
if (isChild(properties)) {
children.unshift(properties)
} else {
for (const [key, value] of Object.entries(properties)) {
addProperty(schema, node.properties, key, value)
}
}
}
// Handle children.
for (const child of children) {
addChild(node.children, child)
}
if (node.type === 'element' && node.tagName === 'template') {
node.content = {type: 'root', children: node.children}
node.children = []
}
return node
}
return h
}
/**
* Check if something is properties or a child.
*
* @param {Child | Properties} value
* Value to check.
* @returns {value is Child}
* Whether `value` is definitely a child.
*/
function isChild(value) {
// Never properties if not an object.
if (value === null || typeof value !== 'object' || Array.isArray(value)) {
return true
}
// Never node without `type`; thats the main discriminator.
if (typeof value.type !== 'string') return false
// Slower check: never property value if object or array with
// non-number/strings.
const record = /** @type {Record<string, unknown>} */ (value)
const keys = Object.keys(value)
for (const key of keys) {
const value = record[key]
if (value && typeof value === 'object') {
if (!Array.isArray(value)) return true
const list = /** @type {ReadonlyArray<unknown>} */ (value)
for (const item of list) {
if (typeof item !== 'number' && typeof item !== 'string') {
return true
}
}
}
}
// Also see empty `children` as a node.
if ('children' in value && Array.isArray(value.children)) {
return true
}
// Default to properties, someone can always pass an empty object,
// put `data: {}` in a node,
// or wrap it in an array.
return false
}
/**
* @param {Schema} schema
* Schema.
* @param {Properties} properties
* Properties object.
* @param {string} key
* Property name.
* @param {PropertyValue | Style} value
* Property value.
* @returns {undefined}
* Nothing.
*/
function addProperty(schema, properties, key, value) {
const info = find(schema, key)
/** @type {PropertyValue} */
let result
// Ignore nullish and NaN values.
if (value === null || value === undefined) return
if (typeof value === 'number') {
// Ignore NaN.
if (Number.isNaN(value)) return
result = value
}
// Booleans.
else if (typeof value === 'boolean') {
result = value
}
// Handle list values.
else if (typeof value === 'string') {
if (info.spaceSeparated) {
result = parseSpaces(value)
} else if (info.commaSeparated) {
result = parseCommas(value)
} else if (info.commaOrSpaceSeparated) {
result = parseSpaces(parseCommas(value).join(' '))
} else {
result = parsePrimitive(info, info.property, value)
}
} else if (Array.isArray(value)) {
result = [...value]
} else {
result = info.property === 'style' ? style(value) : String(value)
}
if (Array.isArray(result)) {
/** @type {Array<number | string>} */
const finalResult = []
for (const item of result) {
// Assume no booleans in array.
finalResult.push(
/** @type {number | string} */ (
parsePrimitive(info, info.property, item)
)
)
}
result = finalResult
}
// Class names (which can be added both on the `selector` and here).
if (info.property === 'className' && Array.isArray(properties.className)) {
// Assume no booleans in `className`.
result = properties.className.concat(
/** @type {Array<number | string> | number | string} */ (result)
)
}
properties[info.property] = result
}
/**
* @param {Array<RootContent>} nodes
* Children.
* @param {Child} value
* Child.
* @returns {undefined}
* Nothing.
*/
function addChild(nodes, value) {
if (value === null || value === undefined) {
// Empty.
} else if (typeof value === 'number' || typeof value === 'string') {
nodes.push({type: 'text', value: String(value)})
} else if (Array.isArray(value)) {
for (const child of value) {
addChild(nodes, child)
}
} else if (typeof value === 'object' && 'type' in value) {
if (value.type === 'root') {
addChild(nodes, value.children)
} else {
nodes.push(value)
}
} else {
throw new Error('Expected node, nodes, or string, got `' + value + '`')
}
}
/**
* Parse a single primitives.
*
* @param {Info} info
* Property information.
* @param {string} name
* Property name.
* @param {PrimitiveValue} value
* Property value.
* @returns {PrimitiveValue}
* Property value.
*/
function parsePrimitive(info, name, value) {
if (typeof value === 'string') {
if (info.number && value && !Number.isNaN(Number(value))) {
return Number(value)
}
if (
(info.boolean || info.overloadedBoolean) &&
(value === '' || normalize(value) === normalize(name))
) {
return true
}
}
return value
}
/**
* Serialize a `style` object as a string.
*
* @param {Style} styles
* Style object.
* @returns {string}
* CSS string.
*/
function style(styles) {
/** @type {Array<string>} */
const result = []
for (const [key, value] of Object.entries(styles)) {
result.push([key, value].join(': '))
}
return result.join('; ')
}
/**
* Create a map to adjust casing.
*
* @param {ReadonlyArray<string>} values
* List of properly cased keys.
* @returns {Map<string, string>}
* Map of lowercase keys to uppercase keys.
*/
function createAdjustMap(values) {
/** @type {Map<string, string>} */
const result = new Map()
for (const value of values) {
result.set(value.toLowerCase(), value)
}
return result
}