Skip to content

Commit 6556e4d

Browse files
wuweiweiwuwuweiweiwu
authored
feat: commonjs, es6, umd build supports (#327)
* update .babelrc -> .babelrc.js * possibly use rollup? * dependencies * update tests: undefined is now removed from snapshots * setting NODE_ENV on test:watch * updating README * rollup build WOOOO * updated hot module reloading * make readme better
1 parent c844c04 commit 6556e4d

File tree

11 files changed

+1130
-505
lines changed

11 files changed

+1130
-505
lines changed

‎.babelrc

-4
This file was deleted.

‎.babelrc.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const env = process.env.NODE_ENV;
2+
3+
if (env === 'commonjs' || env === 'es') {
4+
module.exports = {
5+
ignore: ['*.test.js', 'src/tests.js'],
6+
plugins: ['transform-runtime'],
7+
presets: [['env', { modules: false }], 'react', 'stage-2'],
8+
};
9+
10+
if (env === 'commonjs') {
11+
module.exports.plugins.push('transform-es2015-modules-commonjs');
12+
}
13+
}
14+
15+
if (env === 'rollup') {
16+
module.exports = {
17+
comments: false,
18+
plugins: ['external-helpers'],
19+
presets: [['env', { modules: false }], 'react', 'stage-2'],
20+
};
21+
}
22+
23+
if (env === 'development') {
24+
module.exports = {
25+
presets: ['react', 'stage-2'],
26+
plugins: ['react-hot-loader/babel'],
27+
};
28+
}
29+
30+
if (env === 'production') {
31+
module.exports = {
32+
comments: false,
33+
plugins: ['transform-runtime'],
34+
presets: ['env', 'react', 'stage-2'],
35+
};
36+
}
37+
38+
if (env === 'test') {
39+
module.exports = {
40+
comments: false,
41+
plugins: ['transform-es2015-modules-commonjs'],
42+
presets: ['react', 'stage-2'],
43+
};
44+
}

‎README.md

+87-46
Large diffs are not rendered by default.

‎examples/basic-example/app.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { Component } from 'react';
2+
import { hot } from 'react-hot-loader'; // eslint-disable-line import/no-extraneous-dependencies
23
import {
34
SortableTreeWithoutDndContext as SortableTree,
45
toggleExpandedForAll,
@@ -351,4 +352,4 @@ class App extends Component {
351352
}
352353
}
353354

354-
export default App;
355+
export default hot(module)(App);

‎examples/basic-example/index.js

+4-16
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,11 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import { AppContainer } from 'react-hot-loader'; // eslint-disable-line import/no-extraneous-dependencies
43
import { DragDropContext as dragDropContext } from 'react-dnd';
54
import HTML5Backend from 'react-dnd-html5-backend';
5+
import App from './app';
66

77
const rootEl = document.getElementById('app');
8-
const render = Component => {
9-
const wrap = dragDropContext(HTML5Backend);
10-
const Wrapped = wrap(Component);
11-
ReactDOM.render(
12-
<AppContainer>
13-
<Wrapped />
14-
</AppContainer>,
15-
rootEl
16-
);
17-
};
8+
const wrap = dragDropContext(HTML5Backend);
9+
const Wrapped = wrap(App);
1810

19-
/* eslint-disable global-require, import/newline-after-import */
20-
render(require('./app').default);
21-
if (module.hot)
22-
module.hot.accept('./app', () => render(require('./app').default));
23-
/* eslint-enable global-require, import/newline-after-import */
11+
ReactDOM.render(<Wrapped />, rootEl);

‎examples/storybooks/__snapshots__/storyshots.test.js.snap

+5-29
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ exports[`Storyshots Advanced Drag from external source 1`] = `
2323
aria-label="grid"
2424
aria-readonly={true}
2525
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
26-
id={undefined}
2726
onScroll={[Function]}
2827
role="grid"
2928
style={
@@ -276,7 +275,6 @@ exports[`Storyshots Advanced Drag out to remove 1`] = `
276275
aria-label="grid"
277276
aria-readonly={true}
278277
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
279-
id={undefined}
280278
onScroll={[Function]}
281279
role="grid"
282280
style={
@@ -747,7 +745,6 @@ exports[`Storyshots Advanced Playing with generateNodeProps 1`] = `
747745
aria-label="grid"
748746
aria-readonly={true}
749747
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
750-
id={undefined}
751748
onScroll={[Function]}
752749
role="grid"
753750
style={
@@ -1075,7 +1072,6 @@ exports[`Storyshots Advanced Touch support (Experimental) 1`] = `
10751072
aria-label="grid"
10761073
aria-readonly={true}
10771074
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
1078-
id={undefined}
10791075
onScroll={[Function]}
10801076
role="grid"
10811077
style={
@@ -1338,7 +1334,6 @@ exports[`Storyshots Advanced Tree-to-tree dragging 1`] = `
13381334
aria-label="grid"
13391335
aria-readonly={true}
13401336
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
1341-
id={undefined}
13421337
onScroll={[Function]}
13431338
role="grid"
13441339
style={
@@ -1552,7 +1547,6 @@ exports[`Storyshots Advanced Tree-to-tree dragging 1`] = `
15521547
aria-label="grid"
15531548
aria-readonly={true}
15541549
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
1555-
id={undefined}
15561550
onScroll={[Function]}
15571551
role="grid"
15581552
style={
@@ -1812,7 +1806,6 @@ exports[`Storyshots Basics Add and remove nodes programmatically 1`] = `
18121806
aria-label="grid"
18131807
aria-readonly={true}
18141808
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
1815-
id={undefined}
18161809
onScroll={[Function]}
18171810
role="grid"
18181811
style={
@@ -2087,7 +2080,6 @@ exports[`Storyshots Basics Callbacks 1`] = `
20872080
aria-label="grid"
20882081
aria-readonly={true}
20892082
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
2090-
id={undefined}
20912083
onScroll={[Function]}
20922084
role="grid"
20932085
style={
@@ -2416,7 +2408,6 @@ exports[`Storyshots Basics Minimal implementation 1`] = `
24162408
aria-label="grid"
24172409
aria-readonly={true}
24182410
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
2419-
id={undefined}
24202411
onScroll={[Function]}
24212412
role="grid"
24222413
style={
@@ -2675,7 +2666,6 @@ exports[`Storyshots Basics Modify nodes 1`] = `
26752666
aria-label="grid"
26762667
aria-readonly={true}
26772668
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
2678-
id={undefined}
26792669
onScroll={[Function]}
26802670
role="grid"
26812671
style={
@@ -3028,7 +3018,6 @@ exports[`Storyshots Basics Prevent drop 1`] = `
30283018
aria-label="grid"
30293019
aria-readonly={true}
30303020
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
3031-
id={undefined}
30323021
onScroll={[Function]}
30333022
role="grid"
30343023
style={
@@ -3660,7 +3649,6 @@ exports[`Storyshots Basics Search 1`] = `
36603649
aria-label="grid"
36613650
aria-readonly={true}
36623651
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
3663-
id={undefined}
36643652
onScroll={[Function]}
36653653
role="grid"
36663654
style={
@@ -3833,7 +3821,6 @@ exports[`Storyshots Basics Themes 1`] = `
38333821
aria-label="grid"
38343822
aria-readonly={true}
38353823
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
3836-
id={undefined}
38373824
onScroll={[Function]}
38383825
role="grid"
38393826
style={
@@ -3931,9 +3918,7 @@ exports[`Storyshots Basics Themes 1`] = `
39313918
<div
39323919
className="rstcustom__rowLabel"
39333920
>
3934-
<span
3935-
className={undefined}
3936-
>
3921+
<span>
39373922
The file explorer theme
39383923
</span>
39393924
</div>
@@ -4019,9 +4004,7 @@ exports[`Storyshots Basics Themes 1`] = `
40194004
<div
40204005
className="rstcustom__rowLabel"
40214006
>
4022-
<span
4023-
className={undefined}
4024-
>
4007+
<span>
40254008
Imported from react-sortable-tree-theme-file-explorer
40264009
</span>
40274010
</div>
@@ -4104,9 +4087,7 @@ exports[`Storyshots Basics Themes 1`] = `
41044087
<div
41054088
className="rstcustom__rowLabel"
41064089
>
4107-
<span
4108-
className={undefined}
4109-
>
4090+
<span>
41104091
<div>
41114092
Find it on
41124093
@@ -4181,9 +4162,7 @@ exports[`Storyshots Basics Themes 1`] = `
41814162
<div
41824163
className="rstcustom__rowLabel"
41834164
>
4184-
<span
4185-
className={undefined}
4186-
>
4165+
<span>
41874166
More compact than the default
41884167
</span>
41894168
</div>
@@ -4250,9 +4229,7 @@ exports[`Storyshots Basics Themes 1`] = `
42504229
<div
42514230
className="rstcustom__rowLabel"
42524231
>
4253-
<span
4254-
className={undefined}
4255-
>
4232+
<span>
42564233
<div>
42574234
Simply set it to the
42584235
<code>
@@ -4329,7 +4306,6 @@ exports[`Storyshots Basics treeData import/export 1`] = `
43294306
aria-label="grid"
43304307
aria-readonly={true}
43314308
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
4332-
id={undefined}
43334309
onScroll={[Function]}
43344310
role="grid"
43354311
style={

‎package.json

+47-26
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,38 @@
33
"version": "2.1.2",
44
"description": "Drag-and-drop sortable component for nested data and hierarchies",
55
"scripts": {
6-
"build": "npm run clean && cross-env NODE_ENV=production TARGET=umd webpack --bail",
7-
"build:demo": "npm run clean:demo && cross-env NODE_ENV=production TARGET=demo webpack --bail && npm run build-storybook",
8-
"clean": "rimraf dist style.css style.css.map",
6+
"prebuild": "npm run lint",
7+
"build": "npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:demo",
8+
"build:umd": "npm run clean:umd && cross-env NODE_ENV=rollup rollup -c",
9+
"build:es": "npm run clean:es && cross-env NODE_ENV=es babel src --out-dir dist/es",
10+
"build:commonjs": "npm run clean:commonjs && cross-env NODE_ENV=commonjs babel src --out-dir dist/commonjs",
11+
"build:demo": "npm run clean:demo && cross-env NODE_ENV=production webpack --bail && npm run build-storybook",
912
"clean:demo": "rimraf build",
10-
"start": "cross-env NODE_ENV=development TARGET=development webpack-dev-server --inline --hot",
13+
"clean:commonjs": "rimraf dist/commonjs",
14+
"clean:es": "rimraf dist/es",
15+
"clean:umd": "rimraf dist/umd",
16+
"start": "cross-env NODE_ENV=development webpack-dev-server --hot",
1117
"lint": "eslint src examples",
1218
"prettier": "prettier --single-quote --trailing-comma es5 --write \"{src,examples}/**/*.{js,css,md}\"",
1319
"prepublishOnly": "npm run lint && npm run test && npm run build",
1420
"release": "standard-version",
15-
"test": "jest",
16-
"test:watch": "jest --watchAll",
21+
"test": "cross-env NODE_ENV=test jest",
22+
"test:watch": "cross-env NODE_ENV=test jest --watchAll",
1723
"deploy": "npm run build:demo && gh-pages -d build",
18-
"storybook": "cross-env TARGET=development start-storybook -p ${PORT:-3001} -h 0.0.0.0",
19-
"build-storybook": "cross-env NODE_ENV=production build-storybook -o build/storybook"
24+
"storybook": "start-storybook -p ${PORT:-3001} -h 0.0.0.0",
25+
"build-storybook": "build-storybook -o build/storybook"
26+
},
27+
"main": "dist/commonjs/index.js",
28+
"module": "dist/es/index.js",
29+
"jsnext:main": "dist/es/index.js",
30+
"babel": {
31+
"presets": [
32+
"./.babelrc.js"
33+
]
2034
},
21-
"main": "dist/main.js",
2235
"files": [
2336
"dist",
24-
"style.css",
25-
"style.css.map"
37+
"style.css"
2638
],
2739
"repository": {
2840
"type": "git",
@@ -60,8 +72,8 @@
6072
"dependencies": {
6173
"lodash.isequal": "^4.5.0",
6274
"prop-types": "^15.6.1",
63-
"react-dnd": "2.6.0",
64-
"react-dnd-html5-backend": "2.6.0",
75+
"react-dnd": "3.0.2",
76+
"react-dnd-html5-backend": "3.0.2",
6577
"react-dnd-scrollzone": "^4.0.0",
6678
"react-lifecycles-compat": "^3.0.4",
6779
"react-virtualized": "^9.19.1"
@@ -74,16 +86,20 @@
7486
"@storybook/addon-options": "^4.0.0-alpha.4",
7587
"@storybook/addon-storyshots": "^4.0.0-alpha.4",
7688
"@storybook/react": "^4.0.0-alpha.4",
77-
"autoprefixer": "^8.5.0",
89+
"autoprefixer": "^8.5.2",
7890
"babel-cli": "^6.26.0",
7991
"babel-core": "^6.26.3",
8092
"babel-eslint": "^8.2.3",
81-
"babel-jest": "^22.4.4",
93+
"babel-jest": "^23.0.1",
8294
"babel-loader": "^7.1.4",
95+
"babel-plugin-external-helpers": "^6.22.0",
96+
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
8397
"babel-plugin-transform-object-rest-spread": "^6.26.0",
98+
"babel-plugin-transform-runtime": "^6.23.0",
8499
"babel-polyfill": "^6.26.0",
85100
"babel-preset-env": "^1.7.0",
86101
"babel-preset-react": "^6.24.1",
102+
"babel-preset-stage-2": "^6.24.1",
87103
"codesandbox": "^1.2.10",
88104
"coveralls": "^3.0.1",
89105
"cross-env": "^5.1.6",
@@ -100,25 +116,30 @@
100116
"file-loader": "^1.1.11",
101117
"gh-pages": "^1.1.0",
102118
"html-webpack-plugin": "^3.2.0",
103-
"jest": "^22.4.4",
104-
"jest-enzyme": "^6.0.0",
119+
"jest": "^23.1.0",
120+
"jest-enzyme": "^6.0.1",
105121
"json-loader": "^0.5.7",
106122
"postcss-loader": "^2.1.5",
107-
"prettier": "^1.12.1",
108-
"react": "^16.2.0",
123+
"prettier": "^1.13.3",
124+
"react": "^16.4.0",
109125
"react-addons-shallow-compare": "^15.6.2",
110-
"react-dnd-test-backend": "2.6.0",
126+
"react-dnd-test-backend": "3.0.2",
111127
"react-dnd-touch-backend": "0.4.0",
112-
"react-dom": "^16.2.0",
113-
"react-hot-loader": "^4.2.0",
128+
"react-dom": "^16.4.0",
129+
"react-hot-loader": "^4.3.0",
114130
"react-sortable-tree-theme-file-explorer": "^1.1.2",
115-
"react-test-renderer": "^16.3.2",
131+
"react-test-renderer": "^16.4.0",
116132
"rimraf": "^2.6.2",
133+
"rollup": "^0.59.4",
134+
"rollup-plugin-babel": "^3.0.4",
135+
"rollup-plugin-commonjs": "^9.1.3",
136+
"rollup-plugin-node-resolve": "^3.3.0",
137+
"rollup-plugin-postcss": "^1.6.2",
138+
"rollup-plugin-uglify": "^4.0.0",
117139
"standard-version": "^4.4.0",
118140
"style-loader": "^0.21.0",
119-
"uglifyjs-webpack-plugin": "^1.2.5",
120-
"webpack": "^4.8.3",
121-
"webpack-cli": "^2.1.3",
141+
"webpack": "^4.10.2",
142+
"webpack-cli": "^2.1.4",
122143
"webpack-dev-server": "^3.1.4",
123144
"webpack-node-externals": "^1.7.2"
124145
},

0 commit comments

Comments
 (0)