stabilized

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

@@ -1,11 +1,11 @@
 /* eslint-disable */
 /* tslint:disable */
 /* auto-generated react proxies */
-import { createReactComponent } from './react-component-lib';
+import { createReactComponent } from './react-component-lib/index.js';
 
 import type { JSX } from '@coveo/atomic';
 
-import { defineCustomElements } from '@coveo/atomic/dist/loader';
+import { defineCustomElements } from '@coveo/atomic/loader';
 
 defineCustomElements();
 export const AtomicCommerceBreadbox = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceBreadbox, HTMLAtomicCommerceBreadboxElement>('atomic-commerce-breadbox');

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

@@ -1,6 +1,6 @@
 import React, { createElement } from 'react';
 
-import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils/index.js';
 
 export interface HTMLStencilElement extends HTMLElement {
   componentOnReady(): Promise<this>;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { OverlayEventDetail } from './interfaces';
-import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
+import { OverlayEventDetail } from './interfaces.js';
+import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils/index.js';
 
 interface OverlayElement extends HTMLElement {
   present: () => Promise<void>;

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

@@ -1,2 +1,2 @@
-export { createReactComponent } from './createComponent';
-export { createOverlayComponent } from './createOverlayComponent';
+export { createReactComponent } from './createComponent.js';
+export { createOverlayComponent } from './createOverlayComponent.js';

packages/atomic-react/src/components/stencil-generated/commerce/react-component-lib/utils/attachProps.ts

@@ -1,4 +1,4 @@
-import { camelToDashCase } from './case';
+import { camelToDashCase } from './case.js';
 
 export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {
   // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first

packages/atomic-react/src/components/stencil-generated/commerce/react-component-lib/utils/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { StyleReactProps } from '../interfaces';
+import type { StyleReactProps } from '../interfaces.js';
 
 export type StencilReactExternalProps<PropType, ElementType> = PropType &
   Omit<React.HTMLAttributes<ElementType>, 'style'> &
@@ -46,5 +46,5 @@ export const defineCustomElement = (tagName: string, customElement: any) => {
   }
 };
 
-export * from './attachProps';
-export * from './case';
+export * from './attachProps.js';
+export * from './case.js';

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

@@ -1,11 +1,11 @@
 /* eslint-disable */
 /* tslint:disable */
 /* auto-generated react proxies */
-import { createReactComponent } from './react-component-lib';
+import { createReactComponent } from './react-component-lib/index.js';
 
 import type { JSX } from '@coveo/atomic';
 
-import { defineCustomElements } from '@coveo/atomic/dist/loader';
+import { defineCustomElements } from '@coveo/atomic/loader';
 
 defineCustomElements();
 export const AtomicAriaLive = /*@__PURE__*/createReactComponent<JSX.AtomicAriaLive, HTMLAtomicAriaLiveElement>('atomic-aria-live');

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

@@ -1,6 +1,6 @@
 import React, { createElement } from 'react';
 
-import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils/index.js';
 
 export interface HTMLStencilElement extends HTMLElement {
   componentOnReady(): Promise<this>;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { OverlayEventDetail } from './interfaces';
-import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
+import { OverlayEventDetail } from './interfaces.js';
+import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils/index.js';
 
 interface OverlayElement extends HTMLElement {
   present: () => Promise<void>;

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

@@ -1,2 +1,2 @@
-export { createReactComponent } from './createComponent';
-export { createOverlayComponent } from './createOverlayComponent';
+export { createReactComponent } from './createComponent.js';
+export { createOverlayComponent } from './createOverlayComponent.js';

packages/atomic-react/src/components/stencil-generated/search/react-component-lib/utils/attachProps.ts

@@ -1,4 +1,4 @@
-import { camelToDashCase } from './case';
+import { camelToDashCase } from './case.js';
 
 export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {
   // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first

packages/atomic-react/src/components/stencil-generated/search/react-component-lib/utils/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { StyleReactProps } from '../interfaces';
+import type { StyleReactProps } from '../interfaces.js';
 
 export type StencilReactExternalProps<PropType, ElementType> = PropType &
   Omit<React.HTMLAttributes<ElementType>, 'style'> &
@@ -46,5 +46,5 @@ export const defineCustomElement = (tagName: string, customElement: any) => {
   }
 };
 
-export * from './attachProps';
-export * from './case';
+export * from './attachProps.js';
+export * from './case.js';

packages/samples/headless-ssr-commerce/app/listing/page.tsx

@@ -18,6 +18,7 @@ import {
 } from '@coveo/headless-react/ssr-commerce';
 import {revalidateTag, unstable_cache} from 'next/cache';
 import {cookies, headers} from 'next/headers';
+import {unstable_after} from 'next/server';
 
 const getSearchEngineDefinition = unstable_cache(
   (cachedParameters: CommerceSearchParameters) =>
@@ -40,8 +41,8 @@ export default async function Listing({
 }: {
   searchParams: Promise<URLSearchParams>;
 }) {
-  const headersList = headers();
-  const cookieStore = cookies();
+  const headersList = await headers();
+  const cookieStore = await cookies();
 
   // Sets the navigator context provider to use the newly created `navigatorContext` before fetching the app static state
   const navigatorContext = new NextJsNavigatorContext(headersList);
@@ -82,7 +83,9 @@ export default async function Listing({
   }
   const staticState = await getSearchEngineDefinition(cachedParameters);
   if (shouldInvalidate) {
-    revalidateTag('listing');
+    unstable_after(() => {
+      revalidateTag('listing');
+    });
   }
 
   console.log(

packages/samples/headless-ssr-commerce/app/products/[productId]/page.tsx

@@ -8,10 +8,10 @@ import {Suspense} from 'react';
 export default async function ProductDescriptionPage({
   params,
 }: {
-  params: {productId: string};
+  params: Promise<{productId: string}>;
 }) {
   // Sets the navigator context provider to use the newly created `navigatorContext` before fetching the app static state
-  const navigatorContext = new NextJsNavigatorContext(headers());
+  const navigatorContext = new NextJsNavigatorContext(await headers());
   standaloneEngineDefinition.setNavigatorContextProvider(
     () => navigatorContext
   );
@@ -27,7 +27,7 @@ export default async function ProductDescriptionPage({
         <ProductProvider
           staticState={staticState}
           navigatorContext={navigatorContext.marshal}
-          productId={params.productId}
+          productId={(await params).productId}
         >
           <Recommendations />
         </ProductProvider>

packages/samples/headless-ssr-commerce/app/search/page.tsx

@@ -17,6 +17,7 @@ import {
 } from '@coveo/headless-react/ssr-commerce';
 import {revalidateTag, unstable_cache} from 'next/cache';
 import {headers, cookies} from 'next/headers';
+import {unstable_after} from 'next/server';
 
 const getSearchEngineDefinition = unstable_cache(
   (cachedParameters: CommerceSearchParameters) =>
@@ -34,8 +35,8 @@ export default async function Search({
 }: {
   searchParams: Promise<URLSearchParams>;
 }) {
-  const headersList = headers();
-  const cookieStore = cookies();
+  const headersList = await headers();
+  const cookieStore = await cookies();
   // Sets the navigator context provider to use the newly created `navigatorContext` before fetching the app static state
   const navigatorContext = new NextJsNavigatorContext(headersList);
   searchEngineDefinition.setNavigatorContextProvider(() => navigatorContext);
@@ -74,7 +75,9 @@ export default async function Search({
   }
   const staticState = await getSearchEngineDefinition(cachedParameters);
   if (shouldInvalidate) {
-    revalidateTag('search');
+    unstable_after(() => {
+      revalidateTag('search');
+    });
   }
   console.log(
     'FETCHED STATIC STATE',
@@ -118,4 +121,4 @@ export default async function Search({
   );
 }
 
-// export const dynamic = 'force-dynamic';
+export const dynamic = 'force-dynamic';

packages/samples/headless-ssr-commerce/next.config.mjs

@@ -9,6 +9,9 @@ const nextConfig = {
       },
     ];
   },
+  experimental: {
+    after: true,
+  },
 };
 
 export default nextConfig;