To further unify the developer experience within the Portal and Documentation apps, we should extend the Neo.component.code.LivePreview component to support Mermaid diagrams.
Current State:
LivePreview expects JavaScript code that exports a Neo.mjs component or VDOM, which it then executes and mounts in the preview area.
New Capability:
Enable LivePreview to accept Mermaid diagram syntax.
Implementation Strategy:
- Detection/Configuration: Add a mechanism to determine if the content is Mermaid code (e.g., a
language config or auto-detection).
- Renderer Switching:
- If JavaScript: Keep existing execution logic.
- If Mermaid: Instantiate
Neo.component.wrapper.Mermaid in the preview container and bind its value to the editor content.
- Editor Integration: Ensure the Monaco Editor uses the correct syntax highlighting for Mermaid.
Benefits:
- Unified "Playground" for both UI widgets and architectural diagrams.
- Simplifies documentation authoring (one component for all live examples).
To further unify the developer experience within the Portal and Documentation apps, we should extend the
Neo.component.code.LivePreviewcomponent to support Mermaid diagrams.Current State:
LivePreviewexpects JavaScript code that exports a Neo.mjs component or VDOM, which it then executes and mounts in the preview area.New Capability: Enable
LivePreviewto accept Mermaid diagram syntax.Implementation Strategy:
languageconfig or auto-detection).Neo.component.wrapper.Mermaidin the preview container and bind itsvalueto the editor content.Benefits: