ALT useLiveQuery((q) => q .from({ comment: commentsCollection }) .leftJoin( { issue: issuesCollection }, ({ issue, c }) => eq(comment.issue_id, issue.id) ) .leftJoin( { project: projectsCollection }, ({ project, issue }) => eq(issue?.project_id, project.id) ) .orderBy(({ comment }) => comment.created_at, 'asc') .limit(100) ) /* Dataset Size | Projects | Issues | Comments | Initial Load (ms) | Changes | Incremental (ms) -------------|----------|--------|----------|-------------------|---------|----------------- Small | 10 | 50 | 200 | 0.25 | 1 | 0.012 Medium | 50 | 250 | 1000 | 0.28 | 1 | 0.009 Large | 250 | 1250 | 5000 | 0.21 | 1 | 0.011 Very Large | 1250 | 6250 | 25000 | 0.37 | 3 | 0.052

ALT import { PGlite } from "@electric-sql/pglite"; const pg = await PGlite.create(); const results = await pg.query("select date_part('year', now()) as year;"); const year = results[0].year document.querySelector("#footer .copyright > .year").textContent = year;

ALT CREATE TABLE tasks ( task_id SERIAL PRIMARY KEY, title VARCHAR(255) NOT NULL, is_completed BOOLEAN DEFAULT FALSE ); CREATE FUNCTION generate_task_html() RETURNS trigger AS $$ const item = ( <div id={`task-${NEW.task_id}`}> <span>{NEW.title}</span> <span>Status: {NEW.is_completed ? 'Completed' : 'Pending'} </span> </div> ); updateItem(NEW.task_id, item); RETURN NEW; $$ LANGUAGE jsx; CREATE TRIGGER trigger_after_insert AFTER INSERT ON tasks FOR EACH ROW EXECUTE FUNCTION generate_task_html();

ALT <!-- App.vue --> <script lang="ts" setup> import { PGlite } from '@electric-sql/pglite' import { live } from '@electric-sql/pglite/live' import { providePGlite } from '@electric-sql/pglite-vue' const db = new PGlite({ extensions: { live } }) providePGlite(db) </script> <!-- MyComponent.vue --> <script lang="ts" setup> import { onMounted, shallowRef } from 'vue' import { injectPGlite, useLiveQuery } from '@electric-sql/pglite-vue' const db = injectPGlite() const insertItem = () => { db.query("INSERT INTO my_table (name, number) VALUES ('Arthur', 42);") } const maxNumber = 100 const items = useLiveQuery( "SELECT * FROM my_table WHERE number <= $1 ORDER BY number;", [maxNumber], ) </script> <template> <button @click="insertItem">Insert item</button> <div> <MyItem v-for="item in items" :item="item" :key="item.id" /> </div> </template>

ALT const graph = new D2({ initialFrontier: 0 }); const issuesInput = graph.newInput<[string, Issue]>(); const usersInput = graph.newInput<[string, User]>(); const commentsInput = graph.newInput<[string, Comment]>(); const commentCounts = commentsInput.pipe( map(([_key, comment]) => [comment.issue_id, 1]), concat(issuesInput.pipe(map(([_key, issue]) => [issue.id, 0]))), reduce((values) => { let count = 0; for (const [num, diff] of values) { count += num * diff; } return [[count, 1]]; }) ); issuesInput.pipe( map(([_key, issue]) => [issue.user_id, issue]), join(usersInput.pipe(map(([_key, user]) => [user.id, user]))), join(commentCounts), map(([_key, [[issue, user], commentCount]]) => [ issue.id, { ...issue, user_id: user.id, username: user.username, user_email: user.email, user_full_name: user.full_name, comment_count: commentCount || 0, }, ]), consolidate(), output((msgs) => { console.log(msg

ALT import { PGlite } from '@electric-sql/pglite' import { beforeAll, beforeEach, describe, it } from 'vitest' import { allMigrations } from './migrations' import { loadTestData } from './testData' describe('my tests', () => { let db: PGlite beforeAll(async () => { db = await PGlite.create() for (const migration of allMigrations) { await db.exec(migration) } await loadTestData(db) }) beforeEach(async () => { // Clone the database for each test const dbClone = db.clone() await setDatabaseMock(dbClone) }) it('foo', () => { // ... }) it('bar', () => { // ... }) })