From a148f516b3cb9a91f83693e2225721f77200d43c Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Sun, 7 Apr 2024 15:42:12 +0200 Subject: [PATCH] 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> --- .../auth-providers/supabase/web/package.json | 1 + packages/auth/.babelrc.js | 1 - packages/auth/build.ts | 36 +++++++++++++++++++ packages/auth/package.json | 17 +++++---- .../auth/src/AuthProvider/AuthProvider.tsx | 30 ++++++++-------- .../src/AuthProvider/AuthProviderState.ts | 2 +- .../src/AuthProvider/ServerAuthProvider.tsx | 4 +-- .../auth/src/AuthProvider/useCurrentUser.ts | 4 +-- .../src/AuthProvider/useForgotPassword.ts | 2 +- packages/auth/src/AuthProvider/useHasRole.ts | 2 +- packages/auth/src/AuthProvider/useLogIn.ts | 10 +++--- packages/auth/src/AuthProvider/useLogOut.ts | 4 +-- .../src/AuthProvider/useReauthenticate.ts | 8 ++--- .../auth/src/AuthProvider/useResetPassword.ts | 2 +- packages/auth/src/AuthProvider/useSignUp.ts | 8 ++--- packages/auth/src/AuthProvider/useToken.ts | 2 +- .../src/AuthProvider/useValidateResetToken.ts | 2 +- .../auth/src/__tests__/AuthProvider.test.tsx | 4 +-- packages/auth/src/authFactory.ts | 10 +++--- packages/auth/src/index.ts | 13 +++---- packages/auth/src/useAuth.ts | 2 +- packages/auth/tsconfig.build-esm.json | 14 ++++++++ packages/auth/tsconfig.build.json | 6 ++++ packages/auth/tsconfig.json | 8 ++++- packages/testing/src/web/mockAuth.tsx | 2 +- yarn.lock | 6 ++-- 26 files changed, 133 insertions(+), 67 deletions(-) delete mode 100644 packages/auth/.babelrc.js create mode 100644 packages/auth/build.ts create mode 100644 packages/auth/tsconfig.build-esm.json diff --git a/packages/auth-providers/supabase/web/package.json b/packages/auth-providers/supabase/web/package.json index be6238f9776c..d9244119c6ce 100644 --- 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 deleted file mode 100644 index 3b2c815712d9..000000000000 --- a/packages/auth/.babelrc.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = { extends: '../../babel.config.js' } diff --git a/packages/auth/build.ts b/packages/auth/build.ts new file mode 100644 index 000000000000..c859e8581af0 --- /dev/null +++ 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 index b3c1164d5b5c..b60ee36b3145 100644 --- 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 index 1a0b17fe99d8..d992c05c4fb6 100644 --- 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 index f9dbe07c02ff..3bcaa6ed6035 100644 --- 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 = { loading: boolean diff --git a/packages/auth/src/AuthProvider/ServerAuthProvider.tsx b/packages/auth/src/AuthProvider/ServerAuthProvider.tsx index b9ca2e8364a2..c90f568fab15 100644 --- 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 & { cookieHeader?: string diff --git a/packages/auth/src/AuthProvider/useCurrentUser.ts b/packages/auth/src/AuthProvider/useCurrentUser.ts index bd385c9bc1cb..480528a9f33d 100644 --- 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 index 7589648c735f..945e7a9c303c 100644 --- 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 index fd324c40bf1c..0201baddb055 100644 --- 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 index 9e9515b6b0a0..80c556106533 100644 --- 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 index a5d0b942db23..e7306eb06676 100644 --- 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 index 11de939fa017..6837628e5e3b 100644 --- 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 index 9ce8c4587f3c..162994e3294c 100644 --- 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 index 596cd8155f05..3fc97a8020a0 100644 --- 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 index 10ba69b51635..9e17e0cac997 100644 --- 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 index f7ea795f3d86..eeafd5a3c9f6 100644 --- 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 index 082f3032de06..444a3b2ec37a 100644 --- 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 index 33c00aa5732d..ec909c729108 100644 --- 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 index 14a8cc83fbba..3f0f49c51925 100644 --- 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 index 301aa66877b8..80b74f92bdc7 100644 --- 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 new file mode 100644 index 000000000000..de5a45368b9e --- /dev/null +++ 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 index 9a2c0dd67621..6cb547bce6f0 100644 --- 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 index fc87e25a7c7d..d435973639c6 100644 --- 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 index 1624f98bc473..0d27ed7c6e42 100644 --- 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 index 45c81383a972..2e87107a8bd7 100644 --- 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