@indexeddb-orm/idb-orm 0.0.1

package/svelte-demo-app/src/components/MainInfo.svelte

@@ -0,0 +1,133 @@
+<div class="card">
+  <div class="card-header">
+    <h2>
+      <span class="icon">🔄</span>
+      Dexie ORM for IndexedDB — Overview
+    </h2>
+  </div>
+  <div class="card-content">
+    <p class="description">
+      TypeScript ORM built on the latest Dexie 4 with first-class type safety and Zod runtime validation.
+    </p>
+    <div class="features-grid">
+      <div class="feature-item">
+        <span class="feature-icon">💻</span>
+        <span><strong>Entity config</strong> via defineEntity()</span>
+      </div>
+      <div class="feature-item">
+        <span class="feature-icon">🗄️</span>
+        <span><strong>Automatic schema</strong> with PK, indexes, unique</span>
+      </div>
+      <div class="feature-item">
+        <span class="feature-icon">👥</span>
+        <span><strong>Relations</strong> with helpers</span>
+      </div>
+      <div class="feature-item">
+        <span class="feature-icon">🧪</span>
+        <span><strong>Zod validation</strong> at runtime</span>
+      </div>
+      <div class="feature-item">
+        <span class="feature-icon">📊</span>
+        <span><strong>Aggregations</strong> (count, avg, sum)</span>
+      </div>
+      <div class="feature-item">
+        <span class="feature-icon">📈</span>
+        <span><strong>Live queries</strong> with useLiveQuery()</span>
+      </div>
+      <div class="feature-item">
+        <span class="feature-icon">🔷</span>
+        <span><strong>TypeScript</strong> full type safety</span>
+      </div>
+      <div class="feature-item">
+        <span class="feature-icon">☁️</span>
+        <span><strong>Cloud sync</strong> with Dexie Cloud</span>
+      </div>
+    </div>
+    
+    <div class="divider"></div>
+    
+    <a 
+      href="https://github.com/radommaciej/indexed-db-orm/blob/main/README.md" 
+      target="_blank" 
+      rel="noopener noreferrer"
+      class="doc-link"
+    >
+      📖 View full documentation
+    </a>
+  </div>
+</div>
+
+<style>
+  .card {
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    background: white;
+  }
+
+  .card-header {
+    padding: 16px;
+    border-bottom: 1px solid #eee;
+  }
+
+  .card-header h2 {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 1.25rem;
+    color: #1976d2;
+  }
+
+  .card-content {
+    padding: 16px;
+  }
+
+  .description {
+    color: #666;
+    margin-bottom: 16px;
+    font-size: 0.9rem;
+  }
+
+  .features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  .feature-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.9rem;
+  }
+
+  .feature-icon {
+    font-size: 1rem;
+  }
+
+  .divider {
+    height: 1px;
+    background: #eee;
+    margin: 16px 0;
+  }
+
+  .doc-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 16px;
+    border: 1px solid #1976d2;
+    border-radius: 4px;
+    color: #1976d2;
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition: all 0.2s;
+  }
+
+  .doc-link:hover {
+    background: #1976d2;
+    color: white;
+  }
+</style>

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

