add outdir option per image proposal

[userquin]

By default the pwa assets will be generated in the image source folder, you can use a assetsName callback to change the output dir to create the assets in subfolders or in another path (via relative path using ..).

Since the pwa assets will use node path resolve with the image source folder, we can add a new option (optional) and resolve the asset against the new option or the image folder.

Hint:

We need to change the images signature to (and the usage from the cli-start module):

images: string | string[] | ImageData | ImageData[]
...
export interface ImageData {
  path: string
  outputDir: string
}

https://github.com/vite-pwa/assets-generator/blob/main/src/build.ts#L39 will be:

const folder = typeof image === 'string' ? dirname(imagePath) :  resolve(buildOptions.root, image.outputDir) : 

From this comment https://github.com/vite-pwa/assets-generator/pull/13#issuecomment-1693329797

[DamianGlowala]

To add for the record:

I thought that adding a relative path to the assetName would be a sufficient workaround to change the output location of the generated files. It indeed worked for majority of them. However, I discovered that when a favicon (favicon.ico) is generated, it remains in the input image's directory. Hence I see this addition as essential (and, subjectively speaking, a lot cleaner!).

[userquin]

However, I discovered that when a favicon (favicon.ico) is generated, it remains in the input image's directory.

Uhmm, you can provide the favicon names with the relative paths, if using defaults the corresponding names will be plain names. You can override favicons with relative paths:

export const minimalPreset: Preset = {
  transparent: {
    sizes: [64, 192, 512],
    favicons: [[64, '../../../public/favicon.ico']], // <== this one: by default [[64, 'favicon.ico']],
  },
  maskable: {
    sizes: [512],
  },
  apple: {
    sizes: [180],
  },
}

[DamianGlowala]

Ahh, you're totally right, that's the way to go in this case ;) appreciate your help

[benkroeger]

if you need the path change for all the generated assets, add an assetName function to your preset:

import { AssetType, ResolvedAssetSize, defaultAssetName, defineConfig } from '@vite-pwa/assets-generator/config';

export default defineConfig({
  preset: {
    transparent: {
      sizes: [64, 192, 512],
      favicons: [[64, 'icons/favicons/favicon.ico']],
    },
    maskable: {
      sizes: [512],
    },
    apple: {
      sizes: [180],
    },
    assetName: (type: AssetType, size: ResolvedAssetSize) => {
      return `icons/favicons/${defaultAssetName(type, size)}`;
    },
  },
  images: ['public/logo.svg'],
});

[egtwp]

Hello all, any progress on this?

Regards, Emanuele.

[holtwick]

if you need the path change for all the generated assets, add an assetName function to your preset:

import { AssetType, ResolvedAssetSize, defaultAssetName, defineConfig } from '@vite-pwa/assets-generator/config';

export default defineConfig({
  preset: {
    transparent: {
      sizes: [64, 192, 512],
      favicons: [[64, 'icons/favicons/favicon.ico']],
    },
    maskable: {
      sizes: [512],
    },
    apple: {
      sizes: [180],
    },
    assetName: (type: AssetType, size: ResolvedAssetSize) => {
      return `icons/favicons/${defaultAssetName(type, size)}`;
    },
  },
  images: ['public/logo.svg'],
});

This worked for me. Thanks @benkroeger

[Eugeniocalabresi]

se hai bisogno del cambio di percorso per tutte le risorse generate, aggiungi una assetNamefunzione alla tua preimpostazione:

import { AssetType, ResolvedAssetSize, defaultAssetName, defineConfig } from '@vite-pwa/assets-generator/config';

export default defineConfig({
  preset: {
    transparent: {
      sizes: [64, 192, 512],
      favicons: [[64, 'icons/favicons/favicon.ico']],
    },
    maskable: {
      sizes: [512],
    },
    apple: {
      sizes: [180],
    },
    assetName: (type: AssetType, size: ResolvedAssetSize) => {
      return `icons/favicons/${defaultAssetName(type, size)}`;
    },
  },
  images: ['public/logo.svg'],
});

This isn't working for me :( When i try to build project i got this error:

error during build:
Error: ENOENT: no such file or directory, open '/workspaces/Saturday/dist/icons/favicons/pwa-64x64.png'

The manifest.webmanifest is created with the correct path for the icons but the assets isn't generated and the dist/icons/favicons/ folder isn't created.

I'm using:

• yarn@4.1.1
• "solid-js": "^1.8.16"
• "vite": "^5.2.9"
• "vite-plugin-pwa": "^0.20.0"

Any suggestion?