Skip to content

Commit e7ab237

Browse files
tmilewskitmilewski
authored
feat(elements): Add & refactor inspectors (clerk#3424)
1 parent a534faa commit e7ab237

15 files changed

Lines changed: 93 additions & 113 deletions

File tree

‎.changeset/khaki-starfishes-allow.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@clerk/elements': minor
3+
---
4+
5+
- Adds Stately's Browser Inspector in development builds
6+
- Removes `@statelyai/inspect` from dependencies
7+
- Ensures all inspector-related code is omitted from the build

‎package-lock.json‎

Lines changed: 16 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/elements/package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,13 @@
5555
"app:dev": "(cd examples/nextjs && npm run dev --turbo)",
5656
"app:dev:debug": "(cd examples/nextjs && NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG=true npm run dev --turbo)",
5757
"app:dev:debug:server": "(cd examples/nextjs && NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG=true CLERK_ELEMENTS_DEBUG_SERVER=true npm run dev --turbo)",
58+
"app:dev:debug:ui": "(cd examples/nextjs && NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG_UI=true npm run dev --turbo)",
5859
"app:e2e": "(cd examples/nextjs && npm run e2e)",
5960
"app:lint": "(cd examples/nextjs && npm run lint)",
60-
"build": "tsup",
61-
"build:analyze": "tsup --metafile; open https://esbuild.github.io/analyze/",
62-
"build:declarations": "tsc -p tsconfig.json",
63-
"dev": "tsup --watch",
61+
"build": "tsup --env.NODE_ENV production",
62+
"build:analyze": "tsup --env.NODE_ENV production --metafile; open https://esbuild.github.io/analyze/",
63+
"build:declarations": "tsc --env.NODE_ENV production -p tsconfig.json",
64+
"dev": "tsup --env.NODE_ENV development --watch",
6465
"dev:example": "concurrently \"npm run dev\" \"npm run app:dev\"",
6566
"lint": "eslint src/",
6667
"lint:attw": "attw --pack .",
@@ -71,7 +72,6 @@
7172
"dependencies": {
7273
"@radix-ui/react-form": "^0.0.3",
7374
"@radix-ui/react-slot": "^1.0.2",
74-
"@statelyai/inspect": "^0.3.0",
7575
"@xstate/react": "^4.1.1",
7676
"client-only": "^0.0.1",
7777
"xstate": "^5.13.0"
@@ -81,6 +81,7 @@
8181
"@clerk/eslint-config-custom": "*",
8282
"@clerk/shared": "2.2.1",
8383
"@clerk/types": "^4.5.0",
84+
"@statelyai/inspect": "^0.3.1",
8485
"@types/node": "^18.17.0",
8586
"@types/react": "*",
8687
"@types/react-dom": "*",

‎packages/elements/src/internals/machines/form/form.context.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import { createActorContext } from '@xstate/react';
22
import type { SnapshotFrom } from 'xstate';
33

44
import { FormMachine } from '~/internals/machines/form';
5-
import { consoleInspector } from '~/internals/utils/inspector';
5+
import { inspect } from '~/internals/utils/inspector';
66

77
export type SnapshotState = SnapshotFrom<typeof FormMachine>;
88

9-
const FormMachineContext = createActorContext(FormMachine, { inspect: consoleInspector });
9+
const FormMachineContext = createActorContext(FormMachine, { inspect });
1010

1111
export const FormStoreProvider = FormMachineContext.Provider;
1212
export const useFormStore = FormMachineContext.useActorRef;

‎packages/elements/src/internals/utils/inspector/browser.ts‎

Lines changed: 0 additions & 85 deletions
This file was deleted.

‎packages/elements/src/internals/utils/inspector/browser/index.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { isTruthy } from '@clerk/shared/underscore';
2+
import { createBrowserInspector } from '@statelyai/inspect';
3+
4+
export const getInspector = () => {
5+
if (
6+
__DEV__ &&
7+
typeof window !== 'undefined' &&
8+
process.env.NODE_ENV === 'development' &&
9+
isTruthy(process.env.NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG_UI ?? process.env.CLERK_ELEMENTS_DEBUG_UI)
10+
) {
11+
const { inspect } = createBrowserInspector({
12+
autoStart: true,
13+
});
14+
15+
return inspect;
16+
}
17+
18+
return undefined;
19+
};

packages/elements/src/internals/utils/inspector/console.ts renamed to packages/elements/src/internals/utils/inspector/console/console.ts

File renamed without changes.

‎packages/elements/src/internals/utils/inspector/console/index.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { isTruthy } from '@clerk/shared/underscore';
2+
3+
import { createConsoleInspector } from './console';
4+
5+
export function getInspector() {
6+
if (
7+
__DEV__ &&
8+
process.env.NODE_ENV === 'development' &&
9+
isTruthy(process.env.NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG ?? process.env.CLERK_ELEMENTS_DEBUG)
10+
) {
11+
return createConsoleInspector({
12+
enabled: true,
13+
debugServer: isTruthy(process.env.CLERK_ELEMENTS_DEBUG_SERVER),
14+
});
15+
}
16+
return undefined;
17+
}

‎packages/elements/src/internals/utils/inspector/index.ts‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
1-
import { isTruthy } from '@clerk/shared/underscore';
1+
import type { InspectionEvent, Observer } from 'xstate';
22

3-
export { createBrowserInspectorReactHook } from './browser';
4-
import { createConsoleInspector } from './console';
3+
import { getInspector as getBrowserInspector } from './browser';
4+
import { getInspector as getConsoleInspector } from './console';
55

6-
export const consoleInspector = createConsoleInspector({
7-
enabled: isTruthy(process.env.NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG ?? process.env.CLERK_ELEMENTS_DEBUG),
8-
debugServer: isTruthy(process.env.CLERK_ELEMENTS_DEBUG_SERVER),
9-
});
6+
export let inspect: Observer<InspectionEvent> | undefined;
7+
8+
if (__DEV__) {
9+
inspect = getBrowserInspector() ?? getConsoleInspector();
10+
}
11+
12+
const inspector = {
13+
inspect,
14+
};
15+
16+
export default inspector;

‎packages/elements/src/react/hooks/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
export { useActiveStates } from './use-active-states.hook';
22
export { useActiveTags } from './use-active-tags.hook';
3-
export { useBrowserInspector } from './use-browser-inspector.hook';
43
export { useThirdPartyProvider } from './use-third-party-provider.hook';
54
export { useFocus } from './use-focus.hook';

0 commit comments

Comments
 (0)