@clerk/upgrade 1.0.9 → 1.1.0-canary.v1997eac

package/dist/app.js

@@ -1,35 +1,46 @@
 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 { Newline, Text, useApp } from 'ink';
+import React, { useEffect, 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 {
+    exit
+  } = useApp();
+  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();
@@ -38,6 +49,24 @@ export default function App({
     setSdks(SDKS.map(s => s.value));
     setYolo(false);
   }
+  useEffect(() => {
+    if (toVersion === 'core-2') {
+      setFromVersion('core-1');
+    }
+  }, [toVersion]);
+  useEffect(() => {
+    if (fromVersion === 'core-1') {
+      setToVersion('core-2');
+    }
+  }, [fromVersion]);
+
+  // Handle the individual SDK upgrade
+  if (!fromVersion && !toVersion && sdks[0] === 'nextjs') {
+    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) {
@@ -48,17 +77,13 @@ export default function App({
       guesses,
       _uuid
     } = guessFrameworks(dir, disableTelemetry);
-    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 +101,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: [{
@@ -98,6 +118,8 @@ export default function App({
       // if true, we were right so we set the sdk
       if (item === 'yes') {
         setSdks(sdkGuesses.map(guess => guess.value));
+      } else {
+        setSdkGuesses([]);
       }
     }
   })), isEmpty(sdks) && isEmpty(sdkGuesses) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, "Please select which Clerk SDK(s) you're using for your app:"), /*#__PURE__*/React.createElement(Text, {
@@ -106,7 +128,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: "**/*",
@@ -133,14 +155,14 @@ export default function App({
   }, " ", ignore.join(', ')))), /*#__PURE__*/React.createElement(Newline, null), /*#__PURE__*/React.createElement(Text, null, "Does this look right?"), /*#__PURE__*/React.createElement(Select, {
     options: [{
       label: 'yes',
-      value: true
+      value: 'yes'
     }, {
-      label: 'no - exit, and i will try again',
-      value: false
+      label: 'no - exit, and I will try again',
+      value: 'no'
     }],
     onChange: value => {
-      if (!value) {
-        process.exit();
+      if (!value || value === 'no') {
+        exit();
       } else {
         setConfigVerified(true);
       }

package/dist/cli.js

@@ -5,31 +5,31 @@ import React from 'react';
 import App from './app.js';
 import sdks from './constants/sdks.js';
 const cli = meow(`
-		Usage
-		  $ clerk-upgrade
+    Usage
+      $ clerk-upgrade
 
-		Options
-			--from             Major version number you're upgrading from
-			--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
-			--noWarnings       Do not print warnings, only items that must be fixed
-			--disableTelemetry Do not send anonymous usage telemetry
+    Options
+      --from             Major version number you're upgrading from
+      --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
+      --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
 
-		Examples
-		  $ clerk-upgrade --sdk=nextjs --dir=src/**
+    Examples
+      $ clerk-upgrade --sdk=nextjs --dir=src/**
       $ clerk-upgrade --ignore=**/public/** --ignore=**/dist/**
+      $ clerk-upgrade --from=core-1 --to=core-2
 	`, {
   importMeta: import.meta,
   flags: {
     from: {
-      type: 'string',
-      default: 'core-1'
+      type: 'string'
     },
     to: {
-      type: 'string',
-      default: 'core-2'
+      type: 'string'
     },
     sdk: {
       type: 'string',
@@ -42,6 +42,9 @@ const cli = meow(`
       type: 'string',
       isMultiple: true
     },
+    packageManager: {
+      type: 'string'
+    },
     yolo: {
       type: 'boolean'
     },
@@ -53,15 +56,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,216 @@
+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: 'Arrow function await transform',
+  source: `
+'use server';
+
+import { patchCommunication, postSMSTemplate } from '@/app/api/instances';
+import { Instance } from '@/app/api/types/instances';
+import { Template } from '@/app/api/types/templates';
+import { auth } from '@clerk/nextjs/server';
+
+export const toggleSMSTemplate = async (
+  instanceId: string,
+  template: Template,
+) => {
+  const { getToken } = auth();
+
+  return await postSMSTemplate(instanceId, template, {
+    token: await getToken(),
+  });
+};`,
+  output: `
+'use server';
+
+import { patchCommunication, postSMSTemplate } from '@/app/api/instances';
+import { Instance } from '@/app/api/types/instances';
+import { Template } from '@/app/api/types/templates';
+import { auth } from '@clerk/nextjs/server';
+
+export const toggleSMSTemplate = async (
+  instanceId: string,
+  template: Template,
+) => {
+  const { getToken } = await auth();
+
+  return await postSMSTemplate(instanceId, template, {
+    token: await getToken(),
+  });
+};`
+}, {
+  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
+    } = await auth();
+
+    await auth.protect();
+  },
+);
+`
+}, {
+  name: 'Complex clerkMiddleware() without protect()',
+  source: `
+import { clerkMiddleware } from '@clerk/nextjs/server';
+
+export default clerkMiddleware(
+  (auth, req) => {
+    const { redirectToSignIn } = auth();
+
+    redirectToSignIn();
+  },
+);
+`,
+  output: `
+import { clerkMiddleware } from '@clerk/nextjs/server';
+
+export default clerkMiddleware(
+  async (auth, req) => {
+    const { redirectToSignIn } = await auth();
+
+    redirectToSignIn();
+  },
+);
+`
+}, {
+  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,25 @@
+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, glob, options) {
+  if (!transform) {
+    throw new Error('No transform provided');
+  }
+  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,121 @@
+/**
+ * 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;
+
+  // 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;
+  }
+
+  // Helper function to make a function async
+  function makeFunctionAsync(func) {
+    if (!func.async) {
+      func.async = true;
+      dirtyFlag = true;
+    }
+  }
+  function transformFunctions(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 all function expressions
+  root.find(j.FunctionDeclaration).forEach(transformFunctions);
+  root.find(j.ArrowFunctionExpression).forEach(transformFunctions);
+
+  // 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
+        makeFunctionAsync(middlewareFunction);
+
+        // 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.CallExpression.check(init) || j.AwaitExpression.check(init)) && (init.callee?.name === 'auth' || init.argument?.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,66 @@
+import { Spinner, StatusMessage, 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
+ * @param {Function} props.callback - The callback function to be called after the codemod is run.
+ * @param {string} props.glob - 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 [glob, setGlob] = useState(props.glob);
+  const [result, setResult] = useState();
+  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, glob ? /*#__PURE__*/React.createElement(StatusMessage, {
+    variant: "success"
+  }, "Scanning for files in your project... ", glob.toString()) : /*#__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(Spinner, {
+    label: `Running @clerk/${sdk}</Text> codemod... ${transform}`
+  }), result && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StatusMessage, {
+    variant: "success"
+  }, "Running ", /*#__PURE__*/React.createElement(Text, {
+    bold: true
+  }, "@clerk/", sdk), " codemod... ", transform, " complete!"), /*#__PURE__*/React.createElement(Newline, null), /*#__PURE__*/React.createElement(Text, {
+    bold: true
+  }, "Codemod 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), /*#__PURE__*/React.createElement(Newline, null)), 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,114 @@
+import { Select, Spinner, StatusMessage } from '@inkjs/ui';
+import { execa } from 'execa';
+import { 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';
+
+/**
+ * SDKWorkflow component handles the upgrade process for a given SDK.
+ * It checks the current version of the SDK and provides the necessary steps
+ * to upgrade or run codemods based on the version.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} props.packageManager - The package manager to use for the upgrade, if needed.
+ * @param {string} props.sdk - The SDK to be upgraded.
+ *
+ * @returns {JSX.Element} The rendered component.
+ */
+export function SDKWorkflow(props) {
+  const {
+    packageManager,
+    sdk
+  } = props;
+  const [done, setDone] = useState(false);
+  const [upgradeComplete, setUpgradeComplete] = useState(false);
+  const version = getClerkSdkVersion(sdk);
+  if (sdk !== 'nextjs') {
+    return /*#__PURE__*/React.createElement(StatusMessage, {
+      variant: "error"
+    }, "The SDK upgrade functionality is only available for ", /*#__PURE__*/React.createElement(Text, {
+      bold: true
+    }, "@clerk/nextjs"), " at the moment.");
+  }
+
+  // Right now, we only have one codemod for the async request transformation
+  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(StatusMessage, {
+    variant: "success"
+  }, "Done upgrading ", /*#__PURE__*/React.createElement(Text, {
+    bold: true
+  }, "@clerk/nextjs")));
+}
+
+/**
+ * Component that runs an upgrade command for a given SDK and handles the result.
+ *
+ * @component
+ * @param {Object} props
+ * @param {Function} props.callback - The callback function to be called after the command execution.
+ * @param {string} props.sdk - The SDK for which the upgrade command is run.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @example
+ * <UpgradeCommand sdk="example-sdk" callback={handleUpgrade} />
+ */
+function UpgradeCommand({
+  callback,
+  sdk
+}) {
+  const [error, setError] = useState();
+  const [result, setResult] = 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, !result && !error && /*#__PURE__*/React.createElement(Spinner, {
+    label: `Running upgrade command: ${command}`
+  }), result && /*#__PURE__*/React.createElement(StatusMessage, {
+    variant: "success"
+  }, /*#__PURE__*/React.createElement(Text, {
+    bold: true
+  }, "@clerk/", sdk), " upgraded successfully to ", /*#__PURE__*/React.createElement(Text, {
+    bold: true
+  }, "latest!")), error && /*#__PURE__*/React.createElement(StatusMessage, {
+    variant: "error"
+  }, "Upgrade failed!"));
+}

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

@@ -5,17 +5,18 @@ 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({
-  fromVersion,
-  toVersion,
-  sdks,
-  dir,
-  ignore,
-  noWarnings,
-  uuid,
-  disableTelemetry
-}) {
+import ExpandableList from '../util/expandable-list.js';
+export function Scan(props) {
+  const {
+    fromVersion,
+    toVersion,
+    sdks,
+    dir,
+    ignore,
+    noWarnings,
+    uuid,
+    disableTelemetry
+  } = props;
   // NOTE: if the difference between fromVersion and toVersion is greater than 1
   // we need to do a little extra work here and import two matchers,
   // sequence them after each other, and clearly mark which version migration
@@ -36,7 +37,7 @@ export default function Scan({
   // { sdkName: [{ title: 'x', matcher: /x/, slug: 'x', ... }] }
   useEffect(() => {
     setStatus(`Loading data for ${toVersion} migration`);
-    import(`./versions/${toVersion}/index.js`).then(version => {
+    import(`../versions/${toVersion}/index.js`).then(version => {
       setMatchers(sdks.reduce((m, sdk) => {
         m[sdk] = version.default[sdk];
         return m;
@@ -49,12 +50,9 @@ export default function Scan({
   // result = `files` set to format: ['/filename', '/other/filename']
   useEffect(() => {
     setStatus('Collecting files to scan');
-    ignore.push('node_modules/**', '**/node_modules/**', '.git/**', 'package.json', '**/package.json', 'package-lock.json', '**/package-lock.json', 'yarn.lock', '**/yarn.lock', 'pnpm-lock.yaml', '**/pnpm-lock.yaml', '**/*.(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
-    );
-    globby(convertPathToPattern(path.resolve(dir)), {
-      ignore: ignore.filter(Boolean)
+    const pattern = convertPathToPattern(path.resolve(dir));
+    globby(pattern, {
+      ignore: ['node_modules/**', '**/node_modules/**', '.git/**', 'package.json', '**/package.json', 'package-lock.json', '**/package-lock.json', 'yarn.lock', '**/yarn.lock', 'pnpm-lock.yaml', '**/pnpm-lock.yaml', '**/*.(png|webp|svg|gif|jpg|jpeg)+', '**/*.(mp4|mkv|wmv|m4v|mov|avi|flv|webm|flac|mka|m4a|aac|ogg)+', ...ignore].filter(Boolean)
     }).then(files => {
       setFiles(files);
     });

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-canary.v1997eac",
+  "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"