suparisma 1.2.1 → 1.2.2

package/README.md

@@ -16,6 +16,7 @@ A powerful, typesafe React hook generator for Supabase, driven by your Prisma sc
 - [Why Suparisma?](#why-suparisma)
 - [Features](#features)
 - [Installation](#installation)
+- [React Native / Expo Setup](#react-native--expo-setup)
 - [Quick Start](#quick-start)
 - [Detailed Usage](#detailed-usage)
   - [Basic CRUD Operations](#basic-crud-operations)
@@ -60,7 +61,7 @@ Suparisma bridges this gap by:
 - Enabling easy **pagination, filtering, and search** on your data
 - Leveraging both **Prisma** and **Supabase** official SDKs
 - Respecting **Supabase's auth rules** for secure database access
-- Working seamlessly with any React environment (Next.js, Remix, Tanstack Router, etc.)
+- Working seamlessly with any React environment (Next.js, Remix, Tanstack Router, React Native, etc.)
 
 ## Features
 
@@ -70,7 +71,7 @@ Suparisma bridges this gap by:
 - 🔍 **Full-text search** with configurable annotations *(currently under maintenance)*
 - 🔢 **Pagination and sorting** built into every hook
 - 🧩 **Prisma-like API** that feels familiar if you already use Prisma
-- 📱 **Works with any React framework** including Next.js, Remix, etc.
+- 📱 **Works with any React framework** including Next.js, Remix, React Native, and Expo
 - 🛠️ **Simple CLI** to generate hooks with a single command
 
 ## Installation
@@ -86,6 +87,110 @@ yarn add suparisma
 pnpm install suparisma
 ```
 
+## React Native / Expo Setup
+
+Suparisma fully supports React Native and Expo projects. Follow these additional steps for mobile development:
+
+### 1. Install Dependencies
+
+```bash
+# Install Suparisma and required dependencies
+pnpm install suparisma @supabase/supabase-js @react-native-async-storage/async-storage react-native-url-polyfill
+
+# For UUID generation support (recommended)
+pnpm install react-native-get-random-values
+```
+
+### 2. Add Polyfills
+
+Add these imports at the very top of your app's entry point (e.g., `App.tsx` or `index.js`):
+
+```tsx
+// App.tsx or index.js - Add these at the VERY TOP before any other imports
+import 'react-native-get-random-values'; // Required for UUID generation
+import 'react-native-url-polyfill/auto'; // Required for Supabase
+```
+
+### 3. Set Environment Variables
+
+For **Expo** projects, use the `EXPO_PUBLIC_` prefix in your `.env` file:
+
+```bash
+EXPO_PUBLIC_SUPABASE_URL="https://your-project.supabase.co"
+EXPO_PUBLIC_SUPABASE_ANON_KEY="your-anon-key"
+```
+
+For **bare React Native** projects, use `react-native-dotenv` or similar.
+
+### 4. Generate Hooks for React Native
+
+Set the `SUPARISMA_PLATFORM` environment variable when generating:
+
+```bash
+# Generate hooks for React Native / Expo
+SUPARISMA_PLATFORM=react-native npx suparisma generate
+```
+
+Or add it to your `package.json` scripts:
+
+```json
+{
+  "scripts": {
+    "suparisma:generate": "SUPARISMA_PLATFORM=react-native npx suparisma generate"
+  }
+}
+```
+
+### 5. Use the Hooks
+
+The hooks work exactly the same as in web projects:
+
+```tsx
+import React from 'react';
+import { View, Text, FlatList, TouchableOpacity } from 'react-native';
+import useSuparisma from './src/suparisma/generated';
+
+function ThingList() {
+  const { 
+    data: things,
+    loading,
+    error,
+    create: createThing
+  } = useSuparisma.thing();
+  
+  if (loading) return <Text>Loading...</Text>;
+  if (error) return <Text>Error: {error.message}</Text>;
+  
+  return (
+    <View>
+      <FlatList
+        data={things}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <Text>{item.name} (Number: {item.someNumber})</Text>
+        )}
+      />
+      
+      <TouchableOpacity 
+        onPress={() => createThing({ 
+          name: "New Thing", 
+          someNumber: Math.floor(Math.random() * 100)
+        })}
+      >
+        <Text>Add Thing</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+```
+
+### Platform Detection
+
+The generated Supabase client automatically configures itself for React Native with:
+- **AsyncStorage** for auth persistence
+- **Session detection** disabled (not applicable in mobile)
+- **Auto refresh token** enabled
+
 ## Quick Start
 
 1. **Add a Prisma schema**: Ensure you have a valid `prisma/schema.prisma` file in your project
@@ -139,6 +244,7 @@ Note: you can adjust the prisma schema path and the generated files output path
 ```bash
 SUPARISMA_PRISMA_SCHEMA_PATH="./prisma/schema.prisma"
 SUPARISMA_OUTPUT_DIR="./src/suparisma/generated"
+SUPARISMA_PLATFORM="web" # or "react-native" for React Native/Expo projects
 ```
 Also make sure to not change any of these generated files directly as **they will always be overwritten**
 
@@ -1291,10 +1397,13 @@ export default function ThingTable() {
 |----------|----------|-------------|---------|
 | `DATABASE_URL` | Yes | Postgres database URL used by Prisma | `postgresql://user:pass@host:port/db` |
 | `DIRECT_URL` | Yes | Direct URL to Postgres DB for realtime setup | `postgresql://user:pass@host:port/db` |
-| `NEXT_PUBLIC_SUPABASE_URL` | Yes | Your Supabase project URL | `https://xyz.supabase.co` |
-| `NEXT_PUBLIC_SUPABASE_ANON_KEY` | Yes | Supabase anonymous key | `eyJh...` |
+| `NEXT_PUBLIC_SUPABASE_URL` | Yes (Web) | Your Supabase project URL (Next.js) | `https://xyz.supabase.co` |
+| `NEXT_PUBLIC_SUPABASE_ANON_KEY` | Yes (Web) | Supabase anonymous key (Next.js) | `eyJh...` |
+| `EXPO_PUBLIC_SUPABASE_URL` | Yes (RN) | Your Supabase project URL (Expo) | `https://xyz.supabase.co` |
+| `EXPO_PUBLIC_SUPABASE_ANON_KEY` | Yes (RN) | Supabase anonymous key (Expo) | `eyJh...` |
 | `SUPARISMA_OUTPUT_DIR` | No | Custom output directory | `src/lib/suparisma` |
 | `SUPARISMA_PRISMA_SCHEMA_PATH` | No | Custom schema path | `db/schema.prisma` |
+| `SUPARISMA_PLATFORM` | No | Target platform: `web` or `react-native` | `react-native` |
 
 ### CLI Commands
 
@@ -1464,6 +1573,12 @@ GRANT USAGE, SELECT ON ALL SEQUENCES IN SCHEMA public TO anon;
 ALTER DEFAULT PRIVILEGES IN SCHEMA public
 GRANT USAGE, SELECT ON SEQUENCES TO anon;
 ```
+ 
+You could also try debugging on a table, the following is NOT recommended but you can debug permissions given to anon, service_account and give all access to anon key to make sure that's not the issue:
+```sql
+GRANT ALL ON TABLE "(tableName)" TO anon;
+GRANT ALL ON TABLE "(tableName)" TO authenticated;
+```
 
 **"Unknown command: undefined"**
 

package/dist/config.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HOOK_NAME_PREFIX = exports.UTILS_DIR = exports.HOOKS_DIR = exports.TYPES_DIR = exports.OUTPUT_DIR = exports.PRISMA_SCHEMA_PATH = void 0;
+exports.PLATFORM = exports.HOOK_NAME_PREFIX = exports.UTILS_DIR = exports.HOOKS_DIR = exports.TYPES_DIR = exports.OUTPUT_DIR = exports.PRISMA_SCHEMA_PATH = void 0;
 // Configuration
 const path_1 = __importDefault(require("path"));
 // Use current working directory for all paths
@@ -14,3 +14,4 @@ exports.TYPES_DIR = `${exports.OUTPUT_DIR}/types`;
 exports.HOOKS_DIR = `${exports.OUTPUT_DIR}/hooks`;
 exports.UTILS_DIR = `${exports.OUTPUT_DIR}/utils`;
 exports.HOOK_NAME_PREFIX = 'useSuparisma';
+exports.PLATFORM = process.env.SUPARISMA_PLATFORM || 'web';

package/dist/generators/coreGenerator.js

@@ -47,6 +47,42 @@ export function escapeRegexCharacters(str: string): string {
   return str.replace(/[()\\[\\]{}+*?^$|.\\\\]/g, '\\\\\\\\$&');
 }
 
+/**
+ * Generate a UUID v4, with fallback for environments without crypto.randomUUID()
+ * Works in: browsers, Node.js, and React Native (with react-native-get-random-values polyfill)
+ * 
+ * For React Native, ensure you have installed and imported the polyfill:
+ * - pnpm install react-native-get-random-values
+ * - Import at app entry point: import 'react-native-get-random-values';
+ */
+export function generateUUID(): string {
+  // Try native crypto.randomUUID() first (modern browsers & Node.js 16.7+)
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  
+  // Fallback using crypto.getRandomValues() (works with react-native-get-random-values polyfill)
+  if (typeof crypto !== 'undefined' && typeof crypto.getRandomValues === 'function') {
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    
+    // Set version (4) and variant (RFC 4122)
+    bytes[6] = (bytes[6] & 0x0f) | 0x40; // Version 4
+    bytes[8] = (bytes[8] & 0x3f) | 0x80; // Variant RFC 4122
+    
+    const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
+    return \`\${hex.slice(0, 8)}-\${hex.slice(8, 12)}-\${hex.slice(12, 16)}-\${hex.slice(16, 20)}-\${hex.slice(20)}\`;
+  }
+  
+  // Last resort fallback using Math.random() (not cryptographically secure)
+  console.warn('[Suparisma] crypto API not available, using Math.random() fallback for UUID generation');
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
 /**
  * Advanced filter operators for complex queries
  * @example
@@ -1690,7 +1726,7 @@ export function createSuparismaHook<
             if (defaultValue.includes('now()') || defaultValue.includes('now')) {
               appliedDefaults[field] = now.toISOString(); // Database expects ISO string
             } else if (defaultValue.includes('uuid()') || defaultValue.includes('uuid')) {
-              appliedDefaults[field] = crypto.randomUUID();
+              appliedDefaults[field] = generateUUID();
             } else if (defaultValue.includes('cuid()') || defaultValue.includes('cuid')) {
               // Simple cuid-like implementation for client-side
               appliedDefaults[field] = 'c' + Math.random().toString(36).substring(2, 15);

package/dist/generators/supabaseClientGenerator.js

@@ -6,21 +6,83 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateSupabaseClientFile = generateSupabaseClientFile;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
-const config_1 = require("../config"); // Ensure this is UTILS_DIR
+const config_1 = require("../config");
+/**
+ * Generate the Supabase client file based on the target platform.
+ * Supports both web (Next.js, etc.) and React Native/Expo.
+ */
 function generateSupabaseClientFile() {
-    const supabaseClientContent = `// THIS FILE IS AUTO-GENERATED - DO NOT EDIT DIRECTLY
+    let supabaseClientContent;
+    if (config_1.PLATFORM === 'react-native') {
+        // React Native / Expo compatible client
+        supabaseClientContent = `// THIS FILE IS AUTO-GENERATED - DO NOT EDIT DIRECTLY
+// Platform: React Native / Expo
+//
+// IMPORTANT: Before using Suparisma in React Native, ensure you have:
+// 1. Installed required dependencies:
+//    pnpm install @supabase/supabase-js @react-native-async-storage/async-storage react-native-url-polyfill
+//
+// 2. Added polyfills at your app's entry point (e.g., App.tsx or index.js):
+//    import 'react-native-url-polyfill/auto';
+//
+// 3. Set your Supabase credentials below or via environment variables
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { createClient } from '@supabase/supabase-js';
 
-export const supabase = createClient(
-  process.env.NEXT_PUBLIC_SUPABASE_URL!,
-  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
-);
+// Option 1: Set your Supabase credentials directly (for quick setup)
+// const SUPABASE_URL = 'https://your-project.supabase.co';
+// const SUPABASE_ANON_KEY = 'your-anon-key';
+
+// Option 2: Use environment variables (recommended for production)
+// With Expo, use expo-constants or babel-plugin-inline-dotenv
+// With bare React Native, use react-native-dotenv
+const SUPABASE_URL = process.env.EXPO_PUBLIC_SUPABASE_URL || process.env.SUPABASE_URL || '';
+const SUPABASE_ANON_KEY = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY || process.env.SUPABASE_ANON_KEY || '';
+
+if (!SUPABASE_URL || !SUPABASE_ANON_KEY) {
+  console.warn(
+    '[Suparisma] Supabase credentials not found. Please set EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY ' +
+    'in your environment variables, or update the credentials directly in this file.'
+  );
+}
+
+export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
+  auth: {
+    storage: AsyncStorage,
+    autoRefreshToken: true,
+    persistSession: true,
+    detectSessionInUrl: false, // Important for React Native
+  },
+});
 `;
+    }
+    else {
+        // Web platform (Next.js, Remix, etc.)
+        supabaseClientContent = `// THIS FILE IS AUTO-GENERATED - DO NOT EDIT DIRECTLY
+// Platform: Web (Next.js, Remix, etc.)
+import { createClient } from '@supabase/supabase-js';
+
+// For Next.js, use NEXT_PUBLIC_ prefix
+// For other frameworks, adjust the environment variable names as needed
+const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.SUPABASE_URL || '';
+const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || process.env.SUPABASE_ANON_KEY || '';
+
+if (!SUPABASE_URL || !SUPABASE_ANON_KEY) {
+  console.warn(
+    '[Suparisma] Supabase credentials not found. Please set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY ' +
+    '(or SUPABASE_URL and SUPABASE_ANON_KEY) in your environment variables.'
+  );
+}
+
+export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+`;
+    }
     // Output to the UTILS_DIR
     const outputPath = path_1.default.join(config_1.UTILS_DIR, 'supabase-client.ts');
     if (!fs_1.default.existsSync(config_1.UTILS_DIR)) {
         fs_1.default.mkdirSync(config_1.UTILS_DIR, { recursive: true });
     }
     fs_1.default.writeFileSync(outputPath, supabaseClientContent);
-    console.log(`🚀 Generated Supabase client file at: ${outputPath}`);
+    console.log(`🚀 Generated Supabase client file at: ${outputPath} (platform: ${config_1.PLATFORM})`);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "suparisma",
-	"version": "1.2.1",
-	"description": "Opinionated typesafe React realtime CRUD hooks generator for all your Supabase tables, powered by Prisma.",
+	"version": "1.2.2",
+	"description": "Opinionated typesafe React realtime CRUD hooks generator for all your Supabase tables, powered by Prisma. Works with Next.js, Remix, React Native, and Expo.",
 	"main": "dist/index.js",
 	"repository": {
 		"type": "git",
@@ -20,12 +20,15 @@
 	},
 	"keywords": [
 		"react",
+		"react-native",
+		"expo",
 		"hooks",
 		"supabase",
 		"prisma",
 		"typescript",
 		"nextjs",
-		"realtime"
+		"realtime",
+		"mobile"
 	],
 	"dependencies": {
 		"@supabase/supabase-js": "^2.49.4",
@@ -41,5 +44,21 @@
 		"@types/react": "^19.1.4",
 		"prisma": "^6.8.2",
 		"supabase-js": "link:@types/@supabase/supabase-js"
+	},
+	"peerDependencies": {
+		"@react-native-async-storage/async-storage": ">=1.19.0",
+		"react-native-get-random-values": ">=1.9.0",
+		"react-native-url-polyfill": ">=2.0.0"
+	},
+	"peerDependenciesMeta": {
+		"@react-native-async-storage/async-storage": {
+			"optional": true
+		},
+		"react-native-get-random-values": {
+			"optional": true
+		},
+		"react-native-url-polyfill": {
+			"optional": true
+		}
 	}
 }