Environment-Related Hooks

import type { Plugin } from "vite"

export function envAwarePlugin(): Plugin {
  return {
    name: "vite-plugin-env-aware",
    transform(code, id) {
      // this.environment is available under the Environment API
      const envName = this.environment?.name ?? "unknown"

      if (envName === "client") {
        // Client code: inject browser-related identifiers
        return {
          code: code.replace("__IS_CLIENT__", "true"),
          map: null,
        }
      }

      if (envName === "ssr") {
        // Server-side code: inject Node.js-related identifiers
        return {
          code: code.replace("__IS_CLIENT__", "false"),
          map: null,
        }
      }

      return null
    },
  }
}

import type { Plugin } from "vite"

export function multiEnvPlugin(): Plugin {
  return {
    name: "vite-plugin-multi-env",
    async buildApp(app) {
      // The app object contains all configured Environments
      // You can control build order here

      // Build the ssr environment first (generate server-side code)
      await app.build("ssr")

      // Then build the client environment (generate browser code)
      await app.build("client")
    },
  }
}

import type { Plugin } from "vite"

export function envHotPlugin(): Plugin {
  return {
    name: "vite-plugin-env-hot",
    hotUpdate({ type, file, timestamp, modules, server }) {
      // type: "create" | "update" | "delete"
      // You can distinguish between file creation, modification, and deletion events

      if (file.endsWith(".yaml")) {
        // Broadcast a custom event to all environments
        server.environments.client.hot.send({
          type: "custom",
          event: "yaml-update",
          data: { file },
        })

        // Only invalidate modules in the ssr environment
        const ssrModule = server.environments.ssr?.moduleGraph.getModuleById(file)
        if (ssrModule) {
          server.environments.ssr?.moduleGraph.invalidateModule(ssrModule)
          return [ssrModule]
        }

        return []
      }
    },
  }
}

transform(code, id) {
  if (!id.endsWith(".ts")) return null

  const envName = this.environment?.name

  // In the SSR environment, replace browser APIs with Node.js equivalents
  if (envName === "ssr") {
    return {
      code: code
        .replace("localStorage.getItem", "process.env.STORAGE_DATA")
        .replace("window.location.href", "globalThis.__SSR_URL__"),
      map: null,
    }
  }

  return null
},

config() {
  return {
    environments: {
      client: {
        define: {
          __RUNTIME__: JSON.stringify("browser"),
          __HAS_DOM__: "true",
        },
      },
      ssr: {
        define: {
          __RUNTIME__: JSON.stringify("node"),
          __HAS_DOM__: "false",
        },
      },
    },
  }
},

// Implement a plugin that, in the transform phase, injects the implementation
// corresponding to the "CLIENT_ONLY_CODE" or "SERVER_ONLY_CODE" placeholders
// based on the current environment:
// - client environment: replace CLIENT_ONLY_CODE with actual browser API calls
// - ssr environment: replace CLIENT_ONLY_CODE with undefined to prevent server-side errors

import type { Plugin } from "vite"

export function envInjectorPlugin(): Plugin {
  return {
    name: "vite-plugin-env-injector",
    transform(code, id) {
      // TODO:
      // 1. Get the current environment name
      // 2. Replace placeholders based on the environment
      // 3. Return the modified code
    },
  }
}