chore(auth): Convert @redwoodjs/auth to ESM+CJS dual build (#10417)

Co-authored-by: Josh GM Walker <56300765+Josh-Walker-GM@users.noreply.github.com>
redwoodjs · Apr 11, 2024 · a2a00cf · a2a00cf
1 parent bb7ad2d
commit a2a00cf
Show file tree

Hide file tree

Showing 25 changed files with 134 additions and 68 deletions.
diff --git a/packages/auth-providers/supabase/web/package.json b/packages/auth-providers/supabase/web/package.json
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "7.24.1",
+    "@redwoodjs/auth": "7.3.1",
     "core-js": "3.36.1"
   },
   "devDependencies": {

diff --git a/packages/auth/.babelrc.js b/packages/auth/.babelrc.js
diff --git a/packages/auth/build.ts b/packages/auth/build.ts
@@ -0,0 +1,36 @@
+import { renameSync, writeFileSync } from 'node:fs'
+
+import { build, defaultBuildOptions } from '@redwoodjs/framework-tools'
+
+// ESM build
+await build({
+  buildOptions: {
+    ...defaultBuildOptions,
+    tsconfig: 'tsconfig.build-esm.json',
+    format: 'esm',
+    outdir: 'dist/esm',
+    packages: 'external',
+  },
+})
+
+// CJS build
+await build({
+  buildOptions: {
+    ...defaultBuildOptions,
+    tsconfig: 'tsconfig.build.json',
+    packages: 'external',
+  },
+})
+
+// Because the package.json files has `type: module` the CJS entry file can't
+// be named `index.js` because in that case it would be treated as an ESM file.
+// By changing it to .cjs it will be treated as a CommonJS file.
+renameSync('dist/index.js', 'dist/index.cjs')
+
+// Place a package.json file with `type: commonjs` in the dist folder so that
+// all .js files are treated as CommonJS files.
+writeFileSync('dist/package.json', JSON.stringify({ type: 'commonjs' }))
+
+// Place a package.json file with `type: module` in the dist/esm folder so that
+// all .js files are treated as ES Module files.
+writeFileSync('dist/esm/package.json', JSON.stringify({ type: 'module' }))
diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -7,32 +7,35 @@
     "directory": "packages/auth"
   },
   "license": "MIT",
-  "main": "./dist/index.js",
+  "type": "module",
+  "exports": {
+    "types": "./dist/esm/index.d.ts",
+    "import": "./dist/esm/index.js",
+    "default": "./dist/index.cjs"
+  },
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "yarn build:js && yarn build:types",
-    "build:js": "babel src -d dist --extensions \".js,.jsx,.ts,.tsx\"",
+    "build": "tsx ./build.ts && yarn build:types",
     "build:pack": "yarn pack -o redwoodjs-auth.tgz",
-    "build:types": "tsc --build --verbose tsconfig.build.json",
+    "build:types": "tsc --build --verbose tsconfig.build.json && tsc --build --verbose tsconfig.build-esm.json",
     "build:watch": "nodemon --watch src --ext \"js,jsx,ts,tsx\" --ignore dist --exec \"yarn build\"",
     "prepublishOnly": "NODE_ENV=production yarn build",
     "test": "vitest run",
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "7.24.1",
     "core-js": "3.36.1",
     "react": "18.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.24.1",
-    "@babel/core": "^7.22.20",
+    "@redwoodjs/framework-tools": "7.3.1",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.2",
     "msw": "1.3.3",
+    "tsx": "4.7.1",
     "typescript": "5.4.3",
     "vitest": "1.4.0"
   },

diff --git a/packages/auth/src/AuthProvider/AuthProvider.tsx b/packages/auth/src/AuthProvider/AuthProvider.tsx
@@ -1,21 +1,21 @@
 import type { ReactNode } from 'react'
 import React, { useEffect, useState } from 'react'
 
