@indexeddb-orm/idb-orm 0.0.1

package/react-demo-app/src/components/LiveQueryDemo.tsx

@@ -0,0 +1,122 @@
+import ArticleIcon from '@mui/icons-material/Article';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import PeopleIcon from '@mui/icons-material/People';
+import PersonIcon from '@mui/icons-material/Person';
+import { Box, Paper, Stack, Typography } from '@mui/material';
+
+import { useLiveQueryDemo } from '../hooks/useLiveQueryDemo';
+
+// Component demonstrating useLiveQuery with your Dexie ORM library
+export function LiveQueryDemo() {
+  const {
+    allUsers,
+    adultUsers,
+    userCount,
+    firstUser,
+    usersWithProfiles,
+    allPosts,
+    allProfiles,
+  } = useLiveQueryDemo();
+
+  return (
+    <Paper variant="outlined" sx={{ p: 3, my: 3 }}>
+      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr 1fr' }, gridTemplateRows: { xs: 'auto', md: '1fr' }, gap: 2, alignItems: 'stretch' }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Paper variant="outlined" sx={{ p: 2, flex: 1, display: 'flex', flexDirection: 'column' }}>
+            <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <BarChartIcon color="primary" />
+              Statistics (number | undefined)
+            </Typography>
+            <Stack spacing={0.5}>
+              <Typography><strong>Total users:</strong> {userCount ?? 'Loading...'}</Typography>
+              <Typography><strong>Adult users:</strong> {adultUsers?.length ?? 'Loading...'}</Typography>
+              <Typography><strong>First user:</strong> {firstUser?.name ?? 'None'}</Typography>
+              <Typography><strong>All users (live):</strong> {allUsers?.length ?? 'Loading...'}</Typography>
+              <Typography><strong>Posts:</strong> {allPosts?.length ?? 'Loading...'}</Typography>
+              <Typography><strong>Profiles:</strong> {allProfiles?.length ?? 'Loading...'}</Typography>
+            </Stack>
+          </Paper>
+        </Box>
+
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Paper variant="outlined" sx={{ p: 2, flex: 1, display: 'flex', flexDirection: 'column' }}>
+            <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <PeopleIcon color="primary" />
+              Users with profiles (UserEntity with profile)
+            </Typography>
+            {usersWithProfiles && usersWithProfiles.length > 0 && (
+              <Stack spacing={1} sx={{ maxHeight: 200, overflowY: 'auto' }}>
+                {usersWithProfiles.map((user) => (
+                  <Paper key={user.id} variant="outlined" sx={{ p: 1.5 }}>
+                    <Typography fontWeight={600}>{user.name}</Typography>
+                    <Typography color="text.secondary" variant="body2">
+                      {user.email}
+                    </Typography>
+              {user.profile && (
+                      <Typography color="text.secondary" variant="body2">
+                  {user.profile.bio}
+                      </Typography>
+                    )}
+                  </Paper>
+                ))}
+              </Stack>
+            )}
+          </Paper>
+        </Box>
+
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Paper variant="outlined" sx={{ p: 2, flex: 1, display: 'flex', flexDirection: 'column' }}>
+            <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <PersonIcon color="primary" />
+              All users (live)
+            </Typography>
+            {allUsers && allUsers.length > 0 && (
+              <Stack spacing={1} sx={{ maxHeight: 200, overflowY: 'auto' }}>
+                {allUsers.map((u) => (
+                  <Typography key={u.id} variant="body2">
+                    <strong>{u.name}</strong> — {u.email}
+                  </Typography>
+                ))}
+              </Stack>
+            )}
+          </Paper>
+        </Box>
+      </Box>
+
+      <Box mt={3}>
+      <Typography variant="h6" gutterBottom>
+        <ArticleIcon sx={{ mr: 1, verticalAlign: 'middle' }} /> Posts (PostEntity[])
+      </Typography>
+        {allPosts && allPosts.length > 0 && (
+          <Paper variant="outlined" sx={{ p: 2, maxHeight: 180, overflowY: 'auto' }}>
+            <Stack spacing={1}>
+              {allPosts.map((post) => (
+                <Box key={post.id} sx={{ pb: 1, borderBottom: '1px solid #eee' }}>
+                  <Typography fontWeight={600}>{post.title}</Typography>
+                  <Typography color="text.secondary" variant="body2" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          {post.published ? <CheckCircleIcon fontSize="small" color="success" /> : <ArticleIcon fontSize="small" />}
+                    <FavoriteIcon fontSize="small" color="error" /> {post.likes}
+                  </Typography>
+                </Box>
+              ))}
+            </Stack>
+          </Paper>
+        )}
+      </Box>
+
+      <Paper variant="outlined" sx={{ mt: 2, p: 2, bgcolor: '#e8f5e8' }}>
+        <Typography>
+          <strong>Typing test:</strong> All variables are fully typed with TypeScript!
+        </Typography>
+        <Typography>
+          <strong>Reactivity:</strong> Data updates automatically when you add/remove records!
+        </Typography>
+        <Typography>
+          <strong>Compatibility:</strong> Your library works perfectly with useLiveQuery!
+        </Typography>
+      </Paper>
+    </Paper>
+  );
+}

