configurablecli tag for setup commands

Author: nicktrn

apps/webapp/app/components/SetupCommands.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext, useState } from "react";
 import { useAppOrigin } from "~/hooks/useAppOrigin";
 import { useProject } from "~/hooks/useProject";
+import { useTriggerCliTag } from "~/hooks/useTriggerCliTag";
 import {
   ClientTabs,
   ClientTabsContent,
@@ -35,8 +36,6 @@ function usePackageManager() {
   return context;
 }
 
-const v3PackageTag = "latest";
-
 function getApiUrlArg() {
   const appOrigin = useAppOrigin();
 
@@ -69,8 +68,9 @@ export function InitCommandV3({ title }: TabsProps) {
   const project = useProject();
   const projectRef = project.externalRef;
   const apiUrlArg = getApiUrlArg();
+  const triggerCliTag = useTriggerCliTag();
 
-  const initCommandParts = [`trigger.dev@${v3PackageTag}`, "init", `-p ${projectRef}`, apiUrlArg];
+  const initCommandParts = [`trigger.dev@${triggerCliTag}`, "init", `-p ${projectRef}`, apiUrlArg];
   const initCommand = initCommandParts.filter(Boolean).join(" ");
 
   const { activePackageManager, setActivePackageManager } = usePackageManager();
@@ -118,6 +118,7 @@ export function InitCommandV3({ title }: TabsProps) {
 }
 
 export function TriggerDevStepV3({ title }: TabsProps) {
+  const triggerCliTag = useTriggerCliTag();
   const { activePackageManager, setActivePackageManager } = usePackageManager();
 
   return (
@@ -139,30 +140,31 @@ export function TriggerDevStepV3({ title }: TabsProps) {
           variant="secondary/medium"
           iconButton
           className="mb-4"
-          value={`npx trigger.dev@${v3PackageTag} dev`}
+          value={`npx trigger.dev@${triggerCliTag} dev`}
         />
       </ClientTabsContent>
       <ClientTabsContent value={"pnpm"}>
         <ClipboardField
           variant="secondary/medium"
           iconButton
           className="mb-4"
-          value={`pnpm dlx trigger.dev@${v3PackageTag} dev`}
+          value={`pnpm dlx trigger.dev@${triggerCliTag} dev`}
         />
       </ClientTabsContent>
       <ClientTabsContent value={"yarn"}>
         <ClipboardField
           variant="secondary/medium"
           iconButton
           className="mb-4"
-          value={`yarn dlx trigger.dev@${v3PackageTag} dev`}
+          value={`yarn dlx trigger.dev@${triggerCliTag} dev`}
         />
       </ClientTabsContent>
     </ClientTabs>
   );
 }
 
 export function TriggerLoginStepV3({ title }: TabsProps) {
+  const triggerCliTag = useTriggerCliTag();
   const { activePackageManager, setActivePackageManager } = usePackageManager();
 
   return (
@@ -184,23 +186,23 @@ export function TriggerLoginStepV3({ title }: TabsProps) {
           variant="secondary/medium"
           iconButton
           className="mb-4"
-          value={`npx trigger.dev@${v3PackageTag} login`}
+          value={`npx trigger.dev@${triggerCliTag} login`}
         />
       </ClientTabsContent>
       <ClientTabsContent value={"pnpm"}>
         <ClipboardField
           variant="secondary/medium"
           iconButton
           className="mb-4"
-          value={`pnpm dlx trigger.dev@${v3PackageTag} login`}
+          value={`pnpm dlx trigger.dev@${triggerCliTag} login`}
         />
       </ClientTabsContent>
       <ClientTabsContent value={"yarn"}>
         <ClipboardField
           variant="secondary/medium"
           iconButton
           className="mb-4"
-          value={`yarn dlx trigger.dev@${v3PackageTag} login`}
+          value={`yarn dlx trigger.dev@${triggerCliTag} login`}
         />
       </ClientTabsContent>
     </ClientTabs>

apps/webapp/app/env.server.ts

@@ -856,6 +856,9 @@ const EnvironmentSchema = z.object({
 
   // Machine presets
   MACHINE_PRESETS_OVERRIDE_PATH: z.string().optional(),
+
+  // CLI package tag (e.g. "latest", "v4-beta", "4.0.0") - used for setup commands
+  TRIGGER_CLI_TAG: z.string().default("latest"),
 });
 
 export type Environment = z.infer<typeof EnvironmentSchema>;

apps/webapp/app/hooks/useTriggerCliTag.ts

@@ -0,0 +1,8 @@
+import { useTypedRouteLoaderData } from "remix-typedjson";
+import { type loader } from "~/root";
+
+export function useTriggerCliTag() {
+  const routeMatch = useTypedRouteLoaderData<typeof loader>("root");
+
+  return routeMatch!.triggerCliTag;
+}

apps/webapp/app/root.tsx

@@ -56,6 +56,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       features,
       appEnv: env.APP_ENV,
       appOrigin: env.APP_ORIGIN,
+      triggerCliTag: env.TRIGGER_CLI_TAG,
       kapa,
     },
     { headers: { "Set-Cookie": await commitSession(session) } }