diff --git a/.babelrc.js b/.babelrc.js
index c8ba03dd..559ed47f 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -1,22 +1,25 @@
'use strict';
-const targets = process.env.IS_WEBPACK === "1" ?
- "> 0.25%, not dead" :
- "maintained node versions"
+// If set, we put Babel in "esmMode", i.e. leave import/export intact.
+// Good for webpack and for an esm build.
+const esmMode = process.env.BABEL_MODULE_TYPE === "module";
+const es6Compat = process.env.BABEL_ES_COMPAT === "6";
module.exports = {
"presets": [
[
"@babel/preset-env",
{
- targets
- }
+ // Don't transpile import/export in esmMode.
+ modules: esmMode ? false : "auto",
+ targets: es6Compat ? "maintained node versions" : undefined
+ },
],
"@babel/react",
"@babel/preset-flow"
],
"plugins": [
- "@babel/transform-flow-comments",
+ "@babel/plugin-transform-flow-comments",
"@babel/plugin-proposal-class-properties",
],
"env": {
diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 00000000..53565ed3
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
+> 0.25%
+ie 11
+not dead
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 9ceef6ae..466f3266 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,3 @@
*.iml
node_modules/
build/
-web/
diff --git a/.travis.yml b/.travis.yml
index 9721b4eb..fab94b08 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -9,8 +9,9 @@ env:
addons:
firefox: latest
script:
- - npm run lint
- - npm run test
+ - make lint
+ - make test
+ - make test-phantom
email:
on_failure: change
on_success: never
diff --git a/Makefile b/Makefile
index a941028d..bd0866c7 100644
--- a/Makefile
+++ b/Makefile
@@ -1,20 +1,30 @@
# Mostly lifted from https://andreypopp.com/posts/2013-05-16-makefile-recipes-for-node-js.html
# Thanks @andreypopp
+# Make it parallel
+MAKEFLAGS += j4
export BIN := $(shell yarn bin)
-.PHONY: test dev lint build clean install link
+.PHONY: test dev lint build build-cjs build-esm build-web clean install link publish
.DEFAULT_GOAL := build
clean:
rm -rf build
+ mkdir -p build
lint:
@$(BIN)/flow
@$(BIN)/eslint lib/* lib/utils/* specs/*
@$(BIN)/tsc -p typings
-build: clean
- $(BIN)/babel --out-dir ./build ./lib
+build: build-cjs build-esm build-web
+
+build-cjs: $(BIN)
+ $(BIN)/babel --out-dir ./build/cjs ./lib
+
+build-esm: $(BIN)
+ env BABEL_MODULE_TYPE="module" BABEL_ES_COMPAT="6" $(BIN)/babel --out-dir ./build/module ./lib
+
+build-web: $(BIN)
$(BIN)/webpack --mode=production --display-modules
# Allows usage of `make install`, `make link`
@@ -22,7 +32,10 @@ install link:
@yarn $@
test: $(BIN)
- @NODE_ENV=test $(BIN)/karma start --single-run
+ @NODE_ENV=test $(BIN)/karma start
+
+test-phantom: $(BIN)
+ @NODE_ENV=test $(BIN)/karma start karma-phantomjs.conf.js
dev: $(BIN) clean
DRAGGABLE_DEBUG=true $(BIN)/webpack-dev-server
diff --git a/example/example.js b/example/example.js
index 92f71c5f..96f8500f 100644
--- a/example/example.js
+++ b/example/example.js
@@ -1,4 +1,4 @@
-var Draggable = window.ReactDraggable;
+const {ReactDraggable: Draggable, React, ReactDOM} = window;
class App extends React.Component {
state = {
diff --git a/example/index.html b/example/index.html
index bca50faa..5af754a0 100644
--- a/example/index.html
+++ b/example/index.html
@@ -57,7 +57,7 @@
-
+
diff --git a/index.js b/index.js
deleted file mode 100644
index 0e299ca4..00000000
--- a/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-var Draggable = require('./build/Draggable').default;
-
-// Previous versions of this lib exported as the root export. As to not break
-// them, or TypeScript, we export *both* as the root and as 'default'.
-// See https://github.com/mzabriskie/react-draggable/pull/254
-// and https://github.com/mzabriskie/react-draggable/issues/266
-module.exports = Draggable;
-module.exports.default = Draggable;
-module.exports.DraggableCore = require('./build/DraggableCore').default;
diff --git a/karma-phantomjs.conf.js b/karma-phantomjs.conf.js
new file mode 100644
index 00000000..9f42a0a7
--- /dev/null
+++ b/karma-phantomjs.conf.js
@@ -0,0 +1,32 @@
+'use strict';
+
+const baseConfig = require('./karma.conf.js');
+// Phantom build can't handle the modern JS in the module build
+process.env.BABEL_MODULE_TYPE = 'cjs';
+
+module.exports = function(config) {
+ // Set base config options.
+ baseConfig(config);
+ // Then set some of our own, to run PhantomJS. It's a bit older, which is the idea.
+ // We want to make sure our CJS build still works on old environments.
+ config.set({
+ // Shim required for phantom
+ frameworks: ['phantomjs-shim', 'jasmine'],
+ browsers: ['PhantomJS_custom'],
+ // Includes Map/Set
+ files: [
+ 'specs/draggable-phantom.spec.jsx'
+ ],
+ preprocessors: {
+ 'specs/draggable-phantom.spec.jsx': ['webpack']
+ },
+ customLaunchers: {
+ PhantomJS_custom: {
+ base: 'PhantomJS',
+ options: {
+ viewportSize: {width: 1024, height: 768}
+ }
+ }
+ },
+ });
+};
diff --git a/karma.conf.js b/karma.conf.js
index 9432d3e4..bd00b5ef 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,6 +1,5 @@
'use strict';
-const webpack = require('webpack');
const _ = require('lodash');
process.env.NODE_ENV = 'test';
process.env.CHROME_BIN = require('puppeteer').executablePath();
@@ -10,25 +9,23 @@ module.exports = function(config) {
basePath: '',
- frameworks: ['phantomjs-shim', 'jasmine'],
+ frameworks: [ 'jasmine'],
files: [
- 'specs/main.js'
+ 'specs/draggable.spec.jsx'
],
exclude: [
],
preprocessors: {
- 'specs/main.js': ['webpack']
+ 'specs/draggable.spec.jsx': ['webpack']
},
webpack: _.merge(
require('./webpack.config.js')({}, {}),
{
mode: 'production',
- // Remove minified build & separate compile of index-src
- entry: '',
// Remove source maps: *speeeeeed*
devtool: 'none',
module: {
@@ -60,16 +57,7 @@ module.exports = function(config) {
autoWatch: false,
- browsers: ['PhantomJS_custom', 'Firefox', 'ChromeHeadless'],
-
- customLaunchers: {
- PhantomJS_custom: {
- base: 'PhantomJS',
- options: {
- viewportSize: {width: 1024, height: 768}
- }
- }
- },
+ browsers: ['Firefox', 'ChromeHeadless'],
singleRun: true,
});
diff --git a/lib/Draggable.js b/lib/Draggable.js
index 2a6ec238..7e53ecfe 100644
--- a/lib/Draggable.js
+++ b/lib/Draggable.js
@@ -38,7 +38,7 @@ export type DraggableProps = {
// Define
//
-export default class Draggable extends React.Component {
+class Draggable extends React.Component {
static displayName = 'Draggable';
@@ -383,3 +383,5 @@ export default class Draggable extends React.Component as the root export. As to not break
-// them, or TypeScript, we export *both* as the root and as 'default'.
+// Previous versions of this lib exported as the root export. As to no-// them, or TypeScript, we export *both* as the root and as 'default'.
// See https://github.com/mzabriskie/react-draggable/pull/254
// and https://github.com/mzabriskie/react-draggable/issues/266
module.exports = Draggable;
module.exports.default = Draggable;
-module.exports.DraggableCore = require('./lib/DraggableCore').default;
+module.exports.DraggableCore = DraggableCore;
diff --git a/lib/umd.js b/lib/umd.js
deleted file mode 100644
index f4b35186..00000000
--- a/lib/umd.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Draggable from './Draggable';
-import DraggableCore from './DraggableCore';
-
-// Previous versions of this lib exported as the root export. As to not break
-// them, or TypeScript, we export *both* as the root and as 'default'.
-// See https://github.com/mzabriskie/react-draggable/pull/254
-// and https://github.com/mzabriskie/react-draggable/issues/266
-Draggable.default = Draggable;
-Draggable.DraggableCore = DraggableCore;
-
-export default Draggable;
diff --git a/package.json b/package.json
index 13b1ef8e..d51b6355 100644
--- a/package.json
+++ b/package.json
@@ -2,10 +2,12 @@
"name": "react-draggable",
"version": "4.0.3",
"description": "React draggable component",
- "main": "index.js",
- "browser": "web/react-draggable.min.js",
+ "main": "build/cjs/cjs.js",
+ "browser": "build/web/react-draggable.min.js",
+ "module": "build/module/Draggable.js",
"scripts": {
"test": "make test",
+ "test-phantom": "make test-phantom",
"test-debug": "karma start --browsers=Chrome",
"test-ie": "karma start --browsers=IE",
"dev": "make dev",
diff --git a/specs/main.js b/specs/draggable-phantom.spec.jsx
similarity index 100%
rename from specs/main.js
rename to specs/draggable-phantom.spec.jsx
diff --git a/specs/draggable.spec.jsx b/specs/draggable.spec.jsx
index 83725154..f0b0734a 100644
--- a/specs/draggable.spec.jsx
+++ b/specs/draggable.spec.jsx
@@ -3,7 +3,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import ShallowRenderer from 'react-test-renderer/shallow';
-import Draggable, {DraggableCore} from '../index-src';
+import Draggable, {DraggableCore} from '../lib/Draggable';
import FrameComponent from 'react-frame-component';
import assert from 'power-assert';
import _ from 'lodash';
diff --git a/webpack.config.js b/webpack.config.js
index cecbdb4d..34c32bfa 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,14 +2,14 @@ const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
-// Grabbed in .babelrc.js to switch on preset-env target.
-// If we're in webpack, we compile for browsers, otherwise we compile for modern Node.
-process.env.IS_WEBPACK = "1";
+// Grabbed in .babelrc.js to switch on transpiling modules.
+// We want webpack to handle modules if possible.
+// This can be overridden and webpack will handle babelified CJS.
+process.env.BABEL_MODULE_TYPE = process.env.BABEL_MODULE_TYPE || 'module';
module.exports = (env, argv) => ({
entry: {
- "react-draggable": "./index-src.js",
- "react-draggable.min": "./index-src.js",
+ 'react-draggable.min': './lib/cjs.js',
},
output: {
filename: '[name].js',
@@ -17,13 +17,13 @@ module.exports = (env, argv) => ({
devtoolModuleFilenameTemplate: '../[resource-path]',
library: 'ReactDraggable',
libraryTarget: 'umd',
- path: path.resolve(__dirname, 'web'),
+ path: path.resolve(__dirname, 'build', 'web'),
},
devServer: {
contentBase: '.',
hot: true,
open: true,
- openPage: '/example/index.html',
+ openPage: 'example/index.html',
writeToDisk: true,
},
devtool: 'source-map',