fix(atomic): revert #4287

.prettierignore

@@ -22,5 +22,4 @@ packages/atomic/src/external-builds/**/*
 packages/atomic/src/generated/**
 packages/quantic/docs/out/quantic-docs.json
 packages/samples/headless-react/build/**/*
-packages/samples/angular/src/lang/*.json
-packages/samples/vuejs/public/lang/*.json
+packages/samples/angular/src/lang/*.json

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts

@@ -17,7 +17,6 @@ AtomicCommerceFacets,
 AtomicCommerceInterface,
 AtomicCommerceLoadMoreProducts,
 AtomicCommercePager,
-AtomicCommerceProductList,
 AtomicCommerceProductsPerPage,
 AtomicCommerceQuerySummary,
 AtomicCommerceRefineModal,
@@ -129,7 +128,6 @@ AtomicCommerceFacets,
 AtomicCommerceInterface,
 AtomicCommerceLoadMoreProducts,
 AtomicCommercePager,
-AtomicCommerceProductList,
 AtomicCommerceProductsPerPage,
 AtomicCommerceQuerySummary,
 AtomicCommerceRefineModal,

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts

@@ -274,29 +274,6 @@ export declare interface AtomicCommercePager extends Components.AtomicCommercePa
 }
 
 
-@ProxyCmp({
-  inputs: ['density', 'display', 'gridCellLinkTarget', 'imageSize', 'numberOfPlaceholders'],
-  methods: ['setRenderFunction']
-})
-@Component({
-  selector: 'atomic-commerce-product-list',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['density', 'display', 'gridCellLinkTarget', 'imageSize', 'numberOfPlaceholders'],
-})
-export class AtomicCommerceProductList {
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface AtomicCommerceProductList extends Components.AtomicCommerceProductList {}
-
-
 @ProxyCmp({
   inputs: ['choicesDisplayed', 'initialChoice']
 })
@@ -1302,14 +1279,14 @@ export declare interface AtomicRelevanceInspector extends Components.AtomicRelev
 
 
 @ProxyCmp({
-  inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'linkContent', 'result', 'stopPropagation']
+  inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'result', 'stopPropagation']
 })
 @Component({
   selector: 'atomic-result',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'linkContent', 'result', 'stopPropagation'],
+  inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'result', 'stopPropagation'],
 })
 export class AtomicResult {
   protected el: HTMLElement;

packages/atomic-react/src/components/commerce/CommerceProductListWrapper.tsx

@@ -3,15 +3,7 @@ import type {Product} from '@coveo/headless/commerce';
 import React, {useEffect, useRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import {renderToString} from 'react-dom/server';
-import {
-  AtomicCommerceProductList,
-  AtomicProductLink,
-} from '../stencil-generated/commerce';
-
-interface Template {
-  contentTemplate: JSX.Element;
-  linkTemplate: JSX.Element;
-}
+import {AtomicCommerceProductList} from '../stencil-generated/commerce';
 
 /**
  * The properties of the AtomicCommerceProductList component
@@ -21,7 +13,7 @@ interface WrapperProps extends AtomicJSX.AtomicCommerceProductList {
    * A template function that takes a result item and outputs its target rendering as a JSX element.
    * It can be used to conditionally render different type of result templates based on the properties of each result.
    */
