0.10.0
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 passlayouts
in theroutes
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
andstylelint-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).
- A topbar via
-
Added: link to 404 and loading page in the footer, so new users can see and
try those easily.