@indexeddb-orm/idb-orm 0.0.1

package/angular-demo-app/src/app/components/posts-live-query-demo.component.ts

@@ -0,0 +1,336 @@
+import { CommonModule } from '@angular/common';
+import {
+ Component, Input,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+
+import { PostEntity } from '../../entities/post.entity';
+
+@Component({
+  selector: 'app-posts-live-query-demo',
+  standalone: true,
+  imports: [
+    CommonModule, MatButtonModule, MatCardModule, MatIconModule, MatListModule,
+  ],
+  template: `
+    <div class="posts-paper">
+      <h2 class="main-title">
+        <mat-icon color="primary" class="main-icon">data_object</mat-icon>
+        Posts useLiveQuery Demo
+      </h2>
+
+      <div class="add-button-section">
+        <button mat-stroked-button
+                (click)="addSamplePost()"
+                class="add-button">
+          Add sample post
+        </button>
+      </div>
+
+      <div class="demo-grid">
+        <div class="demo-section">
+          <h3 class="section-title">
+            <mat-icon color="primary" class="section-icon">bar_chart</mat-icon>
+            Statistics
+          </h3>
+          <div class="stats-content" *ngIf="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>
+          <p *ngIf="!postStats" class="loading-text">Loading statistics...</p>
+        </div>
+
+        <div class="demo-section">
+          <h3 class="section-title">
+            <mat-icon color="primary" class="section-icon">trending_up</mat-icon>
+            Top 3 posts
+          </h3>
+          <div class="posts-content" *ngIf="topPosts && topPosts.length > 0">
+            <div *ngFor="let post of topPosts; let i = index" class="post-card">
+              <strong>#{{ i + 1 }}</strong> {{ post.title }}
+              <span class="likes-count">❤️ {{ post.likes }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="demo-section">
+          <h3 class="section-title">Published posts</h3>
+          <div
+          class="posts-content" *ngIf="publishedPosts && publishedPosts.length > 0">
+            <div class="published-scroll">
+              <div *ngFor="let post of publishedPosts" class="published-item">
+                <strong>{{ post.title }}</strong> ❤️ {{ post.likes }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="all-posts-section" *ngIf="allPosts && allPosts.length > 0">
+        <h3 class="all-posts-title">
+          <mat-icon class="section-icon">list</mat-icon>
+          All posts (newest first)
+        </h3>
+        <div class="all-posts-content">
+          <div *ngFor="let post of allPosts" class="all-post-item">
+            <div class="post-header">
+              <div class="post-title-section">
+                <strong>{{ post.title }}</strong>
+                <span
+                class="post-status"
+                [class.published]="post.published" [class.draft]="!post.published">
+                  {{ post.published ? 'Published' : 'Draft' }}
+                </span>
+              </div>
+              <div class="post-likes">❤️ {{ post.likes }}</div>
+            </div>
+            <div class="post-content">{{ post.content?.substring(0, 100) }}...</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="note-section">
+        <p class="note-text">
+          <mat-icon class="note-icon">lightbulb</mat-icon>
+          <strong>
+          Note:
+          </strong>
+          All data updates automatically!
+          Add a post and see how all sections refresh in real time.
+        </p>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .posts-paper {
+      border: 2px solid #9c27b0;
+      padding: 24px;
+      margin: 24px 0;
+      border-radius: 8px;
+      background-color: #faf5ff;
+    }
+
+    .main-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0 0 16px 0;
+      font-size: 2rem;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .main-icon {
+      font-size: 24px;
+      width: 24px;
+      height: 24px;
+    }
+
+    .add-button-section {
+      margin-bottom: 16px;
+    }
+
+    .add-button {
+      background-color: #9c27b0;
+      color: white;
+      border: none;
+      padding: 10px 15px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 0.875rem;
+      text-transform: none !important;
+    }
+
+    .add-button:hover {
+      background-color: #7b1fa2;
+    }
+
+    .demo-grid {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 20px;
+      margin-bottom: 20px;
+      align-items: stretch;
+    }
+
+    @media (min-width: 960px) {
+      .demo-grid {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+
+    .demo-section {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0 0 12px 0;
+      font-size: 1rem;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .section-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+
+    .stats-content {
+      flex: 1;
+    }
+
+    .stats-content p {
+      margin: 0 0 8px 0;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    .loading-text {
+      flex: 1;
+      font-size: 0.875rem;
+      color: rgba(0, 0, 0, 0.6);
+    }
+
+    .posts-content {
+      flex: 1;
+    }
+
+    .post-card {
+      padding: 8px;
+      margin: 4px 0;
+      background-color: white;
+      border-radius: 4px;
+      border: 1px solid #ddd;
+      font-size: 0.875rem;
+    }
+
+    .likes-count {
+      color: #9c27b0;
+    }
+
+    .published-scroll {
+      max-height: 150px;
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    .published-item {
+      padding: 4px 0;
+      font-size: 0.9em;
+      border-bottom: 1px solid #eee;
+      font-size: 0.875rem;
+    }
+
+    .all-posts-section {
+      margin-top: 16px;
+    }
+
+    .all-posts-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0 0 16px 0;
+      font-size: 1.1rem;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .all-posts-content {
+      max-height: 200px;
+      overflow-y: auto;
+      background-color: white;
+      padding: 10px;
+      border-radius: 4px;
+      border: 1px solid #ddd;
+    }
+
+    .all-post-item {
+      padding: 8px 0;
+      border-bottom: 1px solid #eee;
+      font-size: 0.9em;
+    }
+
+    .all-post-item:last-child {
+      border-bottom: none;
+    }
+
+    .post-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 2px;
+    }
+
+    .post-title-section {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .post-status {
+      margin-left: 10px;
+      padding: 2px 6px;
+      color: white;
+      border-radius: 3px;
+      font-size: 0.8em;
+    }
+
+    .post-status.published {
+      background-color: #4caf50;
+    }
+
+    .post-status.draft {
+      background-color: #ff9800;
+    }
+
+    .post-likes {
+      color: #9c27b0;
+    }
+
+    .post-content {
+      color: #666;
+      font-size: 0.8em;
+      margin-top: 2px;
+    }
+
+    .note-section {
+      margin-top: 16px;
+    }
+
+    .note-text {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin: 0;
+      font-size: 0.875rem;
+      color: rgba(0, 0, 0, 0.6);
+    }
+
+    .note-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+  `],
+})
+export class PostsLiveQueryDemoComponent {
+  @Input() allPosts: PostEntity[] = [];
+  @Input() topPosts: PostEntity[] = [];
+  @Input() publishedPosts: PostEntity[] = [];
+  @Input() postStats: {
+    total: number;
+    published: number;
+    totalLikes: number;
+  } = { total: 0, published: 0, totalLikes: 0 };
+  @Input() addSamplePost!: () => void;
+}