-  template: (result: Product) => JSX.Element | Template;
+  template: (result: Product) => JSX.Element;
 }
 
 /**
@@ -35,30 +27,12 @@ export const ListWrapper: React.FC<WrapperProps> = (props) => {
   const commerceProductListRef =
     useRef<HTMLAtomicCommerceProductListElement>(null);
   useEffect(() => {
-    commerceProductListRef.current?.setRenderFunction(
-      (product, root, linkContainer) => {
-        const templateResult = template(product as Product);
-        if (hasLinkTemplate(templateResult)) {
-          createRoot(linkContainer!).render(templateResult.linkTemplate);
-          createRoot(root).render(templateResult.contentTemplate);
-          return renderToString(templateResult.contentTemplate);
-        } else {
-          createRoot(root).render(templateResult);
-          createRoot(linkContainer!).render(
-            <AtomicProductLink></AtomicProductLink>
-          );
-          return renderToString(templateResult);
-        }
-      }
-    );
+    commerceProductListRef.current?.setRenderFunction((result, root) => {
+      createRoot(root).render(template(result as Product));
+      return renderToString(template(result as Product));
+    });
   }, [commerceProductListRef]);
   return (
     <AtomicCommerceProductList ref={commerceProductListRef} {...otherProps} />
   );
 };
-
-const hasLinkTemplate = (
-  template: JSX.Element | Template
-): template is Template => {
-  return (template as Template).linkTemplate !== undefined;
-};

packages/atomic-react/src/components/commerce/CommerceRecommendationListWrapper.tsx

@@ -3,15 +3,7 @@ import type {Product} from '@coveo/headless/commerce';
 import React, {useEffect, useRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import {renderToString} from 'react-dom/server';
-import {
-  AtomicCommerceRecommendationList,
-  AtomicProductLink,
-} from '../stencil-generated/commerce';
-
-interface Template {
-  contentTemplate: JSX.Element;
-  linkTemplate: JSX.Element;
-}
+import {AtomicCommerceRecommendationList} from '../stencil-generated/commerce';
 
 /**
  * The properties of the AtomicCommerceRecommendationList component
@@ -21,7 +13,7 @@ interface WrapperProps extends AtomicJSX.AtomicCommerceRecommendationList {
    * A template function that takes a result item and outputs its target rendering as a JSX element.
    * It can be used to conditionally render different type of result templates based on the properties of each result.
    */
-  template: (result: Product) => JSX.Element | Template;
+  template: (result: Product) => JSX.Element;
 }
 
 /**
@@ -35,22 +27,10 @@ export const ListWrapper: React.FC<WrapperProps> = (props) => {
   const commerceRecsListRef =
     useRef<HTMLAtomicCommerceRecommendationListElement>(null);
   useEffect(() => {
-    commerceRecsListRef.current?.setRenderFunction(
-      (product, root, linkContainer) => {
-        const templateResult = template(product as Product);
-        if (hasLinkTemplate(templateResult)) {
-          createRoot(linkContainer!).render(templateResult.linkTemplate);
-          createRoot(root).render(templateResult.contentTemplate);
-          return renderToString(templateResult.contentTemplate);
-        } else {
-          createRoot(root).render(templateResult);
-          createRoot(linkContainer!).render(
-            <AtomicProductLink></AtomicProductLink>
-          );
-          return renderToString(templateResult);
-        }
-      }
-    );
+    commerceRecsListRef.current?.setRenderFunction((result, root) => {
+      createRoot(root).render(template(result as Product));
+      return renderToString(template(result as Product));
+    });
   }, [commerceRecsListRef]);
   return (
     <AtomicCommerceRecommendationList
@@ -59,9 +39,3 @@ export const ListWrapper: React.FC<WrapperProps> = (props) => {
     />
   );
 };
-
-const hasLinkTemplate = (
-  template: JSX.Element | Template
-): template is Template => {
-  return (template as Template).linkTemplate !== undefined;
-};

packages/atomic-react/src/components/recommendation/RecsListWrapper.tsx

@@ -3,12 +3,7 @@ import type {Result} from '@coveo/headless/recommendation';
 import React, {useEffect, useRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import {renderToString} from 'react-dom/server';
-import {AtomicRecsList, AtomicResultLink} from '../stencil-generated/search';
-
-interface Template {
-  contentTemplate: JSX.Element;
-  linkTemplate: JSX.Element;
-}
+import {AtomicRecsList} from '../stencil-generated/search';
 
 /**
  * The properties of the AtomicRecsList component
@@ -18,7 +13,7 @@ interface WrapperProps extends AtomicJSX.AtomicRecsList {
    * A template function that takes a result item and outputs its target rendering as a JSX element.
    * It can be used to conditionally render different type of result templates based on the properties of each result.
    */
