npm package: @financial-times/custom-code-component
Description: Instantiate the web component and pass it a URL to a bundled component you wish to render into the component root.
Latest version: 2.1.5

# 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

```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
```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](https://semver.org) 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.
* <any other attributes>
    * 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](https://github.com/Financial-Times/dotcom-reliability-kit/tree/main/packages/client-metrics-web) 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

```js
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,
});