Lit conversion

Author: lavoiesl

packages/atomic/src/components/search/result-template-components/quickview-iframe/quickview-iframe.spec.ts

@@ -1,11 +1,10 @@
 import type {SearchEngine} from '@coveo/headless';
-import type {VNode} from '@stencil/core';
+import {html} from 'lit';
 import {beforeEach, describe, expect, it, vi} from 'vitest';
-import {fixtureWrapper} from '@/vitest-utils/testing-helpers/fixture-wrapper';
-import {renderStencilVNode} from '@/vitest-utils/testing-helpers/stencil-vnode-renderer';
-import {QuickviewIframe} from './stencil-quickview-iframe';
+import {renderFunctionFixture} from '@/vitest-utils/testing-helpers/fixture';
+import {renderQuickviewIframe} from './quickview-iframe';
 
-describe('QuickviewIframe (Stencil)', () => {
+describe('#renderQuickviewIframe', () => {
   let mockOnSetIframeRef: (ref: HTMLIFrameElement) => void;
   let mockLogger: SearchEngine['logger'];
 
@@ -16,13 +15,6 @@ describe('QuickviewIframe (Stencil)', () => {
     } as unknown as SearchEngine['logger'];
   });
 
-  /**
-   * Helper function to render the QuickviewIframe component.
-   * This calls the actual Stencil functional component and renders its output.
-   *
-   * For Lit migration: Replace this with a helper that uses renderFunctionFixture
-   * with the Lit component.
-   */
   const renderComponent = async (props: {
     title: string;
     content?: string;
@@ -32,18 +24,14 @@ describe('QuickviewIframe (Stencil)', () => {
     src?: string;
     logger?: SearchEngine['logger'];
   }): Promise<HTMLIFrameElement> => {
-    // Call the actual Stencil functional component with required parameters
-    const vnode = QuickviewIframe(
-      props,
-      [], // children
-      // biome-ignore lint/suspicious/noExplicitAny: Stencil FunctionalComponent requires utils parameter but it's not used
-      {} as any
-    ) as VNode;
-
-    const container = document.createElement('div');
-    fixtureWrapper(container);
-
-    await renderStencilVNode(vnode, container);
+    const container = await renderFunctionFixture(
+      html`${renderQuickviewIframe({props})}`
+    );
+
+    // Twice because renderQuickviewIframe has 2 nested async updates
+    await new Promise((resolve) => setTimeout(resolve));
+    await new Promise((resolve) => setTimeout(resolve));
+
     return container.firstElementChild as HTMLIFrameElement;
   };
 

packages/atomic/src/components/search/result-template-components/quickview-iframe/quickview-iframe.ts

@@ -1,5 +1,8 @@
-import {SearchEngine} from '@coveo/headless';
-import {FunctionalComponent, h} from '@stencil/core';
+import type {SearchEngine} from '@coveo/headless';
+import {html} from 'lit';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {ref} from 'lit/directives/ref.js';
+import type {FunctionalComponent} from '@/src/utils/functional-component-utils';
 
 const documentIdentifierInIframe = 'CoveoDocIdentifier';
 
@@ -44,62 +47,85 @@ const warnAboutLimitedUsageQuickview = (logger?: SearchEngine['logger']) => {
   );
 };
 
-/**
- * @deprecated should only be used for Stencil components.
- */
-export const QuickviewIframe: FunctionalComponent<{
+export interface QuickviewIframeProps {
   title: string;
   content?: string;
   onSetIframeRef: (ref: HTMLIFrameElement) => void;
   uniqueIdentifier?: string;
   sandbox?: string;
   src?: string;
   logger?: SearchEngine['logger'];
-}> = ({title, onSetIframeRef, uniqueIdentifier, content, sandbox, src, logger}) => {
+}
+
+export const renderQuickviewIframe: FunctionalComponent<
+  QuickviewIframeProps
+> = ({props}) => {
+  const {
+    title,
+    onSetIframeRef,
+    uniqueIdentifier,
+    content,
+    sandbox,
+    src,
+    logger,
+  } = props;
+
   // When a document is written with document.open/document.write/document.close
   // it is not synchronous and the content of the iframe is only available to be queried at the end of the current call stack.
   // This add a "wait" (setTimeout 0) before calling the `onSetIframeRef` from the parent modal quickview
   const waitForIframeContentToBeWritten = () => {
     return new Promise((resolve) => setTimeout(resolve));
   };
 
-  return (
-    <iframe
-      title={title}
-      src="about:blank"
-      class="h-full w-full"
-      sandbox={sandbox}
-      ref={async (el) => {
-        const iframeRef = el as HTMLIFrameElement;
-
-        if (!uniqueIdentifier || !content) {
-          return;
-        }
+  const handleRef = (el: Element | undefined) => {
+    if (!el) return;
 
-        const documentWriter = iframeRef.contentDocument;
-        if (!documentWriter) {
-          if (src) {
-            warnAboutLimitedUsageQuickview(logger);
-            iframeRef.src = src;
-          }
+    const iframeRef = el as HTMLIFrameElement;
 
-          return;
-        }
-        if (
-          currentResultAlreadyWrittenToDocument(
-            documentWriter,
-            uniqueIdentifier
-          )
-        ) {
-          return;
+    if (!uniqueIdentifier || !content) {
+      return;
+    }
+
+    // Wait for iframe to be ready before accessing contentDocument
+    const writeContentWhenReady = async () => {
+      // In some environments, contentDocument might not be immediately available
+      // Wait a tick to ensure iframe is ready
+      await waitForIframeContentToBeWritten();
+
+      const documentWriter = iframeRef.contentDocument;
+      if (!documentWriter) {
+        if (src) {
+          warnAboutLimitedUsageQuickview(logger);
+          iframeRef.src = src;
         }
 
-        writeDocument(documentWriter, content);
-        ensureSameResultIsNotOverwritten(documentWriter, uniqueIdentifier);
+        return;
+      }
+      if (
+        currentResultAlreadyWrittenToDocument(documentWriter, uniqueIdentifier)
+      ) {
+        return;
+      }
 
-        await waitForIframeContentToBeWritten();
-        onSetIframeRef(iframeRef);
-      }}
-    ></iframe>
-  );
+      writeDocument(documentWriter, content);
+      ensureSameResultIsNotOverwritten(documentWriter, uniqueIdentifier);
+
+      await waitForIframeContentToBeWritten();
+      onSetIframeRef(iframeRef);
+    };
+
+    // Execute async operation without blocking
+    writeContentWhenReady();
+  };
+
+  return html`<iframe
+    title=${title}
+    src="about:blank"
+    class="h-full w-full"
+    sandbox=${
+      // biome-ignore lint/suspicious/noExplicitAny: ifDefined requires 'any' for optional HTML attributes
+      ifDefined(sandbox) as any
+    }
+    ${ref(handleRef)}
+  ></iframe>`;
 };