From d94616bbc4694138efe5af5d8a4e55a8aa0c0fdd Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Mon, 13 Nov 2023 17:00:15 +0200 Subject: [PATCH 1/4] fix(clerk-js): Use the proper tsconfig for declarations based on $CLERK_RETHEME --- packages/clerk-js/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json index f7b2523010..1cc6b3c147 100644 --- a/packages/clerk-js/package.json +++ b/packages/clerk-js/package.json @@ -33,7 +33,7 @@ "build": "npm run build:bundle && npm run build:declarations", "build:analyze": "webpack-bundle-analyzer stats.json dist/", "build:bundle": "npm run clean && webpack --config webpack.config.js --env production", - "build:declarations": "tsc -p tsconfig.declarations.json", + "build:declarations": "if [ \"$CLERK_RETHEME\" = \"true\" ] || [ \"$CLERK_RETHEME\" = \"1\" ]; then tsc -p tsconfig.declarations.retheme.json; else tsc -p tsconfig.declarations.json; fi", "build:stats": "webpack --config webpack.config.js --env production --json=stats.json --env variant=\"clerk.browser\"", "bundlewatch": "npx bundlewatch --config bundlewatch.config.json", "clean": "rimraf ./dist", From d0adc2db4e22c9413ddc5b69ebd4cb05cbbfac59 Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Mon, 13 Nov 2023 16:57:53 +0200 Subject: [PATCH 2/4] fix(clerk-js): Introduce and use `~ui` alias In order to be able to switch between /ui and /ui.retheme simply by changing the active tsconfig file --- packages/clerk-js/src/core/clerk.ts | 3 ++- packages/clerk-js/src/index.browser.ts | 4 +++- packages/clerk-js/src/index.ts | 4 +++- packages/clerk-js/tsconfig.declarations.retheme.json | 8 ++++++++ packages/clerk-js/tsconfig.json | 6 ++++-- packages/clerk-js/webpack.config.js | 2 +- 6 files changed, 21 insertions(+), 6 deletions(-) create mode 100644 packages/clerk-js/tsconfig.declarations.retheme.json diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index e9d462b867..3592558b1a 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -53,7 +53,8 @@ import type { UserResource, } from '@clerk/types'; -import type { MountComponentRenderer } from '../ui/Components'; +import type { MountComponentRenderer } from '~ui/Components'; + import { appendAsQueryParams, buildURL, diff --git a/packages/clerk-js/src/index.browser.ts b/packages/clerk-js/src/index.browser.ts index 8550fc7cdd..099fc6d521 100644 --- a/packages/clerk-js/src/index.browser.ts +++ b/packages/clerk-js/src/index.browser.ts @@ -6,7 +6,9 @@ import './utils/setWebpackChunkPublicPath'; import 'regenerator-runtime/runtime'; import Clerk from './core/clerk'; -import { mountComponentRenderer } from './ui/Components'; + +// eslint-disable-next-line import/no-unresolved -- this is a webpack alias +import { mountComponentRenderer } from '~ui/Components'; Clerk.mountComponentRenderer = mountComponentRenderer; diff --git a/packages/clerk-js/src/index.ts b/packages/clerk-js/src/index.ts index b28a0c7d67..dd038355b0 100644 --- a/packages/clerk-js/src/index.ts +++ b/packages/clerk-js/src/index.ts @@ -1,7 +1,9 @@ import 'regenerator-runtime/runtime'; +// eslint-disable-next-line import/no-unresolved -- this is a webpack alias +import { mountComponentRenderer } from '~ui/Components'; + import Clerk from './core/clerk'; -import { mountComponentRenderer } from './ui/Components'; export * from './core/resources/Error'; diff --git a/packages/clerk-js/tsconfig.declarations.retheme.json b/packages/clerk-js/tsconfig.declarations.retheme.json new file mode 100644 index 0000000000..5999198d54 --- /dev/null +++ b/packages/clerk-js/tsconfig.declarations.retheme.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.declarations.json", + "compilerOptions": { + "paths": { + "~ui/*": ["./ui.retheme/*"] + } + } +} diff --git a/packages/clerk-js/tsconfig.json b/packages/clerk-js/tsconfig.json index feaf686475..f0899b3971 100644 --- a/packages/clerk-js/tsconfig.json +++ b/packages/clerk-js/tsconfig.json @@ -20,8 +20,10 @@ "useUnknownInCatchVariables": false, "declaration": false, "jsx": "react-jsx", - "jsxImportSource": "@emotion/react" - // "noUncheckedIndexedAccess": true // TODO: Enable and progressively fix related errors + "jsxImportSource": "@emotion/react", + "paths": { + "~ui/*": ["./ui/*"] + } }, "include": [ "src/index.ts", diff --git a/packages/clerk-js/webpack.config.js b/packages/clerk-js/webpack.config.js index 2482811dbd..9e170aca30 100644 --- a/packages/clerk-js/webpack.config.js +++ b/packages/clerk-js/webpack.config.js @@ -34,7 +34,7 @@ const common = ({ mode }) => { // @see https://webpack.js.org/configuration/resolve/#resolveextensions extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'], alias: { - ...(uiRetheme && { './ui': './ui.retheme' }), + '~ui': uiRetheme ? './ui.retheme' : './ui', }, }, plugins: [ From 363fd6d6fe1512d39ac92039946bb3a53a1ad55e Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Mon, 13 Nov 2023 16:39:40 +0200 Subject: [PATCH 3/4] fix(clerk-js): Import from relative dir instead of ui --- packages/clerk-js/src/ui.retheme/common/withRedirectToHome.tsx | 2 +- .../ui.retheme/components/OrganizationProfile/BillingWidget.tsx | 2 +- .../components/OrganizationProfile/MembershipWidget.tsx | 2 +- .../OrganizationSwitcher/OtherOrganizationActions.tsx | 2 +- .../clerk-js/src/ui.retheme/customizables/elementDescriptors.ts | 1 - packages/clerk-js/src/ui.retheme/elements/Select.tsx | 2 +- packages/clerk-js/src/ui.retheme/router/Route.tsx | 2 +- 7 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/clerk-js/src/ui.retheme/common/withRedirectToHome.tsx b/packages/clerk-js/src/ui.retheme/common/withRedirectToHome.tsx index 5fd43b8e2e..ffaad55be7 100644 --- a/packages/clerk-js/src/ui.retheme/common/withRedirectToHome.tsx +++ b/packages/clerk-js/src/ui.retheme/common/withRedirectToHome.tsx @@ -2,11 +2,11 @@ import type { ComponentType } from 'react'; import React from 'react'; import { warnings } from '../../core/warnings'; -import type { AvailableComponentProps } from '../../ui/types'; import type { ComponentGuard } from '../../utils'; import { noOrganizationExists, noUserExists, sessionExistsAndSingleSessionModeEnabled } from '../../utils'; import { useCoreClerk, useEnvironment, useOptions } from '../contexts'; import { useRouter } from '../router'; +import type { AvailableComponentProps } from '../types'; function withRedirectToHome

( Component: ComponentType

, diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/BillingWidget.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/BillingWidget.tsx index f76399dee0..5247042a7d 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/BillingWidget.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/BillingWidget.tsx @@ -1,6 +1,6 @@ -import { useRouter } from '../../../ui/router'; import { runIfFunctionOrReturn } from '../../../utils'; import { AlertIcon, Flex, Link, Text } from '../../customizables'; +import { useRouter } from '../../router'; export const BillingWidget = ({ __unstable_manageBillingUrl, diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx index 8926d9adf1..2e9d77e063 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx @@ -1,7 +1,7 @@ -import { useRouter } from '../../../ui/router'; import { runIfFunctionOrReturn } from '../../../utils'; import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts'; import { Col, Flex, Link, Text } from '../../customizables'; +import { useRouter } from '../../router'; export const MembershipWidget = () => { const { organization } = useCoreOrganization(); diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx index f2becc256e..8ac863cbbb 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { Plus } from '../../../ui/icons'; import { useCoreUser } from '../../contexts'; import { descriptors, localizationKeys } from '../../customizables'; import { Action, SecondaryActions } from '../../elements'; +import { Plus } from '../../icons'; import { UserInvitationSuggestionList } from './UserInvitationSuggestionList'; import type { UserMembershipListProps } from './UserMembershipList'; import { UserMembershipList } from './UserMembershipList'; diff --git a/packages/clerk-js/src/ui.retheme/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui.retheme/customizables/elementDescriptors.ts index 9c14c35617..1434238073 100644 --- a/packages/clerk-js/src/ui.retheme/customizables/elementDescriptors.ts +++ b/packages/clerk-js/src/ui.retheme/customizables/elementDescriptors.ts @@ -47,7 +47,6 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([ 'socialButtonsProviderIcon', 'enterpriseButtonsProviderIcon', - 'alternativeMethods', 'alternativeMethodsBlockButton', 'alternativeMethodsBlockButtonText', diff --git a/packages/clerk-js/src/ui.retheme/elements/Select.tsx b/packages/clerk-js/src/ui.retheme/elements/Select.tsx index 52813e4f4f..d22a4aee28 100644 --- a/packages/clerk-js/src/ui.retheme/elements/Select.tsx +++ b/packages/clerk-js/src/ui.retheme/elements/Select.tsx @@ -3,8 +3,8 @@ import type { SelectId } from '@clerk/types'; import type { PropsWithChildren, ReactElement } from 'react'; import React, { useState } from 'react'; -import { usePopover, useSearchInput } from '../../ui/hooks'; import { Button, descriptors, Flex, Icon, Text } from '../customizables'; +import { usePopover, useSearchInput } from '../hooks'; import { Caret, MagnifyingGlass } from '../icons'; import type { PropsOfComponent, ThemableCssProp } from '../styledSystem'; import { animations, common } from '../styledSystem'; diff --git a/packages/clerk-js/src/ui.retheme/router/Route.tsx b/packages/clerk-js/src/ui.retheme/router/Route.tsx index a4f8a966ef..32e38ea492 100644 --- a/packages/clerk-js/src/ui.retheme/router/Route.tsx +++ b/packages/clerk-js/src/ui.retheme/router/Route.tsx @@ -1,8 +1,8 @@ import type { LoadedClerk } from '@clerk/types'; import React from 'react'; -import { useCoreClerk } from '../../ui/contexts'; import { pathFromFullPath, trimTrailingSlash } from '../../utils'; +import { useCoreClerk } from '../contexts'; import { useNavigateToFlowStart } from '../hooks'; import { newPaths } from './newPaths'; import { match } from './pathToRegexp'; From d53ae01faf9ff700f6b7d81bde9189dcb40eb82c Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Tue, 14 Nov 2023 11:34:16 +0200 Subject: [PATCH 4/4] Create chilly-donuts-work.md --- .changeset/chilly-donuts-work.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .changeset/chilly-donuts-work.md diff --git a/.changeset/chilly-donuts-work.md b/.changeset/chilly-donuts-work.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/chilly-donuts-work.md @@ -0,0 +1,2 @@ +--- +---