Merge pull request #850 from wbkd/feat/nocss-entry

Feat/nocss entry

nocss/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../dist/nocss/ReactFlow-nocss.js",
+  "module": "../dist/nocss/ReactFlow-nocss.esm.js",
+  "types": "../dist/nocss/index.d.ts"
+}

package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/wbkd/react-flow.git"
   },
   "scripts": {
-    "build": "rollup -c --environment NODE_ENV:production",
+    "build": "rollup -c --environment NODE_ENV:production && move-file dist/nocss/style.css dist/style.css",
     "start": "rollup -w -c",
     "start:examples": "rollup -c rollup.examples.js -w",
     "build:examples": "rollup -c rollup.examples.js --environment NODE_ENV:production",
@@ -58,13 +58,13 @@
     "cypress": "^6.2.1",
     "dagre": "^0.8.5",
     "localforage": "^1.9.0",
+    "move-file-cli": "^2.0.0",
     "postcss": "^8.2.4",
     "postcss-nested": "^5.0.3",
     "prettier": "2.2.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-flow-renderer": "^8.3.2",
     "react-router-dom": "^5.2.0",
     "release-it": "^14.2.2",
     "rollup": "^2.36.2",
@@ -80,6 +80,7 @@
     "react": "16 || 17"
   },
   "files": [
-    "dist"
+    "dist",
+    "nocss"
   ]
 }

rollup.config.js

@@ -1,3 +1,4 @@
+import path from 'path';
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import babel from '@rollup/plugin-babel';
@@ -12,7 +13,7 @@ import pkg from './package.json';
 const isProd = process.env.NODE_ENV === 'production';
 const processEnv = isProd ? 'production' : 'development';
 
-export default {
+const baseConfig = ({ mainFile = pkg.main, moduleFile = pkg.module, extractCss = false } = {}) => ({
   input: 'src/index.ts',
   external: ['react', 'react-dom', /@babel\/runtime/],
   onwarn(warning, rollupWarn) {
@@ -22,13 +23,13 @@ export default {
   },
   output: [
     {
-      file: pkg.main,
+      file: mainFile,
       format: 'cjs',
       sourcemap: true,
       exports: 'named',
     },
     {
-      file: pkg.module,
+      file: moduleFile,
       format: 'esm',
       sourcemap: true,
       exports: 'named',
@@ -38,10 +39,13 @@ export default {
     replace({
       __ENV__: JSON.stringify(processEnv),
       __REACT_FLOW_VERSION__: JSON.stringify(pkg.version),
+      // this comes from the easy-peasy dependency
+      'process.env.FORCE_SIMILAR_INSTEAD_OF_MAP': false,
     }),
     bundleSize(),
     postcss({
-      minimize: isProd,
+      minimize: !extractCss,
+      extract: extractCss,
     }),
     babel({
       exclude: 'node_modules/**',
@@ -56,4 +60,15 @@ export default {
       include: 'node_modules/**',
     }),
   ],
-};
+});
+
+export default isProd
+  ? [
+      baseConfig(),
+      baseConfig({
+        mainFile: 'dist/nocss/ReactFlow-nocss.js',
+        moduleFile: 'dist/nocss/ReactFlow-nocss.esm.js',
+        extractCss: path.resolve('dist/nocss/style.css'),
+      }),
+    ]
+  : baseConfig();

rollup.examples.js

@@ -28,7 +28,7 @@ const rollupConfig = {
   plugins: [
     replace({
       'process.env.NODE_ENV': isProd ? JSON.stringify('production') : JSON.stringify('development'),
-      'process.env.FORCE_SIMILAR_INSTEAD_OF_MAP': 'false',
+      'process.env.FORCE_SIMILAR_INSTEAD_OF_MAP': false,
     }),
     postcss({
       modules: false,