@indexeddb-orm/idb-orm 0.0.1

package/vue-demo-app/src/components/PostsLiveQueryDemo.vue

@@ -0,0 +1,136 @@
+<template>
+  <v-card
+    variant="outlined"
+    class="my-4"
+    style="border: 2px solid #9c27b0; background-color: #faf5ff;"
+  >
+    <v-card-title class="d-flex align-center">
+      <v-icon class="mr-2" color="primary">mdi-code-json</v-icon>
+      Posts useLiveQuery Demo
+    </v-card-title>
+    <v-card-text>
+      <v-btn
+        color="purple"
+        variant="elevated"
+        @click="addSamplePost"
+        class="mb-4"
+      >
+        Add sample post
+      </v-btn>
+
+      <v-row>
+        <v-col cols="12" md="4">
+          <v-card variant="outlined" class="h-100">
+            <v-card-title class="d-flex align-center">
+              <v-icon class="mr-2" color="primary">mdi-chart-bar</v-icon>
+              Statistics
+            </v-card-title>
+            <v-card-text>
+              <div v-if="postStats">
+                <p><strong>Total posts:</strong> {{ postStats.total }}</p>
+                <p><strong>Published:</strong> {{ postStats.published }}</p>
+                <p><strong>Total likes:</strong> {{ postStats.totalLikes }}</p>
+              </div>
+              <div v-else>
+                <p>Loading statistics...</p>
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-col>
+
+        <v-col cols="12" md="4">
+          <v-card variant="outlined" class="h-100">
+            <v-card-title class="d-flex align-center">
+              <v-icon class="mr-2" color="primary">mdi-trending-up</v-icon>
+              Top 3 posts
+            </v-card-title>
+            <v-card-text>
+              <div v-if="topPosts && topPosts.length > 0">
+                <v-card
+                  v-for="(post, index) in topPosts"
+                  :key="post.id"
+                  variant="outlined"
+                  class="mb-2 pa-2"
+                >
+                  <strong>#{{ index + 1 }}</strong> {{ post.title }}
+                  <span style="color: #9c27b0"> ❤️ {{ post.likes }}</span>
+                </v-card>
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-col>
+
+        <v-col cols="12" md="4">
+          <v-card variant="outlined" class="h-100">
+            <v-card-title>Published posts</v-card-title>
+            <v-card-text>
+              <div v-if="publishedPosts && publishedPosts.length > 0" class="overflow-y-auto" style="max-height: 150px;">
+                <div
+                  v-for="post in publishedPosts"
+                  :key="post.id"
+                  class="py-1 border-b text-caption"
+                >
+                  <strong>{{ post.title }}</strong> ❤️ {{ post.likes }}
+                </div>
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+
+      <div v-if="allPosts && allPosts.length > 0" class="mt-4">
+        <h3 class="d-flex align-center mb-2">
+          <v-icon class="mr-2" color="primary">mdi-format-list-bulleted</v-icon>
+          All posts (newest first)
+        </h3>
+        <v-card variant="outlined" class="overflow-y-auto" style="max-height: 200px;">
+          <v-card-text>
+            <div
+              v-for="post in allPosts"
+              :key="post.id"
+              class="py-2 border-b text-caption"
+            >
+              <div class="d-flex justify-space-between align-center">
+                <div>
+                  <strong>{{ post.title }}</strong>
+                  <v-chip
+                    :color="post.published ? 'success' : 'warning'"
+                    size="x-small"
+                    class="ml-2"
+                  >
+                    {{ post.published ? 'Published' : 'Draft' }}
+                  </v-chip>
+                </div>
+                <div style="color: #9c27b0">❤️ {{ post.likes }}</div>
+              </div>
+              <div class="text-medium-emphasis mt-1">
+                {{ post.content?.substring(0, 100) }}...
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </div>
+
+      <v-alert
+        type="info"
+        variant="tonal"
+        class="mt-4"
+        prepend-icon="mdi-lightbulb"
+      >
+        <strong>Note:</strong> All data updates automatically! Add a post and see how all sections refresh in real time.
+      </v-alert>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { usePostsLiveQueryDemo } from '../services/usePostsLiveQueryDemo';
+
+const {
+  allPosts,
+  publishedPosts,
+  topPosts,
+  postStats,
+  addSamplePost,
+} = usePostsLiveQueryDemo();
+</script>

package/vue-demo-app/src/components/TypeScriptDemo.vue

