@clerk/upgrade 1.1.0-snapshot.vfbd7c17 → 1.1.0

package/dist/app.js

@@ -1,6 +1,6 @@
 import { MultiSelect, Select, TextInput } from '@inkjs/ui';
-import { Newline, Text } from 'ink';
-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';
@@ -28,20 +28,19 @@ export default function App(props) {
     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(props.fromVersion);
   const [fromVersionGuessAttempted, setFromVersionGuessAttempted] = useState(false);
-  // eslint-disable-next-line no-unused-vars
   const [toVersion, setToVersion] = useState(props.toVersion);
   const [dir, setDir] = useState(props.dir);
-  const [ignore, setIgnore] = useState(props.ignore);
+  const [ignore, setIgnore] = useState(props.ignore ?? []);
   const [configComplete, setConfigComplete] = useState(false);
   const [configVerified, setConfigVerified] = useState(false);
   const [uuid, setUuid] = useState();
@@ -50,9 +49,19 @@ export default function App(props) {
     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 (sdks.length === 1) {
+  if (!fromVersion && !toVersion && sdks[0] === 'nextjs') {
     return /*#__PURE__*/React.createElement(SDKWorkflow, {
       packageManager: props.packageManager,
       sdk: sdks[0]
@@ -68,7 +77,6 @@ export default function App(props) {
       guesses,
       _uuid
     } = guessFrameworks(dir, disableTelemetry);
-    // console.log({ guesses, _uuid });
     setUuid(_uuid);
     setSdkGuesses(guesses);
     setSdkGuessAttempted(true);
@@ -97,7 +105,9 @@ export default function App(props) {
     color: "blue"
   }, "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, {
+  }, '  ', "- ", guess.label)), /*#__PURE__*/React.createElement(Text, null, "Is that right?")) : /*#__PURE__*/React.createElement(Text, null, "It looks like you are using the ", /*#__PURE__*/React.createElement(Text, {
+    bold: true
+  }, sdkGuesses[0].label), " Clerk SDK in your project. Is that right?"), /*#__PURE__*/React.createElement(Select, {
     options: [{
       label: 'yes',
       value: 'yes'
@@ -110,6 +120,8 @@ export default function App(props) {
       // 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, {
@@ -145,14 +157,14 @@ export default function App(props) {
   }, " ", 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

@@ -21,16 +21,15 @@ const cli = meow(`
     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',

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

@@ -178,6 +178,30 @@ export default clerkMiddleware(
   },
 );
 `
+}, {
+  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: `

package/dist/codemods/__tests__/__fixtures__/transform-clerk-provider-dynamic.fixtures.js

@@ -0,0 +1,45 @@
+export const fixtures = [{
+  name: 'Basic await transform',
+  source: `
+import { ClerkProvider } from '@clerk/nextjs'
+
+export default function RootLayout({ children }) {
+  return (
+    <ClerkProvider>
+      <html>
+        <body>{children}</body>
+      </html>
+    </ClerkProvider>
+  );
+}
+      `,
+  output: `
+import { ClerkProvider } from '@clerk/nextjs'
+
+export default function RootLayout({ children }) {
+  return (
+    (<ClerkProvider dynamic>
+      <html>
+        <body>{children}</body>
+      </html>
+    </ClerkProvider>)
+  );
+}
+      `
+}, {
+  name: 'Does not transform if ClerkProvider is already dynamic',
+  source: `
+import { ClerkProvider } from '@clerk/nextjs'
+
+export default function RootLayout({ children }) {
+  return (
+    <ClerkProvider dynamic>
+      <html>
+        <body>{children}</body>
+      </html>  
+    </ClerkProvider>
+  )
+}
+        `,
+  output: ''
+}];

package/dist/codemods/__tests__/transform-clerk-provider-dynamic.test.js

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

package/dist/codemods/index.js

@@ -3,7 +3,10 @@ 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) {
+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)+',

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

@@ -116,12 +116,6 @@ module.exports = function transformAsyncRequest({
       }
     }
   });
-  if (dirtyFlag) {
-    if (process.env.NODE_ENV !== 'test') {
-      console.log(`changed: ${path}`);
-    }
-    return root.toSource();
-  }
-  return undefined;
+  return dirtyFlag ? root.toSource() : undefined;
 };
 module.exports.parser = 'tsx';

package/dist/codemods/transform-clerk-provider-dynamic.cjs

@@ -0,0 +1,50 @@
+/**
+ * Transforms the source code by adding the dynamic prop to the ClerkProvider
+ *
+ * @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 transformClerkProviderDynamic({
+  _path,
+  source
+}, {
+  jscodeshift: j
+}, _options) {
+  const root = j(source);
+  let dirtyFlag = false;
+
+  // Short-circuit if the import from '@clerk/nextjs' is not found
+  if (root.find(j.ImportDeclaration, {
+    source: {
+      value: '@clerk/nextjs'
+    }
+  }).size() === 0) {
+    return undefined;
+  }
+
+  // Find all JSXElements with the name ClerkProvider
+  root.find(j.JSXElement, {
+    openingElement: {
+      name: {
+        name: 'ClerkProvider'
+      }
+    }
+  }).forEach(path => {
+    const openingElement = path.node.openingElement;
+
+    // Check if the dynamic attribute is already present
+    const hasDynamicAttribute = openingElement.attributes.some(attr => {
+      return j.JSXAttribute.check(attr) && attr.name.name === 'dynamic';
+    });
+
+    // If dynamic attribute is not present, add it
+    if (!hasDynamicAttribute) {
+      openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('dynamic')));
+      dirtyFlag = true;
+    }
+  });
+  return dirtyFlag ? root.toSource() : undefined;
+};
+module.exports.parser = 'tsx';

package/dist/components/Codemod.js

@@ -1,4 +1,4 @@
-import { TextInput } from '@inkjs/ui';
+import { Spinner, StatusMessage, TextInput } from '@inkjs/ui';
 import { Newline, Text } from 'ink';
 import React, { useEffect, useState } from 'react';
 import { runCodemod } from '../codemods/index.js';
@@ -6,9 +6,9 @@ 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 {Object} props
  * @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.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.
  *
@@ -21,8 +21,8 @@ export function Codemod(props) {
     transform
   } = props;
   const [error, setError] = useState();
-  const [result, setResult] = useState(null);
   const [glob, setGlob] = useState(props.glob);
+  const [result, setResult] = useState();
   useEffect(() => {
     if (!glob) {
       return;
@@ -35,20 +35,24 @@ export function Codemod(props) {
       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, {
+  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(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, {
+  })), !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
-  }, "Results:"), /*#__PURE__*/React.createElement(Text, {
+  }, "Codemod results:"), /*#__PURE__*/React.createElement(Text, {
     color: "red"
   }, result.error ?? 0, " errors"), /*#__PURE__*/React.createElement(Text, {
     color: "green"
@@ -56,7 +60,7 @@ export function Codemod(props) {
     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, {
+  }, 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/Command.js

@@ -0,0 +1,56 @@
+import { Spinner, StatusMessage } from '@inkjs/ui';
+import { execa } from 'execa';
+import { Text } from 'ink';
+import React, { useEffect, useState } from 'react';
+
+/**
+ * Component that runs a command 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.cmd - The command to execute.
+ * @param {string} props.message - The message to display while the command is running.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @example
+ * <Command cmd="echo 'hello world'" />
+ */
+export function Command({
+  cmd,
+  message,
+  onError,
+  onSuccess
+}) {
+  const [error, setError] = useState();
+  const [result, setResult] = useState();
+  useEffect(() => {
+    execa({
+      shell: true
+    })`${cmd}`.then(res => {
+      setResult(res);
+    }).catch(err => {
+      setError(err);
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !result && !error && /*#__PURE__*/React.createElement(Loading, {
+    cmd: cmd,
+    message: message
+  }), result ? onSuccess ? onSuccess() : /*#__PURE__*/React.createElement(StatusMessage, {
+    variant: "success"
+  }, "Successfully ran: ", /*#__PURE__*/React.createElement(Text, {
+    bold: true
+  }, cmd)) : null, error ? onError ? onError() : /*#__PURE__*/React.createElement(StatusMessage, {
+    variant: "error"
+  }, "Failed running: ", /*#__PURE__*/React.createElement(Text, {
+    bold: true
+  }, cmd)) : null);
+}
+function Loading({
+  cmd,
+  message
+}) {
+  return message ? message : /*#__PURE__*/React.createElement(Spinner, {
+    label: `Running command: ${cmd}`
+  });
+}

package/dist/components/SDKWorkflow.js

@@ -1,11 +1,25 @@
-import { Select } from '@inkjs/ui';
-import { execa } from 'execa';
+import { Select, Spinner, StatusMessage } from '@inkjs/ui';
 import { Newline, Text } from 'ink';
-import React, { useEffect, useState } from 'react';
-import { getUpgradeCommand } from '../util/detect-package-manager.js';
+import Link from 'ink-link';
+import React, { useState } from 'react';
 import { getClerkSdkVersion } from '../util/get-clerk-version.js';
 import { Codemod } from './Codemod.js';
+import { Command } from './Command.js';
 import { Header } from './Header.js';
+import { UpgradeSDK } from './UpgradeSDK.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,
@@ -14,7 +28,16 @@ export function SDKWorkflow(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, {
+  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 `@clerk/nextjs` 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(UpgradeSDK, {
     callback: setUpgradeComplete,
     packageManager: packageManager,
     sdk: sdk
@@ -42,28 +65,28 @@ export function SDKWorkflow(props) {
         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));
+  })), done && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StatusMessage, {
+    variant: "success"
+  }, "Done upgrading ", /*#__PURE__*/React.createElement(Text, {
+    bold: true
+  }, "@clerk/nextjs")), /*#__PURE__*/React.createElement(Command, {
+    cmd: 'grep -rE "import.*\\\\{.*useAuth.*\\\\}.*from.*[\'\\\\\\"]@clerk/nextjs[\'\\\\\\"]" . --exclude-dir={node_modules,dist}',
+    message: /*#__PURE__*/React.createElement(Spinner, {
+      label: 'Checking for `useAuth` usage in your project...'
+    }),
+    onError: () => null,
+    onSuccess: () => /*#__PURE__*/React.createElement(StatusMessage, {
+      variant: "warning"
+    }, /*#__PURE__*/React.createElement(Text, null, "We have detected that your application might be using the ", /*#__PURE__*/React.createElement(Text, {
+      bold: true
+    }, "useAuth"), " hook from", ' ', /*#__PURE__*/React.createElement(Text, {
+      bold: true
+    }, "@clerk/nextjs"), "."), /*#__PURE__*/React.createElement(Newline, null), /*#__PURE__*/React.createElement(Text, null, "If usages of this hook are server-side rendered, you might need to add the ", /*#__PURE__*/React.createElement(Text, {
+      bold: true
+    }, "dynamic"), ' ', "prop to your application's root ", /*#__PURE__*/React.createElement(Text, {
+      bold: true
+    }, "ClerkProvider"), "."), /*#__PURE__*/React.createElement(Newline, null), /*#__PURE__*/React.createElement(Text, null, "You can find more information about this change in the Clerk documentation at", ' ', /*#__PURE__*/React.createElement(Link, {
+      url: "https://clerk.com/docs/nextjs/rendering-modes"
+    }, "https://clerk.com/docs/nextjs/rendering-modes"), "."))
+  })));
 }

package/dist/components/Scan.js

@@ -6,16 +6,17 @@ import { Newline, Text } from 'ink';
 import path from 'path';
 import React, { useEffect, useState } from 'react';
 import ExpandableList from '../util/expandable-list.js';
-export function Scan({
-  fromVersion,
-  toVersion,
-  sdks,
-  dir,
-  ignore,
-  noWarnings,
-  uuid,
-  disableTelemetry
-}) {
+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 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 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/components/UpgradeSDK.js

@@ -0,0 +1,70 @@
+import { Spinner, StatusMessage } from '@inkjs/ui';
+import { execa } from 'execa';
+import { existsSync } from 'fs';
+import { Text } from 'ink';
+import React, { useEffect, useState } from 'react';
+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';
+  }
+}
+function upgradeCommand(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`;
+  }
+}
+
+/**
+ * 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.packageManager - The package manager used in the project in case we cannot detect it automatically.
+ * @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} />
+ */
+export function UpgradeSDK({
+  callback,
+  packageManager,
+  sdk
+}) {
+  const [error, setError] = useState();
+  const [result, setResult] = useState();
+  const command = upgradeCommand(sdk, packageManager);
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clerk/upgrade",
-  "version": "1.1.0-snapshot.vfbd7c17",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/clerk/javascript.git",

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

@@ -1,22 +0,0 @@
-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`;
-  }
-}