@financial-times/n-myft-ui 23.0.1 → 24.0.0

package/components/collections/collections.html

@@ -10,17 +10,9 @@
 		{{#concepts}}
 			<li class="collection__concept">
 				{{#if ../liteStyle}}
-					{{>	n-myft-ui/components/follow-button/follow-button
-						variant="primary"
-						buttonText=name
-						collectionName=../collectionName
-					}}
+					{{{renderReactComponent localPath="components/follow-button/follow-button" variant="primary" buttonText=name flags=@root.flags collectionName=../collectionName}}}
 				{{else}}
-					{{>	n-myft-ui/components/follow-button/follow-button
-						variant="inverse"
-						buttonText=name
-						collectionName=../collectionName
-					}}
+					{{{renderReactComponent localPath="components/follow-button/follow-button" variant="inverse" buttonText=name flags=@root.flags collectionName=../collectionName}}}
 				{{/if}}
 			</li>
 		{{/concepts}}
@@ -50,7 +42,7 @@
 						{{~/unless~}}
 					{{~/concepts~}}"
 			/>
-			{{> n-myft-ui/components/csrf-token/input}}
+			{{{renderReactComponent localPath="components/csrf-token/input"}}}
 			<input
 				type="hidden"
 				name="name"

package/components/concept-list/concept-list.html

@@ -20,10 +20,7 @@
 						class="concept-list__concept">
 						{{prefLabel}}
 					</a>
-					{{> n-myft-ui/components/follow-button/follow-button
-						conceptId=id
-						name=prefLabel
-					}}
+					{{{renderReactComponent localPath="components/follow-button/follow-button" conceptId=id name=prefLabel flags=@root.flags}}}
 				</li>
 			{{/each}}
 		</ul>

package/components/csrf-token/__tests__/input.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import CsrfToken from '../input';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const props = {
+	cacheablePersonalisedUrl: false
+};
+
+describe('Csrf Token Input', () => {
+
+	test('It renders default button', async () => {
+		let { container } = render(<CsrfToken {...props} />);
+		expect(container.querySelector('[name=\'token\']')).toBeTruthy();
+	});
+
+	test('It renders csrf token attribute', async () => {
+		let { container } = render(<CsrfToken cacheablePersonalisedUrl={true} csrfToken={'test-token'} />);
+		expect(container.querySelector('[data-myft-csrf-token=\'test-token\']')).toBeTruthy();
+	});
+
+
+});

package/components/csrf-token/input.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export default function CsrfToken ({ cacheablePersonalisedUrl, csrfToken }) {
+
+	let inputProps = {};
+
+	if (cacheablePersonalisedUrl) {
+		inputProps = {
+			...inputProps,
+			'data-myft-csrf-token': csrfToken
+		};
+	}
+
+	if(csrfToken) {
+		inputProps.value = csrfToken;
+	}
+
+	return (
+		<input
+			{...inputProps}
+			type="hidden"
+			name="token"
+		/>
+	);
+
+}

package/components/follow-button/__tests__/follow-button.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import FollowButton from '../follow-button';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const props = {
+	flags: {
+		myFtApi: true,
+		myFtApiWrite: true
+	},
+	conceptId: '0000-000000-00000-0000',
+	name: 'Follow button'
+};
+
+describe('Follow button', () => {
+
+	test('It renders default button', async () => {
+		render(<FollowButton {...props} />);
+		expect(screen.findByText('Add to myFT')).toBeTruthy();
+	});
+
+	test('It renders a variant', async () => {
+		const { container } = render(<FollowButton {...props} variant={'standard'} />);
+		expect(container.getElementsByClassName('n-myft-follow-button--standard')).toHaveLength(1);
+	});
+
+	test('It renders follow button form', async () => {
+		const { container } = render(<FollowButton {...props} variant={'standard'} />);
+		expect(container.querySelector(`form[action='/myft/add/${props.conceptId}']`)).toBeTruthy();
+	});
+
+	test('Button state changes when attributes change', () => {
+		render(<FollowButton {...props}
+			variant={'standard'}
+			setFollowButtonStateToSelected={true}
+			cacheablePersonalisedUrl={true} />);
+		expect(screen.findByText('Added')).toBeTruthy();
+	});
+
+});

package/components/follow-button/follow-button.jsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import CsrfToken from '../csrf-token/input';
+
+function generateFormProps (props) {
+	let generatedProps = {};
+
+	const {
+		collectionName,
+		followPlusDigestEmail,
+		conceptId,
+		setFollowButtonStateToSelected,
+		cacheablePersonalisedUrl
+	} = props;
+
+	if (collectionName) {
+		generatedProps['data-myft-tracking'] = `collectionName=${collectionName}`;
+	}
+
+	if(followPlusDigestEmail) {
+		generatedProps['action'] = `/__myft/api/core/follow-plus-digest-email/${conceptId}?method=put`;
+		generatedProps['data-myft-ui-variant'] = 'followPlusDigestEmail';
+	} else {
+		if(setFollowButtonStateToSelected && cacheablePersonalisedUrl) {
+			generatedProps['action'] = `/myft/remove/${conceptId}`;
+			generatedProps['data-js-action'] = `/__myft/api/core/followed/concept/${conceptId}?method=delete`;
+		} else {
+			generatedProps['action'] = `/myft/add/${conceptId}`;
+			generatedProps['data-js-action'] = `/__myft/api/core/followed/concept/${conceptId}?method=put`;
+		}
+	}
+
+	return generatedProps;
+
+}
+
+function generateButtonProps (props) {
+
+	const {
+		cacheablePersonalisedUrl,
+		setFollowButtonStateToSelected,
+		name,
+		buttonText,
+		variant,
+		conceptId,
+		alternateText,
+		followPlusDigestEmail
+	} = props;
+
+	let generatedProps = {
+		'data-concept-id': conceptId,
+		'n-myft-follow-button': 'true',
+		'data-trackable': 'follow',
+		type: 'submit'
+	};
+
+	if (cacheablePersonalisedUrl && setFollowButtonStateToSelected) {
+		generatedProps['aria-label'] = `Remove ${name} from myFT`;
+		generatedProps['title'] = `Remove ${name} from myFT`
+		generatedProps['data-alternate-label'] = `Add ${name} to myFT`;
+		generatedProps['aria-pressed'] = true;
+
+		if(alternateText) {
+			generatedProps['data-alternate-text'] = alternateText;
+		} else {
+			if(buttonText) {
+				generatedProps['data-alternate-text'] = buttonText;
+			} else {
+				generatedProps['data-alternate-text'] = 'Add to myFT';
+			}
+		}
+	} else {
+		generatedProps['aria-pressed'] = false;
+		generatedProps['aria-label'] = `Add ${name} to myFT`;
+		generatedProps['title'] = `Add ${name} to myFT`;
+		generatedProps['data-alternate-label'] = `Remove ${name} from myFT`;
+		if (alternateText) {
+			generatedProps['data-alternate-text'] = alternateText;
+		} else {
+			if (buttonText) {
+				generatedProps['data-alternate-text'] = buttonText;
+			} else {
+				generatedProps['data-alternate-text'] = 'Added';
+			}
+		}
+	}
+
+	if(variant) {
+		generatedProps[`n-myft-follow-button--${variant}`] = 'true';
+	}
+
+	if(followPlusDigestEmail) {
+		generatedProps['data-trackable-context-messaging'] = 'add-to-myft-plus-digest-button';
+	}
+
+	return generatedProps;
+}
+
+function getButtonText (props) {
+
+	const {
+		buttonText,
+		setFollowButtonStateToSelected,
+		cacheablePersonalisedUrl
+	} = props;
+	let outputText;
+
+	if(buttonText) {
+		outputText = buttonText;
+	} else {
+		if(setFollowButtonStateToSelected && cacheablePersonalisedUrl) {
+			outputText = 'Added';
+		} else {
+			outputText = 'Add to myFT';
+		}
+	}
+
+	return outputText;
+}
+
+/**
+ *
+ * @param {Object} props
+ * @param {string} props.name
+ * @param {Object} props.flags
+ * @param {string} props.extraClasses
+ * @param {string} props.conceptId
+ * @param {string} props.variant
+ * @param {string} props.buttonText
+ * @param {*} props.setFollowButtonStateToSelected
+ * @param {string} props.cacheablePersonalisedUrl
+ * @param {string} props.alternateText
+ * @param {*} props.followPlusDigestEmail
+ * @param {string} props.collectionName
+ */
+export default function FollowButton (props) {
+
+	const {
+		name,
+		flags,
+		extraClasses,
+		conceptId,
+		variant,
+	} = props;
+
+	const formProps = generateFormProps(props);
+	const buttonProps = generateButtonProps(props);
+
+	const getVariantClass = (variant) => variant ? `n-myft-follow-button--${variant}` : '';
+
+	return (
+		<>
+			{flags.myFtApiWrite && <form
+				className={`n-myft-ui n-myft-ui--follow ${extraClasses || ''}`}
+				method="GET"
+				data-myft-ui="follow"
+				data-concept-id={conceptId}
+				{...formProps}>
+				<CsrfToken cacheablePersonalisedUrl={props.cacheablePersonalisedUrl} csrfToken={props.csrfToken} />
+				<div
+					className="n-myft-ui__announcement o-normalise-visually-hidden"
+					aria-live="assertive"
+					data-pressed-text={`Now following ${name}.`}
+					data-unpressed-text={`No longer following ${name}.`}
+				></div>
+				<button
+					{...buttonProps}
+					className={[`n-myft-follow-button ${getVariantClass(variant)}`]}>
+					{getButtonText(props)}
+				</button>
+			</form>}
+		</>
+	);
+
+}

package/components/instant-alert/instant-alert.html

@@ -5,7 +5,7 @@
 			data-concept-id="{{conceptId}}"
 			action="/myft/add/{{conceptId}}?instant=true"
 			data-js-action="/__myft/api/core/followed/concept/{{conceptId}}?method=put">
-	{{> n-myft-ui/components/csrf-token/input}}
+	{{{renderReactComponent localPath="components/csrf-token/input"}}}
 	<input type="hidden" value="{{name}}" name="name">
 	{{#if directType}}
 	<input type="hidden" value="{{directType}}" name="directType">

package/components/pin-button/pin-button.html

@@ -2,7 +2,7 @@
 <span class="myft-pin-divider"></span>
 <div class="myft-pin-button-wrapper">
 	<form method="post" action="/__myft/api/core/prioritised/concept/{{id}}?method={{#if prioritised}}delete{{else}}put{{/if}}" data-myft-prioritise>
-		{{> n-myft-ui/components/csrf-token/input }}
+		{{{renderReactComponent localPath="components/csrf-token/input"}}}
 		<input type="hidden" value="{{name}}" name="name"> {{#if directType}}
 		<input type="hidden" value="{{directType}}" name="directType"> {{else}}
 		<input type="hidden" value="http://www.ft.com/ontology/concept/Concept" name="directType"> {{/if}}

package/components/save-for-later/save-for-later.html

@@ -4,7 +4,7 @@
 	data-myft-ui="saved"
 	action="/myft/save/{{contentId}}"
 	data-js-action="/__myft/api/core/saved/content/{{contentId}}?method=put">
-	{{> n-myft-ui/components/csrf-token/input}}
+	{{{renderReactComponent localPath="components/csrf-token/input"}}}
 	<div
 		class="n-myft-ui__announcement o-normalise-visually-hidden"
 		aria-live="assertive"
@@ -17,10 +17,14 @@
 		data-trackable="{{#if trackableId}}{{trackableId}}{{else}}save-for-later{{/if}}"
 		{{#if isSaved}}
 			{{!-- The value of alternate label needs to be the opposite of label / the current saved state. This allows the client side JS to toggle the labels on state changes --}}
+			title="{{#if title}}{{title}} is{{/if}} Saved to myFT"
+			aria-label="{{#if title}}{{title}} is{{/if}} Saved to myFT"
 			data-alternate-label="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
 			aria-pressed="true"
 		{{else}}
-			data-alternate-label="Saved to myFT"
+			title="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
+			aria-label="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
+			data-alternate-label="{{#if title}}{{title}} is{{/if}} Saved to myFT"
 			aria-pressed="false"
 		{{/if}}
 		{{#unlessEquals appIsStreamPage true}}
@@ -40,13 +44,6 @@
 			{{/if}}
 		{{/if}}
 		data-content-id="{{contentId}}" {{! duplicated here for tracking}}
-		{{#if isSaved}}
-			aria-label="{{#if title}}{{title}} is{{/if}} Saved to myFT"
-			title="{{#if title}}{{title}} is{{/if}} Saved to myFT"
-		{{else}}
-			aria-label="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
-			title="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
-		{{/if}}
 		>
 			{{#if saveButtonWithIcon}}
 				<span class="save-button-with-icon-copy" data-variant-label>{{#if buttonText~}}

package/components/unread-articles-indicator/README.md

@@ -1,65 +1,5 @@
 # n-myft-ui/unread-articles-indicator
 
-![unread article indicator](https://user-images.githubusercontent.com/21194161/72087965-38d9c080-3301-11ea-9616-d1b31132c269.png)
+Note: this component is decommissioned but a small function (`getNewArticlesSinceTime`) of it is still in use by next-myft-page to display a "New" label under an article in the Timeline view only.
 
-
-## What?
-
-It indicates to the user that articles they've not yet read have been published to their myft feed since they last visited the site.
-
-## Why?
-
-- To encourage a myFT feed habit
-- To provide a utility to the user so they don't need to check their feed unnecessarily
-
-
-## Where?
-
-- **.com only**:
-  - next-front-page
-  - next-stream-page
-  - next-article
-  - next-myft-page
-
-## When?
-
-- June 2018 - intial implementation [AB Test results](https://sites.google.com/ft.com/ftproductanalytics/analysis/myft/myft-feed-page)
-- Sep 2018 - sync across devices
-- Oct 2019 - add favicon [AB Test results](https://sites.google.com/ft.com/ftproductanalytics/tests/engagement/myftunreadfavicon)
-- Nov 2019 - automatically update (polling)
-
-
-## Behaviour
-
-- The indicator consists of a red circle and a count of the number of new and unread articles since a user was last active on the site (or the app). The article count is hidden on the mobile breakpoint if the number is double digits (i.e. too large to fit in the circle)
-
-- The favicon is updated to reflect what the indicator is showing
-
-- The article count updates automatically without the user having to refresh the page every 5 minutes
-
-- The count is reset to 0 when the user visits their myFT feed page on [ft.com](https://www.ft.com/ft.com/myft/following)
-
-- The count is reset every day at midnight
-
-- The count is reset after 30 minutes of site inactivity - 🐛 thought to be a bug
-
-- The state of the indicator is synched between different browsers, however it's not expected to be real-time
----
-
-## How the unread articles number is determined
-
-:one: Determine the time(`feedStartTime`) which is the user's last active time (the process is explained below)
-
-:two: Determine the time(`startTime`) to be used to count unread articles for the current visit. It is `feedStartTime` or `myFTIndicatorDismissedAt`*, whichever comes later.
-
-:three: Fetch myft feed articles for the user
-
-:four: Count the articles published after the timestamp(`startTime`)
-
----
-* `myFTIndicatorDismissedAt` timestamp is stored in `window.localStorage` when user visits [myFT feed page](https://www.ft.com/myft/following).
-
----
-![unread article count](https://user-images.githubusercontent.com/21194161/72608180-11df4800-391a-11ea-973b-4a52933561ab.png)
-
-To keep the number synched  on **cross devices**, it fetches the last 'active' time for a user via a Volt Procedure called UserInfo.
+All other previous functionality of the component has been removed.

package/components/unread-articles-indicator/date-fns.js

@@ -1,5 +1,5 @@
 // date-fns from v2 doesn't accept String arguments anymore.
-// the detail => https://github.com/date-fns/date-fns/blob/master/CHANGELOG.md#200---2019-08-20
+// the detail => https://github.com/date-fns/date-fns/blob/HEAD/CHANGELOG.md#200---2019-08-20
 // By adding validation for dates before their functions allows us to know it when unexpected value passed.
 
 import isTodayOriginal from 'date-fns/src/isToday';
@@ -11,22 +11,15 @@ import parseISO from 'date-fns/src/parseISO';
 
 const isValid = (date) => {
 	if (!isValidOriginal(date)) {
-		console.error('Invalid date passed', [date]); //eslint-disable-line
+		console.error("Invalid date passed", [date]); //eslint-disable-line
 	}
 	return date;
 };
 
 const isToday = (date) => isTodayOriginal(isValid(date));
-const isAfter = (date, dateToCompare) => isAfterOriginal(isValid(date), isValid(dateToCompare));
+const isAfter = (date, dateToCompare) =>
+	isAfterOriginal(isValid(date), isValid(dateToCompare));
 const addMinutes = (date, amount) => addMinutesOriginal(isValid(date), amount);
 const startOfDay = (date) => startOfDayOriginal(isValid(date));
 
-
-export {
-	isToday,
-	isAfter,
-	addMinutes,
-	startOfDay,
-	isValid,
-	parseISO,
-};
+export { isToday, isAfter, addMinutes, startOfDay, isValid, parseISO };

package/components/unread-articles-indicator/index.js

@@ -1,42 +1,11 @@
 import {startOfDay} from './date-fns';
 import * as storage from './storage';
-import * as ui from './ui';
-import updateCount from './update-count';
 import initialiseFeedStartTime from './initialise-feed-start-time';
 import sessionClient from 'next-session-client';
-import {UPDATE_INTERVAL} from './constants';
 
-let shouldPoll;
-let updateTimeout;
 let initialFeedStartTime;
 let userId;
 
-const isMyftFeedPage = window.location.pathname.indexOf('/myft/following') === 0;
-const doUpdate = () => updater().catch(stopPolling);
-
-export default async (options = {}) => {
-	try {
-		if (!storage.isAvailable()) return;
-
-		const myftHeaderLink = document.querySelectorAll('.o-header__top-link--myft');
-		const uiOpts = Object.assign({onClick: setDismissed, flags: {}}, options);
-		shouldPoll = uiOpts.flags.MyFT_UnreadArticlesIndicatorPolling;
-
-		await getNewArticlesSinceTime();
-
-		const {count = 0} = storage.getLastUpdate() || {};
-		ui.createIndicators(myftHeaderLink, uiOpts);
-		ui.setCount(count);
-
-		document.addEventListener('visibilitychange', onVisibilityChange);
-		storage.addCountChangeListeners(newCount => ui.setCount(newCount));
-		if (isMyftFeedPage) setDismissed();
-		return updater();
-	} catch(e) {
-
-	}
-};
-
 async function getValidSession () {
 	if (!userId) {
 		const {uuid} = await sessionClient.uuid();
@@ -47,6 +16,7 @@ async function getValidSession () {
 }
 
 // Export used in next-myft -page to determine whether to add "New" label to articles in feed
+//KEEP: This function is in use in next-myft-page do not delete!
 export async function getNewArticlesSinceTime () {
 	const user = await getValidSession();
 	const dayStart = startOfDay(new Date());
@@ -59,34 +29,3 @@ export async function getNewArticlesSinceTime () {
 
 	return initialFeedStartTime || dayStart;
 }
-
-async function updater () {
-	const user = await getValidSession();
-	await updateCount(user, new Date());
-	if (!shouldPoll) return;
-	updateTimeout = window.setTimeout(doUpdate, UPDATE_INTERVAL);
-}
-
-async function onVisibilityChange () {
-	if (document.visibilityState !== 'visible') return;
-	try {
-		await getValidSession();
-		await getNewArticlesSinceTime();
-		if (updateTimeout) window.clearTimeout(updateTimeout);
-		await updater();
-	} catch(e) {
-		stopPolling();
-	}
-}
-
-function stopPolling () {
-	userId = undefined;
-	if (updateTimeout) {
-		window.clearTimeout(updateTimeout);
-	}
-}
-
-function setDismissed () {
-	storage.updateLastUpdate({count: 0, time: new Date()});
-	storage.setIndicatorDismissedTime(new Date());
-}

package/components/unread-articles-indicator/storage.js

@@ -2,10 +2,7 @@ import {isValid} from './date-fns';
 
 const DEVICE_SESSION_EXPIRY = 'deviceSessionExpiry';
 const FEED_START_TIME = 'newArticlesSinceTime';
-const LAST_INDICATOR_UPDATE = 'myFTIndicatorUpdate';
-const INDICATOR_DISMISSED_TIME = 'myFTIndicatorDismissedAt';
 
-const countChangeListeners = new Set();
 const isISOString = str => typeof str === 'string' && str.charAt(10) === 'T';
 const getStoredDate = key => {
 	const value = window.localStorage.getItem(key);
@@ -13,7 +10,6 @@ const getStoredDate = key => {
 
 	return isISOString(value) && isValid(date) ? date : null;
 };
-let lastCount;
 
 export const getDeviceSessionExpiry = () => getStoredDate(DEVICE_SESSION_EXPIRY);
 
@@ -23,10 +19,6 @@ export const getFeedStartTime = () => getStoredDate(FEED_START_TIME);
 
 export const setFeedStartTime = date => window.localStorage.setItem(FEED_START_TIME, date.toISOString());
 
-export const getIndicatorDismissedTime = () => getStoredDate(INDICATOR_DISMISSED_TIME);
-
-export const setIndicatorDismissedTime = date => window.localStorage.setItem(INDICATOR_DISMISSED_TIME, date.toISOString());
-
 export const isAvailable = () => {
 	try {
 		const storage = window.localStorage;
@@ -39,39 +31,3 @@ export const isAvailable = () => {
 		return false;
 	}
 };
-
-
-export const setLastUpdate = (update = {}) => {
-	const toStore = Object.assign({}, update);
-	if (update.time) toStore.time = update.time.toISOString();
-	if (update.updateStarted) toStore.updateStarted = update.updateStarted.toISOString();
-	window.localStorage.setItem(LAST_INDICATOR_UPDATE, JSON.stringify(toStore));
-	fireListeners();
-};
-
-export const getLastUpdate = () => {
-	try {
-		const lastUpdate = JSON.parse(window.localStorage.getItem(LAST_INDICATOR_UPDATE));
-		if (lastUpdate.time) lastUpdate.time = new Date(lastUpdate.time);
-		if (lastUpdate.updateStarted) lastUpdate.updateStarted = new Date(lastUpdate.updateStarted);
-		return lastUpdate;
-	} catch (e) {}
-};
-
-export const updateLastUpdate = (update) => setLastUpdate(Object.assign({}, getLastUpdate(), update) );
-
-export const addCountChangeListeners = listener => {
-	if (!countChangeListeners.size) {
-		window.addEventListener('storage', fireListeners);
-	}
-	countChangeListeners.add(listener);
-};
-
-function fireListeners () {
-	const {count} = getLastUpdate() || {};
-	if (count === lastCount) return;
-	for (const listener of countChangeListeners) {
-		listener(count || 0);
-	}
-	lastCount = count || 0;
-}

package/demos/app.js

@@ -1,9 +1,17 @@
+require('sucrase/register');
 const express = require('@financial-times/n-internal-tool');
 const chalk = require('chalk');
 const errorHighlight = chalk.bold.red;
 const highlight = chalk.bold.green;
-
+const { PageKitReactJSX } = require('@financial-times/dotcom-server-react-jsx');
+const fs = require('fs');
+const path = require('path');
 const xHandlebars = require('@financial-times/x-handlebars');
+const handlebars = require('handlebars');
+const { helpers } = require('@financial-times/dotcom-server-handlebars');
+
+const demoJSX = require('./templates/demo').default;
+const demoLayoutSource = fs.readFileSync(path.join(__dirname, './templates/demo-layout.html'),'utf8').toString();
 
 const fixtures = {
 	followButton: require('./fixtures/follow-button'),
@@ -29,10 +37,13 @@ const app = module.exports = express({
 	demo: true,
 	s3o: false,
 	helpers: {
-		x: xHandlebars()
-	}
+		x: xHandlebars(),
+		renderReactComponent: helpers.renderReactComponent
+	},
 });
 
+const jsxRenderer = (new PageKitReactJSX({ includeDoctype: false }));
+
 app.get('/', (req, res) => {
 	res.render('demo', Object.assign({
 		title: 'n-myft-ui demo',
@@ -44,6 +55,22 @@ app.get('/', (req, res) => {
 	}, fixtures));
 });
 
+app.get('/demo-jsx', async (req, res) => {
+	let demo = await jsxRenderer.render(demoJSX, Object.assign({
+		title: 'n-myft-ui demo',
+		layout: 'demo-layout',
+		flags: {
+			myFtApi: true,
+			myFtApiWrite: true
+		}
+	}, fixtures));
+
+	let template = handlebars.compile(demoLayoutSource);
+	let result = template({body: demo});
+
+	res.send(result);
+});
+
 app.get('/digest-on-follow', (req, res) => {
 	res.render('digest-on-follow', Object.assign({
 		title: 'n-myft-ui digest on follow',