meno-core 1.0.53 → 1.1.0

package/lib/client/core/ComponentRenderer.test.tsx

@@ -2,7 +2,6 @@ import { test, expect, describe, beforeEach } from 'bun:test';
 import { renderPage } from './ComponentRenderer';
 import { ComponentBuilder } from './ComponentBuilder';
 import { ComponentRegistry } from '../componentRegistry';
-import { ElementRegistry } from '../elementRegistry';
 import { createMockHighlightManager, createMockElementRegistry, createMockComponentNode } from '../../test-utils';
 import type { ComponentNode } from '../../shared/types';
 import { NODE_TYPE } from '../../shared/constants';
@@ -14,9 +13,9 @@ describe('ComponentRenderer', () => {
 
   beforeEach(() => {
     componentRegistry = new ComponentRegistry();
-    const highlightManager = createMockHighlightManager();
+    const _highlightManager = createMockHighlightManager();
     const elementRegistry = createMockElementRegistry();
-    
+
     componentBuilder = new ComponentBuilder({
       componentRegistry,
       elementRegistry,
@@ -172,4 +171,3 @@ describe('ComponentRenderer', () => {
     });
   });
 });
-

package/lib/client/core/ComponentRenderer.tsx

@@ -3,12 +3,12 @@
  * Provides rendering utilities for pages including error boundaries.
  */
 
-import { createElement as h } from "react";
-import type { ReactElement } from "react";
-import { ComponentBuilder } from "./ComponentBuilder";
-import { ErrorBoundary } from "../ErrorBoundary";
-import type { ComponentNode, I18nConfig, CMSItem } from "../../shared/types";
-import type { TemplateContext } from "../../shared/types/cms";
+import { createElement as h } from 'react';
+import type { ReactElement } from 'react';
+import type { ComponentBuilder } from './ComponentBuilder';
+import { ErrorBoundary } from '../ErrorBoundary';
+import type { ComponentNode, I18nConfig, CMSItem } from '../../shared/types';
+import type { TemplateContext } from '../../shared/types/cms';
 
 /**
  * Options for rendering a page
@@ -38,13 +38,13 @@ export interface RenderPageOptions {
 
 /**
  * Renders a page with ErrorBoundary
- * 
+ *
  * This function wraps the component tree in an ErrorBoundary to catch and handle
  * rendering errors gracefully. It also handles null/empty trees by returning null.
- * 
+ *
  * @param options - Rendering options including tree, path, viewport width, and builder
  * @returns ReactElement representing the rendered page, or null if tree is null
- * 
+ *
  * @example
  * ```typescript
  * const result = renderPage({
@@ -56,35 +56,48 @@ export interface RenderPageOptions {
  * ```
  */
 export function renderPage(options: RenderPageOptions): ReactElement | null {
-  const { tree, currentPath, viewportWidth, componentBuilder, locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap, templateContext } = options;
-
-  if (!tree) return null;
-
-  return h(ErrorBoundary, {
-    level: 'page',
-    onError: (error, errorInfo) => {
-      console.error('Page rendering error:', {
-        path: currentPath,
-        error: error.message,
-        stack: error.stack,
-        componentStack: errorInfo?.componentStack,
-      });
-    },
-  }, componentBuilder.buildComponent({
-    node: tree,
-    key: 0,
-    customProps: {},
-    elementPath: [0],
-    parentComponentName: null,
+  const {
+    tree,
+    currentPath,
     viewportWidth,
-    componentContext: null,
+    componentBuilder,
     locale,
     i18nConfig,
     cmsContext,
     cmsLocale,
     collectionItemsMap,
-    templateContext: templateContext ?? null
-  }));
-}
+    templateContext,
+  } = options;
 
+  if (!tree) return null;
 
+  return h(
+    ErrorBoundary,
+    {
+      level: 'page',
+      onError: (error, errorInfo) => {
+        console.error('Page rendering error:', {
+          path: currentPath,
+          error: error.message,
+          stack: error.stack,
+          componentStack: errorInfo?.componentStack,
+        });
+      },
+    },
+    componentBuilder.buildComponent({
+      node: tree,
+      key: 0,
+      customProps: {},
+      elementPath: [0],
+      parentComponentName: null,
+      viewportWidth,
+      componentContext: null,
+      locale,
+      i18nConfig,
+      cmsContext,
+      cmsLocale,
+      collectionItemsMap,
+      templateContext: templateContext ?? null,
+    }),
+  );
+}

package/lib/client/core/builders/embedBuilder.ts

@@ -3,30 +3,39 @@
  * Handles rendering of embed nodes (HTML content like SVGs, rich text, etc.)
  */
 
-import { createElement as h } from "react";
-import type { ReactElement } from "react";
-import type { EmbedNode, StyleObject, ResponsiveStyleObject, InteractiveStyles } from "../../../shared/types";
-import { extractAttributesFromNode } from "../../../shared/attributeNodeUtils";
-import { responsiveStylesToClasses } from "../../../shared/utilityClassMapper";
-import { getCachedResponsiveScalesConfig } from "../../responsiveStyleResolver";
-import { pathToString } from "../../../shared/pathArrayUtils";
-import { generateElementClassName, type ElementClassContext } from "../../../shared/elementClassName";
-import { InteractiveStylesRegistry } from "../../InteractiveStylesRegistry";
-import { hasInteractiveStyleMappings, extractInteractiveStyleMappings, resolveExtractedMappings } from "../../../shared/interactiveStyleMappings";
-import { UtilityClassCollector } from "../../styles/UtilityClassCollector";
-import DOMPurify from "isomorphic-dompurify";
-import { inlineSvgStyleRules } from "../../../shared/inlineSvgStyleRules";
-import type { ElementRegistry } from "../../elementRegistry";
-import type { BuilderContext } from "./types";
-import { hasItemTemplates, processItemTemplate, processItemPropsTemplate, type ValueResolver } from "../../../shared/itemTemplateUtils";
-import { resolveI18nValue, DEFAULT_I18N_CONFIG } from "../../../shared/i18n";
-import { processCMSTemplate } from "../cmsTemplateProcessor";
+import { createElement as h } from 'react';
+import type { ReactElement } from 'react';
+import type { EmbedNode, StyleObject, ResponsiveStyleObject, InteractiveStyles } from '../../../shared/types';
+import { extractAttributesFromNode } from '../../../shared/attributeNodeUtils';
+import { responsiveStylesToClasses } from '../../../shared/utilityClassMapper';
+import { getCachedResponsiveScalesConfig } from '../../responsiveStyleResolver';
+import { pathToString } from '../../../shared/pathArrayUtils';
+import { generateElementClassName, type ElementClassContext } from '../../../shared/elementClassName';
+import { InteractiveStylesRegistry } from '../../InteractiveStylesRegistry';
+import {
+  hasInteractiveStyleMappings,
+  extractInteractiveStyleMappings,
+  resolveExtractedMappings,
+} from '../../../shared/interactiveStyleMappings';
+import { UtilityClassCollector } from '../../styles/UtilityClassCollector';
+import DOMPurify from 'isomorphic-dompurify';
+import { inlineSvgStyleRules } from '../../../shared/inlineSvgStyleRules';
+import type { ElementRegistry } from '../../elementRegistry';
+import type { BuilderContext } from './types';
+import {
+  hasItemTemplates,
+  processItemTemplate,
+  processItemPropsTemplate,
+  type ValueResolver,
+} from '../../../shared/itemTemplateUtils';
+import { resolveI18nValue, DEFAULT_I18N_CONFIG } from '../../../shared/i18n';
+import { processCMSTemplate } from '../cmsTemplateProcessor';
 
 export interface EmbedBuilderDeps {
   elementRegistry: ElementRegistry;
   getEffectiveParentComponentName: (
     componentContext: string | null,
-    parentComponentName: string | null
+    parentComponentName: string | null,
   ) => string | null;
   /** Optional getter for current page name (for interactive styles class generation) */
   getCurrentPageName?: () => string;
@@ -40,19 +49,200 @@ export interface EmbedBuilderDeps {
  * Script tags and event handlers are still removed for security
  */
 const SANITIZE_CONFIG = {
-  ALLOWED_TAGS: ['svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'g', 'text', 'tspan', 'image', 'defs', 'use', 'linearGradient', 'radialGradient', 'stop', 'clipPath', 'mask', 'pattern', 'marker', 'symbol', 'a', 'div', 'span', 'p', 'br', 'button', 'img', 'iframe', 'video', 'audio', 'source', 'canvas', 'b', 'i', 'u', 'strong', 'em', 'sub', 'sup', 'mark', 's', 'small', 'del', 'ins', 'q', 'abbr', 'code', 'pre', 'blockquote', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'style', 'animate', 'animateTransform', 'animateMotion', 'set', 'filter', 'feGaussianBlur', 'feOffset', 'feMerge', 'feMergeNode', 'feColorMatrix', 'feComposite', 'feFlood', 'feMorphology', 'feBlend', 'feDropShadow', 'feTurbulence', 'feDisplacementMap', 'foreignObject'],
-  ALLOWED_ATTR: ['class', 'id', 'style', 'width', 'height', 'viewBox', 'xmlns', 'xmlns:xlink', 'xlink:href', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'stroke-dasharray', 'stroke-dashoffset', 'd', 'cx', 'cy', 'r', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'points', 'href', 'src', 'alt', 'target', 'rel', 'data-*', 'aria-*', 'transform', 'opacity', 'fill-opacity', 'fill-rule', 'clip-rule', 'clip-path', 'clipPathUnits', 'mask', 'mask-type', 'maskUnits', 'maskContentUnits', 'patternUnits', 'patternContentUnits', 'patternTransform', 'gradientUnits', 'gradientTransform', 'spreadMethod', 'preserveAspectRatio', 'marker-start', 'marker-mid', 'marker-end', 'markerUnits', 'markerWidth', 'markerHeight', 'refX', 'refY', 'orient', 'paint-order', 'vector-effect', 'filter', 'filterUnits', 'primitiveUnits', 'in', 'in2', 'result', 'stdDeviation', 'flood-color', 'flood-opacity', 'stroke-opacity', 'font-size', 'font-family', 'font-weight', 'font-style', 'text-anchor', 'dominant-baseline', 'offset', 'stop-color', 'stop-opacity', 'frameborder', 'allowfullscreen', 'allow', 'title', 'attributeName', 'values', 'dur', 'begin', 'end', 'repeatCount', 'repeatDur', 'keyTimes', 'keySplines', 'calcMode', 'from', 'to', 'by', 'additive', 'accumulate', 'type', 'rotate', 'keyPoints', 'path'],
-  KEEP_CONTENT: true
+  ALLOWED_TAGS: [
+    'svg',
+    'path',
+    'circle',
+    'rect',
+    'line',
+    'polyline',
+    'polygon',
+    'g',
+    'text',
+    'tspan',
+    'image',
+    'defs',
+    'use',
+    'linearGradient',
+    'radialGradient',
+    'stop',
+    'clipPath',
+    'mask',
+    'pattern',
+    'marker',
+    'symbol',
+    'a',
+    'div',
+    'span',
+    'p',
+    'br',
+    'button',
+    'img',
+    'iframe',
+    'video',
+    'audio',
+    'source',
+    'canvas',
+    'b',
+    'i',
+    'u',
+    'strong',
+    'em',
+    'sub',
+    'sup',
+    'mark',
+    's',
+    'small',
+    'del',
+    'ins',
+    'q',
+    'abbr',
+    'code',
+    'pre',
+    'blockquote',
+    'ul',
+    'ol',
+    'li',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'style',
+    'animate',
+    'animateTransform',
+    'animateMotion',
+    'set',
+    'filter',
+    'feGaussianBlur',
+    'feOffset',
+    'feMerge',
+    'feMergeNode',
+    'feColorMatrix',
+    'feComposite',
+    'feFlood',
+    'feMorphology',
+    'feBlend',
+    'feDropShadow',
+    'feTurbulence',
+    'feDisplacementMap',
+    'foreignObject',
+  ],
+  ALLOWED_ATTR: [
+    'class',
+    'id',
+    'style',
+    'width',
+    'height',
+    'viewBox',
+    'xmlns',
+    'xmlns:xlink',
+    'xlink:href',
+    'fill',
+    'stroke',
+    'stroke-width',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-dasharray',
+    'stroke-dashoffset',
+    'd',
+    'cx',
+    'cy',
+    'r',
+    'x',
+    'y',
+    'x1',
+    'y1',
+    'x2',
+    'y2',
+    'points',
+    'href',
+    'src',
+    'alt',
+    'target',
+    'rel',
+    'data-*',
+    'aria-*',
+    'transform',
+    'opacity',
+    'fill-opacity',
+    'fill-rule',
+    'clip-rule',
+    'clip-path',
+    'clipPathUnits',
+    'mask',
+    'mask-type',
+    'maskUnits',
+    'maskContentUnits',
+    'patternUnits',
+    'patternContentUnits',
+    'patternTransform',
+    'gradientUnits',
+    'gradientTransform',
+    'spreadMethod',
+    'preserveAspectRatio',
+    'marker-start',
+    'marker-mid',
+    'marker-end',
+    'markerUnits',
+    'markerWidth',
+    'markerHeight',
+    'refX',
+    'refY',
+    'orient',
+    'paint-order',
+    'vector-effect',
+    'filter',
+    'filterUnits',
+    'primitiveUnits',
+    'in',
+    'in2',
+    'result',
+    'stdDeviation',
+    'flood-color',
+    'flood-opacity',
+    'stroke-opacity',
+    'font-size',
+    'font-family',
+    'font-weight',
+    'font-style',
+    'text-anchor',
+    'dominant-baseline',
+    'offset',
+    'stop-color',
+    'stop-opacity',
+    'frameborder',
+    'allowfullscreen',
+    'allow',
+    'title',
+    'attributeName',
+    'values',
+    'dur',
+    'begin',
+    'end',
+    'repeatCount',
+    'repeatDur',
+    'keyTimes',
+    'keySplines',
+    'calcMode',
+    'from',
+    'to',
+    'by',
+    'additive',
+    'accumulate',
+    'type',
+    'rotate',
+    'keyPoints',
+    'path',
+  ],
+  KEEP_CONTENT: true,
 };
 
 /**
  * Build an embed node
  */
-export function buildEmbed(
-  node: EmbedNode,
-  ctx: BuilderContext,
-  deps: EmbedBuilderDeps
-): ReactElement {
+export function buildEmbed(node: EmbedNode, ctx: BuilderContext, deps: EmbedBuilderDeps): ReactElement {
   const { key, elementPath, parentComponentName, componentContext, componentRootPath, cmsItemIndexPath } = ctx;
 
   // Process templates in html property before sanitization (matching SSR behavior)
@@ -87,7 +277,7 @@ export function buildEmbed(
   const extractedAttributes = extractAttributesFromNode(node as any);
 
   // Build embed node props with all features
-  const embedProps: Record<string, any> = {
+  const embedProps: Record<string, unknown> = {
     key,
     'data-element-path': pathToString(elementPath),
     'data-embed-node': 'true',
@@ -103,7 +293,7 @@ export function buildEmbed(
         }
       }
     },
-    dangerouslySetInnerHTML: { __html: sanitizedHtml }
+    dangerouslySetInnerHTML: { __html: sanitizedHtml },
   };
 
   // Add CMS item index path for elements inside CMS lists
@@ -112,7 +302,7 @@ export function buildEmbed(
   }
 
   // Start building className
-  let classNames: string[] = ['oem'];
+  const classNames: string[] = ['oem'];
 
   // Convert embed styles to utility classes
   if (node.style) {
@@ -128,16 +318,15 @@ export function buildEmbed(
       processedStyle = processItemPropsTemplate(
         node.style as Record<string, unknown>,
         ctx.templateContext,
-        i18nResolver
+        i18nResolver,
       ) as StyleObject | ResponsiveStyleObject;
     }
     const scales = getCachedResponsiveScalesConfig();
-    const fluidActive =
-      scales?.enabled === true && scales?.mode === 'fluid';
-    const utilityClasses = responsiveStylesToClasses(
-      processedStyle as StyleObject | ResponsiveStyleObject,
-      { fluidActive, responsiveScales: scales ?? undefined }
-    );
+    const fluidActive = scales?.enabled === true && scales?.mode === 'fluid';
+    const utilityClasses = responsiveStylesToClasses(processedStyle as StyleObject | ResponsiveStyleObject, {
+      fluidActive,
+      responsiveScales: scales ?? undefined,
+    });
     UtilityClassCollector.collect(utilityClasses);
     classNames.push(...utilityClasses);
   }
@@ -150,11 +339,10 @@ export function buildEmbed(
   if ((nodeInteractiveStyles && nodeInteractiveStyles.length > 0) || nodeGenerateElementClass) {
     // Determine file type and name for element class generation
     const useComponentContext = Boolean(componentContext);
-    const fileType = useComponentContext ? 'component' : (deps.getCurrentFileType?.() || 'page');
-    const fileName = useComponentContext ? componentContext! : (deps.getCurrentPageName?.() || 'page');
-    const pathForClass = useComponentContext && componentRootPath
-      ? elementPath.slice(componentRootPath.length)
-      : elementPath;
+    const fileType = useComponentContext ? 'component' : deps.getCurrentFileType?.() || 'page';
+    const fileName = useComponentContext ? componentContext! : deps.getCurrentPageName?.() || 'page';
+    const pathForClass =
+      useComponentContext && componentRootPath ? elementPath.slice(componentRootPath.length) : elementPath;
 
     const elementClassCtx: ElementClassContext = {
       fileType,
@@ -186,12 +374,11 @@ export function buildEmbed(
         for (const rule of nodeInteractiveStyles) {
           if (rule.previewProp && ctx.componentResolvedProps[rule.previewProp] === true) {
             const previewScales = getCachedResponsiveScalesConfig();
-            const previewFluidActive =
-              previewScales?.enabled === true && previewScales?.mode === 'fluid';
-            const styleClasses = responsiveStylesToClasses(
-              rule.style as StyleObject | ResponsiveStyleObject,
-              { fluidActive: previewFluidActive, responsiveScales: previewScales ?? undefined }
-            );
+            const previewFluidActive = previewScales?.enabled === true && previewScales?.mode === 'fluid';
+            const styleClasses = responsiveStylesToClasses(rule.style as StyleObject | ResponsiveStyleObject, {
+              fluidActive: previewFluidActive,
+              responsiveScales: previewScales ?? undefined,
+            });
             UtilityClassCollector.collect(styleClasses);
             previewClasses.push(...styleClasses);
           }
@@ -208,9 +395,9 @@ export function buildEmbed(
   // would be spread onto the React element below and override the className that
   // holds the utility classes derived from node.style.
   if ('class' in extractedAttributes || 'className' in extractedAttributes) {
-    const attrClass = ((extractedAttributes as Record<string, unknown>).class
-      ?? (extractedAttributes as Record<string, unknown>).className
-      ?? '') as string;
+    const attrClass = ((extractedAttributes as Record<string, unknown>).class ??
+      (extractedAttributes as Record<string, unknown>).className ??
+      '') as string;
     if (attrClass) {
       classNames.push(...attrClass.split(/\s+/));
     }
@@ -231,9 +418,10 @@ export function buildEmbed(
     const i18nResolver: ValueResolver | undefined = effectiveLocale
       ? (value: unknown) => resolveI18nValue(value, effectiveLocale, config)
       : undefined;
-    processedAttributes = processItemPropsTemplate(
-      extractedAttributes, ctx.templateContext, i18nResolver
-    ) as Record<string, string | number | boolean>;
+    processedAttributes = processItemPropsTemplate(extractedAttributes, ctx.templateContext, i18nResolver) as Record<
+      string,
+      string | number | boolean
+    >;
   }
 
   // Add extracted attributes (like class, id, data-*, aria-*, etc.)

package/lib/client/core/builders/linkBuilder.ts

@@ -3,25 +3,22 @@
  * Handles rendering of Link components with navigation and prefetching
  */
 
-import { createElement as h } from "react";
-import type { ReactElement } from "react";
-import { navigateTo } from "../../navigation";
-import { pathToString } from "../../../shared/pathArrayUtils";
-import type { ElementRegistry } from "../../elementRegistry";
-import type { PrefetchService } from "../../services/PrefetchService";
-import type { PrefetchStrategy } from "../../../shared/types/prefetch";
-import type { BuilderContext, BuildResult, BuildChildrenContext } from "./types";
+import { createElement as h } from 'react';
+import type { ReactElement } from 'react';
+import { navigateTo } from '../../navigation';
+import { pathToString } from '../../../shared/pathArrayUtils';
+import type { ElementRegistry } from '../../elementRegistry';
+import type { PrefetchService } from '../../services/PrefetchService';
+import type { PrefetchStrategy } from '../../../shared/types/prefetch';
+import type { BuilderContext, BuildResult, BuildChildrenContext } from './types';
 
 export interface LinkBuilderDeps {
   elementRegistry: ElementRegistry;
   prefetchService?: PrefetchService;
-  buildChildren: (
-    children: unknown,
-    ctx: BuildChildrenContext
-  ) => BuildResult;
+  buildChildren: (children: unknown, ctx: BuildChildrenContext) => BuildResult;
   getEffectiveParentComponentName: (
     componentContext: string | null,
-    parentComponentName: string | null
+    parentComponentName: string | null,
   ) => string | null;
 }
 
@@ -32,12 +29,25 @@ export function buildLink(
   props: Record<string, unknown>,
   children: unknown,
   ctx: BuilderContext,
-  deps: LinkBuilderDeps
+  deps: LinkBuilderDeps,
 ): ReactElement {
   const {
-    key, elementPath, parentComponentName, viewportWidth, componentContext, componentRootPath,
-    locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap,
-    itemContext, cmsItemIndexPath, cmsListPaths, templateContext, componentResolvedProps
+    key,
+    elementPath,
+    parentComponentName,
+    viewportWidth,
+    componentContext,
+    componentRootPath,
+    locale,
+    i18nConfig,
+    cmsContext,
+    cmsLocale,
+    collectionItemsMap,
+    itemContext,
+    cmsItemIndexPath,
+    cmsListPaths,
+    templateContext,
+    componentResolvedProps,
   } = ctx;
 
   const { to, prefetch: prefetchAttr, ...restProps } = props;
@@ -47,7 +57,7 @@ export function buildLink(
   const effectiveParentComponentName = deps.getEffectiveParentComponentName(componentContext, parentComponentName);
 
   // Navigation click handler
-  const navigationOnClick = (e: any) => {
+  const navigationOnClick = (e: { preventDefault: () => void }) => {
     e.preventDefault();
     if (typeof to === 'string' && to) {
       navigateTo(to);
@@ -101,36 +111,53 @@ export function buildLink(
     }
   }
 
-  return h('a', {
-    ...linkProps as Record<string, any>,
-    ref: (el: HTMLElement | null): void => {
-      const pathKey = pathToString(elementPath);
+  return h(
+    'a',
+    {
+      ...(linkProps as Record<string, unknown>),
+      ref: (el: HTMLElement | null): void => {
+        const pathKey = pathToString(elementPath);
 
-      // Cleanup when element is removed from DOM
-      if (!el) {
-        deps.prefetchService?.unobserveLinkByPath(pathKey);
-      }
+        // Cleanup when element is removed from DOM
+        if (!el) {
+          deps.prefetchService?.unobserveLinkByPath(pathKey);
+        }
 
-      deps.elementRegistry.register(elementPath, el, effectiveParentComponentName, false);
+        deps.elementRegistry.register(elementPath, el, effectiveParentComponentName, false);
 
-      // Handle viewport strategy - observe link when it enters DOM
-      if (el && deps.prefetchService?.isEnabled() && isInternalLink) {
-        const strategy = (prefetchAttr as PrefetchStrategy) || deps.prefetchService.getDefaultStrategy();
-        if (strategy === 'viewport') {
-          deps.prefetchService.observeLink(el as HTMLAnchorElement, pathKey);
+        // Handle viewport strategy - observe link when it enters DOM
+        if (el && deps.prefetchService?.isEnabled() && isInternalLink) {
+          const strategy = (prefetchAttr as PrefetchStrategy) || deps.prefetchService.getDefaultStrategy();
+          if (strategy === 'viewport') {
+            deps.prefetchService.observeLink(el as HTMLAnchorElement, pathKey);
+          }
         }
-      }
+      },
+      onClick: navigationOnClick,
+      ...prefetchHandlers,
+      style: {
+        textDecoration: 'none',
+        color: '#0070f3',
+        cursor: 'pointer',
+        ...(props.style && typeof props.style === 'object' ? props.style : {}),
+      },
     },
-    onClick: navigationOnClick,
-    ...prefetchHandlers,
-    style: {
-      textDecoration: 'none',
-      color: '#0070f3',
-      cursor: 'pointer',
-      ...(props.style && typeof props.style === 'object' ? props.style : {}),
-    }
-  }, deps.buildChildren(children, {
-    elementPath, parentComponentName: effectiveParentComponentName, viewportWidth, componentContext, componentRootPath,
-    locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap, itemContext, cmsItemIndexPath, cmsListPaths, templateContext, componentResolvedProps
-  }));
+    deps.buildChildren(children, {
+      elementPath,
+      parentComponentName: effectiveParentComponentName,
+      viewportWidth,
+      componentContext,
+      componentRootPath,
+      locale,
+      i18nConfig,
+      cmsContext,
+      cmsLocale,
+      collectionItemsMap,
+      itemContext,
+      cmsItemIndexPath,
+      cmsListPaths,
+      templateContext,
+      componentResolvedProps,
+    }),
+  );
 }