Add dist build

Author: exogen

markdown.config.js

@@ -1,10 +1,10 @@
-const execa = require("execa");
+const execa = require('execa');
 
 module.exports = {
   transforms: {
-    COMPONENTS(content, options) {
-      const json = execa.sync("scripts/extract-docs.js").stdout;
-      const markdown = execa.sync("scripts/markdown-docs.js", {
+    COMPONENTS() {
+      const json = execa.sync('scripts/extract-docs.js').stdout;
+      const markdown = execa.sync('scripts/markdown-docs.js', {
         input: json
       }).stdout;
       return markdown;

package.json

@@ -3,11 +3,57 @@
   "version": "0.0.0",
   "main": "index.js",
   "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
+  "browser": {
+    "./dist/index.cjs.js": "./dist/index.browser.cjs.js",
+    "./dist/index.esm.js": "./dist/index.browser.esm.js"
+  },
+  "sideEffects": false,
   "scripts": {
+    "build:dist": "rollup -c",
     "build:docs": "md-magic README.md && prettier --write README.md",
+    "build": "npm run build:docs && npm run build:dist",
+    "format": "eslint --fix .",
+    "postbuild": "npm run size",
+    "prebuild": "rimraf dist",
+    "prepare": "npm run build:dist",
+    "size": "bundlesize",
     "start": "next dev"
   },
+  "bundlesize": [
+    {
+      "path": "./dist/index.browser.cjs.min.js",
+      "compression": "none",
+      "maxSize": "4KB"
+    },
+    {
+      "path": "./dist/index.browser.cjs.min.js",
+      "maxSize": "2KB"
+    },
+    {
+      "path": "./dist/index.browser.esm.min.js",
+      "compression": "none",
+      "maxSize": "4KB"
+    },
+    {
+      "path": "./dist/index.browser.esm.min.js",
+      "maxSize": "2KB"
+    }
+  ],
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
   "devDependencies": {
+    "@babel/cli": "^7.7.0",
+    "@babel/core": "^7.7.2",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-react": "^7.7.0",
+    "@rollup/plugin-replace": "^2.2.1",
+    "bundlesize": "^0.18.0",
     "escape-html": "^1.0.3",
     "eslint": "^6.6.0",
     "eslint-config-prettier": "^6.5.0",
@@ -21,7 +67,12 @@
     "react": "^16.12.0",
     "react-docgen": "^4.1.1",
     "react-docgen-displayname-handler": "^2.1.3",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.12.0",
+    "rollup": "^1.27.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-terser": "^5.1.2"
   },
   "dependencies": {
     "prop-types": "^15.7.2"

rollup.config.js

@@ -0,0 +1,67 @@
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import babel from 'rollup-plugin-babel';
+import replace from '@rollup/plugin-replace';
+import { terser } from 'rollup-plugin-terser';
+import pkg from './package.json';
+
+const baseConfig = {
+  input: 'src/index.js',
+  external: ['react', 'react-dom', 'prop-types'],
+  output: [
+    { file: pkg.main, format: 'cjs' },
+    { file: pkg.module, format: 'es' }
+  ],
+  plugins: [
+    babel({
+      presets: [['@babel/preset-env', { loose: true }], '@babel/preset-react'],
+      babelrc: false,
+      exclude: 'node_modules/**'
+    }),
+    resolve(),
+    commonjs()
+  ]
+};
+
+const browserConfig = {
+  ...baseConfig,
+  output: [
+    { file: pkg.browser[pkg.main], format: 'cjs' },
+    { file: pkg.browser[pkg.module], format: 'es' }
+  ],
+  plugins: [
+    replace({
+      'process.browser': JSON.stringify(true)
+    }),
+    ...baseConfig.plugins
+  ]
+};
+
+const configs = [
+  baseConfig,
+  browserConfig,
+  {
+    ...browserConfig,
+    output: [
+      {
+        file: pkg.browser[pkg.main].replace(/\.js$/, '.min.js'),
+        format: 'cjs'
+      }
+    ],
+    plugins: [...browserConfig.plugins, terser({ toplevel: true })]
+  },
+  // FIXME: Due to a bug in rollup-plugin-terser, multiple outputs need to be
+  // split into separate configurations.
+  {
+    ...browserConfig,
+    output: [
+      {
+        file: pkg.browser[pkg.module].replace(/\.js$/, '.min.js'),
+        format: 'es'
+      }
+    ],
+    plugins: [...browserConfig.plugins, terser({ toplevel: true })]
+  }
+];
+
+export default configs;

scripts/markdown-docs.js

@@ -126,7 +126,7 @@ function renderType(value, extraRows = [], depth = 0, topLevel = false) {
   }
   if (value.name === 'enum') {
     return `One&nbsp;of… <br>\n${indent}&nbsp;&nbsp;${value.value
-      .map(t => renderValue(t, depth + 1))
+      .map(v => renderValue(v))
       .join(` <br>\n${indent}&nbsp;&nbsp;`)}`;
   }
   if (value.name === 'union') {
@@ -157,7 +157,7 @@ const CODE_CHARS = {
   '\u00A0': '<code title="non-breaking space">\\u00A0</code>'
 };
 
-function renderValue(value, indent = 0) {
+function renderValue(value) {
   if (!value) {
     return '';
   }