@@ -0,0 +1,133 @@
+<template>
+  <v-card
+    variant="outlined"
+    class="my-4"
+    style="border: 2px solid #ff9800; background-color: #fff8e1;"
+  >
+    <v-card-title class="d-flex align-center">
+      <v-icon class="mr-2" color="primary">mdi-code-tags</v-icon>
+      TypeScript Typing Test
+    </v-card-title>
+    <v-card-text>
+      <p class="text-body-2 text-medium-emphasis mb-4">
+        <strong>Instructions:</strong>
+        Hover over the variables below in your IDE and
+        verify TypeScript shows full types! Click items to
+        see auto-complete in the console.
+      </p>
+
+      <v-row>
+        <v-col cols="12" md="4">
+          <v-card variant="outlined" class="h-100">
+            <v-card-title class="d-flex align-center">
+              <v-icon class="mr-2" color="primary">mdi-account-group</v-icon>
+              Users (UserEntity[])
+            </v-card-title>
+            <v-card-text>
+              <p class="text-caption text-medium-emphasis mb-2">
+                Type: <code>UserEntity[] | undefined</code>
+              </p>
+              <v-card v-if="users && users.length > 0" variant="outlined" class="overflow-y-auto" style="max-height: 150px;">
+                <v-card-text>
+                  <div
+                    v-for="user in users"
+                    :key="user.id"
+                    @click="handleUserClick(user)"
+                    class="py-1 border-b cursor-pointer hover:bg-grey-lighten-4"
+                    title="Click to see auto-complete in the console"
+                  >
+                    <strong>{{ user.name }}</strong> - {{ user.email }}
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-card-text>
+          </v-card>
+        </v-col>
+
+        <v-col cols="12" md="4">
+          <v-card variant="outlined" class="h-100">
+            <v-card-title class="d-flex align-center">
+              <v-icon class="mr-2" color="primary">mdi-file-document</v-icon>
+              Posts (PostEntity[])
+            </v-card-title>
+            <v-card-text>
+              <p class="text-caption text-medium-emphasis mb-2">
+                Type: <code>PostEntity[] | undefined</code>
+              </p>
+              <v-card v-if="posts && posts.length > 0" variant="outlined" class="overflow-y-auto" style="max-height: 150px;">
+                <v-card-text>
+                  <div
+                    v-for="post in posts"
+                    :key="post.id"
+                    @click="handlePostClick(post)"
+                    class="py-1 border-b cursor-pointer hover:bg-grey-lighten-4"
+                    title="Click to see auto-complete in the console"
+                  >
+                    <strong>{{ post.title }}</strong> - {{ post.published ? 'Published' : 'Draft' }}
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-card-text>
+          </v-card>
+        </v-col>
+
+        <v-col cols="12" md="4">
+          <v-card variant="outlined" class="h-100">
+            <v-card-title class="d-flex align-center">
+              <v-icon class="mr-2" color="primary">mdi-account-circle</v-icon>
+              Profiles (ProfileEntity[])
+            </v-card-title>
+            <v-card-text>
+              <p class="text-caption text-medium-emphasis mb-2">
+                Type: <code>ProfileEntity[] | undefined</code>
+              </p>
+              <v-card v-if="profiles && profiles.length > 0" variant="outlined" class="overflow-y-auto" style="max-height: 150px;">
+                <v-card-text>
+                  <div
+                    v-for="profile in profiles"
+                    :key="profile.id"
+                    @click="handleProfileClick(profile)"
+                    class="py-1 border-b cursor-pointer hover:bg-grey-lighten-4"
+                    title="Click to see auto-complete in the console"
+                  >
+                    <strong>User {{ profile.userId }}</strong> -
+                    {{ profile.bio?.substring(0, 30) }}...
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+
+      <v-card variant="outlined" class="mt-4" color="primary">
+        <v-card-text>
+          <div class="text-body-2 text-medium-emphasis">
+            <div class="font-weight-bold">IDE Test:</div>
+            <br />
+            1. Hover over variables <code>users</code>, <code>posts</code>, <code>profiles</code>
+            <br />
+            2. Verify TypeScript shows full types: (UserEntity[], PostEntity[], ProfileEntity[])
+            <br />
+            3. Click items to see auto-complete inside handle* functions
+            <br />
+            4. Check that IDE suggests properties like <code>user.name</code>, <code>post.title</code>, <code>profile.bio</code>
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { useTypeScriptDemo } from '../services/useTypeScriptDemo';
+
+const {
+  users,
+  posts,
+  profiles,
+  handleUserClick,
+  handlePostClick,
+  handleProfileClick,
+} = useTypeScriptDemo();
+</script>

package/vue-demo-app/src/database/Database.ts

