mirror of
https://github.com/c8r/x0.git
synced 2024-10-26 23:21:46 +03:00
Spike out basic react-loadable support
This commit is contained in:
parent
d882cad251
commit
a571929475
1
.gitignore
vendored
1
.gitignore
vendored
@ -5,3 +5,4 @@ site
|
||||
coverage
|
||||
.nyc_output
|
||||
test/output
|
||||
TMP
|
||||
|
6
.npmignore
Normal file
6
.npmignore
Normal file
@ -0,0 +1,6 @@
|
||||
TMP
|
||||
coverage
|
||||
.nyc_output
|
||||
test/output
|
||||
docs
|
||||
examples
|
10
docs/App.js
10
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>
|
||||
|
@ -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>
|
@ -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')
|
||||
|
@ -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 = {}) => {
|
||||
|
@ -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 }
|
||||
}
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user