MoOx/phenomic 0.10.0

on GitHub

tl;dr;

• You can safely update from statinamic to phenomic without any changes in your
  code except renaming the "S|statinamic" references (see instructions below).
• Only one major breaking change, but previous method will probably still be
  supported until 1.0
• More stuff in the default boilerplate (404, loading...)

→ Example of update from statinamic 0.9 to phenomic 0.10

Details

• Changed: project has been renamed due to a possible confusion with a PHP CMS
  called statamic.
  Read more.
  For an easy migration, you can simply run the following commands

  $ npm remove --save-dev statinamic
  $ npm install --save-dev phenomic
  $ find . -type f \( -iname \*.js -o -iname \*.json \) -not \( -path './.git/*' -o -path './node_modules/*' \) \
    -exec sed -i '' 's|Statinamic|Phenomic|g' {} \;
  $ find . -type f \( -iname \*.js -o -iname \*.json \) -not \( -path './.git/*' -o -path './node_modules/*' \) \
    -exec sed -i '' 's|statinamic|phenomic|g' {} \;

  If you want to double check what files will be changed, just run

  $ find . -type f \( -iname \*.js -o -iname \*.json \) -not \( -path './.git/*' -o -path './node_modules/*' \)

  This will look for S|statinamic occurence and will replace it by P|phenomic in
  all .js and .json files that are not in .git or in node_modules.

• Changed: layouts should not be defined in build and client scripts
  anymore. This method will be deprecated in a future version.
  Instead please directly pass layouts in the routes definitions with a
  HoC.
  What are HoC? Higher order Component, more about this:

  • https://medium.com/@bloodyowl/the-provider-and-higher-order-component-patterns-with-react-d16ab2d1636
  • http://jamesknelson.com/structuring-react-applications-higher-order-components/
  • http://natpryce.com/articles/000814.html

  Here is an example (based on the default boilerplate):

  import React, { Component } from "react"
  import { Route } from "react-router"
  
  import LayoutContainer from "../LayoutContainer"
  import PhenomicPageContainer from "phenomic/lib/PageContainer"
  
  import Page from "../layouts/Page"
  import PageError from "../layouts/PageError"
  import PageLoading from "../layouts/PageLoading"
  import Homepage from "../layouts/Homepage"
  
  class PageContainer extends Component {
    render() {
      const { props } = this
      return (
        <PhenomicPageContainer
          { ...props }
          layouts={ {
            Page,
            PageError,
            PageLoading,
            Homepage,
          } }
        />
      )
    }
  }
  
  export default (
    <Route component={ LayoutContainer }>
      <Route path="*" component={ PageContainer } />
    </Route>
  )

  You should take a new look to the default boilerplate.

• Added: Use node-portfinder to avoid error when port is used
  (#320)

Boilerplate

• Fixed: PageError warning about missing PropTypes
  (#357).

• Changed: Bump css-loader to ^0.23.0. This may improve performance a little bit
  (#374)

• Changed: PageError is nicer and now looks like documentation 404.

• Changed: Production build now produces short CSS classnames. You should apply this
  change for a smaller HTML file.
  (#385)

• Changed: upgrade of stylelint and stylelint-config-standard
  to latest 5.x versions

• Added: a PageLoading component is now provided and include 2 indicators:

  • A topbar via
    react-topbar-progress-indicator.
  • A simple CSS loading spinner.

  (#182).

• Added: link to 404 and loading page in the footer, so new users can see and
  try those easily.