@faststore/core 3.0.91 → 3.0.94

package/.turbo/turbo-build.log

@@ -46,8 +46,8 @@ Browserslist: caniuse-lite is outdated. Please run:
    Collecting page data ...
    Generating static pages (0/7) ...
 
   Generating static pages (1/7) 
-
   Generating static pages (3/7) 
 Warning: Dynamic Content not found for the page: home. Refer to the Dynamic Content documentation at https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview for mapping the page and the corresponding data-fetching function.
+
   Generating static pages (3/7) 
 
   Generating static pages (5/7) 
 
 ✓ Generating static pages (7/7) 
    Finalizing page optimization ...
@@ -75,7 +75,7 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-8e279965036b6169.js   45.4 kB
   ├ chunks/main-6f63f6746cc029db.js        33.1 kB
   ├ chunks/pages/_app-c25fabc2435c8961.js  12.6 kB
-  ├ chunks/webpack-63df43b7e99450a0.js     2.45 kB
+  ├ chunks/webpack-91a2417668848fcd.js     2.45 kB
   └ css/ee0556daedda6306.css               3.07 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,10 +1,10 @@
 $ jest
-PASS test/utils/multipleTemplates.test.ts (31.737 s)
-PASS test/server/cms/index.test.ts (32.031 s)
-PASS test/server/index.test.ts (34.133 s)
+PASS test/utils/multipleTemplates.test.ts (32.249 s)
+PASS test/server/cms/index.test.ts (32.366 s)
+PASS test/server/index.test.ts (34.408 s)
 
 Test Suites: 3 passed, 3 total
 Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        35.22 s
+Time:        35.416 s
 Ran all test suites.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.91",
+  "version": "3.0.94",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -43,11 +43,11 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^3.0.88",
-    "@faststore/components": "^3.0.89",
-    "@faststore/graphql-utils": "^3.0.88",
-    "@faststore/sdk": "^3.0.88",
-    "@faststore/ui": "^3.0.89",
+    "@faststore/api": "^3.0.94",
+    "@faststore/components": "^3.0.94",
+    "@faststore/graphql-utils": "^3.0.94",
+    "@faststore/sdk": "^3.0.94",
+    "@faststore/ui": "^3.0.94",
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/client-preset": "^4.2.6",
     "@graphql-codegen/typescript": "^4.0.7",
@@ -88,7 +88,7 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
     "@envelop/testing": "^6.0.0",
-    "@faststore/eslint-config": "^3.0.88",
+    "@faststore/eslint-config": "^3.0.94",
     "@faststore/lighthouse": "^1.12.32",
     "@lhci/cli": "^0.9.0",
     "@testing-library/cypress": "^10.0.1",
@@ -130,5 +130,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "a53f26dce73b16ac30f92aab03f90d031e6e3025"
+  "gitHead": "c87448153f3cd42850fcc8aa7666268c4256856f"
 }

package/src/components/cms/SectionBoundary.tsx

@@ -1,11 +1,24 @@
 import { Component } from 'react'
 import type { ErrorInfo, ReactNode } from 'react'
 
