BREAKING(shared): Revamp package to use subpaths

.changeset/wild-carrots-reply.md

@@ -0,0 +1,5 @@
+---
+"@clerk/shared": minor
+---
+
+TODO

packages/backend/src/api/endpoints/OrganizationApi.ts

@@ -1,4 +1,4 @@
-import { deprecated } from '@clerk/shared';
+import { deprecated } from '@clerk/shared/deprecated';
 
 import runtime from '../../runtime';
 import { joinPaths } from '../../util/path';

packages/backend/src/index.ts

@@ -1,4 +1,4 @@
-import { deprecatedObjectProperty } from '@clerk/shared';
+import { deprecatedObjectProperty } from '@clerk/shared/deprecated';
 
 import type { CreateBackendApiOptions } from './api';
 import { createBackendApiClient } from './api';

packages/backend/src/runtime/index.ts

@@ -12,9 +12,9 @@
  * TODO: Support TS runtime modules
  */
 
-// @ts-expect-error
+// @ts-ignore - These are package subpaths
 import crypto from '#crypto';
-// @ts-expect-error
+// @ts-ignore - These are package subpaths
 import * as fetchApisPolyfill from '#fetch';
 
 const {

packages/backend/src/tokens/authObjects.ts

@@ -1,4 +1,4 @@
-import { deprecated } from '@clerk/shared';
+import { deprecated } from '@clerk/shared/deprecated';
 import type { ActClaim, JwtPayload, ServerGetToken, ServerGetTokenOptions } from '@clerk/types';
 
 import type { Organization, Session, User } from '../api';

packages/backend/src/tokens/jwt/verifyJwt.ts

@@ -1,4 +1,4 @@
-import { deprecatedObjectProperty } from '@clerk/shared';
+import { deprecatedObjectProperty } from '@clerk/shared/deprecated';
 import type { Jwt, JwtPayload } from '@clerk/types';
 
 // DO NOT CHANGE: Runtime needs to be imported as a default export so that we can stub its dependencies with Sinon.js

packages/backend/src/util/shared.ts

@@ -6,11 +6,10 @@ export {
   isDevelopmentFromApiKey,
   isProductionFromApiKey,
   parsePublishableKey,
-  deprecated,
-  deprecatedProperty,
 } from '@clerk/shared';
+export { deprecated, deprecatedProperty } from '@clerk/shared/deprecated';
 
-import { buildErrorThrower } from '@clerk/shared';
+import { buildErrorThrower } from '@clerk/shared/error';
 // TODO: replace packageName with `${PACKAGE_NAME}@${PACKAGE_VERSION}` from tsup.config.ts
 export const errorThrower = buildErrorThrower({ packageName: '@clerk/backend' });
 

packages/backend/tsconfig.json

@@ -2,12 +2,14 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "baseUrl": ".",
+    "rootDir": "src",
     "declaration": true,
     "declarationMap": false,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "importHelpers": true,
-    "moduleResolution": "node",
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext",
     "noImplicitReturns": true,
     "noUnusedLocals": false,
     "noUnusedParameters": true,

packages/backend/tsconfig.test.json

@@ -3,8 +3,8 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "emitDeclarationOnly": false,
-    "module": "ES2022",
-    "moduleResolution": "Node",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "noImplicitAny": false,
     "outDir": "./tests/dist",
     "target": "ES2020"

packages/clerk-js/src/core/clerk.ts

@@ -3,7 +3,7 @@ import {
   addClerkPrefix,
   deprecated,
   handleValueOrFn,
-  inClientSide,
+  inBrowser as inClientSide,
   is4xxError,
   isHttpOrHttps,
   isLegacyFrontendApiKey,

packages/clerk-js/src/core/resources/Base.ts

@@ -1,4 +1,4 @@
-import { isValidBrowserOnline } from '@clerk/shared';
+import { isValidBrowserOnline } from '@clerk/shared/browser';
 import type { ClerkAPIErrorJSON, ClerkResourceJSON, ClerkResourceReloadParams, DeletedObjectJSON } from '@clerk/types';
 
 import { clerkMissingFapiClientInResources } from '../errors';

packages/clerk-js/src/core/resources/DisplayConfig.ts

@@ -1,4 +1,4 @@
-import { deprecatedProperty } from '@clerk/shared';
+import { deprecatedProperty } from '@clerk/shared/deprecated';
 import type { DisplayConfigJSON, DisplayConfigResource, DisplayThemeJSON, PreferredSignInStrategy } from '@clerk/types';
 
 import { BaseResource } from './internal';

packages/clerk-js/src/core/resources/EmailAddress.ts

@@ -1,4 +1,5 @@
-import { deprecated, Poller } from '@clerk/shared';
+import { deprecated } from '@clerk/shared/deprecated';
+import { Poller } from '@clerk/shared/poller';
 import type {
   AttemptEmailAddressVerificationParams,
   CreateEmailLinkFlowReturn,

packages/clerk-js/src/core/resources/Error.ts

@@ -13,5 +13,5 @@ export {
   MagicLinkErrorCode,
   parseError,
   parseErrors,
-} from '@clerk/shared';
-export type { MetamaskError } from '@clerk/shared';
+} from '@clerk/shared/error';
+export type { MetamaskError } from '@clerk/shared/error';

packages/clerk-js/src/core/resources/Organization.ts

@@ -1,4 +1,4 @@
-import { deprecated, deprecatedProperty } from '@clerk/shared';
+import { deprecated, deprecatedProperty } from '@clerk/shared/deprecated';
 import type {
   AddMemberParams,
   ClerkPaginatedResponse,

packages/clerk-js/src/core/resources/OrganizationMembership.ts

@@ -1,4 +1,4 @@
-import { deprecated } from '@clerk/shared';
+import { deprecated } from '@clerk/shared/deprecated';
 import type {
   ClerkPaginatedResponse,
   ClerkResourceReloadParams,

packages/clerk-js/src/core/resources/PublicUserData.ts

@@ -1,4 +1,4 @@
-import { deprecatedProperty } from '@clerk/shared';
+import { deprecatedProperty } from '@clerk/shared/deprecated';
 import type { PublicUserData as IPublicUserData } from '@clerk/types';
 import type { PublicUserDataJSON } from '@clerk/types';
 

packages/clerk-js/src/core/resources/Session.ts

@@ -1,5 +1,5 @@
-import { is4xxError } from '@clerk/shared';
 import { runWithExponentialBackOff } from '@clerk/shared';
+import { is4xxError } from '@clerk/shared/error';
 import type {
   ActJWTClaim,
   GetToken,
@@ -70,6 +70,8 @@ export class Session extends BaseResource implements SessionResource {
     return SessionTokenCache.clear();
   };
 
+  // TODO: Fix this eslint error
+  // eslint-disable-next-line @typescript-eslint/require-await
   getToken: GetToken = async (options?: GetTokenOptions): Promise<string | null> => {
     return runWithExponentialBackOff(() => this._getToken(options), {
       shouldRetry: (error: unknown, currentIteration: number) => !is4xxError(error) && currentIteration < 4,

packages/clerk-js/src/core/resources/User.ts

@@ -1,5 +1,4 @@
-import { deprecated } from '@clerk/shared';
-import { deprecatedProperty } from '@clerk/shared';
+import { deprecated, deprecatedProperty } from '@clerk/shared/deprecated';
 import type {
   BackupCodeJSON,
   BackupCodeResource,

packages/clerk-js/src/core/resources/UserData.ts

@@ -1,4 +1,4 @@
-import { deprecatedProperty } from '@clerk/shared';
+import { deprecatedProperty } from '@clerk/shared/deprecated';
 import type { UserData as IUserData } from '@clerk/types';
 import type { UserDataJSON } from '@clerk/types';
 

packages/clerk-js/src/core/resources/Web3Wallet.ts

@@ -1,4 +1,4 @@
-import { deprecated } from '@clerk/shared';
+import { deprecated } from '@clerk/shared/deprecated';
 import type {
   AttemptWeb3WalletVerificationParams,
   PrepareWeb3WalletVerificationParams,

packages/clerk-js/src/core/services/authentication/SessionCookieService.ts

@@ -1,6 +1,4 @@
-import { isClerkAPIResponseError } from '@clerk/shared';
-import { isNetworkError } from '@clerk/shared';
-import { is4xxError } from '@clerk/shared';
+import { is4xxError, isClerkAPIResponseError, isNetworkError } from '@clerk/shared/error';
 import type { Clerk, EnvironmentResource, SessionResource, TokenResource } from '@clerk/types';
 
 import type { CookieHandler } from '../../../utils';

packages/clerk-js/src/ui/Components.tsx

@@ -1,4 +1,5 @@
-import { createDeferredPromise, useSafeLayoutEffect } from '@clerk/shared';
+import { createDeferredPromise } from '@clerk/shared';
+import { useSafeLayoutEffect } from '@clerk/shared/react/hooks';
 import type {
   Appearance,
   Clerk,

packages/clerk-js/src/ui/common/EmailLinkVerify.tsx

@@ -1,4 +1,4 @@
-import { EmailLinkErrorCode, isEmailLinkError } from '@clerk/shared';
+import { EmailLinkErrorCode, isEmailLinkError } from '@clerk/shared/error';
 import React from 'react';
 
 import type { VerificationStatus } from '../../utils/getClerkQueryParam';

packages/clerk-js/src/ui/common/__tests__/verification.test.ts

@@ -1,4 +1,4 @@
-import { ClerkAPIResponseError } from '@clerk/shared';
+import { ClerkAPIResponseError } from '@clerk/shared/error';
 
 import { isVerificationExpiredError, VerificationErrorMessage, verificationErrorMessage } from '../verification';
 

packages/clerk-js/src/ui/common/constants.ts

@@ -1,4 +1,4 @@
-import { deprecated } from '@clerk/shared';
+import { deprecated } from '@clerk/shared/deprecated';
 import type { Attribute, Web3Provider } from '@clerk/types';
 
 import type { LocalizationKey } from '../localization/localizationKeys';

packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx

@@ -1,4 +1,4 @@
-import { isClerkAPIResponseError } from '@clerk/shared';
+import { isClerkAPIResponseError } from '@clerk/shared/error';
 import type { ClerkAPIError, MembershipRole, OrganizationResource } from '@clerk/types';
 import React from 'react';
 

packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx

@@ -1,4 +1,4 @@
-import { deprecatedObjectProperty } from '@clerk/shared';
+import { deprecatedObjectProperty } from '@clerk/shared/deprecated';
 import type { ActiveSessionResource, UserButtonProps, UserResource } from '@clerk/types';
 
 import { windowNavigate } from '../../../utils/windowNavigate';
@@ -64,6 +64,8 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
     return signOut(opts.navigateAfterSignOut);
   };
 
+  // TODO: Fix this eslint error
+  // eslint-disable-next-line @typescript-eslint/require-await
   const handleSessionClicked = (session: ActiveSessionResource) => async () => {
     card.setLoading();
     return setActive({ session, beforeEmit: opts.navigateAfterSwitchSession }).finally(() => {

packages/clerk-js/src/ui/contexts/CoreClerkContext.tsx

@@ -1,3 +1,3 @@
-import { ClerkInstanceContext, useClerkInstanceContext } from '@clerk/shared';
+import { ClerkInstanceContext, useClerkInstanceContext } from '@clerk/shared/react';
 
 export const [CoreClerkContext, useCoreClerk] = [ClerkInstanceContext, useClerkInstanceContext];

packages/clerk-js/src/ui/contexts/CoreClientContext.tsx

@@ -1,4 +1,5 @@
-import { assertContextExists, ClientContext, useClientContext } from '@clerk/shared';
+import { ClientContext, useClientContext } from '@clerk/shared/react';
+import { assertContextExists } from '@clerk/shared/react/hooks';
 import type { SessionResource, SignInResource, SignUpResource } from '@clerk/types';
 
 export const CoreClientContext = ClientContext;

packages/clerk-js/src/ui/contexts/CoreOrganizationContext.tsx

@@ -1,4 +1,5 @@
-import { OrganizationProvider, useOrganization, useOrganizationList, useOrganizations } from '@clerk/shared';
+import { OrganizationProvider } from '@clerk/shared/react';
+import { useOrganization, useOrganizationList, useOrganizations } from '@clerk/shared/react/hooks';
 
 export const CoreOrganizationProvider = OrganizationProvider;
 export const useCoreOrganization = useOrganization;

packages/clerk-js/src/ui/contexts/CoreSessionContext.tsx

@@ -1,4 +1,5 @@
-import { assertContextExists, SessionContext, useSessionContext } from '@clerk/shared';
+import { SessionContext, useSessionContext } from '@clerk/shared/react';
+import { assertContextExists } from '@clerk/shared/react/hooks';
 import type { SessionResource } from '@clerk/types';
 import React from 'react';
 

packages/clerk-js/src/ui/contexts/CoreUserContext.tsx

@@ -1,4 +1,5 @@
-import { assertContextExists, UserContext, useUserContext } from '@clerk/shared';
+import { UserContext, useUserContext } from '@clerk/shared/react';
+import { assertContextExists } from '@clerk/shared/react/hooks';
 import React, { useContext } from 'react';
 
 import { clerkCoreErrorUserIsNotDefined } from '../../core/errors';

packages/clerk-js/src/ui/customizables/AppearanceContext.tsx

@@ -1,4 +1,4 @@
-import { createContextAndHook } from '@clerk/shared';
+import { createContextAndHook } from '@clerk/shared/react/hooks';
 import React from 'react';
 
 import { useDeepEqualMemo } from '../hooks';

packages/clerk-js/src/ui/elements/Form.tsx

@@ -1,4 +1,4 @@
-import { createContextAndHook } from '@clerk/shared';
+import { createContextAndHook } from '@clerk/shared/react/hooks';
 import type { FieldId } from '@clerk/types';
 import React, { useState } from 'react';
 

packages/clerk-js/src/ui/elements/Menu.tsx

@@ -1,4 +1,4 @@
-import { createContextAndHook } from '@clerk/shared';
+import { createContextAndHook } from '@clerk/shared/react/hooks';
 import type { MenuId } from '@clerk/types';
 import type { PropsWithChildren } from 'react';
 import React, { cloneElement, isValidElement, useLayoutEffect, useRef } from 'react';

packages/clerk-js/src/ui/elements/Modal.tsx

@@ -1,4 +1,4 @@
-import { createContextAndHook, useSafeLayoutEffect } from '@clerk/shared';
+import { createContextAndHook, useSafeLayoutEffect } from '@clerk/shared/react/hooks';
 import React, { useRef } from 'react';
 
 import { descriptors, Flex } from '../customizables';

packages/clerk-js/src/ui/elements/Navbar.tsx

@@ -1,4 +1,4 @@
-import { createContextAndHook, useSafeLayoutEffect } from '@clerk/shared';
+import { createContextAndHook, useSafeLayoutEffect } from '@clerk/shared/react/hooks';
 import type { NavbarItemId } from '@clerk/types';
 import React, { useEffect } from 'react';
 

packages/clerk-js/src/ui/elements/Select.tsx

@@ -1,4 +1,4 @@
-import { createContextAndHook } from '@clerk/shared';
+import { createContextAndHook } from '@clerk/shared/react/hooks';
 import type { SelectId } from '@clerk/types';
 import type { PropsWithChildren, ReactElement } from 'react';
 import React, { useState } from 'react';

packages/clerk-js/src/ui/elements/Tabs.tsx

@@ -1,4 +1,4 @@
-import { createContextAndHook } from '@clerk/shared';
+import { createContextAndHook } from '@clerk/shared/react/hooks';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 

packages/clerk-js/src/ui/elements/TimerButton.tsx

@@ -1,4 +1,4 @@
-import { useSafeLayoutEffect } from '@clerk/shared';
+import { useSafeLayoutEffect } from '@clerk/shared/react/hooks';
 import React, { useEffect } from 'react';
 
 import { Button, useLocalizations } from '../customizables';

packages/clerk-js/src/ui/elements/contexts/CardStateContext.tsx

@@ -1,4 +1,4 @@
-import { createContextAndHook } from '@clerk/shared';
+import { createContextAndHook } from '@clerk/shared/react/hooks';
 import type { ClerkAPIError, ClerkRuntimeError } from '@clerk/types';
 import React from 'react';
 

packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx

@@ -1,4 +1,4 @@
-import { createContextAndHook } from '@clerk/shared';
+import { createContextAndHook } from '@clerk/shared/react/hooks';
 import React from 'react';
 
 type FlowMetadata = {

packages/clerk-js/src/ui/localization/makeLocalizable.tsx

@@ -1,4 +1,4 @@
-import { isClerkRuntimeError } from '@clerk/shared';
+import { isClerkRuntimeError } from '@clerk/shared/error';
 import type { ClerkAPIError, ClerkRuntimeError, LocalizationResource } from '@clerk/types';
 import React from 'react';
 

packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx

@@ -1,4 +1,4 @@
-import { createContextAndHook } from '@clerk/shared';
+import { createContextAndHook } from '@clerk/shared/react/hooks';
 import type { ClerkAPIError } from '@clerk/types';
 import React from 'react';
 

packages/clerk-js/src/ui/styledSystem/types.ts

@@ -13,7 +13,7 @@ type StyleRule = Exclude<_Interpolation<InternalTheme>, string | number | boolea
 type ThemableCssProp = ((params: InternalTheme) => StyleRule) | StyleRule;
 type CssProp = { css?: ThemableCssProp };
 
-export type AsProp = { as?: React.ElementType };
+export type AsProp = { as?: React.ElementType | undefined };
 
 type ElementProps = {
   div: React.JSX.IntrinsicElements['div'];

packages/clerk-js/src/utils/captcha.ts

@@ -1,4 +1,4 @@
-import { loadScript } from '@clerk/shared';
+import { loadScript } from '@clerk/shared/loadScript';
 
 import { clerkFailedToLoadThirdPartyScript } from '../core/errors';
 

packages/clerk-js/src/utils/cookies/client.ts

@@ -1,4 +1,4 @@
-import { createCookieHandler } from '@clerk/shared';
+import { createCookieHandler } from '@clerk/shared/cookie';
 
 const CLIENT_COOKIE_NAME = '__client';
 

packages/clerk-js/src/utils/cookies/client_uat.ts

@@ -1,4 +1,4 @@
-import { createCookieHandler } from '@clerk/shared';
+import { createCookieHandler } from '@clerk/shared/cookie';
 
 const CLIENT_UAT_COOKIE_NAME = '__client_uat';
 

packages/clerk-js/src/utils/cookies/devBrowser.ts

@@ -1,4 +1,4 @@
-import { createCookieHandler } from '@clerk/shared';
+import { createCookieHandler } from '@clerk/shared/cookie';
 
 import { DEV_BROWSER_JWT_MARKER } from '../devBrowser';
 

packages/clerk-js/src/utils/cookies/initted.ts

@@ -1,4 +1,4 @@
-import { createCookieHandler } from '@clerk/shared';
+import { createCookieHandler } from '@clerk/shared/cookie';
 
 const INITTED_COOKIE_NAME = '__initted';
 

packages/clerk-js/src/utils/cookies/session.ts

@@ -1,4 +1,4 @@
-import { createCookieHandler } from '@clerk/shared';
+import { createCookieHandler } from '@clerk/shared/cookie';
 
 const SESSION_COOKIE_NAME = '__session';
 

packages/clerk-js/src/utils/errorThrower.ts

@@ -1,4 +1,4 @@
-import { buildErrorThrower } from '@clerk/shared';
+import { buildErrorThrower } from '@clerk/shared/error';
 
 const errorThrower = buildErrorThrower({ packageName: __PKG_NAME__ });
 

packages/clerk-js/src/utils/image.ts

@@ -1,4 +1,4 @@
-import { isomorphicAtob } from '@clerk/shared';
+import { isomorphicAtob } from '@clerk/shared/isomorphicAtob';
 
 /**
  * @private

packages/clerk-js/src/utils/jwt.ts

@@ -1,4 +1,4 @@
-import { deprecatedObjectProperty } from '@clerk/shared';
+import { deprecatedObjectProperty } from '@clerk/shared/deprecated';
 import type { JWT, JWTClaims } from '@clerk/types';
 
 import { urlDecodeB64 } from './encoders';