refactor(examples): use rollup instead of cra/webpack #817

This commit is contained in:
moklick
2021-01-05 15:18:04 +01:00
parent 4cb558403c
commit 9169bd766d
11 changed files with 172 additions and 26030 deletions

23
example/.gitignore vendored
View File

@@ -1,23 +0,0 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

View File

@@ -1,15 +0,0 @@
## React Flow Examples
The examples are deployed here: https://reactflow.dev/
### Installation
```
npm install
```
### Start Dev Server
```
npm start
```

View File

@@ -1,9 +0,0 @@
const path = require('path');
module.exports = {
webpack: {
alias: {
react: path.resolve(__dirname, '..', 'node_modules', 'react'),
},
},
};

16633
example/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,35 +0,0 @@
{
"name": "react-flow-tests",
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^6.0.0",
"dagre": "^0.8.5",
"localforage": "^1.9.0",
"react-dom": "^17.0.1",
"react-flow-renderer": "file:..",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.1"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

View File

@@ -2,12 +2,13 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="React Flow test flows" />
<title>React Flow - Test Flows</title>
</head>
<body>
<div id="root"></div>
<script src="/dist/index.js"></script>
</body>
</html>

View File

@@ -1,2 +1 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *

9317
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -12,10 +12,12 @@
"scripts": {
"build": "rollup -c --environment NODE_ENV:production",
"start": "rollup -w -c",
"dev": "npm run build && npm start & cd example && npm start",
"start:dev": "npm run build && cd example && npm start",
"dev:wait": "start-server-and-test start:dev http-get://localhost:3000",
"build:dev": "npm install && npm run build && cd example && npm install && npm run build",
"start:examples": "rollup -c rollup.examples.js -w",
"build:examples": "rollup -c rollup.examples.js --environment NODE_ENV:production",
"start:testserver": "npm run build && rollup -c rollup.examples.js -w --environment NODE_ENV:testing",
"dev": "npm run start:examples",
"dev:wait": "start-server-and-test start:testserver http-get://localhost:3000",
"build:dev": "npm install && npm run build && npm run build:examples",
"cy:open": "cypress open",
"cypress": "npm run dev:wait cy:open",
"test:chrome": "cypress run --browser chrome --headless",
@@ -53,15 +55,22 @@
"autoprefixer": "^10.1.0",
"babel-preset-react-app": "^10.0.0",
"cypress": "^6.2.0",
"dagre": "^0.8.5",
"localforage": "^1.9.0",
"postcss": "^8.2.1",
"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": "file:./",
"react-router-dom": "^5.2.0",
"release-it": "^14.2.2",
"rollup": "^2.35.1",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-typescript2": "^0.29.0",
"start-server-and-test": "^1.11.7",
"typescript": "^4.1.3"

View File

@@ -12,51 +12,49 @@ import pkg from './package.json';
const isProd = process.env.NODE_ENV === 'production';
const processEnv = isProd ? 'production' : 'development';
export default [
{
input: 'src/index.ts',
external: ['react', 'react-dom', /@babel\/runtime/],
onwarn(warning, rollupWarn) {
if (warning.code !== 'CIRCULAR_DEPENDENCY') {
rollupWarn(warning);
}
},
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: true,
exports: 'named',
},
{
file: pkg.module,
format: 'esm',
sourcemap: true,
exports: 'named',
},
],
plugins: [
replace({
__ENV__: JSON.stringify(processEnv),
__REACT_FLOW_VERSION__: JSON.stringify(pkg.version),
}),
bundleSize(),
postcss({
minimize: isProd,
}),
babel({
exclude: 'node_modules/**',
babelHelpers: 'runtime',
}),
svgr(),
typescript({
clean: true,
}),
resolve(),
commonjs({
include: 'node_modules/**',
}),
],
export default {
input: 'src/index.ts',
external: ['react', 'react-dom', /@babel\/runtime/],
onwarn(warning, rollupWarn) {
if (warning.code !== 'CIRCULAR_DEPENDENCY') {
rollupWarn(warning);
}
},
];
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: true,
exports: 'named',
},
{
file: pkg.module,
format: 'esm',
sourcemap: true,
exports: 'named',
},
],
plugins: [
replace({
__ENV__: JSON.stringify(processEnv),
__REACT_FLOW_VERSION__: JSON.stringify(pkg.version),
}),
bundleSize(),
postcss({
minimize: isProd,
}),
babel({
exclude: 'node_modules/**',
babelHelpers: 'runtime',
}),
svgr(),
typescript({
clean: true,
}),
resolve(),
commonjs({
include: 'node_modules/**',
}),
],
};

57
rollup.examples.js Normal file
View File

@@ -0,0 +1,57 @@
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
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 testing = process.env.NODE_ENV === 'testing';
const rollupConfig = {
input: ['example/src/index.js'],
output: [
{
dir: 'example/public/dist',
format: 'iife',
sourcemap: !production,
},
],
plugins: [
postcss({
modules: false,
}),
babel({
exclude: 'node_modules/**',
babelHelpers: 'runtime',
presets: [
[
'@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(),
serve({
open: !testing,
port: 3000,
contentBase: 'example/public/',
historyApiFallback: true,
}),
!testing && livereload(),
],
};
export default testing ? rollupConfig : [libraryRollupConfig, rollupConfig];