refactor(nano): add component-specific render methods to NanoRenderer #488

phodal · 2025-12-06T14:15:07Z

Summary

Refactor NanoRenderer to use component-specific methods instead of when statement string matching.

Problem

The current NanoRenderer uses when (ir.type) string matching to dispatch rendering, which:

Silently ignores unknown components in the else branch
Makes it difficult to discover missing implementations when adding new components
Provides no compile-time safety across platforms

Solution

Following the pattern from CodingAgentRenderer, each component type now has a dedicated render method:

interface NanoRenderer<T> {
    // Layout
    fun renderVStack(ir: NanoIR): T
    fun renderHStack(ir: NanoIR): T
    // Container
    fun renderCard(ir: NanoIR): T
    fun renderForm(ir: NanoIR): T
    // Content
    fun renderText(ir: NanoIR): T
    fun renderImage(ir: NanoIR): T
    fun renderBadge(ir: NanoIR): T
    fun renderDivider(ir: NanoIR): T
    // Input
    fun renderButton(ir: NanoIR): T
    fun renderInput(ir: NanoIR): T
    fun renderCheckbox(ir: NanoIR): T
    fun renderTextArea(ir: NanoIR): T
    fun renderSelect(ir: NanoIR): T
    // Control Flow
    fun renderConditional(ir: NanoIR): T
    fun renderForLoop(ir: NanoIR): T
    // Meta
    fun renderComponent(ir: NanoIR): T
    fun renderUnknown(ir: NanoIR): T
}

Changes

NanoRenderer interface: Added component-specific methods
HtmlRenderer: Implements all new methods, added missing components (Form, TextArea, Select, Divider)
ComposeNanoRenderer: Refactored to follow same pattern with Render* functions
VSCode TypeScript: New NanoRenderer.tsx implementation with types and CSS

Benefits

Compile-time safety: New components require implementation in all renderers
Discoverability: IDE shows all required methods at a glance
Consistency: All platforms follow the same pattern

Closes #487

Summary by CodeRabbit

New Features
- Extended UI component library: Forms, TextArea, Select, Divider, Badge, Checkbox, Button and richer layout containers.
- Modular renderer exposing a unified node-based dispatch and platform-agnostic NanoUI rendering for the VSCode webview.
- Theming added: spacing scale and color scheme with a default theme.
- Control flow support: conditionals and loops.
Tests
- Updated tests to use the new node-based rendering entry point and adjusted assertions.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

- Refactor NanoRenderer interface to add dedicated methods for each component type - Update HtmlRenderer with all new interface methods (Form, TextArea, Select, Divider) - Refactor ComposeNanoRenderer to follow the same component-specific pattern - Add VSCode TypeScript NanoRenderer implementation with types and CSS This change ensures compile-time safety when adding new components - the compiler will enforce that all renderer implementations add corresponding methods, solving the issue where the 'else' branch would silently ignore unimplemented components. Closes #487

coderabbitai · 2025-12-06T14:15:20Z

Caution

Review failed

The pull request is closed.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Refactors Nano rendering into a component-specific dispatcher (renderNode) and adds explicit per-component render methods, TypeScript NanoIR/types, a React NanoRenderer, and CSS, updating JVM/HTML/VSCode renderers to route child rendering through the new dispatch.

Changes

