@types/hast

What is @types/hast?

The @types/hast package provides TypeScript type definitions for HAST (Hypertext Abstract Syntax Tree) format, which is a virtual DOM format for HTML and XML. This allows developers to work with HAST trees in TypeScript projects with type safety, enabling better development experience, auto-completion, and error checking.

What are @types/hast's main functionalities?

Creating a HAST node

This code sample demonstrates how to create a simple HAST node representing a paragraph element containing the text 'Hello, world!'. The node is typed, ensuring that only valid properties and child nodes are used.

{"type": "element", "tagName": "p", "properties": {}, "children": [{"type": "text", "value": "Hello, world!"}]}

Type-checking a HAST tree

This code sample shows how to type-check a HAST tree to safely access properties. It specifically checks if a node is an anchor ('a') element and logs its 'href' property if available.

import {Element} from 'hast';

function processNode(node: Element): void {
  if (node.tagName === 'a' && node.properties) {
    console.log(node.properties.href);
  }
}

Other packages similar to @types/hast

rehype

Rehype is a processor powered by plugins to work with HTML. It uses HAST under the hood, allowing manipulation of HTML documents. Compared to @types/hast, rehype offers higher-level operations like parsing, serializing, and transforming HTML content, whereas @types/hast focuses on providing type definitions.

unified

Unified is an interface for processing text using syntax trees, including HAST for HTML. It's more general-purpose than @types/hast, offering a framework to parse, transform, and serialize text through a unified ecosystem of plugins, whereas @types/hast specifically provides TypeScript types for HAST nodes.

remark

Remark is part of the unified ecosystem, focusing on Markdown processing using MDAST (Markdown Abstract Syntax Tree). While it serves a different syntax (Markdown vs. HTML/XML in HAST), it offers a similar concept of providing a structured tree format for content. Remark and @types/hast both enable developers to work with content trees, but they target different types of content.

README

Installation

npm install --save @types/hast

Summary

This package contains type definitions for Hast (https://github.com/syntax-tree/hast).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/hast.

index.d.ts

// Type definitions for non-npm package Hast 2.3
// Project: https://github.com/syntax-tree/hast
// Definitions by: lukeggchapman <https://github.com/lukeggchapman>
//                 Junyoung Choi <https://github.com/rokt33r>
//                 Christian Murphy <https://github.com/ChristianMurphy>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 3.0

import { Parent as UnistParent, Literal as UnistLiteral, Node as UnistNode } from 'unist';

export { UnistNode as Node };

/**
 * Node in hast containing other nodes.
 */
export interface Parent extends UnistParent {
    /**
     * List representing the children of a node.
     */
    children: Array<Element | DocType | Comment | Text>;
}

/**
 * Nodes in hast containing a value.
 */
export interface Literal extends UnistLiteral {
    value: string;
}

/**
 * Root represents a document.
 * Can be used as the rood of a tree, or as a value of the
 * content field on a 'template' Element, never as a child.
 */
export interface Root extends Parent {
    /**
     * Represents this variant of a Node.
     */
    type: 'root';
}

/**
 * Element represents an HTML Element.
 */
export interface Element extends Parent {
    /**
     * Represents this variant of a Node.
     */
    type: 'element';

    /**
     * Represents the element’s local name.
     */
    tagName: string;

    /**
     * Represents information associated with the element.
     */
    properties?: Properties | undefined;

    /**
     * If the tagName field is 'template', a content field can be present.
     */
    content?: Root | undefined;

    /**
     * List representing the children of a node.
     */
    children: Array<Element | Comment | Text>;
}

/**
 * Represents information associated with an element.
 */
export interface Properties {
    [PropertyName: string]: boolean | number | string | null | undefined | Array<string | number>;
}

/**
 * Represents an HTML DocumentType.
 */
export interface DocType extends UnistNode {
    /**
     * Represents this variant of a Node.
     */
    type: 'doctype';

    name: string;
}

/**
 * Represents an HTML Comment.
 */
export interface Comment extends Literal {
    /**
     * Represents this variant of a Literal.
     */
    type: 'comment';
}

/**
 * Represents an HTML Text.
 */
export interface Text extends Literal {
    /**
     * Represents this variant of a Literal.
     */
    type: 'text';
}

Additional Details

• Last updated: Sat, 21 Aug 2021 04:31:23 GMT
• Dependencies: @types/unist
• Global values: none

Credits

These definitions were written by lukeggchapman, Junyoung Choi, and Christian Murphy.