@indexeddb-orm/idb-orm 0.0.1

package/react-demo-app/src/hooks/useCloudSyncDemo.ts

@@ -0,0 +1,84 @@
+import {
+ useEffect, useState,
+} from 'react';
+
+import { db } from '../database/Database';
+
+export function useCloudSyncDemo() {
+  const [syncStatus, setSyncStatus] = useState<{
+    enabled: boolean;
+    lastSync?: Date;
+    isOnline?: boolean;
+  }>({ enabled: false });
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    // Get initial sync status
+    const status = db.getSyncStatus();
+    setSyncStatus(status);
+  }, []);
+
+  const handleManualSync = async () => {
+    setIsLoading(true);
+    try {
+      await db.sync();
+      // Update status after sync
+      const newStatus = db.getSyncStatus();
+      setSyncStatus(newStatus);
+      alert('Sync completed successfully!');
+    } catch (error) {
+      console.error('Sync failed:', error);
+      alert(`Sync failed: ${(error as Error).message}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleEnableCloudSync = async () => {
+    setIsLoading(true);
+    try {
+      await db.enableCloudSync({
+        databaseUrl: 'https://your-database-url.dexie.cloud',
+        enableOfflineSupport: true,
+        syncInterval: 30000,
+      });
+
+      const newStatus = db.getSyncStatus();
+      setSyncStatus(newStatus);
+      alert('Cloud sync enabled successfully!');
+    } catch (error) {
+      console.error('Failed to enable cloud sync:', error);
+      alert(`Failed to enable cloud sync: ${(error as Error).message}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDisableCloudSync = () => {
+    db.disableCloudSync();
+    setSyncStatus({ enabled: false });
+    alert('Cloud sync disabled');
+  };
+
+  const handleSyncTables = async () => {
+    setIsLoading(true);
+    try {
+      await db.syncTables(['users', 'posts']);
+      alert('Tables synced successfully!');
+    } catch (error) {
+      console.error('Table sync failed:', error);
+      alert(`Table sync failed: ${(error as Error).message}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    syncStatus,
+    isLoading,
+    handleManualSync,
+    handleEnableCloudSync,
+    handleDisableCloudSync,
+    handleSyncTables,
+  };
+}

package/react-demo-app/src/hooks/useLiveQueryDemo.ts

@@ -0,0 +1,68 @@
+import { useLiveQuery } from 'dexie-react-hooks';
+
+import { db } from '../database/Database';
+import { PostEntity } from '../entities/Post';
+import { ProfileEntity } from '../entities/Profile';
+import { UserEntity } from '../entities/User';
+
+export function useLiveQueryDemo() {
+  // 1. Using getRepository - preferred typed API (full UserEntity[] typing)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const allUsers = useLiveQuery(() => db.table('users').toArray());
+
+  // 4. Filtering with full typing - TypeScript knows it's UserEntity[]
+  const adultUsers = useLiveQuery(() =>
+    db.getRepository(UserEntity).where('age').above(18).toArray(),
+  );
+
+  // 5. Counting records - TypeScript knows it's number
+  const userCount = useLiveQuery(() => db.getRepository(UserEntity).count());
+
+  // 6. Single record - TypeScript knows it's UserEntity | undefined
+  const firstUser = useLiveQuery(() => db.getRepository(UserEntity).orderBy('id').first());
+
+  // 7. Complex query with relations - full typing preserved
+  const usersWithProfiles = useLiveQuery(async () => {
+    const users = await db.getRepository(UserEntity).toArray(); // UserEntity[]
+    const usersWithProfiles: Array<UserEntity
+    & { profile?: ProfileEntity }> = [];
+
+    console.log('new users', users);
+
+    for (const user of users) {
+      if (user.id == null) {
+        usersWithProfiles
+        .push(user as UserEntity & { profile?: ProfileEntity });
+        continue;
+      }
+      const profile = await db
+        .getRepository(ProfileEntity)
+        .where('userId')
+        .equals(user.id)
+        .first(); // ProfileEntity | undefined
+      usersWithProfiles.push(Object.assign(user, { profile }));
+    }
+
+    return usersWithProfiles;
+  });
+
+  // 8. Test with PostEntity - ensure typing works across entities
+  const allPosts = useLiveQuery(() =>
+     db.getRepository(PostEntity).toArray()); // PostEntity[]
+
+  // 9. Test with ProfileEntity
+  const allProfiles = useLiveQuery(() =>
+    db.getRepository(ProfileEntity)
+      .toArray(),
+  ); // ProfileEntity[]
+
+  return {
+    allUsers,
+    adultUsers,
+    userCount,
+    firstUser,
+    usersWithProfiles,
+    allPosts,
+    allProfiles,
+  };
+}

package/react-demo-app/src/hooks/usePostsLiveQueryDemo.ts

@@ -0,0 +1,64 @@
+import { newEntity } from 'idb-orm';
+import { useLiveQuery } from 'dexie-react-hooks';
+
+import { db } from '../database/Database';
+import { PostEntity } from '../entities/Post';
+
+export function usePostsLiveQueryDemo() {
+  // 1. All posts with sorting
+  const allPosts = useLiveQuery(() =>
+    db.getRepository(PostEntity).orderBy('createdAt').reverse().toArray(),
+  );
+
+  // 2. Published posts
+  const publishedPosts = useLiveQuery(() =>
+    db.getRepository(PostEntity).where('published').equals(1).toArray(),
+  );
+
+  // 3. Most liked posts
+  const topPosts = useLiveQuery(() =>
+    db.getRepository(PostEntity).orderBy('likes').reverse().limit(3).toArray(),
+  );
+
+  // 4. Post statistics
+  const postStats = useLiveQuery(async () => {
+    const total = await db.getRepository(PostEntity).count();
+    const published = await db
+      .getRepository(PostEntity)
+      .where('published')
+      .equals(1)
+      .count();
+    const totalLikes = await db
+      .getRepository(PostEntity)
+      .toArray()
+      .then((posts) => posts.reduce((sum, post) => sum + (post.likes || 0), 0));
+
+    return { total, published, totalLikes };
+  });
+
+  const addSamplePost = async () => {
+    try {
+      const post = newEntity(PostEntity, {
+        title: `Post ${Date.now()}`,
+        content: 'This is a sample post added by the useLiveQuery demo!',
+        published: Math.random() > 0.5,
+        likes: Math.floor(Math.random() * 100),
+        postTags: ['demo', 'useLiveQuery'],
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+      });
+
+      await db.getRepository(PostEntity).add(post);
+    } catch (error) {
+      console.error('Error adding post:', error);
+    }
+  };
+
+  return {
+    allPosts,
+    publishedPosts,
+    topPosts,
+    postStats,
+    addSamplePost,
+  };
+}

package/react-demo-app/src/hooks/useTypeScriptDemo.ts

@@ -0,0 +1,43 @@
+import { useLiveQuery } from 'dexie-react-hooks';
+
+import { db } from '../database/Database';
+import { PostEntity } from '../entities/Post';
+import { ProfileEntity } from '../entities/Profile';
+import { UserEntity } from '../entities/User';
+
+export function useTypeScriptDemo() {
+  // These variables are fully typed - check in your IDE!
+  const users = useLiveQuery(() => db.getRepository(UserEntity).toArray());
+  const posts = useLiveQuery(() => db.getRepository(PostEntity).toArray());
+  const profiles = useLiveQuery(() =>
+    db.getRepository(ProfileEntity).toArray(),
+  );
+
+  // Test functions - TypeScript should suggest properties
+  const handleUserClick = (user: UserEntity) => {
+    // IDE should suggest
+    // : user.id, user.name, user.email, user.age, user.tags, user.metadata
+    console.log('User clicked:', user.name, user.email, user.age);
+  };
+
+  const handlePostClick = (post: PostEntity) => {
+    // IDE should suggest:
+    //  post.id, post.title, post.content, post.published, post.likes, etc.
+    console.log('Post clicked:', post.title, post.published, post.likes);
+  };
+
+  const handleProfileClick = (profile: ProfileEntity) => {
+    // IDE should suggest:
+    //  profile.id, profile.userId, profile.bio, profile.avatar, etc.
+    console.log('Profile clicked:', profile.bio, profile.website);
+  };
+
+  return {
+    users,
+    posts,
+    profiles,
+    handleUserClick,
+    handlePostClick,
+    handleProfileClick,
+  };
+}

package/react-demo-app/src/index.css

@@ -0,0 +1,26 @@
+
+/* Reset and base styles */
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+}
+
+#root {
+  width: 100%;
+  min-height: 100vh;
+}
+
+/* Custom styles */
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

package/react-demo-app/src/main.tsx

@@ -0,0 +1,18 @@
+import './index.css';
+
+import {
+ createTheme,CssBaseline, ThemeProvider,
+} from '@mui/material';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App.tsx';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ThemeProvider theme={createTheme()}>
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
+  </StrictMode>,
+);

package/react-demo-app/src/migrations/001-add-user-email-index.ts

@@ -0,0 +1,17 @@
+import type { Migration } from '../../../src/types';
+
+export const addUserEmailIndex: Migration = {
+  version: 1,
+  name: 'add-user-email-index',
+  up: async () => {
+    console.log('Adding email index to users table...');
+    // This migration would add an index to the email field
+    // In a real scenario, you might need to recreate the table with the new index
+    console.log('Email index added successfully');
+  },
+  down: async () => {
+    console.log('Removing email index from users table...');
+    // This would remove the index
+    console.log('Email index removed successfully');
+  },
+};

package/react-demo-app/src/migrations/002-add-post-category.ts

@@ -0,0 +1,37 @@
+import type { Migration } from '../../../src/types';
+
+export const addPostCategory: Migration = {
+  version: 2,
+  name: 'add-post-category',
+  up: async (db) => {
+  console.log('Adding category field to posts table...');
+
+    const posts = await db.table('posts').toArray();
+    const updatedPosts = posts.map((post: Record<string, unknown>) => ({
+      ...post,
+      category: 'general',
+    }));
+
+    const postsRepo = db.table('posts');
+    await postsRepo.clear();
+    await postsRepo.bulkAdd(updatedPosts);
+
+    console.log('Category field added to all existing posts');
+  },
+  down: async (db) => {
+    console.log('Removing category field from posts table...');
+
+    const posts = await db.table('posts').toArray();
+    const updatedPosts = posts
+    .map(({ _category, ...post }: Record<string, unknown>) => {
+
+      return post;
+    });
+
+    const postsRepo = db.table('posts');
+    await postsRepo.clear();
+    await postsRepo.bulkAdd(updatedPosts);
+
+    console.log('Category field removed from all posts');
+  },
+};

package/react-demo-app/src/migrations/index.ts

@@ -0,0 +1,8 @@
+import type { Migration } from '../../../src/types';
+import { addUserEmailIndex } from './001-add-user-email-index';
+import { addPostCategory } from './002-add-post-category';
+
+export const migrations: Migration[] = [
+  addUserEmailIndex,
+  addPostCategory,
+];

package/react-demo-app/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/react-demo-app/tsconfig.app.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/react-demo-app/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" }
+  ]
+}

package/react-demo-app/vite.config.ts

@@ -0,0 +1,10 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    dedupe: ['dexie'],
+  },
+});