Rhys/component reorg (#865)

* beginnings of reorganising the repo

* fixing demo server

* fixed unit tests

* fixed demo app properly

* fixed pa11y

* nodemon;

.gitignore

@@ -22,3 +22,4 @@ key-cert.pem
 server/test/fixtures/app/views/partials/stylesheets.html
 server/test/fixtures/bad-assets/.gitignore
 /coverage/
+/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,60 +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',
-	'n-ui',
-	'server',
-	'offline-toast',
-	'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/welcome-message'
+]
 
-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/components/n-ui/${component}`,
 		rootElement: 'body'
 	};
 	const componentPa11yData = cloneData(componentConfig.pa11yData || []);
@@ -81,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

@@ -3,22 +3,19 @@ include n.Makefile
 demo: run
 
 run: build-css-loader
-	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
+	nodemon _test-server/app
 
 build:
 	webpack --config _test-server/webpack.config.demo.js --dev
 
 watch:
 	webpack --config _test-server/webpack.config.demo.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 *)
@@ -34,14 +31,14 @@ test-server: copy-stylesheet-partial
 ifneq ($(CIRCLECI),)
 	make coverage-report && cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
 else
-	mocha node/test/*.test.js node/test/**/*.test.js  --recursive
+	mocha server/test/*.test.js server/test/**/*.test.js
 endif
 
 copy-stylesheet-partial:
-	cp layout/partials/stylesheets.html server/test/fixtures/app/views/partials
+	cp layout/layout-partials/stylesheets.html server/test/fixtures/app/views/partials
 
 build-css-loader:
-	uglifyjs layout/js/css-loader.js -o layout/partials/css-loader.html
+	uglifyjs layout/js/css-loader.js -o layout/layout-partials/css-loader.html
 
 coverage-report: ## coverage-report: 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
@@ -55,12 +52,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
 
 # Note: `run` executes `node _test-server/app`, which fires up exchange, 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
@@ -72,7 +68,7 @@ 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

_test-server/app.js

@@ -17,28 +17,40 @@ const app = module.exports = express({
 	withLayoutPolling: false,
 	layoutsDir: path.join(process.cwd(), '/layout'),
 	viewsDirectory: '/_test-server/views',
-	partialsDirectory: process.cwd(),
+	partialsDirectory: [
+		process.cwd() + '/layout',
+		process.cwd() + '/components'
+	],
 	directory: process.cwd()
 });
 
+app.use(require('./middleware/assets'));
+
 app.get('/', (req, res) => {
 	res.render('default', {
 		title: 'Test App',
 		layout: 'wrapper'
 	});
 });
 
-app.use(require('./middleware/assets'));
-app.get('/components/:component?', (req, res) => {
+
+app.get('/components/n-ui/:component', (req, res) => {
 	const component = req.params.component;
-	const config = require(`../${component}/pa11y-config`);
+	let config;
+	try {
+		config = require(`../components/n-ui/${component}/pa11y-config`);
+	} catch (e) {
+		// if no config it's probably a request for a sourcemap from an inlined stylesheet, which just causes a load of
+		// confusing errors
+		return res.sendStatus(404)
+	}
 	const handlebarsDataClone = JSON.parse(JSON.stringify(config.handlebarsData));
 	const model = Object.assign({
 		title: 'Test App',
 		layout: '../layout/vanilla'
 	}, handlebarsDataClone);
 
-	res.render(`../../${component}/${config.handlebarsData.template}`, model);
+	res.render(`../../components/n-ui/${component}/${config.handlebarsData.template}`, model);
 });
 
 app.get('*', (req, res) => {

_test-server/client/main.js

@@ -1,5 +1,5 @@
 import {bootstrap} from '../../main';
-const tracking = require('../../tracking');
+const tracking = require('../../components/n-ui/tracking');
 
 bootstrap({preset: 'complete'}, () => {
 	tracking.scrollDepth.init('n-ui-test');

_test-server/middleware/assets.js

@@ -1,16 +1,18 @@
 'use strict';
 
 module.exports = (req, res, next) => {
-	res.locals.javascriptBundles = res.locals.javascriptBundles.filter(bundle => {
-		return bundle.indexOf('undefined') === -1
-	})
-	.map(bundle => {
-		if (bundle.indexOf('polyfill') > -1) {
-			return bundle.replace('polyfill.min', 'polyfill')
-				.split('&excludes')[0];
-		}
-		return bundle;
-	});
-
+	res.locals.javascriptBundles = res.locals.javascriptBundles
+		.filter(bundle => {
+			return bundle.indexOf('undefined') === -1
+		})
+		.map(bundle => {
+			if (bundle.indexOf('polyfill') > -1) {
+				return bundle.replace('polyfill.min', 'polyfill')
+					.split('&excludes')[0];
+			}
+			return bundle;
+		});
+	// no head.css generated in this demo app
+	res.locals.stylesheets.inline = [];
 	next();
 }

tracking/third-party/chartbeat.js → components/n-ui/tracking/third-party/chartbeat.js

@@ -6,7 +6,7 @@ Eventually this will be replaced by FT's in-house "lantern" application, utilisi
 */
 
 import {cookieStore} from 'n-ui-foundations';
-import {loadScript} from '../../js-setup/js/utils';
+import {loadScript} from '../../../../js-setup/js/utils';
 
 const enableChartbeat = () => {
 	window._sf_async_config = {

js-setup/js/component-initializer.js

@@ -1,16 +1,16 @@
 import Loader from './loader';
-import ads from '../../ads';
-import tracking from '../../tracking';
+import ads from '../../components/n-ui/ads';
+import tracking from '../../components/n-ui/tracking';
 import date from 'o-date';
-import header from '../../header';
+import header from '../../components/n-ui/header';
 import oCookieMessage from 'o-cookie-message';
-import welcomeMessage from '../../welcome-message';
-import subscriptionOfferPrompt from '../../subscription-offer-prompt';
-import footer from '../../footer';
-import offlineToast from '../../offline-toast';
+import welcomeMessage from '../../components/n-ui/welcome-message';
+import subscriptionOfferPrompt from '../../components/n-ui/subscription-offer-prompt';
+import footer from '../../components/n-ui/footer';
+import offlineToast from '../../components/n-ui/offline-toast';
 import { lazyLoad as lazyLoadImages } from 'n-image';
 import * as serviceWorker from 'n-service-worker';
-import * as syndication from '../../syndication';
+import * as syndication from '../../components/n-ui/syndication';
 
 export const presets = {
 	discrete: {

js-setup/test/component-initializer.spec.js

@@ -2,11 +2,11 @@
 window.nextFeatureFlags = [{name: 'aFlag', state: true}];
 const ComponentInitializer = require('../js/component-initializer').ComponentInitializer;
 const jsLoader = require('../js/loader');
-const header = require('../../header');
-const footer = require('../../footer');
+const header = require('../../components/n-ui/header');
+const footer = require('../../components/n-ui/footer');
 const date = require('o-date');
-const ads = require('../../ads');
-const tracking = require('../../tracking');
+const ads = require('../../components/n-ui/ads');
+const tracking = require('../../components/n-ui/tracking');
 
 describe('bootstrapping', () => {
 	beforeEach(() => {

karma.conf.js

@@ -5,11 +5,9 @@ const path = require('path');
 const BowerWebpackPlugin = require('bower-webpack-plugin');
 const componentsToTest = [
 	'js-setup',
-	'ads',
-	'myft',
-	'tracking',
-	'opt-out',
-	'subscription-offer-prompt'
+	'components/n-ui/ads',
+	'components/n-ui/tracking',
+	'components/n-ui/subscription-offer-prompt'
 ];
 
 module.exports = function (karma) {

js-setup/templates/bootstrapper.html → layout/layout-partials/bootstrapper.html

@@ -15,7 +15,7 @@
 		return o;
 	};
 
-	{{>n-ui/layout/partials/css-loader}}
+	{{>layout-partials/css-loader}}
 
 	window.{{@root.polyfillCallbackName}} = function () {
 		window.ftNextFireCondition('PolyfillLoaded');

layout/layout-partials/css-loader.html

@@ -0,0 +1 @@
+(function(){var w=window;var doc=document;var preloadSupported=function(){try{return doc.createElement("link").relList.supports("preload")}catch(e){return false}}();function onloadCSS(ss,callback){var called;function newcb(){if(!called&&callback){called=true;callback.call(ss)}}if(ss.addEventListener){ss.addEventListener("load",newcb)}if(ss.attachEvent){ss.attachEvent("onload",newcb)}if("isApplicationInstalled"in navigator&&"onloadcssdefined"in ss){ss.onloadcssdefined(newcb)}}w.loadCSS=function(href,before,media){var ss=doc.createElement("link");var ref;if(before){ref=before}else{var refs=(doc.body||doc.getElementsByTagName("head")[0]).childNodes;ref=refs[refs.length-1]}var sheets=doc.styleSheets;ss.rel="stylesheet";ss.href=href;ss.media="only x";function ready(cb){if(doc.body){return cb()}setTimeout(function(){ready(cb)})}ready(function(){ref.parentNode.insertBefore(ss,before?ref:ref.nextSibling)});var onloadcssdefined=function(cb){var resolvedHref=ss.href;var i=sheets.length;while(i--){if(sheets[i].href===resolvedHref){return cb()}}setTimeout(function(){onloadcssdefined(cb)})};function loadCB(){if(ss.addEventListener){ss.removeEventListener("load",loadCB)}ss.media=media||"all"}if(ss.addEventListener){ss.addEventListener("load",loadCB)}ss.onloadcssdefined=onloadcssdefined;onloadcssdefined(loadCB);return ss};var allLinks=doc.getElementsByTagName("link");var link,newLink;for(var i=0;i<allLinks.length;i++){link=allLinks[i];if(link.rel==="preload"&&link.getAttribute("as")==="style"){if(preloadSupported){onloadCSS(link,function(){this.rel="stylesheet";if(/\/.*\/main[-a-z]*\.css/.test(this.href)){w.ftNextCssFileLoaded()}})}else{newLink=w.loadCSS(link.href,link);link.rel=null;onloadCSS(newLink,function(){if(/\/main[-a-z]*\.css/.test(this.href)){w.ftNextCssFileLoaded()}})}}}})();

layout/layout-partials/stylesheets.html

@@ -0,0 +1,16 @@
+{{#if @root.stylesheets.inline}}
+	<style class="n-layout-head-css">
+		{{{@root.stylesheets.inline}}}
+	</style>
+{{/if}}
+
+{{#each @root.stylesheets.lazy}}
+<!--[if gte IE 9]><!-->
+<link data-is-next rel="preload" href="{{this}}" as="style" onload="this.rel='stylesheet';window.ftNextCssFileLoaded()">
+<noscript><link rel="stylesheet" href="{{this}}"></noscript>
+<!--<![endif]-->
+{{!ie8 fallback}}<!--[if lt IE 9]><link rel="stylesheet" href="{{this}}"><![endif]-->
+{{/each}}
+{{#each @root.stylesheets.blocking}}
+<link rel="stylesheet" href="{{this}}">
+{{/each}}

layout/vanilla.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-{{>n-ui/layout/partials/html-tag}}
+{{>layout-partials/html-tag}}
 	<head>
 		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -12,17 +12,17 @@
 		{{#if setBase}}
 		<base target="_parent" href="{{setBase}}">
 		{{/if}}
-		{{>n-ui/js-setup/templates/fire-condition}}
-		{{>n-ui/layout/partials/stylesheets}}
+		{{>layout-partials/fire-condition}}
+		{{>layout-partials/stylesheets}}
 
 		{{#outputBlock 'head'}}{{/outputBlock}}
 		<script>
-			{{>n-ui/js-setup/templates/ctm}}
+			{{>layout-partials/ctm}}
 			{{>n-ui-foundations/typography/enhance-fonts}}
 		</script>
 	</head>
 	<body class="o-hoverable-on" data-next-is-logged-in="{{@root.anon.userIsLoggedIn}}" data-trackable="page:{{@root.__name}}{{#if @root.trackablePageName}}/{{@root.trackablePageName}}{{/if}}">
 		{{{body}}}
-		{{>n-ui/js-setup/templates/bootstrapper}}
+		{{>layout-partials/bootstrapper}}
 	</body>
 </html>