@clerk/upgrade 1.0.9 → 1.1.0-snapshot.vb87a27f

package/dist/app.js

@@ -1,35 +1,44 @@
 import { MultiSelect, Select, TextInput } from '@inkjs/ui';
 import { Newline, Text } from 'ink';
-import BigText from 'ink-big-text';
-import Gradient from 'ink-gradient';
 import React, { useState } from 'react';
+import { Header } from './components/Header.js';
+import { Scan } from './components/Scan.js';
+import { SDKWorkflow } from './components/SDKWorkflow.js';
 import SDKS from './constants/sdks.js';
-import Scan from './scan.js';
-import getClerkMajorVersion from './util/get-clerk-version.js';
+import { getClerkMajorVersion } from './util/get-clerk-version.js';
 import guessFrameworks from './util/guess-framework.js';
-export default function App({
-  _fromVersion,
-  _toVersion,
-  _sdk,
-  _dir = false,
-  _ignore = [],
-  _yolo = false,
-  noWarnings = false,
-  disableTelemetry = false
-}) {
-  const [yolo, setYolo] = useState(_yolo);
-  const [sdks, setSdks] = useState(_sdk ? [_sdk] : []);
+
+/**
+ * Main CLI application component for handling Clerk SDK upgrades.
+ *
+ * @param {Object} props - The `props` object.
+ * @param {string} [props.dir] - The directory to scan for files.
+ * @param {boolean} [props.disableTelemetry=false] - Flag to disable telemetry.
+ * @param {string} [props.fromVersion] - The current version of the SDK.
+ * @param {Array<string>} [props.ignore] - List of files or directories to ignore.
+ * @param {boolean} [props.noWarnings=false] - Flag to disable warnings.
+ * @param {string} [props.sdk] - The SDK to upgrade.
+ * @param {string} [props.toVersion] - The target version of the SDK.
+ * @param {boolean} [props.yolo=false] - Flag to enable YOLO mode.
+ *
+ * @returns {JSX.Element} The rendered component.
+ */
+export default function App(props) {
+  const {
+    noWarnings = false,
+    disableTelemetry = false
+  } = props;
+  const [yolo, setYolo] = useState(props.yolo ?? false);
+  const [sdks, setSdks] = useState(props.sdk ? [props.sdk] : []);
   const [sdkGuesses, setSdkGuesses] = useState([]);
   const [sdkGuessConfirmed, setSdkGuessConfirmed] = useState(false);
   const [sdkGuessAttempted, setSdkGuessAttempted] = useState(false);
   // See comments below, can be enabled on next major
-  // eslint-disable-next-line no-unused-vars
-  const [fromVersion, setFromVersion] = useState(_fromVersion);
+  const [fromVersion, setFromVersion] = useState(props.fromVersion);
   const [fromVersionGuessAttempted, setFromVersionGuessAttempted] = useState(false);
-  // eslint-disable-next-line no-unused-vars
-  const [toVersion, setToVersion] = useState(_toVersion);
-  const [dir, setDir] = useState(_dir);
-  const [ignore, setIgnore] = useState(_ignore);
+  const [toVersion, setToVersion] = useState(props.toVersion);
+  const [dir, setDir] = useState(props.dir);
+  const [ignore, setIgnore] = useState(props.ignore);
   const [configComplete, setConfigComplete] = useState(false);
   const [configVerified, setConfigVerified] = useState(false);
   const [uuid, setUuid] = useState();
@@ -39,6 +48,14 @@ export default function App({
     setYolo(false);
   }
 
+  // Handle the individual SDK upgrade
+  if (sdks.length === 1) {
+    return /*#__PURE__*/React.createElement(SDKWorkflow, {
+      packageManager: props.packageManager,
+      sdk: sdks[0]
+    });
+  }
+
   // We try to guess which SDK they are using
   if (isEmpty(sdks) && isEmpty(sdkGuesses) && !sdkGuessAttempted) {
     if (!dir) {
@@ -48,17 +65,14 @@ export default function App({
       guesses,
       _uuid
     } = guessFrameworks(dir, disableTelemetry);
-    console.log({
-      guesses,
-      _uuid
-    });
+    // console.log({ guesses, _uuid });
     setUuid(_uuid);
     setSdkGuesses(guesses);
     setSdkGuessAttempted(true);
   }
 
   // We try to guess which version of Clerk they are using
-  if (!fromVersion && !fromVersionGuess && !fromVersionGuessAttempted) {
+  if (isEmpty(sdks) && !fromVersion && !fromVersionGuess && !fromVersionGuessAttempted) {
     fromVersionGuess = getClerkMajorVersion();
     setFromVersionGuessAttempted(true);
   }
@@ -76,14 +90,9 @@ export default function App({
       color: "red"
     }, "You are already on version ", toVersion, ", so there's no need to migrate!");
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Gradient, {
-    name: "vice"
-  }, /*#__PURE__*/React.createElement(BigText, {
-    text: "Clerk Upgrade",
-    font: "tiny"
-  })), !configComplete && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null), !configComplete && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Text, {
     color: "blue"
-  }, "Hello friend!"), " We're excited to help you upgrade Clerk", fromVersion ? ` from ${fromVersion}` : '', toVersion ? ` to ${toVersion}` : '', ". Before we get started, a couple questions..."), /*#__PURE__*/React.createElement(Newline, null)), isEmpty(sdks) && !isEmpty(sdkGuesses) && !sdkGuessConfirmed && /*#__PURE__*/React.createElement(React.Fragment, null, sdkGuesses.length > 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, "It looks like you are using the following Clerk SDKs in your project:"), sdkGuesses.map(guess => /*#__PURE__*/React.createElement(Text, {
+  }, "Hello friend!"), " We're excited to help you upgrade Clerk modules. Before we get started, a couple questions..."), /*#__PURE__*/React.createElement(Newline, null)), isEmpty(sdks) && !isEmpty(sdkGuesses) && !sdkGuessConfirmed && /*#__PURE__*/React.createElement(React.Fragment, null, sdkGuesses.length > 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, "It looks like you are using the following Clerk SDKs in your project:"), sdkGuesses.map(guess => /*#__PURE__*/React.createElement(Text, {
     key: guess.value
   }, '  ', "- ", guess.label)), /*#__PURE__*/React.createElement(Text, null, "Is that right?")) : /*#__PURE__*/React.createElement(Text, null, "It looks like you are using the \"", sdkGuesses[0].label, "\" Clerk SDK in your project. Is that right?"), /*#__PURE__*/React.createElement(Select, {
     options: [{
@@ -106,7 +115,7 @@ export default function App({
     options: SDKS,
     onSubmit: value => setSdks(value),
     visibleOptionCount: SDKS.length
-  })), !isEmpty(sdks) > 0 && fromVersion && toVersion && !dir && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, "Where would you like for us to scan for files in your project?"), /*#__PURE__*/React.createElement(Text, {
+  })), !isEmpty(sdks) && fromVersion && toVersion && !dir && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, "Where would you like for us to scan for files in your project?"), /*#__PURE__*/React.createElement(Text, {
     color: "gray"
   }, "(globstar syntax supported)"), /*#__PURE__*/React.createElement(TextInput, {
     defaultValue: "**/*",

package/dist/cli.js

@@ -13,7 +13,8 @@ const cli = meow(`
 			--to               Major version number you're upgrading to
 			--sdk              Name of the SDK you're upgrading
 			--dir              Directory you'd like to scan for files
-			--ignore           Any files or directories you'd like to ignore
+      --ignore           Any files or directories you'd like to ignore
+      --packageManager   The package manager you're using (npm, yarn, pnpm)
 			--noWarnings       Do not print warnings, only items that must be fixed
 			--disableTelemetry Do not send anonymous usage telemetry
 
@@ -42,6 +43,9 @@ const cli = meow(`
       type: 'string',
       isMultiple: true
     },
+    packageManager: {
+      type: 'string'
+    },
     yolo: {
       type: 'boolean'
     },
@@ -53,15 +57,16 @@ const cli = meow(`
     }
   }
 });
-render( /*#__PURE__*/React.createElement(App, {
-  _fromVersion: cli.flags.from,
-  _toVersion: cli.flags.to,
-  _sdk: cli.flags.sdk,
-  _dir: cli.flags.dir,
-  _ignore: cli.flags.ignore,
-  _yolo: cli.flags.yolo,
+render(/*#__PURE__*/React.createElement(App, {
+  dir: cli.flags.dir,
+  disableTelemetry: cli.flags.disableTelemetry,
+  fromVersion: cli.flags.from,
+  ignore: cli.flags.ignore,
   noWarnings: cli.flags.noWarnings,
-  disableTelemetry: cli.flags.disableTelemetry
+  packageManager: cli.flags.packageManager,
+  sdk: cli.flags.sdk,
+  toVersion: cli.flags.to,
+  yolo: cli.flags.yolo
 })
 // if having issues with errors being swallowed, uncomment this
 // { debug: true },

package/dist/codemods/__tests__/__fixtures__/transform-async-request.fixtures.js

@@ -0,0 +1,154 @@
+export const fixtures = [{
+  name: 'Basic await transform',
+  source: `
+import { auth } from '@clerk/nextjs/server';
+
+export function any() {
+    const { userId } = auth();
+    return new Response(JSON.stringify({ userId }));
+}
+
+export function another() {
+    return true;
+}
+    `,
+  output: `
+import { auth } from '@clerk/nextjs/server';
+
+export async function any() {
+    const { userId } = await auth();
+    return new Response(JSON.stringify({ userId }));
+}
+
+export function another() {
+    return true;
+}
+    `
+}, {
+  name: 'auth().protect -> await auth.protect()',
+  source: `
+import { auth } from '@clerk/nextjs/server';
+
+export function GET() {
+    const { userId } = auth().protect(
+        (has) => has({ role: 'admin' }) || has({ role: 'org:editor' }),
+    );
+    return new Response(JSON.stringify({ userId }));
+}
+    `,
+  output: `
+import { auth } from '@clerk/nextjs/server';
+
+export async function GET() {
+    const { userId } = await auth.protect(
+        (has) => has({ role: 'admin' }) || has({ role: 'org:editor' }),
+    );
+    return new Response(JSON.stringify({ userId }));
+}
+    `
+}, {
+  name: 'Basic clerkMiddleware()',
+  source: `
+import {
+    clerkMiddleware,
+    createRouteMatcher
+} from "@clerk/nextjs/server"
+
+const isPublicRoute = createRouteMatcher(["/", "/contact"])
+
+export default clerkMiddleware((auth, req) => {
+    auth().protect(); // for any other route, require auth
+})
+    `,
+  output: `
+import {
+    clerkMiddleware,
+    createRouteMatcher
+} from "@clerk/nextjs/server"
+
+const isPublicRoute = createRouteMatcher(["/", "/contact"])
+
+export default clerkMiddleware(async (auth, req) => {
+    await auth.protect(); // for any other route, require auth
+})
+    `
+}, {
+  name: 'Complex clerkMiddleware()',
+  source: `
+import {
+    clerkMiddleware,
+    createRouteMatcher
+} from "@clerk/nextjs/server"
+import createMiddleware from "next-intl/middleware"
+
+const intlMiddleware = createMiddleware({
+    locales: ["en", "de"],
+    defaultLocale: "en",
+})
+
+const isDashboardRoute = createRouteMatcher(["/dashboard(.*)"])
+
+export default clerkMiddleware((auth, request) => {
+    if (isDashboardRoute(request)) auth().protect()
+
+    return intlMiddleware(request)
+})
+    `,
+  output: `
+import {
+    clerkMiddleware,
+    createRouteMatcher
+} from "@clerk/nextjs/server"
+import createMiddleware from "next-intl/middleware"
+
+const intlMiddleware = createMiddleware({
+    locales: ["en", "de"],
+    defaultLocale: "en",
+})
+
+const isDashboardRoute = createRouteMatcher(["/dashboard(.*)"])
+
+export default clerkMiddleware(async (auth, request) => {
+    if (isDashboardRoute(request)) await auth.protect()
+
+    return intlMiddleware(request)
+})
+`
+}, {
+  name: 'Complex clerkMiddleware() with protect being destructured from auth()',
+  source: `
+import { clerkMiddleware } from '@clerk/nextjs/server';
+
+export default clerkMiddleware(
+  (auth, req) => {
+    const { protect, sessionClaims } = auth();
+
+    protect();
+  },
+);
+`,
+  output: `
+import { clerkMiddleware } from '@clerk/nextjs/server';
+
+export default clerkMiddleware(
+  async (auth, req) => {
+    const {
+      sessionClaims
+    } = auth();
+
+    await auth.protect();
+  },
+);
+`
+}, {
+  name: 'Does not transform other imports',
+  source: `
+import { auth } from '@some/other/module';
+
+export function any() {
+    const { IBauthed } = auth();
+    return new Response(JSON.stringify({ IBauthed }));
+}
+    `,
+  output: ''
+}];

package/dist/codemods/__tests__/transform-async-request.test.js

@@ -0,0 +1,15 @@
+import { applyTransform } from 'jscodeshift/dist/testUtils';
+import { describe, expect, it } from 'vitest';
+import transformer from '../transform-async-request.cjs';
+import { fixtures } from './__fixtures__/transform-async-request.fixtures';
+describe('transform-async-request', () => {
+  it.each(fixtures)(`$name`, ({
+    source,
+    output
+  }) => {
+    const result = applyTransform(transformer, {}, {
+      source
+    });
+    expect(result).toEqual(output.trim());
+  });
+});

package/dist/codemods/index.js

@@ -0,0 +1,22 @@
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { globby } from 'globby';
+import { run } from 'jscodeshift/src/Runner.js';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export async function runCodemod(transform = 'transform-async-request', glob, options) {
+  const resolvedPath = resolve(__dirname, `${transform}.cjs`);
+  const paths = await globby(glob, {
+    ignore: ['**/*.md', 'node_modules/**', '**/node_modules/**', '.git/**', '**/*.json', 'package.json', '**/package.json', 'package-lock.json', '**/package-lock.json', 'yarn.lock', '**/yarn.lock', 'pnpm-lock.yaml', '**/pnpm-lock.yaml', 'yalc.lock', '**/*.(ico|png|webp|svg|gif|jpg|jpeg)+',
+    // common image files
+    '**/*.(mp4|mkv|wmv|m4v|mov|avi|flv|webm|flac|mka|m4a|aac|ogg)+',
+    // common video files] }).then(files => {
+    '**/*.(css|scss|sass|less|styl)+' // common style files
+    ]
+  });
+  return await run(resolvedPath, paths ?? [], {
+    dry: false,
+    ...options,
+    // we must silence stdout to prevent output from interfering with ink CLI
+    silent: true
+  });
+}

package/dist/codemods/transform-async-request.cjs

@@ -0,0 +1,140 @@
+/**
+ * Transforms the source code by modifying calls to `auth().protect()` and ensuring
+ * that calls to `auth` are awaited within function declarations.
+ *
+ * @param {import('jscodeshift').FileInfo} FileInfo - The parameters object
+ * @param {import('jscodeshift').API} api - The API object provided by jscodeshift
+ * @param {Object} _options - Additional options (unused)
+ * @returns {string|undefined} - The transformed source code if modifications were made, otherwise undefined
+ */
+module.exports = function transformAsyncRequest({
+  path,
+  source
+}, {
+  jscodeshift: j
+}, _options) {
+  const root = j(source);
+  let dirtyFlag = false;
+  console.log('path', path);
+
+  // Short-circuit if the import from '@clerk/nextjs/server' is not found
+  if (root.find(j.ImportDeclaration, {
+    source: {
+      value: '@clerk/nextjs/server'
+    }
+  }).size() === 0) {
+    return undefined;
+  }
+
+  // Find all function expressions
+  root.find(j.FunctionDeclaration).forEach(func => {
+    let authCallFound = false;
+    let authProtectFound = false;
+
+    // Find the auth().protect call and transform it
+    j(func).find(j.CallExpression, {
+      callee: {
+        type: 'MemberExpression',
+        object: {
+          type: 'CallExpression',
+          callee: {
+            name: 'auth'
+          }
+        },
+        property: {
+          name: 'protect'
+        }
+      }
+    }).forEach(authProtectPath => {
+      // Replace auth().protect with await auth.protect
+      authProtectPath.node.callee = j.memberExpression(j.identifier('auth'), j.identifier('protect'));
+      authProtectPath.replace(j.awaitExpression(authProtectPath.node));
+      authProtectFound = true;
+      dirtyFlag = true;
+    });
+
+    // Find the auth() call and transform it
+    j(func).find(j.CallExpression, {
+      callee: {
+        name: 'auth'
+      }
+    }).forEach(authPath => {
+      authCallFound = true;
+      // Ensure the call to 'auth' is awaited
+      if (!j.AwaitExpression.check(authPath.parent.node)) {
+        j(authPath).replaceWith(j.awaitExpression(authPath.node));
+        dirtyFlag = true;
+      }
+    });
+
+    // Add 'async' keyword to the function declaration
+    if (!func.node.async && (authCallFound || authProtectFound)) {
+      func.node.async = true;
+      dirtyFlag = true;
+    }
+  });
+
+  // Find the default export which is a call to clerkMiddleware
+  root.find(j.ExportDefaultDeclaration).forEach(path => {
+    const declaration = path.node.declaration;
+    if (j.CallExpression.check(declaration) && j.Identifier.check(declaration.callee) && declaration.callee.name === 'clerkMiddleware') {
+      const middlewareFunction = declaration.arguments[0];
+      if (j.FunctionExpression.check(middlewareFunction) || j.ArrowFunctionExpression.check(middlewareFunction)) {
+        // Add async keyword to the function
+        if (!middlewareFunction.async) {
+          middlewareFunction.async = true;
+          dirtyFlag = true;
+        }
+
+        // Find auth().protect()
+        j(middlewareFunction.body).find(j.CallExpression, {
+          callee: {
+            type: 'MemberExpression',
+            object: {
+              type: 'CallExpression',
+              callee: {
+                type: 'Identifier',
+                name: 'auth'
+              }
+            },
+            property: {
+              type: 'Identifier',
+              name: 'protect'
+            }
+          }
+        }).forEach(callPath => {
+          const memberExpr = callPath.node.callee;
+          if (j.MemberExpression.check(memberExpr) && j.CallExpression.check(memberExpr.object)) {
+            // Transform auth().protect() to await auth.protect()
+            callPath.replace(j.awaitExpression(j.callExpression(j.memberExpression(j.identifier('auth'), j.identifier('protect')), [])));
+            dirtyFlag = true;
+          }
+        });
+
+        // Find the destructuring assignment and modify it
+        j(middlewareFunction.body).find(j.VariableDeclarator).forEach(varPath => {
+          const id = varPath.node.id;
+          const init = varPath.node.init;
+          if (j.ObjectPattern.check(id) && j.CallExpression.check(init) && j.Identifier.check(init.callee) && init.callee.name === 'auth') {
+            // Remove 'protect' from destructuring
+            id.properties = id.properties.filter(prop => {
+              return !(j.Identifier.check(prop.key) && prop.key.name === 'protect');
+            });
+            dirtyFlag = true;
+          }
+        });
+
+        // Replace protect() call with await auth.protect()
+        j(middlewareFunction.body).find(j.ExpressionStatement).forEach(exprPath => {
+          const expr = exprPath.node.expression;
+          if (j.CallExpression.check(expr) && j.Identifier.check(expr.callee) && expr.callee.name === 'protect') {
+            exprPath.replace(j.expressionStatement(j.awaitExpression(j.callExpression(j.memberExpression(j.identifier('auth'), j.identifier('protect')), []))));
+            dirtyFlag = true;
+          }
+        });
+      }
+    }
+  });
+  return dirtyFlag ? root.toSource() : undefined;
+};
+module.exports.parser = 'tsx';

package/dist/components/Codemod.js

@@ -0,0 +1,62 @@
+import { TextInput } from '@inkjs/ui';
+import { Newline, Text } from 'ink';
+import React, { useEffect, useState } from 'react';
+import { runCodemod } from '../codemods/index.js';
+
+/**
+ * Codemod component that allows users to run a codemod transformation on their project files.
+ *
+ * @param {Object} props - The properties object.
+ * @param {Function} props.callback - The callback function to be called after the codemod is run.
+ * @param {string} [props.dir] - The directory to scan for files in the project.
+ * @param {string} props.sdk - The SDK name to be used in the codemod.
+ * @param {string} props.transform - The transformation to be applied by the codemod.
+ *
+ * @returns {JSX.Element} The rendered Codemod component.
+ */
+export function Codemod(props) {
+  const {
+    callback,
+    sdk,
+    transform
+  } = props;
+  const [error, setError] = useState();
+  const [result, setResult] = useState(null);
+  const [glob, setGlob] = useState(props.glob);
+  useEffect(() => {
+    if (!glob) {
+      return;
+    }
+    runCodemod(transform, glob).then(res => {
+      setResult(res);
+    }).catch(err => {
+      setError(err);
+    }).finally(() => {
+      callback(true);
+    });
+  }, [glob]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, "Where would you like for us to scan for files in your project?"), /*#__PURE__*/React.createElement(Text, {
+    color: "gray"
+  }, "(globstar syntax supported)"), glob ? /*#__PURE__*/React.createElement(Text, null, glob.toString()) : /*#__PURE__*/React.createElement(TextInput, {
+    defaultValue: "**/*",
+    onSubmit: val => {
+      setGlob(val.split(/[ ,]/));
+    }
+  })), !result && !error && glob && /*#__PURE__*/React.createElement(Text, null, "Running ", /*#__PURE__*/React.createElement(Text, {
+    bold: true
+  }, "@clerk/", sdk), " codemod... ", transform), result && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, "Running ", /*#__PURE__*/React.createElement(Text, {
+    bold: true
+  }, "@clerk/", sdk), " codemod... ", transform, " complete!"), /*#__PURE__*/React.createElement(Newline, null), /*#__PURE__*/React.createElement(Text, {
+    bold: true
+  }, "Results:"), /*#__PURE__*/React.createElement(Text, {
+    color: "red"
+  }, result.error ?? 0, " errors"), /*#__PURE__*/React.createElement(Text, {
+    color: "green"
+  }, result.ok ?? 0, " ok"), /*#__PURE__*/React.createElement(Text, {
+    color: "yellow"
+  }, result.skip ?? 0, " skipped"), /*#__PURE__*/React.createElement(Text, {
+    color: "gray"
+  }, result.nochange ?? 0, " unmodified"), result.timeElapsed && /*#__PURE__*/React.createElement(Text, null, "Time elapsed: ", result.timeElapsed)), error && /*#__PURE__*/React.createElement(Text, {
+    color: "red"
+  }, error.message));
+}

package/dist/components/Header.js

@@ -0,0 +1,11 @@
+import BigText from 'ink-big-text';
+import Gradient from 'ink-gradient';
+import React from 'react';
+export function Header() {
+  return /*#__PURE__*/React.createElement(Gradient, {
+    name: "vice"
+  }, /*#__PURE__*/React.createElement(BigText, {
+    text: "Clerk Upgrade",
+    font: "tiny"
+  }));
+}

package/dist/components/SDKWorkflow.js

@@ -0,0 +1,69 @@
+import { Select } from '@inkjs/ui';
+import { execa } from 'execa';
+import { Newline, Text } from 'ink';
+import React, { useEffect, useState } from 'react';
+import { getUpgradeCommand } from '../util/detect-package-manager.js';
+import { getClerkSdkVersion } from '../util/get-clerk-version.js';
+import { Codemod } from './Codemod.js';
+import { Header } from './Header.js';
+export function SDKWorkflow(props) {
+  const {
+    packageManager,
+    sdk
+  } = props;
+  const [done, setDone] = useState(false);
+  const [upgradeComplete, setUpgradeComplete] = useState(false);
+  const version = getClerkSdkVersion(sdk);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null), version === 5 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UpgradeCommand, {
+    callback: setUpgradeComplete,
+    packageManager: packageManager,
+    sdk: sdk
+  }), upgradeComplete ? /*#__PURE__*/React.createElement(Codemod, {
+    callback: setDone,
+    sdk: sdk,
+    transform: "transform-async-request"
+  }) : null), !done && version === 6 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, "Looks like you are already on the latest version of ", /*#__PURE__*/React.createElement(Text, {
+    bold: true
+  }, "@clerk/", sdk), ". Would you like to run the associated codemod?."), upgradeComplete ? /*#__PURE__*/React.createElement(Codemod, {
+    sdk: sdk,
+    callback: setDone
+  }) : /*#__PURE__*/React.createElement(Select, {
+    options: [{
+      label: 'yes',
+      value: 'yes'
+    }, {
+      label: 'no',
+      value: 'no'
+    }],
+    onChange: value => {
+      if (value === 'yes') {
+        setUpgradeComplete(true);
+      } else {
+        setDone(true);
+      }
+    }
+  })), done && /*#__PURE__*/React.createElement(Text, null, "You are done!"));
+}
+function UpgradeCommand({
+  sdk,
+  callback
+}) {
+  const [result, setResult] = useState();
+  const [error, setError] = useState();
+  const command = getUpgradeCommand(sdk);
+  useEffect(() => {
+    execa({
+      shell: true
+    })`${command}`.then(res => {
+      setResult(res);
+      callback(true);
+    }).catch(err => {
+      setError(err);
+    });
+  }, [command]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, "Running upgrade command: ", command), result && /*#__PURE__*/React.createElement(Text, {
+    color: "green"
+  }, "Upgrade complete!"), error && /*#__PURE__*/React.createElement(Text, {
+    color: "red"
+  }, "Upgrade failed!"), /*#__PURE__*/React.createElement(Newline, null));
+}

package/dist/{scan.js → components/Scan.js}

@@ -5,8 +5,8 @@ import indexToPosition from 'index-to-position';
 import { Newline, Text } from 'ink';
 import path from 'path';
 import React, { useEffect, useState } from 'react';
-import ExpandableList from './util/expandable-list.js';
-export default function Scan({
+import ExpandableList from '../util/expandable-list.js';
+export function Scan({
   fromVersion,
   toVersion,
   sdks,

package/dist/constants/versions.js

@@ -1,4 +1,7 @@
 export default [{
+  label: 'Next',
+  value: 'next'
+}, {
   label: 'Core 2',
   value: 'core-2'
 }, {

package/dist/util/detect-package-manager.js

@@ -0,0 +1,22 @@
+import { existsSync } from 'fs';
+export function detectPackageManager() {
+  if (existsSync('package-lock.json')) {
+    return 'npm';
+  } else if (existsSync('yarn.lock')) {
+    return 'yarn';
+  } else if (existsSync('pnpm-lock.yaml')) {
+    return 'pnpm';
+  } else {
+    return 'npm';
+  }
+}
+export function getUpgradeCommand(sdk, packageManager) {
+  switch (packageManager || detectPackageManager()) {
+    case 'yarn':
+      return `yarn add @clerk/${sdk}@latest`;
+    case 'pnpm':
+      return `pnpm add @clerk/${sdk}@latest`;
+    default:
+      return `npm install @clerk/${sdk}@latest`;
+  }
+}

package/dist/util/expandable-list.js

@@ -74,7 +74,7 @@ export default function ExpandableList({
       bottomRight: ' ',
       right: ''
     };
-    memo.push( /*#__PURE__*/React.createElement(Box, {
+    memo.push(/*#__PURE__*/React.createElement(Box, {
       borderStyle: item.focused ? doubleBorderStyle : singleBorderStyle,
       flexDirection: "column",
       borderColor: item.focused ? 'blue' : 'white',

package/dist/util/get-clerk-version.js

@@ -1,7 +1,27 @@
 import { readPackageSync } from 'read-pkg';
 import semverRegex from 'semver-regex';
-export default function getClerkMajorVersion() {
+export function getClerkMajorVersion() {
   const pkg = readPackageSync();
   const clerk = pkg.dependencies.clerk;
-  return clerk ? semverRegex.exec(clerk)[0][0] : false;
+  return clerk ? semverRegex().exec(clerk)[0][0] : false;
+}
+export function getClerkSdkVersion(sdk) {
+  const pkg = readPackageSync();
+  const clerkSdk = pkg.dependencies[`@clerk/${sdk}`];
+  if (!clerkSdk) {
+    return false;
+  }
+  try {
+    return getMajorVersion(clerkSdk.replace('^', '').replace('~', ''));
+  } catch {
+    return false;
+  }
+}
+function getMajorVersion(semver) {
+  const match = semver.match(semverRegex());
+  if (match) {
+    const [major] = match[0].split('.');
+    return parseInt(major, 10); // Return as an integer
+  }
+  throw new Error('Invalid semver string');
 }

package/package.json

@@ -1,6 +1,11 @@
 {
   "name": "@clerk/upgrade",
-  "version": "1.0.9",
+  "version": "1.1.0-snapshot.vb87a27f",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/clerk/javascript.git",
+    "directory": "packages/upgrade"
+  },
   "license": "MIT",
   "type": "module",
   "main": "dist/cli.js",
@@ -11,16 +16,12 @@
     "dist"
   ],
   "scripts": {
-    "build": "npm run clean && NODE_ENV=production babel --out-dir=dist src --copy-files",
+    "build": "npm run clean && NODE_ENV=production babel --keep-file-extension --out-dir=dist src --copy-files",
     "clean": "del-cli dist/*",
-    "dev": "babel --out-dir=dist --watch src --copy-files",
+    "dev": "babel --keep-file-extension --out-dir=dist --watch src --copy-files",
     "lint": "eslint src/",
-    "lint:publint": "publint"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/clerk/javascript.git",
-    "directory": "packages/upgrade"
+    "lint:publint": "publint",
+    "test": "vitest"
   },
   "babel": {
     "presets": [
@@ -28,16 +29,18 @@
     ]
   },
   "dependencies": {
-    "@inkjs/ui": "^1.0.0",
+    "@inkjs/ui": "^2.0.0",
     "@jescalan/ink-markdown": "^2.0.0",
     "ejs": "3.1.10",
+    "execa": "9.4.1",
     "globby": "^14.0.1",
     "gray-matter": "^4.0.3",
     "index-to-position": "^0.1.2",
-    "ink": "^4.4.1",
+    "ink": "^5.0.1",
     "ink-big-text": "^2.0.0",
     "ink-gradient": "^3.0.0",
-    "ink-link": "^3.0.0",
+    "ink-link": "^4.1.0",
+    "jscodeshift": "^17.0.0",
     "marked": "^11.1.1",
     "meow": "^11.0.0",
     "react": "^18.3.1",
@@ -48,9 +51,10 @@
   "devDependencies": {
     "@babel/cli": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
-    "chalk": "^5.3.0",
+    "@types/jscodeshift": "^0.12.0",
     "del-cli": "^5.1.0",
-    "eslint-config-custom": "*"
+    "eslint-config-custom": "*",
+    "vitest": "^2.1.3"
   },
   "engines": {
     "node": ">=18.17.0"