v3.4.0

v3.4.0

Dependency upgrades

• react-intl: v2.9.0 -> 3.1.13 React Intl was the most problematic to upgrade.

  • Proptype intlShape was removed so we needed to create it again. Because of this, we added a new util/reactIntl.js file. This file is now used to wrap all the react-intl related imports.
  • addLocaleDate function was removed and react-intl library is now relying on native Intl APIs: Intl.PluralRules and Intl.RelativeTimeFormat. In order to support older browsers we needed to add intl-pluralrules and intl-relativetimeformat to util/polyfills.js
  • Also, Node must be now compiled with full-icu which caused changes to start and test
    scripts in package.json. We also needed to add a specific config for nodemon
  • Default textComponentin IntlProvider changed to React.Fragment so we need to explicitly
    set textComponent to span. Otherwise, all the snapshots would have changed and it might
    affect to UI if there are styles added to these spans generally in customization projects.

  Note: FormattedMessage component now supports
  tagName prop and improved rich-text formatting.

  Read more from Upgrade guide for [email protected]

• Updated react, react-test-renderer and react-dom to 16.9.0. After these updates old
  lifecycle methods componentWillMount, componentWillReceiveProps and componentWillUpdate will cause deprecation warnings. Check the updated components from the PR #1172

• Migrate from react-helmet to react-helmet-async, since react-helmet wasn't updated often
  enough and react-helmet-async was supporting React 16+ better. This caused changes to app.js (<HelmetProvider> added) and it changes the way Helmet needs to be imported. #1179

  • import Helmet from 'react-helmet'; vs import { Helmet } from 'react-helmet-async';

• sanitize.css was moved to own file instead of importing it from npm package because updating it accidentally might break the UI.

• react-redux: v5.1.1 -> v7.1.1 Note: connect is now using Hooks.

  • In FTW, app.test.js had to be split to SSR aka node environment tests and client tests since JSDOM environment in Jest doesn't work well with the environment detection hack that react-redux uses internally.

• seedrandom: v2.4.4 -> v3.0.3. (FTW wasn't affected.)

• inquirer: v6.5.0 -> v7.0.0. (They dropped support for Node 6)

• final-form, final-form-arrays, react-final-form and react-final-form-arrays. This forced us to make some code changes:

  • Old recommendation of by-passing default field formatting or parsing isn't accepted anymore
    • format={null} => use identity function instead: format={v => v}
    • parse={null} => use identity function instead: parse={v => v}
  • Final Form passes input props (name, value, onChange, onBlur, etc. ) grouped inside input key
    • those props now include type attribute too.
  • Our old code sometimes used a prop called form as a way to pass id/name of the form to the form. So that if there's a need to add id's to inputs they could be unique ${form}.inputId. This was a bad choice since when we ended up using Final Form (and this newer version of it): they introduced form prop of their own. That form prop is used to pass in formAPI - and if there's form prop passed outside of Final Form, it is used internally as an alternative formAPI. In v3.4.0, we have tried to rename all the remaining old form props as formId.
    If you have created custom forms by copy-pasting code from FTW forms, you should check that the name of the form is not passed in as form but formId. Otherwise, you will get an error: "TypeError: f.pauseValidation is not a function" from Final Form.
  • Note: most of the changes came from react-final-form: 4.0.2 > v5.0.0 -> v6.0.0 -> v6.3.1

• react-dates: v18.5.0 -> v20.3.0

• prettier: v1.17.0 -> v1.18.2

  • Check if you need to format your code: yarn run format

• path-to-regexp: v2.4.0 -> v3.0.0. It is used in create populated paths in our route generation.

• sharetribe-scripts: v3.0.0 -> v3.1.1

  • Remove references to jsx-a11y/href-no-hash for eslint since it didn't exist anymore.

• Sentry: v4.5.1 -> v5.6.2

• Plus minor and patch upgrades for other dependencies too.

Complete Changelog with links to PRs

• [change] Update react-intl to 3.1.13. More information about the changes can be found from
  Upgrade guide for [email protected]
  #1181

  • Proptype intlShape was removed so we needed to create it again. Because of this we added a new
    util/reactIntl.js file. This file is now used to wrap all the react-intl related imports.

  • addLocaleDate function was removed and react-intl library is now relying on native Intl APIs:
    Intl.PluralRules
    and
    Intl.RelativeTimeFormat.
    In order to support older browsers we needed to add intl-pluralrules and
    intl-relativetimeformat to util/polyfills.js

  • Also, Node must be now compiled with full-icu which caused changes to start and test
    scripts in package.json. We also needed to add a specific config for nodemon

  • Default textComponentin IntlProvider changed to React.Fragment so we need to explicitly
    set textComponent to span. Otherwise, all the snapshots would have changed and it might
    affect to UI if there is styles added to these spans generally in customization projects.

    Note: FormattedMessage component now supports tagName prop and improved rich-text formatting.

• [change] Update helmet (v3.20.0 > v3.20.1).
  #1186

• [fix] Lodash vulnerability: enforce newer version for react-google-maps and react-dates
  #1188

  • We enforced a newer version for react-google-maps and react-dates through package.json resolutions

• [change] Update React, react-test-renderer and react-dom to 16.9.0. After these updates old lifecycle methods componentWillMount, componentWillUpdate and componentWillUpdate will cause deprecation warnings. Check the updated components from the PR #1172

• [fix] ProfileSettingsForm: clear correct timeout.
  #1185

• [fix] availabilityPlan prop in EditListingAvailabilityForm was missing.
  #1183

• [fix] Bug fix: valueFromForm prop wasn't passed through different subcomponents.
  #1182

• [add] Update German and French translations.
  #1184

• [change] Migrate from react-helmet to react-helmet-async
  #1179

• [change] Use sanitize.css from own file instead of npm package because updating it accidentally
  might break the UI.
  #1177

• [fix] Change app.test.js after react-redux update
  #1178

• [change] Update react-redux: v5.1.1 -> v7.1.1
  #1176

• [change] Update seedrandom from v2.4.4 to v3.0.3
  #1175

• [change] Update inquirer from v6.5.0 to v7.0.0
  #1174

• [change] Update final-form, final-form-arrays, react-final-form and react-final-form-arrays. This
  forced to make some code changes:
  #1173

  • Old recommendation of by-passing default field formatting or parsin isn't accepted anymore
    • format={null} => use identity function instead: format={v => v}
    • parse={null} => use identity function instead: parse={v => v}
  • Final Form passes input props (name, value, onChange, onBlur, etc. ) grouped inside input key
    • those props now include type attribute too.
  • We had old form naming pattern with prop 'form', which now conflicted with updated Final Form (The 'form' prop was used when Redux-Form was the form library)

• [change] Update react-dates from v18.5.0 to v20.3.0
  #1171

• [change] Update Prettier to v1.18.2
  #1170

• [change] Update path-to-regexp to v3.0.0
  #1169

• [change] Update sharetribe-scripts to v3.1.1
  #1167

• [fix] Small change to remove card tect on SavedCardDetails modal.
  #1166

• [change] Update Sentry (@sentry/browser / @sentry/node) from v4.5.1 to v5.6.2
  #1164

• Update dependecies: all the easily updateable minor and batch updates: array.prototype.find,
  babel-jest, core-js, enzyme (et al.), express, helmet, inquirer, lodash, nodemon, raf, redux,
  source-map-support
  #1163