chore(elements): Rely on DCE vs overwriting

clerk · May 23, 2024 · f72b416 · f72b416
1 parent 3c5cbde
commit f72b416
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 24 deletions.
diff --git a/packages/elements/src/internals/utils/inspector/browser/index.ts b/packages/elements/src/internals/utils/inspector/browser/index.ts
@@ -1,13 +1,12 @@
 import { isTruthy } from '@clerk/shared/underscore';
-// @ts-expect-error - Exists only in devDependencies; Removed by tsup for production builds
-// eslint-disable-next-line import/no-unresolved
 import { createBrowserInspector } from '@statelyai/inspect';
 
 export const getInspector = () => {
   if (
+    __DEV__ &&
     typeof window !== 'undefined' &&
     process.env.NODE_ENV === 'development' &&
-    isTruthy(process.env.NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG_UI)
+    isTruthy(process.env.NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG_UI ?? process.env.CLERK_ELEMENTS_DEBUG_UI)
   ) {
     const { inspect } = createBrowserInspector({
       autoStart: true,

diff --git a/packages/elements/src/internals/utils/inspector/console/index.ts b/packages/elements/src/internals/utils/inspector/console/index.ts
@@ -4,6 +4,7 @@ import { createConsoleInspector } from './console';
 
 export function getInspector() {
   if (
+    __DEV__ &&
     process.env.NODE_ENV === 'development' &&
     isTruthy(process.env.NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG ?? process.env.CLERK_ELEMENTS_DEBUG)
   ) {

diff --git a/packages/elements/src/internals/utils/inspector/index.ts b/packages/elements/src/internals/utils/inspector/index.ts
@@ -1,7 +1,13 @@
+import type { InspectionEvent, Observer } from 'xstate';
+
 import { getInspector as getBrowserInspector } from './browser';
 import { getInspector as getConsoleInspector } from './console';
 
-export const inspect = getBrowserInspector() ?? getConsoleInspector() ?? undefined;
+export let inspect: Observer<InspectionEvent> | undefined;
+
+if (__DEV__) {
+  inspect = getBrowserInspector() ?? getConsoleInspector();
+}
 
 const inspector = {
   inspect,

diff --git a/packages/elements/src/types/globals.d.ts b/packages/elements/src/types/globals.d.ts
@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  const PACKAGE_NAME: string;
+  const PACKAGE_VERSION: string;
+  const __DEV__: boolean;
+}
diff --git a/packages/elements/tsup.config.ts b/packages/elements/tsup.config.ts
@@ -1,27 +1,8 @@
-import type { Plugin } from 'esbuild';
 import { defineConfig } from 'tsup';
 
 import { version as clerkJsVersion } from '../clerk-js/package.json';
 import { name, version } from './package.json';
 
-/**
- * Replaces the inspect with undefined so-as not to bundle
- * inspectors outside of our development environment.
- */
-export function dynamicInspectorImport(): Plugin {
-  return {
-    name: 'dynamicInspectorImport',
-    setup(build) {
-      build.onLoad({ filter: /\/inspector\/index.ts/ }, async () => {
-        return {
-          contents: 'export const inspect = undefined;',
-          loader: 'ts',
-        };
-      });
-    },
-  };
-}
-
 export default defineConfig(overrideOptions => {
   const isProd = overrideOptions.env?.NODE_ENV === 'production';
 
@@ -44,6 +25,5 @@ export default defineConfig(overrideOptions => {
     format: ['cjs', 'esm'],
     minify: false,
     sourcemap: true,
-    esbuildPlugins: isProd ? [dynamicInspectorImport()] : [],
   };
 });