@clerk/upgrade 2.0.0-snapshot.v20251204143242 → 2.0.0-snapshot.v20251208202852

package/dist/versions/core-3/changes/clerk-react-package-rename.md

@@ -0,0 +1,23 @@
+---
+title: '`@clerk/clerk-react` renamed to `@clerk/react`'
+packages: ['react']
+matcher: '@clerk/clerk-react'
+category: 'breaking'
+docsAnchor: 'clerk-react-rename'
+---
+
+The `@clerk/clerk-react` package has been renamed to `@clerk/react`.
+
+Update your imports:
+
+```diff
+- import { ClerkProvider, useUser } from '@clerk/clerk-react';
++ import { ClerkProvider, useUser } from '@clerk/react';
+```
+
+And update your package.json:
+
+```diff
+- "@clerk/clerk-react": "^5.0.0",
++ "@clerk/react": "^7.0.0",
+```

package/dist/versions/core-3/index.js

@@ -0,0 +1,40 @@
+export default {
+  id: 'core-3',
+  name: 'Core 3',
+  docsUrl: 'https://clerk.com/docs/upgrade-guides/core-3',
+  sdkVersions: {
+    nextjs: {
+      from: 6,
+      to: 7
+    },
+    react: {
+      from: 5,
+      to: 7
+    },
+    expo: {
+      from: 2,
+      to: 3
+    },
+    'react-router': {
+      from: 2,
+      to: 3
+    },
+    'tanstack-react-start': {
+      from: 0,
+      to: 1
+    },
+    astro: {
+      from: 2,
+      to: 3
+    },
+    nuxt: {
+      from: 2,
+      to: 3
+    },
+    vue: {
+      from: 2,
+      to: 3
+    }
+  },
+  codemods: ['transform-clerk-react-v6', 'transform-remove-deprecated-props', 'transform-remove-deprecated-appearance-props', 'transform-appearance-layout-to-options', 'transform-themes-to-ui-themes', 'transform-align-experimental-unstable-prefixes']
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clerk/upgrade",
-  "version": "2.0.0-snapshot.v20251204143242",
+  "version": "2.0.0-snapshot.v20251208202852",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/clerk/javascript.git",
@@ -21,21 +21,15 @@
     ]
   },
   "dependencies": {
-    "@inkjs/ui": "^2.0.0",
-    "@jescalan/ink-markdown": "^2.0.0",
+    "chalk": "^5.3.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": "^5.0.1",
-    "ink-big-text": "^2.0.0",
-    "ink-gradient": "^3.0.0",
-    "ink-link": "^4.1.0",
     "jscodeshift": "^17.0.0",
     "marked": "^11.1.1",
     "meow": "^11.0.0",
-    "react": "18.3.1",
     "read-pkg": "^9.0.1",
     "semver-regex": "^4.0.5",
     "temp-dir": "^3.0.0"

package/dist/app.js

@@ -1,177 +0,0 @@
-import { MultiSelect, Select, TextInput } from '@inkjs/ui';
-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 guessFrameworks from './util/guess-framework.js';
-
-/**
- * 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);
-  const [fromVersion, setFromVersion] = useState(props.fromVersion);
-  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();
-  if (yolo) {
-    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 && ['nextjs', 'clerk-react', 'clerk-expo', 'react-router', 'tanstack-react-start'].includes(sdks[0])) {
-    return /*#__PURE__*/React.createElement(SDKWorkflow, {
-      sdk: sdks[0]
-    });
-  }
-
-  // We try to guess which SDK they are using
-  if (isEmpty(sdks) && isEmpty(sdkGuesses) && !sdkGuessAttempted) {
-    if (!dir) {
-      return setDir(process.cwd());
-    }
-    const {
-      guesses,
-      _uuid
-    } = guessFrameworks(dir, disableTelemetry);
-    setUuid(_uuid);
-    setSdkGuesses(guesses);
-    setSdkGuessAttempted(true);
-  }
-
-  // No support for v3 or below, sadly
-  if (parseInt(fromVersion) < 4) {
-    return /*#__PURE__*/React.createElement(Text, {
-      color: "red"
-    }, "We're so sorry, but this tool only supports migration from version 4 and above.");
-  }
-
-  // If they are trying to/from the same version, that's an error
-  if (parseInt(fromVersion) === parseInt(toVersion)) {
-    return /*#__PURE__*/React.createElement(Text, {
-      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(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 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 ", /*#__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'
-    }, {
-      label: 'no',
-      value: 'no'
-    }],
-    onChange: item => {
-      setSdkGuessConfirmed(true);
-      // 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, {
-    color: "gray"
-  }, "(select with space bar, multiple can be selected, press enter when finished)"), /*#__PURE__*/React.createElement(MultiSelect, {
-    options: SDKS,
-    onSubmit: value => setSdks(value),
-    visibleOptionCount: SDKS.length
-  })), !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: "**/*",
-    onSubmit: val => setDir(val)
-  })), !isEmpty(sdks) && fromVersion && toVersion && dir && isEmpty(ignore) && !configComplete && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, "Are there any files or directories you'd like to ignore? If so, you can add them below, separated by commas. We ignore \"node_modules\" and \".git\" by default."), /*#__PURE__*/React.createElement(Text, {
-    color: "gray"
-  }, "(globstar syntax supported)"), /*#__PURE__*/React.createElement(TextInput, {
-    placeholder: "**/public/**, **/docs/**",
-    defaultValue: ignore,
-    onSubmit: val => {
-      setIgnore(val.includes(',') ? val.split(/\s*,\s*/) : [].concat(val));
-      setConfigComplete(true);
-    }
-  })), configComplete && !configVerified && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, "Ok, here's our configuration:"), /*#__PURE__*/React.createElement(Newline, null), /*#__PURE__*/React.createElement(Text, null, "Clerk ", sdks.length > 1 ? 'SDKs' : 'SDK', " used:", /*#__PURE__*/React.createElement(Text, {
-    color: "green"
-  }, " ", sdks.toString())), /*#__PURE__*/React.createElement(Text, null, "Migrating from", /*#__PURE__*/React.createElement(Text, {
-    color: "green"
-  }, " ", fromVersion, " "), "to", /*#__PURE__*/React.createElement(Text, {
-    color: "green"
-  }, " ", toVersion)), /*#__PURE__*/React.createElement(Text, null, "Looking in the directory", /*#__PURE__*/React.createElement(Text, {
-    color: "green"
-  }, " ", dir, " "), ignore.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, "and ignoring", /*#__PURE__*/React.createElement(Text, {
-    color: "green"
-  }, " ", ignore.join(', ')))), /*#__PURE__*/React.createElement(Newline, null), /*#__PURE__*/React.createElement(Text, null, "Does this look right?"), /*#__PURE__*/React.createElement(Select, {
-    options: [{
-      label: 'yes',
-      value: 'yes'
-    }, {
-      label: 'no - exit, and I will try again',
-      value: 'no'
-    }],
-    onChange: value => {
-      if (!value || value === 'no') {
-        exit();
-      } else {
-        setConfigVerified(true);
-      }
-    }
-  })), configVerified && /*#__PURE__*/React.createElement(Scan, {
-    fromVersion,
-    toVersion,
-    sdks,
-    dir,
-    ignore,
-    noWarnings,
-    uuid,
-    disableTelemetry
-  }));
-}
-
-// small util to make the logic blocks easier to visually parse
-function isEmpty(arr) {
-  return !arr.length;
-}

