feat(sdks): Add sdkMetadata to Clerk singleton, populate it for each …

…SDK (#1857)

* feat(repo): Add sdkMetadata to Clerk singleton, populate it for each SDK

* chore(repo): Add changeset

* chore(repo): Adjust changeset

* feat(chrome-extension): Fix types

* chore(chrome-extension): Fix jest config

* fix(nextjs): Fix variable names

* feat(repo): Introduce tsup to all remaining packages

* chore(repo): Excldue .tsbuildinfo files from git

* feat(clerk-expo): Adjust how we set sdkMetadata

.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.

.gitignore

@@ -39,6 +39,7 @@ yarn-error.log
 testem.log
 /typings
 **/coverage/**
+*.tsbuildinfo
 
 # System Files
 .DS_Store

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,
+  },
 };

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',
 });

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;
+}

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;

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/"
   },

packages/expo/src/globals.d.ts

@@ -0,0 +1,6 @@
+export {};
+
+declare global {
+  const PACKAGE_NAME: string;
+  const PACKAGE_VERSION: string;
+}

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;

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"
+  }
+}

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"]
 }

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);
+});

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}`,
+    },
   };
 });

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/"
   },

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) {
     <ReactClerkProvider
       navigate={to => navigate(to)}
       initialState={__clerk_ssr_state || {}}
+      sdkMetadata={SDK_METADATA}
       {...restProps}
     >
       {__clerk_ssr_interstitial_html ? (

packages/gatsby-plugin-clerk/src/globals.d.ts

@@ -0,0 +1,6 @@
+export {};
+
+declare global {
+  const PACKAGE_NAME: string;
+  const PACKAGE_VERSION: string;
+}

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"
+  }
+}

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"]
 }

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);
+});

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 {
       CLERK_SECRET_KEY: string | undefined;

packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts

@@ -15,5 +15,9 @@ export const mergeNextClerkPropsWithEnv = (props: Omit<NextClerkProviderProps, '
     signUpUrl: props.signUpUrl || process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL || '',
     afterSignInUrl: props.afterSignInUrl || process.env.NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL || '',
     afterSignUpUrl: props.afterSignUpUrl || process.env.NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL || '',
+    sdkMetadata: {
+      name: PACKAGE_NAME,
+      version: PACKAGE_VERSION,
+    },
   };
 };

packages/react/src/isomorphicClerk.ts

@@ -198,6 +198,8 @@ export default class IsomorphicClerk {
         await global.Clerk.load(this.options);
       }
 
+      global.Clerk.sdkMetadata = this.options.sdkMetadata ?? { name: PACKAGE_NAME, version: PACKAGE_VERSION };
+
       if (global.Clerk?.loaded || global.Clerk?.isReady()) {
         return this.hydrateClerkJS(global.Clerk);
       }