@@ -0,0 +1,29 @@
+import { Database } from 'idb-orm';
+
+import { PostEntity } from '../entities/Post';
+import { PostTagEntity } from '../entities/PostTag';
+import { ProfileEntity } from '../entities/Profile';
+import { TagEntity } from '../entities/Tag';
+import { UserEntity } from '../entities/User';
+import { migrations } from '../migrations';
+
+// Create database with entity registration
+export const db = Database.createDatabase({
+  name: 'DexieORMDemo',
+  version: 6,
+  entities: [UserEntity, PostEntity, ProfileEntity, TagEntity, PostTagEntity],
+  config: {
+    // This will be ignored when migrations are provided
+    // onSchemaChangeStrategy: 'selective',
+    migrations: migrations, // Migrations take priority over reset strategy
+
+    // Cloud sync configuration (optional)
+    // cloudSync: {
+    //   databaseUrl: 'https://your-database-url.dexie.cloud', // Replace with your actual URL
+    //   enableOfflineSupport: true,
+    //   syncInterval: 30000, // Sync every 30 seconds (optional)
+    //   tables: ['users', 'posts', 'profiles'] // Specific tables to sync
+    //   (optional - syncs all if empty)
+    // }
+  },
+});

package/vue-demo-app/src/entities/Post.ts

@@ -0,0 +1,48 @@
+import {
+ BaseEntity, defineEntity,
+} from 'idb-orm';
+import { z } from 'zod';
+
+import type { TagEntity } from './Tag';
+
+const PostSchema = z.object({
+  id: z.number().optional(),
+  title: z.string().min(1, 'Title is required'),
+  content: z.string().min(1, 'Content is required'),
+  authorId: z.number().positive('Author ID must be positive'),
+  published: z.boolean().optional(),
+  postTags: z.array(z.string()).optional(),
+  likes: z.number().min(0, 'Likes must be non-negative').optional(),
+  createdAt: z.number().optional(),
+  updatedAt: z.number().optional(),
+});
+
+export class PostEntity extends BaseEntity<number> {
+  title!: string;
+  content!: string;
+  authorId!: number;
+  published?: boolean;
+  postTags?: string[];
+  likes?: number;
+  createdAt?: number;
+  updatedAt?: number;
+  tags?: TagEntity[];
+}
+
+defineEntity(PostEntity, {
+  tableName: 'posts',
+  schema: PostSchema,
+  columns: {
+    title: { required: true, indexed: true },
+    content: { required: true },
+    authorId: { required: true, indexed: true },
+    published: { default: false, indexed: true },
+    postTags: {},
+    likes: { default: 0, indexed: true },
+    createdAt: { default: () => Date.now(), indexed: true },
+    updatedAt: { default: () => Date.now() },
+  },
+  relations: {
+    tags: { type: 'many-to-many', target: 'tags', joinTable: 'post_tags' },
+  },
+});

package/vue-demo-app/src/entities/PostTag.ts

@@ -0,0 +1,24 @@
+import {
+ BaseEntity, defineEntity,
+} from 'idb-orm';
+import { z } from 'zod';
+
+const PostTagSchema = z.object({
+  id: z.number().optional(),
+  sourceId: z.number(),
+  targetId: z.number(),
+});
+
+export class PostTagEntity extends BaseEntity<number> {
+  sourceId!: number;
+  targetId!: number;
+}
+
+defineEntity(PostTagEntity, {
+  tableName: 'post_tags',
+  schema: PostTagSchema,
+  columns: {
+    sourceId: { indexed: true },
+    targetId: { indexed: true },
+  },
+});

package/vue-demo-app/src/entities/Profile.ts

@@ -0,0 +1,41 @@
+import {
+ BaseEntity, defineEntity,
+} from 'idb-orm';
+import { z } from 'zod';
+
+const ProfileSchema = z.object({
+  id: z.number().optional(),
+  userId: z.number().positive('User ID must be positive'),
+  bio: z.string().optional(),
+  avatar: z.string().url().optional(),
+  website: z.string().url().optional(),
+  location: z.string().optional(),
+  createdAt: z.number(),
+  updatedAt: z.number(),
+});
+
+export type Profile = z.infer<typeof ProfileSchema>;
+
+export class ProfileEntity extends BaseEntity<number> {
+  userId!: number;
+  bio?: string;
+  avatar?: string;
+  website?: string;
+  location?: string;
+  createdAt!: number;
+  updatedAt!: number;
+}
+
+defineEntity(ProfileEntity, {
+  tableName: 'profiles',
+  schema: ProfileSchema,
+  columns: {
+    userId: { indexed: true },
+    bio: { indexed: true },
+    avatar: {},
+    website: {},
+    location: {},
+    createdAt: { indexed: true },
+    updatedAt: { indexed: true },
+  },
+});

package/vue-demo-app/src/entities/Tag.ts

