v5 (#861)

* Rhys/declutter (#858)

* deleted myft

* deleted opt out and notification

* general declutter of top level directory

* tidied up removed components from bootstrappers

* moved node -> server

* pally tidy up

* typo

* tidy up deps

* added test assets

* added session client

* fix build problems

* Rhys/await multiple css (#859)

* wip

* mechanism that might actually work

* a bit more feasible for an app to configure it

* slightly less property mangling

* remove withHEadCss option

* removed deprecated nav stuff (#857)

* renamed styles loaded promise

* added build task for css-loader

* fixing a few bugs

* fixed tests

* stubbed failing tests

* memoized stylesheet concatenation

* stop plling for n-ui styles

* cssBundles -> stylesheets

* more comprehensive asset loading tests

* sort out options

* coveralls

* Rhys/component reorg (#865)

* beginnings of reorganising the repo

* fixing demo server

* fixed unit tests

* fixed demo app properly

* fixed pa11y

* nodemon;

* load main.css

* stop loading n-ui-core stylesheet (for now)

* Rhys/restructure2 (#867)

* reorganise to cleaner directory structure

* make build passes

* make run works

* few last build & test tweaks

* pally fix

* Delete template-copy-list.txt

* Update README.md

* tidy demo server

* improved test coverage a bit by cheating

* logging css size

* disable coverage report on tags

* devAdvice

Don't output developer advice for setting NEXT_APP_SHELL if they've already done so.

* disable coverage report on tags

* example v5 upgrade

* WIP - Updated n-webpack to v3.0.0-rc.1 (webpack 2.2.1). Now builds are broken.

* Reverted n-webpack to v2. Whoops, didn't mean to push directly to branch v5

* Fix n-ui local es5 inclusion

* Create README.md

* Fix readme typo

* fixed app build

* more build fixes

* empty commit for npm

* Remove the myFT hint (shhh)

.gitignore

@@ -19,6 +19,7 @@
 key.pem
 key-cert.pem
 /test-page.html
-node/test/fixtures/app/views/partials/stylesheets.html
-node/test/fixtures/bad-assets/.gitignore
+server/test/fixtures/app/views/partials/stylesheets.html
+server/test/fixtures/bad-assets/.gitignore
 /coverage/
+/browser/layout/partials/css-loader.html

.pa11yci.js

@@ -1,8 +1,3 @@
-const chalk = require('chalk');
-const fs = require('fs');
-const path = require('path');
-const error = chalk.bold.red;
-
 const config = {
 	defaults: {
 		timeout: 10000,
@@ -17,66 +12,19 @@ const config = {
 	]
 };
 
-const pa11yIgnore = [
-	'.git',
-	'.idea',
-	'node_modules',
-	'bower_components',
-	'public',
-	'_deploy',
-	'_sass-utils',
-	'_test-server',
-	'ads',
-	'dist',
-	'bin',
-	'build-tools',
-	'js-setup',
-	'myft',
-	'myft-common',
-	'myft-digest-promo',
-	'myft-hint',
-	'n-ui',
-	'node',
-	'notification',
-	'offline-toast',
-	'opt-out',
-	'page-heading',
-	'subscription-offer-prompt',
-	'test',
-	'tour-tip',
-	'tour-tip-group',
-	'tooltip',
-	'tracking',
-	'typeahead',
-	'syndication'
-];
-
-function getDirectories (srcpath) {
-	return fs.readdirSync(srcpath).filter(function (file) {
-		return fs.statSync(path.join(srcpath, file)).isDirectory() && pa11yIgnore.indexOf(file) < 0;
-	});
-}
+const components = [
+	'components/n-ui/header',
+	'components/n-ui/footer',
+	'components/n-ui/compact-view-promo'
+]
 
-const missingPa11yConfig = [];
-const components = getDirectories('./');
 const cloneData = (data) => JSON.parse(JSON.stringify(data));
 
 components.forEach((component) => {
-	let componentConfig;
-
-	try {
-		componentConfig = require(`./${component}/pa11y-config.js`);
-
-		if(!componentConfig.pa11yData.length) {
-			throw new Error();
-		}
-
-	} catch (e) {
-		return missingPa11yConfig.push(component);
-	};
+	const componentConfig = require(`./${component}/pa11y-config.js`);
 
 	const componentDefaults = {
-		url: `localhost:5005/components/${component}`,
+		url: `localhost:5005/${component}`,
 		rootElement: 'body'
 	};
 	const componentPa11yData = cloneData(componentConfig.pa11yData || []);
@@ -87,8 +35,4 @@ components.forEach((component) => {
 	addToPa11yUrls(componentUrls);
 });
 
-if(missingPa11yConfig.length) {
-	throw new Error(error(`Components need to have a demo-config.js file, containing a non-empty \`pa11yData\` array. Components without these are: ${missingPa11yConfig.join(', ')}.`));
-}
-
 module.exports = config;

Makefile

@@ -1,43 +1,60 @@
 include n.Makefile
 
+.PHONY: build
+
 demo: run
 
-run:
-	rm -rf bower_components/n-ui
-	mkdir bower_components/n-ui
-	cp -rf $(shell cat _test-server/template-copy-list.txt) bower_components/n-ui
-	node _test-server/app
+run: build-css-loader
+ifneq ($(CIRCLECI),)
+	node demo/app
+else
+	nodemon demo/app
+endif
 
 build:
-	webpack --config webpack.config.demo.js --dev
+	webpack --config demo/webpack.config.js --dev
 
 watch:
-	webpack --config webpack.config.demo.js --dev --watch
+	webpack --config demo/webpack.config.js --dev --watch
 
-test-unit:
+test-browser:
 	karma start karma.conf.js
 
-# test-unit-dev is only for development environments.
-test-unit-dev:
+# test-browser-dev is only for development environments.
+test-browser-dev:
 	$(info *)
 	$(info * Developers note: This test will never "complete". It's meant to run in a separate tab. It'll automatically rerun tests whenever one of your files changes.)
 	$(info *)
 	karma start karma.conf.js --single-run false --auto-watch true
 
 test-build:
-	webpack --config webpack.config.demo.js
+	webpack --config demo/webpack.config.js
 
 test-server: export FT_NEXT_BACKEND_KEY=test-backend-key
 test-server: export FT_NEXT_BACKEND_KEY_OLD=test-backend-key-old
 test-server: export FT_NEXT_BACKEND_KEY_OLDEST=test-backend-key-oldest
-test-server: copy-stylesheet-loader
-	mocha node/test/*.test.js node/test/**/*.test.js  --recursive
+test-server: copy-stylesheet-partial
+ifneq ($(CIRCLECI),)
+ifeq ($(CIRCLE_TAG),)
+	make test-server-coverage && cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
+else
+	make test-server-plain
+endif
+else
+	make test-server-plain
+endif
+
+test-server-plain:
+	mocha server/test/*.test.js server/test/**/*.test.js
 
-copy-stylesheet-loader:
-	cp layout/partials/stylesheets.html node/test/fixtures/app/views/partials
+copy-stylesheet-partial:
+	cp browser/layout/partials/stylesheets.html server/test/fixtures/app/views/partials
 
-coverage-report: ## coverage-report: Run the unit tests with code coverage enabled.
-	istanbul cover node_modules/.bin/_mocha --report=$(if $(CIRCLECI),lcovonly,lcov) node/test/*.test.js node/test/**/*.test.js
+build-css-loader:
+	uglifyjs browser/layout/src/css-loader.js -o browser/layout/partials/css-loader.html
+
+test-server-coverage: ## test-server-coverage: Run the unit tests with code coverage enabled.
+	istanbul cover node_modules/.bin/_mocha --report=$(if $(CIRCLECI),lcovonly,lcov) server/test/*.test.js server/test/**/*.test.js
 
 nightwatch:
 	nht nightwatch test/js-success.nightwatch.js
@@ -48,12 +65,11 @@ pally-conf:
 a11y: test-build pally-conf
 	rm -rf bower_components/n-ui
 	mkdir bower_components/n-ui
-	cp -rf $(shell cat _test-server/template-copy-list.txt) bower_components/n-ui
-	PA11Y=true node _test-server/app
+	PA11Y=true node demo/app
 
-# Note: `run` executes `node _test-server/app`, which fires up exchange, then deploys
+# Note: `run` executes `node demo/app`, which fires up express, then deploys
 # a test static site to s3, then exits, freeing the process to execute `nightwatch a11y`.
-test: developer-note verify pally-conf test-server test-unit test-build run nightwatch a11y
+test: developer-note verify pally-conf test-server test-browser test-build run nightwatch a11y
 
 developer-note:
 ifeq ($(NODE_ENV),) # Not production
@@ -65,17 +81,13 @@ endif
 endif
 
 # Test-dev is only for development environments.
-test-dev: verify test-unit-dev
+test-dev: verify test-browser-dev
 
-deploy: assets
-	node ./_deploy/s3.js
+deploy:
+	webpack --bail --config build/deploy/webpack.config.js
+	node ./build/deploy/s3.js
+	$(MAKE) build-css-loader
 	$(MAKE) npm-publish
 	# only autodeploy all apps in office hours
 	HOUR=$$(date +%H); DAY=$$(date +%u); if [ $$HOUR -ge 9 ] && [ $$HOUR -lt 17 ] && [ $$DAY -ge 0 ] && [ $$DAY -lt 6 ]; then \
 	echo "REBUILDING ALL APPS" && sleep 20 && nht rebuild --all --serves user-page; fi
-
-serve:
-	@echo '`make serve` is no longer needed to bower link.'
-	@echo 'Instead set the environment variable `NEXT_APP_SHELL=local` in your app'
-	@echo 'and run `make build run` etc in the app'
-	exit 2

README.md

@@ -126,11 +126,3 @@ The navigation model also controls the edition switching logic.  The following p
 ### Other enhancements
 - Our [Handlebars](http://handlebarsjs.com/) engine loads partials from `bower_components` and has a number of [additional helpers](https://github.com/Financial-Times/n-handlebars). It also points to [n-layout](https://github.com/Financial-Times/n-layout) to provide a vanilla and 'wrapper' layout
 - Exposes everything in the app's `./public` folder via `./{{name-of-app}}` (only in non-production environments, please use [next-assets](https://github.com/Financial-Times/next-assets) or hashed-assets in production)
-
-## Webpack
-In your `webpack.config.js` simply include the following to generate all the assets needed by your n-ui enabled app:
-```
-module.exports = require('@financial-times/n-ui/webpack')({
-	entry: // an object specifying webpack entry points
-})
-```

_entry.js

@@ -6,12 +6,8 @@ module.exports = function (withPreact, exclusions) {
 		'n-ui': 'window.ftNextUi',
 		'n-ui/ads': 'window.ftNextUi._ads',
 		'n-ui/tracking': 'window.ftNextUi._tracking',
-		'n-ui/notification': 'window.ftNextUi._notification',
-		'n-ui/myft': 'window.ftNextUi._myft',
 		'n-ui/typeahead': 'window.ftNextUi._typeahead',
 		'n-ui-foundations': 'window.ftNextUi._foundations',
-		'n-ui/myft-digest-promo': 'window.ftNextUi._myftDigestPromo',
-		'n-ui/myft-hint': 'window.ftNextUi._myftHint',
 		// wrapped origami components
 		'o-date': 'window.ftNextUi._date',
 		'o-grid': 'window.ftNextUi._grid',

bin/nui.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-require('../build-tools/cli');
+require('../build/app/cli');

bower.json

@@ -31,6 +31,6 @@
     "o-tracking": "^1.1.8",
     "n-ui-foundations": "^1.0.0",
     "o-expander": "^4.2.2",
-    "n-myft-ui": "^1.0.0"
+    "next-session-client": "^2.2.3"
   }
 }