add log level option to wxt --debug mode

[honwhy]

add log level option to wxt --debug mode

I am using WXT Modules to port a website into Chrome extension as running the website in Chrome extension options.

In dev mode, my wxt modules use addViteConfig to add vite plugin to support virtual scripts. ex, in htmlScriptToVirtual plugin use config.logger.info and config.logger.debug two log functions. I would like wxt --debug command to add log level support, so that in dev mode only log the config.logger.info content.

    addViteConfig(wxt, () => ({
      plugins: [
        htmlScriptToVirtual(wxt.config, () => wxt.server),
        vueDevtoolsHack(wxt.config, () => wxt.server),
        wxt.config.command === `build`
          ? htmlScriptToLocal(wxt)
          : undefined,
      ],
    }))

Is your feature request related to a bug?

"N/A"

What are the alternatives?

comment out the config.logger.debug lines, only keep the config.logger.info lines.

Additional context

codes,

{
      name: `md:dev-html-prerender`,
      apply: `build`,
      transformIndexHtml: {
        order: `post`,
        async handler(html) {
          if (server == null) {
            return html
          }
          const { document } = parseHTML(html)
          // Replace inline script with virtual module served via dev server.
          // Extension CSP blocks inline scripts, so that's why we're pulling them out.
          const promises: Promise<void>[] = []
          const inlineScripts = document.querySelectorAll(`script[src^=http]`)
          inlineScripts.forEach(async (script) => {
            promises.push(new Promise<void>((resolve) => {
              const url = script.getAttribute(`src`) ?? ``
              if (url?.startsWith(`http://localhost`)) {
                resolve()
                return
              }
              doFetch(url).then((textContent) => {
                const key = hash(textContent)
                inlineScriptContents[key] = textContent
                config.logger.info(`key-content`, key, textContent.slice(0, 10))
                script.setAttribute(`src`, `${server.origin}/@id/${virtualInlineScript}?${key}`)
                if (script.hasAttribute(`id`)) {
                  script.setAttribute(`type`, `module`)
                }
                resolve()
              })
            }))
          })
          await Promise.all(promises)
          const newHtml = document.toString()
          config.logger.debug(`\nhtmlScriptToVirtual Old HTML:\n${html}`)
          config.logger.debug(`\nhtmlScriptToVirtual New HTML:\n${newHtml}`)
          return newHtml
        },
      },
    },

[aklinker1]

WXT and Vite use consola as the default logger. You can use CONSOLA_LEVEL to customize the log level already.

https://github.com/unjs/consola?tab=readme-ov-file#log-level

--debug is meant to show everything, so I don't want to modify how that one behaves. I'd be down with adding a separate --level CLI flag.

[nickbar01234]

Would be interested in taking a stab here if you can provide me with a couple pointers.

1. Skimming through the codebase, I imagined we'd be making changes to cli, is this the correct interpretation? We'd also need to update the docs to reflect the new option.
2. Should --level only be for build / dev mode for the original ask in the PR, or would it make sense to enable the log level globally, similar to --debug mode?