Browser-compat-data: Move MDN feature table rendering to BCD project

[jwhitlock]

I believe future contributors will be thinking "This part of the compatibility table on MDN is wrong, I want to fix it". It will be useful for these contributors as well as the reviewers to be able to see what the MDN table will looks like after a pull request is merged. This means that BCD contributors will want to be able to generate MDN tables.

Currently, MDN feature tables are rendered in the KumaScript macro Compat, such as {{compat("webextensions.api.alarms")}}. The core of this logic can be moved to this repository, so that BCD authors can generate MDN tables. The {{Compat}} macro can then focus on adding additional data, such as localizations, legacy tables, and links back to the BCD project.

[jwhitlock]

Draft API:

const bcd = require('mdn-browser-compat-data');

/* Generate default HTML for development */
let html = bcd.render(
    bcd.webextensions.api.alarms,
    bcd.renderers.mdnFeatureTable);

/* Alter behaviour by passing in configuration object */
let fancyHtml = bcd.render(
    bcd.webextensions.api.alarms,
    bcd.renderers.mdnFeatureTable,
    {'style': 'fancy'}   /* TODO: write fancy version */
);

/* Equivalent calls */
/* Call renderer directly */
let html = bcd.renderers.mdnFeatureTable(bcd.webextensions.api.alarms);
/* Call with strings */
let html = bcd.render(
   'webextensions.api.alarms',  /* Data is assumed to be BCD path */
   'mdnFeatureTable');  /* Renderer is assumed to be in bcd.renderers */

/* Generate HTML for display on MDN */
const l10nStrings = {
    'no-data-found': {
        'en-US': 'No compatibility data found.',
        'es': 'No se han encontrado datos de compatibilidad.'
    } /*, more localized strings */
};
let mdnHTML = bcd.render(
    bcd.webextensions.api.alarms,
    bcd.renderers.mdnFeatureTable,
    {'locale': 'es',
     'strings': l10nStrings,
     'inBeta': true
    }
);

/* Generate aggregate tables */
mdnData = require('mdn-data');
let aggregateHTML = bcd.render(
    bcd.css,
    bcd.renderers.mdnAggregateTable,
    {
        'properties': mdnData.css.properties,
        'group': 'CSS Grid Layout'
    });

[MatonAnthony]

So we thought a bit more about this:

What do we want?

• Generate the HTML of a Compatibility Table
• Keep the BCD package code free
• Render the Compatibility Table

How do we want it?

Currently we have two ways of rendering a Compatibility Table on two differents codebase.
- Kumascript {{CompatBeta}} macro does the rendering on Kumascript
- render.js does the rendering for testing BCD.

We have 0 lines of codes in the packaged version of BCD. (It is a pure dataset).

Our idea would be to generify the code that generates the HTML so it can be called easily.
For that we would like to introduce a new npm package let's call it bcd-renderer for now.

This module would expose

• a function taking in parameters:
  
  
  
  • The BCD reference eg. css.property.background
  
  
  • An option object _(optional)_
    
    
    
    
    
    • depth: number (how deep we intend to go down the tree)
    
    
    
  
  
  • An anonymous custom renderer _(optional)_
  
  
• a function taking in parameters:
  
  
  
  • A JSON object with the BCD data to render
  
  
  • An option object _(optional)_
  
  
  • An anonymous custom renderer _(optional)_
  
  

This new module would depend on browser-compat-data.
browser-compat-data would not depend on the renderer.

Expected Results

An independent renderer modules able to render the HTML table that would be used by Kumascript and by another tool that needs to render a Compatibility Tables such as a Github Bot that would comment on PR with the tables.

[jwhitlock]

We've started a new repo, https://github.com/mdn/browser-compat-toolkit, for the source code tools we're maintaining related to this data. @flaki has been doing some interesting work with the rendering code that may be appropriate in that repo.

[Elchi3]

Closing this as the current thoughts have quite evolved from the original issue title and I'm in favor of having this repo to be just about the data itself.

Thanks for starting the new repo, I hope it will be used by BCD and MDN at some point so that we have a canonical MDN renderer repo the community can easily contribute to.