Merge pull request #37 from smooth-code/use-rollup

feat: ship a single js file

.babelrc

@@ -1,11 +1,17 @@
 {
+  "presets": [["env", { "loose": true, "modules": false }], "react"],
   "plugins": [
     ["transform-class-properties", { "loose": true }],
-    "transform-object-rest-spread",
-    "dynamic-import-node"
-  ],
-  "presets": [
-    ["env", { "loose": true }],
-    "react"
+    "transform-object-rest-spread"
   ],
+  "env": {
+    "test": {
+      "plugins": [
+        "dynamic-import-node",
+        ["transform-class-properties", { "loose": true }],
+        "transform-object-rest-spread"
+      ],
+      "presets": [["env", { "loose": true }], "react"]
+    }
+  }
 }

.eslintignore

@@ -1,5 +1,5 @@
 node_modules/
-/lib/
 /coverage/
-__fixtures__
-example
+/dist/
+__fixtures__/
+/example/

.gitignore

@@ -1,3 +1,4 @@
-node_modules
-/lib/
-/coverage
+node_modules/
+/dist/
+/coverage/
+bundle-stats.html

.npmignore

@@ -1,7 +1,5 @@
 /*
 !/babel.js
 !/server.js
-!/lib/**/*.js
-__fixtures__
-*.test.js
-setupTests.js
+!/dist/**/*.js
+!/src/**/*.js

.prettierignore

@@ -1,5 +1,6 @@
 node_modules/
-/lib/
 /coverage/
-__fixtures__
+/dist/
+__fixtures__/
+/example/
 CHANGELOG.md

.travis.yml

@@ -2,6 +2,7 @@ language: node_js
 
 node_js:
   - 8
+  - 9
 
 before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.3.2

babel.js

@@ -1 +1 @@
-module.exports = require('./lib/babel').default
+module.exports = require('./dist/loadable-components.babel.cjs.js')

example/package.json

@@ -3,9 +3,13 @@
   "version": "1.0.0",
   "main": "index.js",
   "license": "MIT",
+  "scripts": {
+    "dev:server": "nodemon server",
+    "dev:client": "webpack-dev-server"
+  },
   "dependencies": {
     "express": "^4.16.2",
-    "loadable-components": "file:../loadable-components-v0.4.0-4.tgz",
+    "loadable-components": "latest",
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
   },

example/yarn.lock

@@ -2773,9 +2773,9 @@ load-json-file@^2.0.0:
     pify "^2.0.0"
     strip-bom "^3.0.0"
 
-"loadable-components@file:../loadable-components-v0.4.0-4.tgz":
-  version "0.4.0"
-  resolved "file:../loadable-components-v0.4.0-4.tgz#b794834788ad32fd9c179ce23bae8d77bca68ea1"
+"loadable-components@file:../loadable-components-v1.0.2-rc2.tgz":
+  version "1.0.2"
+  resolved "file:../loadable-components-v1.0.2-rc2.tgz#f1a4810b34a6fa9e0fe6765c19bd8795a17f2497"
   dependencies:
     babel-plugin-syntax-dynamic-import "^6.18.0"
 

package.json

@@ -2,8 +2,10 @@
   "name": "loadable-components",
   "version": "1.0.2",
   "description": "React code splitting made easy.",
-  "main": "lib/index.js",
   "repository": "git@github.com:smooth-code/loadable-components.git",
+  "main": "dist/loadable-components.cjs.js",
+  "jsnext:main": "dist/loadable-components.es.js",
+  "module": "dist/loadable-components.es.js",
   "author": "Greg Bergé <berge.greg@gmail.com>",
   "keywords": [
     "react",
@@ -17,17 +19,14 @@
     "react-async-components"
   ],
   "license": "MIT",
