feaas-components-sdk

Component Builder javascript SDK

This module renders the component and populates it with data. It also supports efficient update of component for the new data.

What does it do?

• Renders component content and returns React/DOM element
• Populates attributes and text valeus with mapped data
• Repeats nodes mapped to collections
• Updates previously rendered component for new data
• Provides both react and javascript versions of SDK
• (optional) Fetches of component from the cloud

What does it NOT do?

• Does not fetch the data: It needs to be explicitly given as data attribute.
• Does not offer any event listening helpers: We recommend using bubbling events instead

Usage

React:

    import FEAASComponent from 'feeas-components-sdk/dist/react';

    // provide html template directly
    <FEAASComponent template={`<p>Hello <var data-path="user.name" /></p>`} data={{user: {name: "World"}}} />

    // fetch component from the cloud
    <FEAASComponent componentId="..." variantId="..." versionId="production" hostname="..." data={{user: {name: "World"}}} />

JS Dom

import * as FEAAS from 'feeas-components-sdk'
// or <script src="//feaas-components.sitecore.cloud/sdk/latest.min.js"></script>
// will define FEAASComponent global variable

// Fetch component from the cloud, returns element immediately
// Use FEAAS.renderComponentPromise to await for fetch request
// Optionally accepts 2nd argument, element to render to
const element = FEAAS.renderComponent({
  componentId: '...',
  variantId: '...',
  versionId: 'production',
  hostname: '...',
  data: { user: { name: 'World' } }
})

// inject element into DOM
// will be empty until content is fetched, but will automatically re-render
document.body.appendChild(element)

// update element with new data
FEAAS.renderComponent(
  {
    data: { user: { name: 'Universe' } }
  },
  element
)

// ALTERNATIVELY: provide html template directly
const element = FEAAS.renderComponent(
  {
    template: `<p>Hello <var data-path="user.name" /></p>`,
    data: { user: { name: 'World' } }
  }
  //, element // optionally provide target element here a
)

// inject element into DOM
document.body.appendChild(element)

// update data in the element
FEAAS.renderComponent(
  {
    data: { user: { name: 'Universe' } }
  },
  element
)

Fetching styles

Components use styele guide, a stylesheet shared per tenant. In short, it has to be included on the page. Stylesheets are cached with immutable Cache-Control, meaning that the browser will never attempt to re-fetch them if it was cached once. That ensures the fastest rendering time on final website. The small price to pay is to use SDK on the page, that will invalidate the stylesheet automatically.

Recommended: Linking stylesheet in HTML

Placing stylesheet into HTML is benefitial to get the fasted loading speed. This allow browser to start fetching the css before it has finished loading, parsing and executing js.

<!-- Use id=`feaas-stylesheet` for SDK to deal with invalidation -->
<link rel='stylesheet' id='feaas-stylesheet' href='https://components.sitecore.cloud/styles/:tenant_id/published.css' />
<!-- Include SDK on the page OR as npm import inside your own code  -->
<script src="//feaas-components.sitecore.cloud/sdk/latest.min.js"></script>

Linking stylesheet in Clientside app

Loading styles from javascript is as simple as calling loadStyles function. It is safe to use this method together with HTML inclusion, the stylesheet will not be loaded twice.

import * as FEAAS from 'feeas-components-sdk'

// Load stylesheet (will automatically add it )
FEAAS.loadStyles(':tenant_id')