@financial-times/custom-code-component

custom-code-component (<custom-code-component>)

Web component custom element for instantiating Visual & Data Journalism team projects

Usage:

Instantiate the web component and pass it a URL to a bundled component you wish to render into the component root.

example.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import css from './Component.css?inline';

const App = (props) => <div>{JSON.stringify(props)}</div>;

export default (shadowRoot, props, ...children) => {
  const style = document.createElement("style");
  const mountPoint = document.createElement("div");

  style.innerHTML = css;
  mountPoint.id = "component-root";

  shadowRoot.appendChild(style);
  shadowRoot.appendChild(mountPoint);

  ReactDOM.createRoot(mountPoint).render(
    <React.StrictMode>
      <App {...props}>{children}</App>
    </React.StrictMode>
  );
};

index.html

<script src="custom-code-component.js" type="module"></script>

<custom-code-component path="ft-interactive/test-project/test-component" version="^1" data-component-props="{}" data-asset-type="custom-code-component">
  <img alt="test component" src="https://ig.ft.com/components/ft-interactive/test-project/test-component@^1.png">
</custom-code-component>

Attributes

• path (string)
  • Component name in the format [org]/[repo]/[component].
    • If [org] is ccc-sdk or ommitted, component will be loaded from Vite local dev server (127.0.0.1:5173).
    • Otherwise, it will be loaded from the CCCCDN
• version (string)
  • Semantic Versioning range for the component.
• data-component-props (string)
  • Pass stringified JSON to make it available to children as the data prop.
• iframe (boolean)
  • Render inside an iframe using srcdoc for extra sandboxing (default: false)
• shadow-open (boolean)
  • Sets the shadow root to either open or closed (default: false)
• data-asset-type="custom-code-component"
  • Part of spec.
• * All remaining attributes get passed as an object named `props` to render().

client-metrics-adaptor

This module is an adaptor of the dotcom-reliability-kit client metrics package to help integrating RUM metrics for the Custom Code Components.

Requirements

To use it, you are required to have pre-installed the client-metrics-web package.

Options

• enrichEventCb (optional): function to enrich the event payload before is sent to AWS RUM
• shouldIgnoreEventCb (optional): function that checks if the event should be sent or not to AWS RUM

Usage:

Initialise the ClientMetrics Adaptor in your project to start listening to CCC Events and dispatch automatically AWS RUM events

example.jsx

import { MetricsClient } from '@dotcom-reliability-kit/client-metrics-web';
import * as clientMetricsAdaptor from '@financial-times/custom-code-component/client-metrics-adaptor';

const client = new MetricsClient({
    // Options go here
});

clientMetricsAdaptor.init(client, {
  enrichEventCb: enrichCCCEventWithHomepageContext,
  shouldIgnoreEventCb: shouldIgnoreCCCEvent,
});