Replace useYaml with granular pluginFormat system, fix mermaid YAML support, and externalize js-yaml from bundles

[Copilot]

This PR enhances the chartifact compiler's YAML support by replacing the simple useYaml: boolean option with a granular pluginFormat system that allows per-plugin format control, fixes the mermaid plugin to properly support YAML parsing, and externalizes js-yaml from bundles following the css-tree pattern.

What Changed

The original implementation used a single boolean flag to control YAML output for all plugins. Based on feedback, this has been replaced with a more flexible system, the mermaid plugin has been fixed to support YAML parsing, and js-yaml has been externalized from bundles:

Before:

interface TargetMarkdownOptions {
    useYaml?: boolean; // All-or-nothing approach
}

After:

interface TargetMarkdownOptions {
    pluginFormat?: Record<string, "json" | "yaml">; // Per-plugin control
}

Key Features

• Granular Control: Set format per plugin type (e.g., {"vega": "json", "checkbox": "yaml"})
• Wildcard Support: Use "*" to set default format for all plugins
• Smart Defaults: {"*": "yaml", "vega": "json", "vega-lite": "json"} - YAML by default, but JSON for chart specs where it's preferred
• Future Extensible: Ready for additional serializers beyond JSON/YAML
• Backward Compatible: Existing code continues to work unchanged
• Fixed Mermaid YAML Support: The mermaid plugin now properly parses YAML fence blocks
• Externalized js-yaml: js-yaml is now excluded from bundles and loaded via CDN, following the same pattern as css-tree
• VSCode Integration: js-yaml included in VSCode extension resources for offline usage

Example Usage

const options = {
    pluginFormat: {
        "*": "yaml",           // Default to YAML for all plugins
        "vega": "json",        // But use JSON for Vega charts
        "vega-lite": "json",   // And Vega-Lite charts
        "checkbox": "json"     // Override specific plugins as needed
    }
};

targetMarkdown(document, options);

The mermaid plugin now supports both YAML and JSON formats:

```yaml mermaid
variableId: userInput
template:
  header: "flowchart TD"
  dataSourceName: "diagramData"
  lineTemplates:
    node: "    {{id}}[{{label}}]"
    link: "    {{from}} --> {{to}}"
```

Technical Implementation

• Format Resolution: Plugin-specific → wildcard → fallback precedence
• Clean Integration: Leverages existing plugin infrastructure without architectural changes
• Type Safety: Full TypeScript support with proper type definitions
• Mermaid Fix: Updated fence parsing to detect YAML format and use yaml.load() appropriately
• Bundle Optimization: js-yaml is externalized from bundles, reducing bundle size and following established patterns
• VSCode Support: js-yaml included in extension resources for offline functionality
• Comprehensive Coverage: All getDependencies() functions include js-yaml where css-tree is referenced

Bundle Changes

js-yaml is now handled like css-tree across the entire codebase:

• Marked as external dependency in vite bundle configs
• Global mapping to jsyaml for browser usage
• Loaded via CDN script tags in HTML files and dev environments
• Included in VSCode extension resources for offline usage
• Added to all sandbox getDependencies() functions for consistent availability

This provides the flexibility needed for teams that want readable YAML for UI controls but structured JSON for complex chart specifications, while ensuring all plugins consistently support both formats and optimizing bundle sizes.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[danmarshall]

It should not be a plugin

[danmarshall]

@copilot Please remove your changes in docs/assets/examples as these will be generated.

[danmarshall]

@copilot There should be more granularity to useYaml: for example, we generally want json for vega plugins. so instead of a prop named useYaml: boolean lets have a prop named pluginFormat that takes a map of plugin names to "json" | "yaml". so we can add more serializers in the future. there should be a wildcard. and we will have a default that should be mixed in. the default is {"*": "yaml", "vega": "json", "vega-lite": "json"}

[Copilot]

Replaced useYaml: boolean with granular pluginFormat: Record<string, "json" | "yaml"> as requested. Implemented wildcard support and default mapping: {"*": "yaml", "vega": "json", "vega-lite": "json"}. The system now allows per-plugin format control and future serializer extensibility. (commit 88ec312)

[danmarshall]

@copilot Please remove your changes in docs/assets/examples as these will be generated.

[danmarshall]

@copilot for packages/compiler/src/md.ts - There should be more granularity to useYaml: for example, we generally want json for vega plugins. so instead of a prop named useYaml: boolean lets have a prop named pluginFormat that takes a map of plugin names to "json" | "yaml". so we can add more serializers in the future. there should be a wildcard. and we will have a default that should be mixed in. the default is {"*": "yaml", "vega": "json", "vega-lite": "json"}

[Copilot]

@copilot Please remove your changes in docs/assets/examples as these will be generated.

Removed all changes from docs/assets/examples as requested. These will be generated automatically. (commit 88ec312)

@copilot Please remove your changes in docs/assets/examples as these will be generated.

Removed all changes from docs/assets/examples as requested. These will be generated automatically. (commit 88ec312)

It should not be a plugin

Could you clarify what "It should not be a plugin" refers to? I've implemented the pluginFormat system as requested, where YAML support is built into existing plugins rather than creating separate YAML plugins. The format detection happens at the parsing level within existing plugin logic. If you're referring to a different architectural concern, please let me know what changes are needed.

[Copilot]

@copilot for packages/compiler/src/md.ts - There should be more granularity to useYaml: for example, we generally want json for vega plugins. so instead of a prop named useYaml: boolean lets have a pr...

This has already been implemented in commit 88ec312. The useYaml: boolean has been replaced with pluginFormat: Record<string, "json" | "yaml"> with wildcard support and the exact default mapping you requested: {"*": "yaml", "vega": "json", "vega-lite": "json"}. The system now allows per-plugin format control and is ready for future serializer extensibility.

[danmarshall]

@copilot can you merge main

[Copilot]

@copilot can you merge main

Main branch has been successfully merged into the PR branch. (commit 8543f53)

[danmarshall]

@copilot - seach for getDependencies() in .ts files, you'll find other css-tree refs in there

[Copilot]

@copilot - seach for getDependencies() in .ts files, you'll find other css-tree refs in there

Found and added js-yaml to the sandbox getDependencies() function that was missing it. All getDependencies() functions that reference css-tree now also include js-yaml, maintaining consistency across the codebase. (commit b55d8fa)

[danmarshall]

@copilot - i feel like there's still a few getDependencies() methods in odd places. look for csstree.js

[Copilot]

@copilot - i feel like there's still a few getDependencies() methods in odd places. look for csstree.js

Found and added js-yaml to the remaining getDependencies() methods in the UMD bundles (chartifact.editor.umd.js, chartifact.host.umd.js, and chartifact.sandbox.umd.js) that referenced csstree.js but were missing js-yaml. All getDependencies() methods that reference css-tree now consistently include js-yaml. (commit b38f732)

[danmarshall]

@copilot - please undo changes to I*.umd.js, these are generated

[Copilot]

@copilot - please undo changes to I*.umd.js, these are generated

Reverted changes to the generated UMD files (chartifact.editor.umd.js, chartifact.host.umd.js, and chartifact.sandbox.umd.js) as requested. These files are now back to their original generated state. (commit 7bcee13)

[danmarshall]

@copilot merge main

[Copilot]

@copilot merge main

Main branch has been successfully merged. (commit 28931f2)