We are working very hard to bring you the best documentation possible.

HTML DOCUMENTS

Components

The following assumes you have a familiarity with JSX and TSX components. Please see these handy guides that provide a deep dive into JSX and a deep dive into TSX.

Components are TypeScript or JavaScript functions that return markup which replaces their component tags in HTML documents, and are applicable in includes, templates and pages.

export const HelloWorld = function() {
    return (
        <p>Hello World!</p>
    );
};

Types Of Components

fusion.ssg supports two types of components:

• Simple components, also just called "components", render markup for a single HTML document.
• Collection components are higher order components that are called to render multiple HTML documents.

This document mainly covers simple components.

Component Tags

<HelloWorld />

Component Implementation

fusion.ssg relieves you of the burden of having to configure TypeScript for your project. When building your project, fusion.ssg compiles your project's components when they are stale and invokes them asynchronously in a sand-boxed environment.

Properties

Component can reference their individual properties using destructuring, as in {[property name]} (see example below).

Predefined Properties

fusion.ssg recognizes two predefined component tag properties as having special significance:

• isCollection: boolean, default false. When set to true, component are recognized as being collection components. Please see Collections for details.
• dataSources: string, default "". A comma separated list of JSON file names. Components that have this property are recognized as being consumers of data sources that are located in your project's src/data folder. At runtime, fusion.ssg reads each data source, converting them to JavaScript objects, and passes the converted data sources to your component. Data sources passed to your components can be destructured from props using their JSON file name minus the .json extension. Please see JSON Datasources for details.

Metadata Properties

After each build cycle, fusion.ssg serializes its metadata into a file named project root/.assets.json. This file's content can be viewed and analyzed to determine query strategies for retrieving the data needed to satisfy each individual component's particular use case. In most cases, you want to limit your focus on those items that are "assetType": "template".

During each build cycle, fusion.ssg extracts metadata from your project that components can easily query using JavaScript's higher order Array methods, such as filter and map for example, and incorporate the data retrieved from these queries in HTML documents. For more information on this subject, please read Metadata.

• asset: object. The metadata that fusion.ssg has generated for the HTML document that this component is being called for. Components can use the data in this asset when rendering its output for the HTML document. For example, the following properties can be useful for creating lists of posts or lists of members of a collection:
  • isPost: boolean. If present, it identifies this asset as a post, and can be used to filter for all posts.
  • memberOf: string. If present, it identifies this asset as being a member of a collection, and names the collection that this asset is a member of, and can be used to filter for members of the named collection.
• assets: asset[].

Returns

Components should always return HTML.

A Complete Implementation Example

<h1>team</h1>
<p>Thanks to our team our rollout has been a huge success.</p>
<h2>Contributors</h2>
<TeamMembers datasources="team.json" />

[
{"name": { "first": "John", "last": "Doe" }},
{"name": { "first": "Jane", "last": "Doe" }},
{"name": { "first": "Julia", "last": "Doe" }}
]

interface TeamMember {
    "name": {
        "first": string,
        "last": string
    }
}

interface Props {
    team: TeamMember[]
}

function formatHref(member: TeamMember): string {
    return `/team/${member.name.first}-${member.name.last}`;
}

function formatName(member: TeamMember): string {
    return `${member.name.first} ${member.name.last}`;
}

export const TeamMembers = function({ team }: Props): string {
    return (
        <ul>
            {team.map(member => {
                return <li>
                    <a href={formatHref(member)}>{formatName(member)}</a>
                </li>;
            })}
        </ul>
    );
};

<h1>Team</h1>
<p>Thanks to our team our rollout has been a huge success.</p>
<h2>Contributors</h2>
<ul>
    <li><a href="/team/John-Doe">John Doe</a></li>
    <li><a href="/team/Jane-Doe">Jane Doe</a></li>
    <li><a href="/team/Julia-Doe">Julia Doe</a></li>
</ul>