Skip to main content

ComponentService

The ComponentService provides a convenient API for interacting with component blocklets that are mounted within your main application. It allows you to retrieve metadata about these components and construct absolute URLs to their pages or API endpoints.

This service relies on the blocklet's metadata. To learn how to load this metadata, please refer to the BlockletService documentation.

Instantiation

Unlike other services, ComponentService must be instantiated manually. This is because it depends on the window.blocklet object, which may be loaded asynchronously. To ensure the service has access to the complete blocklet metadata, you should create an instance after the blocklet object is available.

Instantiating ComponentService

javascript
import { ComponentService } from '@blocklet/js-sdk';

// Assuming window.blocklet is loaded and available
const componentService = new ComponentService();

Methods

getComponent()

Retrieves the full metadata object for a specific mounted component.

Parameters

  • name string (required) — The identifier of the component. Can be its name, title, or did.

Returns

  • BlockletComponent | undefined object — The BlockletComponent object if found, otherwise undefined.

Example

Get Component Metadata

javascript
// Mock window.blocklet object for demonstration
window.blocklet = {
  componentMountPoints: [
    {
      did: 'z8iZzaC3ukTM81BCs4Ynawxbg1KAd3b3p6c7b',
      name: 'my-first-component',
      title: 'My First Component',
      mountPoint: '/components/my-first-component',
      status: 'started'
    },
    {
      did: 'z8iZzbF9tkyG27AQs5Ynawxbh2LBe4c4q7d8c',
      name: 'my-second-component',
      title: 'My Second Component',
      mountPoint: '/components/my-second-component',
      status: 'started'
    }
  ],
  // ... other blocklet properties
};

const componentService = new ComponentService();

// Find component by its name
const component = componentService.getComponent('my-first-component');
console.log(component);

Example Response

Response

json
{
  "did": "z8iZzaC3ukTM81BCs4Ynawxbg1KAd3b3p6c7b",
  "name": "my-first-component",
  "title": "My First Component",
  "mountPoint": "/components/my-first-component",
  "status": "started"
}

getComponentMountPoint()

A helper method to quickly retrieve the mountPoint for a component. The mount point is the relative URL path where the component is served from the main application's domain.

Parameters

  • name string (required) — The identifier of the component (name, title, or did).

Returns

  • mountPoint string — The component's mountPoint as a string (e.g., /components/my-component). Returns an empty string if the component is not found.

Example

Get Mount Point

javascript
// Using the same componentService instance from the previous example
const mountPoint = componentService.getComponentMountPoint('my-first-component');

console.log(mountPoint);
// Expected output: /components/my-first-component

getUrl()

Constructs a full, absolute URL to a resource within a component. This is the recommended way to create links to other components, as it correctly handles the application's base URL and the component's specific mount point.

Parameters

  • name string (required) — The identifier of the component (name, title, or did).
  • ...parts string[] — One or more path segments to append to the component's URL.

Returns

  • url string — A complete, absolute URL as a string.

Example

Construct Component URL

javascript
// Mock window.blocklet object
window.blocklet = {
  appUrl: 'https://myapp.did.abtnet.io',
  componentMountPoints: [
    {
      name: 'api-component',
      title: 'API Component',
      mountPoint: '/api/v1',
      // ... other properties
    }
  ],
  // ... other properties
};

const componentService = new ComponentService();

// Construct a URL to an API endpoint within the component
const userApiUrl = componentService.getUrl('api-component', 'users', '123');
console.log(userApiUrl);
// Expected output: https://myapp.did.abtnet.io/api/v1/users/123

// Construct a URL to a page within the component
const settingsPageUrl = componentService.getUrl('api-component', 'settings');
console.log(settingsPageUrl);
// Expected output: https://myapp.did.abtnet.io/api/v1/settings

Types

BlockletComponent

This type represents the metadata for a single mounted component.

  • did string (required) — The decentralized identifier (DID) of the component.
  • name string (required) — The name of the component, as defined in its blocklet.yml.
  • title string (required) — The human-readable title of the component.
  • mountPoint string (required) — The URL path where the component is mounted relative to the main app's URL.
  • status string (required) — The current status of the component (e.g., 'started', 'stopped').

Now that you know how to interact with components, you might want to learn how to manage federated login settings. See the FederatedService documentation for more details.