dsh-canvas-tsx-sidebar: Qoder Canvas Renderer for the DSH Sidebar

Introduction¶

In the DSH Web plugin ecosystem, extending the sidebar based on dsh-better-sidebar is a common practice. dsh-canvas-tsx-sidebar is a consumer plugin that statically parses Qoder Canvas *.canvas.tsx files into structured pages and renders them directly in the DSH right sidebar. Unlike approaches that require compilation or a sandbox, this plugin completes parsing with a lightweight recursive descent parser built in-house and does not execute source code at all.

Core Features¶

• Static Parsing and Rendering: Parses *.canvas.tsx files in the workspace into structured pages and renders them in the right sidebar.
• Zero Parser Dependencies: Uses a lightweight recursive descent parser built in-house, with no reliance on external parser libraries.
• Security: Does not execute source code, and does not use eval, new Function, bundlers, or sandboxed iframes; it performs read-only rendering only.
• Skill Integration: Includes the writing-qoder-canvas Skill to help LLMs generate Canvas files that conform to the expected format.
• Entry Takeover: Takes over the file viewer and tab entry, providing a unified viewing method.

Installation and Prerequisites¶

Before installing, make sure the following dependencies are met:
* DSH version: 0.2.0 series (or a specific legacy series version).
* Required plugin: dsh-better-sidebar (>= 0.19.1).

Install using the official CLI:

dsh plugin --profile <profile> add dsh-canvas-tsx-sidebar@dsh-0.2.0

After installation, restart dsh web for the plugin to take effect.

Usage¶

This plugin provides two ways to open Canvas reports:

1. File Viewer (Takeover Mode)
   Open any .tsx file directly in the DSH file tree. The plugin takes over the file; if it is a *.canvas.tsx file, it is rendered as a structured page, while other .tsx files display their source code. Note: the file viewer claims all .tsx file extensions.

2. Tab Entry (Manual Mode)
   In the + menu of the DSH right sidebar, select “Canvas Report”, then manually enter the file path. This method does not depend on the file viewer and can view Canvas files located anywhere.

Skill Integration¶

The repository includes the writing-qoder-canvas Skill, which guides LLMs in writing .canvas.tsx files that conform to this plugin’s parsing specification.

Install the Skill:

pwsh -NoProfile -File ./scripts/install-skill.ps1

Notes and Limitations¶

• Parsing Precision: The parser is a lightweight implementation and does not support complex TypeScript features such as generics and decorators. Unsupported content degrades to a fallback display.
• File Claiming: To cover .canvas.tsx files, the file viewer claims all .tsx file extensions, causing non-Canvas .tsx files to also be rendered by this plugin.
• JSX Semantics: Whitespace handling for text child nodes strictly follows React conventions (for example, preserving trailing spaces at the end of the last line).

More Information¶

• GitHub repository: https://github.com/drscrewdriver/dsh-canvas-tsx-sidebar
• Skill directory: https://www.skillhub.cn/plugins/drscrewdriver/dsh-canvas-tsx-sidebar