Skip to content

type="anything" is parsed as child instead of property #8

Closed
syntax-tree/hast-util-from-parse5
#14
@albinekb

Description

@albinekb

Initial checklist

Affected packages and versions

hast-util-from-html@2.0.3

Link to runnable example

https://github.com/albinekb/hast-unknown-node-repro/blob/main/index.ts

Steps to reproduce

import { fromHtml } from 'hast-util-from-html'
const tree = fromHtml('<button type="login">Hello</button>', { fragment: true })

Expected behavior

Parses like any other property:

{
  type: 'root',
  children: [
    {
      type: 'element',
      tagName: 'button',
      properties: { type: 'login' },
      children: [
        {
          type: 'text',
          value: 'Hello',
          position: {
            start: { line: 1, column: 23, offset: 22 },
            end: { line: 1, column: 28, offset: 27 }
          }
        }
      ],
      position: {
        start: { line: 1, column: 1, offset: 0 },
        end: { line: 1, column: 37, offset: 36 }
      }
    }
  ],
  data: { quirksMode: false },
  position: {
    start: { line: 1, column: 1, offset: 0 },
    end: { line: 1, column: 37, offset: 36 }
  }
}

Actual behavior

Putting anything else than "submit", "reset", "button" in type="", moves the property from the properties to being a child:

{
  type: 'root',
  children: [
    {
      type: 'element',
      tagName: 'button',
      properties: {},
      children: [
        { type: 'login' }, // <=== Should not be here?
        {
          type: 'text',
          value: 'Hello',
          position: {
            start: { line: 1, column: 22, offset: 21 },
            end: { line: 1, column: 27, offset: 26 }
          }
        }
      ],
      position: {
        start: { line: 1, column: 1, offset: 0 },
        end: { line: 1, column: 36, offset: 35 }
      }
    }
  ],
  data: { quirksMode: false },
  position: {
    start: { line: 1, column: 1, offset: 0 },
    end: { line: 1, column: 36, offset: 35 }
  }
}

If i put more attributes on the button:

fromHtml('<button aria-type="button" type="broken" disabled>Hello</button>', { fragment: true })

The other attributes gets added to the erroneous child:


    {
      type: 'element',
      tagName: 'button',
      properties: {},
      children: [
        { 'aria-type': 'button', type: 'broken', disabled: '' },
        {
          type: 'text',
          value: 'Hello',
          position: {
            start: { line: 1, column: 50, offset: 49 },
            end: { line: 1, column: 55, offset: 54 }
          }
        } 
      ]

Affected runtime and version

node@20.12.2

Affected package manager and version

pnpm@9.13.2

Affected OS and version

No response

Build and bundle tools

esbuild

Metadata

Metadata

Assignees

No one assigned

    Labels

    👀 no/externalThis makes more sense somewhere else👎 phase/noPost cannot or will not be acted on

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions