Tree shaking: react-ui fix

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/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 <CrossmintContext.Provider value={value}>{children}</CrossmintContext.Provider>;
+    return (
+        <CrossmintContext.Provider value={value}>
+            <TwindProvider>{children}</TwindProvider>
+        </CrossmintContext.Provider>
+    );
 }
 
 export function useCrossmint(missingContextMessage?: string) {

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