JavaScript

Component JavaScript

Architecture

Each component is a function which accepts an object containing all of the properties needed to render it and returns information describing what to render. These are called "functional components" or "stateless functional components" (SFCs) by many frameworks.

Following this pattern means that components authored with x-dash can be compatible with a variety of static and dynamic runtimes including React, Preact, Inferno, VDO, and Hyperons amongst others.

Interactive components which change state in reaction to events can still be created using the x-interaction component.

Syntax

You may use all syntax up to and including the ECMAScript 2018 specification and any features that may be polyfilled by the Polyfill Service's default set in your component source code (this assumes that all FT applications use the service). We do not currently support transpiling any features at proposal, draft, or candidate stages (if you are unsure what this means check out the TC39 Process document).

If you are unsure about what you can or cannot use please check the Can I Use website or the ECMAScript compatibility table.

All source code for your components must be authored as ES Modules using the import and export statements so that x-dash can generate and distribute optimised bundles.

Babel is used to transpile component source code and Rollup is used to generate the bundles to be consumed by applications.

JSX

Components are written using JSX (if you are not familiar with JSX check out WTF is JSX first) which provides special syntax for describing elements and composing components. JSX is an extension of JavaScript providing syntactic sugar to provide both a visual aid and to save writing lengthy function calls. It is implemented by the majority of JavaScript parsers and transpilers.

Please note: Files containing JSX should use the .jsx extension.

Source files

Each component and subcomponent should be authored in a separate file with the name of the component in PascalCase as the filename and using a .jsx extension, for example a component which shows the publish date of a piece of content may be named PublishDate.jsx.

The main entry point of the component package should be the main component file itself, which should be named in the same format as all component files, instead of index.js or similar. It should export the main component as a named export, not default.

If a component is made up of several subcomponents, it should export the subcomponents used to assemble the main component as named exports alongside the main component.

Manifest

There are three separate bundles which will be generated by x-dash for each component to suit different use cases. These map to several properties in the package manifest to provide these options to the component's consumers.

• main - an ES2015 commonJS module for use by the server
• module - an ES2015 ES module for use by modern browsers
• browser - an ES5 commonJS module for use by older browsers

Example

Below shows the source code for a fictional x-content-item component.

// ContentItem.jsx
import PublishDate from './PublishDate';

const ContentItem = (props) => (
	<article>
		<h2>{props.title}</h2>
		{props.subtitle ? <p>{props.subtitle}</p> : null}
		<PublishDate {...props} />
	</article>
);

export { PublishDate, ContentItem };