feat(browser): build a dedicated version for the browser (#242)

* feat(browser): build a dedicated version for the browser

BREAKING CHANGE: This PR change of the internal directory structure of the exported code. The previous code has move from the `dist/` into the `dist/esm` directory (but remender that we do not avice you to do use internals code  🤓)

* fix(bunble): do not bundle peer dependencies

* qa(ci): Avoid duplicate runs of checks on CI

* qa(dependencies): Upgrade to latest rollup versions

* qa(test): Allow to run the smoke tests aggaint all builded versions

.travis.yml

@@ -20,7 +20,11 @@ script:
   - yarn run test
   - yarn run lint
   - yarn run flow
-  - yarn run smoke 15.6.2
-  - yarn run smoke 16.1.0
-  - yarn run smoke default
-  - yarn run smoke next
+  - yarn run smoke cjs 15.6.2
+  - yarn run smoke esm 15.6.2
+  - yarn run smoke cjs 16.1.0
+  - yarn run smoke esm 16.1.0
+  - yarn run smoke cjs default
+  - yarn run smoke esm default
+  - yarn run smoke cjs next
+  - yarn run smoke esm next

package.json

@@ -2,16 +2,26 @@
   "name": "react-element-to-jsx-string",
   "version": "13.2.0",
   "description": "Turn a ReactElement into the corresponding JSX string.",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "browser": "dist/cjs/index.js",
   "scripts": {
-    "build": "babel ./src/ --ignore=*.spec.js --source-maps --out-dir ./dist/ && flow-copy-source -v --ignore=*.spec.js src/ dist/",
+    "clean": "npm run esm:clean && npm run cjs:clean",
+    "build": "npm run esm:build && npm run cjs:build",
+    "preesm:build": "npm run esm:clean",
+    "esm:build":
+      "babel ./src/ --ignore=*.spec.js --source-maps --out-dir ./dist/esm && flow-copy-source -v --ignore=*.spec.js src/ dist/esm",
+    "esm:clean": "rm -rf ./dist/esm/*",
+    "precjs:build": "npm run cjs:clean",
+    "cjs:build": "rollup --config rollup.config.js",
+    "cjs:clean": "rm -rf ./dist/cjs/*",
     "lint": "eslint .",
     "lint:fix": "npm run lint -- --fix",
     "flow": "flow",
     "precommit": "lint-staged",
     "prepublish": "npm run build",
-    "prebuild": "mkdir -p dist && rm -rf ./dist/*",
-    "prettier:fix": "prettier --write \"**/*.{js,json}\"",
+    "prettier:fix":
+      "prettier --write --single-quote --trailing-comma es5 \"{src/**/*.js,package.json}\"",
     "test": "jest",
     "test:watch": "jest --watch",
     "release": "./release.sh",
@@ -35,6 +45,7 @@
     "babel-cli": "6.26.0",
     "babel-eslint": "8.2.3",
     "babel-jest": "22.2.2",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-flow": "6.23.0",
     "babel-preset-react": "6.24.1",
@@ -59,10 +70,20 @@
     "mversion": "1.10.1",
     "prettier": "1.8.2",
     "react": "16.3.2",
-    "react-test-renderer": "16.3.2"
+    "react-dom": "16.3.2",
+    "react-test-renderer": "16.3.2",
+    "rollup": "0.58.2",
+    "rollup-plugin-babel": "3.0.4",
+    "rollup-plugin-commonjs": "9.1.3",
+    "rollup-plugin-flow": "1.1.1",
+    "rollup-plugin-node-builtins": "2.1.2",
+    "rollup-plugin-node-globals": "1.2.1",
+    "rollup-plugin-node-resolve": "3.3.0",
+    "rollup-plugin-sourcemaps": "0.4.2"
   },
   "peerDependencies": {
-    "react": "^0.14.8 || ^15.0.1 || ^16.0.0"
+    "react": "^0.14.8 || ^15.0.1 || ^16.0.0",
+    "react-dom": "^0.14.8 || ^15.0.1 || ^16.0.0"
   },
   "dependencies": {
     "is-plain-object": "2.0.4",

rollup.config.js

@@ -0,0 +1,59 @@
+import fs from 'fs';
+import babel from 'rollup-plugin-babel';
+import commonjs from 'rollup-plugin-commonjs';
+import flow from 'rollup-plugin-flow';
+import resolve from 'rollup-plugin-node-resolve';
+import builtins from 'rollup-plugin-node-builtins';
+import globals from 'rollup-plugin-node-globals';
+
+const extractPackagePeerDependencies = () => {
+  const packageNpm = JSON.parse(
+    fs.readFileSync('./package.json', { encoding: 'utf8' })
+  );
+
+  return Object.keys(packageNpm.peerDependencies || {});
+};
+
+export default {
+  input: 'src/index.js',
+  output: {
+    file: 'dist/cjs/index.js',
+    format: 'cjs',
+    sourcemap: true,
+  },
+  external: extractPackagePeerDependencies(),
+  plugins: [
+    babel({
+      babelrc: false,
+      exclude: 'node_modules/**', // only transpile our source code
+      presets: [
+        [
+          'es2015',
+          {
+            modules: false,
+          },
+        ],
+        'stage-2',
+        'react',
+        'flow',
+      ],
+      plugins: ['external-helpers'],
+      externalHelpers: true,
+    }),
+    resolve({
+      module: true,
+      jsnext: true,
+      main: true,
+      browser: true,
+    }),
+    commonjs({
+      sourceMap: true,
+      namedExports: {
+        react: ['isValidElement'],
+      },
+    }),
+    globals(),
+    builtins(),
+    flow(),
+  ],
+};

tests/smoke/run.js

@@ -3,12 +3,22 @@
 const execFileSync = require('child_process').execFileSync;
 const path = require('path');
 
-execFileSync(path.join(__dirname, 'prepare.js'), [process.argv[2]], {
+const buildType = process.argv[2];
+if (!buildType) {
+  throw new Error('The build type to test is missing');
+}
+
+const requestedReactVersion = process.argv[3];
+if (!requestedReactVersion) {
+  throw new Error('React version to use for the test is missing');
+}
+
+execFileSync(path.join(__dirname, 'prepare.js'), [requestedReactVersion], {
   cwd: __dirname,
   stdio: 'inherit',
 });
 
-execFileSync(path.join(__dirname, 'smoke.js'), {
+execFileSync(path.join(__dirname, 'smoke.js'), [buildType], {
   cwd: __dirname,
   stdio: 'inherit',
 });

tests/smoke/smoke.js

@@ -3,9 +3,19 @@
 /* eslint-disable no-console */
 /* eslint-disable import/no-extraneous-dependencies */
 
+const requireReactElementToJsxString = buildType => {
+  if (buildType === 'esm') {
+    return require(`./../../dist/esm`).default;
+  } else if (buildType === 'cjs') {
+    return require('./../../dist/cjs');
+  }
+
+  throw new Error(`Unknown build type: "${buildType}"`);
+};
+
 const expect = require('expect');
 const React = require('react');
-const reactElementToJsxString = require('./../../dist/').default;
+const reactElementToJsxString = requireReactElementToJsxString(process.argv[2]);
 
 console.log(`Tested "react" version: "${React.version}"`);