JavaScript Search Framework component equivalences

document.addEventListener("DOMContentLoaded", function () {
  Coveo.SearchEndpoint.configureSampleEndpointV2();

  const root = document.querySelector("#search");

  Coveo.$$(root).on("buildingQuery", function (e, args) {
    args.queryBuilder.advancedExpression.add('@source==("Documentation")');

    args.queryBuilder.addContext({
      audience: "developer"
    });
  });

  Coveo.$$(root).on("doneBuildingQuery", function (e, args) {
    const aq = args.queryBuilder.advancedExpression.build();
  });

  Coveo.init(root);
});

<script type="module">
  const {
    loadAdvancedSearchQueryActions,
    loadContextActions
  } = await import('@coveo/headless');

  (async () => {
    await customElements.whenDefined('atomic-search-interface');
    const searchInterface = document.querySelector('atomic-search-interface');

    await searchInterface.initialize({
      accessToken: '<ACCESS_TOKEN>',
      organizationId: '<ORGANIZATION_ID>'
    });

    const { engine } = searchInterface;

    engine.dispatch(loadAdvancedSearchQueryActions(engine) 
      .updateAdvancedSearchQueries({aq: '@source==("Documentation")'})
    );

    engine.dispatch(loadContextActions(engine).addContext({ 
      contextKey: 'audience',
      contextValue: 'developer',
    }));

    searchInterface.executeFirstSearch();
  })();
</script>

<c-quantic-search-interface engine-id="main" search-hub="Docs">
  <c-my-init engine-id="main"></c-my-init> 
</c-quantic-search-interface>

// c/myInit/myInit.js

import {LightningElement, api} from 'lwc';
import { registerComponentForInit, initializeWithHeadless } from 'c/quanticHeadlessLoader';

export default class MyInit extends LightningElement {
  @api engineId;

  contextController;

  connectedCallback() {
    registerComponentForInit(this, this.engineId);
  }

  renderedCallback() {
    initializeWithHeadless(this, this.engineId, this.initialize);
  }

  initialize = (engine) => {
    engine.dispatch(
      CoveoHeadless.loadContextActions(engine).addContext({
        contextKey: 'audience',
        contextValue: 'developer',
      })
    );

    engine.dispatch(CoveoHeadless.loadAdvancedSearchQueryActions(engine)
      .updateAdvancedSearchQueries({aq: '@source==("Documentation")'})
    );
  }
}

document.addEventListener("DOMContentLoaded", function () {
  Coveo.SearchEndpoint.configureSampleEndpointV2();

  const root = document.querySelector("#search");

  Coveo.$$(root)
    .on("querySuccess", function (e, args) {
      document.getElementById("error").style.display = "none";
      document.getElementById("no-results").style.display = "none";

      const results = args.results?.results || [];
      if (results.length === 0) {
        document.getElementById("no-results").style.display = "block";
      }
    })
    .on("queryError", function (e, args) {
      const errorElement = document.getElementById("error");
      const message = args?.error?.message || "Search failed.";
      errorElement.textContent = message;
      errorElement.style.display = "block";
    });

  Coveo.init(root);
});

<atomic-search-interface>
  <atomic-search-box></atomic-search-box> 
  <atomic-query-error></atomic-query-error> 
  <atomic-no-results></atomic-no-results> 

  <atomic-layout-section section="results">
    <atomic-result-list></atomic-result-list> 
  </atomic-layout-section>
</atomic-search-interface>

<c-quantic-search-interface engine-id="main" search-hub="Docs"> 
  <c-quantic-search-box engine-id="main"></c-quantic-search-box>
  <c-quantic-query-error engine-id="main"></c-quantic-query-error> 
  <c-quantic-no-results engine-id="main"></c-quantic-no-results> 

  <c-quantic-result-list engine-id="main"></c-quantic-result-list> 
</c-quantic-search-interface>

document.addEventListener("DOMContentLoaded", function() {
  Coveo.SearchEndpoint.configureSampleEndpointV2();

  root = document.querySelector("#search");

  Coveo.$$(root).on("newResultsDisplayed", function(e, args) {
    for (var i = 0; i < e.target.lastChild.children.length; i++) {
      var currentResult = e.target.lastChild.children[i];
      var formattedTitle = currentResult.CoveoResult.raw.source + " - " + currentResult.CoveoResult.Title;
      currentResult.children[0].querySelectorAll("div.coveo-result-cell > a.CoveoResultLink").forEach(function(element) {
        element.innerHTML = formattedTitle;
      });
    }
  });

  Coveo.init(root);
});

<atomic-search-interface>
  <atomic-result-list fields-to-include="title,source">
    <atomic-result-template>
      <template>
        <atomic-result-section-title>
          <atomic-result-text field="source"></atomic-result-text>
          <span aria-hidden="true"> - </span>
          <atomic-result-link></atomic-result-link>
        </atomic-result-section-title>

        <atomic-result-section-bottom-metadata>
          <atomic-result-printable-uri></atomic-result-printable-uri>
        </atomic-result-section-bottom-metadata>
      </template>
    </atomic-result-template>
  </atomic-result-list>
</atomic-search-interface>

<c-quantic-search-interface engine-id="main" search-hub="Docs">
  <div onregisterresulttemplates={handleResultTemplateRegistration}>
    <c-quantic-result-list engine-id="main"></c-quantic-result-list>
  </div>
</c-quantic-search-interface>

// ./resultTemplates/resultTemplateExample.html'
<c-quantic-result-template>
  <div slot="title" class="slds-truncate">
    <c-quantic-result-field field="source"></c-quantic-result-field>
    <span aria-hidden="true"> - </span>
    <c-quantic-result-link engine-id="main"></c-quantic-result-link>
  </div>
  <div slot="bottom-metadata" class="slds-text-body_small">
    <c-quantic-result-printable-uri></c-quantic-result-printable-uri>
  </div>
</c-quantic-result-template>

import resultTemplateExample from './resultTemplates/resultTemplateExample.html';
import {LightningElement, api} from 'lwc';

export default class MySearchPageExample extends LightningElement {
  @api engineId = 'main'; 
  @api searchHub = 'Docs';

  const handleResultTemplateRegistration = (event) => { 
    event.stopPropogation(); 

    const resultTemplatesManager = event.detail;

    resultTemplatesManager.registerTemplates( 
      {
        content: resultTemplateExample,
        fields: ['source','title'],
      },
    );
  };
}