RFC Discussion: [RFC] Vue component rendering system for custom nodes

[github-actions[bot]]

This is the discussion thread for RFC PR #33.

Please provide feedback and discuss the RFC here rather than in the PR comments.

PR Link: #33

[christian-byrne]

rfcs/rfcs/0004-vue-component-rendering-system.md

Lines 277 to 291 in ed2ea11

	## Future Considerations
	1. **Component Registry and Manifest System**: In the future, we could explore a system that allows custom nodes to register their own Vue components:
	```json
	{
	"components": [
	{
	"name": "MyCustomWidget",
	"path": "./components/MyCustomWidget.vue",
	"description": "A custom widget for displaying data"
	}
	]
	}
	```

In general, it will be more maintanable and allow consistent design/styles/UX if the available component library exposed publically meets 99% of custom node dev needs.

Although it's also possible to create/register custom Vue components: you can create a Vue component file manually, add it to the WEB_DIRECTORY path, then follow similar process as that which is outlined in detail in https://github.com/jtydhr88/ComfyUI_frontend_vue_basic:

import { app } from "../../../scripts/app.js";
import { addWidget, ComponentWidgetImpl } from "../../../scripts/domWidget.js";

import VueExampleComponent from "@/components/VueExampleComponent.vue";

app.registerExtension({
    name: 'vue-basic',
    getCustomWidgets(app) {
        return {
            // Create custom Vue component widget
            CUSTOM_VUE_COMPONENT_BASIC(node) {
                const inputSpec = {
                    name: 'custom_vue_component_basic',
                    type: 'vue-basic',
                }

                const widget = new ComponentWidgetImpl({
                    node,
                    name: inputSpec.name,
                    component: VueExampleComponent,
                    inputSpec,
                    options: {}
                })

                addWidget(node, widget)

                return {widget}
            }
        }
    },
    nodeCreated(node) {
        if (node.constructor.comfyClass !== 'vue-basic') return

        const [oldWidth, oldHeight] = node.size

        node.setSize([Math.max(oldWidth, 300), Math.max(oldHeight, 520)])
    }
});

The system would then need a very small adjustment to load Vue components added at runtime if they are passed by name in the websocket message.

[christian-byrne]

From @ltdrdata

I agree with this. We need to provide backend APIs that can relay certain front-end APIs.

---

The API for rendering frontend components/elements can also be extended to work with the existing developer APIs like

• https://docs.comfy.org/custom-nodes/js/javascript_dialog
• https://docs.comfy.org/custom-nodes/js/javascript_toast
• https://docs.comfy.org/custom-nodes/js/javascript_commands_keybindings (executing frontend-registered commands)
• https://docs.comfy.org/custom-nodes/js/javascript_topbar_menu (maybe somehow?)

[set-soft]

Hi @christian-byrne
I'm the discord user mentioned above, thanks for bringing this to an RFC.
I think your RFC is quite clear, but want to explain my motivation: my nodes are using the logging mechanism to inform about particular situations, I'm displaying colored messages and using comfy logger as base. But I wonder how many users really pay attention to the logs in the console, this is why I wanted to make it visible in the frontend.
And yes, you are right, I considered using JS, but this doesn't scale, if every custom node that wants no notify the user in the UI does it ... we get a real mess.
I hope some mechanism can be implemented to provide a clean API, thanks