-  "jest": {
-    "setupFiles": [
-      "<rootDir>/tests/setupTests.js"
-    ]
-  },
   "scripts": {
-    "build": "rm -rf lib/ && NODE_ENV=production babel --ignore \"*.test.js\" src -d lib",
-    "ci": "yarn build && yarn lint && yarn test --coverage && codecov",
+    "build": "rm -rf dist/ && rollup -c",
+    "ci":
+      "yarn build && yarn lint && bundlesize && yarn test --coverage && codecov",
     "format": "prettier --write \"src/**/*.js\" \"*.md\"",
     "lint": "eslint .",
-    "release": "yarn build && standard-version && conventional-github-releaser -p angular",
+    "release":
+      "yarn build && standard-version && conventional-github-releaser -p angular",
     "test": "jest"
   },
   "peerDependencies": {
@@ -39,10 +38,12 @@
     "babel-eslint": "^8.2.1",
     "babel-jest": "^22.1.0",
     "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
+    "bundlesize": "^0.16.0",
     "codecov": "^3.0.0",
     "conventional-github-releaser": "^2.0.0",
     "enzyme": "^3.3.0",
@@ -59,9 +60,27 @@
     "react-dom": "^16.2.0",
     "react-router": "^4.2.0",
     "react-test-renderer": "^16.2.0",
+    "rollup": "^0.55.3",
+    "rollup-plugin-babel": "^3.0.3",
+    "rollup-plugin-commonjs": "^8.3.0",
+    "rollup-plugin-json": "^2.3.0",
+    "rollup-plugin-node-resolve": "^3.0.2",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-sourcemaps": "^0.4.2",
+    "rollup-plugin-uglify": "^3.0.0",
+    "rollup-plugin-visualizer": "^0.3.1",
     "standard-version": "^4.3.0"
   },
   "dependencies": {
     "babel-plugin-syntax-dynamic-import": "^6.18.0"
-  }
+  },
+  "jest": {
+    "setupFiles": ["<rootDir>/tests/setupTests.js"]
+  },
+  "bundlesize": [
+    {
+      "path": "./dist/loadable-components.min.js",
+      "maxSize": "2kb"
+    }
+  ]
 }

rollup.config.js

@@ -0,0 +1,108 @@
+/* eslint-disable flowtype/require-valid-file-annotation, no-console, import/extensions */
+import nodeResolve from 'rollup-plugin-node-resolve'
+import replace from 'rollup-plugin-replace'
+import commonjs from 'rollup-plugin-commonjs'
+import babel from 'rollup-plugin-babel'
+import json from 'rollup-plugin-json'
+import uglify from 'rollup-plugin-uglify'
+import visualizer from 'rollup-plugin-visualizer'
+import sourceMaps from 'rollup-plugin-sourcemaps'
+import pkg from './package.json'
+
+const commonPlugins = [
+  json(),
+  nodeResolve(),
+  sourceMaps(),
+  babel({ plugins: ['external-helpers'] }),
+  commonjs({ ignoreGlobal: true }),
+]
+
+const configBase = {
+  input: 'src/index.js',
+  external: ['react'].concat(Object.keys(pkg.dependencies)),
+  plugins: commonPlugins,
+}
+
+const umdConfig = Object.assign({}, configBase, {
+  output: {
+    file: 'dist/loadable-components.js',
+    format: 'umd',
+    name: 'loadable',
+    exports: 'named',
+    globals: { react: 'React' },
+    sourcemap: true,
+  },
+})
+
+const devUmdConfig = Object.assign({}, umdConfig, {
+  plugins: umdConfig.plugins.concat(
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('development'),
+    }),
+  ),
+})
+
+const prodUmdConfig = Object.assign({}, umdConfig, {
+  output: Object.assign({}, umdConfig.output, {
+    file: 'dist/loadable-components.min.js',
+  }),
+  plugins: umdConfig.plugins.concat([
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    }),
+    uglify({ sourceMap: true }),
+    visualizer({ filename: './bundle-stats.html' }),
+  ]),
+})
+
+const esConfig = Object.assign({}, configBase, {
+  output: [
+    {
+      file: 'dist/loadable-components.es.js',
+      format: 'es',
+      globals: { react: 'React' },
+      sourcemap: true,
+    },
+    {
+      file: 'dist/loadable-components.cjs.js',
+      format: 'cjs',
+      exports: 'named',
+      globals: { react: 'React' },
+      sourcemap: true,
+    },
+  ],
+})
+
+const serverConfig = Object.assign({}, configBase, {
+  input: 'src/server/index.js',
+  output: [
+    {
+      file: 'dist/loadable-components.server.cjs.js',
+      format: 'cjs',
+      exports: 'named',
+      globals: { react: 'React' },
+      sourcemap: true,
+    },
+  ],
+})
+
+const babelConfig = Object.assign({}, configBase, {
+  input: 'src/babel.js',
+  output: [
+    {
+      file: 'dist/loadable-components.babel.cjs.js',
+      format: 'cjs',
+      exports: 'named',
+      globals: { react: 'React' },
+      sourcemap: true,
+    },
+  ],
+})
+
+export default [
+  devUmdConfig,
+  prodUmdConfig,
+  esConfig,
+  serverConfig,
+  babelConfig,
+]

server.js

@@ -1 +1 @@
-module.exports = require('./lib/server')
+module.exports = require('./dist/loadable-components.server.cjs.js')

src/constants.js

@@ -1,4 +1,2 @@
-import createSymbol from './utils/createSymbol'
-
 export const LOADABLE_STATE = '__LOADABLE_STATE__'
-export const LOADABLE = createSymbol('loadable')
+export const LOADABLE = '@@loadable-components/loadable'