The kusion compile command can be wrapped as a View & Live View feature like markdown preview

[amyXia1994]

similar code preview features in vs code markdown

here is VS Code's out-of-the-box basic Markdown support for markdown preview:

• users can toggle the visualization of the editor between the code and the preview of the Markdown file, and that can be triggered by different ways:
  • shortcut: ⇧⌘V
  • right-click on the editor Tab and select Open Preview (⇧⌘V)
  • command Palette: to run the Markdown: Open Preview (⇧⌘V)

• or, users can view the preview side-by-side with the file that is being edited and see changes reflected in real-time by:

  • shortcut: ⌘K V
  • clicking the preview button in the editor toolbar
  • command Palette: Markdown: Open Preview to the Side and users can lock that preview window by Command: Markdown: Toggle Preview Locking

• here are the commands in the command palette:

• the button in the editor toolbar for markdown preview:

• the right-click menu on the editor tab:

similar preview features in vs code SVG Previewer extension

Optimization of kcl compile

• The feature can only be triggered when a valid KCL file is in the active editor:

  • If the KCL file is under a stack, the preview button and command will be shown. And the YAML representation of the stack configuration will be previewed.
  • If the KCL file is not under a stack, the preview button and command will be shown. And the YAML representation of that single file will be previewed.
  • If the configuration is not valid (contains some syntax error or could not pass the check validation):
  • the preview command in the palette, the button in the toolbar, and the command in the editor tab will still be shown but should be disabled(with gray font and can not be triggered). And there should be a warning on that command or button to intimate that the code needs to be fixed first.
  • If the user triggers the preview with the shortcut, then the preview panel should be displayed with empty data content, but a warning to intimate the code needs to be fixed first.
  • In other situations, that preview button and command will not be displayed.

• support viewing the corresponding YAML data of a KCL configuration

  • single Yaml view: could be triggered by:
  • shortcut: ⇧⌘V
  • right-click on the editor Tab and select Open Preview (⇧⌘V)
  • Command Palette: KCL: Data Preview (⇧⌘V)
  • side-by-side live view. could be triggered by:
  • shortcut: ⌘K V
  • clicking the preview button in the editor toolbar
  • command Palette: KCL: Open Preview to the Side⌘K V

• besides, the markdown preview can automatically synchronize between the Markdown editor and the preview panes. Scroll the Markdown preview and the editor is scrolled to match the preview's viewport. Since the KCL code and the Yaml data are not exactly one-to-one associated like markdown, that feature is not suitable for kcl.

ref

• https://code.visualstudio.com/docs/languages/markdown#_markdown-preview
• https://marketplace.visualstudio.com/items?itemName=vitaliymaz.vscode-svg-previewer
• https://marketplace.visualstudio.com/items?itemName=EFanZh.graphviz-preview
• https://code.visualstudio.com/api/ux-guidelines/webviews
• https://code.visualstudio.com/api/extension-guides/webview
• https://code.visualstudio.com/api/extension-guides/virtual-documents
• https://code.visualstudio.com/api/references/icons-in-labels
• https://code.visualstudio.com/api/references/contribution-points#contributes.customEditors
• https://code.visualstudio.com/api/extension-guides/custom-editors
• https://github.com/vitaliymaz/vscode-svg-previewer/blob/2f72ec85831cbeada9106b90dff7c48a2aed3780/src/features/previewManager.ts#L30
• vscode markdown extension source code: https://github.com/microsoft/vscode/blob/main/extensions/markdown-language-features/package.json

[amyXia1994]

found similar feature for helm chart template(from vscode kubernetes extension maintained by microsoft), could be triggered by command: Helm: Preview Template

This feature is implemented using vscode webview, and the yaml format preview doesn't support highlight or folding.

[amyXia1994]

This feature seems more meaningful on vscode-kcl extension, let's migrate the feature from vscode-kusion to vscode-kcl. 😃 cc @He1pa