refactor(rollup): example config

.babelrc

@@ -7,6 +7,5 @@
       }
     ],
     "@babel/preset-react"
-  ],
+  ]
-  "plugins": ["@babel/plugin-transform-runtime"]
 }

package.json

@@ -42,6 +42,7 @@
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
+    "@rollup/plugin-alias": "^3.1.1",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.1",
@@ -63,10 +64,10 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-flow-renderer": "file:./",
+    "react-flow-renderer": "^8.3.2",
     "react-router-dom": "^5.2.0",
     "release-it": "^14.2.2",
-    "rollup": "^2.35.1",
+    "rollup": "^2.36.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-postcss": "^4.0.0",

rollup.config.js

@@ -46,8 +46,8 @@ export default {
     babel({
       exclude: 'node_modules/**',
       babelHelpers: 'runtime',
+      plugins: ['@babel/plugin-transform-runtime'],
     }),
-
     svgr(),
     typescript({
       clean: true,

rollup.examples.js

@@ -1,15 +1,17 @@
+import path from 'path';
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import babel from '@rollup/plugin-babel';
+import alias from '@rollup/plugin-alias';
+import replace from '@rollup/plugin-replace';
 import postcss from 'rollup-plugin-postcss';
 import livereload from 'rollup-plugin-livereload';
-import replace from '@rollup/plugin-replace';
 import serve from 'rollup-plugin-serve';
 
 import libraryRollupConfig from './rollup.config.js';
 
-const production = !process.env.ROLLUP_WATCH;
+const isProd = process.env.NODE_ENV === 'production';
-const testing = process.env.NODE_ENV === 'testing';
+const isTesting = process.env.NODE_ENV === 'testing';
 
 const rollupConfig = {
   input: ['example/src/index.js'],
@@ -17,41 +19,36 @@ const rollupConfig = {
     {
       dir: 'example/public/dist',
       format: 'iife',
-      sourcemap: !production,
+      sourcemap: !isProd,
     },
   ],
   plugins: [
+    replace({
+      'process.env.FORCE_SIMILAR_INSTEAD_OF_MAP': 'false',
+    }),
     postcss({
       modules: false,
     }),
+    alias({
+      entries: [{ find: 'react-flow-renderer', replacement: path.resolve(__dirname, 'dist', 'ReactFlow.esm.js') }],
+    }),
     babel({
       exclude: 'node_modules/**',
-      babelHelpers: 'runtime',
+      babelHelpers: 'bundled',
-      presets: [
+      plugins: [],
-        [
-          '@babel/preset-env',
-          {
-            modules: false,
-          },
-        ],
-        '@babel/preset-react',
-      ],
-      plugins: ['@babel/plugin-transform-runtime'],
-    }),
-    replace({
-      'process.env.NODE_ENV': production ? JSON.stringify('production') : JSON.stringify('development'),
-      'process.env.FORCE_SIMILAR_INSTEAD_OF_MAP': 'false',
     }),
     resolve(),
-    commonjs(),
+    commonjs({
+      include: 'node_modules/**',
+    }),
     serve({
-      open: !testing,
+      open: !isTesting,
       port: 3000,
       contentBase: 'example/public/',
       historyApiFallback: true,
     }),
-    !testing && livereload(),
+    !isTesting && livereload(),
   ],
 };
 
-export default testing ? rollupConfig : [libraryRollupConfig, rollupConfig];
+export default rollupConfig; // isTesting ? rollupConfig : [libraryRollupConfig, rollupConfig];