How to use the @cycle/dom.li function in @cycle/dom

, ul('.list-group.payments', moves.slice(0, numItems).map(([ type, ts, msat, obj ]) =>
    li('.list-group-item', [
      div('.clearfix', [
        type === 'in' ? span('.badge.badge-success.badge-pill', `+${ unitf(msat) }`)
                      : span('.badge.badge-danger.badge-pill', `-${ unitf(msat) }`)
      , span('.badge.badge-secondary.badge-pill.float-right', ago(ts))
      ])
    , expert ? yaml(obj) : ''
    ])).concat(moves.length > numItems ? [ li('.list-group-item.disabled', `(${moves.length-numItems} more older items)`) ] : []))
    // @TODO paging

function main({ DOM } : Sources) : Sinks
{
    const vdom$ : Stream = xs.of(
        div([
            span('.test', 'Test, should not move'),
            ul('.ul', [
                li('.class', '', ['Option 1']),
                li('.class', '', ['Option 2']),
                li('.class', '', ['Option 3']),
                li('.class', '', ['Option 4']),
                li('.class', '', ['Option 5']),
                li('.class', '', ['Option 6']),
            ])
        ])
    )
    .compose(makeSortable>(DOM, {
        parentSelector: '.ul'
    }));

    return {
        DOM: vdom$
    };
}

vnode.elm.value = content;
                            autosize(vnode.elm);
                        },
                    },
                }),
            ]),
            input('.btn.btn-primary.btn-block', {
                attrs: { type: 'submit', value: 'Continuar', disabled: !ready },
            }),
            div('.mt3', [
                h3(
                    '.f5.fw6',
                    'Sugerencias para obtener más y mejores respuestas y comentarios:'
                ),
                ol('.pa0.ma0.measure.lh-copy', [
                    li(
                        'Lee nuevamente tu publicación antes de enviarla. Procura que sea clara y entendible.'
                    ),
                    li(
                        'Si son varias preguntas, trata de empezar por las más importantes. Evita abrumar con mucha info y ve al punto.'
                    ),
                    li(
                        'Gana reputación agradeciendo a los que te ayuden o contribuyan a tu tema.'
                    ),
                ]),
            ]),
        ]),
    ]);
}

function renderOperatorsMenuLinkItem(operator) {
  return li(
    { style: operatorsMenuItemStyle },
    [renderOperatorsMenuLink({ operator, content: operator })],
  );
}

)
                        ),
                        li(
                            '.menu-item',
                            a(
                                '.link',
                                {
                                    attrs: {
                                        href:
                                            'https://spartangeek.com/workstations',
                                    },
                                },
                                'Workstations'
                            )
                        ),
                        li(
                            '.menu-item',
                            a(
                                '.link',
                                { attrs: { href: 'https://spartangeek.com' } },
                                'SpartanGeek.com'
                            )
                        ),
                    ])
            ),
        ]),
    ]);
}

function getTrainData(data){
    return li(".train", [
        div(".train-data",
        [
            p(".stationName .col", [span("station: "), data.stationName]),
            p(".platform", [span("platform: "), data.platformName]),
            p(".current-location", [span("current location: "), data.currentLocation]),
            p(".arrival-time: ", [span("expected arrival time: "), moment(new Date(data.expectedArrival)).format("HH:MM - Do MMM YYYY")])
        ]
    )])
}

const Dir = ({ root, path, tree, sel, collapsed }) => {
	if (!tree || !tree.children) return

	path = root ? tree.name : `${path}${PATH_SEP}${tree.name}`
	let klass = '.dirname'
	let trees = []
	if (collapsed.has(path)) {
		klass += '.collapsed'
	} else {
		trees = tree.children.map((child) => {
			return (child.children)
				? Dir({ path, tree: child, sel, collapsed })
				: File({ path, file: child, sel })
		})
	}
	return ul('.dir', [li(klass, { data: { id: path } }, tree.name), ...trees])
}

ul('.comparison-list', state.comparisons.map((comparison) =>
          li('.comparison-list-item', {
            className: comparison.equal ? 'state-success' : 'state-fail',
          }, [
            div('.comparison-head', [
              `Comparing ${
                expressionToString(comparison.expressionA.body, formatter)
              } and ${
                expressionToString(comparison.expressionB.body, formatter)
              }`,
            ]),
            div('.comparison-result', {
              className: comparison.equal ? 'state-success' : 'state-fail',
            }, [
              comparison.equal ? 'Equal!' : 'Not Equal!',
              renderReason(comparison),
            ]),
          ])

, !rpcHist.length ? '' : ul('.list-group.mt-4', rpcHist.map(r =>
    li('.list-group-item', [
      pre('.mb-0', [ '$ ', r.method, ' ', formatParams(r.params) ])
    , yaml(r.method == 'help' && r.res.help ? formatHelp(r.res) : r.res)
    ])))
])