Merge pull request #704 from Financial-Times/development

Release v0.6.0

.circleci/config.yml

@@ -8,7 +8,7 @@ references:
   container_config_node: &container_config_node
     working_directory: ~/project/build
     docker:
-      - image: circleci/node:10.18-browsers
+      - image: circleci/node:12.14-browsers
 
   workspace_root: &workspace_root
     ~/project

changelog.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.6.0
+
+- JS build plugin: (_breaking change_) Removed `enableRequireDefault` option
+- Sass build plugin: (_breaking change_) Disabled the `webpackImporter` option for `sass-loader` and added an option to re-enable it
+- Handlebars package: Added a new `{{#renderReactComponent}}` helper to aid JSX and Handlebars interoperability
+- App context middleware: Added `pageKitVersion` property to app context data
+- Assets middleware: (_breaking change_) replaced by `dotcom-middleware-asset-loader` package
+- Navigation middleware: Added a new `getCurrentPath` option
+- Header UI component: Added a new `showLogoLink` option
+- (_breaking change_) Node v12 is now the minimum supported version
+- (_breaking change_) Removed the unused resource hints package
+- (_breaking change_) We recommend switching the `dom-loaded` package for `ready-state`
+
+Please refer to the [0.5.x to 0.6.x migration guide](https://github.com/Financial-Times/dotcom-page-kit/wiki/Upgrading-from-0.5.x-to-0.6.x) for more details.
+
 ## 0.5.8
 
 - Asset loader package: Fixed issue with concatenation of absolute URLs when used as the `publicPath`

contribution.md

@@ -7,7 +7,7 @@ So you'd like to contribute some code, report a bug, or request a feature? You'r
   - [Opening a Pull Request](#opening-a-pull-request)
   - [Code Style](#code-style)
   - [Testing](#testing)
-  - [Releasing/Versioning](#releasingversioning)
+  - [Releasing and versioning](#releasing-and-versioning)
 
 
 ## Reporting bugs
@@ -54,13 +54,13 @@ It's important to note that we can't accept _every_ feature request, we'll alway
 Please do! All of the code in Page Kit is peer-reviewed by members of the FT customer products team. Here are some things you can do to help this review go smoothly:
 
   - ### Discuss features first
-    If you're thinking of opening a pull request that adds a feature, you'll save yourself some time and effort if you [discuss it in a feature request first](#requesting-features). The review is guaranteed to go more smoothly if we've chatted about it beforehand.
+    If you're thinking of opening a pull request that adds a feature, you'll save yourself some time and effort if you [discuss it in a feature request first](#requesting-features) or contact the team on Slack (via the `#dotcom-page-kit` channel. The review is guaranteed to go more smoothly if we've chatted about it beforehand.
 
   - ### Check the workflow and release guidelines
     The project follows a scheduled release workflow so we encourage the separation of stable, development, and experimental code. See the [Git workflow](#git-workflow) and the [release guidelines](release-guidelines.md) for more information.
 
   - ### Update the documentation
-    The user documentation should be kept up to date with any changes made. Use inline code comments as developer documentation, focusing more on _why_ your code does something than _what_ it's doing.
+    The user documentation must be kept up to date with any changes made. Use inline code comments as developer documentation, focusing more on _why_ your code does something than _what_ it's doing.
 
   - ### Avoid hacks or temporary workarounds
     The stability of Page Kit is vital for it to be successful and sustainable. As well as maintaining quality it is important to consider that applications can have very different lifespans; a "quick hack" may remain in production for several months longer than it is required. If you need a hack try to keep it in your app!
@@ -79,11 +79,14 @@ Please do! All of the code in Page Kit is peer-reviewed by members of the FT cus
 
 This project follows a workflow designed around project releases. It is less strict than [Gitflow] but we encourage the separation of stable, development, and experimental branches in order to follow a scheduled release cycle.
 
-- The `master` branch is for the current stable release. Bugfixes are merged into this branch.
-- The `development` branch is for upcoming major or minor releases. This branch tracks `master` and new features are merged into it.
-- Branches for new features should track and raise pull requests against the `development` branch or `master` branch if there are not any upcoming releases planned.
+- The `master` branch is for the current stable release. Bug fixes should be merged into this branch.
+
+- The `development-` branches are for upcoming major or minor releases. New features and refactors should be merged into this branch. The `master` branch should be merged into it periodically.
+
+- The `release-vX.X.X` branches are for old releases which are still used in production. Important bug fixes should be [cherry-picked] from the `master` branch as required.
 
 [Gitflow]: https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow
+[cherry-picked]: https://git-scm.com/docs/git-cherry-pick
 
 
 ## Code style
@@ -97,7 +100,7 @@ The best way to ensure you stick to the Page Kit code style is to make your work
 
   - 2 spaces for indentation
   - 100 characters per line
-  - Avoid abbreviating names (`request` is better than `req`)
+  - Avoid abbreviating names (e.g. `request` is better than `req`)
 
 ### JavaScript style
 
@@ -117,7 +120,24 @@ The best way to ensure you stick to the Page Kit code style is to make your work
 
 ## Testing
 
-We use [Jest] for testing packages. We enforce code quality with [ESLint].
+We use [Jest] as the test runner and assertion library for all code. To run tests for all packages in the repository use the command `npm test` or to run tests only for an individual package the command is `npm test -- --testPathPattern <package name>`.
+
+The applications in the `examples/` folder are all used as integration tests which are always run on CI. You can run the integration tests locally using the `npm test:examples` command. Integration tests may use [Supertest] or [Puppeteer].
+
+Components are rendered in tests using [Enzyme] with specific assertions provided by the [enzyme-matchers] library for Jest.
+
+Code style is enforced with Prettier and non-compliant code should be automatically formatted when committing.
+
+We have implemented [ESLint] to statically analyse code for problems.
 
 [Jest]: https://jestjs.io/
+[Supertest]: https://github.com/visionmedia/supertest
+[Puppeteer]: https://github.com/smooth-code/jest-puppeteer
+[Enzyme]: https://github.com/airbnb/enzyme
+[enzyme-matchers]: https://github.com/FormidableLabs/enzyme-matchers/blob/master/packages/jest-enzyme
 [ESLint]: https://eslint.org/
+
+
+## Releasing and versioning
+
+Please refer to [the release guidelines](release-guidelines.md).

examples/ft-ui/client/main.js

@@ -1,6 +1,6 @@
-import domLoaded from 'dom-loaded'
+import readyState from 'ready-state'
 import * as layout from '@financial-times/dotcom-ui-layout'
 
-domLoaded.then(() => {
+readyState.domready.then(() => {
   layout.init()
 })

examples/ft-ui/package.json

@@ -20,11 +20,11 @@
     "sucrase": "^3.10.1"
   },
   "devDependencies": {
-    "@financial-times/dotcom-page-kit-cli": "file:../../packages/dotcom-page-kit-cli",
     "@financial-times/dotcom-build-bower-resolve": "file:../../packages/dotcom-build-bower-resolve",
     "@financial-times/dotcom-build-js": "file:../../packages/dotcom-build-js",
     "@financial-times/dotcom-build-sass": "file:../../packages/dotcom-build-sass",
-    "dom-loaded": "^1.2.0",
-    "nodemon": "^1.18.9"
+    "@financial-times/dotcom-page-kit-cli": "file:../../packages/dotcom-page-kit-cli",
+    "nodemon": "^1.18.9",
+    "ready-state": "^2.0.5"
   }
 }

examples/ft-ui/page-kit.config.js

@@ -6,8 +6,17 @@ const js = require('@financial-times/dotcom-build-js')
 module.exports = {
   plugins: [
     bower.plugin(),
-    sass.plugin({ includePaths: [path.resolve('../../bower_components')] }),
-    js.plugin(),
+    sass.plugin({
+      // Enabling webpackImporter because Sass itself can only resolve partial files based on the
+      // CWD and not relative to the current file being processed. This means Sass can't find the
+      // nested dependencies created when symlinking.
+      webpackImporter: true,
+      includePaths: [
+        // All Bower components are installed at the repo root
+        path.resolve('../../bower_components')
+      ]
+    }),
+    js.plugin()
   ],
   settings: {
     build: {

examples/kitchen-sink/client/main.js

@@ -1,11 +1,11 @@
-import domLoaded from 'dom-loaded'
+import readyState from 'ready-state'
 import * as flags from '@financial-times/dotcom-ui-flags'
 import * as layout from '@financial-times/dotcom-ui-layout'
 import * as appContext from '@financial-times/dotcom-ui-app-context'
 import * as tracking from '@financial-times/n-tracking'
 import * as ads from '@financial-times/n-ads'
 
-domLoaded.then(() => {
+readyState.domready.then(() => {
   const flagsClient = flags.init()
   const appContextClient = appContext.init()
 

examples/kitchen-sink/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@financial-times/dotcom-middleware-app-context": "file:../../packages/dotcom-middleware-app-context",
-    "@financial-times/dotcom-middleware-assets": "file:../../packages/dotcom-middleware-assets",
+    "@financial-times/dotcom-middleware-asset-loader": "file:../../packages/dotcom-middleware-asset-loader",
     "@financial-times/dotcom-middleware-navigation": "file:../../packages/dotcom-middleware-navigation",
     "@financial-times/dotcom-ui-app-context": "file:../../packages/dotcom-ui-app-context",
     "@financial-times/dotcom-ui-flags": "file:../../packages/dotcom-ui-flags",
@@ -32,8 +32,8 @@
     "@financial-times/dotcom-build-code-splitting": "file:../../packages/dotcom-build-code-splitting",
     "@financial-times/dotcom-build-sass": "file:../../packages/dotcom-build-sass",
     "@sucrase/jest-plugin": "^2.0.0",
-    "dom-loaded": "^1.2.0",
-    "nodemon": "^1.18.9"
+    "nodemon": "^1.18.9",
+    "ready-state": "^2.0.5"
   },
   "jest": {
     "transform": {

examples/kitchen-sink/page-kit.config.js

@@ -8,8 +8,17 @@ module.exports = {
   plugins: [
     codeSplitting.plugin(),
     bower.plugin(),
-    sass.plugin({includePaths: [path.resolve('../../bower_components')]}),
-    js.plugin(),
+    sass.plugin({
+      // Enabling webpackImporter because Sass itself can only resolve partial files based on the
+      // CWD and not relative to the current file being processed. This means Sass can't find the
+      // nested dependencies created when symlinking.
+      webpackImporter: true,
+      includePaths: [
+        // All Bower components are installed at the repo root
+        path.resolve('../../bower_components')
+      ]
+    }),
+    js.plugin()
   ],
   settings: {
     build: {

examples/kitchen-sink/server/app.js

@@ -1,7 +1,7 @@
 const express = require('express')
 const navigation = require('@financial-times/dotcom-middleware-navigation')
 const appContext = require('@financial-times/dotcom-middleware-app-context')
-const assets = require('@financial-times/dotcom-middleware-assets')
+const assets = require('@financial-times/dotcom-middleware-asset-loader')
 
 const app = express()
 

examples/kitchen-sink/server/controllers/home.js

@@ -7,21 +7,15 @@ const { Slot, AdsOptionsEmbed } = require('@financial-times/n-ads')
 module.exports = (_, response, next) => {
   try {
     const flags = { ads: true, tracking: true }
-    const { appContext, assets } = response.locals
+    const { appContext, assetLoader } = response.locals
     const styleBundles = [
-      ...assets.loader.getStylesheetURLsFor('page-kit-layout-styles'),
-      ...assets.loader.getStylesheetURLsFor('styles')
+      ...assetLoader.getStylesheetURLsFor('page-kit-layout-styles'),
+      ...assetLoader.getStylesheetURLsFor('styles')
     ]
-    const asyncStyleBundles = assets.loader.getStylesheetURLsFor('async')
-    const scriptBundles = assets.loader.getScriptURLsFor('scripts')
+    const asyncStyleBundles = assetLoader.getStylesheetURLsFor('async')
+    const scriptBundles = assetLoader.getScriptURLsFor('scripts')
     const forHints = [...scriptBundles, ...styleBundles]
 
-    forHints.forEach((file) => {
-      assets.resourceHints.add(file)
-    })
-
-    response.set('Link', assets.resourceHints.toString())
-
     const adOptions = {
       ...appContext.data,
       dfp_site: 'ft.com',

package.json

@@ -18,7 +18,6 @@
     "bower:install": "npm run bower:link && bower install",
     "postinstall": "athloi exec npm i -- --no-package-lock && npm run bower:install",
     "prettier": "prettier --write '**/*.{ts,tsx,js,jsx,json}'",
-    "script:update": "node scripts/update-dep",
     "storybook": "npm run storybook:config && npm run storybook:start",
     "storybook:ci": "npm run storybook:config && npm run storybook:start:ci",
     "storybook:config": "node scripts/generate-storybook-config",
@@ -48,11 +47,11 @@
     "@babel/core": "^7.8.0",
     "@babel/preset-react": "^7.8.0",
     "@babel/preset-typescript": "^7.8.0",
-    "@financial-times/athloi": "^1.0.0-beta.17",
-    "@storybook/addon-knobs": "^5.3.1",
-    "@storybook/addon-options": "^5.3.1",
-    "@storybook/addon-viewport": "^5.3.1",
-    "@storybook/react": "^5.3.1",
+    "@financial-times/athloi": "^1.0.0-beta.28",
+    "@storybook/addon-knobs": "^5.3.12",
+    "@storybook/addon-options": "^5.3.12",
+    "@storybook/addon-viewport": "^5.3.12",
+    "@storybook/react": "^5.3.12",
     "@types/jest": "^25.0.0",
     "@types/node": "^10.12.26",
     "@types/react": "^16.8.20",
@@ -84,7 +83,7 @@
     "typescript": "^3.5.1"
   },
   "engines": {
-    "node": ">= 10.13.0"
+    "node": ">= 12.0.0"
   },
   "husky": {
     "hooks": {

packages/dotcom-build-bower-resolve/package.json

@@ -24,7 +24,7 @@
     "bower-resolve-webpack-plugin": "^1.0.5"
   },
   "engines": {
-    "node": ">= 8.16.0"
+    "node": ">= 12.0.0"
   },
   "repository": {
     "type": "git",

packages/dotcom-build-code-splitting/package.json

@@ -21,15 +21,16 @@
     "@financial-times/dotcom-page-kit-cli": "file:../dotcom-page-kit-cli"
   },
   "dependencies": {
-    "get-package-name": "^1.0.0",
+    "disable-tree-shaking-for-chunk-plugin": "^1.1.0",
+    "get-package-name": "^1.1.0",
     "memoize-one": "^5.0.4",
     "reliable-module-ids-plugin": "^1.0.1"
   },
   "devDependencies": {
     "@financial-times/dotcom-page-kit-cli": "file:../dotcom-page-kit-cli"
   },
   "engines": {
-    "node": ">= 8.16.0"
+    "node": ">= 12.0.0"
   },
   "repository": {
     "type": "git",