Filtered Lovable Tagger Plugin for Vite to Skip Incompatible Components

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";
import { componentTagger } from "lovable-tagger";
import type { Plugin } from "vite";

export default defineConfig(({ mode }) => ({
  server: {
    host: "::",
    port: 8080,
  },
  plugins: [
    react(),
    mode === "development" && createFilteredComponentTagger(),
  ].filter(Boolean),
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
}));

function createFilteredComponentTagger(): Plugin {
  const originalPlugin = componentTagger();
  // Add elements here that are not compatible with lovable tagger (eg: Source for https://github.com/visgl/react-map-gl)
  const elementsToExclude = ["Source"]; 
  
  return {
    ...originalPlugin,
    name: "vite-plugin-component-tagger-filtered",
    transform(code: string, id: string) {
      // Check if the file contains any of the elements we want to exclude
      const containsExcludedElements = elementsToExclude.some((element) =>
        new RegExp(`<${element}[\\s>]`).test(code)
      );

      // If it contains excluded elements, skip the componentTagger transform
      if (containsExcludedElements) {
        return null;
      }

      // Otherwise, call the original transform
      const originalTransform = originalPlugin.transform;
      if (!originalTransform) return null;

      if (typeof originalTransform === "function") {
        return originalTransform.call(this, code, id);
      } else if (
        typeof originalTransform === "object" &&
        "handler" in originalTransform
      ) {
        return originalTransform.handler.call(this, code, id);
      }

      return null;
    },
  };
}