https://github.com/virtualstate/kdl

KDL Implementation for JSX nodes
https://github.com/virtualstate/kdl

deno javascript jsx kdl typescript

Last synced: about 2 months ago
JSON representation

KDL Implementation for JSX nodes

• Host: GitHub
• URL: https://github.com/virtualstate/kdl
• Owner: virtualstate
• License: mit
• Created: 2022-02-18T03:11:23.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-17T10:13:29.000Z (about 2 years ago)
• Last Synced: 2024-09-15T22:22:17.209Z (3 months ago)
• Topics: deno, javascript, jsx, kdl, typescript
• Language: TypeScript
• Homepage: https://github.com/kdl-org/kdl
• Size: 937 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md
  • Code of conduct: CODE-OF-CONDUCT.md

Awesome Lists containing this project

README

        
# `@virtualstate/kdl`

[KDL](https://github.com/kdl-org/kdl) Tooling for [JSX](https://github.com/virtualstate/focus)

[//]: # (badges)

### Support

 ![Node.js supported](https://img.shields.io/badge/node-%3E%3D16.0.0-blue) ![Deno supported](https://img.shields.io/badge/deno-%3E%3D1.17.0-blue) 

### Test Coverage

 ![96.54%25 lines covered](https://img.shields.io/badge/lines-96.54%25-brightgreen) ![96.54%25 statements covered](https://img.shields.io/badge/statements-96.54%25-brightgreen) ![93.24%25 functions covered](https://img.shields.io/badge/functions-93.24%25-brightgreen) ![90.54%25 branches covered](https://img.shields.io/badge/branches-90.54%25-brightgreen)

[//]: # (badges)

# Preparing queries

Queries are not preformed as soon as they are created, but they are partially prepared. 

While the query runs, additional parts to the query will be included in as needed. 

To prepare a query for a JSX node, import and use `prepare`

```typescript jsx

import {prepare} from "@virtualstate/kdl";

const node = (

    

        
@virtualstate/focus

        
Version: 1.0.0



    

);

```


The first parameter, is the JSX node you want to query

The second parameter, is a string containing [KDL Query Language](https://github.com/kdl-org/kdl/blob/main/QUERY-SPEC.md)

```typescript jsx

const result = prepare(

    node,

    `main blockquote > span`

);

```

The result is an async object that can be resolved in many ways

First, if used as a promise, will result in an array of matching JSX nodes

```typescript jsx

const [span] = await result

console.log(span); // Is the node for 1.0.0

```

If used as an async iterable, then snapshots of results can be accessed, allowing for earlier processing

of earlier found JSX nodes

```typescript jsx

for await (const [span] of result) {

    if (!span) continue;

    // We have at least one span!

    console.log(span) // Is the node for 1.0.0

}

```

If used as an iterable, and destructuring is used, the individual destructured values will

be async objects too, which can be used as a promise or async iterable

```typescript jsx

const [firstSpan] = result;

const span = await firstSpan;

console.log(span) // Is the node for 1.0.0

```

```typescript jsx

const [firstSpan] = result;

for await (const span of firstSpan) {

    console.log(span) // Is the node for 1.0.0

}

```

The async object returned from prepare supports many array like operations, 

like `.at`, `.filter`, `.map`, `.group`, `.flatMap`, and [more](https://github.com/virtualstate/promise/blob/143b070e298b3417ac13b891b818d567c7346522/src/split/type.ts#L104-L138)

These operations are performed on the individual snapshots yielded across the lifecycle of the query

The map operator is also available, which can be used to directly return information about the node found

```typescript jsx

const [value] = await prepare(

    node,

    `main blockquote > span => val()`

);

console.log(value); // Logs the content of the span "1.0.0"

```