How to use Userscript comments added in the file instead of userscript object

[ShivamS136]

I have a package in which I am having multiple userscript files and building those using vite and vite-plugin-monkey. But now I want to extend the functionality of my package to have vanilla .user.js files as well for some backward compatibility and user requirement purpose.

I am able to build the file in my dist folder by simply copying the file into dist folder using rsync.

But I want to take advantage of vite dev mode as well for these files. I want the HMR facility for my plain .user.js files as well which has the // ==UserScript== section already.

So is there anyway that I can use vite and/or vite-plugin-monkey so that I can achieve the same dev mode experience as I have with normal .js files build via vite-plugin-monkey?

I tried with below config but it replaced my // ==UserScript== section with default values from vite-plugin-monkey and that's not what is expected.

export default defineConfig({
  plugins: [
    monkey({
      entry: srcFileName,
      build: {
        fileName: srcFileName,
      },
    }),
  ],
  build: {
    minify: false,
  },
});

I tried using without vite-plugin-monkey as well but that didn't help as I can't see the downloadable output file after running vite dev and getting below error with vite build.

export default defineConfig({
  build: {
    minify: false,
    rollupOptions:{
      input:src,
      output:{
        format:"iife",
        name:"vanillaUserJs",
        file:'dist/bundle.user.js'
      }
    }
  },
});

Error on build:

vite v4.4.9 building for production...
✓ 1 modules transformed.
Invalid value for option "output.dir" - you must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks.
✓ built in 14ms
error during build:
RollupError: Invalid value for option "output.dir" - you must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks.

[lisonge]

import { defineConfig } from 'vite';
import solid from 'vite-plugin-solid';
import monkey from 'vite-plugin-monkey';

const comment = `
// ==UserScript==
// @name       solid-ts
// @namespace  npm/vite-plugin-monkey
// @version    0.0.0
// @author     monkey
// @icon       https://vitejs.dev/logo.svg
// @match      https://www.google.com/
// @grant      GM_addStyle
// ==/UserScript==
`.trim();

export default defineConfig({
  plugins: [
    solid(),
    monkey({
      entry: 'src/main.tsx',
      format: {
        generate() {
          return comment;
        },
      },
    }),
  ],
});

[ShivamS136]

What does format do? How it'll help me in keeping my userscript metablock as it is in my .user.js files? And what is the significance of comment value?

Also, please confirm the use of solid is irrelevant in the example code shared, isn't it?

[lisonge]

How to use Userscript comments added in the file instead of userscript object

to use Userscript comment

import { defineConfig } from 'vite';
import monkey from 'vite-plugin-monkey';
import fs from 'node:fs/promises';

const fileText = await fs.readFile(srcFileName, 'utf-8');

const customUserScript =
  fileText.match(/\/\/ ==UserScript==[\s\S]*\/\/ ==\/UserScript==/)?.[0] || ``;

export default defineConfig({
  plugins: [
    monkey({
      entry: srcFileName,
      format: {
        generate() {
          return customUserScript;
        },
      },
    }),
  ],
});

[ShivamS136]

That works like a charm.

Thanks a lot. I've spent more than 5 hours to achieve this via vite, rollup, terser and the vite-plugin-monkey but couldn't succeed.

Just a suggestion to add a more detail about the plugin config parameters for newbies like me. That would be very helpful.