import { App } from '@tinyhttp/app'
import { h, text } from 'hyperapp'
import { renderToStream } from 'hyperapp-render'
import { hypermdx } from 'hypermdx'
const Component = (children: string) => h('h3', { style: { color: 'red' } }, text(children))
const md = hypermdx({
  components: {
    h1: (n, p, c) => h(n, { style: { color: 'blue' }, ...p }, c)
  }
})
const content = md`
# This is a custom heading defined in components

- this is a list
- yet another list

${Component('custom component')}
    `
new App().get(async (_, res) => renderToStream(content).pipe(res)).listen(3000)

const mdx = hypermdx()
md('Hello World', Component('hello'))

const mdx = hypermdx()
md`
# Hello World
${Component('hello')}
`

const md = hypermdx({
  components: {
    h1: (name, props, children) => h(name, { style: { color: 'blue' }, ...props }, children)
  }
})

import { hyperscript2 } from 'my-own-lib'
const md = hypermdx({ h: hyperscript2 })
md`
# Hello World
`

import hypermdx from 'hypermdx'
import capitalize from 'remark-capitalize'
import emoji from 'remark-emoji'
const md = hypermdx({ remarkPlugins: [emoji, capitalize] })

import { async as hypermdx } from 'hypermdx'
const md = hypermdx()
await md`
# Hello World
`