Replace CJS-only build with ESM and CJS w/o NODE_ENV (#66)

* Remove last remaining NODE_ENV switch

* Replace build outputs with .es.js + .js

NOTE: This can't safely use package.json:exports since react isn't
an ESM build and this would lead to issues as per the standard ESM
module resolution which must start only resolving .mjs by default
once it hits an ESM package.

* Add script to move typings to dist output

* Update copy-typings.js

Author: kitten

index.js

@@ -2,24 +2,23 @@
   "name": "react-ssr-prepass",
   "version": "1.3.0",
   "description": "A custom partial React SSR renderer for prefetching and suspense",
-  "main": "index.js",
+  "main": "dist/react-ssr-prepass.js",
+  "module": "dist/react-ssr-prepass.es.js",
+  "types": "dist/react-ssr-prepass.d.ts",
   "author": "Phil Plückthun <[email protected]>",
   "license": "MIT",
   "repository": "[email protected]:FormidableLabs/react-ssr-prepass.git",
   "bugs": {
     "url": "https://github.com/FormidableLabs/react-ssr-prepass/issues"
   },
   "files": [
-    "index.js",
-    "index.js.flow",
-    "dist",
-    "index.d.ts"
+    "dist"
   ],
   "sideEffects": false,
-  "types": "index.d.ts",
   "scripts": {
     "prepublishOnly": "run-s flow test build",
     "build": "rollup -c rollup.config.js",
+    "postbuild": "node ./scripts/copy-typings.js",
     "test": "jest",
     "flow": "flow check"
   },
@@ -54,17 +53,16 @@
   },
   "devDependencies": {
     "@ampproject/rollup-plugin-closure-compiler": "^0.26.0",
-    "@babel/core": "^7.13.1",
+    "@babel/core": "^7.13.10",
     "@babel/plugin-transform-flow-strip-types": "^7.13.0",
     "@babel/plugin-transform-object-assign": "^7.12.13",
-    "@babel/preset-env": "^7.13.5",
+    "@babel/preset-env": "^7.13.10",
     "@babel/preset-flow": "^7.12.13",
     "@babel/preset-react": "^7.12.13",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.2.0",
-    "@rollup/plugin-replace": "^2.3.4",
     "babel-plugin-closure-elimination": "^1.3.2",
     "babel-plugin-transform-async-to-promises": "^0.8.15",
     "codecov": "^3.8.1",
@@ -76,7 +74,7 @@
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "rollup": "^2.39.1",
+    "rollup": "^2.41.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-terser": "^7.0.2"
   }

package.json

@@ -2,7 +2,6 @@ import commonjs from '@rollup/plugin-commonjs'
 import resolve from '@rollup/plugin-node-resolve'
 import buble from '@rollup/plugin-buble'
 import babel from '@rollup/plugin-babel'
-import replace from '@rollup/plugin-replace'
 import { terser } from 'rollup-plugin-terser'
 import compiler from '@ampproject/rollup-plugin-closure-compiler'
 
@@ -26,48 +25,7 @@ const externalTest = (id) => {
   return externalPredicate.test(id)
 }
 
-const terserPretty = terser({
-  warnings: true,
-  ecma: 5,
-  keep_fnames: true,
-  ie8: false,
-  compress: {
-    pure_getters: true,
-    toplevel: true,
-    booleans_as_integers: false,
-    keep_fnames: true,
-    keep_fargs: true,
-    if_return: false,
-    ie8: false,
-    sequences: false,
-    loops: false,
-    conditionals: false,
-    join_vars: false
-  },
-  mangle: false,
-  output: {
-    beautify: true,
-    braces: true,
-    indent_level: 2
-  }
-})
-
-const terserMinified = terser({
-  warnings: true,
-  ecma: 5,
-  ie8: false,
-  toplevel: true,
-  compress: {
-    keep_infinity: true,
-    pure_getters: true,
-    passes: 10
-  },
-  output: {
-    comments: false
-  }
-})
-
-const makePlugins = (isProduction = false) => [
+const plugins = [
   babel({
     babelrc: false,
     babelHelpers: 'bundled',
@@ -113,54 +71,58 @@ const makePlugins = (isProduction = false) => [
       ]
     ]
   }),
-  isProduction &&
-    replace({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-  isProduction &&
-    compiler({
-      compilation_level: 'SIMPLE_OPTIMIZATIONS'
-    }),
-  isProduction ? terserMinified : terserPretty
+  compiler({
+    compilation_level: 'SIMPLE_OPTIMIZATIONS'
+  }),
+  terser({
+    warnings: true,
+    ecma: 5,
+    keep_fnames: true,
+    ie8: false,
+    compress: {
+      pure_getters: true,
+      toplevel: true,
+      booleans_as_integers: false,
+      keep_fnames: true,
+      keep_fargs: true,
+      if_return: false,
+      ie8: false,
+      sequences: false,
+      loops: false,
+      conditionals: false,
+      join_vars: false
+    },
+    mangle: false,
+    output: {
+      beautify: true,
+      braces: true,
+      indent_level: 2
+    }
+  })
 ]
 
-const config = {
+export default {
   input: './src/index.js',
   onwarn: () => {},
   external: externalTest,
   treeshake: {
     propertyReadSideEffects: false
-  }
-}
-
-const name = 'react-ssr-prepass'
-
-export default [
-  {
-    ...config,
-    plugins: makePlugins(false),
-    output: [
-      {
-        sourcemap: true,
-        legacy: true,
-        freeze: false,
-        esModule: false,
-        file: `./dist/${name}.development.js`,
-        format: 'cjs'
-      }
-    ]
   },
-  {
-    ...config,
-    plugins: makePlugins(true),
-    output: [
-      {
-        sourcemap: true,
-        legacy: true,
-        freeze: false,
-        file: `./dist/${name}.production.min.js`,
-        format: 'cjs'
-      }
-    ]
-  }
-]
+  plugins,
+  output: [
+    {
+      sourcemap: true,
+      freeze: false,
+      // NOTE: *.mjs files will lead to issues since react is still a non-ESM package
+      // the same goes for package.json:exports
+      file: './dist/react-ssr-prepass.es.js',
+      format: 'esm'
+    },
+    {
+      sourcemap: true,
+      freeze: false,
+      file: './dist/react-ssr-prepass.js',
+      format: 'cjs'
+    }
+  ]
+}

rollup.config.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+
+const path = require('path')
+const fs = require('fs')
+
+fs.copyFileSync(
+  path.resolve(__dirname, 'react-ssr-prepass.d.ts'),
+  path.resolve(__dirname, '../dist/react-ssr-prepass.d.ts')
+)
+
+fs.copyFileSync(
+  path.resolve(__dirname, 'react-ssr-prepass.js.flow'),
+  path.resolve(__dirname, '../dist/react-ssr-prepass.js.flow')
+)
+
+fs.copyFileSync(
+  path.resolve(__dirname, 'react-ssr-prepass.js.flow'),
+  path.resolve(__dirname, '../dist/react-ssr-prepass.es.js.flow')
+)

scripts/copy-typings.js

@@ -79,10 +79,9 @@ const {
 // yielding behavior that gives the event loop a chance to continue
 // running when the prepasses would otherwise take too long
 export const SHOULD_YIELD = typeof setImmediate === 'function'
-
 // Time in ms after which the otherwise synchronous visitor yields so that
 // the event loop is not interrupted for too long
-const YIELD_AFTER_MS = process.env.NODE_ENV !== 'production' ? 20 : 5
+const YIELD_AFTER_MS = 5
 
 const render = (
   type: ComponentType<DefaultProps> & ComponentStatics,