alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
example/.gitignore
-23
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*
example/README.md
-15
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
```
example/craco.config.js
-9
View File
@@ -1,9 +0,0 @@
const path = require('path');
module.exports = {
webpack: {
alias: {
react: path.resolve(__dirname, '..', 'node_modules', 'react'),
},
},
};
example/package-lock.json
Generated
-16633
View File
File diff suppressed because it is too large Load Diff
example/package.json
-35
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"
]
}
}
example/public/index.html
+2 -1
View File
@@ -2,12 +2,13 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <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="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="React Flow test flows" /> <meta name="description" content="React Flow test flows" />
<title>React Flow - Test Flows</title> <title>React Flow - Test Flows</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script src="/dist/index.js"></script>
</body> </body>
</html> </html>
example/public/robots.txt
-1
View File
@@ -1,2 +1 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: * User-agent: *
package-lock.json
Generated
+55 -9262
View File
File diff suppressed because it is too large Load Diff
package.json
+13 -4
View File
@@ -12,10 +12,12 @@
"scripts": { "scripts": {
"build": "rollup -c --environment NODE_ENV:production", "build": "rollup -c --environment NODE_ENV:production",
"start": "rollup -w -c", "start": "rollup -w -c",
"dev": "npm run build && npm start & cd example && npm start", "start:examples": "rollup -c rollup.examples.js -w",
"start:dev": "npm run build && cd example && npm start", "build:examples": "rollup -c rollup.examples.js --environment NODE_ENV:production",
"dev:wait": "start-server-and-test start:dev http-get://localhost:3000", "start:testserver": "npm run build && rollup -c rollup.examples.js -w --environment NODE_ENV:testing",
"build:dev": "npm install && npm run build && cd example && npm install && npm run build", "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", "cy:open": "cypress open",
"cypress": "npm run dev:wait cy:open", "cypress": "npm run dev:wait cy:open",
"test:chrome": "cypress run --browser chrome --headless", "test:chrome": "cypress run --browser chrome --headless",
@@ -53,15 +55,22 @@
"autoprefixer": "^10.1.0", "autoprefixer": "^10.1.0",
"babel-preset-react-app": "^10.0.0", "babel-preset-react-app": "^10.0.0",
"cypress": "^6.2.0", "cypress": "^6.2.0",
"dagre": "^0.8.5",
"localforage": "^1.9.0",
"postcss": "^8.2.1", "postcss": "^8.2.1",
"postcss-nested": "^5.0.3", "postcss-nested": "^5.0.3",
"prettier": "2.2.1", "prettier": "2.2.1",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^17.0.1", "react": "^17.0.1",
"react-dom": "^17.0.1",
"react-flow-renderer": "file:./",
"react-router-dom": "^5.2.0",
"release-it": "^14.2.2", "release-it": "^14.2.2",
"rollup": "^2.35.1", "rollup": "^2.35.1",
"rollup-plugin-bundle-size": "^1.0.3", "rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-postcss": "^4.0.0", "rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-typescript2": "^0.29.0", "rollup-plugin-typescript2": "^0.29.0",
"start-server-and-test": "^1.11.7", "start-server-and-test": "^1.11.7",
"typescript": "^4.1.3" "typescript": "^4.1.3"
rollup.config.js
+45 -47
View File
@@ -12,51 +12,49 @@ import pkg from './package.json';
const isProd = process.env.NODE_ENV === 'production'; const isProd = process.env.NODE_ENV === 'production';
const processEnv = isProd ? 'production' : 'development'; const processEnv = isProd ? 'production' : 'development';
export default [ export default {
{ input: 'src/index.ts',
input: 'src/index.ts', external: ['react', 'react-dom', /@babel\/runtime/],
external: ['react', 'react-dom', /@babel\/runtime/], onwarn(warning, rollupWarn) {
onwarn(warning, rollupWarn) { if (warning.code !== 'CIRCULAR_DEPENDENCY') {
if (warning.code !== 'CIRCULAR_DEPENDENCY') { rollupWarn(warning);
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/**',
}),
],
}, },
]; 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/**',
}),
],
};
rollup.examples.js
+57
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];