transform a js/jsx/ts string

[huseeiin]

Description

import { defineConfig, type Plugin } from "vite";
import { extname } from "node:path";

// convert svg to jsx
function svg(): Plugin {
  return {
    name: "svg",

    async transform(code, id) {
      if (extname(id) === ".svg") {
        return this.transformJsxOrTs(
          `export default () => ${decodeURIComponent(code)
            .replace('export default "data:image/svg+xml,', "")
            .replace('"', "")}`
        );
      }
    },
  };
}

Suggested solution

ability to run vite's internal transformer with all the user's plugins

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

You can achieve this by using a virtual module. Related: rollup/rollup#5903

import { defineConfig, type Plugin } from "vite";
import { extname } from "node:path";

// convert svg to jsx
function svg(): Plugin {
  return {
    name: "svg",
    resolveId() { /* TODO: impl */ },
    load() { /* TODO: impl */ },
    async transform(code, id) {
      if (id.includes('custom-svg')) {
        return `export default () => ${decodeURIComponent(code)
            .replace('export default "data:image/svg+xml,', "")
            .replace('"', "")}`
      }
      if (extname(id) === ".svg") {
        return `export { default } from ${JSON.stringify(`\0${id}?custom-svg&ext=.jsx`)}`
      }
    },
  };
}