package/react-demo-app/src/components/MainInfo.tsx

@@ -0,0 +1,75 @@
+import AutorenewIcon from '@mui/icons-material/Autorenew';
+import AssessmentIcon from '@mui/icons-material/Assessment';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import CloudSyncIcon from '@mui/icons-material/CloudSync';
+import CodeIcon from '@mui/icons-material/Code';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import PeopleIcon from '@mui/icons-material/People';
+import ScienceIcon from '@mui/icons-material/Science';
+import StorageIcon from '@mui/icons-material/Storage';
+import { Box, Button, Paper, Typography } from '@mui/material';
+
+export function MainInfo() {
+  return (
+    <Paper variant="outlined" sx={{ p: 2, mb: 2 }}>
+      <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <AutorenewIcon color="primary" /> Dexie ORM for IndexedDB — Overview
+      </Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+        TypeScript ORM built on the latest Dexie 4 with first-class type safety and Zod runtime validation.
+      </Typography>
+      <Box sx={{
+        display: 'grid',
+        gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' },
+        gap: 1.25,
+      }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <CodeIcon color="primary" fontSize="small" />
+          <Typography variant="body2"><strong>Entity config</strong> via defineEntity()</Typography>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <StorageIcon color="primary" fontSize="small" />
+          <Typography variant="body2"><strong>Automatic schema</strong> with PK, indexes, unique</Typography>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <PeopleIcon color="primary" fontSize="small" />
+          <Typography variant="body2"><strong>Relations</strong> with helpers</Typography>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <ScienceIcon color="primary" fontSize="small" />
+          <Typography variant="body2"><strong>Zod validation</strong> at runtime</Typography>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <AssessmentIcon color="primary" fontSize="small" />
+          <Typography variant="body2"><strong>Aggregations</strong> (count, avg, sum)</Typography>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <BarChartIcon color="primary" fontSize="small" />
+          <Typography variant="body2"><strong>Live queries</strong> with useLiveQuery()</Typography>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <CodeIcon color="primary" fontSize="small" />
+          <Typography variant="body2"><strong>TypeScript</strong> full type safety</Typography>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <CloudSyncIcon color="primary" fontSize="small" />
+          <Typography variant="body2"><strong>Cloud sync</strong> with Dexie Cloud</Typography>
+        </Box>
+      </Box>
+      
+      <Box sx={{ mt: 2, pt: 2, borderTop: '1px solid', borderColor: 'divider' }}>
+        <Button
+          variant="outlined"
+          size="small"
+          startIcon={<OpenInNewIcon />}
+          href="https://github.com/radommaciej/indexed-db-orm/blob/main/README.md"
+          target="_blank"
+          rel="noopener noreferrer"
+          sx={{ textTransform: 'none' }}
+        >
+          View full documentation
+        </Button>
+      </Box>
+    </Paper>
+  );
+}

package/react-demo-app/src/components/PostsLiveQueryDemo.tsx

@@ -0,0 +1,185 @@
+import BarChartIcon from '@mui/icons-material/BarChart';
+import DataObjectIcon from '@mui/icons-material/DataObject';
+import LightbulbIcon from '@mui/icons-material/Lightbulb';
+import ListIcon from '@mui/icons-material/List';
+import TrendingUpIcon from '@mui/icons-material/TrendingUp';
+import { Box, Button, Paper, Typography } from '@mui/material';
+
+import { usePostsLiveQueryDemo } from '../hooks/usePostsLiveQueryDemo';
+
+// Component demonstrating advanced use of useLiveQuery with posts
+export function PostsLiveQueryDemo() {
+  const {
+    allPosts,
+    publishedPosts,
+    topPosts,
+    postStats,
+    addSamplePost,
+  } = usePostsLiveQueryDemo();
+
+  return (
+    <Paper
+      sx={{
+      border: '2px solid #9c27b0',
+        p: 3,
+        my: 3,
+        borderRadius: 2,
+      backgroundColor: '#faf5ff',
+      }}
+    >
+        <Typography variant="h4" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <DataObjectIcon color="primary" />
+          Posts useLiveQuery Demo
+        </Typography>
+
+      <Box sx={{ mb: 2 }}>
+        <Button
+          variant="contained"
+          onClick={addSamplePost}
+          sx={{
+            backgroundColor: '#9c27b0',
+            '&:hover': { backgroundColor: '#7b1fa2' },
+          }}
+        >
+          Add sample post
+        </Button>
+      </Box>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr',
+          gap: '20px',
+          marginBottom: '20px',
+          alignItems: 'stretch',
+        }}
+      >
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+          <h3 style={{ display: 'flex', alignItems: 'center', gap: '8px', margin: 0 }}>
+            <BarChartIcon color="primary" fontSize="small" />
+            Statistics
+          </h3>
+          {postStats ? (
+            <div style={{ flex: 1 }}>
+              <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 style={{ flex: 1 }}>Loading statistics...</p>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+          <h3 style={{ display: 'flex', alignItems: 'center', gap: '8px', margin: 0 }}>
+            <TrendingUpIcon color="primary" fontSize="small" />
+            Top 3 posts
+          </h3>
+          {topPosts && topPosts.length > 0 && (
+            <div style={{ flex: 1 }}>
+              {topPosts.map((post, index) => (
+              <div
+                key={post.id}
+                style={{
+              padding: '8px',
+              margin: '4px 0',
+              backgroundColor: 'white',
+              borderRadius: '4px',
+              border: '1px solid #ddd',
+                }}
+              >
+              <strong>#{index + 1}</strong> {post.title}
+              <span style={{ color: '#9c27b0' }}> ❤️ {post.likes}</span>
+            </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+          <h3 style={{ margin: 0 }}>Published posts</h3>
+          {publishedPosts && publishedPosts.length > 0 && (
+          <div style={{ maxHeight: '150px', overflowY: 'auto', flex: 1 }}>
+              {publishedPosts.map((post) => (
+                <div
+                  key={post.id}
+                  style={{
+                padding: '4px 0',
+                fontSize: '0.9em',
+                borderBottom: '1px solid #eee',
+                  }}
+                >
+                <strong>{post.title}</strong> ❤️ {post.likes}
+              </div>
+              ))}
+          </div>
+          )}
+        </div>
+      </div>
+
+      {allPosts && allPosts.length > 0 && (
+      <div>
+          <h3 style={{ display: 'flex', alignItems: 'center', gap: '8px', margin: 0 }}>
+            <ListIcon color="primary" fontSize="small" />
+            All posts (newest first)
+          </h3>
+          <div
+            style={{
+          maxHeight: '200px',
+          overflowY: 'auto',
+          backgroundColor: 'white',
+          padding: '10px',
+          borderRadius: '4px',
+          border: '1px solid #ddd',
+            }}
+          >
+            {allPosts.map((post) => (
+              <div
+                key={post.id}
+                style={{
+              padding: '8px 0',
+              borderBottom: '1px solid #eee',
+              fontSize: '0.9em',
+                }}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                  }}
+                >
+                <div>
+                  <strong>{post.title}</strong>
+                    <span
+                      style={{
+                    marginLeft: '10px',
+                    padding: '2px 6px',
+                    backgroundColor: post.published ? '#4caf50' : '#ff9800',
+                    color: 'white',
+                    borderRadius: '3px',
+                    fontSize: '0.8em',
+                      }}
+                    >
+                      {post.published ? 'Published' : 'Draft'}
+                  </span>
+                </div>
+                  <div style={{ color: '#9c27b0' }}>❤️ {post.likes}</div>
+                </div>
+                <div
+                  style={{ color: '#666', fontSize: '0.8em', marginTop: '2px' }}
+                >
+                {post.content?.substring(0, 100)}...
+              </div>
+            </div>
+            ))}
+        </div>
+      </div>
+      )}
+
+      <Typography variant="body2" color="text.secondary" sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
+        <LightbulbIcon fontSize="small" /> <strong>Note:</strong> All data updates automatically! Add a post and see how all sections refresh in real time.
+      </Typography>
+    </Paper>
+  );
+}

package/react-demo-app/src/components/TypeScriptDemo.tsx

@@ -0,0 +1,190 @@
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import CodeIcon from '@mui/icons-material/Code';
+import DescriptionIcon from '@mui/icons-material/Description';
+import PeopleIcon from '@mui/icons-material/People';
+import { Box, Paper, Typography } from '@mui/material';
+
+import { useTypeScriptDemo } from '../hooks/useTypeScriptDemo';
+
+// Component demonstrating how to inspect typing in the IDE
+export function TypeScriptDemo() {
+  const {
+    users,
+    posts,
+    profiles,
+    handleUserClick,
+    handlePostClick,
+    handleProfileClick,
+  } = useTypeScriptDemo();
+
+  return (
+    <Paper
+      sx={{
+      border: '2px solid #ff9800',
+        p: 3,
+        my: 3,
+        borderRadius: 2,
+      backgroundColor: '#fff8e1',
+      }}
+    >
+        <Typography variant="h4" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <CodeIcon color="primary" />
+          TypeScript Typing Test
+        </Typography>
+      <Typography color="text.secondary" sx={{ mb: 3 }}>
+        <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.
+      </Typography>
+
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: { xs: '1fr', md: '1fr 1fr 1fr' },
+          gridTemplateRows: { xs: 'auto', md: '1fr' },
+          gap: 3,
+          alignItems: 'stretch',
+        }}
+      >
+        <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+            <Typography variant="h5" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <PeopleIcon color="primary" />
+              Users (UserEntity[])
+            </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            Typ: <code>UserEntity[] | undefined</code>
+          </Typography>
+          {users && users.length > 0 && (
+            <Paper
+              sx={{
+                maxHeight: 150,
+            overflowY: 'auto',
+                p: 1,
+              }}
+            >
+              {users.map((user) => (
+                <Box
+                key={user.id}
+                onClick={() => handleUserClick(user)}
+                  sx={{
+                    py: 0.5,
+                  borderBottom: '1px solid #eee',
+                  cursor: 'pointer',
+                    '&:hover': { backgroundColor: 'action.hover' },
+                }}
+                  title="Click to see auto-complete in the console"
+              >
+                  <Typography variant="body2">
+                <strong>{user.name}</strong> - {user.email}
+                  </Typography>
+                </Box>
+              ))}
+            </Paper>
+          )}
+        </Box>
+
+        <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+            <Typography variant="h5" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <DescriptionIcon color="primary" />
+              Posts (PostEntity[])
+            </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            Typ: <code>PostEntity[] | undefined</code>
+          </Typography>
+          {posts && posts.length > 0 && (
+            <Paper
+              sx={{
+                maxHeight: 150,
+            overflowY: 'auto',
+                p: 1,
+              }}
+            >
+              {posts.map((post) => (
+                <Box
+                key={post.id}
+                onClick={() => handlePostClick(post)}
+                  sx={{
+                    py: 0.5,
+                  borderBottom: '1px solid #eee',
+                  cursor: 'pointer',
+                    '&:hover': { backgroundColor: 'action.hover' },
+                }}
+                  title="Click to see auto-complete in the console"
+              >
+                  <Typography variant="body2">
+                <strong>{post.title}</strong> - {post.published ? 'Published' : 'Draft'}
+                  </Typography>
+                </Box>
+              ))}
+            </Paper>
+          )}
+        </Box>
+
+        <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+            <Typography variant="h5" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <AccountCircleIcon color="primary" />
+              Profiles (ProfileEntity[])
+            </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            Type: <code>ProfileEntity[] | undefined</code>
+          </Typography>
+          {profiles && profiles.length > 0 && (
+            <Paper
+              sx={{
+                maxHeight: 150,
+            overflowY: 'auto',
+                p: 1,
+              }}
+            >
+              {profiles.map((profile) => (
+                <Box
+                key={profile.id}
+                onClick={() => handleProfileClick(profile)}
+                  sx={{
+                    py: 0.5,
+                  borderBottom: '1px solid #eee',
+                  cursor: 'pointer',
+                    '&:hover': { backgroundColor: 'action.hover' },
+                  }}
+                  title="Click to see auto-complete in the console"
+                >
+                  <Typography variant="body2">
+                    <strong>User {profile.userId}</strong> -{' '}
+                    {profile.bio?.substring(0, 30)}...
+                  </Typography>
+                </Box>
+              ))}
+            </Paper>
+          )}
+        </Box>
+      </Box>
+
+      <Paper
+        sx={{
+          mt: 2,
+          p: 2,
+          backgroundColor: '#e3f2fd',
+        }}
+      >
+        <Typography variant="body2" color="text.secondary">
+          <strong>IDE Test:</strong>
+          <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>
+        </Typography>
+      </Paper>
+    </Paper>
+  );
+}

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

@@ -0,0 +1,30 @@
+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/react-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/react-demo-app/src/entities/PostTag.ts

@@ -0,0 +1,26 @@
+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 },
+  },
+});
+
+