@clerk/upgrade 2.0.0-snapshot.v20251224145055 → 2.0.0-snapshot.v20260105214115

package/dist/codemods/__tests__/__fixtures__/transform-protect-to-show.fixtures.js

@@ -0,0 +1,604 @@
+export const fixtures = [{
+  name: 'Transforms Protect import',
+  source: `
+import { Protect } from "@clerk/react"
+        `,
+  output: `
+import { Show } from "@clerk/react"
+`
+}, {
+  name: 'Transforms Protect import from legacy package',
+  source: `
+import { Protect } from "@clerk/clerk-react"
+        `,
+  output: `
+import { Show } from "@clerk/clerk-react"
+`
+}, {
+  name: 'Transforms SignedIn and SignedOut imports',
+  source: `
+import { SignedIn, SignedOut } from "@clerk/react"
+        `,
+  output: `
+import { Show } from "@clerk/react";
+`
+}, {
+  name: 'Transforms Protect in TSX',
+  source: `
+import { Protect } from "@clerk/react"
+
+function App() {
+  return (
+    <Protect permission="org:billing:manage">
+      <BillingSettings />
+    </Protect>
+  )
+}
+        `,
+  output: `
+import { Show } from "@clerk/react"
+
+function App() {
+  return (
+    <Show when={{
+      permission: "org:billing:manage"
+    }}>
+      <BillingSettings />
+    </Show>
+  );
+}
+`
+}, {
+  name: 'Transforms SignedIn usage',
+  source: `
+import { SignedIn } from "@clerk/react"
+
+const App = () => (
+  <SignedIn>
+    <div>Child</div>
+  </SignedIn>
+)
+        `,
+  output: `
+import { Show } from "@clerk/react"
+
+const App = () => (
+  <Show when="signed-in">
+    <div>Child</div>
+  </Show>
+)
+`
+}, {
+  name: 'Transforms SignedOut usage',
+  source: `
+import { SignedOut } from "@clerk/react"
+
+const App = () => (
+  <SignedOut>
+    <div>Child</div>
+  </SignedOut>
+)
+        `,
+  output: `
+import { Show } from "@clerk/react"
+
+const App = () => (
+  <Show when="signed-out">
+    <div>Child</div>
+  </Show>
+)
+`
+}, {
+  name: 'Transforms SignedIn namespace import',
+  source: `
+import * as Clerk from "@clerk/react"
+
+const App = () => (
+  <Clerk.SignedIn>
+    <div>Child</div>
+  </Clerk.SignedIn>
+)
+        `,
+  output: `
+import * as Clerk from "@clerk/react"
+
+const App = () => (
+  <Clerk.Show when="signed-in">
+    <div>Child</div>
+  </Clerk.Show>
+)
+`
+}, {
+  name: 'Transforms Protect condition callback',
+  source: `
+import { Protect } from "@clerk/react"
+
+function App() {
+  return (
+    <Protect condition={(has) => has({ role: "admin" })}>
+      <Content />
+    </Protect>
+  )
+}
+        `,
+  output: `
+import { Show } from "@clerk/react"
+
+function App() {
+  return (
+    <Show when={(has) => has({ role: "admin" })}>
+      <Content />
+    </Show>
+  );
+}
+`
+}, {
+  name: 'Transforms SignedIn import with other specifiers',
+  source: `
+import { ClerkProvider, SignedIn } from "@clerk/nextjs"
+        `,
+  output: `
+import { ClerkProvider, Show } from "@clerk/nextjs"
+`
+}, {
+  name: 'Transforms ProtectProps type',
+  source: `
+import { ProtectProps } from "@clerk/react";
+type Props = ProtectProps;
+        `,
+  output: `
+import { ShowProps } from "@clerk/react";
+type Props = ShowProps;
+`
+}, {
+  name: 'Self-closing Protect defaults to signedIn',
+  source: `
+import { Protect } from "@clerk/react"
+
+const Thing = () => <Protect />
+        `,
+  output: `
+import { Show } from "@clerk/react"
+
+const Thing = () => <Show when="signed-in" />
+`
+}, {
+  name: 'Transforms Protect from hybrid package without client directive',
+  source: `
+import { Protect } from "@clerk/nextjs"
+
+const App = () => (
+  <Protect role="admin">
+    <div>Child</div>
+  </Protect>
+)
+        `,
+  output: `
+import { Show } from "@clerk/nextjs"
+
+const App = () => (
+  <Show when={{
+    role: "admin"
+  }}>
+    <div>Child</div>
+  </Show>
+)
+`
+}, {
+  name: 'Transforms SignedOut to Show with fallback prop',
+  source: `
+import { SignedOut } from "@clerk/react"
+
+const App = () => (
+  <SignedOut fallback={<Other />}>
+    <div>Child</div>
+  </SignedOut>
+)
+        `,
+  output: `
+import { Show } from "@clerk/react"
+
+const App = () => (
+  <Show when="signed-out" fallback={<Other />}>
+    <div>Child</div>
+  </Show>
+)
+`
+}, {
+  name: 'Transforms SignedOut namespace import with fallback',
+  source: `
+import * as Clerk from "@clerk/react"
+
+const App = () => (
+  <Clerk.SignedOut fallback={<Other />}>
+    <div>Child</div>
+  </Clerk.SignedOut>
+)
+        `,
+  output: `
+import * as Clerk from "@clerk/react"
+
+const App = () => (
+  <Clerk.Show when="signed-out" fallback={<Other />}>
+    <div>Child</div>
+  </Clerk.Show>
+)
+`
+}, {
+  name: 'Aliased Protect import is transformed',
+  source: `
+import { Protect as CanAccess } from "@clerk/react"
+
+function App() {
+  return (
+    <CanAccess permission="org:billing:manage">
+      <BillingSettings />
+    </CanAccess>
+  )
+}
+        `,
+  output: `
+import { Show as CanAccess } from "@clerk/react"
+
+function App() {
+  return (
+    <CanAccess when={{
+      permission: "org:billing:manage"
+    }}>
+      <BillingSettings />
+    </CanAccess>
+  );
+}
+`
+}, {
+  name: 'ProtectProps type aliases update',
+  source: `
+import { ProtectProps } from "@clerk/react";
+type Props = ProtectProps;
+type Another = ProtectProps;
+        `,
+  output: `
+import { ShowProps } from "@clerk/react";
+type Props = ShowProps;
+type Another = ShowProps;
+`
+}, {
+  name: 'Protect with fallback prop',
+  source: `
+import { Protect } from "@clerk/react"
+
+function App() {
+  return (
+    <Protect permission="org:billing:manage" fallback={<Unauthorized />}>
+      <BillingSettings />
+    </Protect>
+  )
+}
+        `,
+  output: `
+import { Show } from "@clerk/react"
+
+function App() {
+  return (
+    <Show when={{
+      permission: "org:billing:manage"
+    }} fallback={<Unauthorized />}>
+      <BillingSettings />
+    </Show>
+  );
+}
+`
+}, {
+  name: 'Protect with spread props',
+  source: `
+import { Protect } from "@clerk/react"
+
+const props = { permission: "org:read" }
+const App = () => <Protect {...props} />
+        `,
+  output: `
+import { Show } from "@clerk/react"
+
+const props = { permission: "org:read" }
+const App = () => <Show when="signed-in" {...props} />
+`
+}, {
+  name: 'Transforms Protect require destructuring',
+  source: `
+const { Protect } = require("@clerk/react");
+
+function App() {
+  return <Protect role="admin">ok</Protect>;
+}
+        `,
+  output: `
+const { Show } = require("@clerk/react");
+
+function App() {
+  return (
+    <Show when={{
+      role: "admin"
+    }}>ok</Show>
+  );
+}
+`
+}, {
+  name: 'Transforms SignedIn and SignedOut require destructuring',
+  source: `
+const { SignedIn, SignedOut } = require("@clerk/react");
+
+const App = () => (
+  <>
+    <SignedIn>in</SignedIn>
+    <SignedOut>out</SignedOut>
+  </>
+);
+        `,
+  output: `
+const {
+  Show
+} = require("@clerk/react");
+
+const App = () => (
+  <>
+    <Show when="signed-in">in</Show>
+    <Show when="signed-out">out</Show>
+  </>
+);
+`
+}, {
+  name: 'Transforms namespace require',
+  source: `
+const Clerk = require("@clerk/react");
+
+const App = () => (
+  <Clerk.Protect role="admin">
+    ok
+  </Clerk.Protect>
+);
+        `,
+  output: `
+const Clerk = require("@clerk/react");
+
+const App = () => (
+  <Clerk.Show when={{
+    role: "admin"
+  }}>
+    ok
+  </Clerk.Show>
+);
+`
+}, {
+  name: 'Transforms Protect from other @clerk packages',
+  source: `
+import { Protect as ProtectExpo } from "@clerk/expo";
+import { Protect as ProtectVue } from "@clerk/vue";
+import { Protect as ProtectChrome } from "@clerk/chrome-extension";
+        `,
+  output: `
+import { Show as ProtectExpo } from "@clerk/expo";
+import { Show as ProtectVue } from "@clerk/vue";
+import { Show as ProtectChrome } from "@clerk/chrome-extension";
+`
+}, {
+  name: 'Transforms default import member usage',
+  source: `
+import Clerk from "@clerk/react";
+
+const App = () => (
+  <Clerk.Protect role="admin">
+    ok
+  </Clerk.Protect>
+);
+        `,
+  output: `
+import Clerk from "@clerk/react";
+
+const App = () => (
+  <Clerk.Show when={{
+    role: "admin"
+  }}>
+    ok
+  </Clerk.Show>
+);
+`
+}, {
+  name: 'Transforms Protect namespace import member usage',
+  source: `
+import * as Clerk from "@clerk/react";
+
+const App = () => (
+  <Clerk.Protect role="admin">
+    ok
+  </Clerk.Protect>
+);
+        `,
+  output: `
+import * as Clerk from "@clerk/react";
+
+const App = () => (
+  <Clerk.Show when={{
+    role: "admin"
+  }}>
+    ok
+  </Clerk.Show>
+);
+`
+}, {
+  name: 'Self-closing SignedIn and SignedOut are transformed',
+  source: `
+import { SignedIn, SignedOut } from "@clerk/react";
+
+const App = () => (
+  <>
+    <SignedIn />
+    <SignedOut />
+  </>
+);
+        `,
+  output: `
+import { Show } from "@clerk/react";
+
+const App = () => (
+  <>
+    <Show when="signed-in" />
+    <Show when="signed-out" />
+  </>
+);
+`
+}, {
+  name: 'Transforms SignedIn alias import usage',
+  source: `
+import { SignedIn as OnlyWhenSignedIn } from "@clerk/react";
+
+const App = () => (
+  <OnlyWhenSignedIn>
+    ok
+  </OnlyWhenSignedIn>
+);
+        `,
+  output: `
+import { Show as OnlyWhenSignedIn } from "@clerk/react";
+
+const App = () => (
+  <OnlyWhenSignedIn when="signed-in">
+    ok
+  </OnlyWhenSignedIn>
+);
+`
+}, {
+  name: 'Transforms Protect require destructuring with alias',
+  source: `
+const { Protect: CanAccess } = require("@clerk/react");
+
+const App = () => (
+  <CanAccess role="admin">
+    ok
+  </CanAccess>
+);
+        `,
+  output: `
+const { Show: CanAccess } = require("@clerk/react");
+
+const App = () => (
+  <CanAccess when={{
+    role: "admin"
+  }}>
+    ok
+  </CanAccess>
+);
+`
+}, {
+  name: 'Transforms import with duplicate Show specifier',
+  source: `
+import { Protect, Show } from "@clerk/react";
+
+const App = () => <Protect role="admin" />;
+        `,
+  output: `
+import { Show } from "@clerk/react";
+
+const App = () => <Show when={{
+  role: "admin"
+}} />;
+`
+}, {
+  name: 'Transforms import type ProtectProps',
+  source: `
+import type { ProtectProps } from "@clerk/react";
+type Props = ProtectProps;
+        `,
+  output: `
+import type { ShowProps } from "@clerk/react";
+type Props = ShowProps;
+`
+}, {
+  name: 'Sorts when object keys for determinism',
+  source: `
+import { Protect } from "@clerk/react";
+
+const App = () => (
+  <Protect role="admin" permission="org:billing:manage" treatPendingAsSignedOut>
+    ok
+  </Protect>
+);
+        `,
+  output: `
+import { Show } from "@clerk/react";
+
+const App = () => (
+  <Show
+    when={{
+      permission: "org:billing:manage",
+      role: "admin"
+    }}
+    treatPendingAsSignedOut>
+    ok
+  </Show>
+);
+`
+}, {
+  name: 'Does not transform non-clerk Protect',
+  source: `
+import { Protect } from "./local";
+
+const App = () => (
+  <Protect role="admin">
+    ok
+  </Protect>
+);
+        `,
+  output: null
+}, {
+  name: 'Transforms self-closing namespaced Protect component',
+  source: `
+import * as Clerk from "@clerk/react";
+
+const App = () => <Clerk.Protect permission="org:read" />;
+        `,
+  output: `
+import * as Clerk from "@clerk/react";
+
+const App = () => <Clerk.Show when={{
+  permission: "org:read"
+}} />;
+`
+}, {
+  name: 'Transforms namespaced SignedIn and SignedOut in same file',
+  source: `
+import * as Clerk from "@clerk/nextjs";
+
+const App = () => (
+  <>
+    <Clerk.SignedIn>
+      <Dashboard />
+    </Clerk.SignedIn>
+    <Clerk.SignedOut>
+      <Login />
+    </Clerk.SignedOut>
+    <Clerk.Protect role="admin">
+      <AdminPanel />
+    </Clerk.Protect>
+  </>
+);
+        `,
+  output: `
+import * as Clerk from "@clerk/nextjs";
+
+const App = () => (
+  <>
+    <Clerk.Show when="signed-in">
+      <Dashboard />
+    </Clerk.Show>
+    <Clerk.Show when="signed-out">
+      <Login />
+    </Clerk.Show>
+    <Clerk.Show when={{
+      role: "admin"
+    }}>
+      <AdminPanel />
+    </Clerk.Show>
+  </>
+);
+`
+}];

