diff --git a/.changeset/nasty-ties-invite.md b/.changeset/nasty-ties-invite.md new file mode 100644 index 0000000000..f8d9dca493 --- /dev/null +++ b/.changeset/nasty-ties-invite.md @@ -0,0 +1,13 @@ +--- +'gatsby-plugin-clerk': patch +'@clerk/clerk-js': patch +'@clerk/chrome-extension': patch +'@clerk/fastify': patch +'@clerk/nextjs': patch +'@clerk/clerk-react': patch +'@clerk/remix': patch +'@clerk/types': patch +'@clerk/clerk-expo': patch +--- + +Introduce a new property on the core Clerk singleton, `sdkMetadata`. This will be populated by each host SDK. This metadata will be used to make logging and debugging easier. diff --git a/.gitignore b/.gitignore index 93c4423318..af55a91e0b 100644 --- a/.gitignore +++ b/.gitignore @@ -39,6 +39,7 @@ yarn-error.log testem.log /typings **/coverage/** +*.tsbuildinfo # System Files .DS_Store diff --git a/packages/chrome-extension/jest.config.js b/packages/chrome-extension/jest.config.js index 6006b8ae1c..882e10b0fe 100644 --- a/packages/chrome-extension/jest.config.js +++ b/packages/chrome-extension/jest.config.js @@ -1,3 +1,6 @@ +// eslint-disable-next-line @typescript-eslint/no-var-requires +const { name, version } = require('./package.json'); + module.exports = { displayName: 'clerk-js', injectGlobals: true, @@ -13,4 +16,10 @@ module.exports = { testRegex: ['/src/.*.test.[jt]sx?$'], testPathIgnorePatterns: ['/node_modules/'], + + globals: { + __DEV__: true, + PACKAGE_NAME: name, + PACKAGE_VERSION: version, + }, }; diff --git a/packages/chrome-extension/src/ClerkProvider.tsx b/packages/chrome-extension/src/ClerkProvider.tsx index 0553e9689b..7cbad0dbaa 100644 --- a/packages/chrome-extension/src/ClerkProvider.tsx +++ b/packages/chrome-extension/src/ClerkProvider.tsx @@ -7,6 +7,11 @@ import type { TokenCache } from './cache'; import { ChromeStorageCache } from './cache'; import { buildClerk } from './singleton'; +Clerk.sdkMetadata = { + name: PACKAGE_NAME, + version: PACKAGE_VERSION, +}; + __internal__setErrorThrowerOptions({ packageName: '@clerk/chrome-extension', }); diff --git a/packages/chrome-extension/src/globals.d.ts b/packages/chrome-extension/src/globals.d.ts new file mode 100644 index 0000000000..72b67abb15 --- /dev/null +++ b/packages/chrome-extension/src/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/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index bc0811ffb6..dbde35c213 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -41,6 +41,7 @@ import type { PublishableKey, RedirectOptions, Resources, + SDKMetadata, SetActiveParams, SignInProps, SignInRedirectOptions, @@ -144,7 +145,13 @@ const defaultOptions: ClerkOptions = { export default class Clerk implements ClerkInterface { public static mountComponentRenderer?: MountComponentRenderer; + public static version: string = __PKG_VERSION__; + public static sdkMetadata: SDKMetadata = { + name: __PKG_NAME__, + version: __PKG_VERSION__, + }; + public client?: ClientResource; public session?: ActiveSessionResource | null; public organization?: OrganizationResource | null; diff --git a/packages/expo/package.json b/packages/expo/package.json index 4ce40e841b..413f62947a 100644 --- a/packages/expo/package.json +++ b/packages/expo/package.json @@ -21,8 +21,11 @@ "dist" ], "scripts": { - "build": "tsc -p tsconfig.build.json", - "dev": "tsc -p tsconfig.build.json --watch", + "build": "tsup", + "dev": "tsup --watch", + "dev:publish": "npm run dev -- --env.publish", + "build:declarations": "tsc -p tsconfig.declarations.json", + "publish:local": "npx yalc push --replace --sig", "clean": "rimraf ./dist", "lint": "eslint src/" }, diff --git a/packages/expo/src/globals.d.ts b/packages/expo/src/globals.d.ts new file mode 100644 index 0000000000..f14f854fd7 --- /dev/null +++ b/packages/expo/src/globals.d.ts @@ -0,0 +1,6 @@ +export {}; + +declare global { + const PACKAGE_NAME: string; + const PACKAGE_VERSION: string; +} diff --git a/packages/expo/src/singleton.ts b/packages/expo/src/singleton.ts index 686f7a435c..5c5528f227 100644 --- a/packages/expo/src/singleton.ts +++ b/packages/expo/src/singleton.ts @@ -4,6 +4,11 @@ import type { HeadlessBrowserClerk } from '@clerk/clerk-react'; import type { TokenCache } from './cache'; +Clerk.sdkMetadata = { + name: PACKAGE_NAME, + version: PACKAGE_VERSION, +}; + const KEY = '__clerk_client_jwt'; export let clerk: HeadlessBrowserClerk; diff --git a/packages/expo/tsconfig.build.json b/packages/expo/tsconfig.build.json deleted file mode 100644 index 4b53273767..0000000000 --- a/packages/expo/tsconfig.build.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "compilerOptions": { - "outDir": "dist", - "baseUrl": ".", - "lib": ["es6", "dom"], - "jsx": "react", - "module": "commonjs", - "moduleResolution": "node", - "importHelpers": true, - "declaration": true, - "declarationMap": false, - "noImplicitReturns": true, - "noUnusedLocals": false, - "noUnusedParameters": true, - "resolveJsonModule": true, - "sourceMap": false, - "strict": true, - "esModuleInterop": true, - "skipLibCheck": true - }, - "include": ["src"] -} diff --git a/packages/expo/tsconfig.declarations.json b/packages/expo/tsconfig.declarations.json new file mode 100644 index 0000000000..4a7735336e --- /dev/null +++ b/packages/expo/tsconfig.declarations.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "skipLibCheck": true, + "noEmit": false, + "declaration": true, + "emitDeclarationOnly": true, + "declarationMap": true, + "sourceMap": false, + "declarationDir": "./dist" + } +} diff --git a/packages/expo/tsconfig.json b/packages/expo/tsconfig.json index bbee8dfdab..339f1c1697 100644 --- a/packages/expo/tsconfig.json +++ b/packages/expo/tsconfig.json @@ -1,6 +1,26 @@ { - "extends": "./tsconfig.build.json", "compilerOptions": { + "outDir": "dist", + "baseUrl": ".", + "lib": ["es6", "dom"], + "jsx": "react", + "module": "commonjs", + "moduleResolution": "node", + "importHelpers": true, + "declaration": true, + "declarationMap": false, + "noImplicitReturns": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "resolveJsonModule": true, + "sourceMap": false, + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "allowJs": true, + "target": "ES2019", + "noEmitOnError": false, "incremental": true - } + }, + "include": ["src"] } diff --git a/packages/expo/tsup.config.ts b/packages/expo/tsup.config.ts new file mode 100644 index 0000000000..7dae145a8a --- /dev/null +++ b/packages/expo/tsup.config.ts @@ -0,0 +1,30 @@ +import type { Options } from 'tsup'; +import { defineConfig } from 'tsup'; + +import { runAfterLast } from '../../scripts/utils'; +import { version as clerkJsVersion } from '../clerk-js/package.json'; +import { name, version } from './package.json'; + +export default defineConfig(overrideOptions => { + const isWatch = !!overrideOptions.watch; + const shouldPublish = !!overrideOptions.env?.publish; + + const options: Options = { + format: 'cjs', + outDir: './dist', + entry: ['./src/**/*.{ts,tsx,js,jsx}'], + bundle: false, + clean: true, + minify: false, + sourcemap: true, + legacyOutput: true, + define: { + PACKAGE_NAME: `"${name}"`, + PACKAGE_VERSION: `"${version}"`, + JS_PACKAGE_VERSION: `"${clerkJsVersion}"`, + __DEV__: `${isWatch}`, + }, + }; + + return runAfterLast(['npm run build:declarations', shouldPublish && 'npm run publish:local'])(options); +}); diff --git a/packages/fastify/tsup.config.ts b/packages/fastify/tsup.config.ts index d4533b9715..f1712f79fa 100644 --- a/packages/fastify/tsup.config.ts +++ b/packages/fastify/tsup.config.ts @@ -1,5 +1,7 @@ import { defineConfig } from 'tsup'; +import { name, version } from './package.json'; + export default defineConfig(overrideOptions => { const isProd = overrideOptions.env?.NODE_ENV === 'production'; @@ -11,5 +13,10 @@ export default defineConfig(overrideOptions => { sourcemap: true, format: ['cjs', 'esm'], legacyOutput: true, + define: { + PACKAGE_NAME: `"${name}"`, + PACKAGE_VERSION: `"${version}"`, + __DEV__: `${!isProd}`, + }, }; }); diff --git a/packages/gatsby-plugin-clerk/package.json b/packages/gatsby-plugin-clerk/package.json index 897618fb98..4d98d09ea7 100644 --- a/packages/gatsby-plugin-clerk/package.json +++ b/packages/gatsby-plugin-clerk/package.json @@ -26,8 +26,11 @@ "api.d.ts" ], "scripts": { - "build": "tsc -p tsconfig.build.json", - "dev": "tsc -p tsconfig.build.json --watch", + "build": "tsup", + "dev": "tsup --watch", + "dev:publish": "npm run dev -- --env.publish", + "build:declarations": "tsc -p tsconfig.declarations.json", + "publish:local": "npx yalc push --replace --sig", "clean": "rimraf ./dist", "lint": "eslint src/" }, diff --git a/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx b/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx index fb248cf6b9..59f09296af 100644 --- a/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx +++ b/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx @@ -7,6 +7,11 @@ import { import { navigate } from 'gatsby'; import React from 'react'; +const SDK_METADATA = { + name: PACKAGE_NAME, + version: PACKAGE_VERSION, +}; + __internal__setErrorThrowerOptions({ packageName: 'gatsby-plugin-clerk' }); export type GatsbyClerkProviderProps = { @@ -22,6 +27,7 @@ export function ClerkProvider({ children, ...rest }: GatsbyClerkProviderProps) { navigate(to)} initialState={__clerk_ssr_state || {}} + sdkMetadata={SDK_METADATA} {...restProps} > {__clerk_ssr_interstitial_html ? ( diff --git a/packages/gatsby-plugin-clerk/src/globals.d.ts b/packages/gatsby-plugin-clerk/src/globals.d.ts new file mode 100644 index 0000000000..f14f854fd7 --- /dev/null +++ b/packages/gatsby-plugin-clerk/src/globals.d.ts @@ -0,0 +1,6 @@ +export {}; + +declare global { + const PACKAGE_NAME: string; + const PACKAGE_VERSION: string; +} diff --git a/packages/gatsby-plugin-clerk/tsconfig.build.json b/packages/gatsby-plugin-clerk/tsconfig.build.json deleted file mode 100644 index b157067c96..0000000000 --- a/packages/gatsby-plugin-clerk/tsconfig.build.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "compilerOptions": { - "outDir": "dist", - "baseUrl": ".", - "lib": ["es6", "dom"], - "jsx": "react", - "module": "commonjs", - "moduleResolution": "node", - "importHelpers": true, - "declaration": true, - "declarationMap": false, - "noImplicitReturns": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "resolveJsonModule": true, - "sourceMap": false, - "strict": true, - "types": [], - "esModuleInterop": true, - "skipLibCheck": true, - "allowJs": true, - "target": "ES2020", - "noEmitOnError": false - }, - "include": ["src"] -} diff --git a/packages/gatsby-plugin-clerk/tsconfig.declarations.json b/packages/gatsby-plugin-clerk/tsconfig.declarations.json new file mode 100644 index 0000000000..4a7735336e --- /dev/null +++ b/packages/gatsby-plugin-clerk/tsconfig.declarations.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "skipLibCheck": true, + "noEmit": false, + "declaration": true, + "emitDeclarationOnly": true, + "declarationMap": true, + "sourceMap": false, + "declarationDir": "./dist" + } +} diff --git a/packages/gatsby-plugin-clerk/tsconfig.json b/packages/gatsby-plugin-clerk/tsconfig.json index bbee8dfdab..339f1c1697 100644 --- a/packages/gatsby-plugin-clerk/tsconfig.json +++ b/packages/gatsby-plugin-clerk/tsconfig.json @@ -1,6 +1,26 @@ { - "extends": "./tsconfig.build.json", "compilerOptions": { + "outDir": "dist", + "baseUrl": ".", + "lib": ["es6", "dom"], + "jsx": "react", + "module": "commonjs", + "moduleResolution": "node", + "importHelpers": true, + "declaration": true, + "declarationMap": false, + "noImplicitReturns": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "resolveJsonModule": true, + "sourceMap": false, + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "allowJs": true, + "target": "ES2019", + "noEmitOnError": false, "incremental": true - } + }, + "include": ["src"] } diff --git a/packages/gatsby-plugin-clerk/tsup.config.ts b/packages/gatsby-plugin-clerk/tsup.config.ts new file mode 100644 index 0000000000..7dae145a8a --- /dev/null +++ b/packages/gatsby-plugin-clerk/tsup.config.ts @@ -0,0 +1,30 @@ +import type { Options } from 'tsup'; +import { defineConfig } from 'tsup'; + +import { runAfterLast } from '../../scripts/utils'; +import { version as clerkJsVersion } from '../clerk-js/package.json'; +import { name, version } from './package.json'; + +export default defineConfig(overrideOptions => { + const isWatch = !!overrideOptions.watch; + const shouldPublish = !!overrideOptions.env?.publish; + + const options: Options = { + format: 'cjs', + outDir: './dist', + entry: ['./src/**/*.{ts,tsx,js,jsx}'], + bundle: false, + clean: true, + minify: false, + sourcemap: true, + legacyOutput: true, + define: { + PACKAGE_NAME: `"${name}"`, + PACKAGE_VERSION: `"${version}"`, + JS_PACKAGE_VERSION: `"${clerkJsVersion}"`, + __DEV__: `${isWatch}`, + }, + }; + + return runAfterLast(['npm run build:declarations', shouldPublish && 'npm run publish:local'])(options); +}); diff --git a/packages/nextjs/src/global.d.ts b/packages/nextjs/src/global.d.ts index b4321ec375..0dcd9c10c1 100644 --- a/packages/nextjs/src/global.d.ts +++ b/packages/nextjs/src/global.d.ts @@ -6,6 +6,9 @@ declare global { } declare global { + const PACKAGE_NAME: string; + const PACKAGE_VERSION: string; + namespace NodeJS { interface ProcessEnv { NEXT_PUBLIC_CLERK_FRONTEND_API: string | undefined; diff --git a/packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts b/packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts index 15ac48ebf3..5bd60fe814 100644 --- a/packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts +++ b/packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts @@ -15,5 +15,9 @@ export const mergeNextClerkPropsWithEnv = (props: Omit & { clerkJSUrl?: string; clerkJSVariant?: 'headless' | ''; clerkJSVersion?: string; + sdkMetadata?: SDKMetadata; } & PublishableKeyOrFrontendApi & MultiDomainAndOrProxy; diff --git a/packages/remix/package.json b/packages/remix/package.json index 4a5b57e326..5a25f7f537 100644 --- a/packages/remix/package.json +++ b/packages/remix/package.json @@ -49,11 +49,13 @@ "dist" ], "scripts": { - "build": "tsc -p tsconfig.build.json", - "dev": "tsc -p tsconfig.build.json --watch", + "build": "tsup", + "dev": "tsup --watch", + "dev:publish": "npm run dev -- --env.publish", + "build:declarations": "tsc -p tsconfig.declarations.json", + "publish:local": "npx yalc push --replace --sig", "clean": "rimraf ./dist", - "lint": "eslint src/", - "publish:local": "npx yalc push --replace --sig" + "lint": "eslint src/" }, "dependencies": { "@clerk/backend": "0.30.3", diff --git a/packages/remix/src/client/RemixClerkProvider.tsx b/packages/remix/src/client/RemixClerkProvider.tsx index da437f9025..072cb2c43b 100644 --- a/packages/remix/src/client/RemixClerkProvider.tsx +++ b/packages/remix/src/client/RemixClerkProvider.tsx @@ -9,6 +9,11 @@ import { useAwaitableNavigate } from './useAwaitableNavigate'; export * from '@clerk/clerk-react'; +const SDK_METADATA = { + name: PACKAGE_NAME, + version: PACKAGE_VERSION, +}; + export type RemixClerkProviderProps = { children: React.ReactNode; clerkState: ClerkState; @@ -20,7 +25,7 @@ export type RemixClerkProviderProps = { * In the case of a hydration error, the first `navigate` function we get from the `useNavigate` hook will not work * because the RemixClerkProvider (which is part of the host app) will unmount before the following useEffect within `navigate` fires: * https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/hooks.tsx#L175 - * so isomorphicClerk will initialise with a `navigate` function that will never have `activeRef.current` set to true. + * so isomorphicClerk will initialize with a `navigate` function that will never have `activeRef.current` set to true. * This variable is just an object ref/cache outside the React rendering cycle that holds a reference to the * latest `navigate` function. After a hydration error occurs, RemixClerkProvider will *remount* and this variable * will finally get a `navigate` function that has a `activeRef.current` to true so navigation will function as it should. @@ -81,6 +86,7 @@ export function ClerkProvider({ children, ...rest }: RemixClerkProviderProps): J awaitableNavigateRef.current?.(to)} initialState={__clerk_ssr_state} + sdkMetadata={SDK_METADATA} {...mergedProps} {...restProps} > diff --git a/packages/remix/src/globals.d.ts b/packages/remix/src/globals.d.ts new file mode 100644 index 0000000000..f14f854fd7 --- /dev/null +++ b/packages/remix/src/globals.d.ts @@ -0,0 +1,6 @@ +export {}; + +declare global { + const PACKAGE_NAME: string; + const PACKAGE_VERSION: string; +} diff --git a/packages/remix/tsconfig.build.json b/packages/remix/tsconfig.build.json deleted file mode 100644 index 00d8edd1c9..0000000000 --- a/packages/remix/tsconfig.build.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "compilerOptions": { - "outDir": "dist", - "baseUrl": ".", - "lib": ["es6", "dom"], - "jsx": "react", - "module": "commonjs", - "moduleResolution": "node", - "importHelpers": true, - "declaration": true, - "declarationMap": false, - "noImplicitReturns": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "resolveJsonModule": true, - "sourceMap": false, - "strict": true, - "esModuleInterop": true, - "skipLibCheck": true, - "allowJs": true, - "target": "ES2019", - "noEmitOnError": false - }, - "include": ["src"] -} diff --git a/packages/remix/tsconfig.declarations.json b/packages/remix/tsconfig.declarations.json new file mode 100644 index 0000000000..4a7735336e --- /dev/null +++ b/packages/remix/tsconfig.declarations.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "skipLibCheck": true, + "noEmit": false, + "declaration": true, + "emitDeclarationOnly": true, + "declarationMap": true, + "sourceMap": false, + "declarationDir": "./dist" + } +} diff --git a/packages/remix/tsconfig.json b/packages/remix/tsconfig.json index bbee8dfdab..339f1c1697 100644 --- a/packages/remix/tsconfig.json +++ b/packages/remix/tsconfig.json @@ -1,6 +1,26 @@ { - "extends": "./tsconfig.build.json", "compilerOptions": { + "outDir": "dist", + "baseUrl": ".", + "lib": ["es6", "dom"], + "jsx": "react", + "module": "commonjs", + "moduleResolution": "node", + "importHelpers": true, + "declaration": true, + "declarationMap": false, + "noImplicitReturns": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "resolveJsonModule": true, + "sourceMap": false, + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "allowJs": true, + "target": "ES2019", + "noEmitOnError": false, "incremental": true - } + }, + "include": ["src"] } diff --git a/packages/remix/tsup.config.ts b/packages/remix/tsup.config.ts new file mode 100644 index 0000000000..7dae145a8a --- /dev/null +++ b/packages/remix/tsup.config.ts @@ -0,0 +1,30 @@ +import type { Options } from 'tsup'; +import { defineConfig } from 'tsup'; + +import { runAfterLast } from '../../scripts/utils'; +import { version as clerkJsVersion } from '../clerk-js/package.json'; +import { name, version } from './package.json'; + +export default defineConfig(overrideOptions => { + const isWatch = !!overrideOptions.watch; + const shouldPublish = !!overrideOptions.env?.publish; + + const options: Options = { + format: 'cjs', + outDir: './dist', + entry: ['./src/**/*.{ts,tsx,js,jsx}'], + bundle: false, + clean: true, + minify: false, + sourcemap: true, + legacyOutput: true, + define: { + PACKAGE_NAME: `"${name}"`, + PACKAGE_VERSION: `"${version}"`, + JS_PACKAGE_VERSION: `"${clerkJsVersion}"`, + __DEV__: `${isWatch}`, + }, + }; + + return runAfterLast(['npm run build:declarations', shouldPublish && 'npm run publish:local'])(options); +}); diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index c92530cb0c..f8a52101fc 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -22,6 +22,11 @@ import type { DeepPartial, DeepSnakeToCamel } from './utils'; export type InstanceType = 'production' | 'development'; +export type SDKMetadata = { + name: string; + version: string; +}; + export type ListenerCallback = (emission: Resources) => void; export type UnsubscribeCallback = () => void; export type BeforeEmitCallback = (session?: ActiveSessionResource | null) => void | Promise; @@ -56,6 +61,12 @@ export interface Clerk { */ version?: string; + /** + * If present, contains information about the SDK that the host application is using. + * For example, if Clerk is loaded through `@clerk/nextjs`, this would be `{ name: '@clerk/nextjs', version: '1.0.0' }` + */ + sdkMetadata?: SDKMetadata; + loaded: boolean; /**