HenrikJoreteg / html-parse-stringify

Parses well-formed HTML (meaning all tags closed) into an AST and back. quickly.
337 stars 66 forks source link

TypeScript types #56

Open drachehavoc opened 3 years ago

drachehavoc commented 3 years ago

I greatly appreciate this library, but I miss types for TypeScript, so I wrote a d.ts for my use, but I'd like to share it with you developers

Below is the d.ts I created:

html-parse-stringify.d.ts

type AstElement = {
    tag: 'tag' | 'text' | 'component'
    name: string
    attrs?: { [attributeName: string]: string }
    voidElement?: boolean
    children?: AstElement[]
}

declare type Htmlparsestringify = {
    parse(htmlString: string, options?: any): AstElement[]
    stringify(AST: AstElement[]): string
}

declare module "html-parse-stringify" {
    export default null as Htmlparsestringify
}
bfricka commented 2 years ago

Should be:

type TagNode = {
  attrs: { [attr: string]: string }
  children: HTMLAstNode[]
  name: string
  type: 'tag'
  voidElement: boolean
}

type TextNode = {
  content: string
  type: 'text'
}

type ComponentNode = {
  attrs: { [attr: string]: string }
  children: []
  name: string
  type: 'component'
  voidElement: boolean
}

type HTMLAstNode = ComponentNode | TagNode | TextNode

So we can do type discrimination:

const foo = (node: HTMLAstNode) => {
  if (node.type === 'tag') {
    // node is TagNode
  }
}

Additionally, types should be exported from module so we can import type { HTMLAstNode } from 'html-parse-stringify'