From 6e8e4ca291199093f637adadc5587f0ba8c298ed Mon Sep 17 00:00:00 2001 From: jmderby Date: Fri, 25 Oct 2024 16:53:04 -0700 Subject: [PATCH 1/3] Tree shaking: react-ui fix --- packages/client/ui/react-ui/package.json | 2 +- .../client/ui/react-ui/src/hooks/useCrossmint.tsx | 7 ++++++- packages/client/ui/react-ui/src/index.ts | 8 -------- .../ui/react-ui/src/providers/TwindProvider.tsx | 14 ++++++++++++++ packages/client/ui/react-ui/tsup.config.ts | 1 - 5 files changed, 21 insertions(+), 11 deletions(-) create mode 100644 packages/client/ui/react-ui/src/providers/TwindProvider.tsx diff --git a/packages/client/ui/react-ui/package.json b/packages/client/ui/react-ui/package.json index 4d77b6a21..0e9901491 100644 --- a/packages/client/ui/react-ui/package.json +++ b/packages/client/ui/react-ui/package.json @@ -15,7 +15,7 @@ "types": "./dist/index.d.ts", "files": ["dist", "src", "LICENSE"], "scripts": { - "build": "tsup", + "build": "NODE_OPTIONS='--max-old-space-size=8192' tsup", "dev": "tsup --watch", "test": "vitest run" }, diff --git a/packages/client/ui/react-ui/src/hooks/useCrossmint.tsx b/packages/client/ui/react-ui/src/hooks/useCrossmint.tsx index 52b3ce12d..cd4ac7235 100644 --- a/packages/client/ui/react-ui/src/hooks/useCrossmint.tsx +++ b/packages/client/ui/react-ui/src/hooks/useCrossmint.tsx @@ -1,6 +1,7 @@ import { type ReactNode, createContext, useCallback, useContext, useMemo, useRef, useState } from "react"; import { type Crossmint, createCrossmint } from "@crossmint/common-sdk-base"; +import { TwindProvider } from "@/providers/TwindProvider"; export interface CrossmintContext { crossmint: Crossmint; @@ -56,7 +57,11 @@ export function CrossmintProvider({ [setJwt, setRefreshToken, version] ); - return {children}; + return ( + + {children} + + ); } export function useCrossmint(missingContextMessage?: string) { diff --git a/packages/client/ui/react-ui/src/index.ts b/packages/client/ui/react-ui/src/index.ts index 6a023d5cf..e54e60dd9 100644 --- a/packages/client/ui/react-ui/src/index.ts +++ b/packages/client/ui/react-ui/src/index.ts @@ -1,11 +1,3 @@ -import { install } from "@twind/core"; - -import twindConfig from "./twind.config"; - -// Initialize twind with custom configuration -// This sets up the CSS-in-JS styling solution for the entire application -install(twindConfig); - export * from "./components"; export * from "./hooks"; export * from "./providers"; diff --git a/packages/client/ui/react-ui/src/providers/TwindProvider.tsx b/packages/client/ui/react-ui/src/providers/TwindProvider.tsx new file mode 100644 index 000000000..da2b21f28 --- /dev/null +++ b/packages/client/ui/react-ui/src/providers/TwindProvider.tsx @@ -0,0 +1,14 @@ +import type React from "react"; +import twindConfig from "@/twind.config"; +import { install } from "@twind/core"; +import { useEffect } from "react"; + +export function TwindProvider({ children }: { children: React.ReactNode }) { + useEffect(() => { + // Initialize twind with custom configuration + // This sets up the CSS-in-JS styling solution for the entire application + install(twindConfig); + }, []); + + return <>{children}; +} diff --git a/packages/client/ui/react-ui/tsup.config.ts b/packages/client/ui/react-ui/tsup.config.ts index 2c448c188..39d690a40 100644 --- a/packages/client/ui/react-ui/tsup.config.ts +++ b/packages/client/ui/react-ui/tsup.config.ts @@ -5,7 +5,6 @@ import { treeShakableConfig } from "../../../../tsup.config.base"; const config: Options = { ...treeShakableConfig, external: ["react", "react-dom"], - entry: ["src/index.ts"], }; export default config; From d86d1ba20cfd0bb00877ef206cc50be82f6f3117 Mon Sep 17 00:00:00 2001 From: jmderby Date: Fri, 25 Oct 2024 17:35:51 -0700 Subject: [PATCH 2/3] moved twind provider to auth provider --- .../ui/react-ui/src/hooks/useCrossmint.tsx | 7 +- .../src/providers/CrossmintAuthProvider.tsx | 67 ++++++++++--------- 2 files changed, 36 insertions(+), 38 deletions(-) diff --git a/packages/client/ui/react-ui/src/hooks/useCrossmint.tsx b/packages/client/ui/react-ui/src/hooks/useCrossmint.tsx index cd4ac7235..52b3ce12d 100644 --- a/packages/client/ui/react-ui/src/hooks/useCrossmint.tsx +++ b/packages/client/ui/react-ui/src/hooks/useCrossmint.tsx @@ -1,7 +1,6 @@ import { type ReactNode, createContext, useCallback, useContext, useMemo, useRef, useState } from "react"; import { type Crossmint, createCrossmint } from "@crossmint/common-sdk-base"; -import { TwindProvider } from "@/providers/TwindProvider"; export interface CrossmintContext { crossmint: Crossmint; @@ -57,11 +56,7 @@ export function CrossmintProvider({ [setJwt, setRefreshToken, version] ); - return ( - - {children} - - ); + return {children}; } export function useCrossmint(missingContextMessage?: string) { diff --git a/packages/client/ui/react-ui/src/providers/CrossmintAuthProvider.tsx b/packages/client/ui/react-ui/src/providers/CrossmintAuthProvider.tsx index ba1a89119..fc58e81b6 100644 --- a/packages/client/ui/react-ui/src/providers/CrossmintAuthProvider.tsx +++ b/packages/client/ui/react-ui/src/providers/CrossmintAuthProvider.tsx @@ -15,6 +15,7 @@ import { useCrossmint, useRefreshToken, useWallet } from "../hooks"; import { CrossmintWalletProvider } from "./CrossmintWalletProvider"; import { deleteCookie, getCookie, setCookie } from "@/utils/authCookies"; import { AuthFormProvider } from "./auth/AuthFormProvider"; +import { TwindProvider } from "./TwindProvider"; export type CrossmintAuthWalletConfig = { defaultChain: EVMSmartWalletChain; @@ -140,40 +141,42 @@ export function CrossmintAuthProvider({ }; return ( - - + - - - {children} - - - - - - + + + {children} + + + + + + + ); } From 769dd4a901e9800dd018dfb8e9702471a3add072 Mon Sep 17 00:00:00 2001 From: jmderby Date: Fri, 25 Oct 2024 17:35:59 -0700 Subject: [PATCH 3/3] added changeset --- .changeset/clean-crews-greet.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/clean-crews-greet.md diff --git a/.changeset/clean-crews-greet.md b/.changeset/clean-crews-greet.md new file mode 100644 index 000000000..a9c22983f --- /dev/null +++ b/.changeset/clean-crews-greet.md @@ -0,0 +1,5 @@ +--- +"@crossmint/client-sdk-react-ui": patch +--- + +Added support for tree shaking