From 6c5be22bb76e99f18df87076f8b7e4936b350340 Mon Sep 17 00:00:00 2001 From: Gaurav Singh Date: Tue, 20 Aug 2024 13:19:39 +0530 Subject: [PATCH] refactor (client): Move client out of react build (#722) * refactor (client): Move out of react build * refactor (apiclient): Rename client to API client and other changes * chore (apiClient): Rename package * chore (apiClient): rename export folder name * chore (apiClient): rename export folder name * chore (apiClient): redundant folder name * chore (apiClient): redundant folder name * chore (sdks): update pnpm-lock file * chore (sdks): rename excluding folder * fix (sdk): prefer workspace package locally * chore (api-client): rename api-client --- sdks/js/.npmrc | 3 ++- .../core/{client => api-client}/V1Beta1.ts | 0 .../core/{client => api-client}/WellKnown.ts | 0 .../core/{client => api-client}/data-contracts.ts | 0 .../core/{client => api-client}/http-client.ts | 0 sdks/js/packages/core/api-client/index.ts | 4 ++++ sdks/js/packages/core/package.json | 8 +++++++- .../core/react/contexts/FrontierContext.tsx | 4 ++-- sdks/js/packages/core/react/frontier.ts | 2 +- sdks/js/packages/core/src/index.ts | 6 +++--- sdks/js/packages/core/tsup.config.ts | 10 ++++++++-- sdks/js/packages/sdk-demo/package.json | 2 +- sdks/js/packages/sdk-demo/src/api/frontier.ts | 11 +++++++++++ .../js/packages/sdk-demo/src/app/callback/page.tsx | 11 +++++++---- sdks/js/packages/sdk-demo/src/app/page.tsx | 14 +++++++++++++- 15 files changed, 59 insertions(+), 16 deletions(-) rename sdks/js/packages/core/{client => api-client}/V1Beta1.ts (100%) rename sdks/js/packages/core/{client => api-client}/WellKnown.ts (100%) rename sdks/js/packages/core/{client => api-client}/data-contracts.ts (100%) rename sdks/js/packages/core/{client => api-client}/http-client.ts (100%) create mode 100644 sdks/js/packages/core/api-client/index.ts create mode 100644 sdks/js/packages/sdk-demo/src/api/frontier.ts diff --git a/sdks/js/.npmrc b/sdks/js/.npmrc index 228c716f7..599f22602 100644 --- a/sdks/js/.npmrc +++ b/sdks/js/.npmrc @@ -1,2 +1,3 @@ auto-install-peers = true -strict-peer-dependencies = false \ No newline at end of file +strict-peer-dependencies = false +link-workspace-packages=true diff --git a/sdks/js/packages/core/client/V1Beta1.ts b/sdks/js/packages/core/api-client/V1Beta1.ts similarity index 100% rename from sdks/js/packages/core/client/V1Beta1.ts rename to sdks/js/packages/core/api-client/V1Beta1.ts diff --git a/sdks/js/packages/core/client/WellKnown.ts b/sdks/js/packages/core/api-client/WellKnown.ts similarity index 100% rename from sdks/js/packages/core/client/WellKnown.ts rename to sdks/js/packages/core/api-client/WellKnown.ts diff --git a/sdks/js/packages/core/client/data-contracts.ts b/sdks/js/packages/core/api-client/data-contracts.ts similarity index 100% rename from sdks/js/packages/core/client/data-contracts.ts rename to sdks/js/packages/core/api-client/data-contracts.ts diff --git a/sdks/js/packages/core/client/http-client.ts b/sdks/js/packages/core/api-client/http-client.ts similarity index 100% rename from sdks/js/packages/core/client/http-client.ts rename to sdks/js/packages/core/api-client/http-client.ts diff --git a/sdks/js/packages/core/api-client/index.ts b/sdks/js/packages/core/api-client/index.ts new file mode 100644 index 000000000..786b14f71 --- /dev/null +++ b/sdks/js/packages/core/api-client/index.ts @@ -0,0 +1,4 @@ +import { V1Beta1 } from './V1Beta1'; + +export * from './data-contracts'; +export const ApiClient = V1Beta1; \ No newline at end of file diff --git a/sdks/js/packages/core/package.json b/sdks/js/packages/core/package.json index 25ea9c16a..3b09a6010 100644 --- a/sdks/js/packages/core/package.json +++ b/sdks/js/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@raystack/frontier", - "version": "0.8.17", + "version": "0.29.0", "description": "A js library for frontier", "sideEffects": false, "main": "./dist/index.js", @@ -49,6 +49,12 @@ "import": "./react/dist/index.mjs", "module": "./react/dist/index.mjs", "require": "./react/dist/index.js" + }, + "./api-client": { + "types": "./api-client/dist/index.d.ts", + "import": "./api-client/dist/index.mjs", + "module": "./api-client/dist/index.mjs", + "require": "./api-client/dist/index.js" } }, "devDependencies": { diff --git a/sdks/js/packages/core/react/contexts/FrontierContext.tsx b/sdks/js/packages/core/react/contexts/FrontierContext.tsx index 1d790aabd..80cd4387f 100644 --- a/sdks/js/packages/core/react/contexts/FrontierContext.tsx +++ b/sdks/js/packages/core/react/contexts/FrontierContext.tsx @@ -13,7 +13,7 @@ import { FrontierProviderProps } from '../../shared/types'; -import { V1Beta1 } from '../../client/V1Beta1'; +import { V1Beta1 } from '../../api-client/V1Beta1'; import { V1Beta1AuthStrategy, V1Beta1BillingAccount, @@ -23,7 +23,7 @@ import { V1Beta1Plan, V1Beta1Subscription, V1Beta1User -} from '../../client/data-contracts'; +} from '../../api-client/data-contracts'; import Frontier from '../frontier'; import { getActiveSubscription, diff --git a/sdks/js/packages/core/react/frontier.ts b/sdks/js/packages/core/react/frontier.ts index fb22fa465..2a2440f04 100644 --- a/sdks/js/packages/core/react/frontier.ts +++ b/sdks/js/packages/core/react/frontier.ts @@ -1,4 +1,4 @@ -import { V1Beta1 } from '../client/V1Beta1'; +import { V1Beta1 } from '../api-client/V1Beta1'; import { FrontierClient } from '../src'; // Create a class to hold the singleton instance diff --git a/sdks/js/packages/core/src/index.ts b/sdks/js/packages/core/src/index.ts index 3b7f64bfc..3a43f5118 100644 --- a/sdks/js/packages/core/src/index.ts +++ b/sdks/js/packages/core/src/index.ts @@ -1,5 +1,5 @@ -import { V1Beta1 } from '../client/V1Beta1'; +import { V1Beta1 } from '../api-client/V1Beta1'; -export * from '../client/V1Beta1'; -export * from '../client/data-contracts'; +export * from '../api-client/V1Beta1'; +export * from '../api-client/data-contracts'; export const FrontierClient = V1Beta1; diff --git a/sdks/js/packages/core/tsup.config.ts b/sdks/js/packages/core/tsup.config.ts index 3e1d69416..38c89b473 100644 --- a/sdks/js/packages/core/tsup.config.ts +++ b/sdks/js/packages/core/tsup.config.ts @@ -16,12 +16,18 @@ export default defineConfig(() => [ js: "'use client'" }, format: ['cjs', 'esm'], - external: ['react', 'svelte', 'vue', 'solid-js'], + external: ['react', 'svelte', 'vue', 'solid-js', 'api-client/*'], dts: true, loader: { '.svg': 'dataurl', '.png': 'dataurl' }, esbuildPlugins: [cssModulesPlugin()] - } + }, + { + entry: ['api-client/index.ts'], + format: ['cjs', 'esm'], + outDir: 'api-client/dist', + dts: true, + }, ]); diff --git a/sdks/js/packages/sdk-demo/package.json b/sdks/js/packages/sdk-demo/package.json index 12186af38..3d8b598be 100644 --- a/sdks/js/packages/sdk-demo/package.json +++ b/sdks/js/packages/sdk-demo/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@raystack/apsara": "^0.17.1", - "@raystack/frontier": "0.28.4", + "@raystack/frontier": "^0.29.0", "next": "14.2.5", "next-http-proxy-middleware": "^1.2.6", "react": "^18", diff --git a/sdks/js/packages/sdk-demo/src/api/frontier.ts b/sdks/js/packages/sdk-demo/src/api/frontier.ts new file mode 100644 index 000000000..c7846693b --- /dev/null +++ b/sdks/js/packages/sdk-demo/src/api/frontier.ts @@ -0,0 +1,11 @@ +import { ApiClient } from '@raystack/frontier/api-client' +import config from '@/config/frontier'; + +const client = new ApiClient({ + baseUrl: config.endpoint, + baseApiParams: { + credentials: 'include' + } +}); + +export default client \ No newline at end of file diff --git a/sdks/js/packages/sdk-demo/src/app/callback/page.tsx b/sdks/js/packages/sdk-demo/src/app/callback/page.tsx index 261ae7d46..2160a92a5 100644 --- a/sdks/js/packages/sdk-demo/src/app/callback/page.tsx +++ b/sdks/js/packages/sdk-demo/src/app/callback/page.tsx @@ -1,13 +1,14 @@ 'use client'; import { useEffect, useCallback, Suspense } from 'react'; -import { useFrontier } from '@raystack/frontier/react'; +import frontierClient from '@/api/frontier'; import { Flex } from '@raystack/apsara'; import { redirect, useSearchParams } from 'next/navigation'; import useAuthRedirect from '@/hooks/useAuthRedirect'; + function Callback() { - const { client } = useFrontier(); + const searchParams = useSearchParams(); @@ -15,9 +16,11 @@ function Callback() { const state = searchParams?.get('state'); const code = searchParams?.get('code'); + + try { if (state && code) { - const resp = await client?.frontierServiceAuthCallback({ state, code }); + const resp = await frontierClient?.frontierServiceAuthCallback({ state, code }); if (resp?.status === 200) { redirect('/'); } else { @@ -27,7 +30,7 @@ function Callback() { } catch (err) { redirect('/login'); } - }, [client, searchParams]); + }, [searchParams]); useEffect(() => { callFrontierCallback(); diff --git a/sdks/js/packages/sdk-demo/src/app/page.tsx b/sdks/js/packages/sdk-demo/src/app/page.tsx index 232746ca3..0e6c1eee6 100644 --- a/sdks/js/packages/sdk-demo/src/app/page.tsx +++ b/sdks/js/packages/sdk-demo/src/app/page.tsx @@ -1,11 +1,14 @@ 'use client'; import AuthContext from '@/contexts/auth'; -import { Flex } from '@raystack/apsara'; +import { Button, Flex } from '@raystack/apsara'; import { useFrontier } from '@raystack/frontier/react'; + import Link from 'next/link'; import { redirect } from 'next/navigation'; import { useContext, useEffect } from 'react'; +import frontierClient from '@/api/frontier' + export default function Home() { const { isAuthorized } = useContext(AuthContext); const { organizations } = useFrontier(); @@ -15,6 +18,14 @@ export default function Home() { } }, [isAuthorized]); + + async function logout() { + const resp = await frontierClient?.frontierServiceAuthLogout(); + if (resp?.status === 200) { + window.location.reload() + } + } + return (
+ {organizations.map(org => (