From 85f64459438bca21f30c2e8b68cb5c4035232b96 Mon Sep 17 00:00:00 2001 From: Jonas Hungershausen Date: Wed, 30 Oct 2024 17:36:22 +0100 Subject: [PATCH] fix!: move useSession hook to its own entry point --- packages/elements-react/package.json | 8 ++++++ .../src/client/frontendClient.ts | 23 ++++++++++++++++ .../src/{hooks => client}/index.ts | 0 .../src/{hooks => client}/useSession.spec.tsx | 27 ++++--------------- .../src/{hooks => client}/useSession.ts | 14 +++++----- packages/elements-react/src/index.ts | 1 - .../components/generic/page-header.tsx | 7 ++--- packages/elements-react/tsup.config.ts | 9 +++++++ 8 files changed, 55 insertions(+), 34 deletions(-) create mode 100644 packages/elements-react/src/client/frontendClient.ts rename packages/elements-react/src/{hooks => client}/index.ts (100%) rename packages/elements-react/src/{hooks => client}/useSession.spec.tsx (85%) rename packages/elements-react/src/{hooks => client}/useSession.ts (84%) diff --git a/packages/elements-react/package.json b/packages/elements-react/package.json index 63c89fdc2..e12dad613 100644 --- a/packages/elements-react/package.json +++ b/packages/elements-react/package.json @@ -7,6 +7,11 @@ "import": "./dist/index.mjs", "require": "./dist/index.js" }, + "./client": { + "types": "./dist/client/index.d.ts", + "import": "./dist/client/index.mjs", + "require": "./dist/client/index.js" + }, "./theme": { "types": "./dist/theme/default/index.d.ts", "import": "./dist/theme/default/index.mjs", @@ -19,6 +24,9 @@ "index": [ "./dist/index.d.ts" ], + "client": [ + "./dist/client/index.d.ts" + ], "theme": [ "./dist/theme/default/index.d.ts" ] diff --git a/packages/elements-react/src/client/frontendClient.ts b/packages/elements-react/src/client/frontendClient.ts new file mode 100644 index 000000000..66cd0bb2f --- /dev/null +++ b/packages/elements-react/src/client/frontendClient.ts @@ -0,0 +1,23 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { + Configuration, + ConfigurationParameters, + FrontendApi, +} from "@ory/client-fetch" + +export function frontendClient( + sdkUrl: string, + opts: Partial = {}, +) { + const config = new Configuration({ + ...opts, + basePath: sdkUrl, + headers: { + Accept: "application/json", + ...opts.headers, + }, + }) + return new FrontendApi(config) +} diff --git a/packages/elements-react/src/hooks/index.ts b/packages/elements-react/src/client/index.ts similarity index 100% rename from packages/elements-react/src/hooks/index.ts rename to packages/elements-react/src/client/index.ts diff --git a/packages/elements-react/src/hooks/useSession.spec.tsx b/packages/elements-react/src/client/useSession.spec.tsx similarity index 85% rename from packages/elements-react/src/hooks/useSession.spec.tsx rename to packages/elements-react/src/client/useSession.spec.tsx index ce6eff949..9415db38c 100644 --- a/packages/elements-react/src/hooks/useSession.spec.tsx +++ b/packages/elements-react/src/client/useSession.spec.tsx @@ -7,16 +7,10 @@ import { Session } from "@ory/client-fetch" import "@testing-library/jest-dom" import "@testing-library/jest-dom/jest-globals" import { act, render, screen, waitFor } from "@testing-library/react" -import { useOryFlow } from "../context/flow-context" -import { frontendClient } from "../util/client" import { sessionStore, useSession } from "./useSession" +import { frontendClient } from "./frontendClient" -// Mock the necessary imports -jest.mock("../context/flow-context", () => ({ - useOryFlow: jest.fn(), -})) - -jest.mock("../util/client", () => ({ +jest.mock("./frontendClient", () => ({ frontendClient: jest.fn(() => ({ toSession: jest.fn(), })), @@ -44,14 +38,9 @@ describe("useSession", () => { }, expires_at: new Date(), } - const mockConfig = { - sdk: { url: "https://mock-sdk-url" }, - } beforeEach(() => { jest.clearAllMocks() - // Mock the flow context - ;(useOryFlow as jest.Mock).mockReturnValue({ config: mockConfig }) sessionStore.setState({ isLoading: false, session: undefined, @@ -102,9 +91,7 @@ describe("useSession", () => { // this is fine, because jest is not calling the function // eslint-disable-next-line @typescript-eslint/unbound-method - expect(frontendClient(mockConfig.sdk.url).toSession).toHaveBeenCalledTimes( - 1, - ) + expect(frontendClient("").toSession).toHaveBeenCalledTimes(1) act(() => { render() @@ -112,9 +99,7 @@ describe("useSession", () => { // this is fine, because jest is not calling the function // eslint-disable-next-line @typescript-eslint/unbound-method - expect(frontendClient(mockConfig.sdk.url).toSession).toHaveBeenCalledTimes( - 1, - ) + expect(frontendClient("").toSession).toHaveBeenCalledTimes(1) }) it("handles errors during session fetching", async () => { @@ -155,8 +140,6 @@ describe("useSession", () => { // this is fine, because jest is not calling the function // eslint-disable-next-line @typescript-eslint/unbound-method - expect(frontendClient(mockConfig.sdk.url).toSession).toHaveBeenCalledTimes( - 1, - ) + expect(frontendClient("").toSession).toHaveBeenCalledTimes(1) }) }) diff --git a/packages/elements-react/src/hooks/useSession.ts b/packages/elements-react/src/client/useSession.ts similarity index 84% rename from packages/elements-react/src/hooks/useSession.ts rename to packages/elements-react/src/client/useSession.ts index 5e58ee7ac..0a9c8bade 100644 --- a/packages/elements-react/src/hooks/useSession.ts +++ b/packages/elements-react/src/client/useSession.ts @@ -1,12 +1,12 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 +"use client" import { Session } from "@ory/client-fetch" import { useCallback, useEffect } from "react" import { create, useStore } from "zustand" import { subscribeWithSelector } from "zustand/middleware" -import { useOryFlow } from "../context/flow-context" -import { frontendClient } from "../util/client" +import { frontendClient } from "./frontendClient" type SessionStore = { setIsLoading: (loading: boolean) => void @@ -38,8 +38,7 @@ export const sessionStore = create()( * * @returns The current session, error and loading state. */ -export const useSession = () => { - const { config } = useOryFlow() +export const useSession = (config?: { sdk: { url: string } }) => { const store = useStore(sessionStore) const fetchSession = useCallback(async () => { @@ -53,14 +52,17 @@ export const useSession = () => { setIsLoading(true) try { - const sessionData = await frontendClient(config.sdk.url).toSession() + const sessionData = await frontendClient( + config?.sdk.url ?? + window.location.protocol + "//" + window.location.host, + ).toSession() setSession(sessionData) } catch (e) { setError(e instanceof Error ? e.message : "Unknown error occurred") } finally { setIsLoading(false) } - }, [config.sdk.url]) + }, [config?.sdk.url]) useEffect(() => { void fetchSession() diff --git a/packages/elements-react/src/index.ts b/packages/elements-react/src/index.ts index 9632dd24c..81c2da38c 100644 --- a/packages/elements-react/src/index.ts +++ b/packages/elements-react/src/index.ts @@ -5,5 +5,4 @@ export type * from "./types" export * from "./components" export * from "./context" export * from "./util" -export * from "./hooks" export { locales as OryLocales } from "./locales" diff --git a/packages/elements-react/src/theme/default/components/generic/page-header.tsx b/packages/elements-react/src/theme/default/components/generic/page-header.tsx index 0b03cbfcb..1533cced1 100644 --- a/packages/elements-react/src/theme/default/components/generic/page-header.tsx +++ b/packages/elements-react/src/theme/default/components/generic/page-header.tsx @@ -1,12 +1,9 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { - OryPageHeaderProps, - useComponents, - useSession, -} from "@ory/elements-react" +import { OryPageHeaderProps, useComponents } from "@ory/elements-react" import { UserMenu } from "../ui/user-menu" +import { useSession } from "@ory/elements-react/client" export const DefaultPageHeader = (_props: OryPageHeaderProps) => { const { Card } = useComponents() diff --git a/packages/elements-react/tsup.config.ts b/packages/elements-react/tsup.config.ts index fb2838620..96cb6df3e 100644 --- a/packages/elements-react/tsup.config.ts +++ b/packages/elements-react/tsup.config.ts @@ -27,6 +27,15 @@ export default defineConfig([ "react-intl", ], }, + { + dts: true, + minify: false, + sourcemap: true, + bundle: false, + format: ["cjs", "esm"], + entry: ["src/client/**/*.ts"], + outDir: "dist/client", + }, { ...baseConfig, entry: ["src/theme/default/index.ts"],