syntax-tree / hast-util-select Goto Github PK

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

[email protected]

Link to runnable example

https://runkit.com/quarterto/6397058cb17f2300086ba513

Steps to reproduce

import {h} from 'hastscript'
import {selectAll} from 'hast-util-select'

selectAll('img:not(:first-child)`, h('body', [
    h('img', { src: 'https://example.com/one' }),
    h('p', ['text']),
    h('img', { src: 'https://example.com/two' }),
]))

Expected behavior

it selects the second img

Actual behavior

Error: Cannot use `:first-child` without parent

this is because :not is implemented using matches, which doesn't support parent-sensitive pseudos

Affected runtime and version

node@14, node@16

Affected package manager and version

No response

Affected OS and version

No response

Build and bundle tools

No response

Greetings!

I use this tool, with custom html like tree.
When i use a custom tag where "tagName": "title", i cannot get children tags, because they are stringified.

I know this tool is for standard html, but i like to use for my custom data structures.
So i cannot use "title" named tag, and i dont know which tag has similar problems.

Maybe this is the required behaviour for standard usage, and not fixable, but i just wanted to write here, if anybody would use custom tags, this could happen.

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

5.0.4

Link to runnable example

https://codesandbox.io/p/sandbox/peaceful-rumple-nnr5qz?file=%2Findex.js&selection=%5B%7B%22endColumn%22%3A7%2C%22endLineNumber%22%3A24%2C%22startColumn%22%3A7%2C%22startLineNumber%22%3A24%7D%5D

Steps to reproduce

import { selectAll } from "hast-util-select";
import { s } from "hastscript";
const tree = s("svg", [
  s("circle", { fill: "#333" }),
  s("circle", { fill: "none" }),
  s("circle", { fill: "none" }),
  s("circle"),
  s("rect", { fill: "#666666" }),
  s("rect", { fill: "none" }),
  s("rect", { fill: "none" }),
  s("rect", { fill: "none" }),
  s("rect"),
]);

const result = selectAll("circle:not([fill]), rect:not([fill])", tree);

// Should select just 1 circle, 1 rect.
console.log(result);

// But we get:

// [
//   { type: 'element', tagName: 'circle', properties: {}, children: [] },
//   {
//     type: 'element',
//     tagName: 'rect',
//     properties: { fill: '#666666' },
//     children: []
//   },
//   {
//     type: 'element',
//     tagName: 'rect',
//     properties: { fill: 'none' },
//     children: []
//   },
//   {
//     type: 'element',
//     tagName: 'rect',
//     properties: { fill: 'none' },
//     children: []
//   },
//   {
//     type: 'element',
//     tagName: 'rect',
//     properties: { fill: 'none' },
//     children: []
//   },
//   { type: 'element', tagName: 'rect', properties: {}, children: [] }
// ]

Expected behavior

It should just 1 circle and 1 rect.

Actual behavior

It selects a bunch of elements that don't match the query.

Affected runtime and version

[email protected], [email protected]

Affected package manager and version

No response

Affected OS and version

No response

Build and bundle tools

No response

Subject of the feature

Are you open to adding an index.d.ts file?

Problem

I made a d.ts for this - that I have been using. Happy to PR it back to the project.

Expected behavior

VS Code Intelisense to show expected types.

Alternatives

I could submit directly to DefinitelyTyped - but I think their bots may ping you anyway. (Not sure, never PRd to DT before)

This does not work:

    st.deepEqual(
      select(
        'h1 + p',
        u('root', [
          u('text', '\n'),
          h('p', 'Alpha'),
          u('text', '\n'),
          h('h1', 'Bravo'),
          u('text', '\n'),
          h('p', 'Charlie'),
          u('text', '\n'),
          h('p', 'Delta'),
          u('text', '\n'),
          h('div', [h('p', 'Echo')])
        ])
      ),
      h('p', 'Charlie'),
      'should return adjacent sibling (whitespace)'
    )

It does work if there is no inter-element whitespace.

Affects +, but probably also ~ and >

Hello - I try use it for search all elements

var body = '<!DOCTYPE html><html lang="en"><p></p></html>';
var h = require('hastscript');
var selectAll = require('hast-util-select').selectAll;
console.log(
    selectAll(
        'p',
        h('html', body)
    )
);
console.log(
    selectAll(
        'p',
        body
    )
);
console.log(
    selectAll(
        'p',
        h(body)
    )
);

but I get everytime only

[]
[]
[]

Q can you help?

Bruno

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

hast-util-select@6

Link to runnable example

https://jsbin.com/lihidasupa/1/edit?html,console

Steps to reproduce

1. create an element with a data-* attribute
2. try to find it with an attribute selector

Expected behavior

Element should be found

Actual behavior

Element isn't found

Affected runtime and version

chromium@Version 121.0.6167.85 (Official Build) Arch Linux (64-bit)

Affected package manager and version

No response

Affected OS and version

No response

Build and bundle tools

No response