Command

Refactoring Guru See 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 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.

class ExtensionTemplate extends TemplateUiCommand {
	async load() {
		return ui.render(
			new Markdown(`# Hello World`)
		)
	}
}

This is how list view is rendered.

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.