Cohort / File(s)	Summary
Core interface & models `xuiper-ui/src/main/kotlin/cc/unitmesh/xuiper/render/NanoRenderer.kt`	Replaced string-based dispatch with `renderNode` dispatcher and added per-component methods (`renderVStack`, `renderHStack`, `renderCard`, `renderForm`, `renderText`, `renderImage`, `renderBadge`, `renderDivider`, `renderButton`, `renderInput`, `renderCheckbox`, `renderTextArea`, `renderSelect`, `renderConditional`, `renderForLoop`, `renderComponent`, `renderUnknown`). Removed `supports()`. Added `RenderContext`, `NanoRenderAction` (StateMutation, Navigate, Fetch, ShowToast), `NanoTheme`, `SpacingScale`, `ColorScheme`.
Compose renderer (JVM) `mpp-ui/src/jvmMain/kotlin/cc/unitmesh/devins/ui/nano/ComposeNanoRenderer.kt`	Introduced public `RenderNode` dispatcher and public per-component `RenderXxx` functions; reorganized rendering into Layout/Container/Content/Input/ControlFlow/Meta sections; updated child traversal to use `RenderNode(child)`; added new UI element renderers (Form, Divider, TextArea, Select, Button, Checkbox, Image, etc.).
HTML renderer `xuiper-ui/src/main/kotlin/cc/unitmesh/xuiper/render/HtmlRenderer.kt`, `xuiper-ui/src/test/kotlin/cc/unitmesh/xuiper/render/HtmlRendererTest.kt`	Replaced `renderComponent` with `renderNode` dispatcher; exposed many previously-private render helpers as public overrides (Form, Divider, TextArea, Select, etc.); tests updated to call `renderNode`.
Webview types `mpp-vscode/webview/src/types/nano.ts`	Added comprehensive TypeScript typings for NanoIR, state, actions, bindings, loops, rendering context, render actions, theme/spacing/colors, and exported `DEFAULT_THEME`.
Webview renderer & assets `mpp-vscode/webview/src/components/nano/NanoRenderer.tsx`, `mpp-vscode/webview/src/components/nano/NanoRenderer.css`, `mpp-vscode/webview/src/components/nano/index.ts`	New React `NanoRenderer` component with `RenderNode` dispatcher and per-component renderers; form submit wiring to Fetch actions; default render context merging; CSS file with layout primitives, components, theming via VSCode tokens; barrel `index.ts` re-exports `NanoRenderer`, types, and `DEFAULT_THEME`.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Areas needing extra attention:
- Consistency of method signatures across Kotlin interface and all implementations (Compose, HTML).
- Correct propagation of render context/state/dispatch and action serialization (Navigate/Fetch/ShowToast).
- Webview React wiring for Form submit and action dispatch (ensure types align with NanoActionIR).
- CSS class naming vs. JSX structure to avoid visual/behavior mismatches.
- Tests updated to renderNode coverage for new component types.

Possibly related issues

feat(nano): Implement cross-platform action dispatch system for NanoRenderer #489 — Overlaps with the new node-based renderer and action/dispatch types; this PR implements renderer refactor and action wiring relevant to that issue.

Possibly related PRs

feat(xuiper-ui): add DSL validation and HTML rendering tools #486 — Modifies ComposeNanoRenderer dispatch and adds Conditional/ForLoop handling; changes are closely related.
refactor(nano): add component-specific render methods to NanoRenderer #488 — Implements similar refactor replacing string dispatch with per-component methods across renderers; directly related.

Suggested reviewers

Copilot

Poem

🐰 I hopped through code with nimble paws,

RenderNode now leads the cause.
VStack, Card, and Form in line,
Types and CSS look sleek and fine.
A tiny carrot toast — render! 🍃

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 56.67% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main refactoring work: converting NanoRenderer to use component-specific render methods instead of string-based dispatch.
Linked Issues check	✅ Passed	The PR fully implements all core requirements from issue #487: added per-component render methods to NanoRenderer interface, updated HtmlRenderer and ComposeNanoRenderer implementations, and added all required component types.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with the refactoring objectives. The VSCode TypeScript additions (NanoRenderer.tsx, NanoRenderer.css, types/nano.ts) implement the interface on a new platform as intended by the pattern.

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e88c2e0 and 3d25ab8.

📒 Files selected for processing (4)

mpp-vscode/webview/src/components/nano/NanoRenderer.css (1 hunks)
mpp-vscode/webview/src/components/nano/NanoRenderer.tsx (1 hunks)
xuiper-ui/src/main/kotlin/cc/unitmesh/xuiper/render/HtmlRenderer.kt (5 hunks)
xuiper-ui/src/test/kotlin/cc/unitmesh/xuiper/render/HtmlRendererTest.kt (7 hunks)

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

mpp-ui/src/jvmMain/kotlin/cc/unitmesh/devins/ui/nano/ComposeNanoRenderer.kt (1)

190-202: Replace hardcoded colors with design tokens.

The RenderBadge function uses hardcoded hex colors (Color(0xFF4CAF50), Color(0xFFF44336), etc.) which violates the coding guidelines. As per coding guidelines, use AutoDevColors or MaterialTheme.colorScheme instead of hardcoded colors.

Consider refactoring to use Material theme colors:

