rw.component

The rw.component object provides metadata about the component itself, including paths to assets.

Properties

Property	Type	Description
title	String	The component's name
group	String	The component group/category
version	Integer	Component version number
build	Integer	Component build number
assetPath	String	Path to component-specific assets
siteAssetPath	String	Path to site-level component assets
sharedAssetPath	String	Path to shared pack assets

Accessing Component Data

const transformHook = (rw) => {
    const {
        title,
        assetPath,
        sharedAssetPath
    } = rw.component;

    console.log(title);           // "Image Gallery"
    console.log(assetPath);       // "/resources/components/gallery/"
    console.log(sharedAssetPath); // "/resources/shared/"
};

exports.transformHook = transformHook;

Using Asset Paths

Asset paths are essential for referencing component resources like images, scripts, and stylesheets:

const transformHook = (rw) => {
    const { assetPath, sharedAssetPath } = rw.component;

    rw.setProps({
        // Component-specific assets
        placeholderImage: `${assetPath}/images/placeholder.png`,
        componentScript: `${assetPath}/js/gallery.js`,

        // Shared assets across the pack
        sharedIcon: `${sharedAssetPath}/icons/arrow.svg`,
        sharedStyles: `${sharedAssetPath}/css/common.css`
    });
};

exports.transformHook = transformHook;

Placeholder Images in Edit Mode

A common pattern is showing placeholder images while editing:

const transformHook = (rw) => {
    const { mode } = rw.project;
    const { sharedAssetPath } = rw.component;
    const { image } = rw.props;

    const isEditMode = mode === 'edit';
    const hasImage = image && image.image;

    // Show placeholder in edit mode when no image is set
    const displayImage = hasImage
        ? image.image
        : (isEditMode ? `${sharedAssetPath}/images/placeholder.png` : null);

    rw.setProps({
        displayImage,
        hasImage
    });
};

exports.transformHook = transformHook;

Using in Templates

<!-- Component-specific assets -->
<img src="{{assetPath}}/images/icon.png" alt="Icon">

<!-- Shared pack assets -->
<link rel="stylesheet" href="{{sharedAssetPath}}/css/styles.css">

<!-- Conditionally load scripts -->
@if(needsGalleryScript)
    <script src="{{assetPath}}/js/gallery.min.js"></script>
@endif