@@ -0,0 +1,35 @@
+import {
+ BaseEntity, defineEntity,
+} from 'idb-orm';
+import { z } from 'zod';
+
+const TagSchema = z.object({
+  id: z.number().optional(),
+  name: z.string().min(1, 'Tag name is required'),
+  color: z.string().regex(/^#[0-9A-F]{6}$/i, 'Color must be a valid hex color'),
+  description: z.string().optional(),
+  createdAt: z.number(),
+  updatedAt: z.number(),
+});
+
+export type Tag = z.infer<typeof TagSchema>;
+
+export class TagEntity extends BaseEntity<number> {
+  name!: string;
+  color!: string;
+  description?: string;
+  createdAt!: number;
+  updatedAt!: number;
+}
+
+defineEntity(TagEntity, {
+  tableName: 'tags',
+  schema: TagSchema,
+  columns: {
+    name: { required: true, unique: true, indexed: true },
+    color: { required: true },
+    description: {},
+    createdAt: { indexed: true },
+    updatedAt: { indexed: true },
+  },
+});

package/vue-demo-app/src/entities/User.ts

@@ -0,0 +1,61 @@
+import {
+ BaseEntity, defineEntity,
+} from 'idb-orm';
+import { z } from 'zod';
+
+import type { PostEntity } from './Post';
+import type { ProfileEntity } from './Profile';
+
+// Zod schema for validation
+export const UserSchema = z.object({
+  id: z.number().optional(),
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+  email: z.string().email('Invalid email format'),
+  age: z.number().min(18, 'Must be at least 18 years old'),
+  createdAt: z.number(),
+  updatedAt: z.number(),
+  isActive: z.boolean().default(true),
+  tags: z.array(z.string()).default([]),
+  metadata: z.record(z.string(), z.unknown()).default({}),
+  // Note: '
+  // posts' and 'profile' relations are not in schema - they're loaded separately
+});
+
+export type User = z.infer<typeof UserSchema>;
+
+export class UserEntity extends BaseEntity<number> {
+  name!: string;
+  email!: string;
+  age!: number;
+  createdAt!: number;
+  updatedAt!: number;
+  isActive!: boolean;
+  tags!: string[];
+  metadata!: Record<string, unknown>;
+  posts?: PostEntity[];
+  profile?: ProfileEntity;
+}
+
+defineEntity(UserEntity, {
+  tableName: 'users',
+  schema: UserSchema,
+  columns: {
+    name: { required: true, indexed: true },
+    email: { required: true, unique: true },
+    age: { indexed: true },
+    createdAt: { indexed: true },
+    updatedAt: { indexed: true },
+    isActive: { indexed: true },
+    tags: {},
+    metadata: { indexed: true },
+  },
+  compoundIndexes: [
+    { columns: ['name', 'email'], unique: false, name: 'name_email_index' },
+    { columns: ['age', 'isActive'], unique: false, name: 'age_active_index' },
+    { columns: ['email'], unique: true, name: 'unique_email_index' },
+  ],
+  relations: {
+    posts: { type: 'one-to-many', target: 'posts', foreignKey: 'authorId' },
+    profile: { type: 'one-to-one', target: 'profiles', foreignKey: 'userId' },
+  },
+});

package/vue-demo-app/src/main.ts

@@ -0,0 +1,29 @@
+import 'vuetify/styles';
+import '@mdi/font/css/materialdesignicons.css';
+
+import { createApp } from 'vue';
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+import {
+ aliases, mdi,
+} from 'vuetify/iconsets/mdi';
+
+import App from './App.vue';
+
+const vuetify = createVuetify({
+  components,
+  directives,
+  icons: {
+    defaultSet: 'mdi',
+    aliases,
+    sets: {
+      mdi,
+    },
+  },
+  theme: {
+    defaultTheme: 'light',
+  },
+});
+
+createApp(App).use(vuetify).mount('#app');

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

@@ -0,0 +1,23 @@
+// Migration type definition
+interface Migration {
+  version: number;
+  name: string;
+  up: () => Promise<void>;
+  down: () => Promise<void>;
+}
+
+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/vue-demo-app/src/migrations/002-add-post-category.ts

@@ -0,0 +1,46 @@
+// Migration type definition
+interface Migration {
+  version: number;
+  name: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  up: (_db: any) => Promise<void>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  down: (_db: any) => Promise<void>;
+}
+
+export const addPostCategory: Migration = {
+  version: 2,
+  name: 'add-post-category',
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  up: async (_db: any) => {
+    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');
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  down: async (_db: any) => {
+    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/vue-demo-app/src/migrations/index.ts

@@ -0,0 +1,14 @@
+// Migration type definition
+interface Migration {
+  version: number;
+  name: string;
+  up: (db?: any) => Promise<void>;
+  down: (db?: any) => Promise<void>;
+}
+import { addUserEmailIndex } from './001-add-user-email-index';
+import { addPostCategory } from './002-add-post-category';
+
+export const migrations: Migration[] = [
+  addUserEmailIndex,
+  addPostCategory,
+];