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 x0

x0

Zero-config React development environment and static site generator
v3.0.0
npm install @compositor/x0
Get Started
Read the docs and get started on GitHub or sign up for updates.
Documentation
© 2017 Compositor, Inc.
- - +

x0

Zero-config React development environment and static site generator
v3.0.4
npm install @compositor/x0
Get Started
Read the docs and get started on GitHub or sign up for updates.
Documentation
© 2017 Compositor, Inc.
\ 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",