Spike out basic react-loadable support

2024-10-26 23:21:46 +03:00 · 2018-01-10 16:31:33 -05:00 · 2018-01-10 16:31:33 -05:00 · a571929475
commit a571929475
parent d882cad251
8 changed files with 66 additions and 15 deletions
--- a/.gitignore
+++ b/.gitignore
@ -5,3 +5,4 @@ site
 coverage
 .nyc_output
 test/output
+TMP
--- a/.npmignore
+++ b/.npmignore
@ -0,0 +1,6 @@
+TMP
+coverage
+.nyc_output
+test/output
+docs
+examples
--- 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 = () => <pre>loading...</pre>
+
+const Video = Loadable({
+  loading,
+  loader: () => import('./Video')
+})
+
 const App = connect(props => <React.Fragment>
  <head>
    <title>{props.title}</title>
--- a/docs/index.html
+++ b/docs/index.html
@ -1,7 +1,4 @@
-<!DOCTYPE html>
-<meta charset='utf-8'>
-
-<head><title>Compositor x0</title><meta name="description"/><meta name="twitter:card" content="summary"/><meta name="twitter:site" content="@getcompositor"/><meta name="twitter:title" content="Compositor x0"/><meta name="twitter:description"/><meta name="twitter:image" content="https://compositor.io/logo/dist/compositor-black.png"/><style>
+<!DOCTYPE html><meta charset="utf-8"><head><title>Compositor x0</title><meta name="description"/><meta name="twitter:card" content="summary"/><meta name="twitter:site" content="@getcompositor"/><meta name="twitter:title" content="Compositor x0"/><meta name="twitter:description"/><meta name="twitter:image" content="https://compositor.io/logo/dist/compositor-black.png"/><style>
 *{box-sizing:border-box}
 :root {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
@ -11,6 +8,4 @@
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
 }
-</style></head><div class="nanov6vxax"><nav><div class="nanosx9e3b"><a href="https://compositor.io" class="nanoxi0jei"><div class="nano1u2e98s"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-12 -12 24 24" style="display:block;margin:0" width="32" height="32"><rect x="-12" y="-12" width="24" height="24" fill="white"></rect><rect x="-4" y="-8" width="8" height="16" fill="black"></rect></svg><div class="nano1pdbqw0">Compositor</div><style>.nano1pdbqw0{font-size:10px}.nano1pdbqw0{font-weight:600}.nano1pdbqw0{text-transform:uppercase;letter-spacing:.2em}</style></div><style>.nano1u2e98s{margin-left:-8px}.nano1u2e98s{display:flex}.nano1u2e98s{align-items:center}</style></a><style>.nanoxi0jei{display:block;color:inherit;text-decoration:none}</style><div class="nano1grpzsw"></div><style>.nano1grpzsw{margin-left:auto;margin-right:auto}</style><a href="https://github.com/c8r/x0" class="nanooiywwh">GitHub</a><style>.nanooiywwh{text-decoration:none;display:inline-block;font-weight:bold;text-transform:uppercase;letter-spacing:0.2em;padding:8px;color:inherit}.nanooiywwh{font-size:10px}.nanooiywwh{margin-right:8px}</style></div><style>.nanosx9e3b{display:flex}.nanosx9e3b{align-items:center}.nanosx9e3b{flex-wrap:wrap}</style></nav><header><div class="nano1l7e2jv"><h1 m="0" class="nano150ti37">x0</h1><style>.nano150ti37{font-size:64px;font-weight:600;line-height:1.25}.nano150ti37{margin:0px}</style><div class="nano1uksl6t">Zero-config React development environment and static site generator</div><style>.nano1uksl6t{font-size:20px}.nano1uksl6t{font-weight:600}.nano1uksl6t{margin-bottom:16px}</style><div class="nano1nucgho">v3.0.0</div><style>.nano1nucgho{font-size:12px}.nano1nucgho{font-family:"Roboto Mono", Menlo, monospace}</style></div><style>.nano1l7e2jv{padding-bottom:32px;padding-top:64px}</style></header><main><div class="nano1bykfi2"><video loop="" autoplay="" src="demo.mp4" class="nano5m3rv9"></video><style>.nano5m3rv9{display:block;width:100%;height:auto;margin:0}</style></div><div class="nanoq0vyd3"><pre class="nanorwxul5">npm install @compositor/x0</pre><style>.nanorwxul5{font-family:"Roboto Mono", Menlo, monospace;margin:0;padding:0}.nanorwxul5{font-size:14px}</style></div><style>.nanoq0vyd3{padding-top:32px;padding-bottom:32px}</style><section id="get-started"><div class="nanoq4qa9y"><div class="nano198h2e9">Get Started</div><style>.nano198h2e9{font-size:24px}.nano198h2e9{font-weight:600}</style><div class="nano1m6nlin">Read the docs and get started on GitHub or sign up for updates.</div><style>.nano1m6nlin{margin-bottom:32px}</style><a href="https://github.com/c8r/x0" class="nanop5q5kx">Documentation</a><style>.nanop5q5kx{display:inline-block;text-decoration:none;font-size:12px;font-weight:bold;text-transform:uppercase;letter-spacing:.2em;padding-top:12px;padding-bottom:12px;padding-left:24px;padding-right:24px;color:white;background-color:black;border:0;border-radius:8px}.nanop5q5kx{margin-right:16px}</style></div><style>.nanoq4qa9y{padding-top:64px;padding-bottom:64px}</style></section><footer><div class="nano1dfuwer"><div class="nano1g5hjxy">© 2017 Compositor, Inc.</div><style>.nano1g5hjxy{font-size:12px}</style></div><style>.nano1dfuwer{padding-bottom:32px;padding-top:64px}.nano1dfuwer{display:flex}</style></footer></main></div><style>.nanov6vxax{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}@media screen and (min-width: 40em){.nanov6vxax{padding-left:32px;padding-right:32px}}.nanov6vxax{max-width:768px}</style>
-
-
+</style></head><div class="nanov6vxax"><nav><div class="nanosx9e3b"><a href="https://compositor.io" class="nanoxi0jei"><div class="nano1u2e98s"><div class="nano1pdbqw0">Compositor</div><style>.nano1pdbqw0{font-size:10px}.nano1pdbqw0{font-weight:600}.nano1pdbqw0{text-transform:uppercase;letter-spacing:.2em}</style></div><style>.nano1u2e98s{margin-left:-8px}.nano1u2e98s{display:flex}.nano1u2e98s{align-items:center}</style></a><style>.nanoxi0jei{display:block;color:inherit;text-decoration:none}</style><div class="nano1grpzsw"></div><style>.nano1grpzsw{margin-left:auto;margin-right:auto}</style><a href="https://github.com/c8r/x0" class="nanooiywwh">GitHub</a><style>.nanooiywwh{text-decoration:none;display:inline-block;font-weight:bold;text-transform:uppercase;letter-spacing:0.2em;padding:8px;color:inherit}.nanooiywwh{font-size:10px}.nanooiywwh{margin-right:8px}</style></div><style>.nanosx9e3b{display:flex}.nanosx9e3b{align-items:center}.nanosx9e3b{flex-wrap:wrap}</style></nav><header><div class="nano1l7e2jv"><h1 m="0" class="nano150ti37">x0</h1><style>.nano150ti37{font-size:64px;font-weight:600;line-height:1.25}.nano150ti37{margin:0px}</style><div class="nano1uksl6t">Zero-config React development environment and static site generator</div><style>.nano1uksl6t{font-size:20px}.nano1uksl6t{font-weight:600}.nano1uksl6t{margin-bottom:16px}</style><div class="nano1nucgho">v3.0.4</div><style>.nano1nucgho{font-size:12px}.nano1nucgho{font-family:"Roboto Mono", Menlo, monospace}</style></div><style>.nano1l7e2jv{padding-bottom:32px;padding-top:64px}</style></header><main><div class="nano1bykfi2"><video loop="" autoplay="" src="demo.mp4" class="nano5m3rv9"></video><style>.nano5m3rv9{display:block;width:100%;height:auto;margin:0}</style></div><div class="nanoq0vyd3"><pre class="nanorwxul5">npm install @compositor/x0</pre><style>.nanorwxul5{font-family:"Roboto Mono", Menlo, monospace;margin:0;padding:0}.nanorwxul5{font-size:14px}</style></div><style>.nanoq0vyd3{padding-top:32px;padding-bottom:32px}</style><section id="get-started"><div class="nanoq4qa9y"><div class="nano198h2e9">Get Started</div><style>.nano198h2e9{font-size:24px}.nano198h2e9{font-weight:600}</style><div class="nano1m6nlin">Read the docs and get started on GitHub or sign up for updates.</div><style>.nano1m6nlin{margin-bottom:32px}</style><a href="https://github.com/c8r/x0" class="nanop5q5kx">Documentation</a><style>.nanop5q5kx{display:inline-block;text-decoration:none;font-size:12px;font-weight:bold;text-transform:uppercase;letter-spacing:.2em;padding-top:12px;padding-bottom:12px;padding-left:24px;padding-right:24px;color:white;background-color:black;border:0;border-radius:8px}.nanop5q5kx{margin-right:16px}</style></div><style>.nanoq4qa9y{padding-top:64px;padding-bottom:64px}</style></section><footer><div class="nano1dfuwer"><div class="nano1g5hjxy">© 2017 Compositor, Inc.</div><style>.nano1g5hjxy{font-size:12px}</style></div><style>.nano1dfuwer{padding-bottom:32px;padding-top:64px}.nano1dfuwer{display:flex}</style></footer></main></div><style>.nanov6vxax{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}@media screen and (min-width: 40em){.nanov6vxax{padding-left:32px;padding-right:32px}}.nanov6vxax{max-width:768px}</style>
--- 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')
--- 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 = {}) => {
--- 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 ? `<script id="__initial-props__" type="application/json">${JSON.stringify(initialProps)}</script>` : ''

+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 }
 }
--- 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",