diff --git a/.gitignore b/.gitignore
index 1eab42f..af9fb80 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ site
coverage
.nyc_output
test/output
+TMP
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..a545358
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,6 @@
+TMP
+coverage
+.nyc_output
+test/output
+docs
+examples
diff --git a/docs/App.js b/docs/App.js
index 884a9f4..ab23bcf 100644
--- a/docs/App.js
+++ b/docs/App.js
@@ -1,5 +1,7 @@
import React from 'react'
import connect from 'refunk'
+import Loadable from 'react-loadable'
+
import pkg from '../package.json'
import Style from './Style'
import Flex from './Flex'
@@ -12,10 +14,16 @@ import Pre from './Pre'
import BlockLink from './BlockLink'
import NavLink from './NavLink'
import Title from './Title'
-import Video from './Video'
import Btn from './Btn'
import BtnOutline from './BtnOutline'
+const loading = () =>
loading...
+
+const Video = Loadable({
+ loading,
+ loader: () => import('./Video')
+})
+
const App = connect(props =>
{props.title}
diff --git a/docs/index.html b/docs/index.html
index 7e8bb89..d65d5df 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,7 +1,4 @@
-
-
-
-Compositor x0npm install @compositor/x0
Get Started
Read the docs and get started on GitHub or sign up for updates.
Documentation
-
-
+npm install @compositor/x0
Get Started
Read the docs and get started on GitHub or sign up for updates.
Documentation
\ No newline at end of file
diff --git a/lib/dev/index.js b/lib/dev/index.js
index 7656311..47b59fc 100644
--- a/lib/dev/index.js
+++ b/lib/dev/index.js
@@ -7,7 +7,12 @@ require('babel-register')({
}],
require.resolve('babel-preset-stage-0'),
require.resolve('babel-preset-react')
- ]
+ ],
+ plugins: [
+ 'react-loadable/babel',
+ 'babel-plugin-syntax-dynamic-import',
+ 'babel-plugin-dynamic-import-node',
+ ].map(require.resolve)
})
const path = require('path')
const webpack = require('webpack')
diff --git a/lib/static/client.js b/lib/static/client.js
index e3ff144..3d466d7 100644
--- a/lib/static/client.js
+++ b/lib/static/client.js
@@ -1,6 +1,7 @@
const path = require('path')
const webpack = require('webpack')
const MinifyPlugin = require('babel-minify-webpack-plugin')
+const { ReactLoadablePlugin } = require('react-loadable/webpack')
const config = {
// mode: 'production',
@@ -40,7 +41,11 @@ const config = {
node: {
fs: 'empty'
},
- plugins: []
+ plugins: [
+ new ReactLoadablePlugin({
+ filename: path.join(__dirname, './TMP/react-loadable.json'),
+ })
+ ]
}
module.exports = (filename, options = {}) => {
diff --git a/lib/static/index.js b/lib/static/index.js
index 322d1ad..d3ea7d5 100644
--- a/lib/static/index.js
+++ b/lib/static/index.js
@@ -7,12 +7,21 @@ require('babel-register')({
}],
require.resolve('babel-preset-stage-0'),
require.resolve('babel-preset-react')
- ]
+ ],
+ plugins: [
+ 'react-loadable/babel',
+ 'babel-plugin-syntax-dynamic-import',
+ 'babel-plugin-dynamic-import-node',
+ ].map(require.resolve)
})
+
const fs = require('fs')
const path = require('path')
const React = require('react')
const { renderToString, renderToStaticMarkup } = require('react-dom/server')
+const Loadable = require('react-loadable')
+const { getBundles } = require('react-loadable/webpack')
+
const client = require('./client')
const getCSS = require('./getCSS')
@@ -32,9 +41,15 @@ const createHTML = ({
const propsScript = initialProps =>
initialProps ? `` : ''
+const modules = []
+
const render = (Component, props, isStatic) =>
(isStatic ? renderToStaticMarkup : renderToString)(
- React.createElement(Component, props)
+ React.createElement(Loadable.Capture, {
+ report: mod => modules.push(mod)
+ },
+ React.createElement(Component, props)
+ )
)
const renderHTML = async (Component, options) => {
@@ -48,8 +63,19 @@ const renderHTML = async (Component, options) => {
const initialProps = await getProps(Object.assign({ Component }, options))
const props = Object.assign({}, options, initialProps)
+ const preloaded = await Loadable.preloadAll()
const body = render(Component, props, isStatic)
+ const loadableStats = require('./TMP/react-loadable.json')
+ const bundles = isStatic ? [] : getBundles(loadableStats, modules)
+ .map(bundle => bundle.file)
+ .map(src => base + '/' + src)
+
+ const scripts = isStatic ? [] : [
+ script,
+ ...bundles
+ ]
+
let css = ''
if (props.cssLibrary) {
css = getCSS(Component, props)
@@ -59,7 +85,7 @@ const renderHTML = async (Component, options) => {
body,
css,
initialProps: isStatic ? null : props,
- scripts: isStatic ? [] : [ script ]
+ scripts
})
return html
@@ -90,6 +116,8 @@ const createStatic = async (filename, baseOptions) => {
const options = Object.assign({}, Component.defaultProps, baseOptions)
+ const bundle = await client(filename, options)
+
let html
if (options.routes && options.routes.length) {
html = await options.routes.map(async pathname => {
@@ -102,7 +130,6 @@ const createStatic = async (filename, baseOptions) => {
html = await writePage(Component, options)
}
- const bundle = await client(filename, options)
return { html, bundle }
}
diff --git a/package.json b/package.json
index feb85ee..e330327 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
},
"scripts": {
"start": "./bin/cli.js dev docs/App.js -op 8888",
- "build": "./bin/cli.js build docs/App.js --static -d docs",
+ "static": "./bin/cli.js build docs/App.js --static -d docs",
+ "build": "./bin/cli.js build docs/App.js -d docs",
"test": "nyc ava",
"cover": "nyc report --reporter=html --reporter=lcov"
},
@@ -19,6 +20,8 @@
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-minify-webpack-plugin": "^0.2.0",
+ "babel-plugin-dynamic-import-node": "^1.2.0",
+ "babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
@@ -36,6 +39,7 @@
"react-dev-utils": "^4.2.1",
"react-dom": "^16.2.0",
"react-fela": "^6.1.1",
+ "react-loadable": "^5.3.1",
"read-pkg-up": "^2.0.0",
"update-notifier": "^2.2.0",
"webpack": "^3.10.0",