-  template: (result: Result) => JSX.Element | Template;
+  template: (result: Result) => JSX.Element;
 }
 
 /**
@@ -31,26 +26,10 @@ export const RecsListWrapper: React.FC<WrapperProps> = (props) => {
   const {template, ...otherProps} = props;
   const recsListRef = useRef<HTMLAtomicRecsListElement>(null);
   useEffect(() => {
-    recsListRef.current?.setRenderFunction((result, root, linkContainer) => {
-      const templateResult = template(result as Result);
-      if (hasLinkTemplate(templateResult)) {
-        createRoot(linkContainer!).render(templateResult.linkTemplate);
-        createRoot(root).render(templateResult.contentTemplate);
-        return renderToString(templateResult.contentTemplate);
-      } else {
-        createRoot(root).render(templateResult);
-        createRoot(linkContainer!).render(
-          <AtomicResultLink></AtomicResultLink>
-        );
-        return renderToString(templateResult);
-      }
+    recsListRef.current?.setRenderFunction((result, root) => {
+      createRoot(root).render(template(result as Result));
+      return renderToString(template(result as Result));
     });
   }, [recsListRef]);
   return <AtomicRecsList ref={recsListRef} {...otherProps} />;
 };
-
-const hasLinkTemplate = (
-  template: JSX.Element | Template
-): template is Template => {
-  return (template as Template).linkTemplate !== undefined;
-};

packages/atomic-react/src/components/search/ResultListWrapper.tsx

@@ -3,12 +3,7 @@ import type {Result} from '@coveo/headless';
 import React, {useEffect, useRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import {renderToString} from 'react-dom/server';
-import {AtomicResultLink, AtomicResultList} from '../stencil-generated/search';
-
-interface Template {
-  contentTemplate: JSX.Element;
-  linkTemplate: JSX.Element;
-}
+import {AtomicResultList} from '../stencil-generated/search';
 
 /**
  * The properties of the AtomicResultList component
@@ -18,7 +13,7 @@ interface WrapperProps extends AtomicJSX.AtomicResultList {
    * A template function that takes a result item and outputs its target rendering as a JSX element.
    * It can be used to conditionally render different type of result templates based on the properties of each result.
    */
-  template: (result: Result) => JSX.Element | Template;
+  template: (result: Result) => JSX.Element;
 }
 
 /**
@@ -31,26 +26,10 @@ export const ResultListWrapper: React.FC<WrapperProps> = (props) => {
   const {template, ...otherProps} = props;
   const resultListRef = useRef<HTMLAtomicResultListElement>(null);
   useEffect(() => {
-    resultListRef.current?.setRenderFunction((result, root, linkContainer) => {
-      const templateResult = template(result as Result);
-      if (hasLinkTemplate(templateResult)) {
-        createRoot(linkContainer!).render(templateResult.linkTemplate);
-        createRoot(root).render(templateResult.contentTemplate);
-        return renderToString(templateResult.contentTemplate);
-      } else {
-        createRoot(root).render(templateResult);
-        createRoot(linkContainer!).render(
-          <AtomicResultLink></AtomicResultLink>
-        );
-        return renderToString(templateResult);
-      }
+    resultListRef.current?.setRenderFunction((result, root) => {
+      createRoot(root).render(template(result as Result));
+      return renderToString(template(result as Result));
     });
   }, [resultListRef]);
   return <AtomicResultList ref={resultListRef} {...otherProps} />;
 };
-
-const hasLinkTemplate = (
-  template: JSX.Element | Template
-): template is Template => {
-  return (template as Template).linkTemplate !== undefined;
-};

packages/atomic/cypress/e2e/result-list/result-components/result-link.cypress.ts

@@ -81,7 +81,7 @@ describe('Result Link Component', () => {
       });
 
       it('should render an "atomic-result-text" component containing the title', () => {
-        ResultLinkSelectors.firstInResult().first().should('have.text', title);
+        ResultLinkSelectors.firstInResult().should('have.text', title);
       });
     });
 

packages/atomic/cypress/e2e/result-list/result-components/result-text-selectors.ts

@@ -5,6 +5,6 @@ export const resultTextComponent = 'atomic-result-text';
 export const ResultTextSelectors = {
   shadow: () => cy.get(resultTextComponent),
   firstInResult: () =>
-    ResultListSelectors.firstResult().find(resultTextComponent).first(),
+    ResultListSelectors.firstResult().find(resultTextComponent),
   highlight: () => ResultTextSelectors.firstInResult().find('b'),
 };