Package data for NPM as ESM and CJS (#12169)

* Package data for NPM as ESM and CJS

Previously only a CJS entrypoint was provided. This provides a ESM
entrypoint that can be directly used from Deno or a browser.

* review changes

* review comment

* Update README.md

Co-authored-by: Queen Vinyl Da.i'gyu-Kazotetsu <[email protected]>

README.md

@@ -25,8 +25,13 @@ npm install @mdn/browser-compat-data
 ## Usage
 
 ```js
+// Import BCD into your project
+import bcd from '@mdn/browser-compat-data';
+// ...or...
 const bcd = require('@mdn/browser-compat-data');
-bcd.css.properties.background;
+
+// Grab the desired support statement
+const support = bcd.css.properties.background;
 // returns a compat data object (see schema)
 ```
 

index.d.ts

@@ -1,9 +1,6 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
-/// <reference path="./types.d.ts"/>
+
 import { CompatData } from './types';
 
-// This is necessary to have intellisense in projects which
-// import data from this package.
-declare const compatData: CompatData;
-export = compatData;
+export default CompatData;

scripts/release-build.js

@@ -15,15 +15,14 @@ function createDataBundle() {
 }
 
 // Returns a promise for writing the data to JSON file
-async function writeData() {
+async function writeData(data) {
   const dest = path.resolve(directory, 'data.json');
-  const data = createDataBundle();
   await fs.writeFile(dest, data);
 }
 
-async function writeIndex() {
+async function writeIndexESM(data) {
   const dest = path.resolve(directory, 'index.js');
-  const content = `module.exports = require("./data.json");\n`;
+  const content = `export default ${data};\n`;
   await fs.writeFile(dest, content);
 }
 
@@ -38,7 +37,11 @@ async function copyFiles() {
 
 function createManifest() {
   const full = require('../package.json');
-  const minimal = { main: 'index.js' };
+  const minimal = {
+    main: 'data.json',
+    exports: { import: './index.js', require: './data.json' },
+    type: 'module',
+  };
 
   const minimalKeys = [
     'name',
@@ -84,9 +87,11 @@ async function main() {
   // Crate a new directory
   await fs.mkdir(directory);
 
+  const data = createDataBundle();
+
   await writeManifest();
-  await writeData();
-  await writeIndex();
+  await writeData(data);
+  await writeIndexESM(data);
   await copyFiles();
 
   console.log('Data bundle is ready');

scripts/release-build.test.js

@@ -2,13 +2,23 @@
 const assert = require('assert');
 const { execSync } = require('child_process');
 
-const prebuiltPath = '../build';
+const prebuiltCjsPath = '../build';
+const prebuiltJsPath = '../build/index.js';
+
+const regular = require('..');
 
 describe('release-build', () => {
-  it('pre-built bundles are identical to the source', () => {
+  before(() => {
     execSync('npm run release-build');
-    const regular = require('..');
-    const bundled = require(prebuiltPath);
+  });
+
+  it('pre-built cjs bundles are identical to the source', () => {
+    const bundled = require(prebuiltCjsPath);
+    assert.deepEqual(regular, bundled);
+  }).timeout(5000); // Timeout must be long enough for all the file I/O;
+
+  it('pre-built esm bundles are identical to the source', async () => {
+    const { default: bundled } = await import(prebuiltJsPath);
     assert.deepEqual(regular, bundled);
-  }).timeout(5000); // Timeout must be long enough for all the file I/O
+  }).timeout(5000); // Timeout must be long enough for all the file I/O;
 });