-        val bgColor = when (colorName) {
-            "green" -> Color(0xFF4CAF50)
-            "red" -> Color(0xFFF44336)
-            "blue" -> Color(0xFF2196F3)
-            "yellow" -> Color(0xFFFFEB3B)
-            "orange" -> Color(0xFFFF9800)
-            else -> MaterialTheme.colorScheme.primaryContainer
-        }
-
-        val textColor = when (colorName) {
-            "yellow" -> Color.Black
-            else -> Color.White
-        }
+        val (bgColor, textColor) = when (colorName) {
+            "green" -> MaterialTheme.colorScheme.tertiary to MaterialTheme.colorScheme.onTertiary
+            "red" -> MaterialTheme.colorScheme.error to MaterialTheme.colorScheme.onError
+            "blue" -> MaterialTheme.colorScheme.primary to MaterialTheme.colorScheme.onPrimary
+            "yellow" -> MaterialTheme.colorScheme.secondaryContainer to MaterialTheme.colorScheme.onSecondaryContainer
+            "orange" -> MaterialTheme.colorScheme.tertiaryContainer to MaterialTheme.colorScheme.onTertiaryContainer
+            else -> MaterialTheme.colorScheme.primaryContainer to MaterialTheme.colorScheme.onPrimaryContainer
+        }

xuiper-ui/src/main/kotlin/cc/unitmesh/xuiper/render/HtmlRenderer.kt (1)

108-120: Potential XSS vulnerability: HTML content not escaped.

User-provided content from ir.props["content"] is directly interpolated into HTML without escaping. If the NanoIR tree is ever generated from untrusted input, this could lead to XSS vulnerabilities.

Consider escaping HTML entities:
+    private fun String.escapeHtml(): String {
+        return this
+            .replace("&", "&amp;")
+            .replace("<", "&lt;")
+            .replace(">", "&gt;")
+            .replace("\"", "&quot;")
+            .replace("'", "&#39;")
+    }
+
     override fun renderText(ir: NanoIR): String {
-        val content = ir.props["content"]?.jsonPrimitive?.content ?: ""
+        val content = (ir.props["content"]?.jsonPrimitive?.content ?: "").escapeHtml()
         val style = ir.props["style"]?.jsonPrimitive?.content ?: "body"
         // ... rest unchanged
     }
Apply similar escaping to renderBadge, renderButton, and other methods that render user content.

🧹 Nitpick comments (5)

xuiper-ui/src/main/kotlin/cc/unitmesh/xuiper/render/NanoRenderer.kt (1)

183-188: Consider adding StateMutation path validation.

The StateMutation action accepts any path: String and value: Any. For robustness, consider documenting the expected path format (e.g., dot-notation like "user.name") or validating the path in the dispatch handler.
mpp-vscode/webview/src/components/nano/NanoRenderer.css (1)
127-130: Use VSCode theme variable for yellow badge color.

The .color-yellow class uses a hardcoded #FFEB3B without a VSCode theme variable fallback. As per coding guidelines, avoid hardcoded colors in favor of design tokens.
 .color-yellow { 
-  background: #FFEB3B; 
+  background: var(--vscode-editorWarning-foreground, #FFEB3B); 
   color: black;
 }
mpp-vscode/webview/src/components/nano/NanoRenderer.tsx (1)
88-90: Consider using stable keys instead of array index.

Using array index as the React key (key={i}) can cause issues if children are reordered, filtered, or dynamically modified. If NanoIR nodes have unique identifiers, prefer using those.

If NanoIR nodes don't have IDs, consider generating stable keys:
-      {ir.children?.map((child, i) => (
-        <RenderNode key={i} ir={child} context={context} />
+      {ir.children?.map((child, i) => (
+        <RenderNode key={child.props.id ?? `${ir.type}-${i}`} ir={child} context={context} />
       ))}
mpp-vscode/webview/src/types/nano.ts (2)
56-80: Align NanoIR.type with a string‑literal union for known component types

You already have a closed set of component types in NanoSpecV1 (VStack, HStack, Card, Form, Text, Image, Badge, Divider, Button, Input, Checkbox, TextArea, Select, Conditional, ForLoop, Component). Keeping type: string loses compile‑time checking for those values in the webview.

Consider introducing a dedicated union type and using it here:
+export type NanoComponentType =
+  | 'VStack'
+  | 'HStack'
+  | 'Card'
+  | 'Form'
+  | 'Text'
+  | 'Image'
+  | 'Badge'
+  | 'Divider'
+  | 'Button'
+  | 'Input'
+  | 'Checkbox'
+  | 'TextArea'
+  | 'Select'
+  | 'Conditional'
+  | 'ForLoop'
+  | 'Component';
+
 export interface NanoIR {
   /** Component type (VStack, Card, Text, Button, etc.) */
-  type: string;
+  type: NanoComponentType;
This keeps the IR in sync with the explicit renderer methods and makes it harder to introduce typos or unsupported components on the TypeScript side.

36-40: Narrow NanoBindingIR.mode to the documented modes

The docstring says mode is "subscribe" for << or "twoWay" for :=, but the type is a free "string". You can get a nice discriminated union here:
 export interface NanoBindingIR {
   /** "subscribe" for << or "twoWay" for := */
-  mode: string;
+  mode: 'subscribe' | 'twoWay';
   expression: string;
 }
This aligns with how NanoRenderAction is modeled and gives better autocomplete + validation in the webview code.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bbb930c and e88c2e0.

📒 Files selected for processing (7)

mpp-ui/src/jvmMain/kotlin/cc/unitmesh/devins/ui/nano/ComposeNanoRenderer.kt (8 hunks)
mpp-vscode/webview/src/components/nano/NanoRenderer.css (1 hunks)
mpp-vscode/webview/src/components/nano/NanoRenderer.tsx (1 hunks)
mpp-vscode/webview/src/components/nano/index.ts (1 hunks)
mpp-vscode/webview/src/types/nano.ts (1 hunks)
xuiper-ui/src/main/kotlin/cc/unitmesh/xuiper/render/HtmlRenderer.kt (4 hunks)
xuiper-ui/src/main/kotlin/cc/unitmesh/xuiper/render/NanoRenderer.kt (1 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.kt

📄 CodeRabbit inference engine (AGENTS.md)

**/*.kt: Use expect/actual for platform-specific code in Kotlin Multiplatform projects
For @JsExport in Kotlin, use concrete classes (not interfaces) and Promise (not Flow) for JavaScript interoperability
Avoid emoji and UTF-8 characters in WASM code

Files:

xuiper-ui/src/main/kotlin/cc/unitmesh/xuiper/render/NanoRenderer.kt
xuiper-ui/src/main/kotlin/cc/unitmesh/xuiper/render/HtmlRenderer.kt
mpp-ui/src/jvmMain/kotlin/cc/unitmesh/devins/ui/nano/ComposeNanoRenderer.kt

**/*Renderer.kt

📄 CodeRabbit inference engine (AGENTS.md)

When modifying CodingAgentRenderer in Kotlin, update ALL implementations: DefaultCodingAgentRenderer, ComposeRenderer, JewelRenderer, ServerSideRenderer, JsRendererAdapter

Files:

xuiper-ui/src/main/kotlin/cc/unitmesh/xuiper/render/NanoRenderer.kt
xuiper-ui/src/main/kotlin/cc/unitmesh/xuiper/render/HtmlRenderer.kt
mpp-ui/src/jvmMain/kotlin/cc/unitmesh/devins/ui/nano/ComposeNanoRenderer.kt

**/*Compose*.kt

📄 CodeRabbit inference engine (AGENTS.md)

For Compose UI design, use AutoDevColors or MaterialTheme.colorScheme

Files:

mpp-ui/src/jvmMain/kotlin/cc/unitmesh/devins/ui/nano/ComposeNanoRenderer.kt

{**/Compose*.kt,mpp-ui/src/jsMain/typescript/**/*.ts}

📄 CodeRabbit inference engine (AGENTS.md)

Never use hardcoded colors - always use design tokens from the design system

Files:

mpp-ui/src/jvmMain/kotlin/cc/unitmesh/devins/ui/nano/ComposeNanoRenderer.kt

🧠 Learnings (7)

📓 Common learnings

Learnt from: CR
Repo: phodal/auto-dev PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T13:54:33.558Z
Learning: Applies to **/*Renderer.kt : When modifying `CodingAgentRenderer` in Kotlin, update ALL implementations: `DefaultCodingAgentRenderer`, `ComposeRenderer`, `JewelRenderer`, `ServerSideRenderer`, `JsRendererAdapter`

Learnt from: CR
Repo: phodal/auto-dev PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T13:54:33.558Z
Learning: Applies to **/*Renderer.ts : When modifying `CodingAgentRenderer` in TypeScript, update ALL implementations: `BaseRenderer.ts`, `CliRenderer.ts`, `ServerRenderer.ts`, `TuiRenderer.ts`