Skip to content
Twilight React Playground
ثيم رائدaren

BundleComponent

componentAdvancedbrowser

Hosts a home block that comes from an installed Twilight bundle (a component built outside the theme), rendered in the browser only.

import { BundleComponent, BundleComponentProps } from '@salla.sa/twilight-theme-engine/components/home';

In plain words

Some home blocks are not part of the theme at all: they come from a Twilight bundle, a package of ready-made web components the merchant installed. The API names such a block with a component_name and a bundle_id.

BundleComponent places the element for that block on the page, and Salla's bundles script, which the engine loads when it sees one, draws it.

Signature

const BundleComponent: React.MemoExoticComponent<(props: BundleComponentProps) => JSX.Element | null>

interface BundleComponentProps {
  data: {
    component_name: string;
    bundle_id: string;
    [key: string]: unknown;   // passed to the element as JSON config
  };
}

Example

app/router.tsx (excerpt)
import {
  DefaultHomeComponents,
  registerHomeComponents,
} from '@salla.sa/twilight-theme-engine/components/home';

// The default already maps the API path "bundle-component" to BundleComponent.
// Keep it when you register your own blocks:
registerHomeComponents({
  ...DefaultHomeComponents,
});

How it behaves

  • After mount it renders a salla-custom-component element with component-name, bundle-id and config (every other field of data, as JSON). Before mount, and during the server render, it renders nothing.

  • TwilightBundles, which the engine mounts on every page, notices that element and loads the bundles runtime from Salla's CDN, which defines the element.

  • The renderer's wrapper class for this path is s-block s-block--bundle-<component_name>.

Gotchas

  • config includes whatever else is in data, including the path, position and priority fields HomeComponentRenderer adds. A bundle that validates its config strictly sees those extra keys.

  • Without a real bundle installed on the store the element stays empty: there is nothing to try with a made-up bundle_id, which is why this page has no live demo.

Related

TwilightBundles

Watches the page for Twilight bundle elements and loads Salla's bundles runtime the first time one appears; mounted on every page.

DefaultHomeComponents

The engine's 13 built-in home blocks, keyed by block path, ready to spread into registerHomeComponents.

Source and docs