How to debug `vite-plugin-static-copy` transform function in `dev`?

Question

I've just moved from webpack's copyWebpackPlugin and having troubles understanding how to debug this plugin's code.

Here's what I have in my vite.config.ts

import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
import ssr from 'vike/plugin';
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
  plugins: [
    preact(),
    ssr({ prerender: true }),
    viteStaticCopy({
      targets: [
        {
          src: 'public/assets/icons/favicon.svg', // this is a placeholder string, so we have this script to be executed once
          dest: `path/to/dir`,
          rename: 'filename.pdf',
          transform: {
            encoding: 'buffer',
            handler: async (_content, path) => {
              console.log(1)
              try {
                const response = await fetch(URL)
                const json = await response.json()

                console.log(json)
    
                return await processJson(json)
              } catch (e) {
                console.log(path)
                console.log(e)
              }
            },
          },
        }
      ]
    })
  ],
});

While in npm run dev none of the console.log inside the viteStaticCopy, including processJson, are being printed out. The only things I see is [vite-plugin-static-copy] Collected 1 items.

How can I fix this?

Answer 1

vite-plugin-static-copy apparently runs on demand as a middleware, not ahead of time. You need to fetch (or consume in any fashion) the asset and then you'd see your logs:

// in app code
fetch('/path/to/dir/favicon.svg')