Automatic registeration of page layouts

[MoOx]

Easy!

import React, { Component } from "react"
import { Route } from "react-router"

import AppContainer from "../components/AppContainer"
import PhenomicPageContainer from "phenomic/lib/PageContainer"

/* ! HERE IS THE TRICK */
const reqLayouts = require.context("../layouts", true, /\/index\.js$/)
const layouts = reqLayouts.keys().reduce((layouts, layout) => ({
  ...layouts,
  [layout.replace("./", "").replace("/index.js", "")]:
    reqLayouts(layout).default,
}), {})
/* ! */

class PageContainer extends Component {
  render() {
    const { props } = this
    return (
      <PhenomicPageContainer
        { ...props }
        layouts={ layouts }
      />
    )
  }
}

export default (
  <Route component={ AppContainer }>
    <Route path="*" component={ PageContainer } />
  </Route>
)

We should add this in the default theme and also try to reduce this code, maybe using a function that accept the "reqLayouts". An issue might be the context that will be used for the require (same thing as the hot reload for markdown...)

[thangngoc89]

Can we force users to use web_modules/layouts as layouts location ? This would eliminate a lots of unneeded code in the boilerplate

[MoOx]

We could highly recommend, but nothing should be mandatory. Especially file tree, which is likely to be adjusted depending on the need, context, legacy etc...
But I am not even sure that with this restriction, the problem will go away. The require.context usage can be very tricky from my previous tests (for markdown hot loading).

[thangngoc89]

I used require.context a few times and like you said, it's very tricky.

[DavidWells]

I like the idea. =)

I wanted this originally but realized that it might be limiting for people who want custom file directories.

Maybe if you make that trick an optional phenomic util people can use?

[bloodyowl]

Going to be fixed with #925 (moving to user-land)