Initial commit

Didier Franc · Didier Franc · commit 9a81531205b5 · 2017-02-06T00:32:07.000+01:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react", "stage-0"],
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Didier Franc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,49 @@
+# react-code-splitting
+
+You're working on a great app powered by React, bundled with webpack and your bundle size increases ... You're in the right place to solve this modern JS apps nightmare.
+
+
+## Prerequisite
+
+- You're using [Webpack 2](https://webpack.js.org/)
+- You've polyfilled ***Promise*** to support old browser
+
+## How-to
+
+#### Without code splitting
+
+`<Login />` + `<Home />` are loaded at the first start
+```jsx
+import Login from './Login'
+import Home from './Home'
+
+const App = ({ user }) => (
+  <Body>
+    {user.loggedIn ? <Route path="/" component={Home} /> : <Redirect to="/login" />}
+    <Route path="/login" component={Login} />
+  </Body>
+)
+```
+
+#### With code splitting
+
+You're not logged in ? `<Login />` component is the only loaded, `<Home />` will be loaded when the user will be logged in.
+```jsx
+import Async from 'react-code-splitting'
+
+import Login from './Login'
+const Home = () => <Async load={import('./Home')} />
+
+const App = ({ user }) => (
+  <Body>
+    {user.loggedIn ? <Route path="/" component={Home} /> : <Redirect to="/login" />}
+    <Route path="/login" component={Login} />
+  </Body>
+)
+```
+
+You can view this snippets in context [here](https://github.com/didierfranc/redux-react-starter/blob/master/src/components/App.js#L11) !
+
+## More
+
+Webpack examples with some code splitting techniques https://github.com/webpack/webpack/tree/master/examples
diff --git a/dist/react-code-splitting.js b/dist/react-code-splitting.js
@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Async = function (_React$Component) {
+  _inherits(Async, _React$Component);
+
+  function Async() {
+    var _ref,
+        _this2 = this;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Async);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Async.__proto__ || Object.getPrototypeOf(Async)).call.apply(_ref, [this].concat(args))), _this), _this.componentWillMount = function () {
+      _this.props.load.then(function (c) {
+        _this.C = c;_this.forceUpdate();
+      });
+    }, _this.render = function () {
+      return _this.C ? _react2.default.createElement(_this2.C.default, null) : null;
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  return Async;
+}(_react2.default.Component);
+
+exports.default = Async;
+
+
+Async.propTypes = {
+  load: _react2.default.PropTypes.instanceOf(Promise).isRequired
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "react-code-splitting",
+  "version": "1.0.3",
+  "description": "Code splitting won't be a nightmare anymore",
+  "main": "./dist/react-code-splitting.js",
+  "repository": "https://github.com/didierfranc/react-code-splitting",
+  "author": "Didier Franc",
+  "license": "MIT",
+  "scripts": {
+    "build": "babel ./src/index.js --out-file ./dist/react-code-splitting.js"
+  },
+  "devDependencies": {
+    "babel-core": "^6.22.1",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.22.0",
+    "babel-preset-stage-0": "^6.22.0"
+  }
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default class Async extends React.Component {
+  componentWillMount = () => {
+    this.props.load.then((c) => { this.C = c; this.forceUpdate() })
+  }
+
+  render = () => this.C ? <this.C.default /> : null
+}
+
+Async.propTypes = {
+  load: React.PropTypes.instanceOf(Promise).isRequired,
+}
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "presets": ["es2015", "react", "stage-0"],`
	`3`	`+}`