feat(clerk-react): Add ESM/CJS build pipeline

Author: nikosdouvlis

packages/react/package.cjs.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": ["./index.js", "./polyfills.js"],
+  "type": "commonjs"
+}

packages/react/package.esm.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": ["./index.js", "./polyfills.js"],
+  "type": "module"
+}

packages/react/package.json

@@ -3,7 +3,6 @@
   "version": "4.18.0",
   "license": "MIT",
   "description": "Clerk React library",
-  "sideEffects": false,
   "keywords": [
     "clerk",
     "react",
@@ -14,15 +13,25 @@
     "jwt"
   ],
   "author": "Clerk",
-  "source": "src/index.ts",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "node ./scripts/info.js && tsc -p tsconfig.build.json",
-    "dev": "node ./scripts/info.js && tsc -p tsconfig.build.json --watch",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "dev:publish": "npm run dev -- --env.PUBLISH=true",
+    "build:declarations": "tsc -p tsconfig.declarations.json",
+    "publish:local": "npx yalc push --replace  --sig",
     "clean": "rimraf ./dist",
     "lint": "eslint .",
     "prepublishOnly": "npm run build",

packages/react/scripts/info.js

@@ -1 +1,2 @@
-export { ClerkProvider, ClerkProviderProps, __internal__setErrorThrowerOptions } from './ClerkProvider';
+export { ClerkProvider, __internal__setErrorThrowerOptions } from './ClerkProvider';
+export type { ClerkProviderProps } from './ClerkProvider';

packages/react/src/contexts/index.ts

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

packages/react/src/globals.d.ts

@@ -1,3 +1,5 @@
+import './polyfills';
+
 export * from './contexts';
 export * from './components';
 export * from './hooks';
@@ -12,13 +14,3 @@ export type {
 } from './types';
 export { isMagicLinkError, MagicLinkErrorCode } from './errors';
 export { useMagicLink } from './hooks/useMagicLink';
-
-/**
- * Vite does not define `global` by default
- * One workaround is to use the `define` config prop
- * https://vitejs.dev/config/#define
- * We are solving this in the SDK level to reduce setup steps.
- */
-if (typeof global === 'undefined' && typeof window !== 'undefined' && !window.global) {
-  (window as any).global = window;
-}

packages/react/src/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Vite does not define `global` by default
+ * One workaround is to use the `define` config prop
+ * https://vitejs.dev/config/#define
+ * We are solving this in the SDK level to reduce setup steps.
+ */
+if (typeof global === 'undefined' && typeof window !== 'undefined' && !window.global) {
+  console.log('nikos2?');
+  (window as any).global = window;
+}
+
+export {};

packages/react/src/info.ts

@@ -1,6 +1,5 @@
 import { addClerkPrefix, isValidProxyUrl, loadScript, parsePublishableKey, proxyUrlToAbsoluteURL } from '@clerk/shared';
 
-import { LIB_VERSION } from '../info';
 import type { IsomorphicClerkOptions } from '../types';
 import { errorThrower } from './errorThrower';
 import { isDevOrStagingUrl } from './isDevOrStageUrl';
@@ -45,7 +44,7 @@ const clerkJsScriptUrl = (opts: LoadClerkJsScriptOptions) => {
   }
 
   const variant = clerkJSVariant ? `${clerkJSVariant.replace(/\.+$/, '')}.` : '';
-  const version = clerkJSVersion || getPrereleaseTag(LIB_VERSION) || getMajorVersion(LIB_VERSION);
+  const version = clerkJSVersion || getPrereleaseTag(PACKAGE_VERSION) || getMajorVersion(PACKAGE_VERSION);
   return `https://${scriptHost}/npm/@clerk/clerk-js@${version}/dist/clerk.${variant}browser.js`;
 };
 

packages/react/src/polyfills.ts

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "declarationMap": true,
+    "sourceMap": false,
+    "declarationDir": "./dist/types"
+  }
+}

packages/react/src/utils/loadClerkJsScript.ts

@@ -1,6 +1,24 @@
 {
-  "extends": "./tsconfig.build.json",
   "compilerOptions": {
-    "incremental": true
-  }
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationMap": false,
+    "esModuleInterop": true,
+    "importHelpers": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "lib": ["es6", "dom"],
+    "moduleResolution": "node",
+    "noImplicitReturns": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "outDir": "dist",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": false,
+    "strict": true,
+    "target": "ES2020"
+  },
+  "include": ["src"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
 }

packages/react/tsconfig.build.json

@@ -0,0 +1,44 @@
+import type { Options } from 'tsup';
+import { defineConfig } from 'tsup';
+
+import { runAfterLast } from '../../scripts/utils';
+// @ts-ignore
+import { name, version } from './package.json';
+
+export default defineConfig(overrideOptions => {
+  const isWatch = !!overrideOptions.watch;
+  const shouldPublish = overrideOptions.env?.PUBLISH === 'true';
+
+  const common: Options = {
+    entry: ['./src/**/*.{ts,tsx,js,jsx}'],
+    bundle: false,
+    clean: true,
+    minify: false,
+    sourcemap: true,
+    legacyOutput: true,
+    define: {
+      PACKAGE_NAME: `"${name}"`,
+      PACKAGE_VERSION: `"${version}"`,
+      __DEV__: `${!isWatch}`,
+    },
+  };
+
+  const onSuccess = (format: 'esm' | 'cjs') => {
+    return `cp ./package.${format}.json ./dist/${format}/package.json`;
+  };
+
+  const esm: Options = {
+    ...common,
+    format: 'esm',
+    onSuccess: onSuccess('esm'),
+  };
+
+  const cjs: Options = {
+    ...common,
+    format: 'cjs',
+    outDir: './dist/cjs',
+    onSuccess: onSuccess('cjs'),
+  };
+
+  return runAfterLast(['npm run build:declarations', shouldPublish && 'npm run publish:local'])(esm, cjs);
+});

packages/react/tsconfig.declarations.json

@@ -0,0 +1,8 @@
+import { Options } from 'tsup';
+
+export const runAfterLast =
+  (commands: Array<string | false>) =>
+  (...configs: Options[]) => {
+    const [last, ...rest] = configs.reverse();
+    return [...rest.reverse(), { ...last, onSuccess: [last.onSuccess, ...commands].filter(Boolean).join(' && ') }];
+  };