HomeflowJS

JavaScript/React toolkit for Homeflow themes.

This project uses Yarn to manage dependencies. Run yarn to install them.

Usage

Please see the HomeflowJS developer documentation for instructions on usage.

Local Development

To work on this package locally, use yarn link to link the theme directly to your local copy of homeflowjs (or just specify file:~/projects/homeflowjs in the theme's package.json file).

Make sure you have cache disabled in Webpack or your changes to HomeflowJS may not be updated locally. You can set this in your Webpack config in whichever theme you are using for testing:

"cache": false

Quality Assurance

To get changes made in a branch of HomeflowJS deployed to a theme feature branch, change the package.json line for HomeflowJS to:

 "homeflowjs": "git+ssh://[email protected]:homeflow_developers/homeflowjs.git#<<<branch-name-here>>>",

After the change has been made push the feature branch and wait for the branch code to be compiled.

Tests

Run tests:

# Run all tests
yarn test

# run tests in a specific file
yarn test search/search-form/property-search.test.js

HomeflowJS does not have react or react-dom as dependencies, only peer dependencies. This is to prevent conflicts with the version of these libraries in the theme, but it means you may see an error message when you run tests locally:

Cannot find module 'react' from 'node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js'

To prevent this error, you can use yarn link to create a symlink to a copy of the libraries elsewhere on your machine (like in the node_modules/ dirctory of a theme). After running yarn link in each module's location, run this in this directory:

yarn link react redux react-redux react-router-dom

When you want to run a theme locally using your local version of homeflowjs, you may need to unlink the packages using e.g. yarn unlink react (otherwise you may see an error about hooks and multiple copies of react).

$ cd ctesius/app/liquid_templates/my_theme/node_modules/react # wherever the theme is located
$ yarn link
$ cd ~/projects/homeflowjs # wherever homeflowjs is located
$ yarn link react
success Using linked package for "react".

You may need to repeat this for react-dom.

This is a known issue with peer dependencies, see this comment and containing thread for more info: https://github.com/facebook/react/issues/14257#issuecomment-439967377

Deploy

To create a new version of HomeflowJS when merging to master, keep an eye on the Jenkins build, it pauses and waits for publish confirmation where you can enter the new version number and publish.