Fix CLERK_RETHEME build issue on clerk-js (#2127)

* fix(clerk-js): Use the proper tsconfig for declarations based on $CLERK_RETHEME * 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 * fix(clerk-js): Import from relative dir instead of ui * Create chilly-donuts-work.md
clerk · Nov 14, 2023 · 4fda068 · 4fda068
1 parent b986c4c
commit 4fda068
Show file tree

Hide file tree

Showing 15 changed files with 30 additions and 14 deletions.
diff --git a/.changeset/chilly-donuts-work.md b/.changeset/chilly-donuts-work.md
@@ -0,0 +1,2 @@
+---
+---
diff --git 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",

diff --git 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
@@ -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
@@ -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/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<P extends AvailableComponentProps>(
   Component: ComponentType<P>,

diff --git 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
@@ -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/...ages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/...ages/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
@@ -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
@@ -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
@@ -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';

diff --git a/packages/clerk-js/tsconfig.declarations.retheme.json 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
@@ -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
@@ -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: [