@yozora/html-list NPM

This component is for rendering the Yozora Markdown AST node IList produced by @yozora/tokenizer-list and IListItem produced by @yozora/tokenizer-list-item into HTML string.

This component has been built into @yozora/html-markdown, you can use it directly.

Install

npm
```
npm install --save @yozora/html-list
```
yarn
```
yarn add @yozora/html-list
```

Usage

Basic:

import type { IList, IYastNode } from '@yozora/ast'
import renderList from '@yozora/html-list'

// The implementation of the following function has been omitted.
const renderChildren: (nodes: IYastNode[]) => string = function () {}

const list = {
  "type": "list",
  "ordered": false,
  "marker": 45,
  "spread": true,
  "children": [
    {
      "type": "listItem",
      "children": [
        {
          "type": "paragraph",
          "children": [{ "type": "text", "value": "a" }]
        }
      ]
    },
    {
      "type": "listItem",
      "children": [
        {
          "type": "paragraph",
          "children": [{ "type": "text", "value": "b" }]
        }
      ]
    }
  ]
}
renderList(list as IList, renderChildren)
// => <ul class="yozora-list"><li class="yozora-list-item"><p class="yozora-paragraph"><span class="yozora-text">a</span></p></li><li class="yozora-list-item"><p class="yozora-paragraph"><span class="yozora-text">b</span></p></li></ul>

List with task items:

import type { IList, IYastNode } from '@yozora/ast'
import renderList from '@yozora/html-list'

// The implementation of the following function has been omitted.
const renderChildren: (nodes: IYastNode[]) => string = function () {}

const list = {
  "type": "list",
  "ordered": false,
  "marker": 45,
  "spread": false,
  "children": [
    {
      "type": "listItem",
      "status": "todo",
      "children": [{ "type": "text", "value": "foo" }]
    },
    {
      "type": "listItem",
      "status": "done",
      "children": [{ "type": "text", "value": "bar" }]
    }
  ]
}
renderList(list as IList, renderChildren)
// => <ul class="yozora-list"><li class="yozora-list-item"><input disabled="" type="checkbox" /> <span class="yozora-text">foo</span></li><li class="yozora-list-item"><input checked="" disabled="" type="checkbox" /> <span class="yozora-text">bar</span></li></ul>

Ordered list:

import type { IList, IYastNode } from '@yozora/ast'
import renderList from '@yozora/html-list'

// The implementation of the following function has been omitted.
const renderChildren: (nodes: IYastNode[]) => string = function () {}

const list = {
  "type": "list",
  "ordered": true,
  "start": 1,
  "marker": 46,
  "spread": false,
  "children": [
    {
      "type": "listItem",
      "children": [{ "type": "text", "value": "a" }]
    },
    {
      "type": "listItem",
      "children": [{ "type": "text", "value": "b" }]
    },
    {
      "type": "listItem",
      "children": [{ "type": "text", "value": "c" }]
    }
  ]
}
renderList(list as IList, renderChildren)
// => <ol class="yozora-list" start="1"><li class="yozora-list-item"><span class="yozora-text">a</span></li><li class="yozora-list-item"><span class="yozora-text">b</span></li><li class="yozora-list-item"><span class="yozora-text">c</span></li></ol>