feat: add tiny-react-loadable

framework/react/react-loadable/README.md

@@ -0,0 +1,35 @@
+# tiny-react-loadable
+
+## Usage
+
+```js
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import Loadable from 'tiny-react-loadable'
+
+const Loading = ({ error, ...props }) => {
+  if (error) {
+    return (
+      <div>
+        There is some error when loading the component
+      </div>
+    )
+  }
+  return (
+    <div>
+      Loading...
+    </div>
+  )
+}
+
+const LoadableComponent = Loadable({
+  loader: () => import('./MyComponent'),
+  loading: Loading,
+  render: (LoadableComponent, props) =>
+    <LoadableComponent name="tiny-react-loadable" {...props} />
+})
+
+ReactDOM.render(
+  <LoadableComponent />
+, document.getElementById('root'))
+```

framework/react/react-loadable/index.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+
+function Loadable({
+  loader,
+  loading,
+  render,
+  ...rest
+}) {
+  return class WrappedComponent extends Component {
+    state = {
+      component: null,
+      error: null
+    }
+
+    componentWillMount() {
+      loader().then((component) => {
+        this.setState({ component })
+      }).catch((error) => {
+        this.setState({ error })
+      })
+    }
+
+    render() {
+      const { component: C, error } = this.state
+
+      if (!C || error) {
+        return <Loading loading={!!C} error={error} />
+      }
+
+      const customRender = render || (Component, props) => {
+        return React.createElement(Component, props)
+      }
+
+      return customRender(C, this.props)
+    }
+  }
+}
+
+module.exports = Loadable

framework/react/react-loadable/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "tiny-react-loadable",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT"
+}