Fix linters warnings/errors

packages/shopify/src/elements/app-block.tsx

@@ -8,7 +8,7 @@ let { Placeholder, NoHydrate } = Components
 
 export let AppBlock = forwardRef<HTMLDivElement, WeaverseElementProps>(
   (props, ref) => {
-    let id = props['data-wv-id']!
+    let id = props['data-wv-id']
     let { isDesignMode } = useContext(WeaverseContext)
     if (isDesignMode) {
       return (

packages/shopify/src/elements/article-list/skeleton.tsx

@@ -15,7 +15,6 @@ export function Skeleton(props: ArticleSkeletonProps) {
     <>
       {Array.from({ length: articleCount }).map((_, index) => (
         <div
-          // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
           key={index}
           className="wv-article-card-skeleton animate-pulse"
           style={style}
@@ -28,7 +27,7 @@ export function Skeleton(props: ArticleSkeletonProps) {
             <div className="wv-article-card__author" />
           </div>
           <div className="wv-article-card-skeleton__title" />
-          <div className="wv-article-card__remore" />
+          <div className="wv-article-card__readmore" />
         </div>
       ))}
     </>
@@ -70,7 +69,7 @@ export let css: ElementCSS = {
         borderRadius: '4px',
         margin: '12px 0',
       },
-      '.wv-article-card__remore': {
+      '.wv-article-card__readmore': {
         display: 'block',
         height: '20px',
         backgroundColor: '#D1D5DB',

packages/shopify/src/elements/countdown/index.tsx

@@ -67,6 +67,7 @@ let Countdown = forwardRef<HTMLDivElement, CountdownElementProps>(
       setRemaining(remainingTime)
     }
 
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
     useEffect(() => {
       let intervalFlag: ReturnType<typeof setInterval> = setInterval(
         handleRemaining,

packages/shopify/src/elements/custom-html.tsx

@@ -11,7 +11,7 @@ let { Placeholder, NoHydrate } = Components
 export let CustomHTML = forwardRef<HTMLDivElement, CustomHTMLProps>(
   (props, ref) => {
     let { content, children, ...rest } = props
-    let id = rest['data-wv-id']!
+    let id = rest['data-wv-id']
     let { isDesignMode } = useContext(WeaverseContext)
     let style = {
       '--pointer-events': isDesignMode ? 'none' : 'auto',

packages/shopify/src/elements/form/index.tsx

@@ -52,7 +52,6 @@ let Form = forwardRef<HTMLDivElement, FormElementProps>((props, ref) => {
         {`<h3>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>`}
         {targetLink && (
           <script
-            // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
             dangerouslySetInnerHTML={{
               __html: `window.open(${targetLink},${
                 openInNewTab ? '_blank' : '_self'

packages/shopify/src/elements/hotspots.tsx

@@ -17,7 +17,7 @@ export let Hotspots = forwardRef<HTMLDivElement, HotspotsProps>(
     let { money_format } = weaverseShopifyConfigs.shopData || {}
     let products: ShopifyProduct[] = hotspots
       .filter((hotspot) => hotspot.productId)
-      .map((hotspot) => weaverseShopifyProducts[hotspot.productId!])
+      .map((hotspot) => weaverseShopifyProducts[hotspot.productId])
     let style = {
       '--aspect-ratio': aspectRatio,
       '--color': color === 'light' ? '#000' : '#fff',

packages/shopify/src/elements/index.ts

@@ -1,3 +1,6 @@
+import * as ArticleList from '~/elements/article-list'
+import * as CollectionList from '~/elements/collection-list'
+import type { WeaverseElement } from '~/types/weaverse-shopify'
 import * as AppBlock from './app-block'
 import * as Button from './button'
 import * as Container from './container'
@@ -8,7 +11,7 @@ import * as Hotspots from './hotspots'
 import * as Image from './image'
 import * as Instagram from './instagram'
 import * as Layout from './layout'
-import * as Map from './map'
+import * as MapElement from './map'
 import { productElements } from './product'
 import * as ProductList from './product-list'
 import * as ScrollingText from './scrolling-text'
@@ -17,11 +20,7 @@ import * as Slide from './slideshow/slide'
 import * as Text from './text'
 import * as Video from './video'
 
-import * as ArticleList from '~/elements/article-list'
-import * as CollectionList from '~/elements/collection-list'
-import type { WeaverseElement } from '~/types/weaverse-shopify'
-
-export let SHOPIFY_ELEMENTS: Record<string, WeaverseElement> = {
+export let SHOPIFY_ELEMENTS: Record<string, Partial<WeaverseElement>> = {
   ...productElements,
   ArticleList: {
     Component: ArticleList.default,
@@ -90,9 +89,9 @@ export let SHOPIFY_ELEMENTS: Record<string, WeaverseElement> = {
     defaultCss: Layout.css,
   },
   Map: {
-    Component: Map.default,
+    Component: MapElement.default,
     type: 'map',
-    defaultCss: Map.css,
+    defaultCss: MapElement.css,
   },
   Text: {
     Component: Text.default,

packages/shopify/src/elements/instagram.tsx

@@ -61,6 +61,7 @@ let Instagram = forwardRef<HTMLDivElement, InstagramElementProps>(
             } = item
             if (media_type === 'VIDEO') {
               return (
+                // biome-ignore lint/a11y/useMediaCaption: <explanation>
                 <video key={id} controls poster={thumbnail_url}>
                   <source src={media_url} type="video/mp4" />
                 </video>

packages/shopify/src/elements/map.tsx

@@ -1,9 +1,8 @@
 import type { ElementCSS } from '@weaverse/react'
-import React, { forwardRef } from 'react'
-
+import { forwardRef } from 'react'
 import type { MapElementProps } from '~/types/components'
 
-let Map = forwardRef<HTMLDivElement, MapElementProps>((props, ref) => {
+let MapElement = forwardRef<HTMLDivElement, MapElementProps>((props, ref) => {
   let { place, zoom, ...rest } = props
 
   return (
@@ -33,9 +32,9 @@ export let css: ElementCSS = {
   },
 }
 
-Map.defaultProps = {
+MapElement.defaultProps = {
   place: 'Hanoi',
   zoom: 14,
 }
 
-export default Map
+export default MapElement

packages/shopify/src/elements/product-list/product-card.tsx

@@ -35,7 +35,7 @@ export function ProductCard(props: ProductCardProps) {
   } as React.CSSProperties
 
   let isRecommendedProduct = Array.isArray(media)
-  let imageSource = isRecommendedProduct ? media! : images
+  let imageSource = isRecommendedProduct ? media : images
   let mainImage = imageSource[0]
   let secondImage = imageSource[1]
   let imagesClass = clsx(

packages/shopify/src/elements/product-list/use-products.ts

@@ -32,6 +32,7 @@ export function useProducts(input: UseProductHookInput) {
     products = hasAllProducts ? _products : []
   }
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     if (source === 'recommended' && !isDesignMode) {
       let { product_id, routes } = window.weaverseShopifyConfigs.shopData
@@ -42,7 +43,7 @@ export function useProducts(input: UseProductHookInput) {
             throw new Error(`${data.message} - (${data.description})`)
           }
           setRecommendedProducts(data.products)
-          data.products.forEach((p: ShopifyProduct) => {
+          for (let p of data.products) {
             if (!weaverseShopifyProducts[p.id]) {
               weaverseShopifyProducts[p.id] = {
                 ...p,
@@ -54,7 +55,7 @@ export function useProducts(input: UseProductHookInput) {
                   p.variants.find((v) => v.available) || null,
               }
             }
-          })
+          }
         })
         .catch((err) => {
           console.log('❌ Error fetching recommended products', err)

packages/shopify/src/elements/product/index.ts

@@ -11,7 +11,7 @@ import * as ProductVendor from './product-vendor'
 
 import type { WeaverseElement } from '~/types'
 
-export let productElements: Record<string, WeaverseElement> = {
+export let productElements: Record<string, Partial<WeaverseElement>> = {
   ProductDetails: {
     type: 'product-details',
     Component: ProductDetails.default,

packages/shopify/src/elements/product/product-media/index.tsx

@@ -54,6 +54,7 @@ let ProductMedia = forwardRef<HTMLDivElement, ProductMediaProps>(
         ResizePlugin,
       })
 
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
     useEffect(() => {
       if (created && cssLoaded) {
         window.requestAnimationFrame(() => {
@@ -63,7 +64,6 @@ let ProductMedia = forwardRef<HTMLDivElement, ProductMediaProps>(
           setReady(true)
         })
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mediaSize, aspectRatio, created, cssLoaded])
 
     let { images, aspect_ratio } = context.product

packages/shopify/src/elements/product/product-media/thumbnail-plugin.ts

@@ -6,9 +6,9 @@ export function ThumbnailPlugin(
 ): KeenSliderPlugin {
   return (slider) => {
     function removeActive() {
-      slider.slides.forEach((slide) => {
+      for (let slide of slider.slides) {
         slide.classList.remove('active')
-      })
+      }
     }
     function addActive(idx: number) {
       slider.slides[idx].classList.add('active')

packages/shopify/src/elements/product/product-media/use-media-slider.ts

@@ -40,6 +40,7 @@ export function useMediaSlider(input: ProductImageHooksInput) {
     [ThumbnailPlugin(instanceRef), ResizePlugin],
   )
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     if (context) {
       let targetMediaIndex = -1
@@ -51,7 +52,6 @@ export function useMediaSlider(input: ProductImageHooksInput) {
         instanceRef.current.moveToIdx(targetMediaIndex)
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [context])
 
   return [sliderRef, thumbnailRef, instanceRef, thumbnailInstanceRef] as const

packages/shopify/src/elements/video/index.tsx

@@ -1,7 +1,7 @@
 import type { ElementCSS } from '@weaverse/react'
 import { WeaverseContext } from '@weaverse/react'
-import React, { forwardRef, useContext } from 'react'
-
+import type React from 'react'
+import { forwardRef, useContext } from 'react'
 import { HTMLVideo } from './html-video'
 import { Vimeo } from './vimeo'
 import { Youtube } from './youtube'
@@ -22,7 +22,7 @@ let Video = forwardRef<HTMLDivElement, VideoElementProps>((props, ref) => {
   } = props
   let autoPlay = !isDesignMode && originAutoPlay
   let videoProps = { src, controls, poster, autoPlay, loop, muted }
-  let content
+  let content: React.ReactNode
   let youtubeId = getYoutubeEmbedId(src)
   let vimeoId = getVimeoId(src)
   // youtube

packages/shopify/src/hooks/use-studio.ts

@@ -4,6 +4,7 @@ import { useEffect } from 'react'
 import type { WeaverseShopify } from '~/index'
 
 export function useStudio(weaverse: WeaverseShopify) {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     let { isDesignMode, weaverseHost, weaverseVersion } = weaverse
     if (isDesignMode && isIframe && !window.weaverseStudio) {
@@ -13,6 +14,5 @@ export function useStudio(weaverse: WeaverseShopify) {
         .then(() => window?.createWeaverseStudioBridge(weaverse))
         .catch(console.error)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 }

packages/shopify/src/index.ts

@@ -20,22 +20,23 @@ export * from './types'
 export * from './utils/fetch-project-data'
 
 export let registerThirdPartyElements = () => {
-  WeaverseShopify.integrations
-    ?.flatMap(({ elements }) => elements)
-    .forEach(({ type, extraData }) => {
-      WeaverseShopify.registerElement({
-        type,
-        extraData,
-        Component: ThirdPartyElement.default,
-        defaultCss: ThirdPartyElement.css,
-      })
+  let elements = WeaverseShopify.integrations?.flatMap(
+    ({ elements }) => elements,
+  )
+  for (let { type, extraData } of elements) {
+    WeaverseShopify.registerElement({
+      type,
+      extraData,
+      Component: ThirdPartyElement.default,
+      defaultCss: ThirdPartyElement.css,
     })
+  }
 }
 
 export let registerShopifyElements = () => {
-  Object.values(SHOPIFY_ELEMENTS).forEach((elm) => {
+  for (let elm of Object.values(SHOPIFY_ELEMENTS)) {
     WeaverseShopify.registerElement(elm)
-  })
+  }
   registerThirdPartyElements()
 }
 export class WeaverseShopify extends Weaverse {