@communities-webruntime/services/dist/es/template-generators/template-utils.js

If you would like to run Lightning Web Runtime without the CLI, we expose some of our programmatic APIs available in Node.js. If you're looking for the CLI documentation [you can find that here](https://www.npmjs.com/package/@communities-webruntime/cli).

/**
 * Template utility functions shared between template modules
 */
import { convertToKebabCase } from '@communities-webruntime/common';
import { getTemplateGenerator } from './template-generator-registry.js';
const ATTRIBUTE_REFERENCE = 'attributes';
const REGION_TYPE = {
    THEME: 'theme',
    PAGE: 'page',
};
const REGION_THEME_BADGE_TEXT = 'Theme Region';
function regions({ regionList, isThemeLayout, attributeSet, isRenderDesignMode, }) {
    let html = '';
    if (regionList && regionList.length) {
        regionList.forEach((region) => {
            let regionHtml = '';
            if (region.components && region.components.length) {
                region.components.forEach((cmp, index) => {
                    regionHtml += isRenderDesignMode ? getDropZone(region.uuid) : '';
                    regionHtml += component({
                        cmp,
                        isThemeLayout,
                        regionName: region.slotName,
                        attributeSet,
                        isTopLevel: false,
                        isRenderDesignMode,
                        isLastComponent: index === region.components.length - 1,
                    }).html;
                });
            }
            regionHtml += isRenderDesignMode ? getDropZone(region.uuid) : '';
            html += isRenderDesignMode
                ? getRegionWrapper({
                    id: region.uuid,
                    name: region.slotName,
                    html: regionHtml,
                    type: isThemeLayout ? REGION_TYPE.THEME : REGION_TYPE.PAGE,
                    badge: isThemeLayout ? REGION_THEME_BADGE_TEXT : '',
                })
                : regionHtml;
        });
    }
    return `${html}
    ${isThemeLayout ? defaultSlot() : ''}`;
}
function getRegionWrapper({ id, name, html, type, badge }) {
    const slotAttribute = name ? `slot="${name}"` : ``;
    return `<webruntimedesign-region-wrapper 
    ${slotAttribute} 
    region-name="${name}"
    region-id="${id}"
    type="${type}"
    label="${name}"
    badge-label="${badge}"
    >${html}</webruntimedesign-region-wrapper>`;
}
function getDropZone(regionKey) {
    return `<webruntimedesign-drop-region region-id="${regionKey}"></webruntimedesign-drop-region>`;
}
function defaultSlot() {
    return `<webruntime-router-container></webruntime-router-container>`;
}
function attributes(cmp, attributeSet) {
    if (!cmp.attributes) {
        return { html: '', attributes: attributeSet };
    }
    const cmpNameKey = getCmpNameKey(cmp, attributeSet);
    let attrHtml = '';
    Object.entries(cmp.attributes).forEach(([attributeName, attributeValue]) => {
        attrHtml += ` ${convertToKebabCase(attributeName)}={${ATTRIBUTE_REFERENCE}.${cmpNameKey}.${attributeName}}`;
        // Store attribute value for runtime injection
        attributeSet[cmpNameKey] = attributeSet[cmpNameKey] || {};
        attributeSet[cmpNameKey][attributeName] = attributeValue;
    });
    return { html: attrHtml, attributes: attributeSet };
}
function buildSlot(slotName) {
    return `${slotName ? ` slot="${slotName}"` : ''} `;
}
function component({ cmp, isThemeLayout, regionName, attributeSet = {}, isTopLevel, isRenderDesignMode, isLastComponent, }) {
    const isRenderWrapper = !isTopLevel && isRenderDesignMode;
    const cmpNameKey = getCmpNameKey(cmp, attributeSet);
    const cmpTemplate = getTemplateGenerator(cmp.descriptor).generate({
        cmp,
        attributeSet,
        containerRegion: regionName,
        isRenderDesignMode,
        isThemeLayout,
    });
    const html = isRenderWrapper
        ? getComponentWrapper(cmp, cmpNameKey, isThemeLayout && !isTopLevel, isLastComponent)
        : cmpTemplate.html;
    return { html, attributes: cmpTemplate.attrs };
}
/**
 * Converts an LWC module specifier (e.g. x/shopButton) to an id like
 * xshopbutton
 */
function moduleSpecifierToId(moduleSpecifier) {
    const str = moduleSpecifier.replace('/', '');
    return str.toLowerCase();
}
function getCmpNameKey(cmp, attributeSet) {
    const componentName = moduleSpecifierToId(cmp.descriptor);
    const globalCmpIdx = Object.keys(attributeSet).length;
    return [componentName, globalCmpIdx].join('_');
}
function getComponentWrapper(cmp, cmpNameKey, isInThemeRegion, isLastComponent) {
    const attributesAttr = cmp.attributes
        ? `component-attributes={${ATTRIBUTE_REFERENCE}.${cmpNameKey}}`
        : '';
    const classAttribute = isLastComponent ? '' : 'component-wrapper-spacer';
    return `<webruntimedesign-component-wrapper 
    ${attributesAttr} 
    component-name="${cmp.descriptor}"
    component-id="${cmp.uuid}"
    label="${cmp.descriptor}"
    is-locked="false"
    is-in-theme-region="${isInThemeRegion}"
    class="${classAttribute}"
    ></webruntimedesign-component-wrapper>`;
}
export { regions, component, attributes, buildSlot };
//# sourceMappingURL=template-utils.js.map