From b740c60fcd7f56138344b441a3a8cdd550294f23 Mon Sep 17 00:00:00 2001
From: Luca Casonato <hello@lcas.dev>
Date: Fri, 8 Apr 2022 00:36:11 +0200
Subject: [PATCH] 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 <vinyldarkscratch@gmail.com>
---
 README.md                     |  7 ++++++-
 index.d.ts                    |  7 ++-----
 scripts/release-build.js      | 19 ++++++++++++-------
 scripts/release-build.test.js | 20 +++++++++++++++-----
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 421e5955211be9..1ca68a62d5714e 100644
--- a/README.md
+++ b/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)
 ```
 
diff --git a/index.d.ts b/index.d.ts
index 87727fa413bc00..97dd9fe99c8349 100644
--- a/index.d.ts
+++ b/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;
diff --git a/scripts/release-build.js b/scripts/release-build.js
index 2a764e9e71b3d1..eaba25e7e261b0 100644
--- a/scripts/release-build.js
+++ b/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');
diff --git a/scripts/release-build.test.js b/scripts/release-build.test.js
index c8321f4b5a2fc1..b6f62ca110e6e5 100644
--- a/scripts/release-build.test.js
+++ b/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;
 });