@indexeddb-orm/idb-orm 0.0.1

package/vue-demo-app/src/services/useLiveQueryDemo.ts

@@ -0,0 +1,82 @@
+import {
+ onMounted,ref,
+} from 'vue';
+
+import { db } from '../database/Database';
+import { PostEntity } from '../entities/Post';
+import { ProfileEntity } from '../entities/Profile';
+import { UserEntity } from '../entities/User';
+
+export function useLiveQueryDemo() {
+  const allUsers = ref<UserEntity[] | undefined>(undefined);
+  const adultUsers = ref<UserEntity[] | undefined>(undefined);
+  const userCount = ref<number | undefined>(undefined);
+  const firstUser = ref<UserEntity | undefined>(undefined);
+  const usersWithProfiles = ref<Array<UserEntity
+  & { profile?: ProfileEntity }> | undefined>(undefined);
+  const allPosts = ref<PostEntity[] | undefined>(undefined);
+  const allProfiles = ref<ProfileEntity[] | undefined>(undefined);
+
+  const loadData = async () => {
+    try {
+      // Load all users
+      allUsers.value = await db.table('users').toArray();
+
+      // Load adult users
+      adultUsers.value = await db.getRepository(UserEntity).where('age').above(18).toArray();
+
+      // Load user count
+      userCount.value = await db.getRepository(UserEntity).count();
+
+      // Load first user
+      firstUser.value = await db.getRepository(UserEntity).orderBy('id').first();
+
+      // Load users with profiles
+      const users = await db.getRepository(UserEntity).toArray();
+      const usersWithProfilesData: Array<UserEntity
+      & { profile?: ProfileEntity }> = [];
+
+      for (const user of users) {
+        if (user.id == null) {
+          usersWithProfilesData.push(user as UserEntity
+            & { profile?: ProfileEntity });
+          continue;
+        }
+        const profile = await db
+          .getRepository(ProfileEntity)
+          .where('userId')
+          .equals(user.id)
+          .first();
+        usersWithProfilesData.push(Object.assign(user, { profile }));
+      }
+      usersWithProfiles.value = usersWithProfilesData;
+
+      // Load all posts
+      allPosts.value = await db.getRepository(PostEntity).toArray();
+
+      // Load all profiles
+      allProfiles.value = await db.getRepository(ProfileEntity).toArray();
+    } catch (error) {
+      console.error('Error loading live query data:', error);
+    }
+  };
+
+  onMounted(() => {
+    loadData();
+  });
+
+  // Watch for changes in the database and reload data
+  // This is a simplified approach
+  // - in a real app you might want to use a more sophisticated reactivity system
+  setInterval(loadData, 1000);
+
+  return {
+    allUsers,
+    adultUsers,
+    userCount,
+    firstUser,
+    usersWithProfiles,
+    allPosts,
+    allProfiles,
+  };
+}

package/vue-demo-app/src/services/usePostsLiveQueryDemo.ts

@@ -0,0 +1,77 @@
+import { newEntity } from 'idb-orm';
+import {
+ onMounted,ref,
+} from 'vue';
+
+import { db } from '../database/Database';
+import { PostEntity } from '../entities/Post';
+
+export function usePostsLiveQueryDemo() {
+  const allPosts = ref<PostEntity[] | undefined>(undefined);
+  const publishedPosts = ref<PostEntity[] | undefined>(undefined);
+  const topPosts = ref<PostEntity[] | undefined>(undefined);
+  const postStats = ref<{
+    total: number;
+    published: number;
+    totalLikes: number;
+  } | undefined>(undefined);
+
+  const loadData = async () => {
+    try {
+      // All posts with sorting
+      allPosts.value = await db.getRepository(PostEntity).orderBy('createdAt').reverse().toArray();
+
+      // Published posts
+      publishedPosts.value = await db.getRepository(PostEntity).where('published').equals(1).toArray();
+
+      // Most liked posts
+      topPosts.value = await db.getRepository(PostEntity).orderBy('likes').reverse().limit(3).toArray();
+
+      // Post statistics
+      const total = await db.getRepository(PostEntity).count();
+      const published = await db
+        .getRepository(PostEntity)
+        .where('published')
+        .equals(1)
+        .count();
+      const allPostsData = await db.getRepository(PostEntity).toArray();
+      const totalLikes = allPostsData
+      .reduce((sum, post) => sum + (post.likes || 0), 0);
+
+      postStats.value = { total, published, totalLikes };
+    } catch (error) {
+      console.error('Error loading posts live query data:', error);
+    }
+  };
+
+  onMounted(() => {
+    loadData();
+  });
+
+  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);
+      await loadData(); // Reload data after adding
+    } catch (error) {
+      console.error('Error adding post:', error);
+    }
+  };
+
+  return {
+    allPosts,
+    publishedPosts,
+    topPosts,
+    postStats,
+    addSamplePost,
+  };
+}

package/vue-demo-app/src/services/useTypeScriptDemo.ts

@@ -0,0 +1,56 @@
+import {
+ onMounted,ref,
+} from 'vue';
+
+import { db } from '../database/Database';
+import { PostEntity } from '../entities/Post';
+import { ProfileEntity } from '../entities/Profile';
+import { UserEntity } from '../entities/User';
+
+export function useTypeScriptDemo() {
+  const users = ref<UserEntity[] | undefined>(undefined);
+  const posts = ref<PostEntity[] | undefined>(undefined);
+  const profiles = ref<ProfileEntity[] | undefined>(undefined);
+
+  const loadData = async () => {
+    try {
+      users.value = await db.getRepository(UserEntity).toArray();
+      posts.value = await db.getRepository(PostEntity).toArray();
+      profiles.value = await db.getRepository(ProfileEntity).toArray();
+    } catch (error) {
+      console.error('Error loading TypeScript demo data:', error);
+    }
+  };
+
+  onMounted(() => {
+    loadData();
+  });
+
+  // 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/vue-demo-app/src/vite-env.d.ts

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

package/vue-demo-app/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/vue-demo-app/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

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

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vuetify from 'vite-plugin-vuetify'
+import { fileURLToPath, URL } from 'node:url'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vuetify({ autoImport: true }),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})