@@ -0,0 +1,330 @@
+<script>
+  import { getContext } from 'svelte';
+  import { onMount } from 'svelte';
+  import { loadLiveQueryData } from '../stores/appStore.js';
+  import { db } from '$lib/database/Database';
+  import { newEntity } from '../../../src/services/EntityFactory';
+  import { PostEntity } from '$lib/entities/Post';
+
+  const allPosts = getContext('allPosts');
+  const postStats = getContext('postStats');
+
+  let publishedPosts = [];
+  let topPosts = [];
+
+  onMount(() => {
+    loadLiveQueryData();
+    loadPostsData();
+    // Refresh data every second for live updates
+    const interval = setInterval(() => {
+      loadLiveQueryData();
+      loadPostsData();
+    }, 1000);
+    return () => clearInterval(interval);
+  });
+
+  async function loadPostsData() {
+    if (!db) return;
+    try {
+      // Published posts
+      publishedPosts = await db.getRepository(PostEntity).where('published').equals(1).toArray();
+      
+      // Most liked posts
+      topPosts = await db.getRepository(PostEntity).orderBy('likes').reverse().limit(3).toArray();
+    } catch (error) {
+      console.error('Error loading posts data:', error);
+    }
+  }
+
+  async function addSamplePost() {
+    if (!db) return;
+    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 loadPostsData();
+    } catch (error) {
+      console.error('Error adding post:', error);
+    }
+  }
+</script>
+
+<div class="card posts-demo">
+  <div class="card-header">
+    <h2>
+      <span class="icon">📊</span>
+      Posts useLiveQuery Demo
+    </h2>
+  </div>
+  <div class="card-content">
+    <button on:click={addSamplePost} class="add-post-btn">
+      Add sample post
+    </button>
+
+    <div class="demo-grid">
+      <div class="demo-section">
+        <div class="section-header">
+          <span class="icon">📊</span>
+          <h3>Statistics</h3>
+        </div>
+        {#if $postStats}
+          <div class="stats">
+            <div><strong>Total posts:</strong> {$postStats.total}</div>
+            <div><strong>Published:</strong> {$postStats.published}</div>
+            <div><strong>Total likes:</strong> {$postStats.totalLikes}</div>
+          </div>
+        {:else}
+          <div>Loading statistics...</div>
+        {/if}
+      </div>
+
+      <div class="demo-section">
+        <div class="section-header">
+          <span class="icon">📈</span>
+          <h3>Top 3 posts</h3>
+        </div>
+        {#if topPosts && topPosts.length > 0}
+          <div class="top-posts">
+            {#each topPosts as post, index}
+              <div class="top-post">
+                <strong>#{index + 1}</strong> {post.title}
+                <span class="likes">❤️ {post.likes}</span>
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+
+      <div class="demo-section">
+        <div class="section-header">
+          <span class="icon">📄</span>
+          <h3>Published posts</h3>
+        </div>
+        {#if publishedPosts && publishedPosts.length > 0}
+          <div class="published-posts">
+            {#each publishedPosts as post}
+              <div class="published-post">
+                <strong>{post.title}</strong> ❤️ {post.likes}
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    </div>
+
+    {#if $allPosts && $allPosts.length > 0}
+      <div class="all-posts-section">
+        <div class="section-header">
+          <span class="icon">📋</span>
+          <h3>All posts (newest first)</h3>
+        </div>
+        <div class="all-posts">
+          {#each $allPosts as post}
+            <div class="post-item">
+              <div class="post-header">
+                <div class="post-title-section">
+                  <strong>{post.title}</strong>
+                  <span class="status {post.published ? 'published' : 'draft'}">
+                    {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>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    <div class="info-card">
+      <span class="icon">💡</span>
+      <strong>Note:</strong> All data updates automatically! Add a post and see how all sections refresh in real time.
+    </div>
+  </div>
+</div>
+
+<style>
+  .card {
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    margin: 16px 0;
+    background: white;
+  }
+
+  .posts-demo {
+    border: 2px solid #9c27b0;
+    background: #faf5ff;
+  }
+
+  .card-header {
+    padding: 16px;
+    border-bottom: 1px solid #eee;
+  }
+
+  .card-header h2 {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 1.25rem;
+    color: #1976d2;
+  }
+
+  .card-content {
+    padding: 16px;
+  }
+
+  .add-post-btn {
+    background: #9c27b0;
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    margin-bottom: 16px;
+    transition: background-color 0.2s;
+  }
+
+  .add-post-btn:hover {
+    background: #7b1fa2;
+  }
+
+  .demo-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+
+  .demo-section {
+    border: 1px solid #eee;
+    border-radius: 4px;
+    padding: 12px;
+    background: #fafafa;
+  }
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+    color: #1976d2;
+  }
+
+  .section-header h3 {
+    margin: 0;
+    font-size: 1rem;
+  }
+
+  .stats {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 0.9rem;
+  }
+
+  .top-posts, .published-posts {
+    max-height: 150px;
+    overflow-y: auto;
+  }
+
+  .top-post, .published-post {
+    padding: 8px;
+    margin: 4px 0;
+    background: white;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    font-size: 0.9rem;
+  }
+
+  .likes {
+    color: #9c27b0;
+    margin-left: 8px;
+  }
+
+  .all-posts-section {
+    margin-top: 16px;
+  }
+
+  .all-posts {
+    max-height: 200px;
+    overflow-y: auto;
+    background: white;
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+  }
+
+  .post-item {
+    padding: 8px 0;
+    border-bottom: 1px solid #eee;
+    font-size: 0.9rem;
+  }
+
+  .post-item:last-child {
+    border-bottom: none;
+  }
+
+  .post-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+  }
+
+  .post-title-section {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .status {
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 0.8rem;
+  }
+
+  .status.published {
+    background: #4caf50;
+    color: white;
+  }
+
+  .status.draft {
+    background: #ff9800;
+    color: white;
+  }
+
+  .post-likes {
+    color: #9c27b0;
+  }
+
+  .post-content {
+    color: #666;
+    font-size: 0.8rem;
+    margin-top: 2px;
+  }
+
+  .info-card {
+    background: #fff3e0;
+    border: 1px solid #ffb74d;
+    border-radius: 4px;
+    padding: 12px;
+    margin-top: 16px;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+</style>

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

@@ -0,0 +1,251 @@
+<script>
+  import { getContext } from 'svelte';
+  import { onMount } from 'svelte';
+  import { loadLiveQueryData } from '../stores/appStore.js';
+
+  const allUsers = getContext('allUsers');
+  const allPosts = getContext('allPosts');
+  const allProfiles = getContext('allProfiles');
+
+  onMount(() => {
+    loadLiveQueryData();
+  });
+
+  // Test functions - TypeScript should suggest properties
+  function handleUserClick(user) {
+    // 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);
+  }
+
+  function handlePostClick(post) {
+    // IDE should suggest: post.id, post.title, post.content, post.published, post.likes, etc.
+    console.log('Post clicked:', post.title, post.published, post.likes);
+  }
+
+  function handleProfileClick(profile) {
+    // IDE should suggest: profile.id, profile.userId, profile.bio, profile.avatar, etc.
+    console.log('Profile clicked:', profile.bio, profile.website);
+  }
+</script>
+
+<div class="card typescript-demo">
+  <div class="card-header">
+    <h2>
+      <span class="icon">💻</span>
+      TypeScript Typing Test
+    </h2>
+  </div>
+  <div class="card-content">
+    <p class="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">
+        <div class="section-header">
+          <span class="icon">👥</span>
+          <h3>Users (UserEntity[])</h3>
+        </div>
+        <p class="type-info">Type: <code>UserEntity[] | undefined</code></p>
+        {#if $allUsers && $allUsers.length > 0}
+          <div class="items-list">
+            {#each $allUsers as user}
+              <div 
+                class="item" 
+                on:click={() => handleUserClick(user)}
+                title="Click to see auto-complete in the console"
+              >
+                <strong>{user.name}</strong> - {user.email}
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+
+      <div class="demo-section">
+        <div class="section-header">
+          <span class="icon">📄</span>
+          <h3>Posts (PostEntity[])</h3>
+        </div>
+        <p class="type-info">Type: <code>PostEntity[] | undefined</code></p>
+        {#if $allPosts && $allPosts.length > 0}
+          <div class="items-list">
+            {#each $allPosts as post}
+              <div 
+                class="item" 
+                on:click={() => handlePostClick(post)}
+                title="Click to see auto-complete in the console"
+              >
+                <strong>{post.title}</strong> - {post.published ? 'Published' : 'Draft'}
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+
+      <div class="demo-section">
+        <div class="section-header">
+          <span class="icon">👤</span>
+          <h3>Profiles (ProfileEntity[])</h3>
+        </div>
+        <p class="type-info">Type: <code>ProfileEntity[] | undefined</code></p>
+        {#if $allProfiles && $allProfiles.length > 0}
+          <div class="items-list">
+            {#each $allProfiles as profile}
+              <div 
+                class="item" 
+                on:click={() => handleProfileClick(profile)}
+                title="Click to see auto-complete in the console"
+              >
+                <strong>User {profile.userId}</strong> - {profile.bio?.substring(0, 30)}...
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    </div>
+
+    <div class="info-card">
+      <div class="info-text">
+        <div class="font-weight-bold">IDE Test:</div>
+        <br />
+        1. Hover over variables <code>allUsers</code>, <code>allPosts</code>, <code>allProfiles</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>
+    </div>
+  </div>
+</div>
+
+<style>
+  .card {
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    margin: 16px 0;
+    background: white;
+  }
+
+  .typescript-demo {
+    border: 2px solid #ff9800;
+    background: #fff8e1;
+  }
+
+  .card-header {
+    padding: 16px;
+    border-bottom: 1px solid #eee;
+  }
+
+  .card-header h2 {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 1.25rem;
+    color: #1976d2;
+  }
+
+  .card-content {
+    padding: 16px;
+  }
+
+  .description {
+    color: #666;
+    margin-bottom: 16px;
+    font-size: 0.9rem;
+  }
+
+  .demo-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+
+  .demo-section {
+    border: 1px solid #eee;
+    border-radius: 4px;
+    padding: 12px;
+    background: #fafafa;
+  }
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    color: #1976d2;
+  }
+
+  .section-header h3 {
+    margin: 0;
+    font-size: 1rem;
+  }
+
+  .type-info {
+    font-size: 0.8rem;
+    color: #666;
+    margin-bottom: 8px;
+  }
+
+  .type-info code {
+    background: #f0f0f0;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: monospace;
+  }
+
+  .items-list {
+    max-height: 150px;
+    overflow-y: auto;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    padding: 8px;
+  }
+
+  .item {
+    padding: 4px 0;
+    border-bottom: 1px solid #eee;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: background-color 0.2s;
+  }
+
+  .item:hover {
+    background-color: #f5f5f5;
+  }
+
+  .item:last-child {
+    border-bottom: none;
+  }
+
+  .info-card {
+    background: #e3f2fd;
+    border: 1px solid #1976d2;
+    border-radius: 4px;
+    padding: 12px;
+    font-size: 0.9rem;
+  }
+
+  .info-text {
+    color: #666;
+  }
+
+  .font-weight-bold {
+    font-weight: bold;
+  }
+
+  code {
+    background: #f0f0f0;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: monospace;
+    font-size: 0.85rem;
+  }
+</style>