crossorigin.plugin.ts

crossorigin.plugin.ts

import type { Plugin, UserConfig } from 'vite';

type CrossOriginValue = 'anonymous' | 'use-credentials' | '';

interface CrossOriginPluginOptions {
  /**
   * The value to set for the crossorigin attribute.
   * @default 'use-credentials'
   */
  crossOriginValue?: CrossOriginValue;
}

export default function crossOriginPlugin(options: CrossOriginPluginOptions = {}): Plugin {
  const crossOriginValue = options.crossOriginValue || 'use-credentials';

  return {
    name: 'vite-plugin-crossorigin',
    config(config: UserConfig) {
      config.build = config.build || {};
      config.build.rollupOptions = config.build.rollupOptions || {};
      config.build.rollupOptions.output = config.build.rollupOptions.output || {};

      const existingManualChunks = config.build.rollupOptions.output.manualChunks;
      config.build.rollupOptions.output.manualChunks = (id: string, api: any) => {
        if (id === '\0vite/preload-helper') {
          return 'preload-helper';
        }
        if (typeof existingManualChunks === 'function') {
          return existingManualChunks(id, api);
        }
      };

      return config;
    },
    transformIndexHtml(html: string) {
      // Replace existing crossorigin attributes
      return html.replace(/crossorigin(="[^"]*")?/g, `crossorigin="${crossOriginValue}"`);
    },
    generateBundle(_, bundle) {
      for (const chunk of Object.values(bundle)) {
        if (chunk.type === 'chunk' && chunk.name === 'preload-helper') {
          // Note: This replacement is dependent on Vite's current implementation of the preload helper.
          // It's necessary due to how browsers handle module preloading and credential modes.
          // See: https://developer.chrome.com/blog/modulepreload/#ok-so-why-doesnt-link-relpreload-work-for-modules
          chunk.code = chunk.code.replace(
            /crossOrigin = (['"])(|anonymous|use-credentials)\1/g,
            `crossOrigin = "${crossOriginValue}"`
          );
        }
      }
    }
  };
}