feat: Only serve cjs and esm builds (#351)

* fixed build and demo * updating lockfile * fix stuff
frontend-collective · Jun 12, 2018 · 2c01832 · 2c01832
1 parent 46961ed
commit 2c01832
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 108 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -1,37 +1,18 @@
 const env = process.env.NODE_ENV;
 
-if (env === 'commonjs' || env === 'es') {
-  module.exports = {
-    ignore: ['*.test.*'],
-    plugins: ['transform-runtime'],
-    presets: [['env', { modules: false }], 'react', 'stage-2'],
-  };
-
-  if (env === 'commonjs') {
-    module.exports.plugins.push('transform-es2015-modules-commonjs');
-  }
-}
-
 if (env === 'rollup') {
   module.exports = {
-    comments: false,
+    presets: [
+      [
+        'env',
+        {
+          modules: false,
+        },
+      ],
+      'stage-2',
+      'react',
+    ],
     plugins: ['external-helpers'],
-    presets: [['env', { modules: false }], 'react', 'stage-2'],
-  };
-}
-
-if (env === 'development') {
-  module.exports = {
-    presets: ['react', 'stage-2'],
-    plugins: ['react-hot-loader/babel'],
-  };
-}
-
-if (env === 'production') {
-  module.exports = {
-    comments: false,
-    plugins: ['transform-runtime'],
-    presets: ['env', 'react', 'stage-2'],
   };
 }
 

diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ Install `react-sortable-tree` using npm.
 npm install react-sortable-tree --save
 ```
 
-ES6, CommonJS, and UMD builds are available with each distribution.
+ES6 and CommonJS builds are available with each distribution.
 For example:
 
 ```js
@@ -38,18 +38,11 @@ import SortableTree from 'react-sortable-tree';
 // Or you can import the tree without the dnd context as a named export. eg
 import { SortableTreeWithoutDndContext as SortableTree } from 'react-sortable-tree';
 
-// Importing from commonjs (default)
-import SortableTree from 'react-sortable-tree/dist/commonjs';
+// Importing from esm (default)
+import SortableTree from 'react-sortable-tree/dist/index.esm.js';
 
-// Importing from es
-import SortableTree from 'react-sortable-tree/dist/es';
-```
-
-You can also use a global-friendly UMD build:
-
-```html
-<link rel="stylesheet" href="path-to-react-sortable-tree/styles.css">
-<script src="path-to-react-sortable-tree/dist/umd/react-sortable-tree.js"></script>
+// Importing from cjs
+import SortableTree from 'react-sortable-tree/dist/index.cjs.js';
 ```
 
 ## Usage
@@ -140,13 +133,11 @@ Using the `theme` prop along with an imported theme module, you can easily overr
 
 ### Featured themes
 
-| ![File Explorer Theme](https://user-images.githubusercontent.com/4413963/32144502-1df1ae08-bcfd-11e7-8f63-8b836dace1a4.png) | <img alt="Full Node Drag Theme" src="https://user-images.githubusercontent.com/4413963/33521792-61dc2c50-d81f-11e7-8ab1-359661a11ca4.png" width="300"> | <img alt="MINIMAL THEME" src="https://github.com/lifejuggler/react-sortable-tree-theme-minimal/blob/master/example-resource/main.png" width="300"> |
-| :-------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------: |
-|                                                      **File Explorer**                                                      |                                                                   **Full Node Drag**                                                                   |                                                  **Minimalistic theme inspired from MATERIAL UI**                                                  |
-|                                           react-sortable-tree-theme-file-explorer                                           |                                                        react-sortable-tree-theme-full-node-drag                                                        |                                                         react-sortable-tree-theme-minimal                                                          |
-
-| [Github](https://github.com/
-/react-sortable-tree-theme-file-explorer) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-file-explorer) | [Github](https://github.com/frontend-collective/react-sortable-tree-theme-full-node-drag) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-full-node-drag) | [Github](https://github.com/lifejuggler/react-sortable-tree-theme-minimal) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-minimal) |
+|                       ![File Explorer Theme](https://user-images.githubusercontent.com/4413963/32144502-1df1ae08-bcfd-11e7-8f63-8b836dace1a4.png)                        |           <img alt="Full Node Drag Theme" src="https://user-images.githubusercontent.com/4413963/33521792-61dc2c50-d81f-11e7-8ab1-359661a11ca4.png" width="300">           |  <img alt="MINIMAL THEME" src="https://github.com/lifejuggler/react-sortable-tree-theme-minimal/blob/master/example-resource/main.png" width="300">  |
+| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------: |
+|                                                                            **File Explorer**                                                                             |                                                                             **Full Node Drag**                                                                             |                                                   **Minimalistic theme inspired from MATERIAL UI**                                                   |
+|                                                                 react-sortable-tree-theme-file-explorer                                                                  |                                                                  react-sortable-tree-theme-full-node-drag                                                                  |                                                          react-sortable-tree-theme-minimal                                                           |
+| [Github](https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-file-explorer) | [Github](https://github.com/frontend-collective/react-sortable-tree-theme-full-node-drag) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-full-node-drag) | [Github](https://github.com/lifejuggler/react-sortable-tree-theme-minimal) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-minimal) |
 
 **Help Wanted** - As the themes feature has just been enabled, there are very few (only _two_ at the time of this writing) theme modules available. If you've customized the appearance of your tree to be especially cool or easy to use, I would be happy to feature it in this readme with a link to the Github repo and NPM page if you convert it to a theme. You can use my [file explorer theme repo](https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer) as a template to plug in your own stuff.
 

diff --git a/example/public/index.html b/example/public/index.html
@@ -22,6 +22,8 @@
     <title>React Sortable Tree</title>
 
     <!-- Latest compiled and minified CSS -->
+    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
+    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
     <!-- Optional theme -->

diff --git a/example/src/App.js b/example/src/App.js
@@ -24,6 +24,7 @@ class App extends Component {
   componentDidMount() {
     if (this._editor) {
       this._editor.set(treeData);
+      this._editor.expandAll();
     }
   }
 

diff --git a/example/src/Demo.js b/example/src/Demo.js
@@ -82,8 +82,12 @@ export default class Demo extends Component {
       <div className={styles.demoWrapper}>
         <div className={styles.buttons}>
           <div>
-            <button onClick={this.expandAll}>Expand All</button>
-            <button onClick={this.collapseAll}>Collapse All</button>
+            <button className="btn btn-primary" onClick={this.expandAll}>
+              Expand All
+            </button>
+            <button className="btn btn-warning" onClick={this.collapseAll}>
+              Collapse All
+            </button>
           </div>
           <form
             style={{ display: 'inline-block' }}
@@ -104,6 +108,7 @@ export default class Demo extends Component {
             </label>
 
             <button
+              className="btn btn-info"
               type="button"
               disabled={!searchFoundCount}
               onClick={this.selectPrevMatch}
@@ -112,6 +117,7 @@ export default class Demo extends Component {
             </button>
 
             <button
+              className="btn btn-info"
               type="submit"
               disabled={!searchFoundCount}
               onClick={this.selectNextMatch}
@@ -157,6 +163,7 @@ export default class Demo extends Component {
             generateNodeProps={rowInfo => ({
               buttons: [
                 <button
+                  className="btn btn-outline-success"
                   style={{
                     verticalAlign: 'middle',
                   }}

diff --git a/example/src/index.css b/example/src/index.css
@@ -65,3 +65,10 @@ body {
 .container {
   margin-left: 0;
 }
+
+.btn {
+  margin-left: 3px;
+  margin-right: 3px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
diff --git a/package.json b/package.json
@@ -4,27 +4,20 @@
   "description": "Drag-and-drop sortable component for nested data and hierarchies",
   "scripts": {
     "prebuild": "npm run lint",
-    "build": "npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:storybook",
-    "build:umd": "npm run clean:umd && cross-env NODE_ENV=rollup rollup -c",
-    "build:es": "npm run clean:es && cross-env NODE_ENV=es babel src --out-dir dist/es",
-    "build:commonjs": "npm run clean:commonjs && cross-env NODE_ENV=commonjs babel src --out-dir dist/commonjs",
+    "build": "npm run clean && NODE_ENV=rollup rollup -c",
     "build:storybook": "npm run clean:storybook && build-storybook -o example/build/storybook",
-    "clean:storybook": "rimraf build",
-    "clean:commonjs": "rimraf dist/commonjs",
-    "clean:es": "rimraf dist/es",
-    "clean:umd": "rimraf dist/umd",
+    "clean": "rimraf dist",
+    "clean:storybook": "rimraf example/build/storybook",
     "lint": "eslint src",
     "prettier": "prettier --write \"{src,example/src,stories}/**/*.{js,css,md}\"",
     "prepublishOnly": "npm run lint && npm run test && npm run build",
     "release": "standard-version",
     "test": "cross-env NODE_ENV=test jest",
     "test:watch": "cross-env NODE_ENV=test jest --watchAll",
-    "deploy": "npm run build:storybook && gh-pages -d build",
     "storybook": "start-storybook -p ${PORT:-3001} -h 0.0.0.0"
   },
-  "main": "dist/umd/react-sortable-tree.js",
-  "module": "dist/es/index.js",
-  "jsnext:main": "dist/es/index.js",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
   "babel": {
     "presets": [
       "./.babelrc.js"
@@ -133,7 +126,6 @@
     "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-postcss": "^1.6.2",
-    "rollup-plugin-uglify": "^4.0.0",
     "standard-version": "^4.4.0",
     "style-loader": "^0.21.0",
     "webpack": "^4.10.2",

diff --git a/rollup.config.js b/rollup.config.js
@@ -2,20 +2,23 @@ import nodeResolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import babel from 'rollup-plugin-babel';
 import postcss from 'rollup-plugin-postcss';
-import { uglify } from 'rollup-plugin-uglify';
+
+import pkg from './package.json';
 
 export default {
   input: './src/index.js',
-  output: {
-    exports: 'named',
-    file: 'dist/umd/react-sortable-tree.js',
-    format: 'umd',
-    name: 'ReactSortableTree',
-    globals: {
-      react: 'React',
-      'react-dom': 'ReactDOM',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+      exports: 'named'
+    },
+    {
+      file: pkg.module,
+      format: 'esm',
+      exports: 'named'
     },
-  },
+  ],
   external: [
     'react',
     'react-dom',
@@ -35,12 +38,5 @@ export default {
     babel({
       exclude: 'node_modules/**',
     }),
-    uglify({
-      mangle: false,
-      output: {
-        comments: true,
-        beautify: true,
-      },
-    }),
   ],
 };
diff --git a/yarn.lock b/yarn.lock
@@ -20,12 +20,6 @@
   dependencies:
     "@babel/highlight" "7.0.0-beta.47"
 
-"@babel/code-frame@^7.0.0-beta.47":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.49.tgz#becd805482734440c9d137e46d77340e64d7f51b"
-  dependencies:
-    "@babel/highlight" "7.0.0-beta.49"
-
 "@babel/generator@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
@@ -80,14 +74,6 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-"@babel/highlight@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.49.tgz#96bdc6b43e13482012ba6691b1018492d39622cc"
-  dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
-
 "@babel/template@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
@@ -9712,13 +9698,6 @@ rollup-plugin-postcss@^1.6.2:
     rollup-pluginutils "^2.0.1"
     style-inject "^0.3.0"
 
-rollup-plugin-uglify@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-uglify/-/rollup-plugin-uglify-4.0.0.tgz#6eb471738f1ce9ba7d9d4bc43b71cba02417c8fb"
-  dependencies:
-    "@babel/code-frame" "^7.0.0-beta.47"
-    uglify-js "^3.3.25"
-
 rollup-pluginutils@^1.5.0:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
@@ -10722,13 +10701,6 @@ uglify-js@^2.6:
   optionalDependencies:
     uglify-to-browserify "~1.0.0"
 
-uglify-js@^3.3.25:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.0.tgz#796762282b5b5f0eafe7d5c8c708d1d7bd5ba11d"
-  dependencies:
-    commander "~2.15.0"
-    source-map "~0.6.1"
-
 uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"