package/dist/components/Codemod.js

@@ -1,97 +0,0 @@
-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|string[]} [props.glob] - Optional glob(s) to scan for files. When provided, the
- *   codemod will use this glob directly instead of prompting.
- * @param {Function} [props.onGlobResolved] - Optional callback invoked with the resolved glob array
- *   when the user provides it via the prompt.
- * @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,
-    glob: initialGlob,
-    onGlobResolved
-  } = props;
-  const [error, setError] = useState();
-  const [glob, setGlob] = useState(initialGlob);
-  const [result, setResult] = useState();
-
-  // If a glob is later provided via props (e.g. from a previous codemod run),
-  // adopt it so we can run without re-prompting.
-  useEffect(() => {
-    if (initialGlob && !glob) {
-      setGlob(initialGlob);
-    }
-  }, [initialGlob, glob]);
-  useEffect(() => {
-    if (!glob) {
-      return;
-    }
-    runCodemod(transform, glob).then(res => {
-      setResult(res);
-    }).catch(err => {
-      setError(err);
-    }).finally(() => {
-      callback(true);
-    });
-  }, [callback, glob, transform]);
-  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: "**/*.(js|jsx|ts|tsx|mjs|cjs)",
-    onSubmit: val => {
-      const parsed = val.split(/[ ,]/).filter(Boolean);
-      setGlob(parsed);
-      if (onGlobResolved) {
-        onGlobResolved(parsed);
-      }
-    }
-  })), !result && !error && glob && /*#__PURE__*/React.createElement(Spinner, {
-    label: `Running @clerk/${sdk} 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), transform === 'transform-remove-deprecated-props' && result.clerkUpgradeStats?.userbuttonAfterSignOutPropsRemoved > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Newline, null), /*#__PURE__*/React.createElement(Text, {
-    color: "yellow"
-  }, "Found and removed ", result.clerkUpgradeStats.userbuttonAfterSignOutPropsRemoved, " usage(s) of", /*#__PURE__*/React.createElement(Text, {
-    bold: true
-  }, " UserButton"), " sign-out redirect props (", /*#__PURE__*/React.createElement(Text, {
-    italic: true
-  }, "afterSignOutUrl"), " /", ' ', /*#__PURE__*/React.createElement(Text, {
-    italic: true
-  }, "afterMultiSessionSingleSignOutUrl"), ")."), /*#__PURE__*/React.createElement(Text, {
-    color: "gray"
-  }, "In Core 3, these props have been removed. Configure sign-out redirects globally via", /*#__PURE__*/React.createElement(Text, {
-    italic: true
-  }, " ClerkProvider afterSignOutUrl"), " (or the corresponding environment variable) or use", /*#__PURE__*/React.createElement(Text, {
-    italic: true
-  }, " SignOutButton redirectUrl"), " for one-off flows.")), /*#__PURE__*/React.createElement(Newline, null)), error && /*#__PURE__*/React.createElement(Text, {
-    color: "red"
-  }, error.message));
-}

package/dist/components/Command.js

@@ -1,56 +0,0 @@
-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);
-    });
-  }, [cmd]);
-  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/Header.js

@@ -1,11 +0,0 @@
-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"
-  }));
-}