package/dist/codemods/__tests__/transform-protect-to-show.test.js

@@ -0,0 +1,20 @@
+import { applyTransform } from 'jscodeshift/dist/testUtils';
+import { describe, expect, it } from 'vitest';
+import transformer from '../transform-protect-to-show.cjs';
+import { fixtures } from './__fixtures__/transform-protect-to-show.fixtures';
+describe('transform-protect-to-show', () => {
+  it.each(fixtures)(`$name`, ({
+    source,
+    output
+  }) => {
+    const result = applyTransform(transformer, {}, {
+      source
+    });
+    if (output === null) {
+      // null output means no transformation should occur
+      expect(result).toBeFalsy();
+    } else {
+      expect(result).toEqual(output.trim());
+    }
+  });
+});

package/dist/codemods/transform-protect-to-show.cjs

@@ -0,0 +1,290 @@
+const CLERK_PACKAGE_PREFIX = '@clerk/';
+const isClerkPackageSource = sourceValue => {
+  return typeof sourceValue === 'string' && sourceValue.startsWith(CLERK_PACKAGE_PREFIX);
+};
+
+/**
+ * Transforms `<Protect>` component usage to `<Show>` component.
+ *
+ * Handles the following transformations:
+ * - `<Protect role="admin">` → `<Show when={{ role: 'admin' }}>`
+ * - `<Protect permission="org:read">` → `<Show when={{ permission: 'org:read' }}>`
+ * - `<Protect feature="user:premium">` → `<Show when={{ feature: 'user:premium' }}>`
+ * - `<Protect plan="pro">` → `<Show when={{ plan: 'pro' }}>`
+ * - `<Protect condition={(has) => ...}>` → `<Show when={(has) => ...}>`
+ * - `<SignedIn>...` → `<Show when="signed-in">...`
+ * - `<SignedOut>...` → `<Show when="signed-out">...`
+ *
+ * Also updates ESM/CJS imports from `Protect` to `Show`.
+ *
+ * @param {import('jscodeshift').FileInfo} fileInfo - The file information
+ * @param {import('jscodeshift').API} api - The API object provided by jscodeshift
+ * @returns {string|undefined} - The transformed source code if modifications were made
+ */
+module.exports = function transformProtectToShow({
+  source
+}, {
+  jscodeshift: j
+}) {
+  const root = j(source);
+  let dirtyFlag = false;
+  const componentKindByLocalName = {};
+  const protectPropsLocalsToRename = [];
+  const namespaceImports = new Set();
+
+  // Transform ESM imports: Protect → Show, ProtectProps → ShowProps
+  root.find(j.ImportDeclaration).forEach(path => {
+    const node = path.node;
+    const sourceValue = node.source?.value;
+    if (!isClerkPackageSource(sourceValue)) {
+      return;
+    }
+    const specifiers = node.specifiers || [];
+    specifiers.forEach(spec => {
+      if (j.ImportDefaultSpecifier.check(spec) || j.ImportNamespaceSpecifier.check(spec)) {
+        if (spec.local?.name) {
+          namespaceImports.add(spec.local.name);
+        }
+        return;
+      }
+      if (!j.ImportSpecifier.check(spec)) {
+        return;
+      }
+      const originalImportedName = spec.imported.name;
+      if (['Protect', 'SignedIn', 'SignedOut'].includes(originalImportedName)) {
+        const effectiveLocalName = spec.local ? spec.local.name : originalImportedName;
+        componentKindByLocalName[effectiveLocalName] = originalImportedName === 'Protect' ? 'protect' : originalImportedName === 'SignedIn' ? 'signed-in' : 'signed-out';
+        spec.imported.name = 'Show';
+        if (spec.local && spec.local.name === originalImportedName) {
+          spec.local.name = 'Show';
+        }
+        dirtyFlag = true;
+        return;
+      }
+      if (spec.imported.name === 'ProtectProps') {
+        const effectiveLocalName = spec.local ? spec.local.name : spec.imported.name;
+        spec.imported.name = 'ShowProps';
+        if (spec.local && spec.local.name === 'ProtectProps') {
+          spec.local.name = 'ShowProps';
+        }
+        if (effectiveLocalName === 'ProtectProps') {
+          protectPropsLocalsToRename.push(effectiveLocalName);
+        }
+        dirtyFlag = true;
+      }
+    });
+    const seenLocalNames = new Set();
+    node.specifiers = specifiers.reduce((acc, spec) => {
+      let localName = null;
+      if (spec.local && j.Identifier.check(spec.local)) {
+        localName = spec.local.name;
+      } else if (j.ImportSpecifier.check(spec) && j.Identifier.check(spec.imported)) {
+        localName = spec.imported.name;
+      }
+      if (localName) {
+        if (seenLocalNames.has(localName)) {
+          dirtyFlag = true;
+          return acc;
+        }
+        seenLocalNames.add(localName);
+      }
+      acc.push(spec);
+      return acc;
+    }, []);
+  });
+
+  // Transform CJS requires: Protect → Show
+  root.find(j.VariableDeclarator).forEach(path => {
+    const declarator = path.node;
+    const init = declarator.init;
+    if (!init || !j.CallExpression.check(init)) {
+      return;
+    }
+    if (!j.Identifier.check(init.callee) || init.callee.name !== 'require') {
+      return;
+    }
+    const args = init.arguments || [];
+    if (args.length !== 1) {
+      return;
+    }
+    const arg = args[0];
+    const sourceValue = j.Literal.check(arg) ? arg.value : j.StringLiteral.check(arg) ? arg.value : null;
+    if (!isClerkPackageSource(sourceValue)) {
+      return;
+    }
+    const id = declarator.id;
+    if (j.Identifier.check(id)) {
+      namespaceImports.add(id.name);
+      return;
+    }
+    if (!j.ObjectPattern.check(id)) {
+      return;
+    }
+    const properties = id.properties || [];
+    const seenLocalNames = new Set();
+    id.properties = properties.reduce((acc, prop) => {
+      if (!(j.ObjectProperty.check(prop) || j.Property.check(prop))) {
+        acc.push(prop);
+        return acc;
+      }
+      if (!j.Identifier.check(prop.key)) {
+        acc.push(prop);
+        return acc;
+      }
+      const originalImportedName = prop.key.name;
+      const originalLocalName = j.Identifier.check(prop.value) ? prop.value.name : null;
+      const effectiveLocalName = originalLocalName || originalImportedName;
+      if (['Protect', 'SignedIn', 'SignedOut'].includes(originalImportedName)) {
+        componentKindByLocalName[effectiveLocalName] = originalImportedName === 'Protect' ? 'protect' : originalImportedName === 'SignedIn' ? 'signed-in' : 'signed-out';
+        prop.key.name = 'Show';
+        if (j.Identifier.check(prop.value) && prop.value.name === originalImportedName) {
+          prop.value.name = 'Show';
+        }
+        if (prop.shorthand) {
+          prop.value = j.identifier('Show');
+        }
+        dirtyFlag = true;
+      }
+      const newLocalName = j.Identifier.check(prop.value) ? prop.value.name : null;
+      const finalLocalName = newLocalName || (j.Identifier.check(prop.key) ? prop.key.name : null);
+      if (finalLocalName) {
+        if (seenLocalNames.has(finalLocalName)) {
+          dirtyFlag = true;
+          return acc;
+        }
+        seenLocalNames.add(finalLocalName);
+      }
+      acc.push(prop);
+      return acc;
+    }, []);
+  });
+
+  // Rename references to ProtectProps (only when local name was ProtectProps)
+  if (protectPropsLocalsToRename.length > 0) {
+    root.find(j.TSTypeReference, {
+      typeName: {
+        type: 'Identifier',
+        name: 'ProtectProps'
+      }
+    }).forEach(path => {
+      const typeName = path.node.typeName;
+      if (j.Identifier.check(typeName) && typeName.name === 'ProtectProps') {
+        typeName.name = 'ShowProps';
+        dirtyFlag = true;
+      }
+    });
+  }
+
+  // Transform JSX: <Protect ...> → <Show when={...}>
+  root.find(j.JSXElement).forEach(path => {
+    const openingElement = path.node.openingElement;
+    const closingElement = path.node.closingElement;
+    let kind = null;
+    let renameNodeToShow = null;
+    if (j.JSXIdentifier.check(openingElement.name)) {
+      const originalName = openingElement.name.name;
+      kind = componentKindByLocalName[originalName];
+      if (['Protect', 'SignedIn', 'SignedOut'].includes(originalName)) {
+        renameNodeToShow = node => {
+          if (j.JSXIdentifier.check(node)) {
+            node.name = 'Show';
+          }
+        };
+      }
+    } else if (j.JSXMemberExpression.check(openingElement.name)) {
+      const member = openingElement.name;
+      if ((j.JSXIdentifier.check(member.object) || j.JSXMemberExpression.check(member.object)) && j.JSXIdentifier.check(member.property)) {
+        const objectName = j.JSXIdentifier.check(member.object) ? member.object.name : null;
+        const propertyName = member.property.name;
+        if (objectName && namespaceImports.has(objectName) && ['Protect', 'SignedIn', 'SignedOut'].includes(propertyName)) {
+          kind = propertyName === 'Protect' ? 'protect' : propertyName === 'SignedIn' ? 'signed-in' : 'signed-out';
+          renameNodeToShow = node => {
+            if (j.JSXMemberExpression.check(node) && j.JSXIdentifier.check(node.property)) {
+              node.property.name = 'Show';
+            }
+          };
+        }
+      }
+    }
+    if (!kind) {
+      return;
+    }
+    if (renameNodeToShow) {
+      renameNodeToShow(openingElement.name);
+      if (closingElement && closingElement.name) {
+        renameNodeToShow(closingElement.name);
+      }
+    }
+    const attributes = openingElement.attributes || [];
+    const authAttributes = [];
+    const otherAttributes = [];
+    let conditionAttr = null;
+
+    // Separate auth-related attributes from other attributes
+    attributes.forEach(attr => {
+      if (!j.JSXAttribute.check(attr)) {
+        otherAttributes.push(attr);
+        return;
+      }
+      const attrName = attr.name.name;
+      if (attrName === 'condition') {
+        conditionAttr = attr;
+      } else if (['feature', 'permission', 'plan', 'role'].includes(attrName)) {
+        authAttributes.push(attr);
+      } else {
+        otherAttributes.push(attr);
+      }
+    });
+
+    // Build the `when` prop
+    let whenValue = null;
+    if (kind === 'signed-in' || kind === 'signed-out') {
+      whenValue = j.stringLiteral(kind === 'signed-in' ? 'signed-in' : 'signed-out');
+    } else if (conditionAttr) {
+      // condition prop becomes the when callback directly
+      whenValue = conditionAttr.value;
+    } else if (authAttributes.length > 0) {
+      // Build an object from auth attributes
+      const properties = authAttributes.map(attr => {
+        const key = j.identifier(attr.name.name);
+        let value;
+        if (j.JSXExpressionContainer.check(attr.value)) {
+          value = attr.value.expression;
+        } else if (j.StringLiteral.check(attr.value) || j.Literal.check(attr.value)) {
+          value = attr.value;
+        } else if (attr.value == null) {
+          value = j.booleanLiteral(true);
+        } else {
+          // Default string value
+          value = j.stringLiteral(attr.value?.value || '');
+        }
+        return j.objectProperty(key, value);
+      });
+      properties.sort((a, b) => {
+        const aKey = j.Identifier.check(a.key) ? a.key.name : '';
+        const bKey = j.Identifier.check(b.key) ? b.key.name : '';
+        return aKey.localeCompare(bKey);
+      });
+      whenValue = j.jsxExpressionContainer(j.objectExpression(properties));
+    }
+
+    // Reconstruct attributes with `when` prop
+    const newAttributes = [];
+    const defaultWhenValue = kind === 'signed-out' ? 'signed-out' : 'signed-in';
+    const finalWhenValue = whenValue || j.stringLiteral(defaultWhenValue);
+    newAttributes.push(j.jsxAttribute(j.jsxIdentifier('when'), finalWhenValue));
+
+    // Add remaining attributes (fallback, etc.)
+    otherAttributes.forEach(attr => newAttributes.push(attr));
+    openingElement.attributes = newAttributes;
+    dirtyFlag = true;
+  });
+  if (!dirtyFlag) {
+    return undefined;
+  }
+  let result = root.toSource();
+  // Fix double semicolons that can occur when recast reprints directive prologues
+  result = result.replace(/^(['"`][^'"`]+['"`]);;/gm, '$1;');
+  return result;
+};
+module.exports.parser = 'tsx';

package/dist/versions/core-3/changes/protect-signedin-signedout-replaced-by-show.md

@@ -0,0 +1,62 @@
+---
+title: '`Protect`, `SignedIn`, and `SignedOut` replaced by `Show`'
+matcher: '<(Protect|SignedIn|SignedOut)(\\s|>)'
+matcherFlags: 'm'
+category: 'breaking'
+---
+
+The authorization control components `Protect`, `SignedIn`, and `SignedOut` have been removed in favor of a single component: `Show`.
+
+### Signed in / signed out
+
+```diff
+-import { SignedIn, SignedOut } from '@clerk/react';
++import { Show } from '@clerk/react';
+
+-<SignedIn>
++<Show when="signed-in">
+   <Dashboard />
+-</SignedIn>
++</Show>
+
+-<SignedOut>
++<Show when="signed-out">
+   <SignIn />
+-</SignedOut>
++</Show>
+```
+
+### Authorization checks (roles/permissions/features/plans)
+
+```diff
+-import { Protect } from '@clerk/react';
++import { Show } from '@clerk/react';
+
+-<Protect role="admin" fallback={<p>Unauthorized</p>}>
++<Show when={{ role: 'admin' }} fallback={<p>Unauthorized</p>}>
+   <AdminPanel />
+-</Protect>
++</Show>
+
+-<Protect permission="org:billing:manage">
++<Show when={{ permission: 'org:billing:manage' }}>
+   <BillingSettings />
+-</Protect>
++</Show>
+```
+
+If you were using `condition={(has) => ...}` on `Protect`, pass that callback to `when`:
+
+```diff
+-<Protect condition={(has) => has({ role: 'admin' }) && isAllowed}>
++<Show when={(has) => has({ role: 'admin' }) && isAllowed}>
+   <AdminPanel />
+-</Protect>
++</Show>
+```
+
+To auto-migrate common patterns, run the upgrade CLI (includes a `transform-protect-to-show` codemod):
+
+```bash
+npx @clerk/upgrade --release core-3
+```

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

@@ -36,5 +36,5 @@ export default {
       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']
+  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', 'transform-protect-to-show']
 };

package/package.json

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