feat(atomic): expose idiomatic react templating functionality

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

@@ -0,0 +1,22 @@
+import React, {useEffect, useRef} from 'react';
+import type {JSX as AtomicJSX} from '@coveo/atomic';
+import type {Result} from '@coveo/atomic/headless';
+import {AtomicResultList} from './stencil-generated';
+import ReactDOMServer from 'react-dom/server';
+
+interface WrapperProps extends AtomicJSX.AtomicResultList {
+  template: (result: Result) => JSX.Element;
+}
+
+export const ResultListWrapper: React.FC<WrapperProps> = (props) => {
+  const {template, ...otherProps} = props;
+  const resultListRef = useRef<HTMLAtomicResultListElement>(null);
+  useEffect(() => {
+    resultListRef.current?.setRenderFunction((result) => {
+      const wrapper = document.createElement('div');
+      wrapper.innerHTML = ReactDOMServer.renderToString(template(result));
+      return wrapper;
+    });
+  }, [resultListRef]);
+  return <AtomicResultList ref={resultListRef} {...otherProps} />;
+};

packages/atomic-react/src/components/index.ts

@@ -4,4 +4,4 @@ export * from '@coveo/atomic/headless';
 // Important: Re-exporting under the same name (eg: "AtomicSearchInterface") shadows the original component
 // and should wrap it nicely for users of the library
 export {SearchInterfaceWrapper as AtomicSearchInterface} from './SearchInterfaceWrapper';
-export {ResultTemplateWrapper as AtomicResultTemplate} from './ResultTemplateWrapper';
+export {ResultListWrapper as AtomicResultList} from './ResultListWrapper';

packages/atomic-react/src/components/stencil-generated/index.ts

@@ -16,7 +16,6 @@ export const AtomicDidYouMean = /*@__PURE__*/createReactComponent<JSX.AtomicDidY
 export const AtomicExternal = /*@__PURE__*/createReactComponent<JSX.AtomicExternal, HTMLAtomicExternalElement>('atomic-external');
 export const AtomicFacet = /*@__PURE__*/createReactComponent<JSX.AtomicFacet, HTMLAtomicFacetElement>('atomic-facet');
 export const AtomicFacetManager = /*@__PURE__*/createReactComponent<JSX.AtomicFacetManager, HTMLAtomicFacetManagerElement>('atomic-facet-manager');
-export const AtomicFieldCondition = /*@__PURE__*/createReactComponent<JSX.AtomicFieldCondition, HTMLAtomicFieldConditionElement>('atomic-field-condition');
 export const AtomicFormatCurrency = /*@__PURE__*/createReactComponent<JSX.AtomicFormatCurrency, HTMLAtomicFormatCurrencyElement>('atomic-format-currency');
 export const AtomicFormatNumber = /*@__PURE__*/createReactComponent<JSX.AtomicFormatNumber, HTMLAtomicFormatNumberElement>('atomic-format-number');
 export const AtomicFormatUnit = /*@__PURE__*/createReactComponent<JSX.AtomicFormatUnit, HTMLAtomicFormatUnitElement>('atomic-format-unit');
@@ -54,7 +53,6 @@ export const AtomicResultSectionExcerpt = /*@__PURE__*/createReactComponent<JSX.
 export const AtomicResultSectionTitle = /*@__PURE__*/createReactComponent<JSX.AtomicResultSectionTitle, HTMLAtomicResultSectionTitleElement>('atomic-result-section-title');
 export const AtomicResultSectionTitleMetadata = /*@__PURE__*/createReactComponent<JSX.AtomicResultSectionTitleMetadata, HTMLAtomicResultSectionTitleMetadataElement>('atomic-result-section-title-metadata');
 export const AtomicResultSectionVisual = /*@__PURE__*/createReactComponent<JSX.AtomicResultSectionVisual, HTMLAtomicResultSectionVisualElement>('atomic-result-section-visual');
-export const AtomicResultTemplate = /*@__PURE__*/createReactComponent<JSX.AtomicResultTemplate, HTMLAtomicResultTemplateElement>('atomic-result-template');
 export const AtomicResultText = /*@__PURE__*/createReactComponent<JSX.AtomicResultText, HTMLAtomicResultTextElement>('atomic-result-text');
 export const AtomicResultsPerPage = /*@__PURE__*/createReactComponent<JSX.AtomicResultsPerPage, HTMLAtomicResultsPerPageElement>('atomic-results-per-page');
 export const AtomicSearchBox = /*@__PURE__*/createReactComponent<JSX.AtomicSearchBox, HTMLAtomicSearchBoxElement>('atomic-search-box');

packages/atomic-react/src/components/stencil-generated/react-component-lib/createComponent.tsx

@@ -6,6 +6,7 @@ import {
   dashToPascalCase,
   isCoveredByReact,
   mergeRefs,
+  camelToDashCase
 } from './utils';
 
 export interface HTMLStencilElement extends HTMLElement {
@@ -65,7 +66,7 @@ export const createReactComponent = <
             (acc as any)[name] = (cProps as any)[name];
           }
         } else {
-          (acc as any)[name] = (cProps as any)[name];
+          (acc as any)[camelToDashCase(name)] = (cProps as any)[name];
         }
         return acc;
       }, {});