-class SectionBoundary extends Component<{
+interface ErrorBoundaryProps {
   children: ReactNode
   name: string
-}> {
-  public state = { hasError: false, error: null }
+}
+
+interface ErrorBoundaryState {
+  hasError: Boolean
+  error: Error | null
+}
+
+class SectionBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  public state: ErrorBoundaryState = {
+    hasError: false,
+    error: null,
+  }
 
   public static getDerivedStateFromError(error: Error) {
     return {

package/src/components/common/Footer/Footer.tsx

@@ -1,14 +1,19 @@
+import { ReactNode } from 'react'
 import { mark } from 'src/sdk/tests/mark'
 
-export function FooterInfo({ children }) {
+interface FooterProps {
+  children: ReactNode
+}
+
+export function FooterInfo({ children }: FooterProps) {
   return <div data-fs-footer-info>{children}</div>
 }
 
-export function FooterNavigation({ children }) {
+export function FooterNavigation({ children }: FooterProps) {
   return <div data-fs-footer-navigation>{children}</div>
 }
 
-export function Footer({ children }) {
+export function Footer({ children }: FooterProps) {
   return (
     <footer
       data-fs-footer

package/src/components/search/SearchDropdown/SearchDropdown.tsx

@@ -14,7 +14,12 @@ import { ProductSummary_ProductFragment } from '@generated/graphql'
 import SearchProductItem from 'src/components/search/SearchProductItem'
 import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
 
-function SearchDropdown({ sort, ...otherProps }) {
+interface SearchDropdownProps {
+  sort: SearchState['sort']
+  [key: string]: any
+}
+
+function SearchDropdown({ sort, ...otherProps }: SearchDropdownProps) {
   const {
     values: { onSearchSelection, products, term, terms },
   } = useSearch()
@@ -32,14 +37,14 @@ function SearchDropdown({ sort, ...otherProps }) {
             linkProps={{
               href: formatSearchPath({
                 term: suggestion,
-                sort: sort as SearchState['sort'],
+                sort,
               }),
               onClick: () =>
                 onSearchSelection?.(
                   suggestion,
                   formatSearchPath({
                     term: suggestion,
-                    sort: sort as SearchState['sort'],
+                    sort,
                   })
                 ),
             }}

package/src/components/search/SearchInput/SearchInput.tsx

@@ -1,5 +1,6 @@
 import type { SearchEvent, SearchState } from '@faststore/sdk'
 import { sendAnalyticsEvent } from '@faststore/sdk'
+
 import type {
   SearchInputFieldProps as UISearchInputFieldProps,
   SearchInputFieldRef as UISearchInputFieldRef,
@@ -133,7 +134,7 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
 
         {searchDropdownVisible && (
           <Suspense fallback={null}>
-            <SearchDropdown sort={sort} />
+            <SearchDropdown sort={sort as SearchState['sort']} />
           </Suspense>
         )}
       </UISearchInput>

package/src/components/search/Sort/Sort.tsx

@@ -27,13 +27,18 @@ export interface SortProps {
   }
 }
 
+type SortOptionKeys = keyof SortProps['options']
+
 function Sort({ label = 'Sort by', options = OptionsMap }: SortProps) {
   const { state, setState } = useSearch()
 
-  const optionsMap = Object.keys(options).reduce((acc, currentKey) => {
-    acc[currentKey] = options[currentKey] ?? OptionsMap[currentKey]
-    return acc
-  }, {})
+  const optionsMap = Object.keys(options).reduce(
+    (acc, currentKey: SortOptionKeys) => {
+      acc[currentKey] = options[currentKey] ?? OptionsMap[currentKey]
+      return acc
+    },
+    {} as Record<SortOptionKeys, string>
+  )
 
   return (
     <SelectField

package/src/components/templates/LandingPage/LandingPage.tsx

@@ -100,7 +100,7 @@ export const getLandingPageBySlug = async (
   try {
     if (storeConfig.cms.data) {
       const cmsData = JSON.parse(storeConfig.cms.data)
-      const pageBySlug = cmsData['landingPage'].find((page) => {
+      const pageBySlug = cmsData['landingPage'].find((page: any) => {
         slug === page.settings?.seo?.slug
       })
 

package/src/components/templates/ProductListingPage/ProductListing.tsx

@@ -47,7 +47,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
 
 // Array merging strategy from deepmerge that makes client arrays overwrite server array
 // https://www.npmjs.com/package/deepmerge
-const overwriteMerge = (_, sourceArray) => sourceArray
+const overwriteMerge = (_: any[], sourceArray: any[]) => sourceArray
 
 export default function ProductListing({
   page: { sections, settings },

package/src/components/ui/Image/loader.ts

@@ -1,7 +1,12 @@
 import storeConfig from 'faststore.config'
+import { ImageLoaderProps } from 'next/image'
 const THUMBOR_SERVER = `https://${storeConfig.api.storeId}.vtexassets.com`
 
-export default function customImageLoader({ src, width, quality }) {
+export default function customImageLoader({
+  src,
+  width,
+  quality,
+}: ImageLoaderProps) {
   const preSizeComponents = [THUMBOR_SERVER, 'unsafe']
 
   // proportional to the width, enter a height of 0,

package/src/components/ui/ImageGallery/ImageGallery.tsx

@@ -5,7 +5,13 @@ import { useRouter } from 'next/router'
 import type { ImageGalleryProps as UIImageGalleryProps } from '@faststore/ui'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
-const ImageComponent = ({ url, alternateName }) => {
+const ImageComponent = ({
+  url,
+  alternateName,
+}: {
+  url: string
+  alternateName?: string
+}) => {
   const { __experimentalImageGalleryImage: Image } =
     useOverrideComponents<'ProductDetails'>()
 

package/src/components/ui/Newsletter/NewsletterAddendum.tsx

@@ -13,6 +13,8 @@
  *
  * This is a limitation not only for this component, but for every native & custom component that makes use of Rich Text.
  */
+
+// @ts-ignore motivation: cannot find the draftjs-to-html package types.
 import draftToHtml from 'draftjs-to-html'
 import { NewsletterAddendum as UINewsletterAddendum } from '@faststore/ui'
 import type { NewsletterAddendumProps as UINewsletterAddendumProps } from '@faststore/ui'

package/src/customizations/src/dynamicContent/index.ts

@@ -11,6 +11,6 @@
 
 // export default dynamicContent;
 
-const dynamicContent = {}
+const dynamicContent: Record<string, any> = {}
 
 export default dynamicContent

package/src/pages/[slug]/p.tsx

@@ -63,7 +63,7 @@ type Props = PDPContentType & {
 
 // Array merging strategy from deepmerge that makes client arrays overwrite server array
 // https://www.npmjs.com/package/deepmerge
-const overwriteMerge = (_, sourceArray) => sourceArray
+const overwriteMerge = (_: any[], sourceArray: any[]) => sourceArray
 
 function Page({ data: server, sections, globalSections, offers, meta }: Props) {
   const { product } = server

package/src/sdk/analytics/index.tsx

@@ -11,7 +11,7 @@ if (typeof window !== 'undefined') {
   }
 }
 
-const AnalyticsHandler = () => {
+const AnalyticsHandler = (): null => {
   useAnalyticsEvent((event: AnalyticsEvent) => {
     // Cleans the ecommerce object before pushing a new one
     // This prevents the new data from getting merged with the previous one

package/src/sdk/error/ErrorBoundary/ErrorBoundary.tsx

@@ -15,8 +15,20 @@ if (typeof window !== 'undefined') {
   window.setInterval(() => setReloads(0), 30e3)
 }
 
-class ErrorBoundary extends Component<{ children: ReactNode }> {
-  public state = { hasError: false, error: null }
+interface ErrorBoundaryProps {
+  children: ReactNode
+}
+
+interface ErrorBoundaryState {
+  hasError: Boolean
+  error: Error | null
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  public state: ErrorBoundaryState = {
+    hasError: false,
+    error: null,
+  }
 
   public static getDerivedStateFromError(error: Error) {
     return {

package/src/sdk/overrides/overrides.ts

@@ -7,6 +7,9 @@ import type {
 
 import type { SectionsOverrides } from '../../typings/overrides'
 
+/* TODO: Fix typescript errors. It is necessary to further investigate the typing 
+issues of this file. Error lines have been marked with the @ts-ignore comment*/
+
 export function getSectionOverrides<
   SectionName extends keyof SectionsOverrides
 >(
@@ -15,38 +18,45 @@ export function getSectionOverrides<
 ): OverriddenComponents<SectionName> {
   const overriddenComponents = {} as OverriddenComponents<SectionName>
 
-  Object.entries(defaultComponents).forEach(([key, value]) => {
-    const componentOverride:
-      | ComponentOverrideDefinition<unknown, unknown>
-      | undefined = override.components?.[key]
-
-    if (!componentOverride) {
-      overriddenComponents[key] = {
-        Component: value,
-        props: {},
+  Object.entries<React.ComponentType>(defaultComponents).forEach(
+    ([key, value]) => {
+      const componentOverride:
+        | ComponentOverrideDefinition<React.ComponentType, unknown>
+        | undefined =
+        // @ts-ignore
+        override.components?.[key]
+
+      if (!componentOverride) {
+        // @ts-ignore
+        overriddenComponents[key] = {
+          Component: value,
+          props: {},
+        }
+
+        return
       }
 
-      return
-    }
-
-    if (componentOverride.Component && componentOverride.props) {
-      console.warn(
-        `Mixed use of Component and props overrides detected. Defaulting to Component override: component ${key} in the ${override.section} section.`
-      )
-    }
-
-    if (componentOverride.Component) {
-      overriddenComponents[key] = {
-        Component: componentOverride.Component,
-        props: {},
+      if (componentOverride.Component && componentOverride.props) {
+        console.warn(
+          `Mixed use of Component and props overrides detected. Defaulting to Component override: component ${key} in the ${override.section} section.`
+        )
       }
-    } else {
-      overriddenComponents[key] = {
-        Component: value,
-        props: componentOverride.props ?? {},
+
+      if (componentOverride.Component) {
+        // @ts-ignore
+        overriddenComponents[key] = {
+          Component: componentOverride.Component,
+          props: {},
+        }
+      } else {
+        // @ts-ignore
+        overriddenComponents[key] = {
+          Component: value,
+          props: componentOverride.props ?? {},
+        }
       }
     }
-  })
+  )
 
   return overriddenComponents
 }

package/src/sdk/product/useProductGalleryQuery.ts

@@ -7,6 +7,7 @@ import { useLocalizedVariables } from './useLocalizedVariables'
 import { useSession } from 'src/sdk/session'
 
 import type {
+  ClientManyProductsQueryQueryVariables,
   ClientProductGalleryQueryQuery as Query,
   ClientProductGalleryQueryQueryVariables as Variables,
 } from '@generated/graphql'
@@ -61,12 +62,19 @@ export const fragment = gql(`
   }
 `)
 
+type ProductGalleryQueryOptions = {
+  itemsPerPage: number
+  selectedFacets: Facet[]
+  sort: ClientManyProductsQueryQueryVariables['sort']
+  term: ClientManyProductsQueryQueryVariables['term']
+}
+
 export const useProductGalleryQuery = ({
   term,
   sort,
   selectedFacets,
   itemsPerPage,
-}) => {
+}: ProductGalleryQueryOptions) => {
   const { locale } = useSession()
   const { state, setState } = useSearch()
 

package/test/utils/multipleTemplates.test.ts

@@ -61,7 +61,7 @@ describe('Multiple page templates', () => {
     })
 
     it('should return false when the rewrites is empty array', () => {
-      const rewritesArr = []
+      const rewritesArr: Rewrite[] = []
       const result = hasRewritesConfigForSlug({
         rewrites: rewritesArr,
         templateValue: '/test/my-office',

package/tsconfig.json

@@ -22,13 +22,14 @@
       ]
     },
     "forceConsistentCasingInFileNames": true,
-    "strict": false,
+    "noImplicitAny": true,
     "incremental": true,
     "isolatedModules": true,
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "skipLibCheck": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "strict": false
   },
   "include": ["*.d.ts", "src/**/*.ts", "src/**/*.tsx", "@generated/**/*.ts"],
   "exclude": ["node_modules", "public"]