# Static Assets Differences with PWA Kit

PWA Kit uses a traditional Webpack-based approach with SVG sprites and utility functions for responsive images. Storefront Next leverages Vite's native asset handling with a modern component-based approach for responsive images and tree-shaken icon imports. The shift simplifies asset management while providing more powerful responsive image capabilities through the DynamicImage component.

## Key Differences

| Aspect            | PWA Kit                 | Storefront Next                   |
| ----------------- | ----------------------- | --------------------------------- |
| Build Tool        | Webpack                 | Vite                              |
| Static Directory  | `app/static/`           | `public/`                         |
| Asset URLs        | `getAssetUrl()` helper  | Direct `/` paths                  |
| Icon System       | SVG sprite sheet        | Tree-shaken React icons           |
| Image Component   | Custom with SSR preload | `<picture>` with React 19 preload |
| Responsive Images | Utility functions       | DynamicImage component            |
| Font Strategy     | Chakra UI defaults      | Tailwind CSS defaults             |
| CSP Headers       | Explicit in ssr.js      | Framework-handled                 |

## Image Import Patterns

PWA Kit:

```javascript
import { getAssetUrl } from "@salesforce/pwa-kit-react-sdk/ssr/universal/utils";

const src = getAssetUrl("static/img/hero.png");
// Result: /mobify/bundle/development/static/img/hero.png?v=abc123
```

Storefront Next:

```typescript
import heroImage from "/images/hero.png";
// or
const src = "/images/hero.png";
```

## Icon Usage

PWA Kit:

```javascript
// Import registers to sprite
import "@salesforce/retail-react-app/app/assets/svg/search.svg";

// Use via sprite reference
<Icon>
  <use xlinkHref="#search" />
</Icon>;
```

Storefront Next:

```typescript
import { Search } from "lucide-react";

<Search className="h-5 w-5" />;
```

## Responsive Image Handling

PWA Kit:

```javascript
// Manual utility function usage
const {srcSet, sizes} = getResponsivePictureAttributes({
    src: imageUrl,
    breakpoints: [320, 640, 1024]
})

<picture>
    <source srcSet={srcSet} sizes={sizes} />
    <img src={imageUrl} alt={alt} />
</picture>
```

Storefront Next:

```typescript
// Component handles complexity
<DynamicImage
  src={imageUrl}
  alt={alt}
  widths={{ base: "100vw", md: "50vw", lg: "33vw" }}
  priority="high"
/>
```

## Key Similarities

1. Lazy loading default: Both default to `loading="lazy"`.
2. B2C Commerce images: Both use Dynamic Imaging Service (`?sw={width}`).
3. System fonts: Neither bundles custom web fonts.
4. SSR awareness: Both handle preloading for above-fold images.
5. Aspect ratio handling: Both manage layout stability.

## Storefront Conversion Considerations

- Asset Path Changes

  - Replace `getAssetUrl()` with direct `/` paths.
  - Move files from `app/static/` to `public/`.

- SVG Icons

  - Replace sprite imports with `lucide-react` icons.
  - Or create individual SVG component imports.

- Image Component

  - Replace custom Image with DynamicImage.
  - Update width props to new format.

- Responsive Images
  - Convert utility function usage to DynamicImage props.
  - Breakpoint format changes from array to object.