Render 404.html on static build

README.md

@@ -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
 

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) => {

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 }) => (