mirror of
https://github.com/c8r/x0.git
synced 2024-10-26 15:15:04 +03:00
Render 404.html on static build
This commit is contained in:
parent
4753a14586
commit
801cf519d5
@ -370,7 +370,7 @@ See the [example](https://github.com/c8r/x0/tree/master/examples/webpack-config)
|
||||
|
||||
- [ ] changelog/docs
|
||||
|
||||
- [ ] static 404 output
|
||||
- [x] static 404 output
|
||||
- [x] 404
|
||||
- [x] Sidebar minHeight/pagination
|
||||
- [x] Sidebar hidePagination option
|
||||
@ -401,4 +401,5 @@ See the [example](https://github.com/c8r/x0/tree/master/examples/webpack-config)
|
||||
- .jsx imports/scope
|
||||
- .jsx props
|
||||
- custom app path option (must be `_app.js`) (undocumented)
|
||||
- Remove support for glamor and glamorous
|
||||
|
||||
|
36
lib/build.js
36
lib/build.js
@ -44,7 +44,6 @@ const getApp = opts => {
|
||||
|
||||
const STYLED_COMPONENTS_VERSION = '>=3.0'
|
||||
const EMOTION_VERSION = '>=9.0'
|
||||
const GLAMOR_VERSION = '>=2.0'
|
||||
|
||||
const getCSSLibrary = opts => {
|
||||
if (opts.cssLibrary) return opts.cssLibrary
|
||||
@ -63,11 +62,6 @@ const getCSSLibrary = opts => {
|
||||
if (!semver.satisfies(emotionVersion, EMOTION_VERSION)) return null
|
||||
return 'emotion'
|
||||
}
|
||||
if (deps.glamor) { // || deps.glamorous) {
|
||||
const glamorVersion = semver.coerce(deps.glamor)
|
||||
if (!semver.satisfies(glamorVersion, GLAMOR_VERSION)) return null
|
||||
return 'glamor'
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
@ -88,10 +82,7 @@ const renderHTML = ({
|
||||
const { ServerStyleSheet } = require('styled-components')
|
||||
const sheet = new ServerStyleSheet()
|
||||
html = render(
|
||||
sheet.collectStyles(
|
||||
app
|
||||
// React.createElement(App.default, { routes, path })
|
||||
)
|
||||
sheet.collectStyles(app)
|
||||
)
|
||||
css = sheet.getStyleTags()
|
||||
break
|
||||
@ -101,15 +92,6 @@ const renderHTML = ({
|
||||
render(app)
|
||||
)
|
||||
break
|
||||
case 'glamor':
|
||||
// doesn't seem to be working...
|
||||
const glamor = require('glamor/server')
|
||||
const res = glamor.renderStatic(() => (
|
||||
render(app)
|
||||
))
|
||||
html = res.html
|
||||
css = `<style>${res.css}</style>`
|
||||
break
|
||||
default:
|
||||
html = render(app)
|
||||
break
|
||||
@ -210,6 +192,22 @@ module.exports = async (opts) => {
|
||||
})
|
||||
)
|
||||
})
|
||||
// 404
|
||||
config.plugins.push(
|
||||
new MiniHTMLWebpackPlugin({
|
||||
filename: '404.html',
|
||||
template,
|
||||
context: Object.assign({}, opts,
|
||||
renderHTML({
|
||||
opts,
|
||||
routes,
|
||||
App,
|
||||
props: {},
|
||||
path: '/404'
|
||||
})
|
||||
)
|
||||
})
|
||||
)
|
||||
const compiler = webpack(config)
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
|
12
src/entry.js
12
src/entry.js
@ -35,7 +35,6 @@ const getComponents = req => req.keys()
|
||||
module: req(key),
|
||||
Component: req(key).default || req(key),
|
||||
}))
|
||||
.filter(component => !/404/.test(component.name))
|
||||
.filter(component => typeof component.Component === 'function')
|
||||
|
||||
const initialComponents = getComponents(req)
|
||||
@ -45,8 +44,6 @@ const DefaultApp = props => props.children
|
||||
const Router = IS_CLIENT ? BrowserRouter : StaticRouter
|
||||
const appPath = req.keys().find(key => key === './_app.js')
|
||||
const App = appPath ? (req(appPath).default || req(appPath)) : DefaultApp
|
||||
const notFoundPath = req.keys().find(key => /404/.test(key))
|
||||
const NotFound = notFoundPath ? (req(notFoundPath).default) : FileList
|
||||
|
||||
export const getRoutes = async (components = initialComponents) => {
|
||||
const promises = await components.map(async ({
|
||||
@ -88,11 +85,14 @@ export const getRoutes = async (components = initialComponents) => {
|
||||
}
|
||||
})
|
||||
const routes = await Promise.all(promises)
|
||||
const filtered = routes.filter(r => !r.props.ignore)
|
||||
const filtered = routes
|
||||
.filter(r => !r.props.ignore)
|
||||
.filter(component => !/404/.test(component.name))
|
||||
let sorted = [...filtered]
|
||||
sorted = sortBy([...sorted], a => a.name)
|
||||
sorted = sortBy([...sorted], a => !a.exact)
|
||||
sorted = sortBy([...sorted], a => a.dirname)
|
||||
sorted.notfound = routes.find(component => /404/.test(component.name))
|
||||
return sorted
|
||||
}
|
||||
|
||||
@ -119,6 +119,10 @@ export default class Root extends React.Component {
|
||||
path = '/'
|
||||
} = this.props
|
||||
|
||||
const NotFound = routes.notfound
|
||||
? routes.notfound.Component
|
||||
: FileList
|
||||
|
||||
const render = appProps => (
|
||||
<Switch>
|
||||
{routes.map(({ Component, ...route }) => (
|
||||
|
Loading…
Reference in New Issue
Block a user