We converted Universal Relay Boilerplate and Rebar to prettier, updated the examples and refactored Chrome and Wrapper for ease of use.

Repository Updates

The Universal Relay Boilerplate and Rebar, now at version 20.1.0.136 have been updated with newer versions of their dependencies. In addition to routine version upgrades, we introduced several new features:

Conversion to Prettier

The entire code base has been converted to prettier, and a prettier git pre-commit hook has been added. This results in more readable code with consistent layout. Here is an example of source code of the GraphQL server before and after the conversion:

In addition to this change, flow has been upgraded and eslint has been removed. If you have an existing URB/Rebar project, you can install the git pre-commit hook by running:

(cd .git/hooks && ln -s -f ../../scripts/pre-commit.sh ./pre-commit)

For newly cloned projects, setup-local will install the hook.

Conversion to per-site Settings

The Chome.jsx and Wrapper.jsx have been modified to support per-site settings. Chome.jsx is shared between the factory and the site, and Wrapper.jsx has two versions - one for site, and another one for factory or standalone projects not using the factory/site configuration. In the new configuration it is possible to have routes that do not reside under chrome directly be placed below the wrapper, without having to re-implement rbContext. Here is the simplified routing scheme of a factory site with designer, list of sites, and properties:

export default createRoutes(
  <Route path="/">

    <Route component={Chrome} queries={queries}>

      <Route path="site-builder-factory" component={RBSBSite_Screen} queries={queries}>
        <IndexRoute component={RBSBSite_List} queries={queries} />
      </Route>

      <Route path="site-builder-factory-properties">
        <Route path=":id">
          <IndexRoute
            component={RBSBSite_Properties}
            queries={queries}
            prepareParams={params => ({ ...params, group: 'root' })}
          />
          <Route path=":group" component={RBSBSite_Properties} queries={queries} />
        </Route>
      </Route>

    </Route>

    <Route path="site-builder-factory-build">
      <Route path=":id" component={RBSB_Designer} queries={queries} />
    </Route>

  </Route>,
)