Tree shaking: react-ui fix

.changeset/clean-crews-greet.md

@@ -0,0 +1,5 @@
+---
+"@crossmint/client-sdk-react-ui": patch
+---
+
+Added support for tree shaking

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"
     },

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";

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 (
-        <AuthContext.Provider
-            value={{
-                login,
-                logout,
-                jwt: crossmint.jwt,
-                refreshToken: crossmint.refreshToken,
-                user,
-                status: getAuthStatus(),
-                getUser,
-            }}
-        >
-            <CrossmintWalletProvider
-                defaultChain={embeddedWallets.defaultChain}
-                showPasskeyHelpers={embeddedWallets.showPasskeyHelpers}
-                appearance={appearance}
+        <TwindProvider>
+            <AuthContext.Provider
+                value={{
+                    login,
+                    logout,
+                    jwt: crossmint.jwt,
+                    refreshToken: crossmint.refreshToken,
+                    user,
+                    status: getAuthStatus(),
+                    getUser,
+                }}
             >
-                <AuthFormProvider
-                    initialState={{
-                        apiKey: crossmint.apiKey,
-                        baseUrl: crossmintBaseUrl,
-                        fetchAuthMaterial,
-                        appearance,
-                        setDialogOpen,
-                        loginMethods,
-                    }}
+                <CrossmintWalletProvider
+                    defaultChain={embeddedWallets.defaultChain}
+                    showPasskeyHelpers={embeddedWallets.showPasskeyHelpers}
+                    appearance={appearance}
                 >
-                    <WalletManager embeddedWallets={embeddedWallets} accessToken={crossmint.jwt}>
-                        {children}
-                    </WalletManager>
-
-                    <AuthFormDialog open={dialogOpen} />
-                </AuthFormProvider>
-            </CrossmintWalletProvider>
-        </AuthContext.Provider>
+                    <AuthFormProvider
+                        initialState={{
+                            apiKey: crossmint.apiKey,
+                            baseUrl: crossmintBaseUrl,
+                            fetchAuthMaterial,
+                            appearance,
+                            setDialogOpen,
+                            loginMethods,
+                        }}
+                    >
+                        <WalletManager embeddedWallets={embeddedWallets} accessToken={crossmint.jwt}>
+                            {children}
+                        </WalletManager>
+
+                        <AuthFormDialog open={dialogOpen} />
+                    </AuthFormProvider>
+                </CrossmintWalletProvider>
+            </AuthContext.Provider>
+        </TwindProvider>
     );
 }
 

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}</>;
+}

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;