-import type { AuthContextInterface, CurrentUser } from '../AuthContext'
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthContextInterface, CurrentUser } from '../AuthContext.js'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import type { AuthProviderState } from './AuthProviderState'
-import { defaultAuthProviderState } from './AuthProviderState'
-import { useCurrentUser } from './useCurrentUser'
-import { useForgotPassword } from './useForgotPassword'
-import { useHasRole } from './useHasRole'
-import { useLogIn } from './useLogIn'
-import { useLogOut } from './useLogOut'
-import { useReauthenticate } from './useReauthenticate'
-import { useResetPassword } from './useResetPassword'
-import { useSignUp } from './useSignUp'
-import { useToken } from './useToken'
-import { useValidateResetToken } from './useValidateResetToken'
+import type { AuthProviderState } from './AuthProviderState.js'
+import { defaultAuthProviderState } from './AuthProviderState.js'
+import { useCurrentUser } from './useCurrentUser.js'
+import { useForgotPassword } from './useForgotPassword.js'
+import { useHasRole } from './useHasRole.js'
+import { useLogIn } from './useLogIn.js'
+import { useLogOut } from './useLogOut.js'
+import { useReauthenticate } from './useReauthenticate.js'
+import { useResetPassword } from './useResetPassword.js'
+import { useSignUp } from './useSignUp.js'
+import { useToken } from './useToken.js'
+import { useValidateResetToken } from './useValidateResetToken.js'
 
 export interface AuthProviderProps {
   skipFetchCurrentUser?: boolean
@@ -35,7 +35,7 @@ export function createAuthProvider<
   TResetPasswordOptions,
   TResetPassword,
   TValidateResetToken,
-  TClient
+  TClient,
 >(
   AuthContext: React.Context<
     | AuthContextInterface<
@@ -72,9 +72,9 @@ export function createAuthProvider<
   customProviderHooks?: {
     useCurrentUser?: () => Promise<CurrentUser>
     useHasRole?: (
-      currentUser: CurrentUser | null
+      currentUser: CurrentUser | null,
     ) => (rolesToCheck: string | string[]) => boolean
-  }
+  },
 ) {
   const AuthProvider = ({
     children,
@@ -101,7 +101,7 @@ export function createAuthProvider<
       authImplementation,
       setAuthProviderState,
       getCurrentUser,
-      skipFetchCurrentUser
+      skipFetchCurrentUser,
     )
 
     const hasRole = customProviderHooks?.useHasRole
@@ -112,13 +112,13 @@ export function createAuthProvider<
       authImplementation,
       setAuthProviderState,
       getCurrentUser,
-      skipFetchCurrentUser
+      skipFetchCurrentUser,
     )
     const logIn = useLogIn(
       authImplementation,
       setAuthProviderState,
       getCurrentUser,
-      skipFetchCurrentUser
+      skipFetchCurrentUser,
     )
     const logOut = useLogOut(authImplementation, setAuthProviderState)
     const forgotPassword = useForgotPassword(authImplementation)

diff --git a/packages/auth/src/AuthProvider/AuthProviderState.ts b/packages/auth/src/AuthProvider/AuthProviderState.ts
@@ -1,4 +1,4 @@
-import type { CurrentUser } from '../AuthContext'
+import type { CurrentUser } from '../AuthContext.js'
 
 export type AuthProviderState<TUser, TClient = unknown> = {
   loading: boolean

diff --git a/packages/auth/src/AuthProvider/useCurrentUser.ts b/packages/auth/src/AuthProvider/useCurrentUser.ts
@@ -1,8 +1,8 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import { useToken } from './useToken'
+import { useToken } from './useToken.js'
 
 export const useCurrentUser = (authImplementation: AuthImplementation) => {
   const getToken = useToken(authImplementation)

diff --git a/packages/auth/src/AuthProvider/useForgotPassword.ts b/packages/auth/src/AuthProvider/useForgotPassword.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
 export const useForgotPassword = <
   TUser,

diff --git a/packages/auth/src/AuthProvider/useHasRole.ts b/packages/auth/src/AuthProvider/useHasRole.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { CurrentUser } from '../AuthContext'
+import type { CurrentUser } from '../AuthContext.js'
 
 export const useHasRole = (currentUser: CurrentUser | null) => {
   /**

diff --git a/packages/auth/src/AuthProvider/useLogIn.ts b/packages/auth/src/AuthProvider/useLogIn.ts
@@ -1,11 +1,11 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import type { AuthProviderState } from './AuthProviderState'
-import { defaultAuthProviderState } from './AuthProviderState'
-import type { useCurrentUser } from './useCurrentUser'
-import { useReauthenticate } from './useReauthenticate'
+import type { AuthProviderState } from './AuthProviderState.js'
+import { defaultAuthProviderState } from './AuthProviderState.js'
+import type { useCurrentUser } from './useCurrentUser.js'
+import { useReauthenticate } from './useReauthenticate.js'
 
 export const useLogIn = <
   TUser,

diff --git a/packages/auth/src/AuthProvider/useLogOut.ts b/packages/auth/src/AuthProvider/useLogOut.ts
@@ -1,8 +1,8 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import type { AuthProviderState } from './AuthProviderState'
+import type { AuthProviderState } from './AuthProviderState.js'
 
 export const useLogOut = <
   TUser,

diff --git a/packages/auth/src/AuthProvider/useReauthenticate.ts b/packages/auth/src/AuthProvider/useReauthenticate.ts
@@ -1,10 +1,10 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import type { AuthProviderState } from './AuthProviderState'
-import type { useCurrentUser } from './useCurrentUser'
-import { useToken } from './useToken'
+import type { AuthProviderState } from './AuthProviderState.js'
+import type { useCurrentUser } from './useCurrentUser.js'
+import { useToken } from './useToken.js'
 
 const notAuthenticatedState = {
   isAuthenticated: false,

diff --git a/packages/auth/src/AuthProvider/useResetPassword.ts b/packages/auth/src/AuthProvider/useResetPassword.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
 export const useResetPassword = <
   TUser,

diff --git a/packages/auth/src/AuthProvider/useSignUp.ts b/packages/auth/src/AuthProvider/useSignUp.ts
@@ -1,10 +1,10 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import type { AuthProviderState } from './AuthProviderState'
-import type { useCurrentUser } from './useCurrentUser'
-import { useReauthenticate } from './useReauthenticate'
+import type { AuthProviderState } from './AuthProviderState.js'
+import type { useCurrentUser } from './useCurrentUser.js'
+import { useReauthenticate } from './useReauthenticate.js'
 
 export const useSignUp = <
   TUser,

diff --git a/packages/auth/src/AuthProvider/useToken.ts b/packages/auth/src/AuthProvider/useToken.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
 export const useToken = (authImplementation: AuthImplementation) => {
   return useCallback(async () => {

diff --git a/packages/auth/src/AuthProvider/useValidateResetToken.ts b/packages/auth/src/AuthProvider/useValidateResetToken.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
 export const useValidateResetToken = <
   TUser,

diff --git a/packages/auth/src/__tests__/AuthProvider.test.tsx b/packages/auth/src/__tests__/AuthProvider.test.tsx
@@ -32,8 +32,8 @@ globalThis.Headers = HeadersPolyfill
 globalThis.Request = RequestPolyfill
 globalThis.Response = ResponsePolyfill
 
-import type { CustomTestAuthClient } from './fixtures/customTestAuth'
-import { createCustomTestAuth } from './fixtures/customTestAuth'
+import type { CustomTestAuthClient } from './fixtures/customTestAuth.js'
+import { createCustomTestAuth } from './fixtures/customTestAuth.js'
 
 configure({
   asyncUtilTimeout: 5_000,

diff --git a/packages/auth/src/authFactory.ts b/packages/auth/src/authFactory.ts
@@ -1,8 +1,8 @@
-import type { CurrentUser } from './AuthContext'
-import { createAuthContext } from './AuthContext'
-import type { AuthImplementation } from './AuthImplementation'
-import { createAuthProvider } from './AuthProvider/AuthProvider'
-import { createUseAuth } from './useAuth'
+import type { CurrentUser } from './AuthContext.js'
+import { createAuthContext } from './AuthContext.js'
+import type { AuthImplementation } from './AuthImplementation.js'
+import { createAuthProvider } from './AuthProvider/AuthProvider.js'
+import { createUseAuth } from './useAuth.js'
 
 export function createAuthentication<
   TUser,

diff --git a/packages/auth/src/index.ts b/packages/auth/src/index.ts
@@ -1,4 +1,5 @@
-export { AuthContextInterface, CurrentUser } from './AuthContext'
-export { useNoAuth, UseAuth } from './useAuth'
-export { createAuthentication } from './authFactory'
-export type { AuthImplementation } from './AuthImplementation'
+export type { AuthContextInterface, CurrentUser } from './AuthContext.js'
+export { useNoAuth } from './useAuth.js'
+export type { UseAuth } from './useAuth.js'
+export { createAuthentication } from './authFactory.js'
+export type { AuthImplementation } from './AuthImplementation.js'
diff --git a/packages/auth/src/useAuth.ts b/packages/auth/src/useAuth.ts
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import type { AuthContextInterface } from './AuthContext'
+import type { AuthContextInterface } from './AuthContext.js'
 
 export function createUseAuth<
   TUser,

diff --git a/packages/auth/tsconfig.build-esm.json b/packages/auth/tsconfig.build-esm.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.compilerOption.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext",
+    "rootDir": "src",
+    "outDir": "dist/esm",
+  },
+  "include": ["src", "ambient.d.ts"],
+  "references": [
+    { "path": "../framework-tools" }
+  ]
+}
diff --git a/packages/auth/tsconfig.build.json b/packages/auth/tsconfig.build.json
@@ -1,8 +1,14 @@
 {
   "extends": "../../tsconfig.compilerOption.json",
   "compilerOptions": {
+    "isolatedModules": true,
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext",
     "rootDir": "src",
     "outDir": "dist",
   },
   "include": ["src", "ambient.d.ts"],
+  "references": [
+    { "path": "../framework-tools" }
+  ]
 }
diff --git a/packages/auth/tsconfig.json b/packages/auth/tsconfig.json
@@ -1,6 +1,9 @@
 {
   "extends": "../../tsconfig.compilerOption.json",
   "compilerOptions": {
+    "isolatedModules": true,
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext",
     "outDir": "dist"
   },
   "include": [
@@ -10,5 +13,8 @@
     "./vitest.setup.ts",
     "__tests__"
   ],
-  "exclude": ["dist", "node_modules", "**/__mocks__", "**/__fixtures__"]
+  "exclude": ["dist", "node_modules", "**/__mocks__", "**/__fixtures__"],
+  "references": [
+    { "path": "../framework-tools" }
+  ]
 }
diff --git a/packages/testing/src/web/mockAuth.tsx b/packages/testing/src/web/mockAuth.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 // Exporting everything here, but exports further down in this file will
 // override exports with the same name
-export * from '@redwoodjs/auth/dist/index'
+export * from '@redwoodjs/auth'
 
 import { mockedUserMeta } from './mockRequests'