package/angular-demo-app/src/app/components/typescript-demo.component.ts

@@ -0,0 +1,268 @@
+import { CommonModule } from '@angular/common';
+import {
+ Component, Input,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+
+import { PostEntity } from '../../entities/post.entity';
+import { ProfileEntity } from '../../entities/profile.entity';
+import { UserEntity } from '../../entities/user.entity';
+
+@Component({
+  selector: 'app-typescript-demo',
+  standalone: true,
+  imports: [
+    CommonModule, MatButtonModule, MatCardModule, MatIconModule, MatListModule,
+  ],
+  template: `
+    <div class="typescript-paper">
+      <h2 class="main-title">
+        <mat-icon color="primary" class="main-icon">code</mat-icon>
+        TypeScript Typing Test
+      </h2>
+      <p class="main-description">
+        <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>
+
+      <div class="demo-grid">
+        <div class="demo-section">
+          <h3 class="section-title">
+            <mat-icon color="primary" class="section-icon">people</mat-icon>
+            Users (UserEntity[])
+          </h3>
+          <div class="type-info">Typ: <code>UserEntity[] | undefined</code></div>
+          <div class="items-content" *ngIf="users && users.length > 0">
+            <div class="items-scroll">
+              <div *ngFor="let user of users"
+                   class="item-card"
+                   (click)="onUserClick(user)"
+                   title="Click to see auto-complete in the console">
+                <div class="item-text">
+                  <strong>{{ user.name }}</strong> - {{ user.email }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="demo-section">
+          <h3 class="section-title">
+            <mat-icon color="primary" class="section-icon">description</mat-icon>
+            Posts (PostEntity[])
+          </h3>
+          <div class="type-info">Typ: <code>PostEntity[] | undefined</code></div>
+          <div class="items-content" *ngIf="posts && posts.length > 0">
+            <div class="items-scroll">
+              <div *ngFor="let post of posts"
+                   class="item-card"
+                   (click)="onPostClick(post)"
+                   title="Click to see auto-complete in the console">
+                <div class="item-text">
+                  <strong>
+                  {{ post.title }}
+                   </strong> - {{ post.published ? 'Published' : 'Draft' }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="demo-section">
+          <h3 class="section-title">
+            <mat-icon color="primary" class="section-icon">account_circle</mat-icon>
+            Profiles (ProfileEntity[])
+          </h3>
+          <div class="type-info">Type: <code>ProfileEntity[] | undefined</code></div>
+          <div class="items-content" *ngIf="profiles && profiles.length > 0">
+            <div class="items-scroll">
+              <div *ngFor="let profile of profiles"
+                   class="item-card"
+                   (click)="onProfileClick(profile)"
+                   title="Click to see auto-complete in the console">
+                <div class="item-text">
+                  <strong>
+                  User {{ profile.userId }}
+                  </strong> - {{ profile.bio?.substring(0, 30) }}...
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="ide-test-section">
+        <div class="ide-test-content">
+          <p><strong>IDE Test:</strong></p>
+          <p>
+          1. Hover over variables
+          <code>users</code>, <code>posts</code>, <code>profiles</code></p>
+          <p>
+          2. Verify TypeScript shows full types:
+          (UserEntity[], PostEntity[], ProfileEntity[])</p>
+          <p>
+          3. Click items to see auto-complete inside handle* functions
+          </p>
+          <p>
+          4. Check that IDE suggests properties like
+          <code>user.name</code>, <code>post.title</code>, <code>profile.bio</code
+          ></p>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .typescript-paper {
+      border: 2px solid #ff9800;
+      padding: 24px;
+      margin: 24px 0;
+      border-radius: 8px;
+      background-color: #fff8e1;
+    }
+
+    .main-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0 0 16px 0;
+      font-size: 2rem;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .main-icon {
+      font-size: 24px;
+      width: 24px;
+      height: 24px;
+    }
+
+    .main-description {
+      color: rgba(0, 0, 0, 0.6);
+      margin: 0 0 24px 0;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    .demo-grid {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 24px;
+      align-items: stretch;
+    }
+
+    @media (min-width: 960px) {
+      .demo-grid {
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: 1fr;
+      }
+    }
+
+    .demo-section {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0 0 16px 0;
+      font-size: 1.25rem;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .section-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+
+    .type-info {
+      font-size: 0.875rem;
+      color: rgba(0, 0, 0, 0.6);
+      margin-bottom: 16px;
+    }
+
+    .type-info code {
+      background-color: #f5f5f5;
+      padding: 2px 4px;
+      border-radius: 2px;
+      font-family: 'Courier New', monospace;
+      font-size: 0.8rem;
+    }
+
+    .items-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .items-scroll {
+      max-height: 150px;
+      overflow-y: auto;
+      padding: 4px;
+    }
+
+    .item-card {
+      padding: 4px 0;
+      border-bottom: 1px solid #eee;
+      cursor: pointer;
+    }
+
+    .item-card:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+
+    .item-card:last-child {
+      border-bottom: none;
+    }
+
+    .item-text {
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    .ide-test-section {
+      margin-top: 16px;
+    }
+
+    .ide-test-content {
+      padding: 16px;
+      background-color: #e3f2fd;
+      border-radius: 4px;
+    }
+
+    .ide-test-content p {
+      margin: 0 0 8px 0;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    .ide-test-content p:last-child {
+      margin-bottom: 0;
+    }
+
+    .ide-test-content code {
+      background-color: #f5f5f5;
+      padding: 2px 4px;
+      border-radius: 2px;
+      font-family: 'Courier New', monospace;
+      font-size: 0.8rem;
+    }
+  `],
+})
+export class TypeScriptDemoComponent {
+  @Input() users: UserEntity[] = [];
+  @Input() posts: PostEntity[] = [];
+  @Input() profiles: ProfileEntity[] = [];
+  @Input() onUserClick!: (_user: UserEntity) => void;
+  @Input() onPostClick!: (_post: PostEntity) => void;
+  @Input() onProfileClick!: (_profile: ProfileEntity) => void;
+}

package/angular-demo-app/src/entities/post-tag.entity.ts

@@ -0,0 +1,25 @@
+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/angular-demo-app/src/entities/post.entity.ts

@@ -0,0 +1,49 @@
+import {
+  BaseEntity,
+  defineEntity,
+} from 'idb-orm';
+import { z } from 'zod';
+
+import type { TagEntity } from './tag.entity';
+
+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' },
+  },
+});