[Refactoring Guru](https://refactoring.guru/design-patterns/command)
See [[Design Pattern/Notes/behavioral/command|command]] notes.
In kunkun there is a Template UI command that allows extensions to render GUI extension without frontend framework, just regular OOP code.
This is how the render function is implemented. [Kunkun Template UI Render Function](https://github.com/kunkunsh/kunkun/blob/bf51fdadbc2227a5ba9e42903698f143b56facc1/apps/desktop/src/routes/app/extension/ui-worker/%2Bpage.svelte#L103)
Based on the type of `view` (command), the frontend will render the view with different components.
## Sample Code
For example, this is how to render a markdown view in an extension.
```ts
class ExtensionTemplate extends TemplateUiCommand {
async load() {
return ui.render(
new Markdown(`# Hello World`)
)
}
}
```
This is how list view is rendered.
```ts
return ui.render(
new List.List({
// items: allItems.filter((item) => item.title.toLowerCase().includes(term.toLowerCase())),
inherits: ["items", "sections"],
defaultAction: "Top Default Action",
detail: new List.ItemDetail({
children: [
new List.ItemDetailMetadata([
new List.ItemDetailMetadataLabel({
title: "Label Title",
text: "Label Text"
})
])
width: term.length > 3 ? 70 : 30
})
})
)
const list = new List.List({
items: allItems,
defaultAction: "Top Default Action",
detail: new List.ItemDetail({
children: [
new List.ItemDetailMetadata([
new List.ItemDetailMetadataLabel({
title: "Label Title",
text: "Label Text"
}),
new List.ItemDetailMetadataLabel({
title: "Label Title",
text: "Label Text",
icon: new Icon({
type: IconType.enum.Iconify,
value: "mingcute:appstore-fill"
})
}),
new List.ItemDetailMetadataSeparator(),
new List.ItemDetailMetadataLabel({
title: "Label Title",
text: "Label Text"
}),
new List.ItemDetailMetadataLink({
title: "Link Title",
text: "Link Text",
url: "https://github.com/huakunshen"
}),
new List.ItemDetailMetadataLabel({
title: "Label Title",
text: "Label Text"
}),
tagList
]),
new Markdown(`# Hello World`)
],
width: 50
}),
actions: new Action.ActionPanel({
items: [
new Action.Action({
title: "Action 1",
value: "action 1",
icon: new Icon({ type: IconType.enum.Iconify, value: "material-symbols:add-reaction" })
}),
new Action.Action({ title: "Action 2", value: "action 2" }),
new Action.Action({ title: "Action 3", value: "action 3" }),
new Action.Action({ title: "Action 4", value: "action 4" })
]
})
})
return ui.render(list)
```
The `Markdown` and `List.List` class are both commands, both implement `IComponent` interface.