redwoodjs · Tobbe · Apr 7, 2024 · Apr 4, 2024 · Apr 4, 2024 · Apr 4, 2024
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": "workspace:*",
     "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.3.0-canary-a870b2d54-20240314"
   },
   "devDependencies": {
-    "@babel/cli": "7.24.1",
-    "@babel/core": "^7.22.20",
+    "@redwoodjs/framework-tools": "workspace:*",
     "@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,22 +1,22 @@
 import type { ReactNode } from 'react'
 import React, { useContext, 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 { ServerAuthContext } from './ServerAuthProvider'
-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 { ServerAuthContext } from './ServerAuthProvider.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

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/ServerAuthProvider.tsx b/packages/auth/src/AuthProvider/ServerAuthProvider.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
 import React from 'react'
 
-import type { AuthProviderState } from './AuthProviderState'
-import { defaultAuthProviderState } from './AuthProviderState'
+import type { AuthProviderState } from './AuthProviderState.js'
+import { defaultAuthProviderState } from './AuthProviderState.js'
 
 export type ServerAuthState = AuthProviderState<never> & {
   cookieHeader?: string

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,7 +1,8 @@
-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'
 
-export * from './AuthProvider/AuthProviderState'
-export * from './AuthProvider/ServerAuthProvider'
+export * from './AuthProvider/AuthProviderState.js'
+export * from './AuthProvider/ServerAuthProvider.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'
 

diff --git a/yarn.lock b/yarn.lock
@@ -7877,6 +7877,7 @@ __metadata:
     "@babel/cli": "npm:7.24.1"
     "@babel/core": "npm:^7.22.20"
     "@babel/runtime-corejs3": "npm:7.24.1"
+    "@redwoodjs/auth": "workspace:*"
     "@supabase/supabase-js": "npm:2.40.0"
     "@types/react": "npm:^18.2.55"
     core-js: "npm:3.36.1"
@@ -7946,14 +7947,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@redwoodjs/auth@workspace:packages/auth"
   dependencies:
-    "@babel/cli": "npm:7.24.1"
-    "@babel/core": "npm:^7.22.20"
-    "@babel/runtime-corejs3": "npm:7.24.1"
+    "@redwoodjs/framework-tools": "workspace:*"
     "@testing-library/jest-dom": "npm:6.4.2"
     "@testing-library/react": "npm:14.2.2"
     core-js: "npm:3.36.1"
     msw: "npm:1.3.3"
     react: "npm:18.3.0-canary-a870b2d54-20240314"
+    tsx: "npm:4.7.1"
     typescript: "npm:5.4.3"
     vitest: "npm:1.4.0"
   languageName: unknown