zhin-component-rendering

```ts

import { defineComponent, usePlugin } from '@zhin.js/core'

const plugin = usePlugin()

const StatusCard = defineComponent((props: { title: string, value: string }, context) => {

return ${props.title}: ${props.value}

}, 'status-card')

plugin.addComponent(StatusCard)

```

Components render within message templates:

```ts

await message.$reply('')

```

You can nest components:

```ts

await message.$reply('')

```

Props support inline expressions with {} and template interpolation via ${} when rendering:

```ts

const Card = defineComponent((props: { title: string, count: number }) => {

return ${props.title}: ${props.count}

}, 'card')

await message.$reply('')

```

The component service attaches a before.sendMessage listener to render templates before messages send.

If you need to pre-render a template manually, use renderComponents:

```ts

import { renderComponents } from '@zhin.js/core'

const options = await renderComponents(componentService.byName, {

context: 'process',

bot: 'dev',

type: 'private',

id: '123',

content: ''

})

```

Zhin includes:

• Fragment for grouping/children rendering
• fetch for loading remote content (use carefully and validate URLs)

• Keep components small and reusable.
• Validate and sanitize user input before passing it into templates.
• Avoid untrusted URLs with the fetch component.