Allow maki to be used from browsers #462 (#556)

package.json

@@ -4,11 +4,14 @@
   "description": "Pixel-perfect icons for web cartography",
   "version": "7.0.0",
   "main": "index.js",
+  "browser": "browser.cjs.js",
+  "module": "browser.esm.js",
   "scripts": {
-    "test": "tape test/maki.test.js | tap-spec",
-    "build": "node scripts/make-layouts.js && node scripts/format-icons.js"
+    "test": "tape test/*.test.js | tap-spec",
+    "build": "node scripts/make-layouts.js && node scripts/format-icons.js && node scripts/make-browser.js"
   },
   "devDependencies": {
+    "esbuild": "^0.12.25",
     "eslint": "^5.6.0",
     "husky": "^1.0.0",
     "mkdirp": "^0.5.1",

scripts/make-browser.js

@@ -0,0 +1,24 @@
+const maki = require('..');
+const { writeFile } = require('fs');
+
+writeFile(
+  './browser.cjs.js',
+  '/* eslint-disable */\nmodule.exports = ' + JSON.stringify(maki),
+  function(err) {
+    if (err) console.log(err);
+    console.log('✓ Successfully generated browser.js');
+  }
+);
+
+writeFile(
+  './browser.esm.js',
+  [
+    '/* eslint-disable */',
+    'export const layouts = ' + JSON.stringify(maki.layouts),
+    'export const svgArray = ' + JSON.stringify(maki.svgArray)
+  ].join('\n'),
+  function(err) {
+    if (err) console.log(err);
+    console.log('✓ Successfully generated esm.js');
+  }
+);

test/browser.cjs.test.js

@@ -0,0 +1,13 @@
+const test = require('tape');
+
+const maki = require('../');
+const makiBrowser = require('../browser.cjs');
+
+test('index', function(t) {
+  t.deepEqual(
+    maki,
+    makiBrowser,
+    'browser bundle is the parseable and the same'
+  );
+  t.end();
+});

test/browser.esm.test.js

@@ -0,0 +1,27 @@
+const test = require('tape');
+const esbuild = require('esbuild');
+
+const maki = require('../');
+const fs = require('fs');
+const path = require('path');
+
+const browserEsmText = fs
+  .readFileSync(path.resolve(__dirname, '..', './browser.esm.js'))
+  .toString('utf8');
+
+const transformed = esbuild.transformSync(browserEsmText, {
+  format: 'cjs'
+});
+
+test('index', function(t) {
+  t.assert(transformed.warnings.length === 0, 'no esbuild warnings');
+
+  eval(transformed.code);
+  t.deepEqual(
+    maki,
+    // Ran through eval.
+    exports,
+    'ESM bundle is the parseable and the same'
+  );
+  t.end();
+});