When you’re preparing or reviewing a PR for browser-compat-data it can be very helpful to see what the JSON will look like when it’s rendered as a compat table in an MDN page. This post describes a method for doing that.
Briefly, it’s like this:
- install a local version of Kuma
- edit the macro that generates compat tables to use your JSON rather than the real BCD
- edit a page to call the modified macro
It’s worth noting that this is a pretty hacky approach and will eventually be replaced with something better.
Install Kuma
This is a bit involved but has solid docs here: https://kuma.readthedocs.io/en/latest/installation.html. You need to do everything up to “Visit the homepage”.
Create a user
Since you’ll be editing pages, you’ll need to create a user in the local Kuma instance. The easiest way to do this is to create an admin user, following these instructions: https://kuma.readthedocs.io/en/latest/installation.html#create-an-admin-user.
Copy the JSON
Next, copy the JSON you want to test.
If it’s my PR, of course I’ll have it in a file on my disk already. Just open the file and copy to the clipboard.
If I’m reviewing a PR, I’ll do this as follows:
- open the PR, then click “Files changed”
- find the file to test, then click “View”
- click “Raw”
This gets you a page that just contains the raw JSON. Copy the contents of this page to the clipboard.
Edit the compat macro
Next, open the file that contains the compat macro. Starting from the place you installed Kuma, this will be at kumascript/macros/Compat.ejs.
Find a line like const bcd = require('mdn-browser-compat-data');, somewhere near the top. Replace the right hand side of this assignment with the JSON you just copied. So this will look like: const bcd = {tons of JSON}.
Save the file.
Call the macro
Now open your local Kuma in a web browser, and make sure you are logged into it. Open a Wiki page - it really doesn’t matter which one. Say http://localhost:8000/en-US/docs/Web/HTML. Click “Edit” just as you do in the normal Wiki. Then call the macro, just as you would in a normal page, by typing something like:
{{Compat("webextensions.api.management.getAll", 10)}}
Note, of course, that the path you pass to the macro (webextensions.api.management.getAll) must actually exist in the JSON you pasted into the Compat.ejs file.
Save the page, and you should see the table:
