report-component-spec.md

export const MyCustomThing: React.FC = ({ ruleResults: RuleResults }) => { return {ruleResults}; };

// End to end custom components

• Pretty formatter can render a checkup log
• Each task identifies what component its results should use to render
  • Ember test types wants to use a table, therefore it specifies the component to render as part of its metadata that is stored in rules, eg. { "component": "table" }
  • Plugins register their custom components similar to how tasks are themselves registered (via an API provided from checkup-formatter-pretty to plugins
• Checkup runs, produces all results and stores into a SARIF log
  • SARIF log contains rules metadata for each task run, which itself includes which component, by name, we want to render using the pretty formatter
• During format of the PrettyFormatter, we iterate the results in the log
  • for each task
    • lookup its rule metadata, and grab the component property's value (it should either match a built-in component, or if using a custom component, it should use the registered name)
    • lookup the component by name
    • pass result data into looked up component